/* account.css — owned by new-ux lane 07; see docs/APP.md "The split stylesheets". */
/*
 * Stetworth /app — the Account screen (#/account), cut to the new-ux
 * mockup (digest 605-652) by lane 07: every rule is `ac-` prefixed
 * and tokens-only.  Created empty and linked by lane 06; this lane
 * only fills it.
 *
 * Load order is load-bearing: the /app shell links every split sheet
 * BEFORE style.css, so a rule kept behind in style.css still beats
 * its shared group there by file order.  This sheet declares no
 * design-token block of its own; its only media block is the phone
 * (max-width: 720px) block the split-sheet amendment allows
 * (docs/APP.md#the-split-stylesheets).  Ids and data hooks are the
 * contract (CONTRACTS.md §7.3); these classes are styling only.
 */

/* ============================================================
 * The page: header, then the cards grid (mockup 610 —
 * repeat(auto-fit, minmax(280px, 1fr))).  DOM order inside
 * [data-account] is balance, Claude accounts, usage, organization,
 * you (§5.6 "Phone": the single column follows DOM order); on
 * desktop CSS `order` redraws the mockup's row — Organization first
 * (mockup 611), then Balance and Claude accounts — and puts the
 * usage section after the cards on a full-width row.  Section gap
 * 30px (mockup 605; the fidelity audit, 2026-09-11, row P2).
 * ============================================================ */

.ac-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ac-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The page h1 (mockup 607: 40px display serif — the scale's
 * --fs-hero rung exactly). */
.ac-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 1.1;
    color: var(--c-ink);
}

/* The greeting intro line (§5.2; replaces the mockup's static intro
 * at 608 — 17px text serif, --fs-lede). */
.ac-greeting {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-lede);
    line-height: 1.5;
    color: var(--c-ink-soft);
}

/* Cards stretch to the row (mockup 610 leaves the grid's default
 * alignment; Organization and Balance run as tall as Claude accounts). */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

/* ============================================================
 * Cards (mockup 611-637): card ground, hairline border, and the
 * balance card's 2px accent top spine (mockup 618).
 * ============================================================ */

.ac-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: var(--c-sand-card);
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
}

.ac-card-balance {
    border-top: 2px solid var(--c-accent);
}

/* Desktop card order (mockup 611-636: Organization, Balance, Claude
 * accounts).  DOM order stays the phone's (§5.6); the 720px block
 * resets this to 0. */
.ac-card-org {
    order: -1;
}

.ac-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

/* The uppercase card eyebrow (mockup 612: 11px — --fs-micro).  Also
 * used for the You card's h2, so the heading outline stays flat. */
.ac-eyebrow {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-tag);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    font-weight: 500;
}

/* The balance number (mockup 620: 44px display serif — the --fs-44
 * rung the fidelity audit minted, 2026-09-11, row C2). */
.ac-balance {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-44);
    line-height: 1;
    color: var(--c-ink);
}

/* The "credits" unit beside the number (mockup 620: 13px). */
.ac-balance-unit {
    font-family: var(--font-ui);
    font-size: var(--fs-13);
    color: var(--c-ink-muted);
}

/* The burn / savings / cap-hint lines (mockup 621, 626: 12.5px). */
.ac-line {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-12-5);
    line-height: 1.45;
}

.ac-muted {
    color: var(--c-ink-muted);
}

.ac-savings {
    color: var(--c-status-complete);
}

/* The Balance card's action row (mockup 621): the button first, the
 * burn line to its right, wrapping under it when the card is narrow. */
.ac-balance-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
 * Buttons: the filled accent CTA, the quiet secondary, the dashed
 * link control (mockup 621, 635) and the row's × remove control.
 * ============================================================ */

.ac-btn {
    border: 1px solid var(--c-rule-strong);
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-ui);
    /* 13.5px / 500, radius 6 (mockup 621, 691, 705, 711). */
    font-size: var(--fs-13-5);
    font-weight: 500;
    padding: 8px 13px;
    border-radius: var(--r-6);
    cursor: pointer;
    align-self: flex-start;
}

.ac-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.ac-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.ac-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ac-btn-primary {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-sand-card);
}

.ac-btn-primary:hover {
    background: var(--c-accent-hover);
    color: var(--c-sand-card);
}

.ac-btn-danger {
    border-color: var(--c-status-failed);
    background: var(--c-status-failed);
    color: var(--c-sand-card);
}

/* The dashed link control (mockup 635: 13px, 8px 12px). */
.ac-btn-dashed {
    border-style: dashed;
    background: transparent;
    color: var(--c-ink-soft);
    font-size: var(--fs-13);
    padding: 8px 12px;
}

/* The borderless muted text button (mockup 705: the link form's
 * Cancel). */
.ac-btn-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--c-ink-muted);
}

.ac-btn-quiet:hover {
    border-color: transparent;
    color: var(--c-ink);
}

/* The quiet "How it works" opener (mockup 624). */
.ac-linklike {
    border: 0;
    background: transparent;
    color: var(--c-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--fs-12-5);
    cursor: pointer;
    padding: 0;
    border-bottom: 1px solid var(--c-rule-strong);
}

.ac-linklike:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

/* ============================================================
 * Claude-account rows (mockup 628-633): label + tail + used line on
 * the left, the status dot/word and the × on the right.
 * ============================================================ */

/* The card's pitch paragraph (mockup 625: 13.5px / 1.45, soft ink;
 * the fidelity audit, 2026-09-11, row C11 — it had no rule). */
.ac-pitch {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-13-5);
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.ac-claude-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-claude-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-claude-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--r-6);
}

.ac-claude-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ac-claude-label {
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--c-ink);
}

.ac-claude-tail,
.ac-claude-used {
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
}

.ac-claude-note,
.ac-claude-reason {
    margin: 2px 0 0;
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    line-height: 1.4;
    color: var(--c-ink-muted);
}

.ac-claude-error {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    color: var(--c-status-failed);
}

.ac-claude-state {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--c-ink-soft);
    white-space: nowrap;
}

/* The status word takes the state's colour like the dot (mockup 631,
 * 1251); gold as running text is the >= 4.75:1 burnished cut (§7.7). */
[data-claude-account-status="active"] {
    color: var(--c-status-complete);
}

[data-claude-account-status="cooldown"] {
    color: var(--c-burnished-text);
}

[data-claude-account-status="needs_attention"] {
    color: var(--c-status-failed);
}

/* The 7px status dot (mockup 631); the word beside it carries the
 * state too, so the colour is never alone. */
.ac-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--c-status-complete);
}

.ac-dot-cooldown {
    background: var(--c-gold);
}

.ac-dot-needs_attention {
    background: var(--c-status-failed);
}

.ac-remove {
    border: 0;
    background: transparent;
    /* live control: --c-ink-muted (6.20:1 on --c-sand-card); style.css:145
     * reserves --c-ink-faint (2.57:1) for decoration only. */
    color: var(--c-ink-muted);
    font-size: var(--fs-ui);
    cursor: pointer;
    padding: 0 2px;
}

.ac-remove:hover {
    color: var(--c-status-failed);
}

/* ============================================================
 * Usage history (mockup 638-650): full-width section after the
 * cards (CSS order; DOM order keeps it mid-column on the phone),
 * rows on the mockup's 120px / fluid / 110px grid.
 * ============================================================ */

.ac-usage {
    grid-column: 1 / -1;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 14px grid gap + 16px = the mockup's 30px section gap (605). */
    margin-top: 16px;
}

/* The title row (mockup 639): h2 left, the caption right on the same
 * baseline, one rule under the whole row. */
.ac-usage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--c-rule-strong);
    padding-bottom: 8px;
}

.ac-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-section);
    color: var(--c-ink);
}

.ac-usage-caption {
    font-family: var(--font-ui);
    font-size: var(--fs-13);
    color: var(--c-ink-muted);
}

.ac-usage-rows {
    display: flex;
    flex-direction: column;
    background: var(--c-sand-card);
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.ac-usage-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 110px;
    gap: 16px;
    align-items: baseline;
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-soft);
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
}

/* The when column (mockup 643: 13px). */
.ac-usage-when {
    color: var(--c-ink-muted);
    font-size: var(--fs-13);
}

.ac-usage-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-ink);
}

/* Plain ink, no rule (mockup 644) — the global `a` hairline in
 * style.css loads after this sheet, so it is reset here. */
.ac-usage-task {
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 0;
}

.ac-usage-task:hover {
    color: var(--c-accent);
}

.ac-usage-grant {
    color: var(--c-status-complete);
}

.ac-usage-by {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
}

.ac-usage-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--c-ink-soft);
}

.ac-usage-amount-up {
    color: var(--c-status-complete);
}

.ac-usage-empty {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-base);
    color: var(--c-ink-muted);
}

/* ============================================================
 * Organization card (mockup 611-617): name, size line and the
 * member pills (shared organizations only).
 * ============================================================ */

/* 22px text serif (mockup 613). */
.ac-org-name {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-22);
    color: var(--c-ink);
}

.ac-org-size {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-13);
    color: var(--c-ink-muted);
}

.ac-members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ac-member {
    font-family: var(--font-ui);
    font-size: var(--fs-12-5);
    padding: 4px 9px;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
    color: var(--c-ink-soft);
}

/* ============================================================
 * The You card (§5.2, §5.4): the display-name form (one row —
 * the input grows, Save stays fixed, and the form stacks only
 * below 360px — see the two media blocks at the foot of the
 * sheet), the signed-in email and Sign out.
 * ============================================================ */

.ac-name-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ac-label {
    font-family: var(--font-ui);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-tag);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    font-weight: 500;
}

.ac-input {
    flex: 1 1 12ch;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    padding: 9px 11px;
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--c-sand-page);
    color: var(--c-ink);
    outline: 0;
}

.ac-input:focus {
    box-shadow: var(--focus-ring);
}

.ac-helper {
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
}

.ac-error {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    color: var(--c-status-failed);
}

.ac-email {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    color: var(--c-ink-soft);
}

/* ============================================================
 * Dialog bodies (all three Claude dialogs and Add credits render
 * into AppSurface's [data-surface-body]; the chrome, backdrop and
 * stacking ladder are lane 06's — this sheet raises nothing).
 * ============================================================ */

.ac-dialog-lede {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-lede);
    line-height: 1.5;
    color: var(--c-ink);
}

.ac-dialog-mail {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    color: var(--c-accent);
    word-break: break-all;
}

.ac-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.ac-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
    background: var(--c-sand-page);
}

/* 28px display serif (mockup 682-684). */
.ac-tile strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-28);
    line-height: 1.1;
    color: var(--c-ink);
}

.ac-tile span {
    font-family: var(--font-ui);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-tag);
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.ac-bullets {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The ◆ glyph before each bullet (mockup 686-690) — gold marks only,
 * never running text (§7.7 contrast rule). */
.ac-bullet {
    position: relative;
    padding-left: 21px;
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.ac-bullet::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 3px;
    font-size: var(--fs-micro);
    color: var(--c-gold);
}

/* Numbered steps (mockup 695-698): a 22px gold-ringed circle holds
 * the counter on a 24px / 1fr grid; the digit is content (CSS
 * counter on ::before), so the list stays an <ol> for readers. */
.ac-steps {
    list-style: none;
    counter-reset: s;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-ui);
    font-size: var(--fs-14-5);
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.ac-steps li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    counter-increment: s;
}

.ac-steps li::before {
    content: counter(s);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--c-gold);
    color: var(--c-burnished-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Inline command in a step (mockup 697). */
.ac-steps code {
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    background: var(--c-sand-page);
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.ac-link-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--c-sand-page);
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
}

/* Fields inside the form well sit on card ground (mockup 702, 704);
 * the token field is monospace.  `.ac-input`'s `flex: 1 1 12ch` is the
 * name row's (a row); in this column it would set the field's HEIGHT
 * basis, so it is reset to a normal-height field here. */
.ac-link-form .ac-input {
    flex: 0 0 auto;
    background: var(--c-sand-card);
}

#claude-account-token-input {
    font-family: var(--font-mono);
}

/* The "N of 12 linked" counter, right-aligned on the actions row
 * (mockup 705: 12.5px). */
.ac-link-count {
    margin: 0 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--fs-12-5);
    color: var(--c-ink-muted); /* readable counter, not decoration */
}

.ac-dialog-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

/* Right-aligned actions (mockup 691, 711). */
.ac-dialog-actions-end {
    justify-content: flex-end;
}

/* ============================================================
 * Phone (< 720px; §7.8, §5.6 "Phone"): one column in DOM order,
 * the balance number drops a rung, usage rows fold to two lines
 * (when + amount first, label second), and the touch controls
 * reach the 44px floor.
 * ============================================================ */

@media (max-width: 720px) {
    /* §7.8 (touch targets >= 44px): the quiet "How it works" opener
     * grows a 44px tap area; the underline moves from a border to
     * text-decoration so it stays under the words, not the box. */
    .ac-linklike {
        min-height: 44px;
        border-bottom: 0;
        text-decoration: underline;
        text-decoration-color: var(--c-rule-strong);
    }

    .ac-linklike:hover {
        text-decoration-color: var(--c-accent);
    }

    .ac-grid {
        grid-template-columns: 1fr;
    }

    .ac-usage {
        grid-column: auto;
        order: 0;
        margin-top: 0;
    }

    /* The caption stacks under the h2 on a phone — side by side it
     * squeezes "Usage history" onto two lines. */
    .ac-usage-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .ac-card-org {
        order: 0;
    }

    /* 36px on the phone — the scale's --fs-display rung exactly. */
    .ac-balance {
        font-size: var(--fs-display);
    }

    /* Two lines: when + amount on the first, the label on the
     * second (digest "Phone-relevant" — the fixed 120/110 columns
     * would crush the title). */
    .ac-usage-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
    }

    .ac-usage-label {
        grid-column: 1 / -1;
        white-space: normal;
    }

    /* Explicit placement (not dense auto-flow) pins the amount
     * beside the when cell on the first line, so the fold is
     * deterministic whatever the child order. */
    .ac-usage-amount {
        grid-row: 1;
        grid-column: 2;
    }

    .ac-btn,
    .ac-remove {
        min-height: 44px;
    }

    .ac-card .ac-btn {
        align-self: stretch;
        width: 100%;
    }

    /* Spec 07 :181: the display-name form stays one row on phones
     * (input grows, Save fixed) and stacks only below 360px.  Same
     * specificity as the card rule above, so source order wins.  No
     * extra breakpoint (CONTRACTS R33 allows split sheets only the
     * 720px and reduced-motion preludes): the stack point is the
     * input's flex-basis — at a 360px viewport the row is 314px wide
     * (page 16px + card 22px each side), Save is 58px and the gap 8px,
     * so a 248px basis fits at 360 and wraps Save under the input from
     * 359 down. */
    .ac-name-row .ac-btn {
        align-self: center;
        width: auto;
    }

    .ac-name-row .ac-input {
        flex-basis: 248px;
    }

    .ac-tiles {
        grid-template-columns: 1fr;
    }

    /* 16px — the scale's --fs-base rung — so iOS Safari does not
     * zoom the field on focus. */
    .ac-input {
        font-size: var(--fs-base);
    }
}