/* SPCR stylesheet. "Book of record": the workspace reads as a register.
   Cool register-paper ground tinted from the brand navy, white leaves for
   records, hairline rules, a near-black navy rail carrying the STOKR wordmark,
   serif page and series titles over Open Sans, mono identifiers as serials.
   Tokens and rules: DESIGN.md. Direction: .impeccable/briefs/. */

:root {
  /* The DESIGN.md palette (UI redesign, PR A). These are the only raw colour
     values in the light theme; everything below reads them through the older
     names, which are kept as aliases so every page moved in one step without a
     rename across 2,000 lines. New code should use the DESIGN.md names. */
  /* READABILITY FIRST (2026-10-12). The audience skews senior, so body text,
     labels, table headers and notes are near-black (--ink-700), and the one
     grey (--ink-500) is dark, for genuinely secondary text only: 8.3:1 on the
     page ground. There is no light-grey text token; do not add one. */
  --ink-900:#0E1726; --ink-700:#1A2233; --ink-500:#3F4A5C;
  /* REGISTER PAPER (Book of record, 2026-10-19): the ground is a cool white
     tinted from the brand navy, not the warm cream it replaced. Records sit on
     white leaves; hairlines are the same hue, a step darker. */
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-subtle:#ECEFF4;
  --border:#DCE1E8; --border-strong:#C3CAD5;
  /* Neither border above reaches 3:1, so neither may be the only edge of an
     input (WCAG 1.4.11). Inputs and outline buttons use this one. */
  --border-control:#7A8494; /* 3.8:1 on white */
  --accent-900:#1F4E8C; --accent-hover:#183F72; --accent-tint:#E8EEF6;
  --positive:#1E6B47; --positive-tint:#E8F0ED; --positive-line:#BCD3C7;
  --caution:#8A5A00; --caution-tint:#F3EEE6; --caution-line:#E3D3B5;
  --negative:#9B2C2C; --negative-tint:#F5EAEA; --negative-line:#E6C6C6;
  --on-accent:#FFFFFF;
  --focus-ring:rgba(31,78,140,.28);
  /* The rail: the brand's near-black navy, the one committed colour field.
     Text on it is tinted from the navy, never grey (craft floor). */
  --rail-bg:#0E1726; --rail-line:#1F2A40; --rail-fg:#E8ECF3; --rail-text:#C7D0DD;
  --rail-mut:#9FAABD; --rail-hover:#17223A; --rail-active:#233253;
  /* One fixed type scale (Operate surfaces want fixed rem steps, ratio ~1.15).
     Serif is for page and series titles only. */
  --text-xs:12.5px; --text-sm:13.5px; --text-base:15px; --text-md:16.5px;
  --text-lg:19px; --text-xl:26px; --text-2xl:32px;
  --shadow-overlay:0 8px 24px rgba(14,23,38,.12);

  /* Older names, now aliases. */
  --paper:var(--bg); --surface-2:var(--surface-subtle);
  --ink:var(--ink-900); --ink-2:var(--ink-700); --muted:var(--ink-500);
  --line:var(--border); --line-strong:var(--border-strong);
  --navy:var(--accent-900); --navy-hover:var(--accent-hover); --navy-soft:var(--accent-tint);
  --accent:var(--accent-900); --accent-ink:var(--accent-hover); --accent-soft:var(--accent-tint);
  --ok:var(--positive); --ok-soft:var(--positive-tint); --ok-line:var(--positive-line);
  --warn:var(--caution); --warn-soft:var(--caution-tint); --warn-line:var(--caution-line);
  --gone:var(--ink-500); --gone-soft:var(--surface-subtle);
  --bad:var(--negative); --bad-soft:var(--negative-tint); --bad-line:var(--negative-line);
  /* Sold is neutral ink, not blue: blue now means "you can act on this". */
  --sold:var(--ink-700); --sold-soft:var(--surface-subtle);
  --header-bg:var(--ink-900); --header-line:#27314A; --header-fg:#E8ECF3; --header-mut:#B9C2D2;
  --header-hover:#16203A; --header-danger:#F87171;
  --font-serif:var(--font-source-serif),"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-sans:var(--font-open-sans),ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* IBM Plex Mono, for identifiers only: Loan IDs, token IDs, addresses, hashes. */
  --font-mono:var(--font-plex-mono),ui-monospace,"SF Mono",Menlo,Monaco,monospace;
  --r:4px; --r-sm:4px; --r-dialog:6px;
  /* Borders, not shadows. Cards and KPIs keep this name but no longer lift;
     only overlays (menus, dialogs, popovers) cast a shadow. */
  --shadow:none;
  --sidebar-w:236px; --topbar-h:56px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-sans); color:var(--ink-2); background:var(--paper);
  font-size:var(--text-base); line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap { max-width:1280px; margin:0 auto; padding:0 28px; }

/* SCALE UP ON LARGE MONITORS. Every page's content sits in .wrap, capped at
   1280px and centred — which is right for a laptop, but on anything wider the
   design just centres that same 1280px column and leaves the rest of the
   screen blank. At 2560px (a common 27" monitor) that is 1280px of dead
   margin, and the content itself is still sized for a much smaller window, so
   it reads as small on a big display even though nothing is actually wrong.

   Two levers, stepped together at three breakpoints: .wrap gets modestly
   wider (more room for tables, not edge-to-edge) and `zoom` scales the whole
   page (text, spacing, controls) so it feels sized for the screen rather than
   just spread across more of it. `zoom` rather than a `transform: scale` — it
   participates in real layout, so position:fixed chrome (the workspace
   sidebar/topbar) reflows and stays pinned correctly, exactly as it does under
   a browser's own Ctrl/Cmd+ zoom, which this is functionally identical to.
   Verified live at 1366 (unaffected: zoom 1, wrap 1280px, pixel-identical to
   before), 1920, 2560 and on a workspace page with the fixed sidebar, a wide
   data table, and the pool accordion — no horizontal overflow, no clipped or
   misaligned chrome at any step.

   Below 1600px — every laptop and most desktop windows — nothing here fires,
   so the existing design is untouched. */
@media (min-width:1600px){ .wrap{ max-width:1440px } body{ zoom:1.08 } }
@media (min-width:2000px){ .wrap{ max-width:1560px } body{ zoom:1.18 } }
@media (min-width:2560px){ .wrap{ max-width:1680px } body{ zoom:1.30 } }
.tnum { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-mono); }
.eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.09em; font-size:14px; font-weight:600; color:var(--ink-2); }
/* Sentence case (DESIGN.md: uppercase only for table column headers). The
   first letter is raised so lowercase source strings still read as sentences. */
.label { display:inline-block; font-size:var(--text-sm); font-weight:500; color:var(--ink-500); }
.label::first-letter { text-transform:uppercase; }
h1,h2,h3,h4 { text-wrap:balance; margin:0; color:var(--ink); }
p { text-wrap:pretty; }
/* The parts no component draws still carry the palette (craft floor). */
::selection { background:#CBD8EC; color:var(--ink-900); }
input, textarea { caret-color:var(--accent); }
/* ONE focus ring, everywhere: 2px accent, offset. Elements that drew their
   own (or removed it) now inherit this; inputs add a soft halo below. */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.skip-link {
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--surface); color:var(--accent); font-weight:600;
  padding:10px 14px; border:2px solid var(--accent); border-radius:var(--r-sm);
}
.skip-link:focus { left:12px; }
button { font-family:inherit; cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
/* The browser default placeholder is a light grey, and these carry examples
   people read ("e.g. ORIGINATOR1-2026-P0-L0001"). */
::placeholder { color:var(--muted); opacity:1; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.muted { color:var(--muted); }
.small { font-size:14.5px; }
.nowrap { white-space:nowrap; }
.break { word-break:break-all; }

/* ---------- Public top bar (root site: verify, registry, login) ----------
   Deliberately kept from the first iteration: dark navy with the serif
   SPCR wordmark. The rest of the site is light "banking SaaS". */
.appbar { background:var(--header-bg); color:var(--header-fg); border-bottom:1px solid var(--header-line); position:sticky; top:0; z-index:40; }
.appbar .wrap { display:flex; align-items:center; gap:22px; height:62px; }
.brand { display:flex; align-items:baseline; gap:11px; }
.brand a { text-decoration:none; }
.brand .mark { display:inline-flex; align-items:center; color:var(--header-fg); }
.brand .tag { font-size:14px; color:var(--header-mut); letter-spacing:.06em; text-transform:uppercase; padding-bottom:2px; }
.appbar .spacer { flex:1; }
.mainnav { display:flex; gap:2px; }
.mainnav a {
  color:var(--header-mut); padding:8px 13px; border-radius:var(--r);
  font-size:15px; font-weight:500; text-decoration:none;
}
.mainnav a:hover { color:var(--header-fg); background:var(--header-hover); text-decoration:none; }
.appbar .authbox { display:flex; align-items:center; gap:10px; flex:none; }
.appbar .authbox .btn.ghost {
  background:transparent; color:var(--header-fg); border:1px solid var(--header-line);
}
.appbar .authbox .btn.ghost:hover { background:rgba(255,255,255,.06); }
/* .user-chip's default color (--ink-2) is near-black, correct on the white
   workspace topbar it was designed for — but on this dark public header it's
   dark text on a dark background, which is why the email was unreadable. */
.appbar .user-chip { border-color:var(--header-line); color:var(--header-fg); }
.appbar .user-chip .signout { color:var(--header-mut); }
.appbar .user-chip .signout:hover { color:var(--header-danger); }
/* Tablet and small-laptop widths (769 to 1199px) get the desktop bar: brand
   label, nav and, when signed in, the account email. Nothing in the bar is
   allowed to wrap; the email is the first thing to go (it stays on the chip's
   hover title). */
.appbar .brand .tag { white-space:nowrap; }
@media (max-width:960px){
  .appbar .user-chip-email { display:none; }
}

/* ---------- Workspace shell (sidebar + topbar) ---------- */
.shell-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--rail-bg); color:var(--rail-text);
  display:flex; flex-direction:column; z-index:50;
}
/* Coloured banner + serif wordmark, matching the public site's top bar,
   sitting at the head of the workspace sidebar. */
.sb-logo {
  padding:20px 20px 18px; background:var(--rail-bg);
  border-bottom:1px solid var(--rail-line);
}
.sb-logo a { display:block; text-decoration:none; }
.sb-brand-mark { color:var(--header-fg); line-height:1.05; }
.sb-logo-sub {
  font-size:12px; color:var(--rail-mut); text-transform:uppercase;
  letter-spacing:.12em; margin-top:6px; line-height:1.4;
}
.sb-nav { flex:1; padding:8px 0; overflow-y:auto; }
/* Navigation group names, not headings: small, tracked, quiet on the rail. */
.sb-section {
  padding:18px 20px 6px; font-size:11.5px; font-weight:600;
  color:var(--rail-mut); text-transform:uppercase; letter-spacing:.12em;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  margin:1px 10px; padding:8px 10px; border-radius:var(--r-sm); color:var(--rail-text);
  font-size:var(--text-base); font-weight:400; text-decoration:none;
  position:relative; transition:background-color .15s ease, color .15s ease;
}
.nav-item:hover { color:var(--rail-fg); background:var(--rail-hover); text-decoration:none; }
/* Current page: a filled row, not a coloured edge bar (craft floor). */
.nav-item.active { color:#FFFFFF; background:var(--rail-active); font-weight:600; }
.nav-item:focus-visible { outline-color:var(--rail-fg); outline-offset:-2px; }
.nav-icon { width:15px; height:15px; opacity:.7; flex:none; fill:currentColor; }
/* Links that leave the area (ExternalLinks, shell-nav.tsx): below the
   sections, under a rule, a step quieter than the navigation itself. Padding
   is left to .nav-item so the mobile tap-target sizes below still apply. */
.sb-links { border-top:1px solid var(--rail-line); padding:8px 0; }
.nav-item.nav-ext { font-size:var(--text-sm); color:var(--rail-mut); }
.nav-item.nav-ext:hover { color:var(--rail-fg); }
.nav-item:hover .nav-icon { opacity:1; }
.nav-item.active .nav-icon { opacity:1; }
.sb-footer { padding:16px 20px; border-top:1px solid var(--rail-line); }
.org-row { display:flex; align-items:center; gap:9px; }
.org-avatar {
  width:30px; height:30px; background:var(--accent); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14.5px; color:var(--on-accent); flex:none;
}
.org-name { font-weight:600; font-size:14px; color:var(--rail-fg); line-height:1.4; }
.org-role { font-size:13px; color:var(--rail-mut); margin-top:1px; }
.status-row { display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap; row-gap:4px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#4CC38A; flex:none; }
.status-label { font-size:13px; color:var(--rail-text); font-weight:500; }
/* Which network "Connected" refers to. Amber rather than neutral on purpose:
   a test network is a caveat on everything else the workspace shows. */
.status-net {
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; white-space:nowrap;
  background:rgba(242,196,107,.10); color:#F2C46B; border:1px solid rgba(242,196,107,.35);
}
/* The explicit way out to stokr.io. Deliberately quiet — same weight as
   org-role, not styled like a call to action — since the sidebar's own
   wordmark link (sb-logo) already covers "go home"; this is the one thing
   that actually leaves the product, and it should read like a footnote, not
   compete with the navigation above it. */
.sb-extlink {
  display:block; margin-top:10px; font-size:12.5px; color:var(--rail-mut);
  text-decoration:none;
}
.sb-extlink:hover { color:var(--rail-fg); text-decoration:underline; }
.shell-topbar {
  position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h);
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 32px; z-index:40; gap:14px;
}
/* The wordmark in the top bar: phones only, where the rail is a drawer and
   the brand would otherwise vanish from the screen (brand commitment). */
.topbar-brand { display:none; color:var(--ink-900); line-height:0; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:var(--text-base); min-width:0; }
.bc-root { color:var(--ink-500); white-space:nowrap; }
a.bc-root:hover { color:var(--accent); }
.bc-cur { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-sep { color:var(--muted); }
.bc-cur { font-weight:600; color:var(--ink); }
.topbar-spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:4px 12px 4px 4px; border:1px solid var(--line); border-radius:var(--r);
  font-size:14.5px; font-weight:500; color:var(--ink-2);
}
.user-av {
  width:24px; height:24px; background:var(--navy); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; color:var(--on-accent); text-transform:uppercase;
}
.user-chip .signout {
  background:transparent; border:0; padding:0; font:inherit;
  color:var(--muted); cursor:pointer;
}
.user-chip .signout:hover { color:var(--bad); }
.shell-main { margin-left:var(--sidebar-w); padding-top:var(--topbar-h); min-height:100vh; }
.shell-main:focus { outline:none; }
/* Read-only notice: one quiet line under the top bar, not a warning box. Being
   signed out is a state of the visitor, not a fault. */
.readonly-strip {
  background:var(--surface); border-bottom:1px solid var(--line);
  font-size:var(--text-sm); color:var(--ink-700);
}
.readonly-strip .wrap { display:flex; align-items:center; gap:10px; min-height:40px; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; }
.readonly-strip b { font-weight:600; color:var(--ink-900); }
/* Mobile-only chrome — see the responsive section at the end of this file,
   where the sidebar turns into an off-canvas drawer these control. */
.shell-burger, .shell-scrim, .sb-close { display:none; }

/* ---------- Environment notice ---------- */
.notice { background:var(--accent-soft); border-bottom:1px solid var(--line); }
.notice .wrap { display:flex; align-items:center; gap:10px; padding:8px 28px; font-size:15px; color:var(--accent-ink); flex-wrap:wrap; }
.notice b { font-weight:600; }
.notice .spacer { flex:1; }

/* ---------- Page scaffolding ---------- */
.page { padding:32px 0 72px; }
/* REGISTER TITLE. Serif title, a plain line under it, and the double rule a
   register sets under each folio heading. More space above a heading than
   below it; the rule closes the head. */
.page-head { margin-bottom:28px; padding-bottom:18px; border-bottom:3px double var(--border-strong); }
.page-head > p, .page-head > .page-sub { max-width:72ch; }
.page-head .eyebrow { display:block; margin-bottom:6px; }
.page-back {
  display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:500;
  color:var(--muted); text-decoration:none; margin-bottom:10px;
}
.page-back:hover { color:var(--accent); text-decoration:none; }
.page-head h1 {
  font-family:var(--font-serif); font-size:var(--text-xl); line-height:1.2;
  font-weight:600; letter-spacing:-.005em; color:var(--ink-900);
}
.page-head p { color:var(--ink-700); margin:8px 0 0; font-size:var(--text-base); }
/* Title on the left, the page's actions on the right. */
.page-head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.page-head-row > div:first-child { min-width:0; flex:1 1 380px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }
/* Sign-in and sign-up: the heading and the form share ONE centred column the
   width of the form card, instead of a full-width left-aligned heading above a
   centred card, which read as two unrelated blocks. */
.page.auth-page { max-width:440px; margin-left:auto; margin-right:auto; }
.section-h { display:flex; align-items:baseline; gap:12px; margin:36px 0 12px; }
.section-h h2 { font-size:var(--text-md); font-weight:600; }
.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:980px){ .cols { grid-template-columns:1fr; } }
/* Keep the footer below the fold at ANY viewport height.

   Replaces a fixed 280px .home-spacer, which did the same job with a magic
   number: it over-padded short screens and could still let the footer peek in on
   a tall monitor, because a pixel constant knows nothing about the viewport.
   Here the shell is at least one viewport tall and the content grows to fill it,
   so the footer starts at or below the fold with no dead space.

   100vh, NOT 100svh: on mobile 100vh is the LARGE viewport height, so the shell
   is always at least as tall as the visible area. 100svh would be shorter than
   body's own min-height:100vh and, since .foot has its own background, would
   leave a visible strip of page background beneath it. */
.public-shell { min-height:100vh; display:flex; flex-direction:column; }
.public-main { flex:1 0 auto; }

/* ---------- Cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.card + .card { margin-top:16px; }
.card-h { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-h :is(h2,h3) { font-size:var(--text-base); font-weight:600; }
/* Accordion header for one pool (certificates-accordion.tsx).
   .card-h is a single nowrap flex row with space-between, which is right for a
   short title and a short label. A pool NAME is free text an originator types
   (often pasted straight off a loan tape), so it can be a whole sentence — and
   in .label's letter-spaced capitals it wrapped to two lines, stole the width
   the title needed, and broke the pool CODE itself across two lines with the
   "Sold" pill stranded underneath.
   So: two rows. The title row holds the code, the pill and the count and never
   wraps. The name gets its own line, in the case it was typed in, clipped to one
   line with the full text on hover. */
.poolhead { display:block; }
.poolhead-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.poolhead-title { display:flex; align-items:center; min-width:0; }
/* min-width:0 above + these three let a very long code clip rather than wrap. */
.poolhead-code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poolhead-count { flex:none; white-space:nowrap; }
.poolhead-name {
  display:block; margin-top:5px; font-size:14px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Narrow screens: the count drops to its own line so the pool CODE keeps the
   full width. Sharing one line clipped the code to "ORIGI…", which is exactly
   the wrong thing to lose — the code is the pool's identity, the count is
   a detail. */
@media (max-width:700px){
  .poolhead-top { flex-wrap:wrap; gap:4px; }
  .poolhead-title { flex:1 1 100%; }
  .poolhead-count { flex:0 0 auto; }
}

.card-b { padding:18px; }
.card-b.tight { padding:0; }
.card-f { padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r) var(--r); font-size:14.5px; color:var(--ink-2); }

/* ---------- KPIs ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:980px){ .kpi-grid { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow); }
.kpi .label { margin-bottom:9px; display:block; }
.kpi .num { font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.kpi .sub { font-size:14px; color:var(--ink-2); margin-top:6px; }
.kpi .num.s-ok{color:var(--ok)} .kpi .num.s-warn{color:var(--warn)} .kpi .num.s-bad{color:var(--bad)} .kpi .num.s-sold{color:var(--sold)}

/* ---------- Status pills ---------- */
/* One chip for every status: a small square plus the word, so status is never
   carried by colour alone. Sold is neutral ink (see --sold). */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:500; padding:1px 8px; border-radius:var(--r-sm); white-space:nowrap; line-height:1.6; }
.pill::before { content:""; width:7px; height:7px; border-radius:1px; background:currentColor; flex:none; }
.pill.available { background:var(--ok-soft); color:var(--ok); }
.pill.sold { background:var(--sold-soft); color:var(--sold); }
.pill.discharged { background:var(--gone-soft); color:var(--gone); }
.pill.not-found { background:var(--bad-soft); color:var(--bad); }
.pill.pending { background:var(--warn-soft); color:var(--warn); }
.pill.minted { background:var(--ok-soft); color:var(--ok); }
.pill.burnt { background:var(--gone-soft); color:var(--gone); }
/* Lifecycle axis REMOVED — custody (available/sold) above is now the only status
   axis. Left commented for whenever a Live/Expired or paid/unpaid axis returns: */
/*
.pill.live { background:var(--ok-soft); color:var(--ok); }
.pill.expired { background:var(--gone-soft); color:var(--gone); } */

/* ---------- Tables ---------- */
.tablewrap { overflow-x:auto; }
/* Rows are 40px and do not wrap: a register is read down its columns. */
table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th {
  text-align:left; padding:9px 14px; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-700); font-weight:600; border-bottom:1px solid var(--border-strong); background:var(--surface-subtle); white-space:nowrap;
}
table.data td { padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
/* Sortable column headers: the button inherits the th's uppercase label look;
   the chevron fades in on hover and turns solid (flipping up for ascending)
   once the column is the active sort. */
.th-sort {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:none; border:0; padding:0; margin:0; color:inherit;
  font:inherit; text-transform:inherit; letter-spacing:inherit; line-height:inherit;
}
.th-sort .th-arrow { flex:none; opacity:0; transition:opacity .12s ease, transform .12s ease; }
.th-sort:hover .th-arrow, .th-sort:focus-visible .th-arrow { opacity:.5; }
.th-sort .th-arrow.on { opacity:1; }
.th-sort .th-arrow[data-dir="asc"] { transform:rotate(180deg); }
.th-sort:hover { color:var(--ink); }
.th-sort:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce) { .th-sort .th-arrow { transition:none; } }
table.data tbody tr:hover { background:#F7F9FB; }
table.data tr:last-child td { border-bottom:0; }
table.data .tid { font-family:var(--font-mono); font-size:13px; white-space:nowrap; }
table.data td.num { text-align:right; font-variant-numeric:tabular-nums; }
.empty { padding:26px 18px; text-align:center; color:var(--ink-2); font-size:15px; }
/* Representation sub-headings — full assets vs each tranche. Rendered only
   when a workspace actually holds more than one representation, so a plain
   un-tranched registry never grows a heading it does not need
   (showTrancheHeadings(), lib/tranche.ts). Two shapes: a spanning row inside
   a table, and .grouph above a list of cards. */
table.data tr.grouprow td {
  padding:14px 14px 6px; background:var(--surface); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.07em; font-size:13.5px; font-weight:600; color:var(--ink-2);
}
/* Not a data row: keep the hover highlight off it. */
table.data tbody tr.grouprow:hover { background:var(--surface); }
.grouph { display:flex; align-items:baseline; gap:10px; margin:22px 0 10px; }

/* "or" divider between the Google button and the password fields on the auth
   forms. A centred label with a rule either side, drawn with a single flex row
   so it needs no absolute positioning or background-matching. */
.authsep { display:flex; align-items:center; gap:12px; margin:16px 0; }
.authsep::before, .authsep::after {
  content:""; flex:1; height:1px; background:var(--line);
}
.authsep > span {
  font-size:13.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
}

/* Pool passkey reveal (app/components/pool-passkey.tsx). The masked and
   revealed states are the same size so the row does not jump on reveal. */
.pk-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pk-value {
  font-size:17px; letter-spacing:.06em; padding:9px 13px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); min-width:170px;
  word-break:break-all;
}

/* ---------- Forms ---------- */
.field { margin-bottom:14px; }
.field:last-child { margin-bottom:0; }
.field > label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field .hint { font-size:14px; color:var(--ink-2); font-weight:400; display:block; margin-top:4px; }
.field input {
  width:100%; border:1px solid var(--border-control); border-radius:var(--r-sm); padding:9px 12px;
  font-size:15px; font-family:inherit; color:var(--ink-2); background:var(--surface);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.field input.mono, .field textarea.mono { font-family:var(--font-mono); }
/* Match inputs exactly — the onboarding form's notes box is the only textarea
   in the app, and without this it renders as an unstyled browser default. */
.field textarea {
  width:100%; border:1px solid var(--border-control); border-radius:var(--r-sm); padding:9px 12px;
  font-size:15px; font-family:inherit; color:var(--ink-2); background:var(--surface);
  resize:vertical; min-height:76px;
}
.field input:disabled, .field textarea:disabled {
  background:var(--surface-2); color:var(--muted); cursor:not-allowed;
}
/* A button that reads as a link: an in-place disclosure toggle ("show the exact
   data") is a button semantically, because it changes this page rather than
   navigating, but styling it as a button would give it the visual weight of the
   real action next to it. */
.linkish {
  background:none; border:0; padding:0; font:inherit; color:var(--accent);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.linkish:hover { color:var(--navy); }

/* Same reasoning as the textarea above: the admin "open a workspace" dialog is
   the only native <select> in a .field, and without this it renders as an
   unstyled browser default sitting next to matched inputs. */
.field select {
  width:100%; border:1px solid var(--border-control); border-radius:var(--r-sm); padding:9px 12px;
  font-size:15px; font-family:inherit; color:var(--ink-2); background:var(--surface);
}

/* ---------- Funder picker (custom dropdown — richer than a native <select>) ---------- */
.funderpicker-menu {
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  box-shadow:var(--shadow-overlay); z-index:60; padding:6px;
}
.funderpicker-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%;
  background:transparent; border:0; border-radius:var(--r-sm); padding:9px 10px; cursor:pointer; text-align:left;
}
.funderpicker-item:hover { background:var(--surface-2); }
.funderpicker-item:focus-visible { background:var(--accent-tint); outline:2px solid var(--accent); outline-offset:-2px; }
.funderpicker-item-row { display:flex; align-items:center; gap:8px; }
.funderpicker-name { font-size:15px; font-weight:600; color:var(--ink); }
.funderpicker-addr { display:block; margin-top:6px; font-size:13.5px; color:var(--muted); word-break:break-all; }
/* Type-to-filter box. Sized like the pool <select> beside it (selectStyle in
   transfer-form.tsx) so the two fields still read as one row; the extra right
   padding keeps typed text clear of the chevron. */
.funderpicker-input { width:100%; padding-right:34px !important; }
.funderpicker-input::placeholder { color:var(--muted); }
.funderpicker-chevron {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.funderpicker-empty { padding:10px 10px; font-size:14.5px; color:var(--muted); }
.btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:var(--on-accent); border:0; border-radius:var(--r-sm); padding:8px 16px;
  font-size:var(--text-base); font-weight:600; letter-spacing:.01em; line-height:1.4;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background:var(--navy-hover); }
.btn:disabled { background:var(--line-strong); color:var(--on-accent); cursor:not-allowed; }
.btn.ghost { background:var(--surface); color:var(--ink-2); border:1px solid var(--border-control); }
.btn.ghost:hover { background:var(--surface-2); }
/* .btn:disabled above is a FILLED grey, which .btn.ghost then overrides at equal
   specificity — so a disabled ghost button looked identical to an enabled one.
   Three classes here so the disabled state actually wins. */
.btn.ghost:disabled { background:var(--surface); color:var(--muted); border-color:var(--line); cursor:not-allowed; }
.btn.sm { padding:5px 11px; font-size:14.5px; }
.btnrow { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
/* Destructive actions. Filled for the confirming button inside a dialog, a
   ghost outline for the entry point, so a delete never sits on a page looking
   as primary as Save. */
.btn.danger { background:var(--bad); }
.btn.danger:hover { background:var(--bad); filter:brightness(.92); }
.btn.ghost.danger { background:var(--surface); color:var(--bad); border-color:var(--bad-line); filter:none; }
.btn.ghost.danger:hover { background:var(--bad-soft); }

/* Pool name with Rename / Delete beside it (app/components/pool-manage.tsx).
   Wraps under the name on a narrow screen rather than squeezing it. */
.pool-name-row { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:6px; }
.pool-name-row p { margin:0; }
.pool-name-actions, .pool-rename-actions { display:flex; gap:8px; flex-wrap:wrap; }
.pool-rename { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.pool-rename input { flex:1 1 260px; min-width:0; }

/* ---------- Register progress stepper ---------- */
/* Two-way choice (register: Create pool | Choose existing pool). A segmented
   control: a pale track, the chosen side a raised white tab, the other muted. */
.pool-pick { display:inline-flex; gap:4px; padding:4px; background:#F7F7F7; border-radius:10px; }
.pool-pick button {
  font:inherit; font-size:15px; font-weight:600; letter-spacing:.02em; padding:8px 22px; cursor:pointer;
  background:transparent; color:#9A9A9A; border:1px solid transparent; border-radius:7px;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pool-pick button:hover:not(:disabled):not(.on) { color:#555; }
.pool-pick button.on {
  background:#fff; color:#222; border-color:#E1E1E1;
  box-shadow:0 2px 4px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.08);
}
.pool-pick button:disabled { color:#C4C4C4; cursor:not-allowed; }
/* The one call to action under "Create pool": a dark pill in sentence case. */
.btn.pillbtn {
  border-radius:999px; background:#222; border-color:#222; color:#fff;
  text-transform:none; letter-spacing:.02em; font-size:15px; padding:11px 26px;
}
.btn.pillbtn:hover { background:#000; }
/* A text button: no fill and no outline, for actions secondary on their row. */
.btn.text, .btn.text:hover, .btn.text:disabled { background:transparent; border-color:transparent; color:var(--ink-2, #222); box-shadow:none; }
.btn.text:hover { text-decoration:underline; text-underline-offset:3px; }
.btn.text:disabled { color:var(--muted, #8A8A8A); }
.regprog-card { animation:regprog-fade .25s ease; }
.regprog-head { font-size:15px; font-weight:600; color:var(--ink); text-align:center; margin-bottom:20px; letter-spacing:.01em; }
.regprog-track { display:flex; align-items:flex-start; justify-content:center; max-width:600px; margin:0 auto; }
.regprog-step { display:flex; flex-direction:column; align-items:center; width:150px; text-align:center; flex:none; }
.regprog-line { flex:1; height:2px; background:var(--line); margin-top:17px; min-width:18px; transition:background .35s ease; }
.regprog-line.on { background:var(--ok); }
.regprog-dot {
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; transition:all .25s ease;
}
.regprog-dot.pending { background:var(--surface); border:2px solid var(--line-strong); color:var(--muted); }
.regprog-dot.done { background:var(--ok); color:var(--on-accent); }
.regprog-dot.failed { background:var(--bad); color:var(--on-accent); }
.regprog-dot.active {
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 0 8px rgba(31,78,140,.10);
  animation:regprog-pulse 1.4s ease-in-out infinite;
}
/* Issuing step while a refused transaction is sent again: yellow, never red,
   because it may still land. The label keeps the darker caution ink so it
   stays readable on white. */
.regprog-dot.retrying {
  background:#FBBF24; color:#1A1A1A;
  box-shadow:0 0 0 4px rgba(251,191,36,.25);
  animation:regprog-pulse-warn 1.4s ease-in-out infinite;
}
.regprog-label.on.retrying { color:var(--caution); }
@keyframes regprog-pulse-warn {
  0%,100% { box-shadow:0 0 0 4px rgba(251,191,36,.25); }
  50% { box-shadow:0 0 0 9px rgba(251,191,36,.08); }
}
.regprog-label { font-size:15px; font-weight:600; color:var(--ink-2); margin-top:10px; }
.regprog-label.on { color:var(--ink); }
.regprog-sub { font-size:14px; color:var(--muted); margin-top:3px; line-height:1.35; padding:0 4px; }
@keyframes regprog-pulse {
  0%,100% { box-shadow:0 0 0 4px var(--accent-soft), 0 0 0 8px rgba(31,78,140,.12); }
  50% { box-shadow:0 0 0 6px var(--accent-soft), 0 0 0 13px rgba(31,78,140,.03); }
}
@media (prefers-reduced-motion:reduce) {
  .regprog-dot.active, .regprog-dot.retrying, .chainprog-block.active { animation:none; }
  .regprog-card { animation:none; }
}
@keyframes regprog-fade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ---------- Loading skeletons (streamed while a page's data resolves) ---------- */
.sk { position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm); }
.sk::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.045), transparent);
  animation:sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .sk::after { animation:none; } }
.sk-line { height:13px; }
.sk-title { height:26px; width:340px; max-width:70%; }
.sk-eyebrow { height:12px; width:150px; margin-bottom:12px; }
.sk-kpi { height:96px; }
.sk-row { height:44px; margin:0 0 1px; border-radius:0; }

/* ---------- Transfer progress (blockchain animation) ---------- */
.chainprog-track { display:flex; align-items:center; justify-content:center; }
.chainprog-line {
  width:26px; height:2px; background:var(--line); margin:0 2px; border-radius:1px;
  transition:background .35s ease;
}
.chainprog-line.done { background:var(--ok); }
.chainprog-block {
  width:34px; height:34px; border-radius:8px; flex:none;
  border:2px solid var(--line-strong); background:var(--surface); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .35s ease, background .35s ease, color .35s ease, transform .35s ease;
}
.chainprog-block svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
.chainprog-block.active {
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
  transform:scale(1.1);
  animation:chainprog-pulse-ring 1.1s ease-in-out infinite;
}
.chainprog-block.done {
  border-color:var(--ok); background:var(--ok); color:var(--on-accent); font-weight:600; font-size:16px;
  transform:scale(1);
}
@keyframes chainprog-pulse-ring {
  0%, 100% { box-shadow:0 0 0 4px var(--accent-soft); }
  50% { box-shadow:0 0 0 8px var(--accent-soft); }
}

/* ---------- Investor dashboard (demo / idea) ---------- */
.inv-feedbar { margin-bottom:20px; }
.inv-feedbar-b { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.inv-feedbar-title { font-size:15.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
.inv-feedbar-sub { font-size:15px; color:var(--muted); margin-top:5px; max-width:74ch; line-height:1.5; }
.inv-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:3px;
}
.inv-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.inv-chip.off { background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong); }
.inv-chip.on { background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok-line); }

.inv-switch { display:inline-flex; align-items:center; gap:10px; background:transparent; border:0; padding:0; cursor:pointer; flex:none; }
.inv-switch-track { width:44px; height:24px; border-radius:20px; background:var(--line-strong); position:relative; transition:background .18s ease; }
.inv-switch.on .inv-switch-track { background:var(--navy); }
.inv-switch-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--on-accent); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .18s ease; }
.inv-switch.on .inv-switch-thumb { transform:translateX(20px); }
.inv-switch-state { font-size:14.5px; font-weight:600; letter-spacing:.03em; color:var(--muted); width:26px; text-align:left; }
.inv-switch.on .inv-switch-state { color:var(--ink); }

.inv-switch.sm .inv-switch-track { width:32px; height:18px; }
.inv-switch.sm .inv-switch-thumb { width:12px; height:12px; top:2px; left:2px; }
.inv-switch.sm.on .inv-switch-thumb { transform:translateX(14px); }
.inv-switch.sm .inv-switch-state { display:none; }

.inv-legend { display:flex; gap:14px; }
.inv-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
.inv-swatch { width:14px; height:3px; border-radius:2px; display:inline-block; }
.inv-swatch.port { background:var(--accent); }
.inv-swatch.mkt { background:var(--muted); }

/* ---------- Interactive chart: crosshair + drag-to-measure ---------- */
.inv-chart-wrap { position:relative; }
.inv-chart-svg { cursor:crosshair; touch-action:none; }
.inv-chart-hint { margin:8px 2px 0; font-size:14px; color:var(--muted); text-align:center; }
.inv-chart-tag {
  background:var(--ink); color:var(--surface); border-radius:6px; padding:7px 10px;
  font-size:14px; line-height:1.5; box-shadow:0 4px 14px rgba(0,0,0,.18);
  pointer-events:none;
}
.inv-chart-tag-title { font-weight:600; margin-bottom:3px; white-space:nowrap; }
.inv-chart-tag-title .muted { color:var(--header-mut,#9CA5B4); font-weight:500; }
.inv-chart-tag-row { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.inv-chart-tag-row b { color:var(--surface); font-variant-numeric:tabular-nums; }
.inv-chart-tag-row b.s-ok { color:#4ADE80; }
.inv-chart-tag-row b.s-bad { color:#F87171; }

.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;
}

.inv-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
@media (max-width:720px){ .inv-metrics { grid-template-columns:repeat(2,1fr); } }
.inv-metric { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; }
.inv-metric .label { display:block; margin-bottom:6px; }
.inv-metric .num { font-size:22px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); }
.inv-metric .num.s-ok { color:var(--ok); }

.inv-restricted { padding:20px 22px; border-left:3px solid var(--line-strong); }
.inv-restricted-label {
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:7px;
}
.inv-restricted-copy { font-size:15px; color:var(--ink-2); max-width:62ch; line-height:1.55; margin:0; }

/* ---------- Investor toolbar (notifications / customize) ---------- */
.inv-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.inv-toolbar-spacer { flex:1; }
.inv-popwrap { position:relative; }
.inv-iconbtn {
  position:relative; width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-2);
}
.inv-iconbtn svg { width:16px; height:16px; }
.inv-iconbtn:hover { background:var(--surface-2); border-color:var(--muted); color:var(--ink); }
.inv-badge {
  position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
  border-radius:20px; background:var(--ink); color:var(--surface); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.inv-pop {
  position:absolute; top:44px; width:300px; max-height:380px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  box-shadow:var(--shadow-overlay); z-index:60; padding:6px 0;
}
.inv-pop-right { right:0; }
.inv-pop-h { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 14px 6px; }
.inv-pop-empty { padding:14px; font-size:15px; color:var(--muted); }
.inv-notif-list { list-style:none; margin:0; padding:0; }
.inv-notif-item { display:flex; gap:9px; padding:9px 14px; border-top:1px solid var(--line); }
.inv-notif-item:first-child { border-top:0; }
.inv-notif-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); margin-top:5px; flex:none; }
.inv-notif-title { font-size:15px; font-weight:600; color:var(--ink); }
.inv-notif-detail { font-size:14.5px; color:var(--ink-2); margin-top:1px; }
.inv-notif-date { font-size:14px; color:var(--muted); margin-top:2px; }
.inv-cust-row { display:flex; align-items:center; justify-content:space-between; padding:7px 14px; font-size:15px; color:var(--ink-2); }
.inv-cust-divider { height:1px; background:var(--line); margin:4px 0; }
.inv-cust-label { font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); padding:8px 14px 2px; }

/* ---------- Investor file attach (enhanced data + reports) ---------- */
.inv-attach {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:26px 18px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--surface-2);
  color:var(--ink-2); transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.inv-attach:hover, .inv-attach:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.inv-attach.drag { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.inv-attach-prompt { font-size:15px; font-weight:600; }
.inv-filelist { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.inv-filelist li {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.inv-filelist li svg { flex:none; color:var(--muted); }
.inv-file-name { font-size:14.5px; font-weight:500; color:var(--ink); flex:1; word-break:break-all; }
.inv-file-x {
  flex:none; width:22px; height:22px; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--muted); font-size:18px; line-height:1; cursor:pointer;
}
.inv-file-x:hover { background:var(--surface-2); color:var(--bad); }

/* ---------- Investor distribution bars ---------- */
.inv-dist { display:flex; flex-direction:column; gap:9px; }
.inv-dist-row { display:grid; grid-template-columns:110px 1fr 46px; align-items:center; gap:10px; }
.inv-dist-label { font-size:14.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-dist-track { height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.inv-dist-fill { height:100%; background:var(--accent); border-radius:5px; }
.inv-dist-pct { font-size:14.5px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Investor documents & reports ---------- */
.inv-doclist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.inv-doclist li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 4px; border-top:1px solid var(--line); font-size:15px; }
.inv-doclist li:first-child { border-top:0; }
.inv-doclist-scroll { max-height:280px; overflow-y:auto; }

/* ---- investor dashboard charts (pure SVG/divs, no chart library) ---- */
.inv-donut-wrap { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.inv-donut { width:160px; height:160px; flex:none; }
.inv-donut-num { font-size:21px; font-weight:600; fill:var(--ink); font-family:var(--font-sans); }
.inv-donut-lab { font-size:10.5px; font-weight:600; fill:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-sans); }
.inv-legend-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; min-width:210px; flex:1; }
.inv-legend-list li { display:flex; align-items:center; gap:9px; font-size:14.5px; }
.inv-legend-list i { width:10px; height:10px; border-radius:2px; flex:none; }
.inv-legend-name { color:var(--ink-2); }
.inv-legend-pct { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }

.inv-bars { display:flex; flex-direction:column; gap:9px; }
.inv-bar-row { display:grid; grid-template-columns:130px 1fr 92px 52px; align-items:center; gap:10px; }
@media (max-width:640px){ .inv-bar-row { grid-template-columns:96px 1fr 68px 44px; gap:7px; } }
.inv-bar-label { font-size:14.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-bar-track { height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.inv-bar-fill { height:100%; border-radius:5px; }
.inv-bar-val { font-size:14px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.inv-bar-pct { font-size:14px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }

.inv-cols { display:flex; align-items:flex-end; gap:10px; padding-top:6px; }
.inv-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.inv-col-track { width:100%; height:132px; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:var(--r-sm); overflow:hidden; }
.inv-col-fill { width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0; min-height:2px; }
.inv-col-val { font-size:12.5px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; height:16px; }
.inv-col-label { font-size:12px; color:var(--ink-2); text-align:center; line-height:1.25; }
.inv-col-count { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; height:14px; }

.inv-trend { width:100%; height:auto; display:block; }
.inv-trend-tick { font-size:14px; fill:var(--muted); font-family:var(--font-sans); }
.inv-trend-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; flex-wrap:wrap; }

/* ---- locked modules: what to add to unlock more of the dashboard ---- */
.inv-locked-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px; }
.inv-locked {
  background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:var(--r-sm); padding:13px 15px;
}
.inv-locked h4 { margin:0 0 4px; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.inv-locked p { margin:0 0 9px; font-size:14px; color:var(--muted); line-height:1.45; }
.inv-locked-need { display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:13px; color:var(--muted); }
.inv-locked-col {
  font-family:var(--font-mono); font-size:12.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:1px 6px; color:var(--ink-2);
}

/* ---- AI coaching panel ---- */
.inv-coach { border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:var(--r-sm); padding:14px 16px; }
.inv-coach h4 { margin:0 0 6px; font-size:14.5px; font-weight:600; color:var(--accent-ink); }
.inv-coach p { margin:0 0 8px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.inv-coach ul { margin:0; padding-left:18px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.inv-coach li { margin-bottom:3px; }
.inv-reportlinks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .inv-reportlinks { grid-template-columns:1fr; } }
.inv-reportlink {
  display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  text-decoration:none;
}
.inv-reportlink:hover { border-color:var(--accent); }
.inv-reportlink-title { font-size:15px; font-weight:600; color:var(--ink); }

/* ---------- Investor dark theme (scoped — see investor-theme.tsx) ----------
   Redefines the same CSS variables everything else already uses, so the
   whole investor shell (sidebar, topbar, cards, tables) restyles at once. */
.inv-shell[data-theme="dark"] {
  --paper:#0B0F17; --surface:#141B24; --surface-2:#1A222D;
  --ink:#EAEFF6; --ink-2:#C7D0DC; --muted:#9AA6B8;
  --line:#242D3A; --line-strong:#323D4D;
  --navy:#243A5E; --navy-hover:#2E4972; --navy-soft:#1B2740;
  --accent:#5B8DEF; --accent-ink:#93B4F5; --accent-soft:rgba(91,141,239,.16);
  --ok:#34D399; --ok-soft:rgba(52,211,153,.12); --ok-line:rgba(52,211,153,.35);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.12); --warn-line:rgba(251,191,36,.35);
  --gone:#9AA6B8; --gone-soft:#1A222D;
  --bad:#F87171; --bad-soft:rgba(248,113,113,.12); --bad-line:rgba(248,113,113,.35);
  --sold:#5B8DEF; --sold-soft:rgba(91,141,239,.14);
}
.inv-shell[data-theme="dark"] { background:var(--paper); min-height:100vh; }

/* ---------- Flash messages ---------- */
.flash { padding:11px 14px; border-radius:var(--r-sm); font-size:15px; margin:14px 0 0; display:flex; gap:9px; align-items:flex-start; }
.flash.bad { background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad-line); }
/* Takes its foreground from the token, not a literal. The literal was a dark
   brown that only worked on the light ground: in the investor dark theme it
   was near-black text on a dark translucent panel. .flash.bad and .flash.ok
   now do the same. */
.flash.warn { background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line); }
.flash.ok { background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok-line); }
/* Information: something the reader must know that is not a fault. Dark blue
   on pale blue, the pairing of the site-wide notice bar, so it stays easy to
   read. .flash.warn's amber text on pale amber was hard to read in a long
   explanatory paragraph and read as more alarming than the message. */
.flash.info { background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--line-strong); }
.flash.ok a.exlink { color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Key-value blocks ---------- */
.kv { display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:15px; align-items:baseline; }
.kv dt { color:var(--ink-2); white-space:nowrap; }
.kv dd { margin:0; }
.kv dd.mono { font-family:var(--font-mono); font-size:14.5px; word-break:break-all; }

/* ---------- Verify page (public) ---------- */
.verify-hero { background:var(--surface); border-bottom:1px solid var(--line); }
.verify-hero .wrap { padding:42px 28px 40px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:start; }
@media (max-width:980px){ .verify-hero .wrap { grid-template-columns:1fr; } }

/* Bulk verify results: a 3rd grid item in .verify-hero .wrap, spanning both
   columns so the 5-column results table (Loan ID/Receivable ID/Lifecycle/
   Custody/Held by) gets the full page width instead of being squeezed into
   the narrow verify-card column where "Held by" was clipped. */
.verify-results-full { grid-column: 1 / -1; margin-top: 8px; }
.verify-hero h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.25; }
.verify-hero .eyebrow { color:var(--navy); display:block; margin-bottom:10px; }
.verify-hero p.tagline { color:var(--ink-2); font-size:14.5px; font-style:italic; margin:0 0 10px; }
.verify-hero p.lede { color:var(--ink-2); font-size:15.5px; max-width:56ch; margin:12px 0 0; }

.home-access-link {
  display:inline-block; margin-top:22px; font-size:15px; font-weight:600;
  color:var(--navy); text-decoration:none;
}
.home-access-link:hover { text-decoration:underline; }

.home-access-b { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.home-access-b h3 { font-size:15.5px; }
.home-access-links { display:flex; gap:10px; flex-wrap:wrap; }

/* Homepage "Log in" access block */
.home-login { padding:28px 30px; }
.home-login-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.home-login-head h3 { font-size:21px; font-weight:600; letter-spacing:-.01em; margin-top:4px; }
.home-login-head .eyebrow { display:block; margin-bottom:2px; font-size:13px; }
.home-login-cta { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; align-items:center; }
.home-login-examples { display:flex; gap:32px; flex-wrap:wrap; }
.home-example-group { flex:1 1 260px; min-width:240px; }
.home-example-label {
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:11px;
}
.home-access-item {
  display:flex; flex-direction:column; gap:2px; min-width:150px;
  padding:10px 16px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none;
}
.home-access-item:hover { border-color:var(--navy); text-decoration:none; }

/* ---------- /workspace: the two starting points and the folded request ----------
   One card per side of the trade, each saying what you will do there, instead of
   a row of identical name tiles. Side by side on desktop, stacked on a phone. */
.demo-sides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.demo-side {
  display:flex; flex-direction:column; gap:6px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--ink); text-decoration:none; transition:border-color .12s, box-shadow .12s;
}
.demo-side:hover { border-color:var(--navy); text-decoration:none; }
.demo-side-kicker { font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.demo-side strong { font-size:18px; font-weight:600; }
.demo-side-body { font-size:15px; line-height:1.55; color:var(--ink-2); flex:1; }
.demo-side-go { margin-top:6px; font-size:15px; font-weight:600; color:var(--accent); }
.demo-hint { margin:14px 0 0; font-size:14.5px; color:var(--ink-2); }
.demo-more { margin:6px 0 0; font-size:14.5px; color:var(--muted); }
.request-ws { margin-top:36px; border-top:1px solid var(--line); padding-top:18px; }
.request-ws summary {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  cursor:pointer; list-style:none; font-size:15px;
}
.request-ws summary::-webkit-details-marker { display:none; }
.request-ws-q { color:var(--ink-2); }
.request-ws-a { color:var(--accent); font-weight:600; }
.request-ws-a::after { content:" ›"; }
.request-ws[open] .request-ws-a::after { content:" ⌄"; }
.request-ws-body { margin-top:16px; }
@media (max-width:700px){
  .demo-sides { grid-template-columns:minmax(0,1fr); gap:12px; }
  .demo-side { padding:16px 18px; }
  /* A full-width touch target for the one-line request. */
  .request-ws summary { min-height:44px; align-items:center; }
}
.home-access-item .small,
.home-access-item .muted { font-weight:400; }
.verify-card { background:var(--surface); color:var(--ink-2); border-radius:var(--r); border:1px solid var(--line); overflow:hidden; }
.verify-card .vc-h { padding:15px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.verify-card .vc-h h2 { font-size:15.5px; font-weight:600; }
.verify-card .vc-b { padding:20px; }
.hashline { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-family:var(--font-mono); font-size:14px; color:var(--ink-2); word-break:break-all; line-height:1.55; }
.hashline .k { color:var(--ink-2); }

/* ---------- Certificate result ---------- */
.cert-status { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r); border:1px solid var(--line); margin-bottom:16px; }
.cert-status.available { background:var(--ok-soft); border-color:var(--ok-line); }
.cert-status.sold { background:var(--sold-soft); border-color:var(--line-strong); }
.cert-status.discharged { background:var(--gone-soft); }
.cert-status.not-found { background:var(--bad-soft); border-color:var(--bad-line); }
.cert-status .big { font-size:17px; font-weight:600; }
.cert-status.available .big { color:var(--ok); }
.cert-status.sold .big { color:var(--sold); }
.cert-status.discharged .big { color:var(--gone); }
.cert-status.not-found .big { color:var(--bad); }
.cert-status .sub { font-size:15px; color:var(--ink-2); margin-top:2px; }

/* ---------- Timeline ---------- */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 18px 26px; }
.timeline li::before { content:""; position:absolute; left:6px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.timeline li::after { content:""; position:absolute; left:10px; top:18px; bottom:-2px; width:1px; background:var(--line); }
.timeline li:last-child { padding-bottom:2px; }
.timeline li:last-child::after { display:none; }
.timeline li.t-mint::before { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.timeline li.t-burn::before { background:var(--gone); box-shadow:0 0 0 3px var(--gone-soft); }
.timeline li.t-transfer::before { background:var(--sold); box-shadow:0 0 0 3px var(--sold-soft); }
.timeline .t-title { font-weight:600; font-size:15px; }
/* Title on the left, its transaction link on the right; the link drops under
   the title on a narrow screen rather than squeezing it. */
.timeline .t-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 16px; }
.timeline .t-link { font-size:14px; white-space:nowrap; }
/* The verify result's block numbers and addresses, closed by default. */
.techdetails { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; font-size:14px; }
.techdetails summary { cursor:pointer; color:var(--ink-2); font-weight:500; }
.techdetails-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.techdetails-list .t-title { font-weight:600; font-size:14px; margin-bottom:6px; }
.techdetails-intro { margin:10px 0 0; color:var(--ink-2); line-height:1.5; max-width:60ch; }
/* One fixed label width for every event, so the values line up down the whole
   list (max-content sized each event separately). Fits "Registered to wallet". */
.techdetails-dl { display:grid; grid-template-columns:11.5em minmax(0,1fr); gap:5px 16px; margin:0; }
.techdetails-dl dt { color:var(--ink-2); }
.techdetails-dl dd { margin:0; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-variant-numeric:tabular-nums; }
/* Full value when it fits; otherwise cut at the END with an ellipsis, never in
   the middle. The copy button and the owner label stay whole. */
.techdetails-dl dd .copyaddr { min-width:0; max-width:100%; flex:0 1 auto; }
.techdetails-dl dd .copyaddr-text,
.techdetails-dl dd > a.exlink { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.techdetails-dl dd > a.exlink { flex:0 1 auto; font-family:var(--font-mono); font-size:13px; }
/* The transaction ID and its ↗ stay on one line: the ID shortens, never wraps away. */
.techdetails-dl dd.techdetails-tx { flex-wrap:nowrap; }
.techdetails-who { flex:none; white-space:nowrap; color:var(--muted); }
@media (max-width:480px){
  .techdetails-dl { grid-template-columns:1fr; gap:0; }
  .techdetails-dl dt { margin-top:6px; font-size:13px; }
}
.t-date { font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); font-variant-numeric:tabular-nums; margin-bottom:1px; }

/* ---------- Request access (app/components/access-request.tsx) ----------
   Desktop: what the demo is on the left, the sign-up card on the right, so a
   first-time visitor sees the product before being asked for anything.
   Phone: heading, then the card (the action), then the product below it. */
.page.access-page { max-width:1040px; margin-left:auto; margin-right:auto; }
.access-narrow { max-width:680px; margin:0 auto; }
/* One centred column: the heading, then the email box under it. The demo
   preview that used to fill a second column is gone, and the form sat off to
   the right of an empty page. */
.access-split { max-width:520px; margin:6vh auto 0; }
.access-head { text-align:center; }
.access-head p { margin-left:auto; margin-right:auto; }
.access-action { margin-top:8px; }
/* The two small lines under the request button: what happens next, and the
   way in for people who already have an account. Centred under a full-width
   button so they read as part of it. */
.access-note { margin:10px 0 0; font-size:13px; line-height:1.5; text-align:center; color:var(--ink-2); }
.access-note + .access-note { margin-top:6px; }
.access-show { grid-area:show; }
.access-show-h { font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:8px 0 10px; }
.access-points { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.access-points li { position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--ink-2); max-width:56ch; }
.access-points li::before { content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--accent); }
.access-points b { color:var(--ink); }
.access-example {
  margin:0; padding:16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
}
.access-example figcaption { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.access-example .cert-status { margin-bottom:14px; }
@media (max-width:700px){ .access-split { margin-top:2vh; } }
.timeline .t-meta { font-family:var(--font-mono); font-size:14px; color:var(--muted); margin-top:3px; word-break:break-all; }

/* ---------- Footer (public pages) ----------
   Grey-white, a single legal/copyright bar. The nav-column section (Explore /
   About us / General / Partners) was removed — those links live on stokr.io,
   and SPCR's footer is deliberately just the regulatory statement.
   No border-top here: .foot already draws the separator, and a second rule
   one line below it read as a doubled hairline. */
.foot { background:var(--surface-2); border-top:1px solid var(--line-strong); }
/* padding-block only: the old `padding:26px 0 30px` shorthand zeroed the
   horizontal padding .footlegal gets from .wrap, which put the text flush
   against the window edge between 981px and ~1340px, and 28px left of the
   page content above that. */
.footlegal {
  padding-block:26px 30px;
  display:flex; flex-direction:column; gap:5px;
  font-size:14.5px; color:var(--muted); line-height:1.5;
}
.footlegal a { color:var(--muted); text-decoration:underline; }


/* ---------- Modal ---------- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:6vh 20px; overflow-y:auto; }
.modal { background:var(--surface); border-radius:var(--r-dialog); box-shadow:var(--shadow-overlay); width:100%; max-width:640px; }
.modal .m-h { padding:16px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal .m-h :is(h2,h3) { font-size:var(--text-md); font-weight:600; }
.modal .m-h button.x { background:transparent; border:0; font-size:20px; color:var(--muted); line-height:1; padding:4px; }
.modal .m-b { padding:22px; max-height:74vh; overflow-y:auto; }
.idlist { max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:5px; padding:8px 12px; background:var(--surface-2); }
.idlist .tid { font-family:var(--font-mono); font-size:14.5px; padding:3px 0; }
/* Review step: each row marked pass / refused, the reason under a refused one. */
/* The confirmation step lists the Loan IDs plainly; the registry check runs
   on submission, so there is no per-row verdict here any more. */
.review-id { overflow-wrap:anywhere; }

/* ---------- Input rows with side buttons (file upload) ---------- */
.inputrow { display:flex; gap:8px; align-items:stretch; }
.inputrow input { flex:1; min-width:0; }
.inputrow .btn { white-space:nowrap; flex:none; }
/* Input with a small "Example" button beside it (create-pool form). Unlike
   .inputrow it never wraps: the button is short enough to sit inline even on
   a phone, and dropping it onto its own full-width line would make three
   heavy buttons out of a small aid. */
.suggestrow { display:flex; gap:8px; align-items:stretch; }
.suggestrow input { flex:1; min-width:0; }
.suggestrow .btn { flex:none; white-space:nowrap; }
/* "Generate a sample tape", beside Upload a file: a text link sized as a tap
   target, so it reads as help rather than as a second action. */
.sample-tape-link { display:inline-flex; align-items:center; min-height:36px; padding:0 4px; font-size:14.5px; }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Registry search/sort ---------- */
.regsearch { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.regsearch-input {
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--border-control); border-radius:var(--r-sm); padding:0 11px;
  background:var(--surface); color:var(--muted);
}
.regsearch-input:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.regsearch-input svg { width:14px; height:14px; flex:none; }
.regsearch-input input {
  flex:1; min-width:0; border:0; background:transparent; padding:9px 0;
  font-size:15px; font-family:inherit; color:var(--ink-2);
}
.regsearch-input input:focus { outline:none; }
.regsearch select {
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 11px;
  font-size:15px; font-family:inherit; color:var(--ink-2); background:var(--surface); flex:none;
}
.regsearch-count { font-size:14.5px; color:var(--ink-2); margin-top:8px; }
.regpager {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; border-top:1px solid var(--line);
}
.regpager-btns { display:flex; align-items:center; gap:10px; }

/* ---------- Addresses ---------- */
.addr { font-family:var(--font-mono); font-size:14px; color:var(--muted); word-break:break-all; }
/* Holder on one line: name, then the address in mono, cut at the end. A
   register row stays one line high. */
.holder { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.holder .addr { font-size:12.5px; word-break:normal; }

/* Explorer links (Etherscan). Inherit the mono/size of whatever they sit in. */
/* A <button> that reads as a link — used where the action is "fill this in for
   me" rather than navigation, so it must not be an anchor with a fake href. */
.linklike { background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.linklike:hover { text-decoration-thickness:2px; }
a.exlink { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
a.exlink:hover { border-bottom-color:currentColor; }
.t-meta a.exlink { color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.t-meta a.exlink:hover { color:var(--accent); }

/* ---------- Feed row results ---------- */
/* Row verdicts: the row's own pill says accepted or refused; a refused row is
   also tinted so it is found at a glance. No coloured edge stripe. */
.feedrow-bad td { background:var(--bad-soft); }
.reason { font-size:14.5px; color:var(--bad); max-width:52ch; }
.reason.okr { color:var(--ok); }

/* ---------- "Ask support" chat (demo workspaces only) ----------
   Fixed bottom-right. z-index sits above the workspace chrome (sidebar 50,
   topbar 40) but below the modal layer (100), so a review modal still covers
   it rather than fighting it. */
.sup-launch {
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border:0; border-radius:var(--r);
  background:var(--navy); color:var(--on-accent);
  font-size:15px; font-weight:600; font-family:inherit;
  box-shadow:0 6px 20px rgba(13,19,32,.24);
  transition:background .12s, transform .12s;
}
.sup-launch:hover { background:var(--navy-hover); transform:translateY(-1px); }
.sup-launch svg { width:15px; height:15px; fill:currentColor; flex:none; }
/* Out of the way while a form field has focus (see support-chat.tsx). */
.sup-launch.away { opacity:0; pointer-events:none; transform:translateY(8px); }
.sup-launch { transition:background .12s, transform .18s, opacity .18s; }
/* Wherever the launcher is mounted, the page ends with enough room below its
   last element to scroll it clear of the button, so no row is permanently
   stuck underneath it. */
body:has(.sup-launch) .page { padding-bottom:104px; }

.sup-panel {
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:min(400px, calc(100vw - 40px));
  max-height:min(620px, calc(100vh - 40px));
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:10px; box-shadow:0 18px 48px rgba(13,19,32,.24);
  overflow:hidden;
}
.sup-h {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:13px 15px; border-bottom:1px solid var(--line);
  background:var(--header-bg); color:var(--header-fg);
}
.sup-h strong { font-size:15px; font-weight:600; }
.sup-sub { font-size:13.5px; color:var(--header-mut); margin-top:1px; }
.sup-x {
  flex:none; width:28px; height:28px; border:0; border-radius:var(--r-sm);
  background:rgba(255,255,255,.10); color:var(--header-fg);
  font-size:19px; line-height:1;
}
.sup-x:hover { background:rgba(255,255,255,.18); }

.sup-b { flex:1; overflow-y:auto; padding:15px; min-height:120px; }
.sup-intro { margin:0 0 12px; font-size:14.5px; color:var(--muted); line-height:1.55; }
.sup-suggest { display:flex; flex-direction:column; gap:7px; }
.sup-chip {
  text-align:left; padding:9px 12px; font-size:14.5px; font-family:inherit;
  color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.sup-chip:hover { border-color:var(--accent); color:var(--accent); }

.sup-msg {
  font-size:14.5px; line-height:1.6; white-space:pre-wrap;
  padding:10px 13px; border-radius:10px; margin-bottom:9px; max-width:92%;
  overflow-wrap:anywhere;
}
.sup-msg.user {
  margin-left:auto; background:var(--navy); color:var(--on-accent);
  border-bottom-right-radius:3px;
}
.sup-msg.assistant {
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-bottom-left-radius:3px;
}

/* Three-dot "thinking" indicator while the first token is still in flight. */
.sup-typing { display:inline-flex; gap:4px; align-items:center; height:1.2em; }
.sup-typing i {
  width:6px; height:6px; border-radius:50%; background:var(--line-strong);
  animation:sup-bounce 1.1s infinite ease-in-out;
}
.sup-typing i:nth-child(2) { animation-delay:.15s; }
.sup-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes sup-bounce {
  0%,80%,100% { transform:translateY(0); opacity:.45; }
  40% { transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .sup-typing i { animation:none; }
  .sup-launch { transition:none; }
}

.sup-f { border-top:1px solid var(--line); padding:11px 13px; background:var(--surface-2); }
.sup-f textarea {
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:9px 11px; font-size:15px; font-family:inherit; color:var(--ink-2);
  background:var(--surface); resize:none;
}
.sup-f textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.sup-f textarea:disabled { background:var(--surface-2); color:var(--muted); }
.sup-frow { display:flex; align-items:flex-end; gap:10px; margin-top:8px; }
.sup-note { flex:1; font-size:12.5px; color:var(--muted); line-height:1.4; }

/* ============================================================================
   RESPONSIVE / MOBILE
   ----------------------------------------------------------------------------
   Desktop above 980px is untouched: every rule below only ever narrows,
   restacks or enlarges a tap target. Three steps —
     ≤980  tablet: two-column grids collapse (rules live next to their
                   components above; this block handles page padding)
     ≤768  phone:  sidebar becomes a drawer, tables scroll, inputs hit 16px
     ≤560  small phone: last of the multi-column grids go single
   ============================================================================ */

@media (max-width:980px){
  .wrap { padding:0 20px; }
  .verify-hero .wrap { padding:32px 20px 30px; gap:26px; }
}

@media (max-width:768px){
  .wrap { padding:0 16px; }

  /* ---------- Workspace sidebar → off-canvas drawer ----------
     Previously `display:none`, which left the workspace with no nav at all. */
  .shell-sidebar {
    width:min(290px,84vw);
    transform:translateX(-100%);
    transition:transform .22s ease;
  }
  .shell-sidebar.open { transform:none; box-shadow:14px 0 36px rgba(8,12,20,.22); }
  .shell-scrim { display:block; position:fixed; inset:0; background:rgba(8,12,20,.44); z-index:45; }
  .shell-burger {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:38px; height:38px; padding:0;
    background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--ink-2);
  }
  .shell-burger:active { background:var(--surface-2); }
  .shell-burger svg { width:17px; height:17px; fill:currentColor; }
  .sb-logo { position:relative; padding-right:48px; }
  .sb-close {
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:12px; right:10px; width:32px; height:32px;
    border:0; border-radius:var(--r-sm);
    background:rgba(255,255,255,.10); color:var(--header-fg);
    font-size:20px; line-height:1;
  }
  .shell-topbar { left:0; padding:0 14px; gap:10px; }
  .topbar-brand { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; }
  /* With the wordmark beside it the root crumb is redundant on a phone. */
  .shell-topbar .bc-root, .shell-topbar .bc-sep { display:none; }
  .shell-main { margin-left:0; }

  /* THE BURGER AND THE SIGN-IN/USER CONTROL MUST NEVER BE THE THING THAT
     SHRINKS OR GETS PUSHED OFF-SCREEN — they're the two controls a visitor
     actually needs to reach. The breadcrumb is the one element here with no
     fixed length (it carries the current page's name, and some are long —
     "Confirm my address", "Register receivables"), so it is the one that
     gives way: it truncates with an ellipsis instead of pushing its
     neighbours out of the viewport. Flex items default to min-width:auto
     (their own content's width), which is what let a long breadcrumb overflow
     the row in the first place rather than shrink; min-width:0 is what
     actually allows it to compress. Found on a real iPhone 15 (393pt), where
     the required row width already exceeded the viewport before this. */
  .breadcrumb { min-width:0; flex-shrink:1; }
  .bc-cur {
    min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .bc-root, .bc-sep { flex-shrink:0; }
  .shell-burger, .topbar-actions { flex-shrink:0; }

  /* THE FULL EMAIL WAS THE ACTUAL WIDTH PROBLEM in the user chip, not just
     the breadcrumb. white-space:nowrap on an address like
     "massimo@stokr.io" (worse for a longer one) forced .user-chip wide
     enough that the topbar-actions flex-shrink:0 above — correct on its own
     — pushed the whole cluster onto its own wrapped row instead of sitting
     beside the breadcrumb. Down to initial + "Sign out" here, which is a
     small, fixed width regardless of whose email it is. The full address
     moves to the chip's title attribute (user-menu.tsx) — a long-press or
     hover away, not simply gone. */
  .user-chip-email { display:none; }
  .user-chip { padding:4px 10px 4px 4px; gap:6px; }
  /* Roomier rows once the nav is being tapped rather than clicked. */
  .nav-item { padding:12px 18px; }

  /* ---------- Public top bar ----------
     Brand, nav and auth all have to fit one row. */
  .appbar .wrap { height:auto; min-height:56px; padding:9px 16px; gap:10px; }
  .mainnav a { padding:7px 10px; }
  .appbar .authbox { gap:7px; }
  .notice .wrap { padding:8px 16px; font-size:14.5px; }

  /* ---------- Page scaffolding ---------- */
  .page { padding:18px 0 44px; }
  .page-head { margin-bottom:18px; }
  .page-head h1 { font-size:19px; }
  /* Heading + its right-hand summary label each take half the row and wrap to
     two ragged lines; stacked, each gets one clean line. */
  .section-h { margin:20px 0 10px; flex-direction:column; align-items:flex-start; gap:2px; }
  /* The address sits above a wrapped hash, so pin the copy icon to the first
     line rather than letting it float to the vertical centre. */
  .copyaddr { align-items:flex-start; }
  .verify-hero .wrap { padding:24px 16px 26px; }
  .verify-hero h1 { font-size:23px; }
  .verify-hero p.lede { font-size:15px; }
  .verify-card .vc-h { padding:13px 16px; }
  .verify-card .vc-b { padding:16px; }

  /* ---------- Homepage login block ---------- */
  .home-login { padding:20px 18px; }
  .home-login-head { gap:16px; padding-bottom:16px; margin-bottom:18px; }
  .home-login-head h3 { font-size:19px; }
  .home-login-examples { gap:20px; }
  .home-example-group { flex:1 1 100%; min-width:0; }
  /* Full-width rows read better than a wrapping row of narrow chips. */
  .home-access-links { flex-direction:column; }
  .home-access-item { min-width:0; }

  /* ---------- Cards ----------
     A title and its right-hand micro-label each get ~half the width side by
     side, which wraps both to two ragged lines; stacking keeps each on one. */
  .card-h { padding:12px 14px; flex-direction:column; align-items:flex-start; gap:4px; }
  .verify-card .vc-h { flex-direction:column; align-items:flex-start; gap:4px; }
  .card-b { padding:14px; }
  .card-f { padding:11px 14px; }

  /* ---------- KPIs ---------- */
  .kpi { padding:13px 14px; }
  .kpi .num { font-size:23px; }

  /* ---------- Tables ----------
     min-width is what turns a crushed table into a scrolling one: without it
     `width:100%` squeezes columns to unreadable slivers instead of overflowing
     the wrapper that already has overflow-x:auto. */
  .tablewrap { -webkit-overflow-scrolling:touch; }
  .tablewrap table.data { min-width:560px; }
  table.data th { padding:9px 11px; }
  table.data td { padding:10px 11px; }

  /* ---------- Input tables restack (.rowstack) ----------
     Sideways scrolling is fine for READING a table but not for typing into one:
     on the register/adjust row editors the due-date field ended up off-screen.
     These rows become labelled blocks instead, so every field is reachable
     without scrolling. Read-only result tables keep the scroll above. */
  .rowstack table.data { min-width:0; }
  .rowstack thead { display:none; }
  .rowstack table.data, .rowstack tbody, .rowstack tr, .rowstack td { display:block; width:auto; }
  .rowstack tr { position:relative; padding:12px 46px 12px 12px; border-bottom:1px solid var(--line); }
  .rowstack tr:last-child { border-bottom:0; }
  .rowstack tbody tr:hover { background:transparent; }
  .rowstack td { border:0; padding:0; }
  .rowstack td + td { margin-top:10px; }
  .rowstack td[data-label]::before {
    content:attr(data-label); display:block; margin-bottom:5px;
    font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
    color:var(--muted);
  }
  /* The remove-row control floats to the row's top-right corner. */
  .rowstack td.rowstack-del { position:absolute; top:10px; right:6px; margin-top:0; }
  .rowstack td.rowstack-del button { width:34px; height:34px; }

  /* ---------- Key/value blocks stack ----------
     `auto 1fr` with a 66-char mono hash leaves the value ~40px wide. */
  .kv { grid-template-columns:1fr; gap:0; }
  .kv dt { margin-top:9px; }
  .kv dt:first-of-type { margin-top:0; }

  /* ---------- Forms ----------
     16px is the threshold below which iOS Safari zooms the page on focus. */
  .field input, .field textarea, .field select,
  .regsearch select, .regsearch-input input { font-size:16px; }
  .field input, .field textarea { padding:10px 12px; }
  .field > label { font-size:15px; }
  /* A side button next to an input has no room; give it its own row. */
  .inputrow { flex-wrap:wrap; }
  .inputrow .btn { width:100%; justify-content:center; }

  /* ---------- Buttons: 44px minimum tap target ---------- */
  .btn { min-height:44px; padding:11px 16px; }
  .btn.sm { min-height:38px; padding:7px 12px; }
  .btnrow > .btn { flex:1 1 auto; justify-content:center; }

  /* ---------- Modal → full screen ----------
     A centred dialog with a table inside is unusable at 375px; taking the whole
     screen (with a sticky header so Close stays reachable) is the right shape. */
  .modal-backdrop { padding:0; align-items:stretch; }
  .modal { border-radius:0; max-width:none; min-height:100%; }
  .modal .m-h { padding:14px 16px; position:sticky; top:0; background:var(--surface); z-index:2; }
  .modal .m-b { padding:16px; max-height:none; }
  .idlist { max-height:200px; }

  /* ---------- Register stepper ----------
     Four 150px fixed steps plus connectors overflowed ~640px. */
  .regprog-track { max-width:none; }
  .regprog-step { width:auto; flex:1 1 0; min-width:0; }
  .regprog-dot { width:28px; height:28px; font-size:14px; }
  .regprog-line { margin-top:14px; min-width:6px; }
  .regprog-label { font-size:13px; margin-top:8px; }
  .regprog-head { font-size:14.5px; margin-bottom:16px; }
  /* The per-step explainer is what forces the track wide; the label carries it. */
  .regprog-sub { display:none; }

  /* ---------- Transfer chain animation ---------- */
  .chainprog-track { flex-wrap:wrap; gap:5px 0; }
  .chainprog-line { width:14px; }

  .timeline li { padding-left:22px; }

  /* ---------- Footer ---------- */
  .footlegal { padding-block:22px 26px; }

  /* ---------- Investor dashboard ---------- */
  .inv-feedbar-b { gap:12px; }
  .inv-donut-wrap { gap:18px; justify-content:center; }
  .inv-legend-list { min-width:0; }
  .inv-metric { padding:11px 12px; }
  .inv-metric .num { font-size:19px; }
  /* A fixed 300px popover overhangs the viewport edge on a phone. */
  .inv-pop { width:min(300px,calc(100vw - 32px)); }
  .inv-cols { gap:5px; }
  .inv-col-track { height:108px; }
  .inv-col-label { font-size:11px; }
  .inv-attach { padding:20px 14px; }
  .inv-restricted { padding:16px; }
  .inv-file-x { width:30px; height:30px; font-size:20px; }
  .inv-toolbar { gap:6px; }

  /* ---------- Ask support ----------
     Near-full-screen on a phone; a 400px floating card would cover the page
     anyway, so own the space rather than half-covering it. */
  /* Icon only on a phone: the labelled pill spans a third of the screen width
     and covers form fields beside it. 48px keeps a full touch target. */
  .sup-launch {
    right:14px; bottom:14px; padding:0; width:48px; height:48px;
    justify-content:center; border-radius:50%;
  }
  .sup-launch svg { width:20px; height:20px; }
  .sup-launch-label { display:none; }
  .sup-panel {
    right:0; bottom:0; left:0;
    width:100%; max-height:88vh;
    border-radius:12px 12px 0 0; border-left:0; border-right:0; border-bottom:0;
  }
  .sup-f textarea { font-size:16px; }
}

@media (max-width:560px){
  /* Kept on a phone, smaller and on one line. It used to be hidden here, but
     the logo now has the top row to itself (the buttons wrap below it), and
     without the label the bar just says "STOKR", not what the product is. */
  .brand .tag { font-size:12px; letter-spacing:.05em; white-space:nowrap; }
  .kpi-grid { gap:9px; }
  .kpi .num { font-size:21px; }
  .inv-metrics { gap:9px; }
  .cert-status { padding:13px 14px; gap:11px; flex-wrap:wrap; }
  .cert-status .big { font-size:16px; }
  .regprog-label { font-size:12px; }
  .home-access-b { gap:14px; }
  .regsearch-input { min-width:0; }
  /* Both remaining 2-up grids go single-file — a 2-column KPI at this width
     leaves ~150px per card, which truncates the larger figures. */
  .inv-reportlinks { grid-template-columns:1fr; }
}

/* Very narrow (iPhone SE and similar, ≤400px). The public top bar needs
   324px for brand + Registry + both auth buttons but only has 288px, and
   shaving paddings to close a 36px gap is fragile. Giving the auth buttons
   their own right-aligned row is stable at any width. */
@media (max-width:400px){
  .appbar .wrap { flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
  .appbar .spacer { display:none; }
  .appbar .authbox { flex-basis:100%; justify-content:flex-end; }
  .kpi .num { font-size:19px; }
  .page-head h1 { font-size:18px; }
  .verify-hero h1 { font-size:21px; }
}

@media (prefers-reduced-motion:reduce){
  .shell-sidebar { transition:none; }
}

/* ---------- Documentation site (app/docs, served at docs.spcr.io) ----------
   Top bar across the width, a recessive light sidebar, the prose column, and a
   contents rail. The sidebar is deliberately NOT the dark navy chrome the
   workspaces use: on a reading surface the heaviest thing on screen should be
   the text, and a dark rail down one side pulls the eye away from it. Same
   tokens as the product, so the docs restyle with it rather than drifting. */
.docs-shell { min-height:100vh; background:var(--paper); }

.docs-top {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px;
  height:56px; padding:0 24px; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.docs-brand { display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.docs-brand-mark { display:flex; color:var(--navy); }
.docs-brand-name {
  font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
  padding-left:11px; border-left:1px solid var(--line-strong); white-space:nowrap;
}
.docs-brand-sub { font-weight:500; color:var(--muted); }
.docs-topnav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.docs-topnav a {
  padding:7px 11px; border-radius:var(--r-sm); font-size:14.5px; font-weight:500;
  color:var(--muted); text-decoration:none; white-space:nowrap;
}
.docs-topnav a:hover { color:var(--ink); background:var(--surface-2); }
.docs-topnav a.docs-topcta {
  color:var(--navy); font-weight:600; border:1px solid var(--line-strong); margin-left:6px;
}
.docs-topnav a.docs-topcta:hover { background:var(--navy-soft); border-color:var(--navy); }

/* Mobile drawer chrome (app/components/docs-mobile-nav.tsx). Hidden here,
   unconditionally, so desktop never shows them even before the max-width
   block below is reached; the max-width:860px block is what turns them on. */
.docs-burger, .docs-side-close, .docs-scrim, .docs-side-crumbs { display:none; }

.docs-cols { display:grid; grid-template-columns:262px minmax(0,1fr); }
.docs-side {
  position:sticky; top:56px; align-self:start; height:calc(100vh - 56px);
  overflow-y:auto; border-right:1px solid var(--line); padding:22px 0 48px;
}
.docs-nav { padding:0 14px; }
.docs-navgroup { margin-bottom:22px; }
/* The explicit way out to stokr.io, set apart from the nav list above it — a
   footnote under the table of contents, not one more entry in it. The top
   bar's own wordmark (docs-brand) stays a "go home to the docs" link; this is
   the one thing that actually leaves the site. */
.docs-side-ext {
  display:block; margin:4px 14px 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); text-decoration:none;
}
.docs-side-ext:hover { color:var(--ink-2); text-decoration:underline; }
.docs-navtitle {
  display:block; padding:0 10px 8px; font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
}
.docs-navitem {
  display:block; padding:6px 10px; border-radius:var(--r-sm); font-size:14.5px;
  color:var(--ink-2); text-decoration:none;
}
.docs-navitem:hover { background:var(--surface); color:var(--ink); }
/* The active page. A left rule rather than a filled pill: it marks position
   without competing with the prose for contrast. */
.docs-navitem.active {
  color:var(--accent); font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* Prose column plus contents rail, centred together in the remaining space. */
.docs-page {
  display:grid; grid-template-columns:minmax(0,720px) 208px; gap:56px;
  justify-content:center; padding:44px 40px 112px;
}
.docs-page.norail { grid-template-columns:minmax(0,720px); }

.docs-body { min-width:0; color:var(--ink-2); font-size:16px; line-height:1.68; }
.docs-eyebrow {
  display:block; margin:0 0 10px; font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.docs-body h1 { font-size:36px; line-height:1.15; letter-spacing:-.025em; color:var(--ink); margin:0 0 16px; text-wrap:balance; }
.docs-body h2 {
  font-size:23px; line-height:1.3; color:var(--ink); margin:44px 0 12px;
  padding-top:22px; border-top:1px solid var(--line); text-wrap:balance;
}
.docs-body h2:first-of-type { padding-top:0; border-top:0; margin-top:34px; }
.docs-body h3 { font-size:17.5px; color:var(--ink); margin:30px 0 8px; }
/* The opening paragraph carries the page, so it is set larger than the body.
   Scoped to the FIRST block: a page is rendered as several sibling divs when it
   embeds a widget, and `> div > p:first-of-type` would style the paragraph after
   every widget as a second lede. */
.docs-body > div:first-of-type > p:first-of-type { font-size:18px; line-height:1.6; color:var(--muted); }
.docs-body p { margin:0 0 15px; }
.docs-body ul, .docs-body ol { margin:0 0 15px; padding-left:22px; }
.docs-body li { margin:0 0 7px; }
.docs-body li > p { margin:0 0 7px; }
.docs-body a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.docs-body a:hover { border-bottom-color:currentColor; }
.docs-body strong { color:var(--ink); font-weight:600; }
.docs-body hr { border:0; border-top:1px solid var(--line); margin:34px 0; }
.docs-body code {
  font-family:var(--font-mono); font-size:14px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
.docs-body pre {
  background:var(--header-bg); border-radius:var(--r-sm); padding:15px 17px;
  overflow-x:auto; margin:0 0 20px;
}
.docs-body pre code {
  background:none; border:0; padding:0; font-size:13.5px; line-height:1.65;
  color:#D6DEEC;
}
/* Tables scroll inside their own box; the page itself must never scroll sideways. */
.docs-tablewrap {
  overflow-x:auto; margin:0 0 22px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface);
}
.docs-body table { width:100%; border-collapse:collapse; font-size:15px; }
.docs-body th {
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); padding:10px 14px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2);
}
.docs-body td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.docs-body tr:last-child td { border-bottom:0; }
.docs-body blockquote {
  margin:0 0 18px; padding:2px 0 2px 16px; border-left:3px solid var(--line-strong);
  color:var(--muted);
}

/* GitBook hint blocks. Same four semantics as .flash, at reading width. */
.docs-hint {
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm);
  padding:14px 17px; margin:0 0 22px; font-size:15.5px;
}
.docs-hint > :last-child { margin-bottom:0; }
.docs-hint.info { background:var(--accent-soft); border-color:var(--line); border-left-color:var(--accent); }
.docs-hint.ok   { background:var(--ok-soft);     border-color:var(--ok-line);   border-left-color:var(--ok); }
.docs-hint.warn { background:var(--warn-soft);   border-color:var(--warn-line); border-left-color:var(--warn); }
.docs-hint.bad  { background:var(--bad-soft);    border-color:var(--bad-line);  border-left-color:var(--bad); }

/* On this page. */
.docs-toc { position:sticky; top:92px; align-self:start; min-width:0; }
.docs-toctitle {
  display:block; margin:0 0 10px; font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
}
.docs-toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.docs-toc li { margin:0; }
.docs-toc a {
  display:block; padding:5px 0 5px 13px; margin-left:-1px; font-size:14px;
  line-height:1.45; color:var(--muted); text-decoration:none;
  border-left:2px solid transparent;
}
.docs-toc a:hover { color:var(--accent); border-left-color:var(--accent); }

/* Anchored headings should not land under the sticky top bar. */
.docs-body h2, .docs-body h3 { scroll-margin-top:76px; }

@media (max-width:1180px) {
  /* The rail is the first thing to go: it is navigation for a page already on
     screen, whereas the prose column getting narrower costs readability. */
  .docs-page, .docs-page.norail { grid-template-columns:minmax(0,1fr); gap:0; }
  .docs-toc { display:none; }
}
@media (max-width:860px) {
  .docs-cols { grid-template-columns:1fr; }

  /* THE SIDEBAR BECOMES A DRAWER, not a stack above the page. It used to sit
     here as a static block (position:static), which meant every one of its
     ~18 links rendered directly above the article — a wall of navigation to
     scroll past before reaching the thing that was actually linked to. Off
     the left edge by default, same slide-in pattern as the workspace sidebar
     (.shell-sidebar), opened by .docs-burger. */
  .docs-side {
    position:fixed; top:56px; left:0; bottom:0; z-index:45;
    width:min(300px,84vw); height:auto;
    background:var(--surface); border-right:1px solid var(--line); border-bottom:0;
    padding:16px 0 20px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .docs-side.open { transform:none; box-shadow:14px 0 36px rgba(8,12,20,.22); }
  .docs-navgroup { margin-bottom:16px; }
  .docs-page { padding:28px 20px 72px; }
  .docs-body h1 { font-size:28px; }
  .docs-body > div:first-of-type > p:first-of-type { font-size:17px; }
  .docs-top { padding:0 16px; gap:12px; }
  .docs-brand-sub { display:none; }

  /* "Verify a receivable", "Registry" and "Log in" all drop from the mobile
     bar, not just Log in. The measured minimum width of brand + all three +
     the burger was 455px — wider than every current iPhone, Pro Max included
     (430pt) — so keeping any of them here meant the row would overflow on
     some real phone regardless of which one stayed. All three reappear inside
     the drawer instead, as docs-side-crumbs, so nothing is actually lost.
     Specificity has to match .docs-topnav a.docs-toplink: the plainer
     .docs-toplink alone loses to .docs-topnav a's own display:inline-flex from
     the touch-target pass further down this file, which is more specific
     (class+type beats one class) and wins regardless of source order. */
  .docs-topnav a.docs-toplink { display:none; }

  /* The mobile-only stand-in for the three links just hidden above. Styled
     like the nav items below it (docs-navitem) so it doesn't read as a
     different kind of thing, with a rule under it marking where the actual
     table of contents starts. */
  .docs-side-crumbs {
    display:flex; flex-direction:column; gap:2px;
    padding:0 14px 14px; margin:0 0 14px; border-bottom:1px solid var(--line);
  }
  .docs-side-crumbs a {
    display:flex; align-items:center; min-height:44px; padding:6px 10px;
    border-radius:var(--r-sm); font-size:14.5px; color:var(--ink-2);
    text-decoration:none;
  }
  .docs-side-crumbs a:hover { background:var(--surface); color:var(--ink); }

  /* A bare icon, no border, at the left edge: the pattern GitBook-style
     docs use. The negative margin lines the glyph up with the page's text
     column while keeping the full 44px tap target. */
  .docs-burger {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; padding:0; margin-left:-12px;
    background:transparent; border:0; border-radius:var(--r-sm);
    color:var(--ink-2);
  }
  .docs-burger:active { background:var(--surface-2); }

  .docs-scrim.open {
    display:block; position:fixed; inset:56px 0 0 0; z-index:40;
    background:rgba(8,12,20,.44);
  }

  .docs-side-close {
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:8px; right:10px; width:36px; height:36px;
    border:0; border-radius:var(--r-sm); background:var(--surface-2);
    color:var(--ink-2); font-size:20px; line-height:1;
  }
}

/* ---------- Loan tape builder (docs, app/components/tape-builder.tsx) ----------
   An interactive panel inside a prose page, so it is deliberately framed: a
   card with its own heading, sitting flush in the reading column. */
.tb {
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); margin:0 0 26px; overflow:hidden;
}
.tb-head { padding:16px 18px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.tb-head h3 { margin:0; font-size:16.5px; font-weight:600; color:var(--ink); }
.tb-head p { margin:4px 0 0; font-size:14px; color:var(--muted); }
.tb-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 18px; padding:18px;
}
.tb-grid .field { margin-bottom:14px; }
.tb-grid .field:nth-last-child(-n+2) { margin-bottom:0; }
.tb-out {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px;
  margin:0; padding:0 18px 4px; font-size:14.5px; align-items:baseline;
}
.tb-out dt { color:var(--ink-2); white-space:nowrap; }
.tb-out dd { margin:0; font-family:var(--font-mono); font-size:13.5px; color:var(--ink); word-break:break-all; }
.tb-actions { display:flex; gap:10px; flex-wrap:wrap; padding:16px 18px 18px; }
.tb-empty { margin:0; padding:0 18px 18px; font-size:14.5px; color:var(--muted); }
.tb .docs-hint { margin:0 18px 18px; }

@media (max-width:640px) {
  .tb-grid { grid-template-columns:minmax(0,1fr); }
  .tb-grid .field { margin-bottom:14px; }
  .tb-grid .field:last-child { margin-bottom:0; }
}

/* ---------- 404 (app/not-found.tsx) ----------
   Carries its own chrome because an unmatched route enters no route group, so
   neither the public top bar nor the workspace shell applies. Type and space do
   the work; there is no illustration, in keeping with the rest of the product. */
.nf-shell { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; background:var(--paper); }

.nf-top { border-bottom:1px solid var(--line); background:var(--surface); }
.nf-top .wrap { display:flex; align-items:center; min-height:62px; }
.nf-brand { display:flex; align-items:center; gap:11px; color:var(--navy); text-decoration:none; }
.nf-brand-tag {
  font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding-left:11px; border-left:1px solid var(--line-strong);
}

.nf-main { display:flex; align-items:center; }
/* Narrow on purpose: this is one short statement and a list, and a 1280px
   measure would strand both in the middle of an empty page. */
.nf-inner { max-width:600px; padding:72px 0 80px; }

.nf-code {
  display:block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px;
}
.nf-title {
  margin:0 0 14px; font-size:40px; line-height:1.12; font-weight:600;
  letter-spacing:-.025em; color:var(--ink); text-wrap:balance;
}
.nf-lede { margin:0 0 26px; font-size:17px; line-height:1.6; color:var(--muted); max-width:52ch; }

/* The address that failed. Mono, because it is a literal value to be compared
   against whatever the sender wrote, not prose. */
.nf-path {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; margin:0 0 34px; font-size:14px; word-break:break-all;
}
.nf-path-label {
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); flex:none;
}
.nf-path .mono { font-family:var(--font-mono); color:var(--ink-2); }

/* A ruled list rather than a row of buttons: four equally valid destinations,
   none of which is a primary action. */
.nf-links { border-top:1px solid var(--line); }
.nf-link {
  display:block; padding:15px 2px; border-bottom:1px solid var(--line);
  text-decoration:none; position:relative;
}
.nf-link:hover { background:var(--surface); }
.nf-link-t {
  display:block; font-size:16px; font-weight:600; color:var(--navy); margin-bottom:2px;
}
.nf-link:hover .nf-link-t { color:var(--accent); }
.nf-link-d { display:block; font-size:14.5px; color:var(--muted); line-height:1.5; max-width:46ch; }
/* Chevron in the gutter, revealed on hover. Marks direction without adding a
   glyph to every row at rest. */
.nf-link::after {
  content:"→"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--accent); opacity:0; transition:opacity .12s ease, transform .12s ease;
}
.nf-link:hover::after { opacity:1; transform:translateY(-50%) translateX(3px); }

.nf-foot { border-top:1px solid var(--line); background:var(--surface); }
.nf-foot .wrap {
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
  padding-top:16px; padding-bottom:16px; font-size:13.5px; color:var(--muted);
}

@media (prefers-reduced-motion:reduce) {
  .nf-link::after { transition:none; }
}
@media (max-width:640px) {
  .nf-inner { padding:44px 0 52px; }
  .nf-title { font-size:30px; }
  .nf-lede { font-size:16px; }
  .nf-foot-r { display:none; }
}

/* Live contract details inside a docs page (app/components/contract-facts.tsx). */
.cf { margin:0 0 24px; }
.cf-grid {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 20px;
  margin:0; padding:15px 17px; font-size:15px; align-items:baseline;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.cf-grid dt { color:var(--ink-2); white-space:nowrap; font-size:14px; }
.cf-grid dd { margin:0; color:var(--ink-2); min-width:0; word-break:break-word; }
.cf-grid dd .mono { font-family:var(--font-mono); font-size:13.5px; word-break:break-all; }
.cf-mut { color:var(--muted); }
.cf .docs-hint { margin:0 0 14px; }

/* GFM task lists, used for the getting-started checklist. marked emits a bare
   <input type="checkbox"> inside a normal <li>, so the bullet has to go or each
   item reads as a bullet AND a box. :has() is supported everywhere current; if
   it is not, the fallback is a stray bullet rather than anything broken. */
.docs-body input[type="checkbox"] { margin:0 9px 0 0; vertical-align:middle; }
.docs-body li:has(> input[type="checkbox"]) { list-style:none; margin-left:-22px; }

/* ---------- First-run product tour (app/components/product-tour.tsx) ----------
   Restrained on purpose: a dimmed page, one accent outline on the control being
   described, and a small card. No animation on the spotlight, because a box
   sliding around the screen is the part that reads as a toy. */
.tour-root { position:fixed; inset:0; z-index:200; }

/* The dim and the cutout in one element. An enormous spread shadow darkens
   everything outside the box, so the highlighted control keeps full contrast
   without a four-panel overlay to keep aligned. */
.tour-spot {
  position:fixed; border-radius:var(--r-sm); pointer-events:none;
  border:2px solid var(--accent);
  box-shadow:0 0 0 9999px rgba(13,19,32,.58);
}
/* Steps with no target (the opening and closing cards) dim everything. */
.tour-dim { position:fixed; inset:0; background:rgba(13,19,32,.58); }

.tour-card {
  position:fixed; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); box-shadow:0 10px 32px rgba(13,19,32,.22);
  padding:16px 18px 14px; outline:none;
}
.tour-count {
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.tour-card h3 { margin:0 0 7px; font-size:16.5px; font-weight:600; color:var(--ink); }
.tour-card p { margin:0 0 12px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.tour-card .tour-link { margin:-4px 0 12px; font-size:14px; }
.tour-card .tour-link a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.tour-card .tour-link a:hover { border-bottom-color:currentColor; }

.tour-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-nav { display:flex; gap:8px; }
/* Skip is a link, not a button: it should be findable without competing with
   the action that continues the tour. */
.tour-skip {
  background:none; border:0; padding:0; font:inherit; font-size:14px;
  color:var(--muted); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px;
}
.tour-skip:hover { color:var(--ink); }

/* The way back in after it has been dismissed. Discreet, because it is for the
   second viewing rather than the first. */
.tour-restart {
  background:none; border:0; padding:0; margin:0 0 16px; font:inherit;
  font-size:13.5px; color:var(--muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.tour-restart:hover { color:var(--accent); }

/* ---------- Originator "Getting started" (app/components/originator-guide.tsx)
   In the page, never over it. Numbered because the order is real: nothing can
   be downloaded before it is registered, nor checked before it is sent. */
.guide { margin-bottom:22px; }
.guide-steps { list-style:none; margin:0; padding:4px 18px; }
.guide-step {
  display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:4px 14px;
  align-items:start; padding:14px 0; border-top:1px solid var(--line);
}
.guide-step:first-child { border-top:0; }
.guide-num {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:600; background:var(--surface-2);
  color:var(--ink-2); border:1px solid var(--line-strong);
}
.guide-step.done .guide-num { background:var(--ok); border-color:var(--ok); color:var(--on-accent); }
.guide-text strong { display:block; font-size:15.5px; color:var(--ink); }
.guide-step.done .guide-text strong { color:var(--muted); }
.guide-text p { margin:3px 0 0; font-size:14.5px; color:var(--ink-2); max-width:62ch; }
.guide-step.done .guide-text p { display:none; }
.guide-action { align-self:center; white-space:nowrap; }
.guide-foot { display:flex; justify-content:flex-end; }
@media (max-width:640px){
  .guide-steps { padding:2px 14px; }
  /* The action drops under the text, full width, as a proper touch target. */
  .guide-step { grid-template-columns:28px minmax(0,1fr); }
  .guide-action {
    grid-column:2; justify-self:stretch; justify-content:center;
    min-height:44px; margin-top:6px;
  }
}

@media (max-width:640px) {
  /* Pin the card to the bottom on a phone: there is not enough room to place it
     beside a target, and a card that overlapped the thing it describes would be
     worse than one that always sits in the same place. */
  .tour-card { left:12px !important; right:12px; top:auto !important; bottom:12px; width:auto !important; }
}

/* ---------- Mobile touch targets, pass two ----------
   Applied per the mobile-first-design skill's 48px minimum. Scoped entirely
   inside max-width media queries, so nothing here can reach the desktop
   rendering: every rule below is unreachable above 768px.

   NOT converted to min-width/mobile-first architecture, deliberately. The
   skill prescribes that, and on a greenfield stylesheet it would be right, but
   this one is desktop-first throughout and inverting ~1600 lines of it is the
   one change most likely to alter desktop rendering, which is the single thing
   that was not to change. Adding inside the existing max-width blocks gets the
   same measured outcome with none of that risk.

   Measured on the live site at 375px before this: nav links 37px, header
   buttons 38px, .btn 44px. No horizontal overflow at 320px and no form field
   under 16px, so layout and iOS zoom were already sound; height was the gap. */
@media (max-width:768px) {
  /* 44 -> 48. The existing block already set 44px, which cleared Apple's
     guideline but not this one. */
  .btn { min-height:48px; padding:13px 16px; }
  /* A small button in a table row or a card footer is still a finger. */
  .btn.sm { min-height:44px; padding:10px 14px; }

  /* Public header. Measured 37px tall, and these are the first things anyone
     taps on a phone. */
  .mainnav a { min-height:48px; display:inline-flex; align-items:center; padding:0 12px; }
  /* Log in / Sign up carry .btn.sm, so the rule above them has to be this
     specific to win. They are the two most-tapped controls on the site and
     get the full 48 rather than the small-button 44. */
  .appbar .authbox .btn, .appbar .authbox .btn.sm { min-height:48px; }
  /* The wordmark is a link home and was 17px tall: the text's own height. */
  .appbar .brand .mark { min-height:48px; display:flex; align-items:center; }

  /* ---------- Workspace chrome ----------
     The drawer burger is the one control a workspace on a phone cannot be
     used without, and it was the smallest thing on the screen at 38x38. The
     close button inside the drawer was smaller still at 32x32, and it sits in
     the top corner where the thumb reaches worst. Both are square targets, so
     they take min-width as well. */
  .shell-burger { width:48px; height:48px; }
  .sb-close { width:44px; height:44px; top:8px; right:8px; font-size:22px; }
  /* Nav rows: 12px padding on a 20px line came to about 44. */
  .nav-item { padding:12px 10px; min-height:48px; display:flex; align-items:center; }
  /* Same reasoning as the public header: a topbar action is a primary control,
     not a small in-table button, so it takes the full 48 over .btn.sm. */
  .topbar-actions .btn, .topbar-actions .btn.sm { min-height:48px; }

  /* Documentation chrome, added after the first mobile pass and never sized. */
  .docs-topnav a { min-height:48px; display:inline-flex; align-items:center; }
  .docs-navitem { min-height:44px; display:flex; align-items:center; }
  .docs-brand { min-height:48px; }

  /* Text-styled controls. Underlined text in a paragraph is a legitimate
     inline target, but these are standalone controls that happen to look like
     links, so they get a real tap area without becoming buttons visually. */
  .tour-skip, .tour-restart, .linkish {
    min-height:44px; display:inline-flex; align-items:center;
  }

  /* Pagination. Two small arrows side by side is the classic mis-tap. */
  .regpager-btns .btn, .regpager-btns button { min-height:44px; min-width:44px; }

  /* The 404's onward list: already a tall row, but make the whole row the
     target rather than the text inside it. */
  .nf-link { padding:16px 2px; }
}

@media (max-width:480px) {
  /* Below the skill's mobile ceiling the header runs out of room before the
     buttons do: let the nav wrap under the brand rather than squeezing both. */
  .appbar .wrap { flex-wrap:wrap; row-gap:6px; }
  .mainnav { order:3; width:100%; }
  .mainnav a { padding:0 10px; }

  /* Stack paired actions. Two half-width buttons at 360px are ~150px each,
     which is where mis-taps start. */
  .btnrow { flex-direction:column; align-items:stretch; }
  .btnrow > .btn, .btnrow > a.btn { width:100%; justify-content:center; }

  /* The contents rail is already hidden below 1180px; make sure the prose
     column is not also carrying the sidebar's padding. */
  .docs-page { padding-left:16px; padding-right:16px; }
}

/* ---------- Public top bar on the request-access pages ----------
   The page is the Request access form, so the bar drops its own Log in /
   Request access buttons there (app/components/public-appbar.tsx). On a phone
   what is left, the brand and Registry / Docs, is centred: two short rows
   instead of three crowded ones. Tablet and up keep the normal one-row bar. */
@media (max-width:560px){
  .appbar-access .wrap { flex-wrap:wrap; justify-content:center; row-gap:2px; }
  .appbar-access .brand { width:100%; justify-content:center; }
  .appbar-access .spacer { display:none; }
  .appbar-access .mainnav { order:3; width:100%; justify-content:center; }
  /* Only ever a signed-in user's chip here; centred with the rest. */
  .appbar-access .authbox { order:4; width:100%; justify-content:center; }
  .appbar-access .authbox:empty { display:none; }
}

/* ============================================================================
   BOOK OF RECORD: the workspace's own pieces (2026-10-19).
   Statement line + allocation, the pools register, numbered register entries.
   See .impeccable/briefs/originator-workspace.md for the direction.
   ============================================================================ */

/* Title support line: what the workspace is, its vault, its custodian. */
.custody-line { display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; color:var(--ink-700); }
.custody-sep { color:var(--border-control); }
.custody-vault { display:inline-flex; align-items:center; gap:6px; }
.custody-via { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* THE STATEMENT. A sentence of counts, then the split drawn to scale. */
.statement { margin:0 0 28px; }
.statement-line {
  margin:0 0 14px; font-size:var(--text-lg); line-height:1.45; color:var(--ink-700);
  max-width:68ch; font-variant-numeric:tabular-nums;
}
.statement-line b { color:var(--ink-900); font-weight:600; }
.alloc {
  display:flex; height:10px; border-radius:2px; overflow:hidden;
  background:var(--surface-subtle); box-shadow:inset 0 0 0 1px var(--border);
}
.alloc > span { flex-basis:0; min-width:0; }
/* Available is the positive state (still in custody, free to sell); sold is
   neutral ink, as the Sold pill is: navy is kept for actions and selection. */
.alloc-avail { background:var(--positive); }
.alloc-sold { background:var(--ink-700); }
.alloc-key {
  display:flex; gap:6px 22px; flex-wrap:wrap; margin-top:10px;
  font-size:var(--text-sm); color:var(--ink-700); font-variant-numeric:tabular-nums;
}
.alloc-key span { display:inline-flex; align-items:center; gap:7px; }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px; }
.sw-avail { background:var(--positive); }
.sw-sold { background:var(--ink-700); }

/* Two columns: the pools register (2/3) and the latest entries (1/3). */
.ledger-cols { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:20px; align-items:start; }
.ledger-cols > .card { margin:0; }
/* minmax(0,1fr), not 1fr: a plain 1fr track grows to its widest table and
   pushes the page sideways on a phone; the table scrolls inside its card. */
.ledger-cols > * { min-width:0; }
@media (max-width:1100px){ .ledger-cols { grid-template-columns:minmax(0,1fr); } }
.card-note { font-size:var(--text-sm); color:var(--ink-500); }
.card-link { font-size:var(--text-sm); font-weight:600; }


/* REGISTER ENTRIES. Number, what happened, when. Hairlines between, no
   bullets, no icons: the number is the marker. */
.entries { list-style:none; margin:0; padding:0; }
.entry {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px;
  padding:12px 18px; border-bottom:1px solid var(--line); align-items:baseline;
}
.entry:last-child { border-bottom:0; }
.entry-no {
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-500);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.entry-event { font-size:var(--text-sm); font-weight:600; color:var(--ink-900); }
.entry-pool { font-weight:500; font-size:12.5px; }
.entry-party { font-size:var(--text-sm); color:var(--ink-700); margin-top:2px; }
.entry-when {
  text-align:right; font-size:var(--text-sm); color:var(--ink-700); white-space:nowrap;
  font-variant-numeric:tabular-nums; display:flex; flex-direction:column; gap:2px;
}
.entry-tx { font-size:12.5px; }
.entries-empty { margin:0; padding:22px 18px; color:var(--ink-700); font-size:var(--text-sm); }

/* THE RECEIVABLES REGISTER (receivables-register.tsx): find, filter, page. */
.regtools {
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface);
}
.regsearch { position:relative; flex:1 1 280px; max-width:420px; }
.regsearch-icon { position:absolute; left:11px; top:50%; width:14px; height:14px; margin-top:-7px; fill:var(--ink-500); pointer-events:none; }
.regsearch input {
  width:100%; height:38px; padding:0 12px 0 33px; font:inherit; font-size:var(--text-sm);
  color:var(--ink-900); background:var(--surface); border:1px solid var(--border-control); border-radius:var(--r-sm);
}
.regsearch input::placeholder { color:var(--ink-500); }
.regsearch input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
/* Segmented filter: one group, the chosen one filled. aria-pressed carries the
   state, so the styling keys off it rather than a second class. */
.seg { display:inline-flex; border:1px solid var(--border-control); border-radius:var(--r-sm); overflow:hidden; }
.seg button {
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  font:inherit; font-size:var(--text-sm); font-weight:500; color:var(--ink-700);
  background:var(--surface); border:0; border-left:1px solid var(--border); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.seg button:first-child { border-left:0; }
.seg button:hover { background:var(--surface-subtle); }
.seg button[aria-pressed="true"] { background:var(--accent-tint); color:var(--accent-900); font-weight:600; }
.seg button:focus-visible { outline-offset:-2px; }
.seg-n { font-variant-numeric:tabular-nums; color:var(--ink-500); font-weight:500; }
.seg button[aria-pressed="true"] .seg-n { color:var(--accent-900); }
.regpool select {
  height:38px; padding:0 30px 0 10px; font:inherit; font-size:var(--text-sm); color:var(--ink-900);
  border:1px solid var(--border-control); border-radius:var(--r-sm); background-color:var(--surface);
}
.regfoot {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--line); font-size:var(--text-sm); color:var(--ink-700);
  font-variant-numeric:tabular-nums;
}
.register table.data tbody tr:last-child td { border-bottom:0; }
.pager { display:inline-flex; align-items:center; gap:10px; }
.pager-n { white-space:nowrap; }
table.data td.figure { font-variant-numeric:tabular-nums; color:var(--ink-700); }
table.data td.loanid { color:var(--ink-900); font-weight:500; }

/* Pool page: the series code is the title, set in the serif with lining
   figures so a code reads as a serial, not a word. */
.series-title { font-variant-numeric:lining-nums tabular-nums; letter-spacing:.01em; }
.page-head .pool-name-row p { margin-top:6px; }



/* Disclosure rows (holdings history): the whole header is the button. */
.disclosure-h { margin:0; font-size:var(--text-base); font-weight:600; }
.disclosure {
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:12px 18px;
  font:inherit; color:var(--ink-900); text-align:left; background:none; border:0; cursor:pointer;
  border-radius:var(--r);
}
.disclosure:hover { background:#F7F9FB; }
.disclosure:focus-visible { outline-offset:-2px; }
.disclosure .poolhead-code { font-family:var(--font-mono); font-size:14px; font-weight:500; }
.disclosure .poolhead-count { margin-left:auto; font-size:var(--text-sm); font-weight:400; color:var(--ink-700); font-variant-numeric:tabular-nums; }
.chev { width:14px; height:14px; flex:none; fill:none; stroke:var(--ink-500); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
.disclosure[aria-expanded="true"] .chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .chev { transition:none; } }
.disclosure[aria-expanded="true"] { border-bottom:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; }

/* Dates and figures in a register row are links to their transaction, but
   read as ink: a column of blue would shout over the identifiers. */
table.data td.figure a { color:var(--ink-700); }
table.data td.figure a:hover { color:var(--accent); }
.register-card { margin-top:20px; }
.ledger-cols > .card .pk-row { margin-top:0; }
/* A group's name (a set of buttons has no single control to label). Same
   look as .field > label. */
.field > .label-like { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px; }

/* ============================================================================
   BOOK OF RECORD, PHASE 2: the public site (2026-10-19).
   The verify page is the register's front desk: the promise as a serif title,
   what a check returns as numbered register lines, the form on a white leaf.
   ============================================================================ */
.verify-hero { background:var(--bg); border-bottom:1px solid var(--line); }
.verify-hero .wrap { padding:64px 28px 64px; gap:64px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.verify-hero h1 {
  font-family:var(--font-serif); font-size:46px; line-height:1.08; font-weight:600;
  letter-spacing:-.012em; color:var(--ink-900);
}
.verify-hero p.tagline {
  font-family:var(--font-serif); font-style:italic; font-size:var(--text-lg);
  color:var(--ink-500); margin:14px 0 0;
}
.verify-hero p.lede { font-size:var(--text-md); line-height:1.6; color:var(--ink-700); max-width:52ch; margin:22px 0 0; }
.home-access-link { margin-top:26px; font-size:var(--text-base); color:var(--accent); }
.verify-card {
  border-color:var(--border); color:var(--ink-700);
  box-shadow:0 1px 2px rgba(14,23,38,.04), 0 10px 30px rgba(14,23,38,.06);
}

/* Workspaces block: the examples as register rows, not tiles. */
.home-login { padding:30px 32px; }
.home-login-head h2 {
  font-family:var(--font-serif); font-size:24px; font-weight:600; line-height:1.25; color:var(--ink-900);
}
.home-login-who { margin:4px 0 0; font-size:var(--text-sm); color:var(--ink-500); }
.home-login-examples { gap:40px; }
.home-example-label {
  font-size:var(--text-sm); font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--ink-700); margin:0 0 8px;
}
.home-access-links { flex-direction:column; gap:0; border-top:1px solid var(--line); }
.home-access-item {
  flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  min-width:0; min-height:48px; padding:10px 4px; border:0; border-bottom:1px solid var(--line);
  border-radius:0; font-size:var(--text-base); font-weight:500; color:var(--ink-900);
  transition:color .15s ease, background-color .15s ease;
}
.home-access-item:hover { color:var(--accent); background:#F7F9FB; }
.home-access-item:hover .chev { stroke:var(--accent); }

@media (max-width:980px){
  .verify-hero .wrap { grid-template-columns:minmax(0,1fr); gap:36px; padding:40px 20px; }
}
@media (max-width:700px){
  .verify-hero .wrap { padding:28px 16px 32px; }
  .verify-hero h1 { font-size:34px; }
  .verify-hero p.lede { font-size:var(--text-base); }
  .home-login { padding:22px 18px; }
  .home-login-head h2 { font-size:21px; }
}
/* The hash derivation, as a footnote to the form rather than a code box. */
.derivation { margin:4px 0 16px; font-size:var(--text-sm); color:var(--ink-700); line-height:1.6; }
.derivation .mono { font-size:12.5px; color:var(--ink-900); background:var(--surface-subtle); padding:1px 5px; border-radius:2px; white-space:nowrap; }
.regtools-count { font-size:var(--text-sm); color:var(--ink-700); font-variant-numeric:tabular-nums; }
.card-f { font-size:var(--text-sm); color:var(--ink-700); }
/* "Preview": the investor view is illustrative (lib/investor-demo.ts). A
   neutral tag beside the title, not a warning. */
.pill.preview { background:var(--surface-subtle); color:var(--ink-700); box-shadow:inset 0 0 0 1px var(--border); }
@media (max-width:700px){ .derivation .mono { white-space:normal; overflow-wrap:anywhere; } }
/* A long vault address on a phone wraps inside its own unit, under "Vault". */
.custody-vault { flex-wrap:wrap; min-width:0; }

/* Loading skeleton in the register's own shape (app/[tenant]/loading.tsx). */
.sk-sub { height:14px; width:420px; max-width:80%; margin-top:12px; }
.sk-statement { height:20px; width:560px; max-width:90%; margin-bottom:16px; }
.sk-alloc { height:10px; width:100%; border-radius:2px; }
.sk-head { height:38px; background:var(--surface-subtle); border-bottom:1px solid var(--border-strong); }
.sk-rline { display:flex; gap:40px; align-items:center; height:40px; padding:0 14px; border-bottom:1px solid var(--line); }
.sk-rline:last-child { border-bottom:0; }
.sk-cell { height:12px; width:220px; }
.sk-cell.short { width:120px; }

/* Finish-review fixes (2026-10-19). */
/* Drawn inline icons in place of text glyphs ("→", "↗"). */
.inline-icon { display:inline-block; width:.95em; height:.95em; vertical-align:-.12em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sb-extlink .inline-icon { margin-left:4px; }
/* No shadow on the verify leaf: white leaves and hairlines, as everywhere. */
.verify-card { box-shadow:none; border-color:var(--border-strong); }
/* Title support line: items spaced, no "·" that dangles when it wraps. */
.custody-line { gap:6px 18px; }
/* Row actions in the pools register. */
td.rowactions { white-space:nowrap; text-align:right; }
td.rowactions .btn + .btn { margin-left:6px; }

/* PHONE (finish review). The full lockup in the top bar, and registers as
   stacked records rather than tables scrolled sideways. */
@media (max-width:768px){
  .topbar-brand { flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; }
  .topbar-brand-sub { font-size:9.5px; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); white-space:nowrap; }
  /* The page's own serif title says where you are; the crumb would only be
     squeezed to an ellipsis beside the lockup. */
  .shell-topbar .breadcrumb { display:none; }
  .shell-topbar .topbar-spacer { flex:1; }
  /* Room under the last record for the floating support button. */
  .shell-main .page { padding-bottom:96px; }
}
.topbar-brand-sub { display:none; }
@media (max-width:768px){ .topbar-brand-sub { display:block; } }

@media (max-width:700px){
  table.data.stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  table.data.stack, table.data.stack tbody, table.data.stack tr { display:block; width:100%; }
  table.data.stack tr { padding:12px 16px; border-bottom:1px solid var(--line); }
  table.data.stack tbody tr:last-child { border-bottom:0; }
  table.data.stack tbody tr:hover { background:transparent; }
  table.data.stack td {
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:4px 0; border:0; text-align:right; white-space:normal; min-width:0;
  }
  table.data.stack td::before {
    content:attr(data-label); flex:none; text-align:left;
    font-family:var(--font-sans); font-size:12.5px; font-weight:400; color:var(--ink-500);
  }
  /* The record's key (Series, Loan ID) is its title line, unlabelled. */
  table.data.stack td.stack-key { justify-content:flex-start; text-align:left; padding-bottom:6px; font-weight:600; }
  table.data.stack td.stack-key::before,
  table.data.stack td.empty::before,
  table.data.stack tr.grouprow td::before,
  table.data.stack td.rowactions::before { content:none; }
  table.data.stack td.empty { justify-content:center; text-align:center; }
  table.data.stack td.rowactions { justify-content:flex-start; padding-top:8px; }
  table.data.stack .holder { flex-wrap:wrap; justify-content:flex-end; white-space:normal; }
  .tablewrap:has(> table.data.stack) { overflow-x:visible; }
}
/* An older phone rule gives every data table min-width:560px so it scrolls;
   a stacked register is the alternative to scrolling, so it opts out. */
@media (max-width:700px){ table.data.stack { min-width:0; } }
/* Pool name: one line, cut at the end, full name on hover (rows stay one
   line high beside the row actions). */
table.data td.poolname { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px){ table.data.stack td.poolname { max-width:none; white-space:normal; } }
.entry-poolline { margin-top:2px; line-height:1.3; }
table.data td.rowactions { gap:8px; }
@media (max-width:700px){ table.data.stack td.rowactions .btn + .btn { margin-left:0; } }

/* Pools register: fixed column widths so the name absorbs the squeeze (cut
   at the end, full name on hover) and the row actions are never clipped in
   the two-thirds column, from 1100px up. */
table.data.pools { table-layout:fixed; }
table.data.pools th:nth-child(2) { width:118px; }
table.data.pools th:nth-child(3) { width:190px; }
table.data.pools th:nth-child(4) { width:144px; }
table.data .poolcell a { display:block; font-size:13px; white-space:nowrap; }
table.data .poolcell-name { display:block; margin-top:1px; font-size:var(--text-sm); color:var(--ink-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Two columns at 70/30; they stack under 1100px (rule above). */
.ledger-cols { grid-template-columns:minmax(0,7fr) minmax(300px,3fr); }
@media (max-width:1100px){ .ledger-cols { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px){
  table.data.stack td.poolcell { flex-direction:column; align-items:flex-start; gap:2px; }
  table.data.stack .poolcell-name { white-space:normal; }
}
/* SUPPORT ON A PHONE (finish review): not a floating button. Floating, it
   sat on whatever was in the bottom-right corner (a pool's sold figure, a
   holder), and no padding clears a corner mid-page. On a phone it is the
   last thing on every workspace page instead: a full-width, labelled button.
   The panel it opens is unchanged. Desktop keeps the floating launcher. */
@media (max-width:768px){
  .sup-launch, .sup-launch.away {
    position:static; display:flex; justify-content:center;
    width:calc(100% - 32px); height:48px; margin:0 16px 32px; padding:0 16px;
    border-radius:var(--r); box-shadow:none; opacity:1; pointer-events:auto; transform:none;
    background:var(--surface); color:var(--accent); border:1px solid var(--border-control);
  }
  .sup-launch:hover { background:var(--surface-subtle); transform:none; }
  .sup-launch svg { width:16px; height:16px; }
  .sup-launch-label { display:inline; }
  /* The button follows the page now, so no room is kept for it to float
     over; the earlier 96px/104px bottom paddings are undone here. */
  body:has(.sup-launch) .page, .shell-main .page { padding-bottom:32px; }
}
/* A pool code in an entry is a serial and is never cut or broken: its series
   number is what tells one pool from another. In a narrow panel the date and
   transaction move under the entry instead, so the code always has the width. */
.entry-pool { display:inline-block; white-space:nowrap; }
.entries { container-type:inline-size; }
@container (max-width:400px) {
  .entry { grid-template-columns:auto minmax(0,1fr); }
  .entry-when { grid-column:2; flex-direction:row; flex-wrap:wrap; gap:4px 14px; text-align:left; margin-top:2px; }
}

/* A pool's standing (pool-standing.tsx): the state as a word, the holder
   beside it. One line in the pools register. */
.standing { display:inline-flex; align-items:baseline; gap:8px; min-width:0; max-width:100%; }
.standing-note { font-size:var(--text-sm); color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.standing-note a { color:inherit; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; }
.standing-note a:hover { color:var(--accent); text-decoration-color:currentColor; }
.statement-when { color:var(--ink-500); }
.statement-line a { color:inherit; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.statement-line a:hover { color:var(--accent); text-decoration-color:currentColor; }
@media (max-width:700px){ table.data.stack .standing { justify-content:flex-end; flex-wrap:wrap; } }

/* ============================================================================
   STOKR BLACK (trial, 2026-10-19). The STOKR product look from the issuer and
   investor dashboards (Figma 02 / 03): a pure black rail on a white page,
   black pill buttons, heavy wide-tracked capitals for titles over light
   subtitles, small tracked capitals for labels, and bright green only for
   the current place and the positive state. Same typeface (Open Sans), so no
   new font. One block, last in the file: delete it to return to the navy.
   ============================================================================ */
:root {
  --ink-900:#000000; --ink-700:#262626; --ink-500:#5C5C5C; /* 6.6:1 on white */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-subtle:#F5F5F5;
  --border:#E6E6E6; --border-strong:#CFCFCF; --border-control:#8A8A8A;
  --accent-900:#000000; --accent-hover:#262626; --accent-tint:#F2F2F2;
  --positive:#13803F; --positive-tint:#ECF7F0; --positive-line:#9FD8B4;
  --focus-ring:rgba(0,0,0,.22);
  --rail-bg:#000000; --rail-line:#1C1C1C; --rail-fg:#FFFFFF; --rail-text:#FFFFFF;
  --rail-mut:#8F8F8F; --rail-hover:#141414; --rail-active:#1A1A1A;
  --rail-current:#5EE08F;
  --header-bg:#000000; --header-line:#1C1C1C; --header-fg:#FFFFFF; --header-mut:#B3B3B3;
  --header-hover:#1A1A1A;
  /* Titles move from the serif to Open Sans at its heaviest. */
  --font-serif:var(--font-sans);
  --r-pill:999px;
}
::selection { background:#D9D9D9; color:#000; }

/* Links: black, with the underline as the affordance (black is no longer a
   colour that marks "clickable" on its own). */
a { color:var(--ink-900); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
a:hover { text-decoration-color:currentColor; }
.btn, .btn:hover, .nav-item, .nav-item:hover, .home-access-item, .home-access-item:hover,
.skip-link, .mainnav a, .appbar a, .sb-logo a, .topbar-brand, a.bc-root, .disclosure { text-decoration:none; }

/* ---- the rail: black, white capitals, the current page in green ---- */
.sb-logo { padding:26px 24px 22px; }
.sb-logo-sub { color:var(--rail-mut); letter-spacing:.16em; }
.sb-section { color:var(--rail-mut); letter-spacing:.18em; font-size:10.5px; padding:20px 24px 6px; }
.nav-item {
  margin:0; padding:13px 24px; border-radius:0; color:var(--rail-text);
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
}
.nav-item .nav-icon { opacity:.9; }
.nav-item:hover { background:var(--rail-hover); color:#fff; }
.nav-item.active { background:var(--rail-active); color:var(--rail-current); font-weight:700; }
.nav-item.nav-ext { font-size:11.5px; color:var(--rail-mut); text-transform:uppercase; letter-spacing:.14em; }
.org-avatar { background:#fff; color:#000; border-radius:var(--r-pill); }
.status-label { color:#D9D9D9; }

/* ---- titles: heavy, wide-tracked capitals over a light subtitle ---- */
.page-head { border-bottom:0; padding-bottom:4px; margin-bottom:32px; }
.page-head h1, .verify-hero h1, .home-login-head h2 {
  font-family:var(--font-sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:#000; line-height:1.15;
}
.page-head h1 { font-size:34px; }
.page-head p, .page-head .page-sub { font-size:18px; font-weight:300; color:var(--ink-700); letter-spacing:.01em; }
.page-head .custody-line { font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500); }
/* The vault address in Open Sans bold, like the rest of the line, not mono. */
.page-head .custody-line .copyaddr-text { text-transform:none; letter-spacing:.02em; font-size:13px; font-family:var(--font-sans); font-weight:700; }
.series-title { letter-spacing:.05em; }
.card-h :is(h2,h3), .section-h h2 { font-weight:700; color:#000; }
.statement-line { font-weight:300; color:var(--ink-700); }
.statement-line b { font-weight:700; color:#000; }

/* ---- labels: small tracked capitals ---- */
.label, .card-note, .regfoot-n, .alloc-key, .entry-when time, .home-example-label {
  text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:600; color:var(--ink-500);
}
.label::first-letter { text-transform:none; }
table.data th { background:#fff; color:var(--ink-500); letter-spacing:.14em; font-size:11px; border-bottom:1px solid var(--border-strong); }

/* ---- buttons: pills, capitals ---- */
.btn {
  border-radius:var(--r-pill); padding:12px 26px; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; background:#000; color:#fff; border:1px solid #000;
}
.btn:hover { background:#262626; }
.btn.ghost { background:#fff; color:#000; border:1px solid #CFCFCF; }
.btn.ghost:hover { background:#F5F5F5; border-color:#000; }
.btn.sm { padding:7px 16px; font-size:11px; letter-spacing:.14em; }
.btn:disabled { background:#E6E6E6; border-color:#E6E6E6; color:#8A8A8A; }
.seg { border-radius:var(--r-pill); border-color:#CFCFCF; }
.seg button { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.seg button[aria-pressed="true"] { background:#000; color:#fff; }
.seg button[aria-pressed="true"] .seg-n { color:#BFBFBF; }
.sup-launch { border-radius:var(--r-pill); background:#000; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; }
.sup-launch:hover { background:#262626; }
.user-chip { border-radius:var(--r-pill); }

/* ---- status: outlined pills in capitals, like the Figma "ACTIVE" ---- */
.pill {
  border-radius:var(--r-pill); padding:2px 12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; background:transparent; border:1px solid currentColor;
}
.pill::before { display:none; }
.pill.available { color:var(--positive); background:var(--positive-tint); border-color:var(--positive-line); }
/* Sold: a slate tag, read the same way as Available (green) and Part sold
   (amber): darker text on a tint with a matching line, so it is a status and
   not a button. It was solid black, which looked like the buttons beside it. */
.pill.sold { color:#1A2233; border-color:#C5CAD3; background:#E4E7EC; }
.pill.pending { color:var(--caution); border-color:var(--caution-line); background:var(--caution-tint); }
.pill.preview { color:var(--ink-500); border-color:#CFCFCF; box-shadow:none; }

/* ---- cards: white leaves, a faint lift (the Figma cards carry one) ---- */
.card, .verify-card { border-color:var(--border); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.alloc-sold, .sw-sold { background:#000; }
.alloc { box-shadow:inset 0 0 0 1px var(--border); }

/* ---- inputs: square-shouldered, black focus ---- */
.regsearch input, .regpool select, .field input, .field select, .field textarea { border-color:#CFCFCF; }
.regsearch input:focus-visible, .field input:focus, .field select:focus, .field textarea:focus { border-color:#000; box-shadow:0 0 0 3px var(--focus-ring); }
:focus-visible { outline-color:#000; }
.nav-item:focus-visible { outline-color:var(--rail-current); }

/* ---- public site ---- */
.verify-hero h1 { font-size:44px; letter-spacing:.05em; }
.verify-hero p.tagline { font-family:var(--font-sans); font-style:normal; font-weight:300; font-size:20px; color:var(--ink-700); }
.home-access-link { color:#000; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:700; text-decoration:none; }
.readonly-strip { background:#000; color:#E6E6E6; border-bottom-color:#000; }
.readonly-strip b { color:#fff; }
.readonly-strip a { color:var(--rail-current); text-decoration-color:currentColor; }
/* The rail is wider for tracked capitals: at 236px "Register receivables"
   broke over two lines. */
:root { --sidebar-w:272px; }
.nav-item { padding:13px 22px; letter-spacing:.13em; font-size:12px; }
.sb-section { padding-left:22px; padding-right:22px; }
/* Pill buttons are wider than square ones: give the row actions the room. */
table.data.pools th:nth-child(4) { width:180px; }
/* Public header: the buttons in white on black, the links in capitals. */
.mainnav a { text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; text-decoration:none; }
.appbar .authbox .btn { background:#fff; color:#000; border-color:#fff; }
.appbar .authbox .btn:hover { background:#E6E6E6; }
.appbar .authbox .btn.ghost { background:transparent; color:#fff; border-color:#5C5C5C; }
.appbar .authbox .btn.ghost:hover { background:#1A1A1A; border-color:#fff; }
@media (max-width:700px){
  .verify-hero h1 { font-size:30px; }
  .page-head h1 { font-size:26px; }
}
/* Phone: the end-of-page support button stays an outlined pill. */
@media (max-width:768px){
  .sup-launch, .sup-launch.away { background:#fff; color:#000; border:1px solid #CFCFCF; }
  .sup-launch:hover { background:#F5F5F5; }
}
/* Current page: no accent colour (2026-10-19, chosen over green, steel blue
   and champagne). The current item is white on a lighter row; the others are
   dimmed. Green stays only as the Available status, a finance convention. */
:root { --rail-current:#FFFFFF; --rail-text:#A3A3A3; --rail-active:#262626; }
.nav-item:hover { color:#FFFFFF; }
.nav-item.active { color:#FFFFFF; }
.readonly-strip a { color:#FFFFFF; }
.readonly-strip a, .readonly-strip a.exlink { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; border-bottom:0; }
/* A single verify result: sold is a stop for a funder checking collateral,
   so it is red, the counterpart of available's green. Only here: lists and
   the dashboards keep sold neutral. */
.cert-status.single.sold { background:var(--negative-tint); border-color:var(--negative-line); }
.cert-status.single.sold .big { color:var(--negative); }
/* The signed-in chip: a pill with a circular initial inside it. The badge
   used to keep square corners (4px) inside the pill, so they poked past the
   curve. Now a 30px circle with equal 5px padding all round, so the curve of
   the badge follows the curve of the chip. */
.user-chip { gap:10px; padding:5px 18px 5px 5px; min-height:42px; }
.user-av {
  width:30px; height:30px; flex:none; border-radius:50%;
  background:#000; color:#fff; font-size:13px; font-weight:700; letter-spacing:0;
}
.appbar .user-chip .user-av { background:#fff; color:#000; }
@media (max-width:768px){ .user-chip { padding:5px 14px 5px 5px; gap:8px; } }

/* Pool summary strip (pool page): the pool's one standing as labelled facts,
   like the STOKR dashboards' snapshot cards, in place of a sentence. */
.factstrip { margin:0 0 24px; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.factstrip dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:0; }
.factstrip dl > div { padding:18px 22px; border-left:1px solid var(--border); min-width:0; }
.factstrip dl > div:first-child { border-left:0; }
.factstrip dt { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500); margin:0 0 8px; }
.factstrip dd { margin:0; font-size:16px; font-weight:600; color:#000; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.factstrip .fact-num { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.factstrip .fact-sub { font-size:12.5px; font-weight:400; }
@media (max-width:700px){
  .factstrip dl { grid-template-columns:1fr 1fr; }
  .factstrip dl > div { border-left:0; border-top:1px solid var(--border); padding:14px 16px; }
  .factstrip dl > div:nth-child(-n+2) { border-top:0; }
  .factstrip dl > div:nth-child(even) { border-left:1px solid var(--border); }
}
.factstrip .fact-sub .copyaddr-text { overflow-wrap:normal; white-space:nowrap; }
@media (max-width:700px){
  /* An odd last fact takes the full row rather than leaving a gap. */
  .factstrip dl > div:last-child:nth-child(odd) { grid-column:1 / -1; border-left:0; }
}

/* Pool access code: one field with its controls inside (pool-passkey.tsx). */
.pk-field {
  display:flex; align-items:center; gap:4px; min-height:48px; padding:4px 4px 4px 14px;
  border:1px solid var(--border-strong); border-radius:6px; background:var(--surface-subtle);
}
.pk-field .pk-value {
  flex:1; min-width:0; padding:0; border:0; background:none;
  font-size:18px; letter-spacing:.12em; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pk-ctl {
  display:inline-flex; align-items:center; gap:6px; flex:none; height:38px; padding:0 12px;
  font:inherit; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:#000; background:#fff; border:1px solid var(--border-strong); border-radius:999px; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.pk-ctl:hover { border-color:#000; }
.pk-ctl:disabled { color:var(--ink-500); cursor:default; }
.pk-ctl-icon { width:38px; padding:0; justify-content:center; }
.pk-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Register entry marker (register-entries.tsx): filled for a registration,
   a ring for a sale. Sits on the first line of the entry. */
.entry-mark { width:9px; height:9px; border-radius:50%; margin-top:6px; align-self:start; box-sizing:border-box; }
.entry-mark.is-reg { background:#000; }
.entry-mark.is-move { border:2px solid #000; background:#fff; }

/* Latest entries, fitted to the pools card (fit-entries.tsx): the footer
   with "See all" sits at the bottom of the card. */
.ledger-cols > section.card:has(.fit-entries) { display:flex; flex-direction:column; }
.fit-entries-foot { margin-top:auto; padding:10px 18px; border-top:1px solid var(--line); display:flex; justify-content:center; }
.fit-entries .entry[hidden] { display:none; }
/* Denser entries inside the fitted panel, so more of them fit beside the
   pools: each was four lines of generous rows, about twice a pool row. */
.fit-entries .entry { padding:9px 18px; gap:0 12px; }
.fit-entries .entry-event { line-height:1.35; }
.fit-entries .entry-poolline { margin-top:1px; line-height:1.3; }
.fit-entries .entry-party { margin-top:1px; line-height:1.35; }
.fit-entries .entry-when { margin-top:1px; line-height:1.35; }
.fit-entries .entry-mark { margin-top:5px; }
.fit-entries-foot { padding:8px 18px; }

/* API page (app/[tenant]/api). */
.apikey-new { display:flex; flex-direction:column; gap:10px; margin:0 0 20px; padding:16px 18px; border:1px solid #000; border-radius:6px; background:#fff; }
.apikey-value { font-size:14px; letter-spacing:.02em; }
/* The key is shown once: wrap it rather than cut it off with an ellipsis (the
   passkey field it borrows from truncates), so it can be read and checked. */
.apikey-new .pk-value { white-space:normal; overflow:visible; text-overflow:clip; word-break:break-all; }
.apikey-new > .btn { align-self:flex-start; }
.apikey-form { display:flex; flex-direction:column; gap:4px; max-width:620px; }
.apikey-scopes { border:0; padding:0; margin:0 0 14px; min-width:0; }
.apikey-scopes legend { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px; padding:0; }
/* Each permission is one clickable row: tick box, name, what it allows. The
   chosen ones carry a black outline, so the choice reads at a glance. */
.apikey-scope-list { display:grid; gap:8px; }
.apikey-scope { display:grid; grid-template-columns:16px minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; border:1px solid var(--border-control); border-radius:6px; background:var(--surface); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.apikey-scope:hover { border-color:var(--ink); }
.apikey-scope:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.apikey-scope input { width:16px; height:16px; margin:2px 0 0; padding:0; accent-color:var(--ink); cursor:pointer; }
.apikey-scope input:focus { outline:none; box-shadow:none; }
.apikey-scope:has(input:focus-visible) { box-shadow:0 0 0 3px var(--focus-ring); }
.apikey-scope:has(input:checked):has(input:focus-visible) { box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 3px var(--focus-ring); }
.apikey-scope-text { display:flex; flex-direction:column; gap:2px; font-size:var(--text-sm); line-height:1.45; color:var(--ink-2); }
.apikey-scope-text b { font-weight:600; color:var(--ink); }
.api-ref p { margin:0 0 14px; font-size:var(--text-sm); color:var(--ink-700); max-width:80ch; }
.api-ref code { font-size:12.5px; background:var(--surface-subtle); padding:1px 5px; border-radius:2px; color:#000; }
.api-endpoints { margin:0 0 18px; }
.api-endpoints td:last-child { white-space:normal; }
.api-example-label { font-size:11px !important; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500) !important; margin-bottom:6px !important; }
.api-example { margin:0 0 14px; padding:12px 14px; background:#000; color:#fff; border-radius:6px; font-size:12.5px; overflow-x:auto; }
.page > section.card + section.card { margin-top:20px; }

/* ============================================================================
   READABILITY PASS (2026-11-04). Keeps the STOKR black look (black rail, pill
   buttons, heavy page titles) and takes back two things the trial above
   overrode, which DESIGN.md had settled for a senior audience:

   1. SENTENCE CASE. Small tracked capitals were on navigation, buttons,
      status pills, labels, facts and even dates ("28 OCT 2026"): the hardest
      text to read at a small size, and out of step with the documentation.
      DESIGN.md's Column Head Rule stands: in content, capitals are for table
      column headers only. The large page titles keep theirs; at 26 to 44px
      they read, and they are the brand's signature. The lockup's "Private
      Credit Registry" and the rail's group names are chrome, also allowed.
   2. SECONDARY TEXT IS DARK AND AT LEAST 14PX. The trial's grey (#5C5C5C)
      and the rail's #8F8F8F were the mid greys; both are darkened here, and
      the small steps of the scale move up a step.
   ============================================================================ */
:root {
  --ink-500:#404040;               /* 10.4:1 on white, was 6.6:1 */
  --text-xs:14px; --text-sm:14.5px;
  --rail-mut:#BDBDBD;              /* 11:1 on the black rail, was 6.6:1 */
  --rail-text:#D4D4D4;
}
.nav-item, .nav-item.nav-ext, .mainnav a, .btn, .btn.sm, .seg button, .sup-launch,
.home-access-link, .pill, .pk-ctl, .factstrip dt, .page-head .custody-line,
.label, .card-note, .regfoot-n, .alloc-key, .entry-when time, .home-example-label,
.api-example-label, .eyebrow, .demo-side-kicker, .access-show-h, .access-example figcaption {
  text-transform:none; letter-spacing:0;
}
/* Labels are written in lower case in places ("by face value"); the navy
   system capitalised their first letter and the trial switched that off. */
.label::first-letter { text-transform:uppercase; }
.nav-item { font-size:15px; font-weight:600; }
.nav-item.nav-ext { font-size:14px; }
.mainnav a { font-size:15px; font-weight:600; }
.btn { font-size:15px; font-weight:600; padding:11px 24px; }
.btn.sm { font-size:14px; padding:7px 16px; }
.seg button, .pk-ctl { font-size:14px; font-weight:600; }
.pill { font-size:13.5px; font-weight:600; padding:2px 11px; }
.label, .card-note, .regfoot-n, .alloc-key, .entry-when time, .home-example-label,
.factstrip dt, .api-example-label, .page-head .custody-line {
  font-size:14px; font-weight:600; color:var(--ink-700);
}
.api-example-label { font-size:14px !important; color:var(--ink-700) !important; }
.factstrip .fact-sub { font-size:14px; }
.sb-section { font-size:12px; letter-spacing:.1em; }
/* Column headers: the one place capitals stay, a little larger and darker. */
table.data th { font-size:12.5px; letter-spacing:.06em; color:var(--ink-700); }
.card-f, .standing-note, .regtools-count { font-size:14.5px; }

/* 3. "ASK SUPPORT" IN THE TOP BAR (support-chat.tsx portals it into
   #topbar-support). It covers nothing there, so the room every page kept at
   its foot for a floating button is given back. */
.topbar-support:empty { display:none; }
.sup-launch.docked, .sup-launch.docked.away {
  position:static; width:auto; height:auto; margin:0; padding:7px 16px;
  border-radius:var(--r-pill); box-shadow:none; transform:none; opacity:1; pointer-events:auto;
  background:#fff; color:#000; border:1px solid var(--border-strong);
  font-size:14px; font-weight:600;
}
.sup-launch.docked:hover { background:var(--surface-subtle); border-color:#000; transform:none; }
.sup-launch.docked svg { width:15px; height:15px; }
.sup-launch.docked .sup-launch-label { display:inline; }
body:has(.sup-launch.docked) .page { padding-bottom:72px; }
@media (max-width:768px){
  /* Icon only in a phone's top bar, still a full touch target. */
  .sup-launch.docked { width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; }
  .sup-launch.docked .sup-launch-label { display:none; }
  body:has(.sup-launch.docked) .page { padding-bottom:44px; }
}

/* 4. VERIFY RESULT. Sold is neutral here too: the red box (above, from the
   trial) read as an alarm on an ordinary, expected answer. And the 77-digit
   token ID is one number: it gets a line of its own and scrolls sideways on a
   narrow screen rather than breaking mid-number. */
.cert-status.single.sold { background:var(--surface-subtle); border-color:var(--border-strong); }
.cert-status.single.sold .big { color:var(--ink-900); }
.hashline { word-break:normal; overflow-wrap:normal; }
.hashline .k { display:block; margin-bottom:4px; font-family:var(--font-sans); font-size:14px; font-weight:600; }
.hashline .hash-num { display:block; white-space:nowrap; overflow-x:auto; padding-bottom:2px; }
.hashline a.exlink { display:block; }
.guide-shared { margin:0; padding:12px 18px 0; font-size:14.5px; color:var(--ink-700); max-width:70ch; }
.nf-home { margin:18px 0 0; font-size:15px; }
/* The 404 page's labels and the tour's step count, sentence case like the rest. */
.nf-code, .nf-path-label, .tour-count { text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink-700); }

/* ============================================================================
   WORKSPACE TABLES FIT, OR SCROLL WITH THE FIRST COLUMN PINNED (2026-11-04).
   Required: readable, nothing clipped, at a 1280px window and at 125% zoom on a
   1440px screen (a 1152px viewport). A wide register used to run past its card
   and relied on a sideways scroll that a Mac hides until you touch it; Windows
   shows a bar, but the cut-off column still read as a mistake.
   1. Slightly tighter cells, so the usual register fits at 1280 untouched.
   2. Where one still does not fit (a narrower window, a higher zoom) it scrolls
      INSIDE its card, with the first column (Loan ID, pool, name) held in place
      so each row keeps its label, and a thin bar that is always drawn.
   Phones are not touched: below 700px a register reflows into stacked records.
   ============================================================================ */
@media (min-width:701px){
  .shell-main .tablewrap { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#8A8A8A transparent; }
  .shell-main .tablewrap table.data th,
  .shell-main .tablewrap table.data td { padding-left:12px; padding-right:12px; }
  .shell-main .tablewrap table.data th:first-child,
  .shell-main .tablewrap table.data td:first-child {
    position:sticky; left:0; z-index:1; background:var(--surface);
    /* A hairline on the pinned edge, so it reads as held while the rest slides. */
    box-shadow:1px 0 0 var(--line);
  }
  .shell-main .tablewrap table.data th:first-child { background:#fff; z-index:2; }
  .shell-main .tablewrap table.data tbody tr:hover td:first-child { background:#F7F9FB; }
  .shell-main .tablewrap table.data tbody tr.grouprow:hover td:first-child { background:var(--surface); }
}
.shell-main .tablewrap::-webkit-scrollbar { height:10px; }
.shell-main .tablewrap::-webkit-scrollbar-thumb { background:#8A8A8A; border-radius:6px; border:2px solid var(--surface); }

/* ---- servicer workspace ------------------------------------------------- */
/* The active fund, named in the top bar on every servicer page. */
.topbar-fund { display:inline-flex; align-items:baseline; gap:6px; margin-left:14px; padding:5px 12px; border:1px solid var(--border-strong); border-radius:999px; font-size:14px; font-weight:600; color:#000; background:#fff; white-space:nowrap; }
.topbar-fund-k { font-weight:400; color:var(--ink-700); }
@media (max-width:768px){ .topbar-fund { margin-left:8px; padding:4px 10px; } .topbar-fund-k { display:none; } }
.svc-lede { margin:0 0 16px; max-width:70ch; font-size:var(--text-base); color:var(--ink-700); }
.svc-steps { margin:0; padding-left:22px; max-width:78ch; font-size:var(--text-base); line-height:1.6; }
.svc-steps li { margin:0 0 8px; }
.svc-check { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#000; cursor:pointer; }
.svc-check input { width:16px; height:16px; accent-color:#000; }
/* The five answers, with a count each, above a result. */
.svc-counts { display:flex; flex-wrap:wrap; gap:10px 28px; padding:16px 18px; border-bottom:1px solid var(--line); }
.svc-count { display:inline-flex; align-items:center; gap:10px; }
.svc-count-n { font-size:22px; font-weight:700; color:#000; font-variant-numeric:tabular-nums; }
.regtools .btnrow { display:inline-flex; flex-wrap:wrap; gap:8px; }
/* Pending rows on the servicer's own tape, offered for confirmation. */
.svc-confirmbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-subtle); }
.svc-confirmbar p { margin:0; flex:1 1 360px; font-size:var(--text-base); color:#000; }

/* ---- "Take a tour" in the top bar, and the account menu (2026-11-05) ---- */
.mdi { width:18px; height:18px; flex:none; }
.topbar-tour:empty { display:none; }
/* The same pill as Ask support beside it, so the two read as a pair. */
.tour-launch {
  display:inline-flex; align-items:center; gap:8px; padding:7px 16px;
  border-radius:var(--r-pill); background:#fff; color:#000; border:1px solid var(--border-strong);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.tour-launch:hover { background:var(--surface-subtle); border-color:#000; }
.tour-launch:focus-visible { outline:2px solid #000; outline-offset:2px; }
.tour-launch .mdi { width:17px; height:17px; }
@media (max-width:768px){
  .tour-launch { width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; }
  .tour-launch .tour-launch-label { display:none; }
}

/* The account chip is now a button that opens the menu. */
.user-menu { position:relative; }
button.user-chip { font:inherit; background:#fff; cursor:pointer; text-align:left; border:1px solid var(--border-strong); border-radius:var(--r-pill); }
.appbar button.user-chip { background:transparent; }
button.user-chip:hover { border-color:#000; }
.appbar button.user-chip:hover { border-color:#fff; }
button.user-chip:focus-visible { outline:2px solid #000; outline-offset:2px; }
.user-chip-caret { width:18px; height:18px; margin-left:-2px; transition:transform .12s; }
button.user-chip[aria-expanded="true"] .user-chip-caret { transform:rotate(180deg); }
.user-pop {
  position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:260px; max-width:min(340px, calc(100vw - 24px));
  background:#fff; border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow-overlay);
  padding:6px; color:#000; text-align:left;
}
.user-pop-head { padding:10px 12px 10px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-700); overflow-wrap:anywhere; }
.user-pop-head b { color:#000; font-weight:600; }
.user-pop-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:6px;
  background:transparent; font:inherit; font-size:15px; font-weight:500; color:#000; text-decoration:none; cursor:pointer;
}
.user-pop-item:hover, .user-pop-item:focus-visible { background:var(--surface-subtle); outline:none; }
.user-pop-item .mdi { color:var(--ink-700); }
.user-pop-item:disabled { color:var(--ink-500); cursor:default; }
.user-pop-confirm { padding:12px; }
.user-pop-confirm p { margin:0 0 12px; font-size:14.5px; line-height:1.5; color:var(--ink-700); }
.user-pop-confirm p b { display:block; color:#000; font-size:15px; margin-bottom:2px; }
.user-pop-actions { display:flex; gap:8px; }

/* Account settings page. */
.account-rows { margin:0; }
.account-rows > div { display:grid; grid-template-columns:minmax(140px, 220px) minmax(0,1fr); gap:6px 24px; padding:16px 18px; border-top:1px solid var(--line); }
.account-rows > div:first-child { border-top:0; }
.account-rows dt { font-size:14px; font-weight:600; color:var(--ink-700); }
.account-rows dd { margin:0; font-size:15px; color:#000; overflow-wrap:anywhere; }
@media (max-width:700px){ .account-rows > div { grid-template-columns:1fr; } }

/* STATUS TAGS, NOT BUTTONS (2026-11-05). A white pill with a border looks like
   the Open and Sell buttons beside it. "Available" was already a filled tag
   (green); "Sold" is now one too: black with light grey text, the sold state of
   the black theme (the rule is in the STOKR black block above). The tags that are only reused "sold" for something else
   (an expired or revoked key, a receivable still in custody) are a plain grey
   fill instead, so they read as status and not as an action. */
.pill.inactive { color:var(--ink-700); background:#E9E9E9; border-color:#E9E9E9; }

/* Dashboard head (2026-11-05): four figures over the pools, the custody split
   over the latest entries. Same two columns as the register below. */
.holdings-head { margin:0 0 24px; align-items:stretch; }
.holdings-head .factstrip { margin:0; height:100%; }
.holdings-head .factstrip dl { height:100%; grid-template-columns:repeat(4, minmax(0,1fr)); }
.holdings-head .factstrip dl > div { display:flex; flex-direction:column; justify-content:center; }
/* The two head boxes are raised cards (elevation md). The figures are centred
   in their height: top-aligned, a funder's strip stretched to match the box
   beside it and left a deep empty band under the numbers. */
.holdings-head .factstrip, .holdings-head .holdings-split {
  border-radius:var(--radius-lg, 8px); border:1px solid var(--border-subtle, #E1E1E1);
  background:var(--background-default, #FFF);
  box-shadow:0 2px 4px 0 rgba(0,0,0,.04), 0 4px 8px 0 rgba(0,0,0,.08);
}
.holdings-split { margin:0; padding:18px 22px; display:flex; flex-direction:column; justify-content:center; gap:0; }
.holdings-split-h { font-size:14px; font-weight:600; color:var(--ink-700); margin:0 0 12px; }
.holdings-split .alloc { height:12px; }
@media (max-width:1100px){
  .holdings-head .factstrip dl { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .holdings-head .factstrip dl > div:nth-child(3) { border-left:0; }
  .holdings-head .factstrip dl > div:nth-child(n+3) { border-top:1px solid var(--border); }
}
/* One line per label, so the four figures sit on one baseline. */
.holdings-head .factstrip dt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- top bar: Take a tour, Ask support and the account chip as one set ----
   Same height, border, corner, type and padding, so the three read as a row of
   equal controls; each is as wide as its own label. 40px tall: the account
   chip's 30px initial with 5px each side. */
.topbar-actions { gap:10px; }
.tour-launch, .sup-launch.docked, .sup-launch.docked.away, .shell-topbar button.user-chip {
  box-sizing:border-box; height:40px; min-height:40px; padding:0 16px; gap:8px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:#fff; color:#000; font-size:14px; font-weight:600; line-height:1;
}
.shell-topbar button.user-chip { padding:0 14px 0 4px; }
.shell-topbar .user-av { width:30px; height:30px; }
.tour-launch .mdi, .sup-launch.docked .mdi, .sup-launch.docked svg { width:18px; height:18px; }
@media (max-width:768px){
  .tour-launch, .sup-launch.docked { width:40px; height:40px; padding:0; justify-content:center; }
  .shell-topbar button.user-chip { padding:0 8px 0 4px; }
}

/* The vault in a dashboard's header: GCLV…BUTN, the explorer icon, then copy.
   The icon is the address's own colour, and sized to its text, so it carries
   the same weight. */
.copyaddr-text .copyaddr-ext { width:1.05em; height:1.05em; margin-left:4px; vertical-align:-.15em; }
/* Funder dashboard: the newest receipt, beside the four figures. */
.newest-receipt { margin:0; display:flex; flex-direction:column; gap:4px; font-size:15px; color:#000; }
.newest-receipt b { font-size:14.5px; font-weight:500; }
table.data td.num, table.data th.num { text-align:right; }

/* Originator dashboard Pools card: the Receivables figure sits centred under
   its heading, and each row's buttons centre on the status beside them. */
table.data.pools th.num, table.data.pools td.num { text-align:center; }
table.data.pools td { vertical-align:middle; }
table.data.pools td.rowactions { vertical-align:middle; }
@media (max-width:700px){ table.data.stack.pools td.num { text-align:right; } }

/* Funder pool page: the access code card at half width (full on a phone). */
.pool-passkey-half { max-width:50%; }
@media (max-width:900px){ .pool-passkey-half { max-width:none; } }
/* An external link's icon, sized to the text it follows. */
.exlink .exlink-icon { width:13px; height:13px; margin-left:3px; vertical-align:-1px; }

/* Public top bar: "Private Credit Registry" under the STOKR mark, as on the
   workspace rail, rather than beside it. */
.appbar .brand { flex-direction:column; align-items:flex-start; gap:5px; }
.appbar .brand .tag { font-size:11px; letter-spacing:.16em; line-height:1.2; padding-bottom:0; }
.appbar a.authbox-docs {
  display:inline-flex; align-items:center; gap:4px; color:var(--header-mut);
  padding:8px 10px; border-radius:var(--r); font-size:15px; font-weight:500; text-decoration:none;
}
.appbar a.authbox-docs:hover { color:var(--header-fg); background:var(--header-hover); }
.appbar .nav-ext-icon { width:13px; height:13px; opacity:.75; }


/* Verify: the Loan ID field with "Upload a list" inside it. The border moves
   from the input to the row, and the button is a ghost (no fill, no outline,
   a grey wash on hover), as shadcn's ghost button. */
.inputrow.inbox {
  align-items:center; gap:6px; padding:4px 4px 4px 0;
  border:1px solid var(--border-control); border-radius:var(--r-sm); background:var(--surface);
}
.inputrow.inbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.field .inputrow.inbox input { border:0; box-shadow:none; background:transparent; }
.field .inputrow.inbox input:focus, .field .inputrow.inbox input:focus-visible { border:0; box-shadow:none; }
.btn.inbox-btn {
  background:transparent; border:0; color:var(--ink-900, #0E1726); border-radius:6px;
  text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; padding:7px 12px;
}
.btn.inbox-btn:hover { background:#F1F1F1; }
@media (max-width:700px){
  .inputrow.inbox { flex-wrap:nowrap; }
  .inputrow.inbox .btn { width:auto; }
}

/* ---------- Sign in: full page, abstract (after dashboard.privy.io) ----------
   A soft grey field with a lighter diagonal wash and a fine grain, filling the
   space between the top bar and the footer. The form sits on a white panel;
   the product's line is set large beside it. Monochrome, as STOKR's brand. */
.auth-stage {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100vh - 62px); display:flex; align-items:center;
  background:
    radial-gradient(1200px 700px at 85% 15%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #E9EAEC 0%, #F6F6F7 45%, #DADCE0 100%);
}
.auth-stage::before {
  /* The grain: fractal noise drawn once as an SVG, tiled. */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.auth-stage::after {
  /* A broad dark band across one corner, the abstract shape of the page. */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:70vmax; height:70vmax; right:-28vmax; bottom:-40vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(14,23,38,.16), rgba(14,23,38,0) 65%);
}
.auth-stage-inner {
  width:100%; max-width:1180px; margin:0 auto; padding:56px 28px;
  display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:72px; align-items:center;
}
.auth-panel {
  background:#fff; border:1px solid #E1E1E1; border-radius:8px; padding:36px 34px 30px;
  box-shadow:0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.10);
}
.auth-panel-head { text-align:center; margin-bottom:22px; }
.auth-panel-head h1 { margin:0 0 8px; font-size:28px; }
.auth-panel-head p { margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }
/* The form's own card melts into the panel: no second box, no repeated title. */
.auth-panel .card { border:0; box-shadow:none; background:transparent; max-width:none !important; margin:0; }
.auth-panel .card-h { display:none; }
.auth-panel .card-b, .auth-panel .card-f { padding-left:0; padding-right:0; }
.auth-panel .card-f { background:transparent; border-top:0; flex-direction:column; align-items:stretch; gap:8px; }
.auth-panel .card-f .btn:not(.ghost) { width:100%; justify-content:center; min-height:46px; }
.auth-panel .card-f .btn.ghost { border:0; background:transparent; justify-content:center; }
.auth-panel .card-f .btn.ghost:hover { text-decoration:underline; text-underline-offset:3px; }
.auth-aside-h { margin:0 0 18px; font-size:clamp(40px, 5vw, 64px); font-weight:800; line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; color:#0E1726; }
.auth-aside-sub { margin:0; max-width:34ch; font-size:18px; line-height:1.5; color:var(--ink-2); }
@media (max-width:900px){
  .auth-stage { align-items:flex-start; min-height:calc(100vh - 56px); }
  .auth-stage-inner { grid-template-columns:minmax(0,1fr); padding:24px 16px 40px; }
  .auth-aside { display:none; }
  .auth-panel { padding:26px 20px 22px; }
}

/* =====================================================================
   PHONE PASS (2026-11-05). Every rule below is phone-only, inside a
   max-width query, except the two "hidden on desktop" defaults that keep
   phone-only elements out of the wider layouts. Desktop is unchanged.
   ===================================================================== */
.nav-docs-m, .pool-picked-m { display:none; }

@media (max-width:700px){
  /* Public top bar: two rows instead of three. Row one is the brand and the
     account buttons; row two is Verify, Registry and Docs. */
  .appbar .wrap {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand auth" "nav nav";
    row-gap:2px; column-gap:10px; padding:10px 16px 4px; min-height:0; height:auto;
  }
  .appbar .brand { grid-area:brand; width:auto; min-width:0; gap:3px; }
  .appbar .brand .mark { min-height:0; }
  .appbar .brand .tag { font-size:9.5px; letter-spacing:.14em; white-space:nowrap; }
  .appbar .spacer { display:none; }
  .appbar .authbox { grid-area:auth; flex-basis:auto; width:auto; order:0; justify-content:flex-end; gap:8px; }
  .appbar .authbox .btn, .appbar .authbox .btn.sm { min-height:40px; padding:0 16px; }
  .appbar a.authbox-docs { display:none; }
  .appbar .mainnav { grid-area:nav; order:0; width:auto; display:flex; gap:2px; margin:0 -10px; }
  .appbar .mainnav a { min-height:40px; padding:0 10px; }
  .appbar .mainnav .nav-docs-m { display:inline-flex; align-items:center; gap:4px; }
  .appbar-access .wrap { justify-content:normal; }
  .appbar-access .brand { justify-content:flex-start; }
  .appbar-access .mainnav { justify-content:flex-start; }

  /* A workspace's page column never grows past the screen: a wide child
     scrolls inside itself instead of pushing the top bar's buttons off. */
  .shell-main { min-width:0; }

  /* Register: the two-way pool choice spans the card, one line per option. */
  .pool-pick { display:flex; width:100%; }
  .pool-pick button { flex:1 1 0; padding:9px 8px; font-size:14px; white-space:nowrap; }
  .pool-picked-m { display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--ink-2); overflow-wrap:anywhere; }
  /* Register tools: sample tape across the top, Add row and Upload side by
     side, Review across the bottom. Was four full-width rows. */
  .btnrow.reg-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .btnrow.reg-actions > .btn { width:100%; justify-content:center; }
  .btnrow.reg-actions > .btn:not(.text) { grid-column:1 / -1; }
  .btnrow.reg-actions > div[style] { display:none; }

  /* Stacked records: a long text value (a description, a verdict) goes under
     its label, left-aligned, rather than squeezed into a right-hand column. */
  table.data.stack td.stack-prose { display:block; text-align:left; }
  table.data.stack td.stack-prose::before { display:block; margin-bottom:2px; }
  table.data.stack td.stack-hide { display:none; }
  /* A value that names itself (a Download link): no label beside it. */
  table.data.stack td.stack-nolabel { justify-content:flex-start; padding-top:8px; }
  table.data.stack td.stack-nolabel::before { content:none; }

  /* A pool's loans (funder): one tight line per loan, not a 560px table. */
  .tablewrap table.data.loans-compact { min-width:0; }
  table.data.loans-compact thead { display:none; }
  table.data.loans-compact td { padding:10px 12px; }
  table.data.loans-compact td.tid { font-size:12.5px; }
  table.data.loans-compact td:last-child { text-align:right; width:1%; }
  table.data.loans-compact td:last-child .exlink { font-size:0; }
  table.data.loans-compact td:last-child .exlink-icon { width:18px; height:18px; margin:0; }

  /* Servicer confirmations: Loan ID, date and the tick box. Every row is
     unconfirmed, so the status column says nothing on a small screen. */
  .tablewrap table.data.svc-confirm { min-width:0; }
  table.data.svc-confirm th:nth-child(2), table.data.svc-confirm td:nth-child(2),
  table.data.svc-confirm th:nth-child(4), table.data.svc-confirm td:nth-child(4) { display:none; }
  table.data.svc-confirm td, table.data.svc-confirm th { padding:10px 10px; }
}

@media (max-width:560px){
  /* Verify: the Upload a list button drops under the Loan ID inside the same
     box, so the example ID in the field is not cut short. */
  .inputrow.inbox { flex-wrap:wrap; padding:0; gap:0; }
  .inputrow.inbox input { flex:1 1 100%; }
  .inputrow.inbox .btn.inbox-btn { width:100%; justify-content:flex-start; border-top:1px solid var(--line); border-radius:0; padding:10px 12px; }
}

@media (max-width:640px){
  /* Docs tables: each row a small stacked card, every value under its
     column's name (lib/docs.ts adds the names as data-label). */
  .docs-tablewrap { border:0; background:transparent; overflow:visible; }
  .docs-body table, .docs-body tbody, .docs-body tr, .docs-body td { display:block; width:100%; }
  .docs-body thead { display:none; }
  .docs-body tr { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:10px 14px; margin:0 0 10px; }
  .docs-body td { border:0; padding:4px 0; }
  /* The row's first value is its title (a step number, a request). */
  .docs-body td:first-child { font-weight:600; }
  .docs-body td[data-label]::before {
    content:attr(data-label); display:block; margin-bottom:1px;
    font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500);
  }
}