/* ══════════════════════════════════════════════════════════════════════
   DECKLEDGER CONSOLE — the client design system.
   Serves every client surface: /dashboard, /usage, /billing, /api-keys,
   /settings and the public countdown at /. The previous system (the
   Nightly Almanac) is archived under almanac-archive/, and almanac.css
   is still served because the master/operator pages continue to use it;
   the two stylesheets never load together on one page.

   THESIS: DeckLedger sells two claims — the recognition is correct, and
   the endpoint is up. Both are engineering claims, so the surface reads
   as an instrument panel: elevated surfaces on a cool ground, generous
   rhythm, real depth, and every figure in mono because a number you are
   billed for should be scannable character by character.

   INHERITED: the palette. --gold (#7a5a05) is primary and --azimuth
   (#2f5d86) secondary — carried over from the almanac unchanged. The
   colour did not change; the form language did.

   ACCESSIBILITY BASELINE (astigmatism), applied to everyone, no toggle:
   no decorative glows or halos, no backdrop blur, 12px minimum on labels,
   loosened uppercase tracking, and status is never carried by colour
   alone. See DESIGN.md for the measured contrast figures.

   DELIBERATELY REFUSED from the reference brief: isometric 3D tilts and
   blurred gradient orbs. Both are marketing gestures. A page showing what
   a customer is charged should not tilt, and a data table should not have
   atmosphere behind it. Depth here comes from elevation and shadow only.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ── ground & surface ──────────────────────────────────────────── */
    --ground:       #eef1f3;  /* page ground: cool chart stock          */
    --ground-2:     #e4e9ec;  /* recessed field                        */
    --surface:      #fbfcfc;  /* card: lifts off the ground            */
    --surface-2:    #f3f6f7;  /* card's own recessed field             */
    --surface-3:    #e8edef;  /* well inside a card                    */

    /* ── ink ───────────────────────────────────────────────────────── */
    --ink:          #12161b;  /* body ink                              */
    --ink-2:        #454c54;  /* secondary                             */
    --ink-3:        #5c656d;  /* apparatus / labels                    */

    /* ── structure ─────────────────────────────────────────────────── */
    --line:         #d5dce1;  /* card border, hairline                 */
    --line-2:       #c2cbd2;  /* stronger divider                      */

    /* ── accent (carried over verbatim from the almanac) ───────────── */
    --gold:         #7a5a05;
    --gold-2:       #63490a;  /* the darker end of the gradient        */
    --gold-tint:    #f2ecdb;  /* soft container fill                   */
    --on-gold:      #fdf6e4;
    --azimuth:      #2f5d86;  /* secondary / gradient partner          */
    --azimuth-tint: #e2eaf1;
    --deduct:       #8a541f;
    --deduct-tint:  #f3e9dd;
    --fault:        #94332c;
    --fault-tint:   #f6e5e3;
    --verified:     #3d6b43;
    --verified-tint:#e3eee4;

    /* ── the billable panel: one dark field, identical in both themes,
       so the figure is what carries weight rather than the panel ───── */
    --hero-ground:  #171b21;
    --hero-line:    #232932;
    --hero-line-2:  #333b46;
    --hero-ink:     #f2f4f6;
    --hero-ink-2:   #b9c1ca;
    --hero-ink-3:   #99a2ac;
    --hero-accent:  #e2ba63;   /* gold lifted to hold contrast on ink */

    /* ── elevation: shadows tinted with the accent, never neutral ──── */
    --sh-1:  0 1px 2px rgba(122,90,5,.05), 0 2px 8px rgba(18,22,27,.05);
    --sh-2:  0 4px 20px -2px rgba(122,90,5,.10), 0 2px 6px -2px rgba(18,22,27,.06);
    --sh-3:  0 10px 28px -6px rgba(122,90,5,.16), 0 8px 12px -8px rgba(18,22,27,.10);
    /* Button elevation is a cast shadow (offset, tight) rather than the
       soft glow this was. A glow is a halo, and a halo is precisely the
       artefact an astigmatic eye already produces around bright shapes —
       simulating it makes edges harder to resolve, not more tactile. */
    --sh-btn:0 2px 5px -1px rgba(18,22,27,.22);
    --sh-btn-hover: 0 4px 10px -2px rgba(18,22,27,.28);

    /* ── radii ─────────────────────────────────────────────────────── */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* ── type ──────────────────────────────────────────────────────── */
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --ease: cubic-bezier(.16,1,.3,1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* Designed for dark rather than inverted: the ground goes deeper than
       the surfaces so cards still read as lifted, and gold warms enough to
       hold contrast against a dark field. */
    --ground:       #101318;
    --ground-2:     #0b0e12;
    --surface:      #191d24;
    --surface-2:    #20252d;
    --surface-3:    #272d36;
    --ink:          #eceef1;
    --ink-2:        #b3bac2;
    --ink-3:        #88919b;
    --line:         #2c333d;
    --line-2:       #3a424e;
    --gold:         #dcb45c;
    --gold-2:       #f0c66a;
    --gold-tint:    #2b2413;
    --on-gold:      #1b1503;
    --azimuth:      #7fa9cf;
    --azimuth-tint: #1a2634;
    --deduct:       #cf9457;
    --deduct-tint:  #2e2418;
    --fault:        #d2716a;
    --fault-tint:   #2f1d1c;
    --verified:     #86b189;
    --verified-tint:#1a2a1c;
    --sh-1:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.28);
    --sh-2:  0 4px 20px -2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.34);
    --sh-3:  0 10px 28px -6px rgba(0,0,0,.6), 0 8px 12px -8px rgba(0,0,0,.4);
    --sh-btn:0 2px 5px -1px rgba(0,0,0,.45);
    --sh-btn-hover: 0 4px 10px -2px rgba(0,0,0,.55);
    /* In dark the billable panel would otherwise sit almost on top of the
       ground. It lifts a step and its edge gains contrast so it still
       reads as a distinct field rather than a hole in the page. */
    --hero-ground:  #21262f;
    --hero-line:    #39414e;
    --hero-line-2:  #454e5d;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
}

::selection { background: var(--gold); color: var(--on-gold); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border: 3px solid var(--ground);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

a { color: var(--azimuth); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); }

/* Every figure, identifier and code is mono with tabular figures and a
   slashed zero. A billed number should be readable character by character
   and columns of them should line up. */
.mono, .fig, code, kbd,
.stat-fig, .hero-fig, .measure-fig,
.obs-id, .obs-meta, .register .fig, .register .num,
.topbar-account, .computed {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "zero" 1;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.is-pending { color: var(--ink-3) !important; opacity: .55; }


/* ══ SHELL ═══════════════════════════════════════════════════════════ */

.shell {
    display: flex;
    min-height: 100vh;
    /* Reserves the rail's gutter so .page can centre in the rest. The
       transition matches the rail's own expand so the content glides
       rather than jumping when the rail is pinned. */
    padding-left: 68px;
    transition: padding-left .26s var(--ease);
}
body.rail-pinned .shell { padding-left: 244px; }

/* ── sidebar ─────────────────────────────────────────────────────────
   Expands on hover like the almanac's rail, but as a floating panel with
   its own elevation rather than a bordered gutter. */
.rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 68px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: width .26s var(--ease);
    overflow: hidden;
}
.rail:hover,
.rail:focus-within,
.rail.is-open { width: 244px; box-shadow: var(--sh-2); }
body.rail-pinned .rail { width: 244px; }

.rail-mark {
    display: flex; align-items: center; gap: 12px;
    height: 68px; padding: 0 16px;
    flex: none; white-space: nowrap;
}
.rail-mark-glyph {
    flex: none;
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--gold), var(--azimuth));
    color: var(--on-gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px; letter-spacing: -.02em;
    box-shadow: var(--sh-btn);
}
.rail-mark-word {
    font-size: 16.5px; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); opacity: 0; transition: opacity .2s;
}
.rail:hover .rail-mark-word,
.rail:focus-within .rail-mark-word,
body.rail-pinned .rail-mark-word { opacity: 1; }

.rail-nav { flex: 1; padding: 10px 12px; overflow-y: auto; overflow-x: hidden; }
.rail-group {
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
    padding: 16px 12px 7px;
    white-space: nowrap;
    opacity: 0; transition: opacity .2s;
}
.rail:hover .rail-group,
.rail:focus-within .rail-group,
body.rail-pinned .rail-group { opacity: 1; }

.rail-link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 10px;
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.rail-link:hover { background: var(--surface-2); color: var(--ink); }
.rail-link[aria-current="page"] {
    background: var(--gold-tint);
    color: var(--gold);
    font-weight: 700;
}
.rail-icon { flex: none; width: 22px; display: flex; justify-content: center; }
.rail-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.rail-label {
    font-size: 14px; letter-spacing: -.005em;
    opacity: 0; transition: opacity .2s;
}
.rail:hover .rail-label,
.rail:focus-within .rail-label,
body.rail-pinned .rail-label { opacity: 1; }

.rail-foot { flex: none; border-top: 1px solid var(--line); padding: 10px 12px; }
.rail-btn {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 10px;
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    background: none; border: none;
    color: var(--ink-2);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap; text-align: left;
    transition: background .18s, color .18s;
}
.rail-btn:hover { background: var(--surface-2); color: var(--ink); }

.rail-scrim {
    position: fixed; inset: 0;
    /* Solid dim, no backdrop blur: blurring content behind an overlay
       compounds the smearing an astigmatic eye already contends with. */
    background: rgba(10,14,18,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .22s; z-index: 39;
}
.rail-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ── page column ───────────────────────────────────────────────────
   min-width:0 is load-bearing. As a flex child, .page otherwise refuses
   to shrink below its min-content width and pushes the whole document
   wider than the viewport on narrow screens. */
/* The rail is cleared by padding on the shell, NOT by a margin on .page.
   Those are two different jobs, and conflating them was the bug: with
   margin-left doing both, there was nothing balancing the right side and
   the whole column pinned left, dumping all surplus width on the right of
   a wide monitor. Now the shell reserves the rail's width and .page
   centres itself in whatever remains. */
.page {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3.4vw, 44px) 110px;
}


/* ══ TOPBAR ══════════════════════════════════════════════════════════ */

.topbar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 34px 0 26px;
}
.topbar-title {
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
    margin: 0;
}
/* Solid gold, not a gradient. The gradient version measured badly in dark
   mode and was decoration on a page whose whole claim is that its numbers
   are plain — the emphasis is carried by colour and weight instead. */
.topbar-title em { font-style: normal; color: var(--gold); }
.topbar-sub { color: var(--ink-2); font-size: 14.5px; margin: 6px 0 0; }
.topbar-sub strong { color: var(--ink); font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-account {
    font-size: 12.5px; color: var(--ink-3);
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

/* Freshness pip — the honest signal that the figures below are current. */
.computed {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--ink-3); margin: 0;
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
/* The pip is 9px with a solid ring, not 7px with a soft halo: a small dot
   surrounded by a blurred glow is one of the hardest things for an
   astigmatic eye to resolve. A hard-edged ring reads as a ring. */
.computed::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--verified); flex: none;
    border: 2px solid var(--verified-tint);
}
.computed.is-stale::before   { background: var(--deduct); border-color: var(--deduct-tint); }
.computed.is-unknown::before { background: var(--ink-3); border-color: var(--surface-3); }
/* An empty .computed would render as a bare pip in an empty pill — billing
   leaves #renewalDate blank when there is no renewal to report. A pill with
   no statement to make should not be drawn at all. */
.computed:empty { display: none; }


/* ══ CARD — the base surface ═════════════════════════════════════════ */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: clamp(20px, 2.4vw, 28px);
    transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s;
}
/* Only cards that lead somewhere lift. A static panel that rises on hover
   is a lie about what it does. */
.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-3);
    border-color: var(--line-2);
}

.card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.card-title {
    font-size: 17px; font-weight: 700; letter-spacing: -.015em;
    margin: 0; color: var(--ink);
}
.card-note { font-size: 13.5px; color: var(--ink-3); margin: 4px 0 0; }

.grid { display: grid; gap: clamp(16px, 1.7vw, 22px); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The billable panel sizes to its own content rather than stretching to
   match the health stack beside it — matched heights left a large empty
   field, which read as decoration rather than as a data panel. The
   columns are near-even for the same reason: a wider panel just adds
   dead space to the right of a figure that is already large. */
.grid-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.grid-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }

.stack { display: flex; flex-direction: column; gap: clamp(16px, 1.7vw, 22px); }
section.band { margin-top: clamp(18px, 2vw, 26px); }


/* ══ THE BILLABLE FIGURE ═════════════════════════════════════════════
   The single most important number on the account: what this period
   costs. It gets the one dark panel on the page — a deep ink field the
   gold figure sits on.

   It was a gold→azimuth gradient first. Two problems, both visible on
   screen: sRGB interpolation between #7a5a05 and #2f5d86 passes through
   a dead olive across the whole middle of the panel, and in dark mode a
   bright gold slab on a dark page inverts the hierarchy — the panel
   shouted and the number didn't. Ink ground fixes both and reads at the
   same weight in either theme. */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--hero-ground);
    border: 1px solid var(--hero-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: clamp(24px, 2.8vw, 32px);
    color: var(--hero-ink);
    display: flex; flex-direction: column;
    gap: 4px;
}
/* One warm light source, low and wide so it grazes the panel rather than
   sitting on it as a visible blob. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 100% 0%, rgba(226,186,99,.10), transparent 62%);
    pointer-events: none;
}
.hero-label {
    position: relative;
    font-size: 12px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--hero-ink-3); margin: 0 0 12px;
}
.hero-fig {
    position: relative;
    font-size: clamp(52px, 8vw, 84px);
    font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
    margin: 0;
    color: var(--hero-accent);
}
.hero-note {
    position: relative;
    font-size: 14px; color: var(--hero-ink-2);
    margin: 14px 0 0; max-width: 36ch;
}
.hero-split {
    position: relative;
    display: flex; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap;
    margin-top: auto; padding-top: 22px;
    border-top: 1px solid var(--hero-line-2);
}
.hero-split > div { min-width: 0; }
.hero-split-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--hero-ink-3); margin: 0 0 6px;
}
.hero-split-fig {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "zero" 1;
    font-size: clamp(20px, 2.3vw, 26px); font-weight: 500;
    line-height: 1; margin: 0; letter-spacing: -.025em;
    color: var(--hero-ink);
}


/* ══ STAT ════════════════════════════════════════════════════════════ */

.stat { display: flex; align-items: flex-start; gap: 15px; }
.stat-icon {
    flex: none;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-tint); color: var(--gold);
}
.stat-icon svg { width: 20px; height: 20px; stroke-width: 1.9; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon.is-azimuth { background: var(--azimuth-tint); color: var(--azimuth); }
.stat-icon.is-deduct  { background: var(--deduct-tint);  color: var(--deduct); }
.stat-icon.is-verified{ background: var(--verified-tint);color: var(--verified); }
.stat-body { min-width: 0; flex: 1; }
.stat-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 7px;
}
.stat-fig {
    font-size: clamp(24px, 2.7vw, 31px);
    font-weight: 500; line-height: 1; letter-spacing: -.03em;
    margin: 0; color: var(--ink);
}
.stat-fig small { font-size: .48em; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.stat-sub { font-size: 12.5px; color: var(--ink-3); margin: 7px 0 0; }


/* ══ BUTTONS ═════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-family: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: -.005em;
    cursor: pointer; text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, transform .18s var(--ease), box-shadow .18s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary {
    background: linear-gradient(120deg, var(--gold-2), var(--gold));
    border-color: transparent;
    color: var(--on-gold);
    box-shadow: var(--sh-btn);
}
.btn-primary:hover {
    background: linear-gradient(120deg, var(--gold-2), var(--gold));
    color: var(--on-gold);
    transform: translateY(-2px);
    box-shadow: var(--sh-btn-hover);
}
.btn-primary:active { transform: translateY(0); }

.btn-danger { color: var(--fault); border-color: var(--line); }
.btn-danger:hover { background: var(--fault-tint); border-color: var(--fault); color: var(--fault); }

.btn-sm { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }

/* Directional feedback: the arrow moves before the page does. */
.btn-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    color: var(--gold); text-decoration: none;
}
.btn-link svg { width: 15px; height: 15px; stroke-width: 2.1; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
.btn-link:hover { color: var(--gold); }
.btn-link:hover svg { transform: translateX(3px); }


/* ══ SEGMENTED CONTROL ═══════════════════════════════════════════════ */

.epoch {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.epoch button {
    font-family: var(--mono);
    font-size: 12px; font-weight: 500;
    background: none; border: none;
    border-radius: 6px;
    color: var(--ink-3);
    padding: 6px 14px; cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
}
.epoch button:hover { color: var(--ink); }
.epoch button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--gold);
    font-weight: 700;
    box-shadow: var(--sh-1);
}


/* ══ CHART ═══════════════════════════════════════════════════════════ */

/* min-width:0 again, and an explicitly sized canvas box: Chart.js reads the
   parent's width at construction, and inside a grid/flex column that has
   not settled it measured a near-zero box and drew the whole series as a
   single spike on mobile. */
.curve-field { position: relative; height: 268px; width: 100%; min-width: 0; }
/* Almanac-authored pages put the chart in a plain block rather than a
   sized card, so the canvas has to claim the width explicitly or Chart.js
   measures a collapsed box and draws the series into a narrow spike. */
.plate .curve-field, .section .curve-field { width: 100%; display: block; }
.curve-field canvas { direction: ltr; display: block; width: 100% !important; }
.curve-empty {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 14px;
}


/* ══ REGISTER (table) ════════════════════════════════════════════════ */

/* The table scrolls sideways on narrow screens rather than compressing.
   Without the min-width it squeezed columns until the last header read
   "CH" instead of "Charge". */
.register-scroll { overflow-x: auto; border-radius: var(--r); }
.register { width: 100%; border-collapse: collapse; font-size: 14px; }
/* The min-width only applies inside a scroll container. Applied to every
   .register it forced narrow tables (billing's two-column rate ladders)
   to push the whole page wider than a phone viewport instead of fitting. */
.register-scroll > .register { min-width: 560px; }
.register caption {
    text-align: left; font-size: 13.5px; color: var(--ink-3);
    padding-bottom: 14px;
}
.register th {
    font-size: 12px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--ink-3); text-align: left;
    padding: 0 16px 11px 0;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.register th.num, .register td.num { text-align: right; padding-right: 0; }
/* A right-aligned column followed by another column collides: .num zeroes the
   right padding (correct when it is the LAST column, which it usually is), so
   a following cell butts straight against the figure. Restore the gutter when
   something follows it. */
.register th.num:not(:last-child), .register td.num:not(:last-child) { padding-right: 28px; }
.register td {
    padding: 13px 16px 13px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: middle;
}
.register tbody tr { transition: background .16s; }
.register tbody tr:hover td { background: var(--surface-2); }
.register tr:last-child td { border-bottom: none; }
.register .code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-weight: 500; }
.register .fig { font-size: 14px; color: var(--ink); }
.register tbody tr.tier-current td { background: var(--gold-tint); }

/* A cell whose count this period reports only inside a combined figure.
   Set as a class rather than inline JS styling so it inherits the 12px
   label floor and the loosened tracking from the accessibility baseline
   — the previous inline version hardcoded 11px, under that floor. */
.register td.is-unsplit {
    font-family: var(--sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3);
}
.register tbody tr.tier-current .code,
.register tbody tr.tier-current .fig { color: var(--gold); font-weight: 700; }

/* ── charge / outcome pills ──────────────────────────────────────── */
.charge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .01em;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.charge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.charge-free   { background: var(--verified-tint); color: var(--verified); }
.charge-billed { background: var(--surface-3);     color: var(--ink-2); }

/* Fault attribution — deliberately a different shape from .charge so the
   two are never confused at a glance. */
.attrib {
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
}
.attrib-ours  { color: var(--fault); background: var(--fault-tint); }
.attrib-yours { color: var(--deduct); background: var(--deduct-tint); }


/* ══ OBSERVATION ROWS ════════════════════════════════════════════════ */

.obs-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    transition: background .16s;
}
.obs-row:hover { background: var(--surface-2); }
.obs-id {
    font-size: 12.5px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obs-meta { font-size: 12px; color: var(--ink-3); flex: none; }
.obs-meta b { color: var(--ink-2); font-weight: 500; }


/* ══ MEASURES (compact stat list) ════════════════════════════════════ */

.measure {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.measure:last-child { border-bottom: none; padding-bottom: 0; }
.measure:first-child { padding-top: 0; }
.measure-label { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.measure-sub { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; }
.measure-fig {
    font-size: 21px; font-weight: 500; letter-spacing: -.025em;
    color: var(--gold); margin: 0; flex: none;
}
.measure-fig small { font-size: .55em; color: var(--ink-3); margin-left: 1px; }


/* ══ CREDENTIAL ══════════════════════════════════════════════════════ */

.credential {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.credential code {
    flex: 1; min-width: 200px;
    font-size: 13.5px; color: var(--ink);
    overflow-x: auto; white-space: nowrap;
}

.codeblock {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 18px;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
    color: var(--ink-2);
    overflow-x: auto;
    margin: 0;
}
.codeblock b { color: var(--gold); font-weight: 500; }


/* ══ TEST SCANNER ════════════════════════════════════════════════════ */

.dropfield {
    border: 1.5px dashed var(--line-2);
    border-radius: var(--r);
    background: var(--surface-2);
    padding: clamp(30px, 4vw, 46px) 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.dropfield:hover, .dropfield.is-over {
    border-color: var(--gold);
    background: var(--gold-tint);
    transform: translateY(-1px);
}
.dropfield-title { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0; }
.dropfield-note { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }

.plates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.plate-thumb {
    position: relative;
    aspect-ratio: 5/7;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    box-shadow: var(--sh-1);
}
.plate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-thumb button {
    position: absolute; top: 5px; right: 5px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(12,16,22,.72);
    color: #fff; font-size: 15px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .16s;
}
.plate-thumb button:hover { background: var(--fault); }

.progress-rule {
    height: 6px;
    background: var(--surface-3);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: 12px;
}
/* Width-based fill. A scaleX(var(--p)) version was tried to keep this off
   the layout path, but an unregistered custom property does not re-resolve
   the computed transform on update, so the bar stayed pinned at scaleX(0)
   (verified in-browser). Registering it via @property for a 6px bar that
   animates only during a manual test scan is not worth the complexity. */
.progress-rule i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold-2), var(--gold));
    border-radius: var(--r-pill);
    transition: width .3s var(--ease);
}

.finding {
    display: flex; gap: 15px; align-items: flex-start;
    padding: 15px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-top: 12px;
}
.finding img {
    width: 62px; border-radius: var(--r-sm); flex: none;
    box-shadow: var(--sh-1);
}
.finding-fault { border-color: var(--fault); background: var(--fault-tint); }
.finding-name { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 7px; }
.finding-attrs {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    font-size: 12.5px; color: var(--ink-2);
}
.finding-attrs b {
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); margin-right: 5px;
}
.finding-file {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--ink-3); margin: 8px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grade-mark {
    display: inline-block; margin-top: 8px;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
}

.quiet { color: var(--ink-3); font-size: 13.5px; margin: 0; padding: 12px 0; }
.quiet-fault { color: var(--fault); }


/* ══ LEGAL FOOTER ════════════════════════════════════════════════════ */

.legal-note {
    margin-top: clamp(30px, 4vw, 48px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
/* --ink-3 measured 4.13:1 on the light ground at this size — under AA for
   body text. Attribution is a legal notice and has to be readable, so it
   takes the secondary ink instead of the apparatus grey. */
.legal-note p {
    font-size: 11.5px; line-height: 1.7; color: var(--ink-2);
    margin: 0; max-width: 92ch;
}
.legal-note strong { color: var(--ink-2); font-weight: 700; }


/* ══ ENTRANCE ════════════════════════════════════════════════════════
   One authored moment on arrival, then the page is still. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise   { animation: rise .55s var(--ease) backwards; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .10s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .22s; }
.rise-5 { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
    * { transition-duration: .01ms !important; }
    .card-lift:hover, .btn-primary:hover, .dropfield:hover { transform: none; }
}


/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .grid-hero, .grid-split { grid-template-columns: minmax(0, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .rail {
        width: 244px;
        transform: translateX(-100%);
        transition: transform .26s var(--ease);
        box-shadow: var(--sh-3);
    }
    .rail.is-open { transform: none; }
    .rail:hover, .rail:focus-within { width: 244px; }
    body.rail-pinned .rail { width: 244px; transform: translateX(-100%); }
    body.rail-pinned .rail.is-open { transform: none; }
    .rail-mark-word, .rail-group, .rail-label { opacity: 1 !important; }
    /* The rail overlays rather than sits beside the content here, so the
       shell reserves nothing for it. */
    .shell, body.rail-pinned .shell { padding-left: 0; }
    .railToggle { display: inline-flex !important; }
    .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .topbar { padding-top: 24px; }
}

@media (max-width: 560px) {
    .hero-split { gap: 20px; }
    .measure { align-items: flex-start; flex-direction: column; gap: 6px; }
    .measure-fig { font-size: 24px; }
}


/* ══ MASTHEAD / PLATE ALIASES ════════════════════════════════════════
   The other four client surfaces were authored against the almanac's
   shell (.plate/.masthead/.period). Rather than rewrite their markup,
   those names are given console-idiom definitions here so one stylesheet
   swap converts a page. New markup should prefer .page/.topbar. */
.plate {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3.4vw, 44px) 110px;
}
.masthead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 34px 0 0;
}
.masthead-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; width: 100%;
}
.masthead-title {
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
    margin: 0;
}
.masthead-account {
    font-size: 12.5px; color: var(--ink-3);
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.masthead-rule {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; width: 100%;
    padding: 8px 0 26px;
}
.period { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.period strong { color: var(--ink); font-weight: 700; }

/* Sections: on the console these are cards, not ruled bands. */
.section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: clamp(20px, 2.4vw, 28px);
    margin-bottom: clamp(16px, 1.7vw, 22px);
}
.section + .section { border-top: 1px solid var(--line); }
.section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.section-title {
    font-size: 17px; font-weight: 700; letter-spacing: -.015em;
    margin: 0; color: var(--ink);
}
.section-note { font-size: 13.5px; color: var(--ink-3); margin: 4px 0 0; }

.columns { display: grid; gap: clamp(16px, 1.7vw, 22px); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1080px) { .columns { grid-template-columns: minmax(0,1fr); } }

/* The reckoning strip, kept for pages that still use it. */
.reckoning {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: clamp(20px, 3vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 32px);
    margin-bottom: clamp(16px, 1.7vw, 22px);
}
@media (max-width: 780px) {
    .reckoning { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .reckoning .flank-r { text-align: left; }
    .governing { border-left: none; border-right: none;
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
        padding: 20px 0; text-align: left; }
}
.flank-label, .governing-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 8px;
}
.flank-fig {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: clamp(24px, 3.2vw, 34px); font-weight: 500;
    line-height: 1; margin: 0; color: var(--ink); letter-spacing: -.025em;
}
.flank-r { text-align: right; }
.flank-r .flank-fig { color: var(--deduct); }
.flank-note, .governing-note { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.governing { text-align: center; padding: 0 clamp(16px,3vw,40px);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.governing-label { color: var(--gold); }
.governing-fig {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: clamp(40px, 7vw, 68px); font-weight: 700;
    line-height: 1.02; margin: 0; color: var(--gold); letter-spacing: -.03em;
}


/* ══ FIELDS ══════════════════════════════════════════════════════════ */
.field { display: block; margin-bottom: 18px; }
.field-label {
    display: block;
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
    width: 100%;
    font-family: var(--sans); font-size: 14.5px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 13px;
    transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-tint);
}
.field-hint { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; }

.filter-input {
    font-family: var(--mono); font-size: 13px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    min-width: 190px;
    transition: border-color .18s, box-shadow .18s;
}
.filter-input:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-tint);
}


/* ══ MODAL ═══════════════════════════════════════════════════════════ */
.modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(10,14,18,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-plate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: 28px;
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
}


/* ══ LEGEND ══════════════════════════════════════════════════════════ */
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.legend-key {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-2); font-style: normal;
}
.legend-key i {
    width: 11px; height: 11px; flex: none;
    display: inline-block; border-radius: 3px;
}


/* ══ INLINE BUTTONS ══════════════════════════════════════════════════ */
.inline-btn {
    background: none; border: none;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--azimuth); cursor: pointer; padding: 4px 2px;
    border-radius: 4px;
    transition: color .16s;
}
.inline-btn:hover { color: var(--gold); text-decoration: underline; }
.inline-btn-danger { color: var(--fault); }
.inline-btn-danger:hover { color: var(--fault); }


/* ══ ROW STATES ══════════════════════════════════════════════════════ */
.register tbody tr.group-end td { border-bottom-color: var(--line-2); }
.register tbody tr.is-revoked td { opacity: .55; }
.register tbody tr.is-revoked .code { text-decoration: line-through; }


/* ══ TOASTS ══════════════════════════════════════════════════════════ */
.toasts {
    position: fixed; right: 20px; bottom: 20px; z-index: 70;
    display: flex; flex-direction: column; gap: 10px;
}
/* Status is carried by a small leading dot, not a thick coloured left
   border. The side-tab accent is the most recognisable tell of generated
   UI, and it also encodes meaning in colour alone; the dot reads as a
   status indicator and matches the .computed pip used elsewhere.
   Selector note: real markup uses `.toast` / `.toast-fault` / `.toast-ok`
   (see billing, api-keys, settings), and .toasts > * catches any child a
   page appends without the class. */
.toasts > *, .toast {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-3);
    padding: 12px 16px;
    font-size: 13.5px; color: var(--ink);
    max-width: 360px;
}
.toasts > *::before, .toast::before {
    content: ''; flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
}
.toast-fault::before, .toast.is-fault::before { background: var(--fault); }
.toast-ok::before,    .toast.is-ok::before    { background: var(--verified); }