/* ============================================================
   ACCOUNT — In-app settings modal (Profile / Usage / Writing / Data)

   Visual language mirrors the landing page: lapis sky behind a
   translucent glass panel (same recipe as .pricing-card on landing).
   Gold pill primaries via .landing-btn-primary; outline + danger
   variants via .acct-btn here. No new visual styles invented for
   one-off elements — anything that already exists on landing is
   reused verbatim.
   ============================================================ */

/* ---- Sidebar footer trigger button (lives in the app sidebar) ---- */
#account-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--chrome-border);
}
#account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--dur);
}
#account-btn:hover { background: var(--chrome-hover); }
.account-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--t3);
    transition: border-color var(--dur);
}
.account-avatar-initials {
    font: 500 9px var(--sans);
    color: var(--t2);
    letter-spacing: 0.3px;
}
.account-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
#account-btn:hover .account-avatar { border-color: var(--panel-border); }
.account-label {
    font: var(--font-ui-sm); color: var(--t2);
    flex: 1; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   OVERLAY + PANEL — translucent glass over a darker lapis dim
   ============================================================ */
#account-overlay {
    position: fixed; inset: 0;
    z-index: var(--z-overlay);
    /* Slightly darker dim than the default modal overlay so the
       translucent panel reads cleanly without a busy backdrop. */
    background: rgba(8,9,12,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#account-overlay.hidden { display: none; }

/* Atelier panel — one calm SOLID surface (not glass). The translucent
   glass recipe was dropped here: a flat warm-charcoal panel with a single
   hairline border reads quieter and lets the hairline-ruled content carry
   the structure. (.pricing-card / citation tooltip keep the glass; this
   surface no longer borrows it.) */
#acct-panel {
    width: 800px;
    max-width: calc(100vw - 64px);
    height: min(640px, calc(100vh - 80px));
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-radius: 18px;
    box-shadow: 0 30px 80px -24px rgba(0,0,0,0.7);
    display: flex;
    overflow: hidden;
    position: relative;
}

/* ---- Left sidebar nav ----
 * Merged shell: a single glass surface (reads as part of the app), but the
 * rail carries a faint inset tint + a gold seam on its right edge so the two
 * panes stay distinct. The seam is the ONE intentional gold anchor here —
 * lifted from the auth page's panel divide. */
#acct-sidebar {
    width: 188px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 12px;
    border-right: none;
    background:
        radial-gradient(ellipse 130% 45% at 28% 0%, rgba(224,173,78,0.05), transparent 55%),
        rgba(0,0,0,0.14);
}
#acct-sidebar::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(224,173,78,0.42) 24%, rgba(224,173,78,0.42) 76%, transparent);
}
/* Quiet muted eyebrow — gold is reserved for the one anchor signal in this
 * sidebar (the active-tab rail). The label itself doesn't earn gold. */
#acct-sidebar-title {
    font: var(--font-eyebrow);
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    padding: 4px 10px 18px;
}
.acct-nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.acct-nav-item {
    display: block; width: 100%;
    padding: 9px 12px;
    background: none; border: none;
    border-radius: var(--radius-sm);
    font: var(--font-ui);
    color: var(--t2);
    text-align: left; cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.acct-nav-item:hover {
    background: rgba(255,255,255,0.04); color: var(--t1);
}
/* Active tab — neutral surface lift only, no gold selector. Gold stays on the
 * seam (the panel's one anchor); the active item reads by brighter text + a
 * quiet raised fill. */
.acct-nav-item.active {
    background: rgba(255,255,255,0.07); color: var(--t1);
}
/* Sidebar separator — neutral hairline marking the "settings vs your data"
 * category transition. (Was a gold gradient rule; in the Atelier system gold
 * stays on the active-tab rail only.) */
.acct-nav-sep {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 10px 12px;
}

/* ---- Right content ---- */
#acct-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#acct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 36px 16px;
    flex-shrink: 0;
}
/* No header bottom rule — each tab's why-card has its own gold stele
 * crown at the top of its content card. Stacking another gold rule
 * above it would just create two parallel lines 4px apart. */
/* Page title — same serif voice as landing but a quieter scale so it
 * doesn't compete with the gold section eyebrows below it. */
#acct-page-title {
    font: 500 25px var(--serif);
    color: var(--t1);
    letter-spacing: var(--track-heading);
    line-height: 1.2;
}
.acct-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    border-radius: var(--radius-sm);
    color: var(--t3); cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur), color var(--dur);
}
.acct-close:hover { background: rgba(255,255,255,0.06); color: var(--t1); }

/* Mobile-only drill-down chrome — hidden on desktop; the 640px query reveals
   them when the account panel becomes a master/detail list on phones. */
.acct-mobile-back,
.acct-menu-close {
    display: none;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    background: none; border: none;
    border-radius: var(--radius-sm);
    color: var(--t3); cursor: pointer;
    flex-shrink: 0;
}
.acct-mobile-back:active,
.acct-menu-close:active { background: rgba(255,255,255,0.06); color: var(--t1); }

/* Past-due lives at the top of the modal (above the tabs) so it shows
 * on every tab. Empty by default — the host has zero margin, so when
 * there's no banner the layout collapses to nothing. */
#acct-global-banner {
    padding: 0 36px;
    flex-shrink: 0;
}
#acct-global-banner:empty { display: none; }
#acct-global-banner .acct-past-due-banner {
    margin-bottom: 12px;
}

#acct-content-wrap {
    flex: 1;
    overflow-y: auto;
    /* Reserve the gutter so content doesn't jump narrower when the panel
       scrollbar appears (e.g. as the instructions textarea grows). */
    scrollbar-gutter: stable;
    padding: 8px 36px 32px;
}
#acct-content { max-width: 100%; }

/* ============================================================
   SHARED — block layout, rows, section labels
   ============================================================ */
/* Whitespace + gold eyebrow do the section-dividing work, the way
 * landing does it. The horizontal-rule separator (.acct-block-separator)
 * is reserved for ONE place: above the Danger Zone block, so destructive
 * actions feel set apart from routine cleanup. */
.acct-block {
    margin-bottom: 32px;
}
.acct-block:last-child { margin-bottom: 0; }

/* Atelier content group — replaces the gold glass `why-card` wrappers that
 * used to box each cluster of rows. No background, no border: rows sit
 * directly on the panel, separated by their own hairlines (.acct-row +
 * .acct-row), grouped by whitespace and an optional .acct-section-label
 * eyebrow above. The flat, type-led look. */
/* Sections divide by WHITESPACE + a bold sans head — no rules. The panel was
 * over-ruled (a line between every row and every group read like ledger paper);
 * generous padding carries the structure instead. Only tables keep their own
 * row lines (functional for scanning). */
.acct-group {
    margin-bottom: 0;
    padding: 22px 0;
}
.acct-group:first-child { padding-top: 8px; }
.acct-group:last-child { padding-bottom: 0; }
/* Plan-summary headline (Plan tab) — the current plan name, a notch larger
 * than a standard row label so the active plan reads as the anchor. */
.acct-plan-name {
    font: 500 16px var(--sans);
    color: var(--t1);
}
/* Block separator — gold gradient rule (same recipe as the header
 * stele crown and the Plan card's gold crown). Used once, above the
 * Danger zone in the Data tab. */
.acct-block-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
    margin: 4px 0 28px;
}
/* Section labels — quiet uppercase dividers. Gold is reserved for the
 * stele crown, the Upgrade button, and other semantic moments; eyebrows
 * inside a 600px settings modal don't earn gold ceremony (landing's
 * gold eyebrows label major page sections, not row groupings). */
.acct-section-label {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    color: var(--t3);
    margin-bottom: 18px;
}
/* Routine eyebrow words (Identity, Session, Current plan, Billing, ...) are
 * dropped — they read as noise in a calm panel. The ONE label kept is the
 * destructive zone, where a colored warning genuinely earns its place. */
.acct-section-label:not(.acct-section-label--danger) { display: none; }
.acct-section-label--danger {
    color: var(--red);
}

/* ============================================================
   TYPE HIERARCHY for rich sections (Plan, Payment, Invoices, Sessions)
   One step below the serif tab title. Two text colors only — t1 for
   primary, t3 for muted — plus gold for interactive and red for problems.
   ============================================================ */
/* Sans, not serif: serif is reserved for the tab title. A bold sans label is
 * the section tier — distinct from row labels (500/14) and the uppercase
 * eyebrow table-column heads. */
.acct-section-head {
    font: 600 15px var(--sans);
    color: var(--t1);
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.acct-head-action {
    font: var(--font-ui);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.acct-head-action:hover { color: var(--accent-hover); }

/* ---- Plan card: brand emblem + headline + adjust ----
 * Emblem is a bare outline glyph (no plate/background) — line-icon style. */
.acct-plan-card { display: flex; align-items: center; gap: 14px; }
.acct-plan-emblem {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.acct-plan-emblem svg { width: 30px; height: 30px; }
.acct-plan-body { flex: 1; min-width: 0; }
.acct-plan-headline { font: 600 16px var(--sans); color: var(--t1); }
.acct-plan-tagline { font: var(--font-ui); color: var(--t2); margin-top: 3px; }
.acct-plan-meta { font: var(--font-ui); color: var(--t3); margin-top: 6px; }

/* ---- Writing instructions textarea (Writing tab) ---- */
.acct-instr { padding: 14px 0 0; }
.acct-instructions {
    width: 100%; box-sizing: border-box; margin-top: 10px;
    /* Auto-grows with content (JS) from this floor up to a cap, then scrolls.
     * No manual drag handle. */
    min-height: 72px; max-height: 200px; resize: none; overflow-y: auto;
    /* Reserve the scrollbar gutter so growing/capping never shifts the width. */
    scrollbar-gutter: stable;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    color: var(--t1); font: var(--font-ui);
    padding: 10px 12px; outline: none;
    transition: border-color var(--dur), background var(--dur);
}
.acct-instructions:focus { border-color: var(--accent-border); background: rgba(255,255,255,0.06); }
.acct-instructions::placeholder { color: var(--t4); }

/* ---- Payment row (plain text, no card-brand plate) ---- */
.acct-pay { display: flex; align-items: center; gap: 12px; }
.acct-pay-text { flex: 1; font: var(--font-ui); color: var(--t1); }
.acct-pay-text .dots { color: var(--t3); letter-spacing: 1px; }

/* ---- Data tables (sessions, invoices) ---- */
.acct-table { width: 100%; border-collapse: collapse; }
.acct-table th {
    text-align: left;
    font: 600 11px var(--sans);
    text-transform: uppercase; letter-spacing: var(--track-eyebrow);
    color: var(--t3); padding: 0 12px 11px 0;
}
.acct-table th:last-child, .acct-table td:last-child { text-align: right; padding-right: 0; }
.acct-table td {
    padding: 13px 12px 13px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font: var(--font-ui); color: var(--t3); vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.acct-table td.acct-td-primary { color: var(--t1); font-weight: 500; }
/* Full-row hover as an inset, rounded pill so the highlight doesn't run flush
 * to the table's left/right edges. Cells get a little side padding so their
 * content sits inside the pill; the overlay (::after) is inset a few px and
 * rounded, and the kebab rides on the same row hover. */
.acct-table th:first-child, .acct-table td:first-child { padding-left: 12px; }
.acct-table th:last-child,  .acct-table td:last-child  { padding-right: 12px; }
.acct-table tbody tr { position: relative; transition: background var(--dur); }
.acct-table tbody td { position: relative; z-index: 1; }
.acct-table tbody tr:hover::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; top: 1px; bottom: 1px;
    background: rgba(255,255,255,0.05);
    border-radius: 7px;
    z-index: 0;
    pointer-events: none;
}
.acct-table-action {
    color: var(--accent); cursor: pointer; font: var(--font-ui);
    background: none; border: none; padding: 0; text-decoration: none;
}
.acct-table-action:hover { color: var(--accent-hover); }
.acct-here { color: var(--t3); font-weight: 400; }

/* Device-type icon leading each sessions row (laptop vs phone). */
.acct-dev { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.acct-dev-ic { display: inline-flex; color: var(--t3); flex-shrink: 0; }
.acct-dev-ic svg { width: 16px; height: 16px; display: block; }

/* Per-row "⋯" kebab — hidden until the row is hovered. */
.acct-kebab {
    opacity: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--t3); padding: 4px 5px; border-radius: var(--radius-sm);
    transition: opacity var(--dur), background var(--dur), color var(--dur);
}
.acct-table tr:hover .acct-kebab { opacity: 1; }
.acct-kebab:hover { background: rgba(255,255,255,0.06); color: var(--t1); }
.acct-kebab svg { width: 15px; height: 15px; display: block; }
/* Shared popover (lives on <body> so the panel overflow can't clip it). */
.acct-kebab-menu {
    position: fixed; display: none; z-index: calc(var(--z-overlay) + 1);
    background: var(--chrome-bg2); border: 1px solid var(--chrome-border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 4px; min-width: 130px;
}
.acct-kebab-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font: var(--font-ui); color: var(--t1);
    padding: 7px 10px; border-radius: var(--radius-sm);
}
.acct-kebab-item:hover { background: var(--chrome-hover); }
.acct-status-bad { color: var(--red); }
.acct-empty { font: var(--font-ui); color: var(--t3); padding: 4px 0; }
/* Loading placeholder for billing slots (Stripe round-trip). */
.acct-skel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.acct-skel-bar {
    height: 14px; border-radius: 6px;
    background: rgba(255,255,255,0.06);
    animation: acct-skel-pulse 1.3s ease-in-out infinite;
}
@keyframes acct-skel-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
/* Reserve space for the Stripe-loaded billing slots so the one-time cold load
 * (no cache yet) doesn't jump the rows below as the skeleton swaps to content.
 * On reopen the cache fills these instantly, so the min-height is only ever
 * seen on the very first load. */
#acct-pay-slot { min-height: 38px; }
#acct-invoices-slot { min-height: 84px; }

/* ---- Settings rows (label left, control right) ---- */
.acct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
/* When a row has more than one action button on the right, wrap them so
 * the row's space-between still lays out cleanly. */
.acct-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.acct-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
/* Rows all use --font-ui (14px). Secondary lines differentiate by color,
 * not by going smaller (avoids the 11/12/13px stair-step). */
.acct-row-label {
    font: var(--font-ui);
    color: var(--t1);
    font-weight: 500;
}
.acct-row-desc {
    font: var(--font-ui);
    color: var(--t3);
}
.acct-row-value {
    font: var(--font-ui);
    color: var(--t1);
    text-align: right;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Field inputs — minimal borderless style matching the
 * #toc-doc / #thread-switcher pickers (top-left doc selector, top-right
 * chat selector). No background, no full border — just a faint
 * border-bottom that brightens on hover and goes gold on focus.
 * Gold caret is the typing affordance. */
.acct-field-input {
    font: var(--font-ui);
    color: var(--t1);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(212,168,68,0.30);
    border-radius: 0;
    outline: none;
    padding: 6px 0;
    width: 220px;
    transition: border-color var(--dur);
    caret-color: var(--accent);
    text-align: right;
}
/* Free-text fields (author name, institution) read left-aligned the
 * moment the user types. */
.acct-field-input--text { text-align: left; }
.acct-field-input:hover { border-bottom-color: rgba(212,168,68,0.55); }
.acct-field-input:focus { border-bottom-color: var(--accent); }
.acct-field-input::placeholder { color: rgba(232,228,212,0.35); }

/* ============================================================
   CUSTOM SELECT — reuses #toc-doc-label + .toc-menu-btn pattern
   (defined in sidebar.css). No custom trigger / chevron styles.
   ============================================================ */
.acct-csel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.acct-csel-label {
    font: var(--font-ui);
    font-weight: 500;
    color: var(--t1);
    cursor: pointer;
    white-space: nowrap;
}
/* Dropdown menu — same recipe as .dropdown-menu (doc-menu / thread-menu).
 * position: fixed so the menu escapes the account panel's overflow:hidden
 * clipping (top/right set by _bindCustomSelect from trigger.getBoundingClientRect).
 * z-index above --z-overlay so it draws above the panel itself. */
.acct-csel-menu {
    position: fixed;
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: calc(var(--z-overlay) + 1);
    padding: 4px;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}
.acct-csel.open .acct-csel-menu { display: block; }
.acct-csel-item {
    font: var(--font-ui);
    color: var(--t2);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur), color var(--dur);
}
.acct-csel-item:hover,
.acct-csel-item.active {
    background: var(--chrome-hover);
    color: var(--t1);
}

/* ---- Toggle switch ---- */
.acct-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.acct-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
/* Track: a flat recessed well when off — defined by a 1px border on a slightly
 * lifted fill, no top-biased inset shadow (that bright bottom rim read as an
 * unnatural light). ON fills with the gold pill gradient, the same material as
 * our primary buttons, so the switch reads as part of the app family rather than
 * a stock OS toggle. The thumb is a muted grey off, going to dark ink (--on-gold)
 * on the gold ON track. */
.acct-switch-track {
    width: 34px; height: 18px;
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-radius: 999px;
    position: relative;
    transition: background var(--dur), border-color var(--dur);
}
.acct-switch-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: var(--t3);
    border-radius: 50%;
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.3);
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.acct-switch input:checked + .acct-switch-track {
    background: linear-gradient(180deg, #e8bd6a 0%, var(--accent) 100%);
    border-color: transparent;
}
.acct-switch input:checked + .acct-switch-track .acct-switch-thumb {
    transform: translateX(16px);
    background: var(--on-gold);
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.3);
}

/* ============================================================
   BUTTONS — outline + danger only; primary uses .landing-btn-primary
   ============================================================ */
.acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: var(--font-ui);
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.acct-btn--outline {
    background: var(--grad-neutral-btn);
    border: 1px solid var(--chrome-border);
    color: var(--t1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px -3px rgba(0,0,0,0.5);
}
.acct-btn--outline:hover {
    filter: brightness(1.12);
    border-color: var(--panel-border);
}
.acct-btn--danger {
    background: var(--grad-red-pill);
    border: none;
    color: var(--btn-text);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.20),
        0 4px 12px -4px rgba(212,88,64,0.45);
}
.acct-btn--danger:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
/* Ghost — flat dismiss action (modal Cancel). No fill, no border until
 * hover; the colored primary beside it carries the weight. The quiet
 * secondary in the Atelier dialog. */
.acct-btn--ghost {
    background: none;
    border: 1px solid transparent;
    color: var(--t2);
}
.acct-btn--ghost:hover {
    background: rgba(255,255,255,0.05);
    color: var(--t1);
}

/* All action buttons (outline, danger, AND landing-pill primaries used
 * inside .acct-row) share a min-width so the right column lines up. */
.acct-row .acct-btn,
.acct-row .landing-btn-primary { min-width: 96px; text-align: center; }

/* Inline status tag — plain colored text, no fill (per design feedback). */
.acct-tag {
    font: var(--font-ui-sm);
    margin-left: 4px;
}
.acct-tag--ok   { color: var(--green); }
.acct-tag--warn { color: var(--warning); }

/* Disabled state — .landing-btn-primary states live in components.css */
.acct-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* In-flight async state */
.acct-btn.loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

/* ============================================================
   AUTH FORM PRIMITIVES — also consumed by the /login + /signup page
   (auth.css scopes its split-screen layout, shared by the admin sign-in).
   ============================================================ */

/* All small text in the auth form uses --font-ui (14px). No 11/12/13px
 * stair-step. Difference between elements comes from color + weight,
 * not from going progressively smaller. */

/* Google sign-in button — wears the app's default neutral button skin
 * (the --grad-neutral-btn dark gradient + inset highlight, same recipe as
 * .acct-btn--outline) so it sits in the same family as the rest of our
 * chrome instead of reading as a stock Google widget. The G logo's brand
 * colors (blue/red/yellow/green) stay multicolor as Google requires. */
.acct-login-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--grad-neutral-btn);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-btn);
    color: var(--t1);
    font: var(--font-ui);
    font-weight: 500;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px -3px rgba(0,0,0,0.5);
    transition: filter var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.acct-login-google:hover {
    filter: brightness(1.12);
    border-color: var(--panel-border);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 20px -8px rgba(0,0,0,0.55);
}
.acct-login-google svg { flex-shrink: 0; }

.acct-login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--t3);
    font: var(--font-ui);
}
.acct-login-divider::before,
.acct-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}
.acct-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.acct-login-form .acct-field-input { width: 100%; box-sizing: border-box; }
.acct-login-input { text-align: left; }

.acct-login-hint {
    font: var(--font-ui);
    color: var(--t3);
    text-align: left;
    margin: -4px 2px 4px;
}
.acct-login-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: var(--font-ui);
    color: var(--t2);
    text-align: left;
    margin: 6px 2px 6px;
    cursor: pointer;
}
.acct-login-terms input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}
/* Submit: center the content-sized landing pill within the vertical
 * stack (otherwise flex-column stretches it edge-to-edge). */
.acct-login-form .acct-login-submit {
    align-self: center;
    width: auto;
    margin-top: 8px;
}
.acct-login-error {
    font: var(--font-ui);
    color: var(--red);
    text-align: left;
}
/* Loading state — while a request is in flight the label is hidden and a
 * centered ring spins in its place. Dark ring matches the gold pill's dark
 * text (#1a1208, same value components.css uses). Shared by /login + admin. */
.acct-login-submit.is-loading { color: transparent; pointer-events: none; }
.acct-login-submit.is-loading::after {
    content: '';
    position: absolute;
    top: calc(50% - 8px); left: calc(50% - 8px);
    width: 16px; height: 16px;
    border: 2px solid rgba(26, 18, 8, 0.3);
    border-top-color: var(--on-gold);
    border-radius: 50%;
    animation: acct-spin 0.6s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }
.acct-login-alt {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font: var(--font-ui);
}
.acct-login-alt--center { justify-content: center; }
.acct-login-link {
    font: var(--font-ui);
    color: var(--t2);
    text-decoration: none;
    transition: color var(--dur);
}
.acct-login-link:hover {
    color: var(--t1);
}

/* ============================================================
   PLAN PICKER — modal-only layout glue

   The picker renders inside Modal.show using landing's canonical
   .pricing-card classes (defined in components.css). This block
   only handles the grid layout + modal-specific spacing.
   ============================================================ */
.acct-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.acct-pricing-grid .pricing-card { padding: 28px 24px 18px; }
.acct-pricing-grid .pricing-price { font-size: 44px; }
.acct-pricing-manage {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================================
   USAGE BARS
   ============================================================ */
.acct-usage-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Match the top breathing room that other tabs get from their first
     * .acct-row's padding-top (14px) — without this, the Usage tab content
     * sits visibly closer to the page title than Profile / Writing. */
    padding-top: 14px;
}
.acct-usage-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.acct-usage-label {
    font: var(--font-ui);
    font-weight: 500;
    color: var(--t1);
}
/* Aligned digits via tabular-nums in the panel's own typeface (Inter) — not
 * mono. Mono read as console output against the editorial surface, and the
 * app's own doc stats bar already uses sans + tabular-nums for counts. */
.acct-usage-frac {
    font: var(--font-ui);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}
/* The used figure is the number that matters — it carries full contrast; the
 * "/ limit" stays quiet beside it. */
.acct-usage-frac b { color: var(--t1); font-weight: 600; }
.acct-usage-pct {
    font: var(--font-ui);
    color: var(--t3);
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}
.acct-bar {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.acct-bar-fill {
    height: 100%;
    background: var(--grad-gold-pill);
    border-radius: 999px;
    transition: width 0.4s var(--ease);
    min-width: 0;
}
.acct-bar-fill--warn { background: var(--red); }
/* Storage breakdown — the storage bar is split into Documents / Sources /
 * Figures segments (each sized as a share of the limit), with a legend below.
 * Lazy-filled from /api/me/storage-breakdown. */
.acct-bar--split { display: flex; }
.acct-bar-seg { height: 100%; min-width: 2px; }
.acct-storage-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.acct-leg { display: inline-flex; align-items: center; gap: 7px; font: var(--font-ui-sm); color: var(--t3); }
.acct-leg i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.acct-leg b { color: var(--t2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Per-category tints: gold for documents, a lighter gold for sources, a faint
 * neutral for figures — one accent family, decreasing emphasis. */
.acct-bar-seg.seg-docs, .acct-leg.leg-docs i { background: var(--accent); }
.acct-bar-seg.seg-src,  .acct-leg.leg-src i  { background: rgba(var(--accent-rgb),0.5); }
.acct-bar-seg.seg-fig,  .acct-leg.leg-fig i  { background: rgba(255,255,255,0.18); }
/* Weekly spend split — one shared pool divided: agent (gold) vs autocomplete
 * (a lighter gold). Same accent family, decreasing emphasis. */
.acct-bar-seg.seg-agent,        .acct-leg.leg-agent i        { background: var(--accent); }
.acct-bar-seg.seg-autocomplete, .acct-leg.leg-autocomplete i { background: rgba(var(--accent-rgb),0.45); }
.acct-usage-desc {
    font: var(--font-ui-sm);
    font-weight: 400;
    color: var(--t3);
    margin-top: 6px;
}

/* ============================================================
   CHANGE-PASSWORD MODAL inputs
   ============================================================ */
.acct-pw-label {
    display: block;
    font: var(--font-ui-sm);
    color: var(--t2);
    margin-top: 12px;
}
.acct-pw-label .acct-field-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    text-align: left;
}
.acct-pw-error {
    color: var(--red);
    font: var(--font-ui-sm);
    min-height: 16px;
    margin-top: 10px;
}

/* ============================================================
   DATA TAB — legal links
   ============================================================ */
.acct-legal-links {
    display: flex;
    gap: 12px;
    align-items: center;
}
.acct-legal-link {
    font: var(--font-ui-sm);
    font-weight: 400;
    color: var(--t3);
    text-decoration: none;
    transition: color var(--dur);
}
.acct-legal-link:hover { color: var(--t1); }
.acct-legal-sep { color: var(--t3); }

/* ============================================================
   PAST-DUE BANNERS
   ============================================================ */
/* In-modal banner (account panel) */
.acct-past-due-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(220, 80, 60, 0.10);
    border: 1px solid rgba(220, 80, 60, 0.28);
    border-radius: var(--radius);
    color: var(--t1);
    font: var(--font-ui);
}
.acct-past-due-banner .acct-btn,
.acct-past-due-banner .landing-btn-primary { flex-shrink: 0; }

/* Global app bar (created by app.js) */
.past-due-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(220, 80, 60, 0.15);
    border-bottom: 1px solid rgba(220, 80, 60, 0.3);
    color: var(--t1);
    font: var(--font-ui);
    font-weight: 500;
    z-index: 1000;
    position: relative;
}
.past-due-btn {
    padding: 4px 12px;
    background: var(--accent-dim);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    font: var(--font-ui-sm);
    cursor: pointer;
}
.past-due-btn:hover { background: var(--accent); }

/* ============================================================
   GENERIC NOTICE BANNER (e.g. email verification reminder)
   ============================================================ */
.acct-notice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(180,83,9,0.12);
    border: 1px solid rgba(180,83,9,0.32);
    border-radius: var(--radius);
    color: var(--t1);
    font: var(--font-ui);
}
.acct-notice-banner-text { flex: 1; }
.acct-notice-banner .acct-btn { flex-shrink: 0; }

/* ============================================================
   DELETE-ACCOUNT MODAL — stat list + email-confirm + checkbox
   ============================================================ */
.acct-delete-stats {
    list-style: disc;
    padding-left: 20px;
    margin: 8px 0 12px;
    color: var(--t2);
    font: var(--font-ui);
    word-break: break-word;
}
.acct-delete-email-note {
    margin-top: 14px;
    margin-bottom: 6px;
    font: var(--font-ui);
    color: var(--t2);
}
.acct-delete-email-note strong {
    color: var(--t1);
    font-family: var(--mono);
    font-size: 12px;
}
#acct-delete-email {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 12px;
}
.acct-delete-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    font: var(--font-ui);
    color: var(--t2);
}
.acct-delete-check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
}

/* ============================================================
   RESPONSIVE — narrow viewports
   ============================================================ */
@media (max-width: 640px) {
    #acct-panel {
        flex-direction: column;
        height: min(720px, calc(100vh - 24px));
        max-width: calc(100vw - 20px);
    }

    /* Phone: iOS-style master/detail drill-down. The sidebar is the menu (a
       full-width vertical list with a "Settings" header + close); tapping a row
       reveals #acct-main — that section's content with a back arrow. Replaces
       the cramped tab strip, which couldn't show every section at once. */
    #acct-sidebar {
        width: auto;
        flex: 1;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        border-right: none;
        background: transparent;
        overflow-y: auto;
    }
    #acct-sidebar::after { display: none; }
    .acct-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 6px 12px;
    }
    #acct-sidebar-title { display: block; padding: 0; }
    #acct-menu-close { display: flex; }

    .acct-nav-items { flex-direction: column; gap: 2px; }
    .acct-nav-item {
        display: flex;
        align-items: center;
        padding: 14px;
        font-size: 15px;
        border-radius: var(--radius-sm);
    }
    /* Disclosure chevron on each row — signals "drills into a section". */
    .acct-nav-item::after {
        content: '';
        margin-left: auto;
        width: 7px; height: 7px;
        border-right: 1.5px solid var(--t3);
        border-top: 1.5px solid var(--t3);
        transform: rotate(45deg);
        flex-shrink: 0;
    }
    .acct-nav-sep { display: block; margin: 8px 14px; }

    /* Detail view — flip from the menu to the chosen section. */
    #acct-main { display: none; }
    #acct-panel.acct-show-detail #acct-sidebar { display: none; }
    #acct-panel.acct-show-detail #acct-main { display: flex; }
    #acct-mobile-back { display: flex; }

    #acct-header { justify-content: flex-start; gap: 4px; padding: 12px 12px 8px; }
    #acct-page-title { flex: 1; }
    #acct-content-wrap { padding: 0 18px 20px; }
}

@media (max-width: 480px) {
    .acct-notice-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .acct-notice-banner .acct-btn {
        align-self: flex-start;
    }
}