/* Account-only layout. Public shell and original OTP styles stay unchanged. */
.account-page .site-canvas>main { display:flex; align-items:center; }
.account-page .site-canvas .account-panel.account-panel { width:min(1120px,calc(100% - 80px)); padding-block:32px; }
.account-page [data-account-auth-root] { min-width:0; }
.account-page .account-auth-form,.account-page .account-grid {
 --account-stage-height:580px;
 height:var(--account-stage-height); border:0; border-radius:0;
 background:transparent; box-shadow:none;
 display:grid; grid-template-columns:minmax(240px,1fr) minmax(460px,.95fr);
 width:100%; margin:0; gap:0; min-height:0;
}
.account-page .account-welcome,.account-page .identity-ribbon {
 position:relative; isolation:isolate; background:transparent; color:var(--ink);
 border:0; border-radius:0; padding:38px;
 display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:0;
}
.account-kicker { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.15em; font-weight:600; color:#737983; }
.account-status-dot { width:5px; height:5px; border-radius:50%; background:#c6a575; flex:none; }
.account-welcome-copy { margin-top:38px; z-index:2; }
.account-welcome-copy h2 { font-size:clamp(28px,3.2vw,46px); line-height:1.4; letter-spacing:-.055em; font-weight:600; }
.account-welcome-copy h2>.title-point { color:#ae854f; margin-left:4px; }
.account-welcome-copy p { font-size:13px; line-height:1.9; color:#737983; margin-top:20px; }
.account-thread-art { position:absolute; inset:39% -8% 0 -12%; pointer-events:none; z-index:-1; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 22%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 28%,#000 70%,transparent); mask-composite:intersect; }
.account-auth-content { min-width:0; display:flex; align-items:center; justify-content:center; }
.account-page .account-auth-form .auth-form-wrap { border:0; border-radius:0; box-shadow:none; width:460px; max-width:100%; min-height:0; padding:30px 40px; background:none; }
.account-auth-form:not(.auth-code-stage) #auth-title { font-size:30px; line-height:1.35; text-align:left; letter-spacing:-.05em; }
.account-auth-form:not(.auth-code-stage) .auth-intro { min-height:0; line-height:20px; margin:8px 0 24px; text-align:left; font-size:12px; color:#596a82; }
.account-auth-form .auth-tabs { margin-bottom:20px; border-radius:9px; background:#f2f3f4; padding:4px; border-color:#e6e7e9; }
.account-auth-form .auth-tabs a { padding:8px; font-size:12px; transition:background-color 180ms,color 180ms; }
.account-auth-form .auth-form label:not(.check-label) { margin:14px 0 7px; line-height:18px; font-size:12px; }
.account-auth-form:not(.auth-code-stage) .auth-form input:not([type=checkbox]) { min-height:46px; background:#fafafa; border-color:#e0e2e6; border-radius:8px; }
.account-auth-form:not(.auth-code-stage) .auth-form input:focus { border-color:#777d86; background:#fff; outline:2px solid #a4a9b333; outline-offset:1px; }
.account-auth-form .auth-form .button:not(.code-send) { min-height:46px; margin-top:20px; padding-block:11px; }
.account-auth-form .auth-meta { font-size:10px; line-height:18px; margin-top:12px; }
.account-auth-form .auth-meta>span { color:#797d85; }
.account-auth-form .auth-meta>a { font-size:11px; color:#42464e; }
.account-auth-form .auth-status { min-height:40px; font-size:11px; line-height:20px; margin-top:8px; }
.account-auth-form .auth-note { margin-top:10px; padding-top:14px; font-size:10px; line-height:20px; color:#596a82; }
/* Protected verification block keeps its original typography, slot sizes, and spacing. */
.account-auth-form.auth-code-stage #auth-title { font-size:26px; line-height:1.4; text-align:center; letter-spacing:-.04em; }
.account-auth-form.auth-code-stage .auth-form-wrap { padding:32px 40px 28px; }
.account-auth-form.auth-code-stage .auth-intro { min-height:0; line-height:20px; margin:8px 0 20px; }
.account-auth-form.auth-code-stage .auth-status { min-height:44px; font-size:12px; }
.account-auth-form.auth-code-stage .auth-note { padding-top:16px; margin-top:16px; font-size:11px; }
/* Signed-in content also sits directly on the page. */
.account-page .account-grid { grid-template-columns:330px minmax(0,1fr); }
.account-page .identity-ribbon { gap:0; min-height:0; }
.account-page .identity-person { margin-top:36px; flex:0; }
.account-page .avatar-placeholder { width:62px; height:62px; border:1px solid #d8dbe0; background:#edeff2; color:#5e6673; font-size:25px; border-radius:16px; margin-bottom:18px; }
.account-page .identity-person h2 { font-size:23px; margin:0 0 10px; min-height:32px; line-height:32px; max-width:100%; }
.account-page .identity-person .pill { background:transparent; border-color:#d8dbe0; color:#6d7480; padding:3px 10px; }
.account-page .identity-id { min-width:0; padding:0; margin-top:auto; border:0; z-index:2; }
.account-page .identity-id .eyebrow { color:#737983; font-size:9px; margin-bottom:8px; }
.account-page .identity-id strong { font-size:29px; font-weight:400; letter-spacing:.08em; min-height:38px; line-height:38px; }
.account-page .identity-id p { color:#737983; font-size:10px; margin-top:7px; }
.account-page .account-profile-art { position:absolute; inset:38% -10% 10% -15%; z-index:-1; pointer-events:none; overflow:hidden; opacity:.55; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 70%,transparent),linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent); mask-composite:intersect; }
.account-page .logout-button { align-self:start; font-size:11px; color:#6d7480; padding:10px 0; margin-top:32px; border-top:1px solid #dcdfe3; width:100%; border-radius:0; min-height:38px; }
.account-page .logout-button:hover { color:#24272c; }
.account-page .account-lower { display:flex; flex-direction:column; min-width:0; padding:32px 36px; gap:22px; }
.account-page .security-card { border:0; border-radius:0; padding:0; background:transparent; flex:1; }
.account-page .security-card-heading { padding:0 0 20px; align-items:center; }
.account-page .security-card-heading .eyebrow { font-size:9px; letter-spacing:.13em; margin-bottom:8px; color:#858a92; }
.account-page .security-card-heading h2 { font-size:25px; letter-spacing:-.04em; }
.account-heading-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid #e6e7e9; border-radius:50%; }
.account-page .security-row { min-height:83px; padding:14px 0; gap:14px; }
.account-page .security-icon { background:none; border:0; color:#7b828b; width:30px; }
.account-page .security-icon .icon { width:20px; height:20px; stroke-width:1.5; }
.account-page .security-row h3 { font-size:13px; }
.account-page .security-row p { font-size:11px; color:#737983; }
.account-page .security-row .button { min-height:36px; min-width:88px; border-radius:7px; font-size:11px; padding:8px 12px; background:#fafafa; }
.account-page .security-row .button:hover { background:#eeeef0; }
.account-page .access-card { flex:none; border:0; border-top:1px solid #dedfe3; background:transparent; padding:18px 0 0; border-radius:0; display:block; overflow:visible; }
.account-page .access-heading { display:flex; align-items:center; gap:8px; }
.account-page .access-heading .eyebrow { font-size:9px; color:#8c7859; }
.account-page .access-decoration { height:16px; margin:0; color:#a48659; }
.account-page .access-decoration .icon { width:16px; height:16px; }
.account-page .access-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.account-page .access-card h2 { font-size:20px; line-height:28px; min-height:28px; margin:8px 0 5px; letter-spacing:-.035em; }
.account-page .account-profile-message { min-height:38px; font-size:11px; line-height:19px; max-width:390px; }
.account-page .access-summary>.text-link { flex:none; font-size:11px; padding:8px 0; }
.account-page .access-note { margin-top:10px; padding-top:9px; font-size:9px; color:#827d74; border-color:#e0ddd6; }
@media (max-height:800px) {
 .account-page .site-canvas .account-panel.account-panel { padding-block:24px; }
 .account-page .account-auth-form,.account-page .account-grid { --account-stage-height:540px; }
 .account-page .account-welcome,.account-page .identity-ribbon { padding:30px; }
 .account-welcome-copy { margin-top:30px; }
 .account-auth-form .auth-form-wrap { padding-block:24px; }
 .account-auth-form:not(.auth-code-stage) .auth-intro { margin-bottom:16px; }
 .account-auth-form .auth-tabs { margin-bottom:14px; }
 .account-auth-form .auth-form label:not(.check-label) { margin-top:10px; }
 .account-auth-form .auth-status { min-height:32px; }
 .account-auth-form .auth-note { margin-top:8px; padding-top:10px; }
 .account-page .account-lower { padding:24px 30px; gap:16px; }
 .account-page .security-card-heading { padding-bottom:16px; }
 .account-page .security-row { min-height:76px; }
}
@media (max-height:700px) {
 .account-page .site-canvas .account-panel.account-panel { padding-block:16px; }
 .account-page .account-auth-form,.account-page .account-grid { --account-stage-height:448px; }
 .account-page .account-welcome,.account-page .identity-ribbon { padding:26px 28px; }
 .account-welcome-copy { margin-top:25px; }
 .account-welcome-copy h2 { font-size:28px; }
 .account-welcome-copy p { margin-top:12px; font-size:11px; }
 .account-auth-form:not(.auth-code-stage) .auth-form-wrap { padding:20px 40px; }
 .account-auth-form:not(.auth-code-stage) #auth-title { font-size:26px; }
 .account-auth-form:not(.auth-code-stage) .auth-intro { margin:4px 0 14px; }
 .account-auth-form .auth-tabs { margin-bottom:10px; }
 .account-auth-form .auth-tabs a { padding-block:6px; }
 .account-auth-form .auth-form label:not(.check-label) { margin-top:8px; margin-bottom:5px; }
 .account-auth-form:not(.auth-code-stage) .auth-form input:not([type=checkbox]) { min-height:40px; padding-block:8px; }
 .account-auth-form .auth-form .button:not(.code-send) { min-height:40px; margin-top:14px; padding-block:8px; }
 .account-auth-form .auth-status { min-height:24px; margin-top:4px; }
 .account-auth-form .auth-note { line-height:18px; padding-top:8px; margin-top:8px; }
 .account-page .identity-person { margin-top:22px; }
 .account-page .avatar-placeholder { width:46px; height:46px; font-size:21px; margin-bottom:12px; border-radius:12px; }
 .account-page .identity-person h2 { font-size:21px; margin-bottom:6px; }
 .account-page .identity-id strong { font-size:26px; }
 .account-page .logout-button { margin-top:20px; }
 .account-page .account-lower { padding:22px 28px; gap:12px; }
 .account-page .security-card-heading { padding-bottom:12px; }
 .account-page .security-card-heading h2 { font-size:22px; }
 .account-page .security-card-heading .eyebrow { margin-bottom:4px; }
 .account-page .security-row { min-height:65px; padding-block:9px; }
 .account-page .access-card { padding:12px 0 0; }
 .account-page .access-card h2 { font-size:18px; margin:4px 0; }
 .account-page .access-note { margin-top:6px; padding-top:6px; }
}
@media (max-width:1100px) {
 .account-page .account-grid { grid-template-columns:260px minmax(0,1fr); }
 .account-page .account-lower { padding-inline:24px; }
 .account-page .access-summary { align-items:start; }
 .account-page .account-profile-message { max-width:230px; }
 .account-page .security-action-slot { width:88px; }
}
@media (prefers-reduced-motion:reduce) {
 .account-page .auth-tabs a { transition:none; }
}

/* Login and registration share one top anchor and identical common fields. */
.account-page .account-auth-form { --account-form-gap:20px; }
.account-page [data-auth-credentials]>.auth-input-row,
.account-page [data-auth-credentials]>:is([data-signup-code],[data-inline-login]) { margin-top:var(--account-form-gap); }
.account-page .inline-login-options { align-items:center; min-height:28px; gap:8px; margin-top:var(--account-form-gap); }
/* Reserve the login-only row in signup so the shared divider/note stays aligned. */
.account-page .inline-login-options[hidden] { display:flex!important; visibility:hidden; }
.account-page .inline-login-options .check-label { margin:0!important; font-size:11px; line-height:18px; }
.account-page .inline-login-options .check-label input { flex:none; }
.account-page .inline-login-options .auth-code-retry { height:28px; margin:0; }
.account-page .inline-login-options>a { margin-left:auto; }
.account-page .account-auth-form:not(.auth-code-stage) .account-auth-content { align-items:flex-start; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-form-wrap { padding:32px 40px; }
.account-page .account-auth-form:not(.auth-code-stage) #auth-title { font-size:30px; line-height:1.35; margin:0 0 var(--account-form-gap); }
.account-page .account-auth-form:not(.auth-code-stage) .auth-tabs { margin-bottom:var(--account-form-gap); }
.account-page .account-auth-form:not(.auth-code-stage) .auth-tabs a { padding-block:8px; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-form label { margin:8px 0 5px; line-height:18px; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-form input:not([type=checkbox]) { min-height:42px; padding-block:9px; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-form .button:not(.code-send) { min-height:44px; margin-top:var(--account-form-gap); padding-block:10px; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-status { min-height:40px; margin-top:6px; }
.account-page .account-auth-form:not(.auth-code-stage) .auth-note { font-size:10px; line-height:18px; padding-top:8px; margin-top:8px; }
@media(max-height:800px){
 .account-page .account-auth-form:not(.auth-code-stage) .auth-form-wrap { padding-block:24px; }
}
@media(max-height:700px){
 .account-page .account-auth-form { --account-form-gap:16px; }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-form-wrap { padding-block:8px; }
 .account-page .account-auth-form:not(.auth-code-stage) #auth-title { font-size:24px; line-height:1.3; margin-bottom:var(--account-form-gap); }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-tabs { margin-bottom:var(--account-form-gap); }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-tabs a { padding-block:5px; }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-form label { margin:4px 0; line-height:16px; }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-form input:not([type=checkbox]) { min-height:40px; padding-block:8px; }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-form .button:not(.code-send) { min-height:40px; margin-top:var(--account-form-gap); padding-block:8px; }
 .account-page .account-auth-form:not(.auth-code-stage) .auth-status { min-height:24px; line-height:18px; margin-top:4px; }
}

/* Clip only the nickname viewport; the rest of the page retains natural overflow. */
.account-page .identity-person { min-width:0; width:100%; }
.account-page .identity-person [data-profile-display-name] {
 display:block; width:100%; min-width:0; max-width:100%; height:32px;
 white-space:nowrap; overflow:hidden;
}
[data-profile-display-name] [data-nickname-text] { display:inline-block; white-space:nowrap; }
[data-profile-display-name][data-nickname-overflow=true] [data-nickname-text] {
 animation:account-nickname-scroll var(--nickname-duration,8s) ease-in-out infinite;
 animation-play-state:var(--nickname-play-state,running);
}
[data-profile-display-name]:is(:hover,:focus-within) [data-nickname-text] { animation-play-state:paused; }
[data-profile-display-name]:focus-visible { outline:2px solid #8b929e; outline-offset:3px; }
@keyframes account-nickname-scroll {
 0%,8%,100% { transform:translateX(0); }
 50%,58% { transform:translateX(var(--nickname-travel,0px)); }
}
@media (prefers-reduced-motion:reduce) {
 [data-profile-display-name][data-nickname-overflow=true] [data-nickname-text] {
  animation:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:top;
 }
}
/* Keep the welcome art independent of the taller registration form. */
.account-page .account-auth-form .account-welcome { height:var(--account-stage-height); align-self:start; }
/* Remove the native checkbox top offset when centering the consent row. */
.account-page .inline-signup-options .auth-agreement input { margin:0; align-self:center; }

/* Contact action slots keep their geometry while fresh authorization arrives. */
.account-page .security-action-slot { min-height:36px; }
.account-contact-actions { display:flex;gap:8px; }
.account-page .security-row .account-contact-actions .button { min-width:40px;padding-inline:6px; }
.account-original-contact { color:var(--muted);font-size:12px;line-height:17px;text-align:right; }
.account-page .security-row .account-contact-actions .button:focus-visible { outline:2px solid currentColor;outline-offset:2px; }