/* PulaPay Operations — hand-written stylesheet.
   The constraint is the toolchain (no CSS framework); the quality is not.
   Restraint, type scale, spacing and hierarchy do the work.

   TWO COLOUR SYSTEMS, NEVER MIXED:
   · BRAND (navy structure, blue interaction, cyan one accent) — identity + interactive.
   · SEMANTIC (green/amber/red/grey) — operational state. A link is never a state colour;
     a state is never brand blue. In a money tool that separation is correctness, not taste.
   Brand values were SAMPLED from the artwork (PULAPAY/BRAND), not invented:
     navy   #011A48  (wordmark "Pay" / logo navy ground)
     blue   #1463EB  (electric blue — favicon/logo primary)
     cyan   #00C2ED  (bright gradient end — accent ONLY, never text: fails contrast on white)
   The violet→blue→cyan gradient stays in the LOGO mark and one 2px accent rule — nowhere behind content. */

:root {
  /* ─── the PulaPay colour SYSTEM ─────────────────────────────────────────────
     A FAMILY derived from the mark's gradient (violet → electric blue → cyan over
     midnight navy), sampled from the artwork — not two hex values. Each token has
     ONE allowed job; the gradient itself never sits behind content.
       midnight navy  → structure/chrome/dark grounds (NOT a primary sprayed around)
       electric blue  → interaction, selection, focus
       cyan           → a small highlight, never a dominant interface colour, never text
       violet         → brand expression / a subtle focus moment, almost never else
       blue-tinted neutrals → surfaces, borders, secondary text carry a trace of the
                              brand hue (the single change that most separates a
                              designed product from an admin panel).
     Sampled values (opsweb/static/brand): electric blue #0964de, indigo #5c7efd,
     cyan #02b9e4, navy #011a47. Interface tokens are tuned from these for WCAG. */

  /* brand */
  --navy: #0b1533;          /* midnight navy — header, chrome (white on it 17.9:1) */
  --navy-2: #141f42;        /* lifted navy — dark cards / the sign-in ground */
  --navy-line: #22305c;     /* border on navy */
  --brand: #1f5fe0;         /* electric blue — links/selection/focus (5.6:1 on white) */
  --brand-strong: #1747b0;  /* darker brand for hover */
  --indigo: #5c7efd;        /* soft accent on dark grounds */
  --cyan: #02b9e4;          /* highlight ONLY — never text (2.1:1, fails as text) */
  --violet: #6a4bff;        /* brand expression / focus moment only — never text */
  --accent: var(--brand);
  --accent-soft: #e9f0ff;
  --on-navy: #ffffff;
  --on-navy-dim: #aeb9d6;   /* dim text on navy (9.2:1) */

  /* blue-tinted neutrals (a trace of navy in every grey) */
  --bg: #f2f4fa;
  --surface: #ffffff;
  --surface-alt: #f7f9fe;
  --ink: #0f1729;           /* navy-black text */
  --ink-2: #41506b;         /* blue-grey secondary (7.4:1 on bg) */
  --ink-3: #566280;         /* blue-grey tertiary — still legible (6.1:1 on white) */
  --line: #e4e9f3;          /* blue-tinted hairline */

  /* semantic — separate from brand, HARMONISED to sit beside navy */
  --good: #137a4b; --good-bg: #e6f4ec;
  --wait: #8a5a12; --wait-bg: #fbf1dc;
  --bad:  #c62f45; --bad-bg:  #fbe9ec;   /* a crimson that belongs beside navy, still unmistakably a warning */
  --neutral: #4b586f; --neutral-bg: #eef1f7;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(11,21,51,.05), 0 1px 14px rgba(11,21,51,.05);
  --maxw: 1080px;

  /* ─── v4 PulaPay refinement tokens (additive — every name above is unchanged) ───────────────
     A materiality layer: a radius scale, a soft elevation scale tuned in the brand's navy (never
     neutral black — shadows carry a trace of the brand, like the neutrals do), motion timings, a
     single focus ring, and the brand gradient as ONE reusable token. These are the primitives the
     v4 section at the foot of this file composes from — no raw colour or shadow is scattered again. */

  /* radius scale (soft-edged, geometry-appropriate — not everything a pill) */
  --r-xs: 7px;      /* chips, small controls */
  --r-sm: 9px;      /* buttons, inputs */
  --r-md: 12px;     /* cards (== --radius) */
  --r-lg: 16px;     /* raised surfaces, modals */
  --r-pill: 999px;

  /* elevation — navy-tinted, restrained. e1 rests, e2 lifts on hover, e3 is a floating surface. */
  --e1: 0 1px 2px rgba(11,21,51,.05), 0 1px 3px rgba(11,21,51,.04);
  --e2: 0 2px 6px rgba(11,21,51,.06), 0 10px 24px rgba(11,21,51,.08);
  --e3: 0 12px 30px rgba(11,21,51,.14), 0 2px 8px rgba(11,21,51,.08);
  --e-inset: inset 0 1px 0 rgba(255,255,255,.6);   /* the faint top-light that makes a control tactile */

  /* interaction states derived from the brand (one job each) */
  --brand-hover: #1a54c9;      /* electric blue, pressed-toward-navy on hover */
  --brand-active: #1546a8;     /* deeper still on active/press */
  --focus-ring: 0 0 0 3px rgba(31,95,224,.28);   /* the one focus glow — brand blue at low alpha */
  --selected-bg: var(--accent-soft);
  --disabled-ink: #97a2ba;
  --disabled-bg: #eef1f7;

  /* refined blue-tinted surfaces (a touch more navy in the room, per the design note) */
  --bg-tint: #eef2fb;          /* the page, a shade bluer than --bg for the shell wells */
  --raised: #ffffff;           /* elevated surface */
  --hover-tint: #f4f7fe;       /* row / control hover wash */
  --line-strong: #d7deee;      /* a stronger divider where a hairline is too quiet */

  /* the PulaPay flow — the mark's violet→electric-blue→cyan energy, as ONE gradient token.
     Used for the signature hairline, the active-nav accent and (very faintly) entry surfaces —
     never as a fill behind working data. */
  --flow: linear-gradient(90deg, var(--violet) 0%, var(--brand) 52%, var(--cyan) 100%);
  --flow-soft: linear-gradient(120deg, rgba(106,75,255,.10) 0%, rgba(31,95,224,.10) 50%, rgba(2,185,228,.12) 100%);

  /* motion — subtle, operational, never theatrical */
  --t-fast: 120ms;
  --t-base: 170ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* the ONE gradient touch beyond the logo: a hairline signature rule (violet→blue→cyan) */
.brandrule { height: 2px; background: linear-gradient(90deg, var(--violet) 0%, var(--brand) 48%, var(--cyan) 100%); }

/* accessible keyboard focus, in brand blue */
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}

/* ── top bar (navy anchors the brand; content sits on light) ─ */
.topbar { background: var(--navy); border-bottom: 1px solid var(--navy-line); position: sticky; top: 0; z-index: 10; }
.topbar .inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 0 22px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .logochip { background: #fff; border-radius: 9px; padding: 6px 9px; display: inline-flex; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.brand .logochip img { height: 20px; display: block; }
.brand .pname { color: var(--on-navy); font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.brand .pname span { color: var(--on-navy-dim); font-weight: 500; margin-left: 6px; }
.nav { display: flex; gap: 3px; margin-left: auto; }
.nav a { color: var(--on-navy-dim); text-decoration: none; padding: 7px 13px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.10); color: var(--on-navy); }
.nav a.on { background: rgba(255,255,255,.14); color: var(--on-navy); }

.securitybar { background: #7a1414; color: #fff; font-size: 12px; text-align: center; padding: 6px 12px; letter-spacing: .02em; font-weight: 500; }

main { max-width: var(--maxw); margin: 0 auto; padding: 26px 22px 60px; }
.page-h { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 20px; }
.page-h h1 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.page-h .sub { color: var(--ink-3); font-size: 14px; }
.back { color: var(--accent); text-decoration: none; font-size: 14px; }
.back:hover { text-decoration: underline; }

/* ── cards / sections ────────────────────────────────────── */
.section-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 30px 0 12px; font-weight: 600; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }

/* work-pool tiles */
.tile { display: block; text-decoration: none; color: inherit; padding: 16px 18px; }
.tile .n { font-size: 30px; font-weight: 680; letter-spacing: -.02em; line-height: 1.1; }
.tile .n.zero { color: var(--ink-3); font-weight: 600; }
.tile .l { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.tile .tag { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.tile.alert .n { color: var(--bad); }
.tile.wait .n { color: var(--wait); }

/* ── the one thing to look at first ──────────────────────── */
.lede { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.lede .big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.lede .cap { color: var(--ink-2); }

/* ── pills / statuses ────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 550; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.pill.bad  { background: var(--bad-bg);  color: var(--bad); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }

/* ── tables ──────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); }
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fbfcfe; }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
.amount.lg { font-size: 16px; }
.name { font-weight: 550; }
.meta { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.profit-pos { color: var(--good); font-variant-numeric: tabular-nums; }
.profit-neg { color: var(--bad); font-variant-numeric: tabular-nums; }
a.rowlink { color: var(--accent); text-decoration: none; font-weight: 600; }
a.rowlink:hover { text-decoration: underline; }
/* Entity-first chooser: the primary action opens the entity; a secondary link offers the statement. */
.rowactions { display: flex; gap: 14px; align-items: baseline; justify-content: flex-end; }
a.rowlink.secondary { color: var(--ink3, #566280); font-weight: 500; }

/* ── Document workspace: the statement renders in place, in context, with one route back. ── */
.doc-return { display: flex; gap: 16px; margin-bottom: 8px; }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.doc-toolbar { display: flex; gap: 10px; align-items: center; }
a.btn-pdf.secondary, .btn-pdf.secondary { background: transparent; color: var(--accent, #1f5fe0);
  border: 1px solid var(--line, #e4e9f3); }
.stmt-actions { display: flex; gap: 10px; align-items: center; }
.doc-frame-wrap { margin-top: 12px; }
.docframe { width: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--line, #e4e9f3);
  border-radius: 8px; background: #fff; }
.delivery-map .delivery-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line, #e4e9f3); }
.delivery-map .delivery-row:last-of-type { border-bottom: 0; }
.delivery-map .delivery-row .meta { margin-top: 2px; max-width: 70ch; }

/* Customer 360 — routes out of the page, in one row. */
.connect-row { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }

/* Transaction — the timeline as a NARRATIVE, not a table. */
ol.timeline { list-style: none; margin: 0; padding: 14px 16px; }
.tl-step { position: relative; padding: 0 0 16px 22px; }
.tl-step:last-child { padding-bottom: 2px; }
.tl-step::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: -4px; width: 2px;
  background: var(--line, #e4e9f3); }
.tl-step:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent, #1f5fe0); }
.tl-what { font-weight: 600; color: var(--ink, #0f1729); }
.tl-when { margin-top: 1px; }
.tl-detail { margin-top: 2px; word-break: break-word; }

/* ── 🔴 REFLOW, NOT SHRINK. A dense table becomes a stack of cards on a phone: every column becomes a
   label:value row (nothing hidden, nothing merged — currency stays with its amount because both live
   in the same cell). Desktop is untouched; these rules apply only below the breakpoint. Opt-in via
   class="reflow" so only the surfaces we chose reflow, and the desktop table is unaffected. ── */
@media (max-width: 760px) {
  table.reflow { overflow: visible; }
  table.reflow, table.reflow tbody, table.reflow tr, table.reflow td { display: block; width: auto; }
  table.reflow thead { position: absolute; left: -9999px; height: 0; overflow: hidden; }  /* a11y-hide, not removed */
  table.reflow tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin: 0 0 10px;
    background: var(--surface); box-shadow: var(--shadow); }
  table.reflow td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 4px 0; border: 0 !important; text-align: right; min-height: 30px; }
  table.reflow td::before { content: attr(data-label); color: var(--ink-3); font-weight: 500;
    text-align: left; white-space: nowrap; flex: 0 0 auto; }
  /* first cell is the card's SUBJECT — prominent, no label, full width */
  table.reflow td:first-child { text-align: left; padding-bottom: 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line) !important; }
  table.reflow td:first-child::before { content: ""; }
  table.reflow td:first-child .rowlink { font-weight: 700; font-size: 15px; }
  table.reflow td.amount, table.reflow td.amount.lg { font-weight: 650; }
  table.reflow td .meta, table.reflow td div { text-align: right; }
  table.reflow td:first-child .meta, table.reflow td:first-child div { text-align: left; }
  /* a cell the row deliberately leaves empty (e.g. an action arrow) shouldn't show a lonely label */
  table.reflow td:empty { display: none; }
}

/* The phone download callout in the document workspace is desktop-hidden, mobile-shown. */
.doc-phone-note { display: none; }

/* Responsive: the surfaces added this pass. A phone is not a narrow desktop — stack, don't shrink. */
@media (max-width: 760px) {
  .doc-phone-note { display: block; }
  .connect-row { flex-direction: column; gap: 10px; }
  .delivery-map .delivery-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .doc-head { flex-direction: column; align-items: flex-start; }
  .doc-toolbar { width: 100%; }
  /* 🔴 The document workspace on a phone is a KNOWN hard case: an embedded PDF cannot be made
     readable at this width without a different renderer. So the honest outcome is to surface the
     DOWNLOAD prominently (the .doc-phone-note, hidden on desktop) and shrink the cramped iframe. */
  .docframe { height: 48vh; min-height: 260px; }
  .tl-detail { font-size: 12px; }
}

/* ── tap-not-type filter chips ───────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; align-items: center; }
.filters .grouplabel { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.chip { display: inline-block; text-decoration: none; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.chip:hover { border-color: #cfd6de; color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ── key-value detail ────────────────────────────────────── */
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 10px 16px; padding: 18px 20px; }
.kv .k { color: var(--ink-3); font-size: 13.5px; }
.kv .v { font-size: 14.5px; }
.kv .v.big { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }

/* stage strip (state model, shown honestly) */
.stages { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 20px; }
.stage { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stage .t { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.stage .s { margin-top: 7px; }
.stage .raw { margin-top: 6px; }

/* ── progressive disclosure ──────────────────────────────── */
details.tech { margin-top: 8px; }
details.tech > summary { cursor: pointer; color: var(--ink-3); font-size: 12.5px; list-style: none; user-select: none; }
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before { content: "▸ "; }
details.tech[open] > summary::before { content: "▾ "; }
details.tech > summary:hover { color: var(--ink-2); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink-2); }
pre { background: #0e1622; color: #d7e3f5; padding: 12px 14px; border-radius: 8px; overflow: auto; font-size: 12px; line-height: 1.5; }

/* ── notes / honest absences ─────────────────────────────── */
.note { background: #fbf9f2; border: 1px solid #ece2c7; color: #6b5a2e; padding: 12px 15px; border-radius: 10px; font-size: 13.5px; }
.note.absent { background: #f4f6f8; border-color: var(--line); color: var(--ink-2); }
.note b { color: inherit; }
.absent-panel { padding: 22px; text-align: center; color: var(--ink-3); }
.absent-panel .h { color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ── empty / error ───────────────────────────────────────── */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty .h { font-size: 17px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.errorwrap { max-width: 560px; margin: 60px auto; text-align: center; }
.errorwrap h1 { font-size: 22px; letter-spacing: -.02em; }
.errorwrap p { color: var(--ink-2); }

/* ── signed-in chip + sign out (in the navy header) ──────── */
.whoami { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.whoami .who { color: var(--on-navy-dim); font-size: 13px; white-space: nowrap; }
.signout { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.signout:hover { background: rgba(255,255,255,.20); }

/* ── sign-in page — the branded front door: navy drama, calm workspace within ── */
.signin-body { margin: 0; min-height: 100vh;
  /* midnight navy ground with a single deep brand glow (the mark's colours, kept to
     the entrance only — never behind working data) */
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(31,95,224,.28), transparent 60%),
    radial-gradient(720px 520px at 84% 108%, rgba(2,185,228,.14), transparent 55%),
    var(--navy);
}
.signin-stage { min-height: calc(100vh - 90px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.signin-panel { width: 100%; max-width: 400px; text-align: center; }
.signin-mark { width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 22px;
  background: var(--navy-2); border: 1px solid var(--navy-line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px rgba(2,10,32,.55), 0 0 0 6px rgba(31,95,224,.10); }
.signin-mark img { width: 52px; height: 52px; }
.signin-panel h1 { color: #fff; font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px; font-weight: 650; }
.signin-panel h1 span { color: var(--on-navy-dim); font-weight: 500; }
.signin-sub { color: var(--on-navy-dim); margin: 0 0 26px; line-height: 1.5; font-size: 14.5px; }
.g_id_signin, .gbtn { display: flex; justify-content: center; min-height: 44px; }
.signin-foot { color: #8493b8; font-size: 12.5px; margin-top: 22px; }
.signin-msg { text-align: left; font-size: 13.5px; border-radius: 12px; padding: 13px 15px; margin-bottom: 20px; }
.signin-msg.denied { background: rgba(198,47,69,.16); color: #ffc7cf; border: 1px solid rgba(198,47,69,.45); }
.signin-msg strong { display: block; margin-bottom: 3px; color: #fff; }
.signin-retry { margin-top: 12px; }
.signin-retry button { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.signin-retry button:hover { background: rgba(255,255,255,.26); }

/* ── search ──────────────────────────────────────────────── */
.searchbar { display: flex; gap: 8px; align-items: center; margin: 2px 0 16px; flex-wrap: wrap; }
.search { flex: 0 1 340px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.search::placeholder { color: var(--ink-3); }
.search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,95,224,.15); }

/* ── responsive: same meaning, different hierarchy (not shrinking) ── */
@media (max-width: 760px) {
  .topbar .inner { height: auto; flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; }
  .nav { margin-left: 0; flex-wrap: wrap; gap: 2px; }
  .whoami { margin-left: auto; }
  main { padding: 18px 14px 48px; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv .k { color: var(--ink-3); margin-top: 8px; }
  .stages { flex-direction: column; }
  .lede { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lede > div { text-align: left !important; margin-left: 0 !important; }
  /* dense tables keep every column and scroll, rather than crushing numbers */
  .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Sprint A: pagination + exception age + empty-state filters ── */
.pager { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; font-size: 13px; }
.pager-count { color: var(--muted); font-weight: 550; }
.pager-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pager-nav a { color: var(--brand); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.pager-nav a:hover { background: var(--neutral-bg); }
.pager-cur { color: var(--muted); }
.pager .off { color: var(--muted); opacity: .45; }
td.age { white-space: nowrap; }
td.age b { font-size: 14px; }
ul.active-filters { margin: 6px 0 12px; padding-left: 18px; }
ul.active-filters li { margin: 2px 0; }

/* ── Sprint B — Business rollups, drill-downs, and the transaction economics calc ── */
.section-h .axis { color: var(--ink-3); font-weight: 500; }
.fig-note { padding: 8px 14px 12px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.fig-note code { font-size: 11.5px; }
td.amount a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
td.amount a:hover { border-bottom-color: var(--ink-2); }
td.amount.good a, td.amount .good { color: var(--good); }
td.meta.empty { text-align: center; color: var(--ink-3); padding: 20px; }
.state-legend { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }
.state-legend code { font-size: 11.5px; }

.card.calc { padding: 14px 16px; max-width: 420px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.calc-row .cl { color: var(--ink-2); }
.calc-row .cv { font-variant-numeric: tabular-nums; font-weight: 500; }
.calc-rule { border-top: 1px solid var(--ink-2); margin: 6px 0; }
.calc-row.total .cl { font-weight: 600; }
.calc-row.total .cv { font-weight: 700; font-size: 17px; }
.calc .cv.absent { color: var(--ink-3); font-weight: 500; }
.calc-note { margin-top: 8px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.calc-note.absent { color: var(--ink-3); }
.calc-note code { font-size: 11px; }

/* ══ Operations SHELL — persistent left rail, top bar, search, placeholders (nav only) ══ */
.topbar .inner { max-width: none; }
.rail-toggle { display: none; background: transparent; border: 0; color: var(--on-navy); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.searchbtn { margin-left: 20px; background: rgba(255,255,255,.10); color: var(--on-navy-dim); border: 1px solid var(--navy-line);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.searchbtn:hover { background: rgba(255,255,255,.16); color: var(--on-navy); }
.searchbtn .kbd { font-size: 11px; color: var(--on-navy-dim); border: 1px solid var(--navy-line); border-radius: 5px; padding: 1px 5px; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.startview { position: relative; }
.startview-btn { background: transparent; color: var(--on-navy-dim); border: 1px solid var(--navy-line); border-radius: 8px; padding: 6px 11px; font-size: 13px; cursor: pointer; }
.startview-menu { position: absolute; right: 0; top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 260px; z-index: 30; }
.startview-menu .sv-note { font-size: 11px; color: var(--ink-3); padding: 6px 10px; }
.startview-menu a { display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none; color: var(--ink); font-size: 13.5px; }
.startview-menu a:hover { background: var(--surface-alt); }

.securitybar .env-chip { display: inline-block; background: rgba(255,255,255,.20); border-radius: 5px; padding: 1px 7px; margin-right: 8px; font-weight: 700; letter-spacing: .04em; }
/* 🔴 v4: staging/local are now IN the PulaPay system — a calm midnight-navy strip with a cyan chip,
   not an off-brand brown. Semantics are UNCHANGED: the STAGING word, the read-only meaning and the
   connection facts all remain; only production / unidentified / invalid keep the loud red base below. */
.securitybar.env-staging { background: var(--navy); }
.securitybar.env-staging .env-chip { background: var(--cyan); color: var(--navy); }
.securitybar.env-local, .securitybar.env-demo { background: var(--navy-2); }
.securitybar.env-local .env-chip, .securitybar.env-demo .env-chip { background: var(--indigo); color: var(--navy); }

.shell { display: flex; align-items: flex-start; }
.rail { width: 248px; flex: 0 0 248px; background: var(--surface); border-right: 1px solid var(--line);
  height: calc(100vh - 60px - 28px); position: sticky; top: 88px; overflow-y: auto; padding: 10px 8px 40px; }
.rail-sec { margin-bottom: 2px; }
.rail-sec-h { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 10px 10px 4px; display: flex; justify-content: space-between; align-items: center; }
.rail-sec-h .chev { transition: transform .15s; font-size: 10px; }
.rail-sec.closed .chev { transform: rotate(-90deg); }
.rail-sec.closed ul { display: none; }
.rail-sec ul { list-style: none; margin: 0 0 6px; padding: 0; }
.rail-sec li a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 1px 0; border-radius: 7px;
  text-decoration: none; color: var(--ink-2); font-size: 13px; }
.rail-sec li a:hover { background: var(--surface-alt); color: var(--ink); }
.rail-sec li a.on { background: var(--accent-soft); color: var(--brand-strong); font-weight: 600; }
.rail-sec li a .rl { flex: 1; min-width: 0; }

/* status badges — one consistent vocabulary everywhere */
.st { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; }
.st.big { font-size: 12px; padding: 3px 10px; }
.st-live { background: var(--good-bg); color: var(--good); }
.st-partial { background: var(--wait-bg); color: var(--wait); }
.st-planned { background: var(--neutral-bg); color: var(--neutral); }
.st-nya { background: var(--neutral-bg); color: var(--neutral); }
.st-blocked { background: var(--bad-bg); color: var(--bad); }

.content { flex: 1; min-width: 0; }
.content main { max-width: var(--maxw); margin: 0 auto; }

.nav-card { position: relative; }
.nav-card .st { position: absolute; top: 12px; right: 12px; }

/* placeholder screens — the Placeholder Standard */
.ph-crumb { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 4px; }
.ph-preview { display: inline-block; margin: 12px 0 16px; background: repeating-linear-gradient(45deg, #f2f4fa, #f2f4fa 10px, #eaeefb 10px, #eaeefb 20px);
  border: 1px dashed var(--ink-3); color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 6px 12px; border-radius: 8px; }
.ph-card { padding: 20px 22px; }
.ph-lead { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.ph-facts { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0; }
.ph-facts dt { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.ph-facts dd { margin: 0; color: var(--ink); font-size: 13.5px; }
.ph-honest { margin-top: 16px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 12px; }

/* universal search — wireframe */
.cmdk { position: fixed; inset: 0; background: rgba(11,21,51,.34); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.cmdk[hidden] { display: none; }
.cmdk-box { width: min(620px, 92vw); background: var(--surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(11,21,51,.28); overflow: hidden; }
.cmdk-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 16px; outline: none; }
.cmdk-note { background: var(--bad-bg); color: var(--bad); font-size: 11.5px; padding: 8px 18px; }
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: 8px; }
.cmdk-gh { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; padding: 8px 10px 2px; }
.cmdk-item { padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-2); cursor: default; outline: none; }
.cmdk-item:focus, .cmdk-item:hover { background: var(--accent-soft); }
.cmdk-item .wire { font-size: 9px; font-weight: 700; background: var(--neutral-bg); color: var(--neutral); border-radius: 4px; padding: 1px 5px; margin-right: 8px; }

/* Global search results page (/search). Records grouped apart from screens; every row is a link. */
.search-page { display: flex; gap: 8px; margin: 12px 0 20px; }
.search-page input { flex: 1; padding: 10px 12px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; }
.search-group { margin: 6px 0 16px; }
.search-gh { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 4px; }
.search-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 7px; text-decoration: none; color: var(--ink-1); }
.search-item:hover, .search-item:focus { background: var(--accent-soft); }
.search-item .search-kind { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--neutral-bg); color: var(--neutral); border-radius: 4px; padding: 1px 5px; }
.search-item.screen .search-kind { background: var(--accent-soft); color: var(--accent); }
.search-item .search-meta { margin-left: auto; color: var(--ink-3); font-size: 13px; }

.scrim { display: none; }
@media (max-width: 900px) {
  .rail { position: fixed; left: 0; top: 88px; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .rail.open { transform: translateX(0); }
  .rail-toggle { display: inline-block; }
  .scrim.show { display: block; position: fixed; inset: 88px 0 0; background: rgba(11,21,51,.34); z-index: 35; }
  .startview, .searchbtn .kbd { display: none; }
}

/* ── Section specifications (self-documenting pages) ── */
.about-section { display: inline-block; margin: 14px 0 -6px; font-size: 12.5px; color: var(--brand-strong); text-decoration: none; }
.about-section:hover { text-decoration: underline; }
.spec .spec-lead { padding: 16px 18px; }
.spec .spec-lead p { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.spec .spec-verify { font-size: 12px; color: var(--ink-3); margin: 0; }
.spec-panel { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; background: var(--surface); overflow: hidden; }
.spec-panel > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.spec-panel > summary::after { content: '＋'; color: var(--ink-3); }
.spec-panel[open] > summary::after { content: '－'; }
.spec-panel > summary:hover { background: var(--surface-alt); }
.spec-body { padding: 4px 16px 16px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.spec-body ul { margin: 6px 0; padding-left: 20px; }
.spec-body li { margin: 3px 0; }
.spec-body table { width: 100%; }

/* ══ NAVIGATION v2 — icon rail (Level 0) + one-domain drawer (Level 1). Overrides the v1 rail. ══ */
.rail { width: auto; flex: 0 0 auto; display: flex; align-items: stretch; background: transparent;
  border-right: 0; height: calc(100vh - 60px - 30px); position: sticky; top: 90px; padding: 0; overflow: visible; }
.iconrail { flex: 0 0 60px; width: 60px; background: var(--navy); display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 10px 0; overflow: visible; }   /* 🔴 visible, so the name flyout is never clipped */
.iconrail .rail-toggle { position: relative; display: inline-flex; background: transparent; border: 0; color: var(--on-navy-dim);
  font-size: 18px; cursor: pointer; padding: 8px; border-radius: 8px; margin-bottom: 6px; }
.iconrail .rail-toggle:hover { background: rgba(255,255,255,.12); color: var(--on-navy); }
.domico { width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--on-navy-dim);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.domico:hover { background: rgba(255,255,255,.12); color: var(--on-navy); }
.domico.sel { background: var(--brand); color: #fff; }
.domico:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.domico .mono { letter-spacing: -.02em; }

.domainpanel { flex: 0 0 232px; width: 232px; background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto; padding: 12px 8px 40px; }
/* 🔴 The domain panel is INDEPENDENT of the hamburger — it always shows the current domain on
   desktop. The hamburger toggles only the ICON RAIL's labels (below). */
/* When labels are ON (data-collapsed="false"), the icon rail widens to icon + readable name, so
   every domain is nameable at a glance; the user collapses it back themselves. It can scroll then
   (no flyout to clip). Default (data-collapsed="true") = icons only, with the hover/focus flyout. */
@media (min-width: 901px) {   /* label-toggle is a desktop affordance; mobile keeps the icons+panel drawer */
  .rail[data-collapsed="false"] .iconrail { width: 210px; flex: 0 0 210px; align-items: stretch; overflow-y: auto; }
  .rail[data-collapsed="false"] .rail-toggle { justify-content: flex-start; gap: 11px; padding: 8px 12px; }
  .rail[data-collapsed="false"] .domico { width: auto; height: 34px; justify-content: flex-start; gap: 11px; padding: 0 12px; }
  .rail[data-collapsed="false"] .domico .domico-lbl,
  .rail[data-collapsed="false"] .rail-toggle .domico-lbl {
    position: static; opacity: 1; transform: none; background: transparent; box-shadow: none;
    padding: 0; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: auto; }
  .rail[data-collapsed="false"] .domico .domico-lbl { color: inherit; }
  .rail[data-collapsed="false"] .rail-toggle .domico-lbl { color: var(--ink-3); font-size: 12px; }
}
.domain-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; padding: 4px 10px 8px; }
.domain ul { list-style: none; margin: 0; padding: 0; }
.domain li { display: flex; align-items: center; gap: 2px; }
.domain li a.dest { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 1px 0;
  border-radius: 7px; text-decoration: none; color: var(--ink-2); font-size: 13px; }
.domain li a.dest:hover { background: var(--surface-alt); color: var(--ink); }
.domain li a.dest.on { background: var(--accent-soft); color: var(--brand-strong); font-weight: 600; }
.domain li a.dest .rl { flex: 1; min-width: 0; }
.ispec { color: var(--ink-3); text-decoration: none; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.ispec:hover { background: var(--surface-alt); color: var(--brand-strong); }
.domain:focus-visible { outline: none; }

/* env banner — expanded facts vs a quiet textual chip (collapsible only for declared local/staging) */
.env-full { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.env-btn { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 6px; padding: 2px 9px; font-size: 11px; cursor: pointer; margin-left: 6px; }
.env-mini { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: #fff; font-size: 12px; cursor: pointer; width: 100%; justify-content: center; }
/* Honour the HTML `hidden` attribute the collapse JS sets: an explicit `display` on .env-full/.env-mini
   otherwise wins over `[hidden]`, so both the banner and the chip show at once and Collapse does nothing.
   (Same bug class as the .dom-extra fix.) Only declared local/staging ever render these controls. */
.env-full[hidden], .env-mini[hidden] { display: none !important; }
.securitybar.env-production, .securitybar.env-unidentified-not-declared { font-weight: 700; }

@media (max-width: 900px) {
  .rail { position: fixed; left: 0; top: 90px; z-index: 40; height: calc(100vh - 90px); box-shadow: var(--shadow); }
  .rail[data-collapsed="true"] { transform: translateX(-100%); }   /* mobile: collapsed = closed drawer */
  .rail[data-collapsed="true"] .domainpanel { display: block; }    /* the whole rail slides away instead */
  .scrim.show { display: block; position: fixed; inset: 90px 0 0; background: rgba(11,21,51,.34); z-index: 35; }
}

/* ══ v3 — LIGHT SURFACE + RECOGNISABLE ICONS. Navy becomes structure, not the whole room. ══ */
/* Top bar → white, deep-navy type, wide command-style search. */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .inner { gap: 16px; }
.brand .logochip { background: transparent; box-shadow: none; padding: 0; }
.brand .logochip img { height: 30px; border-radius: 8px; }
.brand .pname { color: var(--ink); }
.brand .pname span { color: var(--ink-3); }
.searchbtn { flex: 1; max-width: 620px; margin: 0 auto; justify-content: flex-start; gap: 10px;
  background: var(--surface-alt); color: var(--ink-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; font-size: 13.5px; }
.searchbtn:hover { background: #eef2fb; color: var(--ink-2); }
.searchbtn .sicon { display: inline-flex; color: var(--ink-3); }
.searchbtn .sicon svg { width: 17px; height: 17px; }
.searchbtn .kbd { margin-left: auto; color: var(--ink-3); border-color: var(--line); }
.topright { gap: 12px; }
.startview-btn { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.startview-btn:hover { background: var(--surface-alt); }
.who { color: var(--ink-2); font-size: 13px; }
.signout { background: var(--surface-alt); color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.signout:hover { background: #eef2fb; }

/* Icon rail → white with navy line icons; selected is unmistakable but restrained. */
.iconrail { background: var(--surface); border-right: 1px solid var(--line); }
.iconrail .rail-toggle { color: var(--ink-2); }
.iconrail .rail-toggle:hover { background: var(--surface-alt); color: var(--ink); }
.domico { position: relative; color: var(--ink-2); }
.domico .ico { width: 22px; height: 22px; }
.domico:hover { background: var(--surface-alt); color: var(--ink); }
.domico.sel { background: var(--accent-soft); color: var(--brand-strong); }
.domico.sel::before { content: ""; position: absolute; left: -0px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.domico:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* hover/keyboard-focus flyout label (accessible name is already the aria-label) */
.domico-lbl { position: absolute; left: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 7px; opacity: 0;
  pointer-events: none; transition: opacity .12s; z-index: 60; box-shadow: var(--shadow); }
.domico:hover .domico-lbl, .domico:focus-visible .domico-lbl,
.rail-toggle:hover .domico-lbl, .rail-toggle:focus-visible .domico-lbl { opacity: 1; }

/* Domain panel header (icon + full name + one-line description). */
.domainpanel { background: var(--surface); }
.domain-head { display: flex; gap: 11px; align-items: flex-start; padding: 8px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.domain-ico { color: var(--brand); display: inline-flex; margin-top: 2px; }
.domain-ico svg { width: 22px; height: 22px; }
.domain-name { font-size: 16px; font-weight: 680; color: var(--ink); letter-spacing: -.01em; }
.domain-desc { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 3px; }

/* Focus rings: navy/brand on the light surface, never low-contrast cyan. */
a:focus-visible, button:focus-visible, .dest:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Spec pages: tabbed layout + two-column body + quick facts ── */
.crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.crumb a { color: var(--brand-strong); text-decoration: none; }
.crumb span { margin: 0 4px; }
.spec-intro { font-size: 15px; color: var(--ink-2); margin: 2px 0 14px; max-width: 760px; }
.spec-banner { border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.spec-banner b { color: var(--ink); }
.spec-banner span { color: var(--ink-2); font-size: 13px; }
.spec-why { font-size: 13px; color: var(--ink-2); }
.st-band-blocked { background: var(--bad-bg); }
.st-band-partial { background: var(--wait-bg); }
.st-band-planned, .st-band-nya { background: var(--surface-alt); border: 1px solid var(--line); }
.st-band-live { background: var(--good-bg); }

.spec-2col { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.spec-main { min-width: 0; }
.tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 13px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--brand-strong); border-bottom-color: var(--brand); font-weight: 600; }
.tabpanel { padding: 2px 2px 8px; }
.tabpanel + .tabpanel { border-top: 1px solid var(--line); margin-top: 14px; }  /* only seen in no-JS stacked mode */
.tabpanel h3 { font-size: 14px; font-weight: 650; color: var(--ink); margin: 14px 0 6px; }
.tabpanel h3:first-child { margin-top: 0; }
.tabpanel p { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin: 0 0 6px; }
.tabpanel ul { margin: 6px 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.tabpanel li { margin: 3px 0; }

.spec-aside .facts { padding: 14px 16px; margin-bottom: 14px; }
.facts-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.spec-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.spec-aside dt { color: var(--ink-3); font-size: 12px; }
.spec-aside dd { margin: 0; color: var(--ink); font-size: 13px; }
.spec-aside .mono { font-size: 11.5px; }
@media (max-width: 820px) { .spec-2col { grid-template-columns: 1fr; } }

/* ══ Visual intelligence — charts as the first layer (inline, no library, no CDN) ══ */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.chart-grid .wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .chart-grid { grid-template-columns: 1fr; } }
.chart { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.chart-cap { font-size: 13.5px; font-weight: 650; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.chart-meta { font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.chart-empty { color: var(--ink-3); font-size: 13px; padding: 18px 4px; text-align: center; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 2px 4px; border-radius: 7px; }
a.bar-row:hover { background: var(--surface-alt); }
.bar-row.nolink { cursor: default; }
.bar-l { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 12px; background: var(--surface-alt); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; }
.bar-fill.zero { background: transparent; min-width: 0; border-left: 2px solid var(--ink-3); }   /* a real recorded zero, distinct from a gap */
.bar-v { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tbl { margin-top: 10px; }
.chart-tbl summary { font-size: 11.5px; color: var(--ink-3); cursor: pointer; }
.chart-tbl table { width: 100%; margin-top: 6px; }
svg.ts { width: 100%; height: auto; display: block; }
svg.ts .tsbar { fill: var(--brand); }
svg.ts .tsaxis { stroke: var(--line); stroke-width: 1; }
/* honest empty frame where a capability does not exist */
.chart-frame { margin-top: 18px; }
.chart-frame .frame-body { position: relative; height: 120px; border-radius: 10px; overflow: hidden; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; }
.chart-frame .frame-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(11,21,51,.05) 38px, rgba(11,21,51,.05) 39px); }
.chart-frame .frame-note { position: relative; max-width: 420px; text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 0 16px; }

/* ── Statements (customer & agent) ── */
.stmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 6px; }
.stmt-head h1 { margin: 2px 0; }
.stmt-sub { font-size: 12.5px; color: var(--ink-3); }
.btn-pdf { flex: 0 0 auto; background: var(--brand); color: #fff; text-decoration: none; border-radius: 9px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
.btn-pdf:hover { background: var(--brand-strong); }
.stmt-honest { margin-top: 12px; }
.searchfield { flex: 1; max-width: 460px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px; font-size: 14px; }
.amount.absent { color: var(--ink-3); font-weight: 500; }

/* ── Google-Admin-grade nav polish: expand chevrons, "Show more" progressive disclosure, footer ── */
/* Extra domains are hidden until "Show more" (progressive disclosure — the product feels small). */
.rail:not(.more-open) .dom-extra { display: none; }
.showmore .showmore-ico { font-size: 16px; letter-spacing: 1px; }
/* The expand chevron shows only in the labelled rail (there is room), signalling each domain opens
   its destinations in the panel. Hidden in icons-only mode. */
.domchev { display: none; }
@media (min-width: 901px) {
  .rail[data-collapsed="false"] .domchev { display: inline; margin-left: auto; color: var(--ink-3); font-size: 15px; }
  .rail[data-collapsed="false"] .domico.sel .domchev { color: var(--brand-strong); }
  .rail[data-collapsed="false"] .showmore { justify-content: flex-start; gap: 11px; padding: 0 12px; height: 34px; }
}
/* Professional footer at the bottom of the navigation column. */
.domainpanel { display: flex; flex-direction: column; }
.rail-foot { margin-top: auto; padding: 14px 12px 8px; border-top: 1px solid var(--line); }
.rail-foot-links { font-size: 11.5px; line-height: 1.7; }
.rail-foot-links a { color: var(--brand-strong); text-decoration: none; }
.rail-foot-links a:hover { text-decoration: underline; }
.rail-foot-copy { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   v4 — PULAPAY BRAND DNA + APPLE-GRADE MATERIALITY
   A refinement layer, not a second language: it composes ONLY from the tokens declared in :root and
   sharpens the SAME components defined above (env banner, controls, cards/tiles, tables, inputs, nav).
   Principle: PulaPay midnight-navy shell → blue/cyan brand energy → light blue-tinted workspace →
   navy type → electric-blue interaction → cyan used sparingly. Nothing decorative competes with data;
   semantic colours stay semantic; the brand is FELT through surface, geometry, motion and restraint.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the page well: a hair bluer, so white surfaces read as lifted out of a PulaPay ground ── */
body { background: var(--bg-tint); }

/* ── the signature: one flowing violet→blue→cyan hairline under the header (the mark's energy, once) ── */
.topbar { position: sticky; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--flow); opacity: .9; pointer-events: none; }

/* ── ENVIRONMENT BANNER — integrated into the shell, with an UNMISTAKABLE dismiss ──
   The strip is calm and on-brand (colour set above); here it gains breathing room and the collapse
   control becomes an obvious pill with an ✕, so it never reads as a permanent fixture. Collapsed, it
   is a slim, clearly-clickable chip that still states the environment and read-only truth. */
.securitybar { padding: 7px 16px; font-weight: 500; }
.env-full { gap: 10px; }
.env-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.30); border-radius: var(--r-pill); padding: 3px 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #fff;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.env-btn::after { content: "✕"; font-size: 10.5px; opacity: .85; }
.env-btn:hover { background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.5); }
.env-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.env-mini { padding: 5px 8px; opacity: .94; transition: opacity var(--t-fast) var(--ease); }
.env-mini:hover { opacity: 1; }
.env-mini:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.45); border-radius: var(--r-sm); }

/* ── APPLE-GRADE CONTROLS — one materiality, three weights ──
   Soft-edged, tactile-not-glossy: a faint top-light (--e-inset) + a restrained shadow, a real press
   (translateY), a clear brand focus ring. Primary is confident; secondary is quiet; tertiary recedes. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit;
  font-size: 13.5px; font-weight: 600; line-height: 1; padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; -webkit-user-select: none; user-select: none;
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn.is-disabled { cursor: not-allowed; color: var(--disabled-ink);
  background: var(--disabled-bg); border-color: var(--disabled-bg); box-shadow: none; transform: none; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--e1), var(--e-inset); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--e2), var(--e-inset); }
.btn-primary:active { background: var(--brand-active); box-shadow: var(--e1); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--e1); }
.btn-secondary:hover { background: var(--hover-tint); border-color: #c7d0e6; }
.btn-tertiary { background: transparent; color: var(--brand); padding: 9px 10px; }
.btn-tertiary:hover { background: var(--accent-soft); }

/* existing controls inherit the SAME materiality (harmonised, not duplicated) */
.btn-pdf { border-radius: var(--r-sm); box-shadow: var(--e1), var(--e-inset);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.btn-pdf:hover { background: var(--brand-hover); box-shadow: var(--e2), var(--e-inset); }
.btn-pdf:active { background: var(--brand-active); transform: translateY(.5px); box-shadow: var(--e1); }
.btn-pdf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.signout, .startview-btn, .chip { border-radius: var(--r-sm);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.chip { border-radius: var(--r-pill); }
.signout:focus-visible, .startview-btn:focus-visible, .chip:focus-visible,
.signin-retry button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.signin-retry button { border-radius: var(--r-sm); transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.signin-retry button:active { transform: translateY(.5px); }

/* the command-style search button — a first-class, tactile control in the shell */
.searchbtn { border-radius: var(--r-sm); box-shadow: var(--e1);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.searchbtn:hover { border-color: #c7d0e6; box-shadow: var(--e2); }
.searchbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }

/* ── CARDS / TILES — calm, precise, lightly elevated; instruments, not ornaments ── */
.card { border-color: var(--line); box-shadow: var(--e1);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
/* interactive tiles (Home signals, nav cards) lift on hover and carry a semantic edge accent */
a.card.tile { position: relative; overflow: hidden; }
a.card.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); opacity: 0; transition: opacity var(--t-base) var(--ease); }
a.card.tile:hover { border-color: #d3ddf1; box-shadow: var(--e2); transform: translateY(-2px); }
a.card.tile:hover::before { opacity: .85; }
a.card.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }
a.card.tile.alert::before { background: var(--bad); opacity: .9; }   /* failure edge — always on */
a.card.tile.wait::before  { background: var(--wait); opacity: .9; }  /* attention edge — always on */
/* the primary signal is the NUMBER: authoritative, tabular, tight */
.tile .n { font-size: 34px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.tile .l { color: var(--ink-2); font-size: 13.5px; font-weight: 550; margin-top: 5px; }
.tile .tag { color: var(--ink-3); }
/* the "see everything" tile reads as a quiet way forward, not an exception */
a.card.tile .n[style*="--accent"] { font-weight: 600; }

/* nav cards in the command grid: the status badge sits calm, the label leads */
.nav-card .l { font-weight: 600; color: var(--ink); font-size: 14px; }
.nav-card:hover::before { opacity: .7; }

/* ── TYPOGRAPHY — a clear operational hierarchy built from weight + space, not decoration ── */
.page-h { margin: 6px 0 22px; }
.page-h h1 { font-size: 24px; font-weight: 690; letter-spacing: -.025em; }
.page-h .sub { color: var(--ink-3); }
.section-h { color: var(--ink-3); }
.lede .big { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }

/* ── TABLES — precise rhythm, quiet separators, unmistakable hover; numbers stay tabular ── */
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover td { background: var(--hover-tint); }
thead th { color: var(--ink-3); background: var(--surface-alt); }
.amount, .meta, td.age b { font-variant-numeric: tabular-nums; }

/* ── INPUTS — the same soft materiality, with an unmistakable focus ring ── */
.search, .searchfield, .search-page input, .cmdk-box input {
  border-radius: var(--r-sm);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.search:focus, .searchfield:focus, .search-page input:focus, .cmdk-box input:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.cmdk-box { border-radius: var(--r-lg); box-shadow: var(--e3); }

/* ── NAV — the active domain wears the PulaPay flow, not a flat bar ── */
.domico.sel::before { background: var(--flow); }
.domico, .domico .ico, .dest, .rail-toggle { transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.domain li a.dest.on { box-shadow: inset 2px 0 0 var(--brand); }

/* ── the branded front door: a whisper of the flow behind the entrance (never behind data) ── */
.signin-mark { position: relative; }
.signin-mark::after { content: ""; position: absolute; inset: -6px; border-radius: 26px;
  background: var(--flow-soft); z-index: -1; filter: blur(6px); opacity: .8; }

/* ── MOTION — honour the operator who turned it off ── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  a.card.tile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   v5 — STATEMENTS as a PulaPay financial operations surface (visual only)
   The chooser and the statement stop reading as a CRUD form + generic table: a composed header that
   carries the flow signature, a premium tap-to-select control, deliberate action controls (not bare
   blue links), and a table that reads as a financial instrument — the business ID related to its
   agent, numbers tabular, commission distinct. Routes, queries, text and data are untouched.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the header: an operations masthead with the PulaPay flow accent, not a page title ── */
.stmt-hero { position: relative; padding: 16px 0 2px; margin-bottom: 10px; }
.stmt-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 3px;
  border-radius: 3px; background: var(--flow); }
.stmt-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); }
.stmt-hero .page-h { margin: 4px 0 8px; }
.stmt-hero .page-h h1 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.stmt-hero .spec-intro { max-width: 760px; }

/* ── the selector: one premium tap-to-select control, not a loose form ── */
.stmt-selector { display: flex; gap: 8px; align-items: center; max-width: 640px; margin: 6px 0 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 7px; box-shadow: var(--e1);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.stmt-selector:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.stmt-selector .searchfield { flex: 1; max-width: none; border: 0; background: transparent;
  padding: 9px 12px; font-size: 14.5px; }
.stmt-selector .searchfield:focus { outline: none; border: 0; box-shadow: none; }
.stmt-selector .chip.on { border-radius: var(--r-sm); padding: 9px 18px; font-weight: 600;
  box-shadow: var(--e1), var(--e-inset); }
.stmt-selector .chip.on:hover { background: var(--brand-hover); }
.stmt-selector .chip.on:active { transform: translateY(.5px); }

/* ── deliberate action controls: "Open agent →" leads (brand-tinted), "Statement →" is the quiet
   secondary — both tactile, both with a focus ring; never bare blue hyperlinks ── */
.rowactions .rowlink { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600; border: 1px solid transparent;
  text-decoration: none; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
  border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.rowactions .rowlink:not(.secondary) { color: var(--brand-strong); background: var(--accent-soft); }
.rowactions .rowlink:not(.secondary):hover { background: #dce7ff; text-decoration: none; }
.rowactions .rowlink.secondary { color: var(--ink-2); font-weight: 550; background: var(--surface);
  border-color: var(--line-strong); }
.rowactions .rowlink.secondary:hover { background: var(--hover-tint); color: var(--ink);
  border-color: #c7d0e6; text-decoration: none; }
.rowactions .rowlink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rowactions .rowlink:active { transform: translateY(.5px); }

/* ── the agent table as a financial instrument: identity leads, the business ID is a chip bound to
   its agent, numbers are tabular, the header sits on a tinted ground ── */
.stmt-choose thead th { background: var(--surface-alt); }
.stmt-choose td.name { font-weight: 650; color: var(--ink); }
.stmt-choose td.name .mono { display: inline-block; margin-top: 4px; padding: 1px 7px; font-size: 11.5px;
  color: var(--ink-2); background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: 6px; letter-spacing: .02em; }
.stmt-choose td.amount, .stmt-choose td[data-label="Commission earned"],
.stmt-choose td[data-label="Attributed"] { font-variant-numeric: tabular-nums; }
.stmt-choose tbody tr:hover td { background: var(--hover-tint); }

/* ── the individual statement: same masthead treatment + a corrected secondary download control ── */
.stmt-head { position: relative; padding-top: 14px; }
.stmt-head::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 3px;
  border-radius: 3px; background: var(--flow); }
.stmt-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.stmt-head .ph-crumb { color: var(--brand); }
.btn-pdf.secondary { box-shadow: var(--e1); }
.btn-pdf.secondary:hover { background: var(--hover-tint); color: var(--brand-strong); border-color: #c7d0e6; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   v6 — THE MARK'S GEOMETRY AS STRUCTURE (not artwork), the dark shell / light workspace, and a
   deliberate empty state. The diagnosis was: we borrowed the brand's COLOURS, not its GEOMETRY. So the
   mark's forward-leaning flow now lives in STRUCTURAL relationships — the selected edge, the masthead
   signature, the shell/workspace boundary — never as a background picture. 🔴 The gradient stays SCARCE
   (four places only: the header hairline, the page masthead edge, the active-nav edge, the sign-in
   glow). No new gradients behind cards, no logos in corners, no glows.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE SHELL IS A DARK PREMIUM INFRASTRUCTURE LAYER; the workspace stays a light precision surface.
   Navy chrome (top bar + icon rail) frames the white domain panel and content — the relationship the
   brand composition implies, and the single strongest cue that this is PulaPay, not a light admin app. */
.topbar { background: var(--navy); border-bottom-color: var(--navy-line); }
.topbar::after { opacity: 1; }                                   /* the flow hairline reads on navy */
.brand .logochip { background: #fff; border-radius: 8px; padding: 4px 6px; box-shadow: 0 1px 3px rgba(2,10,32,.35); }
.brand .logochip img { height: 22px; }
.brand .pname { color: var(--on-navy); }
.brand .pname span { color: var(--on-navy-dim); }
.searchbtn { background: rgba(255,255,255,.08); color: var(--on-navy-dim); border-color: var(--navy-line); }
.searchbtn:hover { background: rgba(255,255,255,.14); color: var(--on-navy); border-color: var(--navy-line); }
.searchbtn .sicon { color: var(--on-navy-dim); }
.searchbtn .kbd { color: var(--on-navy-dim); border-color: var(--navy-line); }
.startview-btn { background: rgba(255,255,255,.08); color: var(--on-navy-dim); border-color: var(--navy-line); }
.startview-btn:hover { background: rgba(255,255,255,.14); }
.who { color: var(--on-navy-dim); }
.signout { background: rgba(255,255,255,.10); color: var(--on-navy); border-color: var(--navy-line); }
.signout:hover { background: rgba(255,255,255,.18); }
/* icon rail = the dark spine of the shell; the domain panel beside it stays light (the workspace edge) */
.iconrail { background: var(--navy); border-right-color: var(--navy-line); }
.iconrail .rail-toggle { color: var(--on-navy-dim); }
.iconrail .rail-toggle:hover { background: rgba(255,255,255,.12); color: var(--on-navy); }
.domico { color: var(--on-navy-dim); }
.domico:hover { background: rgba(255,255,255,.10); color: var(--on-navy); }
.domico.sel { background: rgba(255,255,255,.12); color: #fff; }
.domico.sel::before { background: linear-gradient(180deg, var(--violet), var(--brand) 55%, var(--cyan)); } /* directional edge */

/* ── THE FLOW AS A RECURRING SIGNATURE — a leading vertical edge, the same geometry on the page
   masthead AND the active nav destination, so selection and location share one structural language.
   A vertical gradient (violet→blue→cyan) reads as the mark's forward motion, not a decorative bar. */
.page-h { position: relative; padding-left: 14px; }
.page-h::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--violet), var(--brand) 55%, var(--cyan)); }
/* the statements masthead already carries its own accent — don't double it */
.stmt-hero .page-h { padding-left: 0; }
.stmt-hero .page-h::before { display: none; }

/* ── SELECTED STATE, unmistakable and directional. The active destination wears the same leading flow
   edge as the masthead (structural rhythm), replacing the flat brand bar. Quiet until touched. */
.domain li a.dest.on { position: relative; box-shadow: none; }
.domain li a.dest.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--violet), var(--brand) 55%, var(--cyan)); }

/* ── CALM ZEROS — a zero is not an exception. On empty production every tile reads 0; a red or amber
   zero would look like a problem where there is none. Any zero is muted and quiet, whatever its tile. */
.tile .n.zero,
.tile.alert .n.zero,
.tile.wait .n.zero { color: var(--ink-3); font-weight: 600; }

/* ── A DELIBERATE EMPTY STATE — a system WAITING, not a system FAILING. Empty production is the truth
   (no invented rows, no sample data); it should look composed: generous space, the flow signature, a
   calm line. Applies to the empty tables/panels already in the markup. */
.empty { padding: 56px 24px; }
.empty::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; margin: 0 auto 16px;
  background: var(--flow); opacity: .85; }
.empty .h { font-size: 16px; color: var(--ink-2); }
.card.empty { background: var(--surface); }
.absent-panel { padding: 40px 24px; }

/* ── WHITESPACE AS A PREMIUM MATERIAL — a little more air where the surface read cramped. Measured, not
   sprawling: the operating surface should feel unhurried, still dense enough for financial work. */
.page-h { margin: 8px 0 24px; }
.section-h { margin-top: 34px; }
main { padding-top: 30px; }

/* new transforms respect reduced motion via the block above; nothing here animates on load. */