/* ledger.css — GCS Ledger authenticated design system (production bundle).
   Built from ui_vnext/ (Direction A 'The Ledger', jury-approved 139/150.)
   Order: tokens -> foundations -> components -> motion -> integration.
   Source of truth: ui_vnext/; edit there and rebundle. */
/* ============================================================================
   ui_vnext/tokens/ledger.css — "The Ledger" (Direction A, jury-approved)

   THE single source of colour, type, space, motion timing, and focus tokens
   for UI vNext. No page or component may define a colour/size literal —
   everything references these custom properties. New colour pairs require a
   token PR (docs/ui_revolution/visual_language.md).

   Extracted verbatim from ui_vnext/prototypes/direction-a/tokens.css (:root).

   FONT PLAN (docs/ui_revolution/asset_manifest.md): prototype pages load a
   trimmed Google Fonts request — Cormorant Garamond 0,500 / 0,600 / 1,500 +
   Inter Tight variable 400..600. At integration these become 4 SELF-HOSTED
   woff2 latin subsets in ui_vnext/assets/fonts/ (cormorant-500.woff2,
   cormorant-600.woff2, cormorant-italic-500.woff2, inter-tight-var.woff2),
   declared via @font-face in this file with font-display: swap, and the
   Google request is removed. JetBrains Mono is dropped — mono docket IDs and
   timestamps fall back to the ui-monospace system stack.
   ============================================================================ */

:root {
  /* The obsidian/paper/hairline/brass/ink/status ladder that used to open this
     block is GONE, not orphaned: it moved to tokens.css, which every base that
     links this file links first. Values were identical hex-for-hex, so nothing
     moves — what changes is that a colour is now defined ONCE for the whole
     product instead of separately in each shell, which is the precondition for
     the "one colour system" the design standard asks for. Add a colour to
     tokens.css; never re-declare one here. Type, space and motion below stay,
     because ledger.css is still their historical source. */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fs-display: clamp(3.3rem, 7.6vw, 6.9rem); /* >= 6.5rem at 1440 */
  --fs-h2-serif: clamp(1.9rem, 3.3vw, 3rem); --fs-outcome: clamp(1.7rem, 2.7vw, 2.5rem); --fs-metric: clamp(2.3rem, 3.4vw, 3.6rem); --fs-metric-lg: clamp(2.8rem, 4vw, 4.2rem); --fs-body: 1rem; /* 16px */
  --fs-lede: 1.0625rem; /* 17px — the one-sentence brief, intro copy      */
  --fs-row: 0.9375rem; /* 15px — table rows, list rows: read all day     */
  --fs-fine: 0.9375rem; /* 15px — explanatory copy. Was 13.5px and dim.   */
  --fs-note: 0.8125rem; /* 13px — a note UNDER a figure. The only small size. */
  --fs-cap: 0.6875rem; /* 11px — true micro-caps: table heads, eyebrows  */

  --ls-cap: 0.16em; /* optical letterspacing for small caps (trimmed at 12px) */
  --ls-etch: 0.19em; /* ---- Space ---- */
  --sp-section: clamp(96px, 12vw, 172px); /* >= 160px between public sections at 1440 */
  --sp-block: clamp(40px, 5vw, 72px); --gutter: clamp(20px, 4vw, 56px); --measure: 62ch; /* ---- Motion — UI response, not cinema. 600ms felt broken. ---- */
  /* --ease-out / --dur / --dur-slow now come from tokens.css, so the two
     shells stop animating at two different speeds. */
  --dur-scene: 600ms; /* marketing scroll scenes only */

  /* ---- The one action colour. Ivory on obsidian, never gold. ---- */
  /* --action / --lift-* / --r-* / --focus-ring / --hairline-2 / --key all
     moved to tokens.css with identical values. */
  --rail: 296px; --aside: 360px; --t-fast: 120ms; --t-med: 200ms; --t-rise: 600ms; --t-reveal: 450ms; }

/* The Ledger is an obsidian design — declare the scheme so the UA paints form
   controls, scrollbars and the caret dark, and browser autofill uses its dark
   styling instead of a pale-blue wash. */
:root { color-scheme: dark; }

/* Autofilled fields (login etc.) keep the obsidian ground and ivory ink instead
   of the browser's default pale-blue fill. The 9999s background transition is
   the standard trick to defeat the UA autofill background repaint. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-0);
  -webkit-box-shadow: inset 0 0 0 1000px var(--bg-2);
  caret-color: var(--ink-0);
  transition: background-color 9999s ease-out 0s;
}
/* ============================================================================
   ui_vnext/foundations/reset.css — reset + base element styles
   Extracted from ui_vnext/prototypes/direction-a/tokens.css (Reset + base).
   Depends on tokens/ledger.css (custom properties). No component styles here.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; overflow-x: clip; }
body {
  margin: 0; padding: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--ink-0); }
em { font-style: italic; }
::selection { background: var(--brass-a28); color: var(--ink-0); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
/* ============================================================================
   ui_vnext/foundations/typography.css — the typographic voice
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Rules: docs/ui_revolution/typography.md — one pivot per headline, small
   caps are the interface voice, serif numerals for money (hung `$`),
   tabular alignment, 12px interface floor.
   ============================================================================ */

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  text-wrap: balance;
}
.display .pivot { font-style: italic; font-weight: 500; color: var(--brass-300); }

.h-serif {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h2-serif);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  text-wrap: balance;
}
.h-serif .pivot { font-style: italic; color: var(--brass-300); }

.outcome {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-outcome);
  line-height: 1.14;
  letter-spacing: -0.008em;
  color: var(--ink-0);
  text-wrap: balance;
}
.outcome .pivot { font-style: italic; color: var(--brass-300); }

/* Enormous serif numerals with an oldstyle feel */
.metric {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-metric);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  font-feature-settings: "onum" 1, "pnum" 1;
}
.metric--lg { font-size: var(--fs-metric-lg); }
.metric .cur, .metric .unit {
  font-size: 0.55em; color: var(--ink-3); font-weight: 500;
  letter-spacing: 0; vertical-align: baseline;
}

.sc {
  font-family: var(--sans);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--ink-2);
}
.etched {
  font-family: var(--sans);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lede { font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); max-width: var(--measure); margin: 0; font-weight: 400; text-wrap: pretty; letter-spacing: 0.002em; }
.fine { font-size: var(--fs-fine); color: var(--ink-2); line-height: 1.65; }
.tnum { font-variant-numeric: tabular-nums lining-nums slashed-zero; font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1, "kern" 1; font-variant-ligatures: none; letter-spacing: -0.006em; white-space: nowrap; font-style: normal; }

/* Hanging currency: digits right-align on the column; the symbol hangs left */
.amt { position: relative; display: inline-block; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.amt .cur { position: absolute; right: 100%; padding-right: 0.06em; color: var(--ink-3); font-size: 0.86em; }
.amt .per { color: var(--ink-3); font-size: 0.86em; }

@media (max-width: 560px) {
  .amt .cur { position: static; padding-right: 0; }
}
/* ============================================================================
   ui_vnext/foundations/a11y.css — focus ring, screen-reader-only, skip link
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Gates: docs/ui_revolution/accessibility_contract.md — visible focus is a
   2px brass outline offset 2px (token --focus-ring); never `outline: none`
   without replacement.
   ============================================================================ */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Screen-reader-only content (hidden table column heads etc.) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 60;
  background: var(--paper-0); color: var(--ink-0);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-control); padding: 10px 18px;
  font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase;
}
.skip-link:focus-visible { left: 12px; }
/* ============================================================================
   ui_vnext/foundations/grid.css — the two shells
   1. PUBLIC shell — maison margin rail: .pub-wrap / .ledger-page / .page-rail
      / .sec / .sec__no (+ inline fallback) / .band tonal washes / .topbar.
   2. AUTHENTICATED shell — 72px icon-less text rail: .app / .rail /
      .app__main / .app__aside / .deskline.
   Extracted from ui_vnext/prototypes/direction-a/tokens.css; the .band
   system is lifted from the approved page styles (home.html /
   feature_reveal.html) because every public page shares it.
   Section rhythm (per-surface .sec margins/padding) is page-level and does
   NOT live here — it belongs to layout templates at integration.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Public shell — the maison margin rail (Direction A signature)
   ---------------------------------------------------------------------------- */
.pub-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.ledger-page {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
}
.page-rail { grid-column: 1; grid-row: 1 / -1; border-left: 1px solid var(--hairline); margin-left: 30px; background: linear-gradient(180deg, var(--bg-0) 0%, var(--hairline) 8%, var(--hairline) 92%, var(--bg-0) 100%)
    left top / 1px 100% no-repeat; position: relative; z-index: 1; }
.sec { grid-column: 2; position: relative; }
.sec__no {
  position: absolute; left: -66px; top: 10px;
  writing-mode: vertical-rl;
  font-family: var(--sans); font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-etch); text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.sec__no .no { color: var(--brass-400); }
.sec__no-inline { display: none; }

/* Obsidian bands — tonal washes bleeding to both viewport edges. The band
   column sits 48px right of the viewport centre (half the 96px margin rail),
   so the bleed is asymmetric; this keeps scrollWidth clean. From the
   approved page styles. */
.band { position: relative; }
.band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw + 48px) 0 calc(50% - 50vw - 48px); z-index: -2; }
.band--1::before { background: var(--bg-1); } /* rail sits above band washes */

/* ----------------------------------------------------------------------------
   Public top bar
   ---------------------------------------------------------------------------- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { width: 34px; height: 34px; flex: 0 0 auto; }
.brand__name {
  font-family: var(--serif); font-weight: 600; font-size: 1.08rem;
  letter-spacing: 0.01em; color: var(--ink-0); line-height: 1.05; white-space: nowrap;
}
.brand__sub {
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-etch);
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px; white-space: nowrap;
}
.topbar__nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.topbar__link:hover { color: var(--brass-300); }
.topbar__link.is-active { color: var(--brass-300); }
.topbar__cta { margin-left: 10px; }

/* ----------------------------------------------------------------------------
   Authenticated shell — 72px icon-less text rail · dominant column · footnotes
   (The rail is rendered by components/nav_client.html / nav_admin.html; its
   styles live here because the rail IS the shell's first grid column.)
   ---------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  min-height: 100vh;
  background: var(--bg-0);
}
.rail {
  grid-column: 1;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 20px 12px 22px;
  border-right: 1px solid var(--hairline);
  background: var(--bg-0);
}
.rail__crest { display: flex; align-items: center; gap: 10px; margin: 0 8px 26px; }
.rail__crest img { width: 26px; height: 26px; flex: none; }
/* GCS_NOON §5 — the app rail carried the crest image alone while the public
   header had a full wordmark. Give both operator and owner rails the same
   name + desk lockup beside the crest. */
.rail__wordmark { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 1.12; }
.rail__wordmark-name {
  font-family: var(--serif); font-size: 0.95rem; font-weight: 600;
  color: var(--ink-0); letter-spacing: 0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rail__wordmark-sub {
  margin-top: 2px; font-size: 0.5625rem; font-weight: 600;
  letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.rail__nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 1; }
/* Navigation reads left-to-right, like every other piece of text ever written. */
.rail__link {
  writing-mode: horizontal-tb;
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 38px; padding: 0 12px;
  border-radius: var(--r-control);
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.rail__link:hover { color: var(--ink-0); background: var(--ink-a04); }
.rail__link.is-active {
  color: var(--ink-0); background: var(--ink-a07);
  box-shadow: inset 2px 0 0 var(--brass-500);
}
.rail__desk {
  writing-mode: horizontal-tb;
  font-size: 0.625rem; font-weight: 600; letter-spacing: var(--ls-etch);
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
  padding: 0 12px; opacity: .5;
}

.app__main { grid-column: 2; min-width: 0; padding: clamp(24px, 3.4vw, 52px) clamp(22px, 3.6vw, 60px) 80px; container-type: inline-size; padding-bottom: clamp(40px, 6vw, 80px); }
.app__aside {
  grid-column: 3;
  padding: clamp(24px, 3.4vw, 52px) clamp(20px, 2.4vw, 36px) 60px 30px;
  border-left: 1px solid var(--hairline);
  font-size: 0.9rem; color: var(--ink-2); line-height: 1.66;
}

/* Statement header line on authenticated pages */
.deskline {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(30px, 4vw, 52px);
}

/* ----------------------------------------------------------------------------
   Responsive system (shell rules only; component media rules live with
   their components)
   ---------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .app__aside {
    grid-column: 2; border-left: 0; border-top: 1px solid var(--hairline);
    padding: 34px clamp(22px, 3.6vw, 60px) 60px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 34px;
  }
}
@media (max-width: 1100px) {
  .ledger-page { display: block; }
  .page-rail { display: none; }
  .sec__no { display: none; }
  .sec__no-inline {
    display: block;
    font-family: var(--sans); font-size: var(--fs-cap); font-weight: 600;
    letter-spacing: var(--ls-etch); text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 16px;
  }
  .sec__no-inline .no { color: var(--brass-400); }
  .band::before { inset: 0 calc(50% - 50vw); } /* rail retired — bands re-centre */
}
@media (max-width: 834px) {
  .app { display: block; }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 4px; padding: 10px var(--gutter);
    border-right: 0; border-bottom: 1px solid var(--hairline);
    background: var(--bg-0);
  }
  .rail__crest { margin: 0 12px 0 0; }
  /* On the collapsed mobile rail bar the crest alone carries the brand, so the
     wordmark hides — keeps the bar compact and the page overflow-free at 320px. */
  .rail__wordmark { display: none; }
  .rail__nav { flex-direction: row; gap: 0; flex-wrap: wrap; }
  .rail__link { writing-mode: horizontal-tb; padding: 0 12px; border-left: 0; border-bottom: 1px solid transparent; }
  .rail__link.is-active { border-bottom-color: var(--brass-500); }
  .rail__desk { display: none; }
}
@media (max-width: 700px) {
  .topbar { gap: 14px; }
  .topbar__link { display: none; }
  .topbar__link--keep { display: inline-flex; }
  .brand__name { font-size: 1rem; }
}
/* ============================================================================
   ui_vnext/components/badge.css — status / provider / risk badges
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Exact slug vocabulary (copy_system.md): item prepared|awaiting|recovered|
   escalated|closed|dismissed · provider live|warn|off|blocked · risk
   low|med|high. The slug WORD is always rendered — colour is never the only
   signal (accessibility_contract.md).
   ============================================================================ */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-2); white-space: nowrap; background: transparent;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--prepared  { color: var(--ink-1); border-color: var(--hairline); background: transparent; }
.badge--awaiting  { color: var(--warn);      border-color: var(--warn-a40);  background: var(--warn-a12); }
.badge--recovered { color: var(--ok);        border-color: var(--ok-a35);    background: var(--ok-a10); }
.badge--escalated { color: var(--danger);    border-color: var(--danger-a40);background: var(--danger-a12); }
.badge--closed    { color: var(--ink-2);     border-color: var(--hairline-strong); }
.badge--dismissed { color: var(--ink-3);     border-color: var(--hairline); }
.badge--live      { color: var(--ok);        border-color: var(--ok-a35);    background: var(--ok-a10); }
.badge--warn      { color: var(--warn);      border-color: var(--warn-a40);  background: var(--warn-a12); }
.badge--off       { color: var(--ink-3);     border-color: var(--hairline); }
.badge--blocked   { color: var(--danger);    border-color: var(--danger-a40);background: var(--danger-a12); }

.risk { font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap); text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; }
.risk--low  { color: var(--ink-3); }
.risk--med  { color: var(--warn); }
.risk--high { color: var(--danger); }
/* ============================================================================
   ui_vnext/components/button.css — text-first controls
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Small caps in thin brass rectangles, radius 0. ONE filled primary per
   screen (visual_language.md — brass discipline). Includes .act-form, the
   real-POST form wrapper for approve/dismiss actions.
   ============================================================================ */

/* The button that used to be defined here — a 38px-tall, 8px-radius, flat-ivory
   control — is gone. It was the THIRD of four primary buttons in the product
   and it is the one a client actually meets first: the sign-in screen, the
   two-step screens and the error pages all render on this sheet, so the button
   a client pressed to get IN was a different shape from every button waiting
   for them on the other side. One component now, in components.css. */

.textlink {
  color: var(--brass-400); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--brass-a28);
}
.textlink:hover { color: var(--brass-200); text-decoration-color: var(--brass-a60); }

/* Approve/dismiss as real POST forms (round-2 item 13) — visually inert wrapper */
.act-form { display: inline-flex; margin: 0; padding: 0; border: 0; background: none; vertical-align: middle; line-height: 0; }
/* ============================================================================
   ui_vnext/components/sheet.css — documents on a desk
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Layered paper over obsidian. No blur, no glass. Key light upper-left;
   shadow falls lower-right. Three elevation levels only (visual_language.md):
   page → sheet → stacked sheet (--stack/--stack2, reserved for the single
   most important object per screen).
   ============================================================================ */

.sheet {
  position: relative; z-index: 0;
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 44px -34px rgba(0,0,0,.85);
}
.sheet--raised { background: var(--paper-1); }
/* Stacked paper: the offset layers must share the sheet's radius, or a
   rounded card sits on square shadows — the "cheap box". */
.sheet--stack::before {
  content: ""; position: absolute; z-index: -1;
  top: 10px; left: 10px; right: -8px; bottom: -8px;
  background: var(--paper-1); border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  box-shadow: 14px 18px 40px -22px var(--shadow-2);
}
.sheet--stack2::after {
  content: ""; position: absolute; z-index: -2;
  top: 20px; left: 20px; right: -16px; bottom: -16px;
  background: var(--paper-2); border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
}
.sheet__body { padding: clamp(24px, 2.6vw, 34px); min-width: 0; color: var(--ink-1); }

/* Annotation sheet — a clipped note pinned to the ledger */
.note { background: var(--paper-1); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline-strong); border-radius: var(--r-surface); padding: 18px 22px; color: var(--ink-1); font-size: var(--fs-fine); line-height: 1.6; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .sheet--stack::before { top: 8px; left: 8px; right: -6px; bottom: -6px; }
  .sheet--stack2::after { content: none; }
}
/* ============================================================================
   ui_vnext/components/divider.css — ruled statement dividers
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Sections separate by rules, not boxes: full-width hairline + centered
   small-caps title with a brass folio numeral.
   ============================================================================ */

.divider {
  display: flex; align-items: center; gap: 22px;
  margin: 0 0 clamp(26px, 3.4vw, 44px);
}
.divider::after {
  content: ""; height: 1px; background: var(--hairline); flex: 1; min-width: 24px;
}
.divider::before {
  content: ""; height: 1px; min-width: 24px;
  background: var(--hairline-strong); flex: 0 0 44px;
}
.divider .divider__label {
  font-family: var(--sans); font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.divider .divider__label .no { color: var(--brass-400); }
.divider .divider__count { color: var(--ink-3); }

.rule { height: 1px; background: var(--hairline); border: 0; }
.rule--brass { background: var(--hairline-strong); }

@media (max-width: 700px) {
  .divider .divider__label { white-space: normal; }
}
/* ============================================================================
   ui_vnext/components/ledger_table.css — statement ledgers
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Two forms share one look:
   - .ledger + .lrow — list-based ledgers (customer requests, proof rows)
   - table.ledger    — REAL <table> statement ledgers (round-2 item 13) with
     sr-only column heads that collapse to zero height (a11y contract:
     ledger data is a real table with <th scope>)
   Tabular numerals + hanging currency come from foundations/typography.css
   (.tnum/.amt).
   ============================================================================ */

.ledger { border-top: 1px solid var(--hairline); list-style: none; margin: 0; padding: 0; }
.lrow { display: grid; gap: 6px 22px; align-items: baseline; padding: 18px 14px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-row); grid-template-columns: minmax(0, 1fr) max-content max-content; margin: 0 -14px; border-radius: var(--r-control); transition: background-color var(--dur) var(--ease-out); }
.lrow__id {
  font-family: var(--sans); font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lrow__main { min-width: 0; color: var(--ink-1); }
.lrow__main .sub { display: block; font-size: var(--fs-note); color: var(--ink-3); margin-top: 5px; letter-spacing: 0.01em; line-height: 1.5; }
.lrow__amt { text-align: right; font-weight: 500; color: var(--ink-0); font-size: 0.98rem; }
.lrow__amt .est { display: block; font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.lrow__meta { white-space: nowrap; font-size: var(--fs-note); color: var(--ink-3); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.004em; }
.lrow__act { justify-self: end; align-self: center; opacity: .72; transition: opacity var(--dur) var(--ease-out); }
.lrow--hush .lrow__main { color: var(--ink-3); }

/* Statement ledgers as REAL tables (round-2 item 13) — same look as .lrow rows.
   Column heads exist for AT (thead th > .sr-only) but collapse to zero height. */
table.ledger { width: 100%; border-collapse: collapse; }
table.ledger th { text-align: left; position: sticky; top: 0; z-index: 1; background: var(--bg-0); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--hairline-strong); }
table.ledger thead th { padding: 0; height: 0; line-height: 0; font-size: 0; }
table.ledger tbody tr { border-bottom: 1px solid var(--hairline); font-size: var(--fs-row); transition: background-color var(--dur) var(--ease-out); }
table.ledger tbody th, table.ledger tbody td { padding: 17px 20px 17px 0; vertical-align: middle; }
table.ledger tbody tr > :last-child { padding-right: 0; }
table.ledger .lrow__act { width: 1%; white-space: nowrap; }
/* Status-pill cell — the ONE authoritative block. It is always a <td> in
   table.ledger (docket_row -> ledger_table), so it must stay a table-cell and
   right-align its pill. A former bare `.lrow__badge{display:inline-flex}`
   collapsed the cell to ~20px and spilled the pill over the value column at
   desktop width; the <=834/1180px stacks (which set td{display:block} at higher
   specificity) had masked it. This block scopes to table.ledger so it beats the
   generic `table.ledger tbody td` padding/valign, while the stacked media queries
   still override display:block below their breakpoints. */
table.ledger .lrow__badge {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
  width: 1%;
  padding-left: 24px;
}

@media (max-width: 560px) {
  .lrow__amt { text-align: left; }
  .lrow__act { justify-self: start; }
}
/* ============================================================================
   ui_vnext/components/docket_row.css — work-docket <tr> column system
   Adapted from the approved page styles (client_today .dockets /
   revenue_queue .queue / admin_today .aqueue — identical sizing values,
   unified here under canonical modifiers):

   .ledger--dockets                      client shape: id · matter · value ·
                                         risk · status (stacks <=834px)
   .ledger--dockets.ledger--accounts     admin shape: adds account column +
                                         action column + escalation tint
                                         (stacks <=1180px)
   ============================================================================ */

.ledger--dockets .lrow__id { width: 84px; }
.ledger--dockets .lrow__amt { width: 110px; }
.ledger--dockets td.lrow__risk { width: 88px; }

/* Admin account column (from admin_today .aqueue) */
.ledger--dockets .lrow__acct { font-size: var(--fs-fine); color: var(--ink-2); font-weight: 500; min-width: 0; width: 168px; }

/* At desktop (table mode — above the 1180px stack) the admin account docket
   table keeps a readable Matter column even inside the narrow 3-column shell
   main (rail + main + aside): the .scroll-x wrapper scrolls the table rather
   than collapsing the summary to one word per line. Below 1180px the rows
   stack, so this floor never forces mobile overflow. */
@media (min-width: 1181px) {
  .ledger--dockets.ledger--accounts .lrow__main { min-width: 240px; }
}

/* The single tinted escalation row admin surfaces are allowed
   (visual_language.md colour rules) */
.ledger--dockets tr.lrow--esc { background: var(--danger-a12); border-top: 1px solid var(--danger-a40); border-bottom: 1px solid var(--danger-a40); }
.ledger--dockets tr.lrow--esc > :first-child { border-left: 1px solid var(--danger-a40); padding-left: 14px; }
.ledger--dockets tr.lrow--esc > :last-child { border-right: 1px solid var(--danger-a40); padding-right: 14px; }

/* ---- Admin shape stacks first (account rows are wider) — from admin_today.
   Statement rows fall back to stacked entries: account + docket line, then
   the matter, then value · status · action. ---- */
@media (max-width: 1180px) {
  .ledger--dockets.ledger--accounts, .ledger--dockets.ledger--accounts tbody { display: block; }
  .ledger--dockets.ledger--accounts tbody tr { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 14px 0; }
  .ledger--dockets.ledger--accounts tbody th, .ledger--dockets.ledger--accounts tbody td { display: block; width: auto; padding: 0; }
  .ledger--dockets.ledger--accounts .lrow__acct { flex: 0 0 auto; }
  .ledger--dockets.ledger--accounts .lrow__id { margin-left: auto; }
  .ledger--dockets.ledger--accounts .lrow__main { flex: 1 1 100%; }
  .ledger--dockets.ledger--accounts .lrow__amt { text-align: left; }
  .ledger--dockets.ledger--accounts .lrow__act { margin-left: auto; }
  .ledger--dockets.ledger--accounts tr.lrow--esc { border: 1px solid var(--danger-a40); padding: 14px; }
  .ledger--dockets.ledger--accounts tr.lrow--esc > :first-child,
  .ledger--dockets.ledger--accounts tr.lrow--esc > :last-child { border: 0; padding-left: 0; padding-right: 0; }
}

/* ---- Client shape stacks at 834 (round-2 item 6): id · value · risk ·
   status on the first line (risk stays adjacent to its value), matter
   beneath — from client_today .dockets / revenue_queue .queue ---- */
@media (max-width: 834px) {
  .ledger--dockets:not(.ledger--accounts), .ledger--dockets:not(.ledger--accounts) tbody { display: block; }
  .ledger--dockets:not(.ledger--accounts) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; }
  .ledger--dockets:not(.ledger--accounts) tbody th, .ledger--dockets:not(.ledger--accounts) tbody td { display: block; width: auto; padding: 0; }
  .ledger--dockets:not(.ledger--accounts) tbody td:empty { display: none; }
  .ledger--dockets:not(.ledger--accounts) .lrow__main { flex: 1 1 100%; order: 4; }
  .ledger--dockets:not(.ledger--accounts) .lrow__amt { text-align: left; }
  .ledger--dockets:not(.ledger--accounts) .lrow__badge { margin-left: auto; }
}
@media (max-width: 560px) {
  .ledger--dockets.ledger--accounts tr.lrow--esc .lrow__act { flex: 1 1 100%; margin-left: 0; }
  .ledger--dockets.ledger--accounts tr.lrow--esc .act-form,
  .ledger--dockets.ledger--accounts tr.lrow--esc .btn--primary { width: 100%; }
}
/* ============================================================================
   ui_vnext/components/next_action_hero.css — the approval-control dossier
   Adapted from the approved client_today.html page styles ("Next Action
   dossier"). One per screen; wraps in .sheet.sheet--stack (sheet.css owns
   the paper).
   ============================================================================ */

.next__grid { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 28px 48px; align-items: start; }
.next__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 12px 0 14px; max-width: 26ch; color: var(--ink-0); font-weight: 500; text-wrap: balance; line-height: 1.14; }
.next__body { max-width: var(--measure); color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.65; margin: 0; letter-spacing: 0.002em; }
.next__amt { text-align: right; min-width: max-content; align-self: start; }
.next__amt .etched { display: block; margin-bottom: 10px; }
.next__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 4px; font-size: var(--fs-note); color: var(--ink-3); }
.next__acts { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }

/* Point-of-action reassurance (round-2 item 12, adopted from Direction B) */
.next__posture { margin-left: auto; }

@media (max-width: 834px) {
  .next__grid { grid-template-columns: 1fr; }
  .next__amt { text-align: left; }
  .next__posture { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .next__acts .act-form--primary, .next__acts .act-form--primary .btn { width: 100%; }
}
/* ============================================================================
   ui_vnext/components/day_summary.css — the Evening Brief band + status strip
   .brief adapted from the approved client_today.html page styles; the
   .status-strip aria-live region extracted from prototype tokens.css
   (round-2 item 13).
   ============================================================================ */

.brief { margin-bottom: 34px; }
.brief__eyebrow { margin: 0 0 12px; }
.brief h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 24ch; }
.brief__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; align-items: baseline; font-variant-numeric: tabular-nums; }

/* Approval feedback region (round-2 item 13) — empty by default, zero footprint.
   desk.js writes here on approve/dismiss submit (aria-live="polite"). */
.status-strip {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-family: var(--sans); font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--brass-300);
}
.status-strip:empty { display: none; margin: 0; }
/* ============================================================================
   ui_vnext/components/kpi_figure.css — KPI daybook row
   Extracted from ui_vnext/prototypes/direction-a/tokens.css.
   Ruled serif numerals, no boxes. Max 4 per row (contract §7); figures
   serif (.metric), notes sans (.fine).
   ============================================================================ */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.kpi { padding: 26px 26px 28px; border-left: 1px solid var(--hairline); min-width: 0; display: flex; flex-direction: column; }
.kpi:first-child { border-left: 0; padding-left: 0; }
/* GCS_NOON §6 — the four KPI cells are independent grid items, so a label that
   wrapped to two lines used to push its numeral down and break the shared
   baseline. Give the label a FIXED two-line row; every numeral then starts at
   the same y and the four figures align on one line. */
.kpi .etched { display: block; margin-bottom: 12px; min-height: 2.75em; }
.kpi .metric { display: block; margin-top: 0; }
.kpi .fine {
  margin-top: 10px; font-size: var(--fs-note); color: var(--ink-3); line-height: 1.45;
}
.kpi__note {
  margin-top: 10px; font-size: var(--fs-note); color: var(--ink-3); line-height: 1.45;
  max-width: 30ch; overflow-wrap: anywhere;
}

/* Additive (contract §7 tone "ok"|"warn"): tone colours the NOTE, never the
   numeral — status colour stays out of large surfaces (visual_language.md). */
.kpi--warn .kpi__note { color: var(--warn); }

@media (max-width: 834px) {
  
  .kpi { padding: 22px 20px 24px; }
  .kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  
  .kpi { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n+2) { border-top: 1px solid var(--hairline); }
}
/* ============================================================================
   ui_vnext/components/customer_request_row.css — requests ledger rows
   Adapted from the approved client_today.html page styles ("Requests
   ledger"). Rows live in <ul class="ledger requests">; base .lrow comes
   from ledger_table.css. Customer speech is serif italic-adjacent quotation
   (typography.md rule 5 — Cormorant marks customer speech).
   ============================================================================ */

.requests .lrow { grid-template-columns: minmax(0, 1fr) max-content max-content; align-items: center; }
.requests .quote { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--ink-0); }

@media (max-width: 560px) {
  .requests .lrow { grid-template-columns: 1fr; }
}
/* ============================================================================
   ui_vnext/components/call_row.css — the quiet inline time-ledger
   Extracted from ui_vnext/prototypes/direction-a/tokens.css ("Quiet inline
   time-ledger"). Rows live in <ul class="timeline">.
   ============================================================================ */

/* The macros emit <li><span class="t"><span class="b">. The stylesheet only
   ever styled .trow/.what — so every timeline in the product rendered as an
   UNSTYLED BULLET LIST. Both shapes are now styled. */
.timeline { border-top: 1px solid var(--hairline); list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-row); color: var(--ink-1);
}
.timeline li .t {
  flex: 0 0 88px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); font-size: var(--fs-note); letter-spacing: 0.02em;
}
.timeline li .b { flex: 1; min-width: 0; color: var(--ink-1); }
.timeline .trow {
  display: flex; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-row); color: var(--ink-2);
}
.timeline .trow .t {
  flex: 0 0 84px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); font-size: 0.8rem; letter-spacing: 0.04em;
}
.timeline .trow .what { flex: 1; min-width: 0; color: var(--ink-1); }

@media (max-width: 560px) {
  /* Round-2 item 6: timeline rows stack — time + status on the first line,
     the full-width entry beneath; titles never squeeze beside badges. */
  .timeline .trow { flex-wrap: wrap; row-gap: 5px; }
  .timeline .trow .t { flex: 0 0 auto; }
  .timeline .trow .what { flex: 1 1 100%; order: 3; }
  .timeline .trow .badge { margin-left: auto; }
}
/* ============================================================================
   ui_vnext/components/footnote_aside.css — superscript footnotes column
   Extracted from ui_vnext/prototypes/direction-a/tokens.css. The column
   container (.app__aside) is shell — foundations/grid.css owns it; this
   file owns the footnote entries.
   ============================================================================ */

.fn { position: relative; overflow: hidden; margin-bottom: 20px; padding: 22px 22px 24px;
  border: 1px solid var(--hairline); border-radius: 16px;
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 44px -34px rgba(0,0,0,.85); }
.fn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass-500), transparent 70%); opacity: .55; }
.fn sup { color: var(--brass-400); font-weight: 600; margin-right: 6px; }
.fn .fn__title {
  display: block; font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
/* ============================================================================
   ui_vnext/components/provider_notice.css — provider exception notice
   Adapted from the approved admin_today.html page styles ("Provider
   notice"). Rides on .note (sheet.css). Admin-only — client surfaces
   receive at most a plain-language banner (contract §8).
   ============================================================================ */

.pnotice { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; border-left-color: var(--warn); padding-right: 4px; }
.pnotice__main { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; min-width: 0; }
.pnotice__text { color: var(--ink-1); font-size: var(--fs-row); line-height: 1.5; font-weight: 500; }
.pnotice__detail { display: block; margin-top: 3px; color: var(--ink-3); font-size: var(--fs-fine); line-height: 1.5; }
/* ============================================================================
   ui_vnext/components/plan_card.css — Terms of Engagement plan sheets
   Adapted from the approved home.html page styles ("Terms of engagement").
   Cards ride on .sheet; the emphasized plan alone takes .sheet--stack.
   ============================================================================ */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(18px, 2.4vw, 34px); align-items: stretch; margin-top: clamp(34px, 4vw, 56px); }
.plan { display: flex; flex-direction: column; }
.plan__body { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; flex: 1; }
.plan__name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--ink-0); margin: 10px 0 4px; }
.plan__price { margin: 18px 0 6px; }
.plan__list { margin-top: 18px; border-top: 1px solid var(--hairline); flex: 1; }
.plan__list li { padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-row); color: var(--ink-2); }
.plan__list li strong { font-weight: 500; }
.plan__cta { margin-top: 24px; }

@media (max-width: 834px) {
  .plans { max-width: 560px; }
}
/* ============================================================================
   ui_vnext/components/posture_panel.css — operating mandate + counters
   Adapted from the approved revenue_closer.html page styles ("Operating
   mandate & posture", round-2 item 12 — adopted from Direction B, restyled
   as Ledger dossier elements: ruled serif counts + a pinned note).
   Counters reuse .kpi (kpi_figure.css); the mandate rides on .note
   (sheet.css).
   ============================================================================ */

.posture { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.posture__counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.posture__counts .kpi > .etched { min-height: 2.4em; }
.posture__mandate { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px); }
.posture__mandate-title { margin-bottom: 10px; }
.posture__mandate-body { color: var(--ink-2); }

@media (max-width: 834px) {
  .posture { grid-template-columns: 1fr; }
}
/* ============================================================================
   ui_vnext/components/empty_state.css — honest, forward-looking empty states
   New in vNext (no populated-state prototype markup existed) — composed
   strictly from system tokens: hairline rule, etched head, fine body.
   Copy pattern (copy_system.md): "No calls yet today. Your line is live and
   answered."
   ============================================================================ */

.empty-state { border: 1px solid var(--hairline); padding: 30px 28px; text-align: center; border-radius: var(--r-surface); background: var(--paper-0); }
.empty-state__title { margin-bottom: 8px; color: var(--ink-0); font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.005em; text-transform: none; margin: 0; }
.empty-state__detail { max-width: 54ch; margin: 8px 0 0; font-size: var(--fs-fine); color: var(--ink-2); line-height: 1.6; }
.empty-state .textlink { display: inline-block; margin-top: 14px; }
/* ============================================================================
   ui_vnext/components/failure_state.css — failure with GCS's next move
   New in vNext — built on the .note annotation-sheet pattern (sheet.css)
   with the danger edge replacing brass. Status colour stays inside the
   label, never as a surface wash beyond the hairline edge
   (visual_language.md colour rules).
   ============================================================================ */

.failure-state {
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--danger-a40);
  padding: 18px 22px;
}
.failure-state__label { color: var(--danger); margin-bottom: 8px; }
.failure-state__what { color: var(--ink-0); font-size: var(--fs-row); margin-bottom: 6px; }
.failure-state__cause { margin-bottom: 6px; }
.failure-state__next { color: var(--ink-2); }
.failure-state__next-label { font-weight: 600; color: var(--ink-1); }
.failure-state .textlink { display: inline-block; margin-top: 10px; }
/* Live dot — the only looping motion in the system (static by default;
   the pulse is gated below) */
.livedot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .anim-rise { animation: a-rise var(--dur) var(--ease-out) both; }
  .anim-rise.d1 { animation-delay: 90ms; }
  .anim-rise.d2 { animation-delay: 180ms; }
  .anim-rise.d3 { animation-delay: 280ms; }
  .anim-rise.d4 { animation-delay: 380ms; }
  .anim-draw { transform-origin: left center; animation: a-draw 700ms var(--ease-out) both; }
  .livedot { animation: a-pulse 2.8s ease-in-out infinite; }
}
@keyframes a-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes a-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ============================================================================
   INTEGRATION LAYER — repo-specific shell polish and controls.
   Everything below is additive to the ui_vnext system: subtle dimensional
   lighting (the chamber key light, restrained — no glass, no grain),
   flash messages, instrument-grade form fields, the three-state authority
   control, and page rhythm utilities used by the authenticated screens.
   ============================================================================ */

/* Dimensional lighting — one cool key light upper-left, one faint brass
   return lower-right, fixed so the desk feels lit rather than painted.
   Kept far below AA-contrast interference (max alpha 0.055). */
body.ledger-app {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(174, 184, 204, 0.055), transparent 62%),
    radial-gradient(1000px 700px at 105% 115%, rgba(201, 169, 110, 0.045), transparent 58%),
    var(--bg-0);
  background-attachment: fixed, fixed, scroll;
}
body.ledger-app .app { background: transparent; }

/* Sign out sits at the foot of the rail, quieter than the primary items. */
.rail__link--exit { margin-top: auto; color: var(--ink-3); }
.rail__link--exit:hover { color: var(--danger); }
@media (max-width: 834px) {
  .rail__link--exit { margin-top: 0; margin-left: auto; }
}

/* Flash messages — a clipped note pinned above the deskline. */
.flashes { margin: 0 0 22px; display: grid; gap: 10px; max-width: 100%; }
.flash {
  margin: 0; padding: 12px 16px;
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--brass-500);
  color: var(--ink-1); font-size: var(--fs-fine); line-height: 1.6;
  overflow-wrap: anywhere;
}
.flash--success { border-left-color: var(--ok); }
.flash--error, .flash--danger { border-left-color: var(--danger); }
.flash--warning { border-left-color: var(--warn); }
/* --info was the one variant no sheet declared, and a flash with no category
   defaults to it. Left-accent grammar, matching its siblings above. */
.flash--info { border-left-color: var(--brass-300); }

/* Page rhythm — every module is a ruled section, not a floating card grid. */
.desksec { margin: clamp(34px, 4.5vw, 54px) 0 0; position: relative; min-width: 0; scroll-margin-top: clamp(16px, 3vw, 28px); }
.desksec:first-child { margin-top: 0; }
.desksec > .divider { margin-bottom: 18px; }

/* Instrument-grade form fields — dark wells, hairline borders, brass focus.
   Never a solid-gold field. */
.field { display: block; margin: 0 0 18px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: var(--ink-2);
}
.field__hint { margin: 6px 0 0; font-size: var(--fs-fine); color: var(--ink-3); line-height: 1.55; max-width: 60ch; letter-spacing: 0.003em; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="tel"], .field input[type="url"], .field input[type="number"],
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"],
.field input[type="search"], .field input:not([type]), .field textarea, .input {
  width: 100%; padding: 11px 13px;
  background: var(--bg-2); color: var(--ink-0);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-control);
  font: 500 var(--fs-body)/1.45 var(--sans);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible {
  outline: var(--focus-ring); outline-offset: 2px; border-color: var(--brass-500);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
/* Native date/time picker indicator is a dark glyph by default — invert it so it
   reads on the dark field instead of vanishing. */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.82); opacity: 0.72; cursor: pointer;
}
/* Every <select> on the authenticated desk gets the dark premium treatment —
   in-field selects AND bare filter selects (operator review/queue filters), so
   no browser-default white box appears. .field select adds full width. */
.ledger-app select {
  padding: 11px 30px 11px 13px;
  background: var(--bg-2); color: var(--ink-0);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-control);
  font: 500 var(--fs-body)/1.45 var(--sans);
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select { width: 100%; }
.field--inline { display: flex; gap: 10px; align-items: center; }
.checkrow { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-row); color: var(--ink-1); }
.checkrow input { accent-color: var(--brass-500); width: 15px; height: 15px; margin-top: 2px; }

/* The three-state authority control — Automatic / Review required / Off.
   A ruled segmented instrument: the chosen state is outlined in brass,
   never filled gold. */
.authority { display: grid; gap: 8px; margin: 0; min-width: 0; container-type: inline-size; align-content: start; }
.authority__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.authority__row:last-child { border-bottom: 0; }
.authority__name { font-size: var(--fs-row); color: var(--ink-0); font-weight: 500; letter-spacing: 0.002em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.authority__desc { grid-column: 1 / -1; margin: 0; font-size: var(--fs-fine); color: var(--ink-3); line-height: 1.55; max-width: 56ch; }
@media (max-width: 700px) { .authority__row { grid-template-columns: minmax(0, 1fr); } }
.seg { display: inline-flex; border: 1px solid var(--hairline-strong); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg__opt span {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
  border-right: 1px solid var(--hairline);
}
.seg__opt:last-child span { border-right: 0; }
.seg__opt input:checked + span { color: var(--brass-200); background: var(--brass-a08); box-shadow: inset 0 0 0 1px var(--brass-500); }
.seg__opt input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }

/* Emergency stop — the one deliberately loud control on the desk. */
.estop {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
  padding: 16px 18px; border: 1px solid var(--danger-a40); background: var(--danger-a12);
}
.estop--held { border-color: var(--warn-a40); background: var(--warn-a12); }
.estop__body { margin: 0; font-size: var(--fs-fine); color: var(--ink-1); line-height: 1.6; max-width: 62ch; flex: 1 1 40ch; }
.btn--danger { border-color: var(--danger-a40); color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }

/* Key-value rows for account/system detail reads. */
.kv { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 0 22px; }
.kv dt { font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--ink-3); padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.kv dd { margin: 0; font-size: var(--fs-row); color: var(--ink-1); padding: 8px 0; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); } .kv dt { border-bottom: 0; padding-bottom: 0; } }

/* Queue filter tabs (Revenue Queue, review queues) — ruled, not pilled. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.tabs a {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0;
  margin-right: 36px; font-size: 18px; font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink-1); }
.tabs a.is-active { color: var(--brass-300); border-bottom-color: var(--brass-500); }
/* Non-interactive count chip (Revenue Queue breakdown) — same ruled row as a
   tab, but no link affordance: these report counts, they do not filter. */
.tabs .tabs__chip {
  display: inline-flex; align-items: center; min-height: 56px;
  margin-right: 36px; font-size: 18px; font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs .tabs__count { color: var(--ink-3); margin-left: 6px; }

/* Wide content always scrolls inside its own rail — never the page. */
.scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; scroll-snap-type: x proximity; }

/* Plain-language link list rows (help, legal, deep links). */
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-bottom: 1px solid var(--hairline); }
.linklist li:last-child { border-bottom: 0; }
.linklist a { display: flex; justify-content: space-between; gap: 24px; padding: 20px 2px; color: var(--ink-1); font-size: 17px; align-items: baseline; transition: color var(--dur) var(--ease-out); }
.linklist a:hover { color: var(--brass-300); }
.linklist .meta { color: var(--ink-3); font-size: var(--fs-fine); }

/* Timeline styling lives in the ui_vnext call-row section above — one quiet
   horizontal time-ledger (.timeline li / .t / .b and .trow / .what). The second
   .timeline block that used to sit here was removed in the ledger.css
   consolidation: it stacked a decorative brass square (::before), a stray left
   border and left indent on top of the horizontal design — a hybrid of two
   layouts, and brass used as decoration (against the first law). */

/* Auth / ceremony pages (login, activation, MFA) — one lit sheet on the field. */
.ceremony { min-height: 100vh; display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) var(--gutter); position: relative; text-align: left; background: radial-gradient(120% 90% at 50% -10%, var(--paper-0) 0%, transparent 62%); }
.ceremony__sheet { width: min(430px, 100%); margin: 0 auto; display: flex; flex-direction: column; min-width: 0; position: relative; }
.ceremony__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ceremony__brand img { width: 34px; height: 34px; }


/* ============================================================================
   Brass discipline (2026-07-13). Brass now carries exactly three meanings:
     MONEY  ·  ACTIVE  ·  FOCUS
   It is no longer a border colour, a button fill, or a decorative rule.
   ============================================================================ */
.kpi__value, .metric__value, .figure__value, .stat__value, .money, .outcome__value {
  color: var(--brass-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}table.ledger td {
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem; color: var(--ink-1); vertical-align: top;
}table.ledger tbody tr:hover { background: var(--ink-a04); }
table.ledger td.num, table.ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Motion: honour the user. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}.lrow:hover { background: var(--ink-a04); }
.lrow__main .quote {
  display: block; font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-0);
  max-width: 62ch;
}.lrow:hover .lrow__act, .lrow__act:focus-visible { opacity: 1; }
.lrow .badge { align-self: center; }.brief .h-serif { margin: 0; max-width: 22ch; }
.brief .h-serif + .fine { margin-top: 14px; max-width: 62ch; font-size: var(--fs-lede); }

/* Section dividers: the folio numeral is the only brass on the line. */
.divider__label { font-size: var(--fs-cap); }
.divider .no { color: var(--brass-400); }.next__grid .etched { display: block; margin-bottom: 4px; }

/* ---- The command palette (⌘K / Ctrl+K) — the operator's real navigation.
   One dimmed field, one lit sheet; keyboard-complete. Motion respects
   prefers-reduced-motion via the global --dur token. ---- */
.rail__link--palette {
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 8px;
}
.rail__link--palette kbd {
  font-size: 11px; padding: 2px 6px; border: 1px solid var(--hairline-strong);
  border-radius: 5px; color: var(--ink-2); background: var(--bg-2);
}
.palette {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(48px, 14vh, 140px) 16px 16px;
}
.palette[hidden] { display: none; }
body[data-palette-lock] { overflow: hidden; }
.palette__sheet {
  width: min(640px, 100%); max-height: min(60vh, 560px);
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--hairline-strong);
  border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.palette__input {
  width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink-0);
  font: 500 16px/1.4 var(--sans, 'Inter Tight', sans-serif);
}
.palette__input:focus { outline: none; }
.palette__input::placeholder { color: var(--ink-3); }
.palette__results { overflow-y: auto; padding: 8px 8px 4px; }
.palette__group { margin: 10px 12px 6px; font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.palette__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; padding-bottom: 4px; }
.palette__item a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink-1); font-size: var(--fs-row, 14px);
}
.palette__item a:hover { background: var(--bg-2); color: var(--ink-0); }
.palette__item[aria-selected="true"] a { background: var(--bg-2); color: var(--ink-0); outline: 1px solid var(--hairline-strong); }
.palette__kind {
  flex: 0 0 auto; font-size: var(--fs-note, 12px); color: var(--ink-3);
  min-width: 56px; letter-spacing: 0.02em;
}
.palette__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-note, 12px); color: var(--ink-3); text-align: right; }
.palette__hint { margin: 0; padding: 10px 18px 12px; border-top: 1px solid var(--hairline); color: var(--ink-3); }
@media (max-width: 480px) {
  .palette { padding-top: 12vh; }
  .palette__kind { display: none; }
}

/* Screen-reader-only utility (labels for palette + inline form fields). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Secondary line — supporting copy under a title or beside a figure. Held at
   --ink-2 (the readable-secondary floor), 13px note scale, tabular figures. */
.meta {
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: 0.004em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}.scroll-x::-webkit-scrollbar { height: 9px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }.desksec > :where(h1, h2, h3):first-child { margin-top: 0; }.sheet__body > :first-child { margin-top: 0; }
.sheet__body > :last-child { margin-bottom: 0; }
.sheet__body > * + .desksec { margin-top: clamp(28px, 3.6vw, 44px); }.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }.flashes:empty { display: none; }
.flashes .flash { border-radius: var(--r-control); }.linklist li:first-child a { padding-top: 4px; }/* Branded error-page facts (GCS_NOON §3 error.html) ride the ceremony sheet. */
.errorcode { display: inline-block; margin-bottom: 14px; }
.errorfacts { margin: 0 0 26px; display: grid; gap: 0; }
.errorfacts dt { font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--ink-3); margin-top: 16px; }
.errorfacts dd { margin: 4px 0 0; font-size: var(--fs-fine); color: var(--ink-1); line-height: 1.55; max-width: 52ch; }
.errorback { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 4px; }

/* Copyable snippet (proposal / prepared-action drafts) — a dark well the
   operator reads and copies from; scrolls inside itself on narrow desks. */
.copybox {
  display: block; margin: 14px 0 0; padding: 15px 17px;
  background: var(--bg-2); border: 1px solid var(--hairline-strong); border-radius: var(--r-control);
  font: 500 var(--fs-row)/1.65 var(--sans); color: var(--ink-1);
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto;
}

/* Numbered step list (account setup) — ruled discs, ink numerals (brass stays
   reserved for money/active/focus, so a plain step index is ink, not gold). */
.steplist {
  list-style: none; margin: 16px 0 0; padding: 0;
  counter-reset: gcsstep; display: grid; gap: 12px;
}
.steplist > li {
  position: relative; counter-increment: gcsstep;
  padding: 2px 0 0 42px; min-height: 28px;
  font-size: var(--fs-row); color: var(--ink-1); line-height: 1.55;
}
.steplist > li::before {
  content: counter(gcsstep); position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong); border-radius: 50%;
  font-size: var(--fs-cap); font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}/* Queue tab count. */
.tabs__count { font-variant-numeric: tabular-nums; font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.02em; }/* App body + main column. */
.ledger-app { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; }

/* ============================================================================
   PREMIUM CLIENT DESK — Emergent "Owner Desk" component system.
   Ported from gcs_premium_desk/assets/premium.css. Every component rule is
   SCOPED under .shell so it styles ONLY the authenticated client desk and can
   never leak into the operator/admin desk (which shares ledger.css). Palette,
   type tokens and .tnum stay ledger's; --sans = Inter Tight (self-hosted),
   NOT Hanken Grotesk (font option (b) — no third-party font request). The
   Command Strip / Revenue Queue comments and every admin component above are
   left untouched. Do not append a second copy of any selector below.
   ============================================================================ */
.shell *, .shell *::before, .shell *::after{box-sizing:border-box;}
/* Full-bleed like desk.css .shell — the old max-width:1600px + margin:auto
   centered this shell at 1920 and produced a ~198px dead band left of the rail
   on half the client desk (two-shells defect, register P1-1). */
.shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr) var(--aside); min-height:100vh; font-size:17px; line-height:1.6; background:radial-gradient(1400px 900px at 4% -8%, #141319 0%, rgba(20,19,25,0) 58%), var(--bg-0);}
@media (min-width:961px){
  .shell--noaside{grid-template-columns:var(--rail) minmax(0,1fr);}
}
.shell .rail{position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:44px 30px 34px; border-right:1px solid var(--hairline); background:var(--bg-0);}
.shell .brand{margin-bottom:60px; display:block;}
.shell .brand__mark{display:flex; align-items:center; gap:15px;}
.shell .brand__logo{width:48px; height:48px; flex:none; display:block; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.55));}
.shell .brand__name{font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.1; color:var(--ink-0); letter-spacing:.2px;}
.shell .brand__sub{margin-top:7px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.shell .nav{display:flex; flex-direction:column; gap:4px;}
.shell .nav__item{display:flex; align-items:center; gap:16px; height:52px; padding:0 18px; border-radius:12px;
  font-size:17px; font-weight:500; color:var(--ink-2); position:relative;
  transition:color .22s ease, background-color .22s ease;}
.shell .nav__item:hover{color:var(--ink-0); background:rgba(244,239,228,0.035);}
.shell .nav__item.is-active{color:var(--ink-0); background:rgba(244,239,228,0.06);}
.shell .nav__item.is-active::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--brass-500);}
.shell .nav__dot{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--brass-500); box-shadow:0 0 0 4px rgba(201,169,110,0.14);}
.shell .rail__foot{margin-top:auto; padding-top:28px; border-top:1px solid var(--hairline);}
.shell .who{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.shell .who__av{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(155deg,#221e27,#171419); border:1px solid var(--hairline-2); font-size:14px; font-weight:600; color:var(--ink-1);}
.shell .who__name{font-size:15px; font-weight:600; color:var(--ink-1);}
.shell .who__role{font-size:13px; color:var(--ink-3);}
.shell .signout{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-3); height:40px; padding:0 4px;}
.shell .signout:hover{color:var(--danger);}
.shell .main{grid-column:auto; min-width:0; padding:56px clamp(40px,4.5vw,80px) 100px; container-type:normal;}
/* The section container moved to components.css. It used to set a DIFFERENT
   top margin here (clamp(56px,6vw,88px) = 77px at 1280) from the desk's 58px,
   and body.op3d then forced it back to 58px on the operator pages -- an
   override of an override, both of which are now unnecessary. */
.shell .card{background:linear-gradient(180deg,var(--paper-1),var(--paper-0)); border:1px solid var(--hairline);
  border-radius:20px; box-shadow:var(--key); position:relative; isolation:isolate;}
.shell .decision{position:relative; overflow:hidden; isolation:isolate; border-radius:20px; min-width:0; z-index:0;}
.shell .decision__edge{position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--brass-300),var(--brass-600));}
.shell .decision__in{padding:clamp(32px,3.4vw,52px); position:relative; z-index:1; min-width:0; isolation:isolate; overflow-wrap:anywhere;}
/* This sheet's own eyebrow -- 14px semibold sans in --ink-2, sentence case --
   is gone; components.css carries the one the whole product uses. It kept the
   spacing below it, which is layout, not identity. */
.shell .eyebrow{margin-bottom:26px;}
.shell .eyebrow .pip{width:8px; height:8px; border-radius:50%; background:var(--brass-500); box-shadow:0 0 0 5px rgba(201,169,110,0.12); flex:none;}
.shell .eyebrow .sep{color:var(--hairline-2);}
.shell .money{color:var(--brass-300); font-variant-numeric:tabular-nums; white-space:nowrap;}
.shell .decision__title{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.08; color:var(--ink-0); letter-spacing:.2px; max-width:20ch; margin:0 0 16px;}
.shell .decision__meta{font-size:16px; color:var(--ink-2); margin-bottom:34px;}
.shell .decision__meta .sep{color:var(--hairline-2); margin:0 12px;}
.shell .draft{background:var(--bg-1); border:1px solid var(--hairline); border-left:2px solid var(--hairline-2); border-radius:14px;
  padding:26px 30px; max-width:72ch;}
.shell .draft__k{font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-400); margin-bottom:12px;}
.shell .draft__q{font-family:var(--serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.45; color:var(--ink-0); margin:0;}
.shell .reason{margin:30px 0 0; font-size:17px; color:var(--ink-2); max-width:64ch; line-height:1.65;}
.shell .reason strong{color:var(--ink-0); font-weight:600;}
.shell .acts{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:40px;}
.shell .btn:active{transform:translateY(1px);}
.shell .link{margin-left:auto; font-size:16px; font-weight:600; color:var(--brass-300); display:inline-flex; align-items:center; gap:8px;}
.shell .link:hover{color:var(--brass-200);}
.shell .link .ar{transition:transform .2s ease;}
.shell .link:hover .ar{transform:translateX(4px);}
.shell .money-band{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:0;}
.shell .fig{padding:0 clamp(24px,2vw,40px); border-left:1px solid var(--hairline);}
.shell .fig:first-child{border-left:0; padding-left:0;}
.shell .fig__k{font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; margin-bottom:18px; min-height:2.6em; line-height:1.35;}
.shell .fig__v{font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,4vw,3.8rem); line-height:0.92; color:var(--ink-0); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
.shell .fig--hero .fig__k{color:var(--brass-300);}
.shell .fig--hero .fig__v{font-size:clamp(4rem,7vw,6.6rem); color:var(--brass-300);}
.shell .fig--hero .fig__v .cur{font-size:0.44em; color:var(--brass-500); vertical-align:0.55em; margin-right:0.06em; font-weight:600;}
/* Operator figures can carry a warn signal (revenue at risk, awaiting review) —
   amber the value; brass stays reserved for confirmed money. */
.shell .fig--warn .fig__v{color:var(--warn);}
.shell .fig--warn .fig__k{color:var(--warn);}
.shell .fig__note{margin-top:16px; font-size:14px; color:var(--ink-3); line-height:1.5; max-width:34ch; overflow-wrap:anywhere;}
.shell .record{border-top:1px solid var(--hairline); display:flex; flex-direction:column; margin-top:2px; min-width:0; isolation:isolate;}
.shell .rec{display:grid; grid-template-columns:120px 1fr auto; align-items:baseline; gap:24px; padding:22px 4px; border-bottom:1px solid var(--hairline);}
.shell .rec:hover{background:rgba(244,239,228,0.02);}
.shell .rec__t{font-size:15px; color:var(--ink-3); font-variant-numeric:tabular-nums; align-self:baseline; min-width:0; letter-spacing:.01em;}
.shell .rec__b{font-size:17px; color:var(--ink-1); line-height:1.5; overflow-wrap:anywhere;}
.shell .rec__b .who2{color:var(--ink-0); font-weight:600;}
.shell .rec__tag{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.shell .rec__tag--ok{color:var(--ok);}
.shell .controls{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.shell .tile{padding:30px 32px; position:relative; min-width:0; isolation:isolate; border-radius:20px; overflow-wrap:anywhere;}
.shell .tile__k{font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;}
.shell .tile__row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--hairline); font-size:16px;}
.shell .tile__row:last-child{border-bottom:0;}
.shell .tile__row .v{color:var(--ink-1); font-variant-numeric:tabular-nums;}
.shell .tile__lead{font-size:17px; color:var(--ink-1); line-height:1.6; margin:0 0 20px; max-width:44ch;}
.shell .tile__lead strong{color:var(--ink-0); font-weight:600;}
.shell .aside{border-left:1px solid var(--hairline); background:var(--bg-1); padding:48px clamp(24px,2vw,34px) 72px; display:flex; flex-direction:column; gap:18px;}
.shell .aside__block{position:relative; overflow:hidden; padding:22px 22px 24px; border:1px solid var(--hairline); border-radius:16px; background:linear-gradient(180deg,var(--paper-1),var(--paper-0)); box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 44px -34px rgba(0,0,0,.85);}
.shell .aside__block::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--brass-a45),transparent);}
.shell .aside__block .a-k{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-300); margin-bottom:14px;}
.shell .aside__block .a-k::before{content:""; width:6px; height:6px; flex:none; border-radius:50%; background:var(--brass-400); box-shadow:0 0 0 3px var(--brass-a14);}
.shell .aside__line{font-family:var(--sans); font-size:15.5px; color:var(--ink-1); line-height:1.62; letter-spacing:.005em; margin:0; overflow-wrap:anywhere;}
.shell .aside__line strong{color:var(--ink-0); font-weight:600;}
.shell .week__v{font-family:var(--serif); font-weight:600; font-size:clamp(3rem,4vw,4.2rem); line-height:0.95; color:var(--brass-300); font-variant-numeric:tabular-nums;}
.shell .week__v .cur{font-size:0.42em; color:var(--brass-500); vertical-align:0.55em; margin-right:.05em;}
.shell .week__cap{font-size:14px; color:var(--ink-3); margin-top:10px;}
.shell .spark{margin-top:24px;}
.shell .spark svg{width:100%; height:64px; display:block;}
.shell .away{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.shell .away li{display:flex; align-items:baseline; gap:14px; font-size:16px; color:var(--ink-2);}
.shell .away .n{font-family:var(--serif); font-size:20px; font-weight:600; color:var(--brass-300); min-width:32px; text-align:right; font-variant-numeric:tabular-nums;}
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .shell .main>*, .shell .aside>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;}
  .shell .main>*:nth-child(2){animation-delay:.05s}
  .shell .main>*:nth-child(3){animation-delay:.11s}
  .shell .main>*:nth-child(4){animation-delay:.17s}
  .shell .main>*:nth-child(5){animation-delay:.23s}
  .shell .aside>*:nth-child(2){animation-delay:.1s}
  .shell .aside>*:nth-child(3){animation-delay:.16s}
}
.shell .subnav{display:flex; gap:0; border-bottom:1px solid var(--hairline); margin:8px 0 40px; flex-wrap:wrap; min-width:0;}
.shell .subnav__item{height:56px; margin-right:36px; display:inline-flex; align-items:center; font-size:18px; font-weight:600; color:var(--ink-3); position:relative;}
.shell .subnav__item:hover{color:var(--ink-1);}
.shell .subnav__item.is-active{color:var(--ink-0);}
.shell .subnav__item.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brass-500);}
.shell .subnav__item .n{font-family:var(--serif); font-size:14px; color:var(--brass-500); margin-right:9px;}
.shell .seg{display:inline-flex; padding:5px; gap:4px; background:var(--paper-0); border:1px solid var(--hairline); border-radius:14px; margin-bottom:34px;}
.shell .seg__btn{height:46px; padding:0 26px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink-3);}
.shell .seg__btn:hover{color:var(--ink-1);}
.shell .seg__btn.is-active{color:var(--ink-0); background:rgba(244,239,228,0.06); box-shadow:inset 0 0 0 1px var(--hairline-2);}
.shell .seg-panel{display:none;}
.shell .seg-panel.is-active{display:block;}
.shell .score{display:flex; align-items:center; gap:16px; white-space:nowrap; min-width:0; flex:none;}
.shell .score__n{font-family:var(--serif); font-size:30px; font-weight:600; color:var(--ink-0); font-variant-numeric:tabular-nums; line-height:1;}
.shell .score__meta{display:flex; flex-direction:column; gap:7px; min-width:0; justify-content:center; flex:1 1 auto;}
.shell .score__tier{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
.shell .score__bar{width:104px; height:6px; border-radius:99px; background:var(--bg-1); border:1px solid var(--hairline); overflow:hidden;}
.shell .score__fill{height:100%; border-radius:99px; background:var(--ink-3);}
.shell .score--strong .score__fill{background:var(--ok);}
.shell .score--strong .score__tier{color:var(--ok);}
.shell .score--good .score__fill{background:var(--warn);}
.shell .score--good .score__tier{color:var(--warn);}
.shell .score--weak .score__fill{background:var(--ink-3);}
.shell .lead{display:grid; grid-template-columns:1fr 150px 148px auto; align-items:center; gap:28px; padding:26px 4px; border-bottom:1px solid var(--hairline);}
.shell .lead:hover{background:rgba(244,239,228,0.02);}
.shell .lead__name{font-size:19px; font-weight:600; color:var(--ink-0);}
.shell .lead__sig{font-size:15px; color:var(--ink-3); margin-top:5px; line-height:1.5; overflow-wrap:anywhere; max-width:60ch;}
.shell .lead__val{font-family:var(--serif); font-size:23px; color:var(--brass-300); font-variant-numeric:tabular-nums; text-align:right;}
.shell .lead__val .est{display:block; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.shell .src{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.shell .src--finder{color:var(--brass-400);}
.shell .src--manual{color:var(--ink-3);}
.shell .player{display:flex; align-items:center; gap:18px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--hairline); border-radius:14px;}
.shell .player__play{width:48px; height:48px; border-radius:50%; border:1px solid var(--hairline-2); display:grid; place-items:center; color:var(--ink-1); flex:none;}
.shell .player__play:hover{border-color:var(--brass-500); color:var(--brass-300);}
.shell .player__wave{flex:1; height:36px; display:flex; align-items:center; gap:3px; overflow:hidden;}
.shell .player__wave i{flex:1; min-width:2px; background:var(--hairline-2); border-radius:2px;}
.shell .player__time{font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;}
.shell .transcript{margin-top:20px; font-size:15px; color:var(--ink-2); line-height:1.7; max-width:72ch;}
.shell .transcript b{color:var(--ink-1); font-weight:600;}
.shell .transcript .role{color:var(--ink-3); font-weight:600;}
@media (max-width:720px){
  .shell .lead{grid-template-columns:1fr; gap:14px;}
  .shell .lead__val{text-align:left;}
  .shell .subnav__item{margin-right:24px; font-size:16px;}
}
@media (max-width:1240px){
  .shell{grid-template-columns:var(--rail) minmax(0,1fr);}
  .shell .aside, .shell .app__aside{grid-column:2 / -1; border-left:0; border-top:1px solid var(--hairline); flex-direction:row; flex-wrap:wrap; gap:40px 64px;}
  .shell .aside__block{flex:1 1 240px;}
}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .shell .aside, .shell .app__aside{grid-column:1 / -1;}
  .shell .rail{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:16px clamp(20px,4vw,40px); border-right:0; border-bottom:1px solid var(--hairline);}
  .shell .brand{margin:0;}
  .shell .brand__sub{display:none;}
  .shell .nav{order:3; flex:1 1 100%; min-width:0; flex-direction:row; gap:2px; margin:2px 0 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .shell .nav::-webkit-scrollbar{display:none;}
  .shell .nav__item{flex:0 0 auto; height:44px; font-size:15px; padding:0 14px;}
  .shell .nav__item.is-active::before{top:auto; bottom:0; left:14px; right:14px; width:auto; height:3px;}
  .shell .nav__dot{display:none;}
  .shell .rail__foot{margin:0 0 0 auto; padding:0; border:0; display:flex; align-items:center; gap:16px;}
  .shell .who{display:none;}
  .shell .money-band{grid-template-columns:1fr 1fr; gap:32px 0;}
  .shell .fig{border-left:0; padding-left:0;}
  .shell .fig:nth-child(2){border-left:0;}
  .shell .fig--hero{grid-column:1 / -1;}
  .shell .controls{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .shell .main{padding:36px 20px 72px;}
  .shell .greet{flex-direction:column; gap:6px; align-items:flex-start;}
  .shell .money-band{grid-template-columns:1fr; gap:28px;}
  .shell .rec{grid-template-columns:1fr; gap:4px; padding:18px 4px;}
  .shell .rec__tag{grid-row:1;}
  .shell .acts{gap:12px;}
  .shell .acts .btn{flex:1 1 auto;}
  .shell .link{margin-left:0; flex-basis:100%;}
  .shell .aside{padding:44px 20px 64px;}
  .shell .tile__row{flex-wrap:wrap; row-gap:10px;}
  .shell .tile__row>span{white-space:normal !important;}
}

/* ============================================================================
   3D-SEAMLESS OPERATOR EXTENSIONS
   Two components that bring old flat operator pages up to the premium .shell
   standard: an aligned control bar (fixes the misaligned search/submit/link/
   primary row) and a register table that keeps full column width on desktop
   and stacks cleanly on narrow (fixes the squished register + stacked badges).
   Single authoritative blocks; gold stays money/active/focus only.
   ============================================================================ */
.shell .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; min-width: 0; }
.shell .toolbar__search { display: flex; align-items: stretch; gap: 10px; flex: 1 1 340px; min-width: 0; margin: 0; }
.shell .toolbar__input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--hairline-2); background: var(--bg-1); color: var(--ink-0); font-family: var(--sans); font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.shell .toolbar__input::placeholder { color: var(--ink-3); opacity: 1; }
.shell .toolbar__input:focus { outline: none; border-color: var(--brass-500); box-shadow: 0 0 0 3px var(--brass-a14); background: var(--bg-2); color: var(--ink-0); }
.shell .toolbar__group { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-left: auto; min-width: 0; }
.shell .toolbar .btn { height: 52px; padding: 0 22px; }
.shell .toolbar .btn--text { height: 52px; border: 0; background: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--hairline-strong); padding: 0 8px; }
.shell .toolbar .btn--text:hover { color: var(--ink-0); background: transparent; border: 0; text-decoration-color: var(--brass-a45); }

.shell .reg { width: 100%; border-collapse: collapse; border-top: 1px solid var(--hairline); font-variant-numeric: tabular-nums; margin-top: 4px; }
.shell .reg thead th { text-align: left; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 22px 15px 0; border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; }
.shell .reg tbody td { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink-1); font-size: 16px; line-height: 1.5; }
.shell .reg tbody tr { transition: background-color .2s ease; }
.shell .reg tbody tr:hover { background: rgba(244,239,228,0.02); }
.shell .reg tbody tr:last-child td { border-bottom: 0; }
.shell .reg__name { font-family: var(--serif); font-weight: 600; color: var(--ink-0); font-size: 19px; letter-spacing: .1px; line-height: 1.2; min-width: 220px; }
.shell .reg__sub { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-top: 5px; font-weight: 400; letter-spacing: .01em; line-height: 1.5; }
.shell .reg__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-0); white-space: nowrap; font-size: 16px; padding-right: 0; }
.shell .reg__badge { white-space: nowrap; vertical-align: middle; width: 1%; text-align: left; padding-right: 22px; font-size: 15px; line-height: 1; }
.shell .reg__act { text-align: right; white-space: nowrap; width: 1%; padding-right: 0; vertical-align: middle; font-size: 15px; font-weight: 500; }
.shell .reg__plan { color: var(--ink-2); font-size: 15px; white-space: nowrap; letter-spacing: .01em; padding-right: 22px; font-variant-numeric: tabular-nums; line-height: 1.4; }

@media (max-width: 900px) {
  .shell .reg thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .shell .reg, .shell .reg tbody, .shell .reg tr, .shell .reg td { display: block; width: auto; }
  .shell .reg tbody tr { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
  .shell .reg tbody td { padding: 3px 0; border: 0; text-align: left; }
  .shell .reg tbody td[data-k]::before { content: attr(data-k) "  "; display: inline-block; min-width: 118px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .shell .reg__name { min-width: 0; }
  .shell .reg__num, .shell .reg__act, .shell .reg__badge, .shell .reg__plan { text-align: left; padding-right: 0; width: auto; }
}

/* ===== Sales Engine: ranked leads + outbound closer + tier upsell ===== */
.shell .lead__rank { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--brass-400); font-variant-numeric: tabular-nums; line-height: 1; min-width: 34px; display: inline-block; margin-right: 6px; }
.shell .lead__head { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; margin-bottom: 4px; line-height: 1.1; }
.shell .upsell { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 24px 28px; border: 1px solid var(--brass-a28); border-radius: 18px; background: linear-gradient(180deg, var(--brass-a08), transparent 70%); color: var(--ink-1); isolation: isolate; }
.shell .upsell__lock { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-300); white-space: nowrap; }
.shell .upsell__body { flex: 1 1 320px; min-width: 0; font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.shell .upsell__body strong { color: var(--ink-0); font-weight: 600; }
.shell .callcard { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px,3vw,40px); border-radius: 20px; background: linear-gradient(180deg,var(--paper-1),var(--paper-0)); border: 1px solid var(--hairline); box-shadow: var(--key); }
.shell .callcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1; background: linear-gradient(180deg,var(--brass-300),var(--brass-600)); }
.shell .callcard__live { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); margin-bottom: 14px; }
.shell .callcard__live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-a10); animation: rise 1.4s ease-in-out infinite alternate; }

/* ===== Operator agent tracker — live view of GCS's automations ===== */
.shell .agents { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); margin-top: 4px; }
.shell .agent { display: grid; grid-template-columns: 16px 1.4fr 1.8fr auto; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--hairline); transition: background-color .2s ease; min-width: 0; }
.shell .agent:hover { background: rgba(244,239,228,0.02); }
.shell .agent__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 4px rgba(255,255,255,0.03); justify-self: center; }
.shell .agent--run .agent__dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-a10); animation: rise 1.5s ease-in-out infinite alternate; }
.shell .agent--warn .agent__dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(216,162,74,0.14); }
.shell .agent__id { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink-0); line-height: 1.15; letter-spacing: .1px; min-width: 0; }
.shell .agent__sub { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-top: 3px; font-weight: 400; letter-spacing: .01em; }
.shell .agent__task { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.5; min-width: 0; overflow-wrap: break-word; }
.shell .agent__metric { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-1); font-size: 15px; white-space: nowrap; letter-spacing: .01em; }
.shell .agent__metric b { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink-0); font-weight: 600; line-height: 1; }
@media (max-width: 760px){
  .shell .agent { grid-template-columns: 14px 1fr; grid-template-areas: "dot id" ". task" ". metric"; gap: 6px 16px; }
  .shell .agent__dot{grid-area:dot;} .shell .agent__id{grid-area:id;} .shell .agent__task{grid-area:task;} .shell .agent__metric{grid-area:metric;text-align:left;}
}

/* ===== Email Automations — inbound/outbound controls (toggles + rows) ===== */
.shell .switch { position: relative; display: inline-flex; align-items: center; gap: 0; cursor: pointer; flex: none; }
.shell .switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.shell .switch__track { position: relative; display: block; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--hairline-2); transition: background .2s ease, border-color .2s ease; }
.shell .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-3); transition: transform .2s ease, background .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.shell .switch input:checked + .switch__track { background: linear-gradient(180deg, var(--brass-400), var(--brass-600)); border-color: var(--brass-600); }
.shell .switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--ink-0); }
.shell .switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--brass-a14); }
.shell .ctrl { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.shell .ctrl:last-child { border-bottom: 0; padding-bottom: 4px; }
.shell .ctrl__t { font-family: var(--sans); font-size: 16px; color: var(--ink-0); font-weight: 600; margin: 0 0 4px; line-height: 1.3; letter-spacing: .005em; }
.shell .ctrl__d { font-family: var(--sans); font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0; max-width: 54ch; letter-spacing: .005em; }
.shell .ctrl__sel { height: 44px; padding: 0 40px 0 14px; border-radius: 10px; border: 1px solid var(--hairline-2); background: var(--bg-1); color: var(--ink-0); font-family: var(--sans); font-size: 15px; cursor: pointer; }
.shell .ctrl__sel:focus { outline: none; border-color: var(--brass-500); box-shadow: 0 0 0 3px var(--brass-a14); }

/* ===== Email thread — full inbound/outbound history with one contact ===== */
.shell .thread { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.shell .msg { position: relative; padding: 22px 24px; border: 1px solid var(--hairline); border-radius: 16px; background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -34px rgba(0,0,0,.8); max-width: 84%; min-width: 0; }
.shell .msg--in { align-self: flex-start; margin-right: auto; max-width: 84%; border-top-left-radius: 6px; border-color: var(--hairline); background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); }
.shell .msg--out { align-self: flex-end; margin-left: auto; max-width: 84%; border-top-right-radius: 6px; border-color: var(--brass-a28); background: linear-gradient(180deg, rgba(201,169,110,0.08), transparent 60%), var(--paper-0); }
.shell .msg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; min-width: 0; }
.shell .msg__who { font-family: var(--sans); font-weight: 600; color: var(--ink-0); font-size: 15px; letter-spacing: .005em; display: inline-flex; align-items: center; gap: 10px; }
.shell .msg__meta { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.shell .msg__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-300); padding: 3px 0; }
.shell .msg__tag--in { color: var(--ink-3); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; display: inline-flex; }
.shell .msg__body { font-family: var(--sans); font-size: 15px; color: var(--ink-1); line-height: 1.66; letter-spacing: .002em; overflow-wrap: break-word; }
.shell .msg__body p { margin: 0 0 10px; } .shell .msg__body p:last-child { margin: 0; }
.shell .contactbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px 24px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--bg-1); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; margin-bottom: 26px; }
.shell .contactbar__id { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink-0); line-height: 1.1; }
.shell .contactbar__sub { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); margin-top: 3px; display: block; letter-spacing: .01em; }
.shell .contactbar__spacer { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   Operator Today — the "Premium 3D" dashboard (.opdash scope only).
   Ported from the owner's gcs_operator_dashboard design; the WebGL scene is a
   CSS composition (reduced-motion gated) and tilt is vanilla pointer math.
   Scoped so nothing here leaks to other desk pages.
   ============================================================================ */
.opdash{ /* tokens inherit from body.op3d (the design's verbatim values) */ }
/* Hero scene v2 — matches Scene3D: faceted brass core + wireframe halo,
   7-node signal network wired to the core, floating edge-lit panels,
   sparkle field, pointer parallax (JS). Reduced-motion: static. */
.opdash .hero__net{ position:absolute; right:2%; top:0; width:56%; height:100%; }
.opdash .hero__net svg{ width:100%; height:100%; overflow:visible; }
.opdash .hero__net g{ transform-origin:50% 50%; animation:opdash-orbit 60s linear infinite; }
@keyframes opdash-orbit{ to{ transform:rotate(360deg); } }
.opdash .hero__core{ clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius:0; background:conic-gradient(from 210deg at 50% 42%, var(--brass-200), var(--brass-500) 25%, var(--brass-700) 45%, var(--brass-500) 60%, var(--brass-600) 80%, var(--brass-200) 100%);
  filter:none; box-shadow:0 0 90px 22px rgba(201,169,110,.4); }
.opdash .hero__halo{ position:absolute; right:calc(16% - 24px); top:calc(38% - 24px); width:198px; height:198px;
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background:transparent; border:1px solid rgba(201,169,110,.35);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; padding:1px;
  animation:opdash-spin 30s linear infinite reverse; opacity:.55; }
.opdash .hero__spark, .opdash .hero__spark--2{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--brass-200); top:20%; right:40%; opacity:.5; animation:opdash-breathe 4s ease-in-out infinite;
  box-shadow: 40px 22px 0 -1px rgba(237,223,184,.5), -60px 90px 0 -1px rgba(237,223,184,.35),
   120px 60px 0 -1px rgba(237,223,184,.45), 200px 130px 0 0 rgba(237,223,184,.5), -30px 180px 0 -1px rgba(237,223,184,.3),
   90px 210px 0 -1px rgba(237,223,184,.4), 260px 30px 0 -1px rgba(237,223,184,.35), 170px -20px 0 0 rgba(237,223,184,.45),
   -90px 40px 0 -1px rgba(237,223,184,.3), 310px 170px 0 -1px rgba(237,223,184,.4), 30px 130px 0 -2px rgba(237,223,184,.25),
   230px 220px 0 -1px rgba(237,223,184,.35), -110px 140px 0 -1px rgba(237,223,184,.3), 350px 90px 0 -1px rgba(237,223,184,.4); }
.opdash .hero__spark--2{ top:55%; right:20%; animation-delay:-2s; transform:scale(.8); }
.opdash .hero__scene{ transition:transform .35s cubic-bezier(.22,1,.36,1); will-change:transform; }
@media (prefers-reduced-motion: reduce){ .opdash .hero__net g, .opdash .hero__halo, .opdash .hero__spark, .opdash .hero__spark--2{ animation:none; } }
.opdash .greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.opdash .greet__date{ font-size:13px; color:var(--ink-3); margin:12px 0 0; letter-spacing:.02em; }

/* Hero — the GCS Operating Layer */
.opdash .hero{ position:relative; margin-top:30px; border-radius:22px; overflow:hidden; min-height:380px;
  display:flex; align-items:center;
  background:radial-gradient(120% 120% at 80% 0%, rgba(201,169,110,.14), transparent 55%), linear-gradient(155deg, var(--paper-2), var(--paper-0) 70%);
  border:1px solid var(--hairline-2); box-shadow:var(--shadow-float), var(--edge-top); }
.opdash .hero__scene{ position:absolute; inset:0; }
.opdash .hero__core{ position:absolute; right:16%; top:38%; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(240,225,195,.9), var(--brass-500) 42%, rgba(90,68,32,.9) 78%, transparent 100%);
  filter:blur(.4px); box-shadow:0 0 90px 18px rgba(201,169,110,.35); animation:opdash-breathe 7s ease-in-out infinite; }
.opdash .hero__panel{ position:absolute; width:120px; height:74px; border-radius:10px;
  background:linear-gradient(160deg, rgba(30,28,34,.9), rgba(16,15,19,.9)); border:1px solid var(--brass-a28);
  box-shadow:var(--shadow-lift); transform:rotateX(14deg) rotateY(-16deg); animation:opdash-float 9s ease-in-out infinite; }
.opdash .hero__panel--1{ right:30%; top:22%; }
.opdash .hero__panel--2{ right:8%; top:58%; width:96px; height:60px; animation-delay:-3s; }
.opdash .hero__panel--3{ right:38%; top:62%; width:82px; height:52px; animation-delay:-6s; }
@keyframes opdash-spin{ to{ transform:rotate(360deg); } }
@keyframes opdash-float{ 0%,100%{ transform:rotateX(14deg) rotateY(-16deg) translateY(0); } 50%{ transform:rotateX(14deg) rotateY(-16deg) translateY(-14px); } }
@keyframes opdash-breathe{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .opdash .hero__core,.opdash .hero__panel{ animation:none; } }
.opdash .hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.opdash .hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.9) 26%, rgba(10,10,12,.62) 46%, rgba(10,10,12,.2) 62%, transparent 74%); }
.opdash .hero__copy{ position:relative; z-index:2; padding:clamp(28px,3.6vw,56px); max-width:min(560px, 62%); }
.opdash .hero__title{ font-family:var(--serif); font-weight:600; color:var(--ink-0);
  font-size:clamp(34px, 4.4vw, 54px); line-height:1.02; margin:16px 0 14px; letter-spacing:.3px;
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9); }
.opdash .hero__title .ital{ font-style:italic; color:var(--brass-200); }
.opdash .hero__lead{ font-size:16px; color:var(--ink-1); line-height:1.6; margin:0 0 24px; max-width:44ch;
  text-shadow:0 1px 12px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.95); }
.opdash .hero__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.opdash .chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-1);
  padding:8px 13px; border-radius:999px; background:rgba(18,17,21,.6); border:1px solid var(--hairline-2); backdrop-filter:blur(8px); }

/* Sections + tilt */
.opdash .reason.fine{ font-size:12.5px; color:var(--ink-3); margin-top:12px; }
.opdash [data-tilt]{ transform-style:preserve-3d; will-change:transform;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.opdash .card{ border-radius:16px; padding:22px 24px; background:linear-gradient(160deg, var(--paper-2), var(--paper-0));
  border:1px solid var(--hairline); box-shadow:var(--shadow-lift), var(--edge-top); }
.opdash .card:hover{ border-color:var(--hairline-2); }

/* Daybook Position figures */
.opdash .figs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:18px; }
.opdash .fig{ border-radius:16px; padding:24px 24px 22px; background:linear-gradient(160deg, var(--paper-2), var(--paper-0));
  border:1px solid var(--hairline); box-shadow:var(--shadow-lift), var(--edge-top); }
.opdash .fig:hover{ box-shadow:var(--shadow-float), var(--edge-top); border-color:var(--brass-a28); }
.opdash .fig--hero{ background:linear-gradient(160deg, rgba(201,169,110,.10), var(--paper-0) 65%); border-color:var(--brass-a28); }
.opdash .fig--warn{ border-color:var(--warn-a40); }
.opdash .fig__k{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.opdash .fig__v{ font-family:var(--serif); font-weight:600; color:var(--ink-0);
  font-size:clamp(38px, 3.2vw, 52px); line-height:1; margin:14px 0 12px; letter-spacing:.5px; }
.opdash .fig--hero .fig__v, .opdash .fig--warn .fig__v{ color:var(--brass-200); }
.opdash .fig__v .cur{ font-size:.55em; color:var(--brass-400); margin-right:2px; vertical-align:top; }
.opdash .fig__note{ font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:0; }

/* Interventions */
.opdash .int-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:18px; }
.opdash .int{ display:flex; flex-direction:column; }
.opdash .int__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.opdash .int__icon{ color:var(--ink-3); }
.opdash .int__title{ font-size:16px; font-weight:600; color:var(--ink-0); margin-bottom:9px; }
.opdash .int__body{ font-size:14px; color:var(--ink-2); line-height:1.6; margin:0 0 20px; flex:1; }
.opdash .int .btn--quiet{ align-self:flex-start; }
.opdash .int--calm .int__body{ margin-bottom:0; }

/* Recovery table */
.opdash .table-card{ padding:8px 8px; overflow:hidden; }
.opdash .ledger .acct{ font-weight:600; color:var(--ink-0); white-space:nowrap; }
.opdash .ledger .id{ color:var(--brass-300); font-size:12.5px; white-space:nowrap; }
.opdash .ledger .matter{ color:var(--ink-1); min-width:260px; }
.opdash .ledger .matter .sub{ display:block; color:var(--ink-3); font-size:12.5px; margin-top:4px; }
.opdash .ledger .money{ color:var(--brass-200); font-weight:600; white-space:nowrap; }
.opdash .ta-r{ text-align:right; }

/* Records / Command strip */
.opdash .records{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, var(--paper-1), var(--paper-0)); box-shadow:var(--shadow-lift), var(--edge-top); }
.opdash .rec{ display:flex; align-items:center; gap:18px; padding:18px 22px; border-bottom:1px solid var(--hairline); }
.opdash .rec:last-child{ border-bottom:0; }
.opdash .rec__id{ font-size:11.5px; letter-spacing:.12em; color:var(--brass-400); min-width:110px; }
.opdash .rec__body{ flex:1; font-size:14px; color:var(--ink-2); }
.opdash .rec__who{ color:var(--ink-0); font-weight:600; }
.opdash .rec--btn{ text-decoration:none; transition:background-color .2s ease; }
.opdash .rec--btn:hover{ background:var(--ink-a04); }
.opdash .rec--primary{ background:linear-gradient(90deg, var(--brass-a14), transparent 70%); }
.opdash .rec--primary .rec__id{ color:var(--brass-200); }
.opdash .rec__go{ color:var(--ink-3); transition:transform .2s ease, color .2s ease; }
.opdash .rec--btn:hover .rec__go{ color:var(--brass-300); transform:translate(2px,-2px); }

/* Standards tiles + foot */
.opdash .tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:18px; }
.opdash .tile__k{ font-family:var(--serif); font-size:19px; color:var(--brass-200); margin-bottom:12px; letter-spacing:.3px; }
.opdash .tile__body{ font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0; }
.opdash .foot{ display:flex; align-items:center; gap:12px; margin-top:64px; padding-top:26px; border-top:1px solid var(--hairline);
  font-size:12.5px; color:var(--ink-3); }
.opdash .foot img{ opacity:.7; }

/* Responsive */

@media (max-width:860px){ .opdash .int-grid{ grid-template-columns:1fr; } .opdash .hero__copy{ max-width:100%; }
  .opdash .hero{ min-height:360px; }
  .opdash .hero__scrim{ background:linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.85) 55%, rgba(10,10,12,.95) 100%); } }
@media (max-width:520px){ .opdash .figs{ grid-template-columns:1fr; } }

/* ============================================================================
   OP3D — the Premium 3D operator-desk overhaul (owner's gcs_operator_dashboard
   design system, applied to EVERY operator page). Scoped under body.op3d
   (set only by ledger_admin_base) so the client desk is untouched. Values are
   verbatim from the design's index.css/App.css.
   ============================================================================ */
/* This block used to re-declare seven tokens that ledger.css's own :root was
   missing (hairline-2, btn-ink, the ink alphas, the three shadows). tokens.css
   carries all of them for every sheet now, so only the ground stays here. */
body.op3d{
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(201,169,110,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(201,169,110,.05), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%);
  background-attachment:fixed; }
body.op3d .shell{ background:transparent; }
body.op3d .shell .main{ padding:44px clamp(24px, 4vw, 68px) 60px; max-width:1240px; }

/* ---- Rail (desktop metrics; the <=960px horizontal rail keeps its rules) ---- */
@media (min-width:961px){
  body.op3d .shell{ grid-template-columns:296px minmax(0,1fr) var(--aside); }
  body.op3d .shell--noaside{ grid-template-columns:296px minmax(0,1fr); }
  body.op3d .shell .rail{ padding:30px 22px 24px;
    background:linear-gradient(180deg, rgba(23,21,26,.7), rgba(14,13,16,.55));
    border-right:1px solid var(--hairline); backdrop-filter:blur(14px);
    box-shadow:inset -1px 0 0 rgba(244,239,228,.03); }
  body.op3d .shell .brand{ margin-bottom:0; padding:0 6px 26px; }
  body.op3d .shell .nav{ gap:3px; margin-top:8px; }
}
body.op3d .shell .brand__mark{ gap:13px; }
body.op3d .shell .brand__logo{ width:46px; height:46px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
body.op3d .shell .brand__name{ font-size:20px; line-height:1.05; }
body.op3d .shell .brand__sub{ font-size:10px; letter-spacing:.24em; color:var(--brass-400); margin-top:5px; }
body.op3d .shell .nav__item{ font-size:14.5px; height:auto; padding:11px 14px; border:1px solid transparent; border-radius:11px;
  color:var(--ink-2); transition:color .25s ease, background-color .25s ease, transform .2s ease; }
body.op3d .shell .nav__item:hover{ color:var(--ink-0); background:var(--ink-a04); transform:translateX(2px); }
body.op3d .shell .nav__item.is-active{ color:var(--ink-0);
  background:linear-gradient(90deg, var(--brass-a14), var(--brass-a08) 60%, transparent);
  border-color:var(--brass-a28); box-shadow:var(--edge-top), 0 8px 20px -14px rgba(201,169,110,.6); }
body.op3d .shell .nav__item.is-active::before{ content:""; position:absolute; left:-22px; top:14%; bottom:14%; width:3px;
  border-radius:3px; background:linear-gradient(180deg, var(--brass-300), var(--brass-600));
  box-shadow:0 0 14px 1px var(--brass-a45); }
body.op3d .shell .nav__item--palette{ margin-top:14px; border:1px dashed var(--hairline-2); border-radius:11px; color:var(--ink-2); }
body.op3d .shell .nav__item--palette:hover{ border-style:solid; border-color:var(--brass-a28); transform:none; }
body.op3d .shell .nav__item--palette kbd{ margin-left:auto; font-size:11px; color:var(--ink-3);
  border:1px solid var(--hairline-2); border-radius:6px; padding:2px 6px; background:var(--bg-0); }
body.op3d .shell .rail__foot{ padding-top:20px; border-top:1px solid var(--hairline); }
body.op3d .shell .who{ gap:11px; padding:2px 4px 14px; }
body.op3d .shell .who__av{ width:38px; height:38px; border-radius:11px; font-family:var(--serif); font-size:19px; color:var(--btn-ink);
  background:linear-gradient(140deg, var(--brass-200), var(--brass-500) 55%, var(--brass-700));
  box-shadow:0 6px 16px -8px rgba(201,169,110,.7), var(--edge-top); }
body.op3d .shell .who__name{ font-size:12.5px; line-height:1.3; }
body.op3d .shell .who__role{ font-size:11px; letter-spacing:.14em; margin-top:2px; }
body.op3d .shell .signout{ font-size:13.5px; padding:9px 4px; }
body.op3d .shell .signout:hover{ color:var(--danger); }

/* ---- Type + controls ---- */
/* body.op3d used to re-skin the ledger button back into the desk button here,
   which is how the operator console ended up with two shells that only LOOKED
   alike on the pages someone had remembered to re-skin. Both shells now take
   the button from components.css, so there is nothing left to keep in sync. */
body.op3d .shell .link{ font-size:13.5px; color:var(--brass-300); }
body.op3d .shell .link:hover{ color:var(--brass-200); }
body.op3d .shell .badge{ font-size:11px; letter-spacing:.04em; font-weight:500; text-transform:capitalize;
  padding:4px 11px; border-radius:999px; border:1px solid transparent; }

/* ---- Section vocabulary (every operator page speaks this) ---- */
body.op3d .shell .card{ border-radius:16px; background:linear-gradient(160deg, var(--paper-2), var(--paper-0));
  border:1px solid var(--hairline); box-shadow:var(--shadow-lift), var(--edge-top); }
body.op3d .shell .card:hover{ border-color:var(--hairline-2); }
body.op3d .shell .tile__k{ font-family:var(--serif); font-size:19px; color:var(--brass-200); letter-spacing:.3px; }
body.op3d .shell .money-band .fig, body.op3d .shell .fig{ border-radius:16px; padding:24px 24px 22px;
  background:linear-gradient(160deg, var(--paper-2), var(--paper-0)); border:1px solid var(--hairline);
  box-shadow:var(--shadow-lift), var(--edge-top); }
body.op3d .shell .fig:hover{ box-shadow:var(--shadow-float), var(--edge-top); border-color:var(--brass-a28); }
body.op3d .shell .fig--hero{ background:linear-gradient(160deg, rgba(201,169,110,.10), var(--paper-0) 65%); border-color:var(--brass-a28); }
body.op3d .shell .fig--warn{ border-color:var(--warn-a40); }
body.op3d .shell .fig__k{ font-size:11px; letter-spacing:.15em; color:var(--ink-3); }
body.op3d .shell .fig__v{ font-size:clamp(38px, 3.2vw, 52px); line-height:1; letter-spacing:.5px; }
body.op3d .shell .fig--hero .fig__v, body.op3d .shell .fig--warn .fig__v{ color:var(--brass-200); }
body.op3d .shell .fig__note{ font-size:12.5px; line-height:1.5; }
body.op3d .shell .record{ border:1px solid var(--hairline); border-top:1px solid var(--hairline); border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, var(--paper-1), var(--paper-0)); box-shadow:var(--shadow-lift), var(--edge-top); margin-top:2px; }
body.op3d .shell .rec{ padding:18px 22px; border-bottom:1px solid var(--hairline); }
body.op3d .shell .rec:last-child{ border-bottom:0; }
body.op3d .shell .rec__t{ font-size:11.5px; letter-spacing:.12em; color:var(--brass-400); }
body.op3d .shell .rec__b{ font-size:14px; color:var(--ink-2); }
body.op3d .shell .rec .who2{ color:var(--ink-0); font-weight:600; }
body.op3d .shell table.ledger th, body.op3d .shell .reg th{ font-size:10.5px; letter-spacing:.16em; color:var(--ink-3);
  font-weight:500; padding:16px 18px 12px; border-bottom:1px solid var(--hairline); }
body.op3d .shell table.ledger td, body.op3d .shell .reg td{ padding:18px; font-size:14px; }
body.op3d .shell table.ledger tbody tr:hover, body.op3d .shell .reg tbody tr:hover{ background:var(--ink-a04); }
body.op3d .shell .reg, body.op3d .shell .scroll-x table.ledger{ border-radius:16px; }

/* ============================================================================
   Authorize pill — the client's one premium verb on an actionable "Needs your
   word" record row. Brass border at rest, fills to ivory on hover; lifts like
   the primary button. Sits in the record grid's third (auto) column. Ported
   verbatim from the desk.css Emergent record so the two desks read identically.
   ============================================================================ */
.shell .authorize-pill{ display:inline-flex; align-items:center; gap:7px; justify-self:end; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.02em; text-decoration:none; white-space:nowrap;
  color:var(--brass-200); padding:8px 15px; border-radius:999px; border:1px solid var(--brass-a45);
  background:linear-gradient(180deg, var(--brass-a14), var(--brass-a08)); box-shadow:var(--edge-top);
  transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .2s ease, border-color .2s ease; }
.shell .authorize-pill:hover{ color:var(--btn-ink); border-color:transparent;
  background:linear-gradient(180deg,var(--action-top),var(--ink-1)); transform:translateY(-1px);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.9); }
.shell .authorize-pill svg{ transition:transform .2s ease; }
.shell .authorize-pill:hover svg{ transform:translate(2px,0); }
.shell form.rec__act{ margin:0; justify-self:end; display:inline-flex; }

/* ============================================================================
   Lead Finder — the premium owner-initiated search band. A raised brass action
   card: 3D medallion icon, serif headline, and the page's single ivory primary
   action. Ported verbatim from the desk.css Emergent record so both desks read
   identically. Scoped to the client .shell.
   ============================================================================ */
.shell .finder-cta{ position:relative; overflow:hidden; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin:24px 0 8px; padding:clamp(22px,2.4vw,34px) clamp(24px,2.6vw,40px); border-radius:20px;
  border:1px solid var(--brass-a28);
  background:
    radial-gradient(120% 150% at 90% -30%, rgba(201,169,110,.16), transparent 55%),
    linear-gradient(158deg, var(--paper-2), var(--paper-0) 72%);
  box-shadow:var(--shadow-float), var(--edge-top); }
.shell .finder-cta__edge{ position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--brass-200), var(--brass-600)); box-shadow:0 0 18px var(--brass-a45); }
.shell .finder-cta__glow{ position:absolute; right:-6%; top:-46%; width:360px; height:360px; pointer-events:none;
  background:radial-gradient(circle, var(--brass-a14), transparent 66%); filter:blur(8px); }
.shell .finder-cta__ic{ position:relative; flex:none; display:grid; place-items:center; width:66px; height:66px;
  border-radius:18px; color:var(--brass-200);
  background:linear-gradient(158deg, rgba(201,169,110,.26), rgba(201,169,110,.05));
  border:1px solid var(--brass-a45);
  box-shadow:var(--edge-top), inset 0 -11px 22px -13px rgba(0,0,0,.8), 0 16px 30px -18px rgba(0,0,0,.92); }
.shell .finder-cta__body{ position:relative; flex:1; min-width:250px; }
.shell .finder-cta__title{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.1vw,28px);
  color:var(--ink-0); letter-spacing:.3px; margin:8px 0 8px; line-height:1.12; }
.shell .finder-cta__lead{ font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:60ch; margin:0; }
.shell .finder-cta__meta{ font-size:12px; letter-spacing:.04em; color:var(--ink-3); margin:12px 0 0; }
.shell .finder-cta__act{ position:relative; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin:0; }
.shell .finder-cta__btn{ padding:15px 26px; font-size:15px; border-radius:14px; }
.shell .finder-cta__btn-ic{ transition:transform .3s ease; }
.shell .finder-cta__btn:hover .finder-cta__btn-ic{ transform:rotate(-16deg) scale(1.06); }
.shell .finder-cta__fine{ font-size:11.5px; color:var(--ink-3); margin:0; text-align:right; max-width:27ch; line-height:1.5; }
.shell .finder-cta__act[data-busy] .finder-cta__btn{ pointer-events:none; opacity:.9; }
.shell .finder-cta__act[data-busy] .finder-cta__btn-ic{ animation:finder-spin .9s linear infinite; }
@keyframes finder-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .shell .finder-cta__act[data-busy] .finder-cta__btn-ic{ animation:none; } }
@media (max-width:720px){
  .shell .finder-cta__act{ align-items:stretch; width:100%; }
  .shell .finder-cta__btn{ width:100%; justify-content:center; }
  .shell .finder-cta__fine{ text-align:left; max-width:none; }
}

/* Tier-locked nav tab: visible so the owner can see the capability,
   visibly not theirs. Muted ink + lock glyph; no new colour. */
.shell .nav__item--locked{ color:var(--ink-3); }
.shell .nav__item--locked:hover{ color:var(--ink-2); }
.shell .nav__lock{ margin-left:auto; opacity:.65; flex:none; }

/* Ported from desk.css — the in-surface tier-lock card (_feature_lock.html)
   renders on ledger-shell pages too; without these rules the lock degraded to
   a bare glyph + unstyled text (register P1-13). */
.shell .locked{ display:flex; align-items:center; gap:18px; padding:20px 24px; border:1px dashed var(--hairline-2); border-radius:14px; background:linear-gradient(160deg, var(--bg-1), var(--bg-0)); }
.shell .locked__ic{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--ink-3); background:var(--ink-a04); border:1px solid var(--hairline-2); }
.shell .locked__t{ font-size:15.5px; font-weight:600; color:var(--ink-1); }
.shell .locked__d{ font-size:13px; color:var(--ink-3); margin:4px 0 0; }
.shell .locked .btn{ margin-left:auto; flex:none; }

/* --- Modifiers this sheet was missing -------------------------------------
   The fix recorded here was to COPY desk.css's ghost/sm/danger-ghost modifiers
   into this sheet so a control could not lose its styling by being used on the
   other shell. That was the right diagnosis and the wrong cure: it left two
   copies to keep in step, which is the same bug one generation later. The
   modifiers now live once, in components.css, which both shells load. */