/* ==========================================================================
   Auth pages (/login, /register)
   Layout only — every colour, size and control comes from the design system.
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-10);
}

.auth-logo { height: 30px; width: auto; }

.auth-switch {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-base);
    color: var(--text-muted);
}

.auth-switch a { color: var(--accent-text); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.auth-main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-6) var(--s-10);
}

.auth-col {
    width: 100%;
    max-width: 440px;
}

.auth-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}

.auth-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.18;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* One real input keeps paste, autofill and screen readers working together. */
body.account-page .verification-col { max-width: 440px; }
.verification-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.verification-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: #eeecfa; color: #6656aa; }
.verification-icon .icon { width: 23px; height: 23px; }
.verification-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #666575; }
.verification-destination { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 28px; border: 1px solid #e3e6ed; border-radius: 12px; background: #fafbfe; }
.verification-destination > .icon { flex: none; width: 20px; height: 20px; color: #697792; }
.verification-destination > div { display: grid; gap: 4px; min-width: 0; }
.verification-destination span { font-size: 12px; color: #647084; }
.verification-destination strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
body.account-page .verification-form .auth-code { height: 64px; padding: 12px 16px 12px 28px; text-align: center; font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .42em; border-radius: 12px; }
body.account-page .verification-form .auth-code::placeholder { color: #c2c8d3; opacity: 1; }
.verification-hint { display: block; color: #647084; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.verification-setup-hint { margin-top: 14px; }
body.account-page .verification-form .btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; }
.verification-help { margin-top: 24px; padding-bottom: 22px; border-bottom: 1px solid #e4e7ee; text-align: center; font-size: 12px; color: #647084; line-height: 1.6; }
.verification-help .auth-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 10px; margin-top: 5px; }
.verification-link { border: 0; background: transparent; padding: 10px 4px; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.verification-link:hover:not(:disabled) { text-decoration: underline; }
.verification-link:disabled { color: #647084; cursor: default; }
.verification-countdown { font-size: 12px; font-variant-numeric: tabular-nums; }
.verification-back { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 14px; color: #526178; font-size: 13px; }
.verification-back:hover { color: var(--accent-text); }
.verification-back:focus-visible, .verification-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

/* Paired fields — first/last name, firm size/state */
.auth-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--text-sm);
}

.auth-row a { color: var(--accent-text); font-weight: 600; }
.auth-row a:hover { text-decoration: underline; }

.auth-or { margin: var(--s-5) 0; }

.auth-note {
    margin-top: var(--s-5);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-faint);
}

.auth-note a { color: var(--accent-text); font-weight: 600; }
.auth-note a:hover { text-decoration: underline; }

/* Shown only on narrow screens, where the top-bar switch link is hidden */
.auth-switch-mobile { display: none; }

@media (max-width: 560px) {
    .auth-topbar { padding: var(--s-6); }
    .auth-main { padding: 0 var(--s-6) var(--s-10); align-items: flex-start; }
    .auth-topbar .auth-switch { display: none; }

    .auth-switch-mobile {
        display: block;
        margin-top: var(--s-6);
        text-align: center;
        font-size: var(--text-base);
        color: var(--text-muted);
    }
    .auth-switch-mobile a { color: var(--accent-text); font-weight: 600; }

    /* 16px inputs stop iOS zooming on focus; 48px controls clear the tap-target floor */
    .auth-col .input-lg { height: 48px; font-size: var(--text-md); }
    .auth-col .btn-lg { height: 48px; }
    .auth-col .choice { padding: var(--s-3) 0; }
    .auth-row { font-size: var(--text-base); }
    .auth-pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* ==========================================================================
   Logged-in pages in the same shell: onboarding, choosing a workspace,
   joining from an invite.
   ========================================================================== */

.auth-col > .steps { margin-bottom: var(--s-6); }
.auth-col > .alert,
.auth-alert { margin-bottom: var(--s-5); }

/* "you@firm.com · Log out" in the top bar */
.auth-inline-form { display: inline; }
.auth-link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent-text);
    cursor: pointer;
}
.auth-link-btn:hover { text-decoration: underline; }

.auth-block { margin-bottom: var(--s-6); }
.auth-block > .label { display: block; margin-bottom: var(--s-2); }

/* The quiet alternative under a full-width primary button: Skip for now, Cancel.
   Same treatment as the "Already have an account? Log in" line on signup. */
.auth-alt {
    margin-top: var(--s-5);
    text-align: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}
.auth-alt a,
.auth-alt .auth-link-btn { color: var(--accent-text); font-weight: 600; font-size: inherit; }
.auth-alt a:hover,
.auth-alt .auth-link-btn:hover { text-decoration: underline; }

/* Workspace picker — a hairline list, like the tables; nothing boxed */
.ws-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1px 0 var(--border);   /* top rule; each row carries its own bottom rule */
}
.ws-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-4) var(--s-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--border);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.ws-row:hover { background: var(--hover-tint); }
.ws-row:hover .ws-arrow { color: var(--accent-text); }
.ws-row-logo { height: 24px; width: auto; max-width: 72px; object-fit: contain; flex-shrink: 0; }
.ws-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ws-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-meta { font-size: var(--text-sm); color: var(--text-muted); }
.ws-arrow { flex-shrink: 0; color: var(--text-faint); transition: color var(--dur) var(--ease); }

.ws-row-new { color: var(--text-muted); }
.ws-row-new svg { flex-shrink: 0; color: var(--text-faint); }
.ws-row-new .ws-name { font-weight: 500; }
.ws-row-new:hover { color: var(--text); }

/* The error pages: a small code over the title, then the one way back */
.auth-eyebrow { margin: 0 0 var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-faint); letter-spacing: 0.04em; }

/* ---- The client's intake form: the firm's page, sections down one column ---- */
.auth-col-wide { max-width: 720px; }
.client-intake-logo { display: block; max-height: 44px; margin-bottom: var(--s-4); }
.client-intake-section { margin-bottom: var(--s-8); }
.client-intake-section .intake-title { margin-bottom: var(--s-4); }
.client-intake .intake-group + .intake-group { margin-top: var(--s-8); }

/* Public account forms share the workspace's neutral, fully framed controls. */
.account-page .public-information { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px; border-top:1px solid #dfe5ed; margin-top:28px; padding-top:20px; font-size:13px; }
.account-page .public-information a { color:#526278; text-decoration:underline; text-underline-offset:3px; }
.account-page .public-information a:focus-visible { outline:2px solid #0058d9; outline-offset:4px; }
.account-page .client-intake-guide { margin: 0 0 20px; color: #526278; font-size: 14px; line-height: 1.6; }
.account-page .client-intake-nav { position: sticky; top: 0; z-index: 10; padding: 12px 0; margin-bottom: 24px; border-block: 1px solid #dfe5ed; background: #fff; }
.account-page .client-intake-nav[hidden] { display: none; }
.account-page .client-intake-position { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #526278; margin-bottom: 6px; }
.account-page .client-intake-position label { font-weight: 600; }
.account-page .client-intake-nav p { margin: 7px 0 0; font-size: 12px; color: #526278; line-height: 1.5; }
.account-page .client-intake-section { scroll-margin-top: 165px; }
.account-page .client-intake-section h2:focus { outline: 2px solid #0058d9; outline-offset: 4px; }
.account-page .client-intake input,
.account-page .client-intake textarea { scroll-margin-top: 170px; }
.account-page > .skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; transform: translateY(-150%); padding: 10px 14px; background: #fff; color: #0058d9; border: 1px solid #0058d9; border-radius: 8px; }
.account-page > .skip-link:focus { transform: none; }
.account-page .auth-form .input,
.account-page .auth-form .select { border: 1px solid #dfe5ed; border-radius: 8px; background-color: #fff; box-shadow: none; }
.account-page .auth-form .input:hover,
.account-page .auth-form .select:hover { border-color: #b7c7e0; }
.account-page .auth-form .input:focus,
.account-page .auth-form .select:focus { border-color: #4384ee; box-shadow: 0 0 0 3px #e9f1ff; outline: none; }
.account-page .auth-form .input.is-error,
.account-page .auth-form .select.is-error { border-color: #b34545; }

/* Client intake: clear section boundaries without changing field behavior. */
.account-page .client-intake-completion { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-page .client-intake-completion p { flex:1; }
.account-page .client-intake-finish { flex:none; border:0; border-radius:6px; background:#edf3ff; color:#145bd8; min-height:40px; padding:8px 10px; font:inherit; font-size:12px; cursor:pointer; }
.account-page .client-intake-finish[hidden] { display:none; }
.account-page .client-intake-finish:focus-visible { outline:2px solid #0058d9; outline-offset:3px; }
.account-page .client-intake-send { border-top:1px solid #dfe5ed; padding-top:24px; }
.account-page .client-intake-send>p { color:#526278; font-size:13px; line-height:1.65; }
.account-page .client-intake-review { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 20px; padding:18px; margin:20px 0; background:#f5f7fa; border-radius:8px; font-size:13px; }
.account-page .client-intake-review[hidden] { display:none; }
.account-page .client-intake-review dt { color:#526278; }
.account-page .client-intake-review dd { margin:0; color:#202631; overflow-wrap:anywhere; }
.account-page .client-intake-section { margin-bottom: 40px; }
.account-page .client-intake-section > .intake-title { padding-bottom: 14px; border-bottom: 1px solid #dfe5ed; margin-bottom: 20px; font-size: 23px; line-height: 1.3; letter-spacing: -.5px; }
.account-page .client-intake .intake-sub { font-size: 15px; line-height: 1.5; color: #38475c; }
.account-page .client-intake .f-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.account-page .client-intake .f-row + .f-row { margin-top: 16px; }
.account-page .client-intake .f-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-page .client-intake .f-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-page .client-intake .input,
.account-page .client-intake .select,
.account-page .client-intake .textarea { border: 1px solid #dfe5ed; border-radius: 8px; background-color: #fff; box-shadow: none; }
.account-page .client-intake .input:focus,
.account-page .client-intake .select:focus,
.account-page .client-intake .textarea:focus { border-color: #4384ee; box-shadow: 0 0 0 3px #e9f1ff; outline: none; }
.account-page .client-intake .is-error { border-color: #b34545; }
@media (max-width: 600px) {
    .account-page .client-intake .f-row.cols-2,
    .account-page .client-intake .f-row.cols-3 { grid-template-columns: minmax(0, 1fr); }
    .account-page .client-intake .input,
    .account-page .client-intake .select,
    .account-page .client-intake .textarea { font-size: 16px; }
    .account-page .client-intake .label,
    .account-page .client-intake .choice { font-size: 14px; line-height: 1.5; }
    .account-page .client-intake-section > .intake-title { font-size: 21px; }
}
/* Signup expectations are visible before the submit action. */
.auth-form .registration-disclosure{margin:5px 0 1px;font-size:12px;line-height:1.8;color:#627087}
.auth-form .registration-disclosure a{color:#245ec7;text-decoration:underline;text-underline-offset:3px}