/* ============================================================
   REAL+ — "Fortress Garden" design system (v2)
   Trust through restraint. A bright, spacious canopy of teal and
   ivory where midnight-navy anchors signal weight; ONE chromatic
   decision color (forest teal) for every filled action; soft
   pastels for decoration only; 20–34px rounding for a protected
   feel; diffuse, center-anchored shadows; tracked uppercase labels.
   Fonts: Fraunces (display ≥18px only) · Inter (UI) · IBM Plex Mono (money)
   Theme: data-theme="light|dark" on <html>. Tokens only — no raw hex
   in modules. All legacy semantic tokens preserved (mapped to v2).
   ============================================================ */

:root, html[data-theme="light"] {
  /* surfaces — Heritage warm ivory */
  --bg: #F7F5F0;            /* Warm Ivory */
  --bg2: #EFEBE1;
  --card: #FFFFFF;          /* Pure White */
  --card2: #FAF8F3;
  --line: #E6E1D6;          /* warm hairline */
  --line2: #CDC6B6;
  /* ink */
  --ink: #12233D;           /* Heritage Navy */
  --mut: #58637A;           /* slate body — AA on ivory & bg2 */
  --faint: #4C5870;         /* AA on pastel washes */
  /* the single chromatic decision color */
  --brand: #12233D;         /* navy anchors: nav-on, tier-premium, structural fills */
  --brand-ink: #FFFFFF;
  --brand-soft: #E8EDF5;
  --ok: #8A6D1A;            /* Heritage Gold (deep) — filled CTAs (white text 4.9:1) */
  --ok-soft: #F2E7C6;       /* Pale Gold wash */
  --ok-deep: #775D13;       /* Deep Gold — text-on-canvas/wash, outlines, focus */
  --gold-vivid: #C9A227;    /* flyer gold — marketing fills ONLY, always with navy ink text */
  --gold-vivid-2: #D4AF37;
  --loc-green: #1E5B3F;     /* flyer location green — fills with white text (7.4:1) */
  /* decorative washes (never for actions) */
  --clay: #9A4A2A;          /* peach-family ink for warm accents */
  --clay-soft: #FFE4D4;     /* Peach Cream */
  --gold: #6E5A16;          /* sand-family ink */
  --gold-soft: #F0EACF;     /* Warm Sand */
  --sea: #17596A;           /* sea-mist ink — AA on Sea Mist */
  --sea-soft: #B7D1D0;      /* Sea Mist */
  --violet: #4F4B7A;
  --violet-soft: #E6E4F2;
  /* status */
  --err: #B0272D;
  --err-soft: #FBE1E2;
  --warn: #7A5A16;
  --warn-soft: #F0EACF;
  /* elevation — diffuse, center-anchored (never directional) */
  --shadow: rgba(0, 0, 0, 0.10) 0px 0px 15px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.12) 0px 0px 32px 0px;
  --shadow-pill: rgba(0, 0, 0, 0.12) 0px 4px 16px 0px;
  /* shape */
  --r-ctl: 10px; --r-card: 24px; --r-card-lg: 34px; --r-pill: 9999px;
  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.2,.9,.3,1.1);
  --t-fast: .16s; --t-med: .28s; --t-slow: .5s;
  --topbar-h: 64px;
  --side-w: 224px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0A1524;
  --bg2: #071020;
  --card: #101F32;
  --card2: #142438;
  --line: #1E3048;
  --line2: #2C405C;
  --ink: #EAF0F7;
  --mut: #A8B4C6;
  --faint: #94A1B5;
  --brand: #E3EAF3;
  --brand-ink: #0A1524;
  --brand-soft: #182C46;
  --ok: #E3C56A;
  --ok-soft: #33290F;
  --ok-deep: #EED9A0;
  --gold-vivid: #E3C56A;
  --gold-vivid-2: #EFD37E;
  --loc-green: #2E7D57;
  --clay: #F0A987;
  --clay-soft: #3A2419;
  --gold: #E3C56A;
  --gold-soft: #33290F;
  --sea: #7FCBD3;
  --sea-soft: #12313A;
  --violet: #B7ADE6;
  --violet-soft: #292244;
  --err: #F08A8E;
  --err-soft: #3D1F20;
  --warn: #E3C56A;
  --warn-soft: #362A13;
  --shadow: rgba(0, 0, 0, 0.45) 0px 0px 15px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.55) 0px 0px 32px 0px;
  --shadow-pill: rgba(0, 0, 0, 0.5) 0px 4px 16px 0px;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 14.5px/1.55 Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg { display: inline-block; vertical-align: middle; max-width: 100%; }
a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ok); outline-offset: 1px; border-color: var(--ok); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--ok); }
label { font-size: 12.5px; font-weight: 600; color: var(--mut); display: block; margin: 10px 0 5px; }
::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
code, .mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

h1,h2,h3,h4,.h1,.h2,.h3 { line-height: 1.22; }
.h1 { font: 600 30px/1.15 Fraunces, serif; letter-spacing: -.015em; }
.h2 { font: 600 22px/1.2 Fraunces, serif; letter-spacing: -.01em; }
.h3 { font: 700 16.5px/1.3 Inter, sans-serif; }
.sm { font-size: 12.5px; } .xs { font-size: 11px; }
.mut { color: var(--mut); } .faint { color: var(--faint); }
.bold { font-weight: 700; } .semi { font-weight: 600; }
.ok-t { color: var(--ok); } .err-t { color: var(--err); } .warn-t { color: var(--warn); }
.gold-t { color: var(--gold); } .clay-t { color: var(--clay); } .sea-t { color: var(--sea); }
.right { text-align: right; } .center { text-align: center; }
.up { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.split-l { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; align-items: start; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap-r { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.gap6 { gap: 6px; } .gap16 { gap: 16px; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb14 { margin-bottom: 14px; }
@media (max-width: 1080px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .split, .split-l { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .wrap { padding: 0 14px; }
}

/* A grid or flex child defaults to min-width:auto, which refuses to shrink below
   the intrinsic width of its content. So a single wide table inside a card keeps
   the card at its natural width, the card overflows its 1fr track, and the whole
   PAGE scrolls sideways on a phone — which also defeats .tbl-wrap, because the
   scroll container itself ends up wider than the screen.

   Letting these containers shrink is what lets the inner overflow-x actually do
   its job: the table scrolls, the page does not. */
.grid2 > *, .grid3 > *, .grid4 > *,
.split > *, .split-l > *, .stack > * { min-width: 0; }
.row > *, .spread > *, .c-head > * { min-width: 0; }
/* a 1fr grid track cannot shrink below its widest child: without this a table inside a grid card
   pushed the whole PAGE sideways on a phone instead of scrolling inside its .tbl-wrap */
.grid2 > *, .grid3 > *, .grid4 > *, .card { min-width: 0; }

/* Same reason, one level down: these are the usual culprits inside a card. */
.tbl-wrap { max-width: 100%; }
textarea, input, select { max-width: 100%; }
.card { overflow-wrap: anywhere; }

/* Buttons, badges and tabs are `white-space: nowrap` so their labels stay on one
   line. On a narrow screen that turns a long label into clipped, unreachable
   content rather than a wrapped one — the page does not scroll, so anything past
   the right edge is simply gone. Below phone width, legibility beats the single
   line: let them wrap, and let .row wrap the way .btn-row already does. */
@media (max-width: 560px) {
  .btn, .badge { white-space: normal; }
  .row { flex-wrap: wrap; }
  .spread { flex-wrap: wrap; }
}

/* Skip link — off-screen until it takes focus, then the first thing you see.
   Kept out of the layout entirely (position:fixed) so it can never nudge the
   topbar, and above every overlay so it is reachable on any screen. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--ok-deep); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: var(--r-ctl); text-decoration: none;
  box-shadow: var(--shadow-lg); transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
#rp-main:focus { outline: none; }

/* ---------- shell chrome ---------- */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar .logo { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.topbar .logo .lg-mark { width: 28px; height: 28px; }
.topbar .logo .lg-name { font: 600 17px Fraunces, serif; letter-spacing: -.01em; }
.topbar .logo .lg-name b { color: var(--ok-deep); font-weight: 700; }
.top-portal {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--ink); font-weight: 700; font-size: 12.5px;
  border: 1px solid var(--line);
}
.top-clock { margin-left: auto; font-size: 11.5px; color: var(--mut); }
.top-ico {
  position: relative; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--mut); border: 1px solid transparent;
}
.top-ico:hover { background: var(--bg2); color: var(--ink); }
.top-ico .dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 99px;
  background: var(--clay); border: 2px solid var(--card);
}
.persona-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.main { flex: 1; display: flex; min-height: 0; }
.side {
  width: var(--side-w); flex: 0 0 auto; padding: 14px 10px; border-right: 1px solid var(--line);
  background: var(--card); position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.side .s-head { padding: 2px 10px 10px; }
.side .s-head .up { color: var(--faint); }
.snav {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; color: var(--mut); font-weight: 600; font-size: 13.5px;
  margin-bottom: 2px;
}
.snav svg { flex: 0 0 auto; opacity: .85; }
.snav:hover { background: var(--bg2); color: var(--ink); }
.snav.on { background: var(--brand); color: var(--brand-ink); }
html[data-theme="dark"] .snav.on { background: var(--brand-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.content { flex: 1; min-width: 0; padding: 20px 22px 60px; }
.content > .screen { max-width: 1180px; margin: 0 auto; }
.pg-head { margin-bottom: 16px; }
.pg-head .h1 { font-size: 26px; }
.pg-head .sub { color: var(--mut); margin-top: 3px; }
@media (max-width: 900px) {
  .side { position: fixed; left: 0; z-index: 55; transform: translateX(-102%); transition: transform .22s; box-shadow: var(--shadow-lg); }
  .side.open { transform: none; }
  .content { padding: 16px 14px 60px; }
}
.burger { display: none; }
@media (max-width: 900px) { .burger { display: grid; } }

/* ---------- cards & stats ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: var(--shadow);
}
.card.pad0 { padding: 0; overflow: hidden; }
.card.flat { box-shadow: none; }
.card.wash { background: var(--card2); }
.c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.c-head .h3 { display: flex; align-items: center; gap: 8px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); }
.stat .s-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.stat .s-v { font: 600 23px/1.15 Fraunces, serif; margin-top: 4px; }
.stat .s-v.num { font: 600 21px/1.2 "IBM Plex Mono", monospace; letter-spacing: -.03em; }
.stat .s-s { font-size: 11.5px; color: var(--mut); margin-top: 3px; }
.stat.tone-ok { border-left: 3px solid var(--ok); }
.stat.tone-err { border-left: 3px solid var(--err); }
.stat.tone-warn { border-left: 3px solid var(--warn); }
.stat.tone-gold { border-left: 3px solid var(--gold); }
.stat.tone-sea { border-left: 3px solid var(--sea); }
.stat.tone-clay { border-left: 3px solid var(--clay); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; font-weight: 700; font-size: 13px;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink);
  transition: transform .05s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
html[data-theme="dark"] .btn.pri { background: var(--ok); color: #08130D; border-color: var(--ok); }
.btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
html[data-theme="dark"] .btn.ok { color: #08130D; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--line2)); }
.btn.danger:hover { background: var(--err-soft); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.lg { padding: 12px 22px; font-size: 14.5px; border-radius: 12px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- badges / chips / tiers ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.badge.t-ok { background: var(--ok-soft); color: var(--ok); }
.badge.t-err { background: var(--err-soft); color: var(--err); }
.badge.t-warn { background: var(--warn-soft); color: var(--warn); }
.badge.t-info { background: var(--sea-soft); color: var(--sea); }
.badge.t-gold { background: var(--gold-soft); color: var(--gold); }
.badge.t-clay { background: var(--clay-soft); color: var(--clay); }
.badge.t-violet { background: var(--violet-soft); color: var(--violet); }
.badge.t-mute { background: var(--bg2); color: var(--mut); }
.badge.t-brand { background: var(--brand); color: var(--brand-ink); }
html[data-theme="dark"] .badge.t-brand { background: var(--brand-soft); color: var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
html[data-theme="dark"] .chip.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.tier { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.tier-basic { background: var(--bg2); color: var(--mut); }
.tier-verified { background: var(--ok-soft); color: var(--ok); }
.tier-premium { background: var(--brand); color: var(--brand-ink); }
html[data-theme="dark"] .tier-premium { background: var(--ok); color: #08130D; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line2);
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--card2); }
.tbl .num, .tbl td.r { text-align: right; }
.tbl-wrap { overflow-x: auto; }
/* .card sets overflow-wrap:anywhere (long refs and emails must not push a card wide). Inside a table that
   lets the column minimum collapse to one letter, so a narrow card broke headers mid-word ("PROPE RTY")
   instead of scrolling. Tables wrap at words; .tbl-wrap scrolls when they still do not fit. */
.card .tbl { overflow-wrap: normal; }
/* the wrapper must be the containing block: an absolutely positioned .sr-only label in the last header
   ("Actions") otherwise escapes the overflow clip and stretches the whole page to the table's width */
.tbl-wrap { position: relative; }
/* a badge beside a title may wrap at any width when the card is narrow (half-width cards on a tablet):
   nowrap pushed "London to Lagos in minutes" 54px out of its card */
.spread > .badge, .c-head .badge { white-space: normal; text-align: right; }
.tbl th { white-space: nowrap; }
.rowlink { cursor: pointer; }

/* ---------- kv ---------- */
.kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0; font-size: 13px; }
.kv > div { padding: 7px 2px; border-bottom: 1px dashed var(--line); }
.kv > div:nth-child(odd) { color: var(--mut); font-weight: 600; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line2); margin-bottom: 14px; overflow-x: auto; }
.tab {
  padding: 9px 14px; font-weight: 700; font-size: 13px; color: var(--mut);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ok); }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line2); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item:last-child { padding-bottom: 2px; }
.tl-item::before {
  content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 99px;
  background: var(--card); border: 3px solid var(--faint);
}
.tl-item.ok::before { border-color: var(--ok); background: var(--ok); }
.tl-item.warn::before { border-color: var(--warn); }
.tl-item.err::before { border-color: var(--err); }
.tl-item.now::before { border-color: var(--ok); }
.tl-item .tl-t { font-weight: 700; font-size: 13px; }
.tl-item .tl-s { color: var(--mut); font-size: 12px; margin-top: 1px; }
.tl-item .tl-when { color: var(--faint); font-size: 11px; margin-top: 2px; }

/* ---------- progress / gauge ---------- */
.prog { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width .4s; }
.prog.warn > i { background: var(--warn); } .prog.err > i { background: var(--err); }
.prog.gold > i { background: var(--gold); } .prog.sea > i { background: var(--sea); }
.prog.clay > i { background: var(--clay); }

/* ---------- avatar ---------- */
.avatar {
  width: 32px; height: 32px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--brand-ink); background: var(--brand); flex: 0 0 auto;
}
html[data-theme="dark"] .avatar { background: var(--brand-soft); color: var(--ink); border: 1px solid var(--line2); }
.avatar.lg { width: 46px; height: 46px; font-size: 15px; }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 34px 18px; color: var(--mut); }
/* a11y: opacity .5 composited var(--mut) down to 2.06:1 on --bg (2.98:1 on the
   dark theme) — under the 3.0 large-text floor. .85 -> 3.91:1 light / 6.34:1 dark. */
.empty .e-ico { font-size: 30px; opacity: .85; margin-bottom: 8px; }
.empty .e-t { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.empty .e-s { font-size: 12.5px; margin-top: 3px; }

/* ---------- toast ---------- */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  padding: 11px 18px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: 13px; box-shadow: var(--shadow-lg); max-width: min(92vw, 520px);
  display: flex; gap: 9px; align-items: center; animation: t-in .25s cubic-bezier(.2,.9,.3,1.2);
}
.toast .t-dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; }
.toast.ok .t-dot { background: var(--ok); } .toast.err .t-dot { background: var(--err); }
.toast.warn .t-dot { background: var(--warn); } .toast.info .t-dot { background: var(--sea); }
@keyframes t-in { from { opacity: 0; transform: translateY(12px); } }
.toast.out { animation: t-out .3s forwards; }
@keyframes t-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- modal / sheet / drawer ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(15,22,19,.45);
  display: grid; place-items: center; padding: 20px; animation: o-in .18s;
  backdrop-filter: blur(3px);
}
@keyframes o-in { from { opacity: 0; } }
.modal {
  width: min(620px, 96vw); max-height: 88vh; overflow-y: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: m-in .22s cubic-bezier(.2,.9,.3,1.1);
}
.modal.lg { width: min(880px, 96vw); }
.modal.sm { width: min(440px, 96vw); }
@keyframes m-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 2; border-radius: 16px 16px 0 0; }
.m-head .h3 { font-size: 15.5px; }
.m-x { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--mut); font-size: 17px; }
.m-x:hover { background: var(--bg2); color: var(--ink); }
.m-body { padding: 16px 18px; }
.m-foot { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--card); border-radius: 0 0 16px 16px; }
.overlay.sheet-ov { place-items: end center; padding: 0; }
.sheet {
  width: min(430px, 100vw); max-height: 86vh; overflow-y: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg);
  animation: s-in .25s cubic-bezier(.2,.9,.3,1.05); padding-bottom: 8px;
}
@keyframes s-in { from { transform: translateY(60%); opacity: .4; } }
.sheet .grab { width: 42px; height: 4px; border-radius: 99px; background: var(--line2); margin: 9px auto 2px; }
.drawer-ov { place-items: stretch end; padding: 0; }
.drawer { width: min(460px, 94vw); height: 100vh; overflow-y: auto; background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: d-in .22s; }
@keyframes d-in { from { transform: translateX(40px); opacity: .5; } }

/* ---------- wizard ---------- */
.wiz-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.wiz-steps .ws { flex: 1; height: 5px; border-radius: 99px; background: var(--bg2); }
.wiz-steps .ws.done { background: var(--ok); }
.wiz-steps .ws.now { background: var(--brand); }
html[data-theme="dark"] .wiz-steps .ws.now { background: var(--ok); opacity: .6; }

/* ---------- score ring / gauge ---------- */
.gauge-wrap { display: flex; align-items: center; gap: 14px; }
.factor { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12.5px; }
.factor .f-l { flex: 0 0 44%; color: var(--mut); font-weight: 600; }
.factor .prog { flex: 1; }
.factor .f-v { flex: 0 0 34px; text-align: right; font-weight: 700; }

/* ---------- phone frame ---------- */
.phone-stage { display: grid; place-items: start center; padding: 26px 12px 60px; }
.phone {
  width: 390px; max-width: 100vw; height: 780px; max-height: calc(100vh - 130px);
  background: var(--bg); border-radius: 38px; border: 1px solid var(--line2);
  box-shadow: var(--shadow-lg), 0 0 0 9px var(--ink), 0 0 0 10.5px var(--line2);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
@media (max-width: 500px) {
  .phone-stage { padding: 0; }
  .phone { width: 100vw; height: calc(100vh - var(--topbar-h)); max-height: none; border-radius: 0; box-shadow: none; border: 0; }
}
.ph-status {
  height: 34px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; font-size: 11.5px; font-weight: 700; flex: 0 0 auto;
}
.ph-head { padding: 4px 18px 12px; flex: 0 0 auto; }
.ph-body { flex: 1; overflow-y: auto; padding: 2px 14px 18px; -webkit-overflow-scrolling: touch; }
.ph-tabs {
  flex: 0 0 auto; display: flex; border-top: 1px solid var(--line);
  background: var(--card); padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 6px));
}
.ph-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; font-size: 10px; font-weight: 700; color: var(--faint); border-radius: 10px; }
.ph-tab.on { color: var(--ok); }
.ph-tab svg { width: 21px; height: 21px; }
.ph-hero {
  margin: 4px 0 12px; padding: 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #0E3123, #17503A 60%, #1B6743);
  box-shadow: var(--shadow);
}
.ph-hero .mut, .ph-hero .faint { color: rgba(255,255,255,.78); }

/* ---------- landing ---------- */
.land-hero {
  position: relative; overflow: hidden; color: #F3F7F1;
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(69,192,138,.22), transparent 60%),
    radial-gradient(700px 420px at 12% 110%, rgba(180,85,45,.25), transparent 55%),
    linear-gradient(160deg, #0A1524 0%, #12233D 55%, #1A2E4C 100%);
  /* a11y: declare the opaque base under the layered gradient. The bottom
     linear layer already paints it (so this is pixel-identical), but the
     `transparent` stops of the two radial layers above otherwise read as
     "reveals the page paper" — scoring #F3F7F1 at 1.03:1 against #F5F2EA
     instead of the 9.86:1 the screen actually renders. */
  background-color: #12233D;
  border-bottom: 1px solid var(--line);
}
.land-hero .wrap { padding: 74px 22px 66px; position: relative; z-index: 2; }
.land-hero .k-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.land-hero h1 { font: 600 52px/1.08 Fraunces, serif; letter-spacing: -.02em; margin: 22px 0 14px; max-width: 820px; }
.land-hero h1 em { font-style: italic; color: #7ADBAA; }
.land-hero .lede { font-size: 17px; color: rgba(243,247,241,.82); max-width: 640px; line-height: 1.6; }
.land-grid-bg { position: absolute; inset: 0; opacity: .5; z-index: 1; pointer-events: none; }
@media (max-width: 720px) { .land-hero h1 { font-size: 34px; } .land-hero .wrap { padding: 46px 16px 42px; } }
.land-sec { padding: 54px 0; }
.land-sec.alt { background: var(--card); border-block: 1px solid var(--line); }
.sec-eyebrow { color: var(--clay); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; }
.sec-title { font: 600 32px/1.15 Fraunces, serif; letter-spacing: -.015em; margin: 8px 0 10px; }
.sec-lede { color: var(--mut); max-width: 640px; font-size: 15px; }
.mod-card { position: relative; transition: transform .18s, box-shadow .18s; cursor: pointer; overflow: hidden; }
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mod-card .m-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 11px; }
.portal-card { display: flex; gap: 12px; align-items: center; padding: 13px 15px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.portal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.portal-card .p-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); background: var(--card); padding: 11px 0; }
.marquee .mq-track { display: inline-block; animation: mq 40s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
html.rmotion .marquee .mq-track { animation: none; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-item { display: inline-flex; align-items: center; gap: 8px; margin: 0 26px; color: var(--mut); font-weight: 700; font-size: 12.5px; }

/* ---------- listing cards / prop art ---------- */
.list-card { overflow: hidden; padding: 0; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.list-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* a11y — these were scoped to .list-card, but .st-card reuses the same
   .lc-art/.lc-price markup, so its prices rendered as bare #fff over the
   listing photo (54 hits at 1.00 against the card behind it). The dark chip
   IS the legibility mechanism, so every .lc-art variant has to get it. */
.lc-art { position: relative; }
.lc-art .tier { position: absolute; top: 10px; left: 10px; }
.lc-art .lc-price { position: absolute; bottom: 10px; left: 10px; background: rgba(13,26,20,.78); color: #fff; padding: 4px 11px; border-radius: 9px; font-weight: 700; backdrop-filter: blur(3px); }
.list-card .lc-body { padding: 12px 14px 14px; }

/* ---------- map ---------- */
.map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); position: relative; background: #DDE8DF; }
html[data-theme="dark"] .map-wrap { background: #14231C; }
.map-pin { cursor: pointer; }
.map-pin:hover circle:last-of-type { r: 7; }

/* ---------- chat (WhatsApp-ish) ---------- */
.chat-scroll { display: flex; flex-direction: column; gap: 7px; padding: 10px 4px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow); position: relative; white-space: pre-wrap; word-break: break-word; }
.bubble.me { align-self: flex-end; background: #D7F2E3; color: #10241B; border-bottom-right-radius: 4px; }
html[data-theme="dark"] .bubble.me { background: #1E4D37; color: #E7F5EC; }
.bubble.them { align-self: flex-start; background: var(--card); border-bottom-left-radius: 4px; }
.bubble .b-when { display: block; font-size: 9.5px; color: var(--faint); text-align: right; margin-top: 3px; }
.bubble.me .b-when { color: #3E6B53; }
html[data-theme="dark"] .bubble.me .b-when { color: #A9D8BC; }
.bubble.sys { align-self: center; background: var(--gold-soft); color: var(--gold); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: none; }
.chat-input { display: flex; gap: 8px; padding: 8px 0 0; }
.chat-input input { border-radius: 999px; }

/* ---------- ussd ---------- */
.ussd-screen { background: #0E1A13; color: #C9E8CF; font-family: "IBM Plex Mono", monospace; font-size: 13px; border-radius: 12px; padding: 16px; min-height: 210px; white-space: pre-wrap; border: 1px solid var(--line2); }

/* ---------- receipt ---------- */
.rcpt { font-size: 12.5px; }
.rcpt .rc-head { text-align: center; padding: 6px 0 12px; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.rcpt .rc-head .h2 { font-size: 18px; }
.rcpt .rc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.rcpt .rc-row.big { font-size: 16px; font-weight: 800; border-bottom: 2px solid var(--ink); padding: 9px 0; }
.rcpt .rc-qr { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.rcpt .rc-qrn { font-size: 10.5px; color: var(--mut); }
.rcpt .rc-legal { font-size: 10px; color: var(--faint); margin-top: 10px; line-height: 1.5; }

/* ---------- fraud graph ---------- */
.fgraph { background: var(--card2); border-radius: 14px; border: 1px solid var(--line); }
.fnode { cursor: pointer; }
.fnode text { font-size: 9.5px; font-weight: 700; fill: var(--ink); }

/* ---------- doc paper ---------- */
.docpaper {
  background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 26px 30px;
  font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; line-height: 1.7; box-shadow: var(--shadow);
  max-height: 60vh; overflow-y: auto;
}
.docpaper h3 { text-align: center; font-size: 15px; letter-spacing: .04em; margin-bottom: 14px; text-transform: uppercase; }
.docpaper .sig { margin-top: 26px; display: flex; justify-content: space-between; gap: 20px; }
.docpaper .sigline { border-top: 1px solid var(--ink); padding-top: 4px; font-size: 11px; width: 42%; }
.stampline { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--mut); background: var(--bg2); border-radius: 8px; padding: 7px 10px; word-break: break-all; }

/* ---------- misc ---------- */
.searchbar { display: flex; gap: 8px; align-items: center; }
.searchbar input { border-radius: 999px; padding-left: 38px; }
.searchbar .s-ico { position: absolute; margin-left: 13px; color: var(--faint); pointer-events: none; }
.kbd { font: 600 10.5px "IBM Plex Mono", monospace; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--mut); background: var(--card); }
.divider-v { width: 1px; align-self: stretch; background: var(--line); }
.scroll-x { overflow-x: auto; display: flex; gap: 10px; padding-bottom: 6px; scrollbar-width: thin; }
.notif-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.notif-item:hover { background: var(--card2); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 11px; }
.cal .cal-d { aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center; background: var(--bg2); position: relative; font-weight: 600; }
.cal .cal-h { aspect-ratio: auto; padding: 3px 0; background: none; color: var(--faint); font-weight: 800; font-size: 9.5px; text-transform: uppercase; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mut); }
.legend .lg-i { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.legend .lg-dot { width: 9px; height: 9px; border-radius: 3px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.fade-in { animation: fade .3s; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.copilot-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 18px;
  background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .15s;
}
html[data-theme="dark"] .copilot-fab { background: var(--ok); color: #08130D; }
.copilot-fab:hover { transform: scale(1.06); }
.copilot-panel {
  position: fixed; right: 20px; bottom: 82px; z-index: 95; width: min(390px, calc(100vw - 30px));
  height: min(560px, calc(100vh - 120px)); background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  animation: m-in .2s;
}
.copilot-panel .cp-head { padding: 12px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; background: var(--brand); color: var(--brand-ink); }
html[data-theme="dark"] .copilot-panel .cp-head { background: var(--card2); color: var(--ink); }
.copilot-panel .cp-body { flex: 1; overflow-y: auto; padding: 12px; }
.copilot-panel .cp-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.suggest-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* ---------- boot splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(201,162,39,.16), transparent 60%),
    radial-gradient(620px 380px at 14% 108%, rgba(180,85,45,.18), transparent 55%),
    linear-gradient(160deg, #0A1524 0%, #12233D 55%, #1A2E4C 100%);
  background-color: #12233D;   /* a11y: same opaque base as .land-hero — see note there */
  transition: opacity .45s, visibility .45s;
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-inner { text-align: center; color: #F3F7F1; animation: sp-in .6s cubic-bezier(.2,.9,.3,1.1); }
@keyframes sp-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.sp-mark { filter: drop-shadow(0 14px 34px rgba(0,0,0,.35)); animation: sp-float 3.2s ease-in-out infinite; }
@keyframes sp-float { 50% { transform: translateY(-6px); } }
.sp-seal { transform-origin: 35px 13px; animation: sp-pulse 2.2s ease-in-out infinite; }
@keyframes sp-pulse { 50% { transform: scale(1.14); } }
.sp-name { font: 600 27px Fraunces, serif; margin-top: 14px; letter-spacing: -.01em; }
.sp-name b { color: #7ADBAA; }
/* a11y: .55 alpha composited to 3.74:1 against the splash's brightest gradient
   stop, 4.54:1 dead centre (12px needs 4.5); .70 -> 5.02:1 / 6.34:1. */
.sp-tag { font: 600 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,247,241,.70); margin-top: 5px; }
.sp-bar { width: 230px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.14); margin: 22px auto 10px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 8%; border-radius: 99px; background: linear-gradient(90deg, #45C08A, #7ADBAA); transition: width .5s cubic-bezier(.2,.9,.3,1); }
.sp-msg { font: 600 12px Inter, sans-serif; color: rgba(243,247,241,.75); min-height: 17px; }


/* ============================================================
   v2 OVERRIDE LAYER — "Fortress Garden": shape, elevation, motion
   (cascade-wins on top of the base component rules above)
   ============================================================ */

/* ---- type: tracked institutional labels, restrained scale ---- */
.up { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 600; }
.stat .s-l, .tbl th { letter-spacing: .12em; font-weight: 600; }
.h1 { font: 500 30px/1.15 Fraunces, "Source Serif Pro", serif; letter-spacing: -.016em; }
.h2 { font: 500 22px/1.25 Fraunces, "Source Serif Pro", serif; letter-spacing: -.012em; }
.h3 { font: 600 16px/1.35 Inter, sans-serif; letter-spacing: -.005em; }
body { font-size: 15px; line-height: 1.55; }
.sm { font-size: 13.5px; line-height: 1.6; } .xs { font-size: 12px; }

/* ---- shape + elevation ---- */
.card, .stat { border-radius: var(--r-card); box-shadow: var(--shadow); border-color: var(--line); }
.card { padding: 20px; }
.card:has(> .c-head):hover, .stat:hover { box-shadow: var(--shadow-lg); }
.card.flat { box-shadow: none; }
.modal { border-radius: var(--r-card-lg); box-shadow: var(--shadow-lg); }
.m-head { border-radius: var(--r-card-lg) var(--r-card-lg) 0 0; }
.m-foot { border-radius: 0 0 var(--r-card-lg) var(--r-card-lg); }
.sheet { border-radius: var(--r-card-lg) var(--r-card-lg) 0 0; }
.drawer { border-radius: var(--r-card-lg) 0 0 var(--r-card-lg); }
.phone { border-radius: 44px; }
.map-wrap, .map-real, .ph-hero, .docpaper, .ussd-screen, .fgraph, .list-card { border-radius: var(--r-card); }
input, select, textarea { border-radius: var(--r-ctl); padding: 11px 14px; border-color: var(--line2); background: var(--card); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ok-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
:focus-visible { outline: 2px solid var(--ok-deep); outline-offset: 2px; }

/* ---- buttons: ONE chromatic action color; pill CTAs; arrow affordance ---- */
.btn { border-radius: var(--r-ctl); font-weight: 600; font-size: 14px; padding: 10px 18px; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn:hover { box-shadow: var(--shadow-pill); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.pri, .btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
html[data-theme="dark"] .btn.pri, html[data-theme="dark"] .btn.ok { background: var(--ok); color: #221A05; border-color: var(--ok); }
.btn.pri:hover, .btn.ok:hover { background: color-mix(in srgb, var(--ok) 88%, #000); }
.btn.ghost { background: var(--card); border-color: var(--ok); color: var(--ink); }
.btn.ghost:hover { background: var(--ok-soft); }
.btn.danger { border-color: color-mix(in srgb, var(--err) 55%, var(--line2)); }
.btn.lg { border-radius: var(--r-pill); padding: 14px 32px; font-size: 15px; }
.btn.lg.pri::after, .btn.pri.arrow::after { content: "→"; margin-left: 2px; transition: transform var(--t-fast) var(--ease); display: inline-block; }
.btn.lg.pri:hover::after, .btn.pri.arrow:hover::after { transform: translateX(3px); }
.btn.sm { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; }
.btn.wide.pri { border-radius: 12px; }

/* ---- chips / badges / tiers ---- */
.badge { border-radius: var(--r-pill); font-weight: 600; letter-spacing: .02em; padding: 3px 10px; }
.chip { border-radius: var(--r-pill); font-weight: 600; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--ok-deep); }
.chip.on { background: var(--ok); border-color: var(--ok); color: #fff; }
html[data-theme="dark"] .chip.on { background: var(--ok); color: #221A05; }
.tier { border-radius: var(--r-pill); }
.tier-verified { background: var(--ok-soft); color: var(--ok-deep); }
.tier-premium { background: var(--brand); color: var(--brand-ink); }
html[data-theme="dark"] .tier-premium { background: var(--ok); color: #221A05; }
.badge.t-ok { color: var(--ok-deep); }
html[data-theme="dark"] .badge.t-ok { color: var(--ok); }
.badge.t-info { background: var(--sea-soft); color: var(--sea); }

/* ---- shell chrome ---- */
.topbar { height: var(--topbar-h); background: color-mix(in srgb, var(--card) 92%, transparent); border-bottom: 1px solid var(--line); }
.topbar .logo .lg-name { font: 600 18px Fraunces, serif; }
.top-portal { border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line2); transition: border-color var(--t-fast) var(--ease); }
.top-portal:hover { border-color: var(--ok-deep); }
.top-ico { border-radius: 12px; }
.persona-chip { border-radius: var(--r-pill); }
.snav { border-radius: 12px; font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.snav:hover { transform: translateX(2px); }
.snav.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
html[data-theme="dark"] .snav.on { background: var(--brand-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
/* Only on a real route change -- see js/motion.js. Without the attribute
   guard this re-fired on every in-place re-render. */
.content > .screen[data-nav] { animation: screen-in var(--t-slow) var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- staggered reveal for grids of cards/stats ---- */
.screen[data-nav] .grid2 > *, .screen[data-nav] .grid3 > *, .screen[data-nav] .grid4 > *,
.ph-body[data-nav] .grid2 > *, .ph-body[data-nav] .grid3 > *, .ph-body[data-nav] .grid4 > * { animation: rise var(--t-slow) var(--ease) both; }
.grid2 > *:nth-child(1), .grid3 > *:nth-child(1), .grid4 > *:nth-child(1) { animation-delay: .02s; }
.grid2 > *:nth-child(2), .grid3 > *:nth-child(2), .grid4 > *:nth-child(2) { animation-delay: .07s; }
.grid3 > *:nth-child(3), .grid4 > *:nth-child(3) { animation-delay: .12s; }
.grid4 > *:nth-child(4) { animation-delay: .17s; }
.grid3 > *:nth-child(n+4), .grid4 > *:nth-child(n+5), .grid2 > *:nth-child(n+3) { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- interactive cards ---- */
.list-card, .mod-card, .portal-card { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.list-card:hover, .mod-card:hover, .portal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.list-card .lc-price { border-radius: 10px; background: rgba(0,29,47,.82); }
.portal-card .p-ico, .mod-card .m-ico { border-radius: 16px; }
.rowlink { transition: background var(--t-fast) var(--ease); }

/* ---- progress bars animate ---- */
.prog > i { transition: width .7s var(--ease); }
.prog { border-radius: var(--r-pill); }

/* ---- tabs ---- */
.tab { transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tab.on { border-bottom-color: var(--ok); }

/* ---- toast: pill, diffuse ---- */
.toast { border-radius: var(--r-pill); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); padding: 12px 20px; }
html[data-theme="dark"] .toast { background: #EAF2F5; color: #0A1620; }

/* ---- overlays ---- */
.overlay { background: rgba(0,29,47,.42); backdrop-filter: blur(4px); }
.modal, .sheet, .drawer { animation-timing-function: var(--ease-spring); }

/* ---- phone frame chrome ---- */
.ph-hero { background: linear-gradient(135deg, #12233D, #1E3253 60%, #8A6D1A 145%); border-radius: var(--r-card); position: relative; overflow: hidden; }
/* optional cinematic photo layer inside a phone hero */
.ph-hero > .phh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
.ph-hero > .phh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,21,36,.88) 0%, rgba(10,21,36,.7) 55%, rgba(10,21,36,.92) 100%); }
.ph-hero > *:not(.phh-img):not(.phh-shade) { position: relative; z-index: 2; }
html.rmotion .ph-hero > .phh-img { animation: none; }
@media (prefers-reduced-motion: reduce) { .ph-hero > .phh-img { animation: none; } }
.ph-tab.on { color: var(--ok-deep); }
html[data-theme="dark"] .ph-tab.on { color: var(--ok); }

/* ---- landing: bright canopy, navy anchors, single teal ---- */
.land-hero {
  color: var(--ink);
  background:
    radial-gradient(900px 480px at 82% -10%, color-mix(in srgb, var(--ok-soft) 70%, transparent), transparent 62%),
    radial-gradient(700px 420px at 8% 110%, color-mix(in srgb, var(--clay-soft) 75%, transparent), transparent 58%),
    var(--card);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .land-hero { background: radial-gradient(900px 480px at 82% -10%, rgba(63,191,158,.14), transparent 62%), var(--card); }
.land-hero .k-eyebrow { background: var(--card); border: 1px solid var(--line2); color: var(--ok-deep); border-radius: var(--r-pill); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; box-shadow: var(--shadow-pill); }
.land-hero h1 { font: 500 64px/1.09 Fraunces, "Source Serif Pro", serif; letter-spacing: -.016em; color: var(--ink); }
.land-hero h1 em { font-style: italic; color: var(--ok); }
.land-hero .lede { font-size: 20px; color: var(--mut); line-height: 1.5; }
.land-grid-bg { opacity: .35; }
@media (max-width: 720px) { .land-hero h1 { font-size: 38px; } .land-hero .lede { font-size: 17px; } }
.land-hero .btn.lg { box-shadow: var(--shadow-pill); }
.land-hero .btn.lg.ghost { color: var(--ink) !important; border-color: var(--ok) !important; background: var(--card) !important; }
.land-hero .btn.lg:not(.ghost) { background: var(--ok) !important; color: #fff !important; border-color: var(--ok) !important; }
.land-hero .hero-stat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); color: var(--ink); }
.land-hero .hero-stat .num { color: var(--ink); }
.land-hero .hero-stat .xs { color: var(--mut) !important; }
.sec-eyebrow { color: var(--ok-deep); letter-spacing: .14em; font-size: 11px; font-weight: 600; }
.sec-title { font: 500 40px/1.15 Fraunces, "Source Serif Pro", serif; letter-spacing: -.016em; }
@media (max-width: 720px) { .sec-title { font-size: 28px; } }
.marquee { background: var(--bg2); border-color: var(--line); }
.mq-item { color: var(--mut); letter-spacing: .04em; font-size: 12px; }
.mod-card .m-ico.badge.t-ok { background: var(--ok-soft); }
.mod-card .m-ico.badge.t-sea { background: var(--sea-soft); }
.mod-card .m-ico.badge.t-clay { background: var(--clay-soft); }
.mod-card .m-ico.badge.t-gold { background: var(--gold-soft); }
.land-sec.alt { background: var(--card); }

/* ---- copilot ---- */
.copilot-fab { border-radius: 22px; background: var(--ok); color: #fff; box-shadow: var(--shadow-lg); }
.copilot-fab:hover { transform: translateY(-2px) scale(1.04); }
.copilot-panel { border-radius: var(--r-card-lg); }
.copilot-panel .cp-head { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .copilot-panel .cp-head { background: var(--card2); color: var(--ink); }

/* ---- skeleton shimmer for cloud sync placeholders ---- */
.skel { position: relative; overflow: hidden; background: var(--bg2); border-radius: 12px; min-height: 14px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---- splash re-skin: bright canopy, not dark forest ---- */
/* ---------------------------------------------------------------------------
   SPLASH — "Skyline Ledger"
   Ledger bars rise off a ruled baseline and become a city. All vector and
   gradient: nothing downloads, it is crisp at any density, and it paints on the
   first frame rather than waiting for a script or an image.
   Timings are compressed because RPSplash normally dismisses inside a second —
   the mark, the wordmark and most of the skyline are there by ~1.1s.
   --------------------------------------------------------------------------- */
#splash { overflow: hidden; }
/* #splash centres this block, but the skyline and its ledger rule own the
   bottom 38%, so dead-centre put the loading copy right on the rule.
   Lift it into the clear upper field. */
.sp-inner { position: relative; z-index: 6; margin-bottom: 15vh; }
@media (max-height: 560px) { .sp-inner { margin-bottom: 8vh; } }

.sp-sky { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120vmax 52vmax at 50% 96%, rgba(201,162,39,.42), transparent 66%),
    radial-gradient(90vmax 44vmax at 84% 88%, rgba(224,140,86,.20), transparent 62%),
    radial-gradient(80vmax 46vmax at 12% -6%, rgba(15,134,108,.13), transparent 60%),
    linear-gradient(180deg, #FBFAF7 0%, #F7F5F0 46%, #F3EFE4 100%);
  opacity: 0; animation: sp-fade 1.1s var(--ease) forwards; }
@keyframes sp-fade { to { opacity: 1; } }

/* the low sun: wide and soft, never a disc, and low enough that it glows behind
   the city rather than behind the wordmark */
.sp-sun { position: absolute; left: 50%; bottom: 4%; width: 92vmin; height: 62vmin; margin-left: -46vmin; z-index: 1;
  background: radial-gradient(circle, rgba(255,244,214,.95) 0%, rgba(239,211,126,.62) 34%, rgba(201,162,39,.22) 56%, transparent 72%);
  opacity: 0; transform: translateY(26%) scale(.88);
  animation: sp-sunrise 2.2s .15s var(--ease) forwards; }
@keyframes sp-sunrise { to { opacity: 1; transform: none; } }

.sp-city { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(3px, .9vmin, 10px); padding: 0 2vw; }
/* flex-shared rather than a fixed width, or the skyline sits in a narrow island
   in the middle of a wide screen */
.sp-t { position: relative; flex: 1 1 0; min-width: 0; max-width: 74px;
  transform-origin: bottom; transform: scaleY(0); animation: sp-grow .8s var(--ease-spring) forwards; }
@keyframes sp-grow { to { transform: scaleY(1); } }
.sp-tb { position: absolute; inset: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #1B3050 0%, #0A1524 78%); }
/* the windows come on tower by tower, so the city wakes rather than appears */
.sp-tw { position: absolute; inset: 10% 18% 6% 18%; border-radius: 2px; opacity: 0;
  background-image: radial-gradient(rgba(239,211,126,.95) 42%, transparent 46%);
  background-size: 5px 8px; animation: sp-lights 1s var(--ease) forwards; }
@keyframes sp-lights { to { opacity: .72; } }
.sp-ts { position: absolute; left: 50%; bottom: 100%; width: 1.6px; margin-left: -.8px; height: 5vmin;
  background: #0A1524; transform-origin: bottom; transform: scaleY(0); animation: sp-grow .4s var(--ease) forwards; }

/* a soft wash where the city meets the sky — a fixed band drew a visible edge */
.sp-haze { position: absolute; left: 0; right: 0; bottom: 18%; height: 34%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(247,245,240,.16) 34%, rgba(247,245,240,.34) 62%, transparent 100%);
  opacity: 0; animation: sp-fade 1.4s .5s var(--ease) forwards; }
.sp-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(243,239,228,.55) 46%, rgba(241,236,224,.92) 78%, #F1ECE0); }

/* the ledger rule the city stands on */
.sp-base { position: absolute; left: 0; right: 0; bottom: 38%; height: 0; z-index: 5; }
.sp-rule { position: absolute; left: 6vw; right: 6vw; height: 1.4px; background: #12233D; opacity: 0;
  transform: scaleX(0); animation: sp-rule .9s .12s var(--ease) forwards; }
@keyframes sp-rule { to { opacity: .30; transform: scaleX(1); } }
.sp-rt { position: absolute; top: -7px; width: 1.2px; height: 7px; background: #12233D; opacity: 0;
  animation: sp-rt .35s var(--ease) forwards; }
@keyframes sp-rt { to { opacity: .26; } }

/* the mark stamps its seal */
.sp-mark { animation: sp-markin .6s .18s var(--ease-spring) both; }
@keyframes sp-markin { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
.sp-house { fill: #F7F8F9; }
.sp-seal { transform-box: fill-box; transform-origin: center; animation: sp-stamp .5s .62s var(--ease-spring) both; }
@keyframes sp-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-22deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.sp-tick { stroke-dasharray: 13; stroke-dashoffset: 13; animation: sp-draw .3s .92s ease forwards; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }

/* Reduced motion: the scene still composes, it simply does not move. */
html.rmotion .sp-sky, html.rmotion .sp-sun, html.rmotion .sp-haze { opacity: 1; animation: none; transform: none; }
html.rmotion .sp-t, html.rmotion .sp-ts { transform: none; animation: none; }
html.rmotion .sp-tw { opacity: .72; animation: none; }
html.rmotion .sp-rule { opacity: .30; transform: none; animation: none; }
html.rmotion .sp-rt { opacity: .26; animation: none; }
html.rmotion .sp-mark, html.rmotion .sp-seal { opacity: 1; transform: none; animation: none; }
html.rmotion .sp-tick { stroke-dashoffset: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sp-sky, .sp-sun, .sp-haze { opacity: 1 !important; transform: none !important; }
  .sp-t, .sp-ts { transform: none !important; }
  .sp-tw { opacity: .72 !important; }
  .sp-rule { opacity: .30 !important; transform: none !important; }
  .sp-rt { opacity: .26 !important; }
  .sp-mark, .sp-seal { opacity: 1 !important; transform: none !important; }
  .sp-tick { stroke-dashoffset: 0 !important; }
}

/* Short viewports (a phone in landscape, a small window) cannot afford 38% of
   the height for a skyline plus a centred mark. */
@media (max-height: 560px) {
  .sp-city { height: 30%; }
  .sp-base { bottom: 30%; }
  .sp-mark { width: 56px; height: 56px; }
}

#splash { background: radial-gradient(900px 480px at 78% -8%, rgba(242,231,198,.92), transparent 60%), radial-gradient(620px 380px at 14% 108%, rgba(255,228,212,.85), transparent 55%), #F7F5F0; }
.sp-inner { color: #12233D; }
.sp-name b { color: #C9A227; }
.sp-tag { color: #667782; }
.sp-bar { background: #E4E8EA; }
.sp-bar i { background: linear-gradient(90deg, #C9A227, #8A6D1A); }
.sp-msg { color: #667782; }
.sp-mark { filter: drop-shadow(0 12px 28px rgba(0,29,47,.18)); }


/* ---- AA guard: teal as TEXT uses the deep tone; teal as FILL keeps forest ---- */
.ok-t, .lg-name b, .land-hero h1 em, .sec-eyebrow, .tab.on, .ph-tab.on { color: var(--ok-deep); }
html[data-theme="dark"] .ok-t, html[data-theme="dark"] .lg-name b, html[data-theme="dark"] .land-hero h1 em { color: var(--ok); }
.badge.t-info { color: var(--sea); }
.badge.t-mute { color: var(--mut); }
.top-clock { color: var(--mut); }
.land-hero .k-eyebrow { color: var(--ok-deep); }
html[data-theme="dark"] .btn.pri, html[data-theme="dark"] .btn.ok, html[data-theme="dark"] .chip.on, html[data-theme="dark"] .tier-premium, html[data-theme="dark"] .copilot-fab { color: #221A05; }
.copilot-fab { color: #fff; }
.land-hero .btn.lg:not(.ghost) { color: #fff !important; }
html[data-theme="dark"] .land-hero .btn.lg:not(.ghost) { color: #221A05 !important; }
.ph-hero, .ph-hero .h1, .ph-hero .h2 { color: #fff; }
.badge.t-ok .mut, .card.wash .mut, [style*="--ok-soft"] .mut, [style*="ok-soft"] .mut { color: var(--faint); }

/* ---- mobile topbar: drop the clock + compress chips ---- */
@media (max-width: 720px) {
  .top-clock { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .logo .lg-name { font-size: 15px; white-space: nowrap; }
  .top-portal { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #online-chip { display: none; }
}

/* ============ customization layer (Studio) ============ */
html.dense body { font-size: 13.5px; }
html.dense .content { padding: 13px 16px 48px; }
html.dense .card { padding: 14px; }
html.dense .m-body { padding: 12px 14px; }
html.dense .grid2, html.dense .grid3, html.dense .grid4 { gap: 10px; }
html.dense .notif-item { padding: 8px 12px; }
html.dense .snav { padding-top: 8px; padding-bottom: 8px; }
html.bigtext body { font-size: 16.5px; }
html.bigtext .sm, html.bigtext .xs { font-size: 13px; }
html.rmotion *, html.rmotion *::before, html.rmotion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* topbar insight count badge */
.top-ico .ct {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 99px; background: var(--ok); color: #fff; font-size: 9.5px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--card); line-height: 1;
}
html[data-theme="dark"] .top-ico .ct { color: #221A05; }
.iq-btn:hover { color: var(--ok-deep); }

/* Studio modal controls */
.studio { display: flex; flex-direction: column; }
.st-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.st-row:last-child { border-bottom: 0; }
.st-lbl { display: flex; flex-direction: column; gap: 2px; }
.st-lbl b { font-size: 13.5px; color: var(--ink); }
.st-lbl span { font-size: 12px; color: var(--mut); }
.st-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.st-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line2); background: var(--card); cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.st-swatch span { width: 20px; height: 20px; border-radius: 6px; display: block; }
.st-swatch:hover { transform: translateY(-1px); }
.st-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.st-seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; flex-wrap: wrap; }
.st-opt { border: 0; background: transparent; color: var(--mut); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.st-opt:hover { color: var(--ink); }
.st-opt.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-pill); }
.st-flags { display: flex; gap: 7px; flex-wrap: wrap; max-width: 340px; justify-content: flex-end; }
.st-flag { opacity: .5; }
.st-flag.on { opacity: 1; }
.st-flag.locked { opacity: .4; cursor: not-allowed; }
.st-flag[disabled] { pointer-events: none; }

/* ============ Heritage marketing components ============ */
/* vivid flyer-gold CTA — ALWAYS navy ink text (5.8:1 on #C9A227) */
.btn.gold {
  background: linear-gradient(135deg, var(--gold-vivid-2), var(--gold-vivid)) !important;
  color: #12233D !important; border: 1px solid var(--gold-vivid) !important; font-weight: 700;
  box-shadow: 0 6px 20px rgba(201, 162, 39, .35);
}
.btn.gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn.gold .ico { color: #12233D; }
/* flyer location pill — deep green, white ink (7.4:1) */
.loc-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px;
  border-radius: 12px; background: var(--loc-green); color: #fff; max-width: 100%;
}
.loc-pill .ico { flex: 0 0 auto; }
.loc-pill b { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; display: block; }
.loc-pill span { font-size: 11.5px; opacity: .92; display: block; margin-top: 1px; }
html[data-theme="dark"] .loc-pill { background: #1E4A34; }
/* flyer amenity chips — icon over tiny caps label */
.am-row { display: flex; gap: 8px; flex-wrap: wrap; }
.am-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  min-width: 72px; padding: 10px 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.am-chip .ico { color: var(--ok-deep); }
.am-chip span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); line-height: 1.25; }
.am-chip.glass { background: rgba(10, 21, 36, .55); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.am-chip.glass .ico { color: var(--gold-vivid-2); }
.am-chip.glass span { color: rgba(255,255,255,.92); }
/* flyer gold title stamp — "TITLE: GOVERNOR'S CONSENT" */
.title-stamp {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border-radius: 10px; background: linear-gradient(135deg, var(--gold-vivid-2), var(--gold-vivid));
  color: #12233D; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(201, 162, 39, .3);
}
.title-stamp .ico { color: #12233D; }
/* photo hero — cinematic Ken Burns card, phone + web */
.photo-hero { position: relative; overflow: hidden; border-radius: var(--r-card); min-height: 190px; background: #12233D; }
.photo-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
.photo-hero .ph-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,21,36,.05) 30%, rgba(10,21,36,.82) 100%); }
.photo-hero .ph-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; }
.photo-hero .ph-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-vivid-2); }
.photo-hero .ph-title { font: 500 20px/1.15 Fraunces, serif; margin-top: 4px; }
.photo-hero .ph-title em { font-style: italic; color: var(--gold-vivid-2); }
.photo-hero .ph-sub { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 4px; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
html.rmotion .photo-hero > img { animation: none; }
@media (prefers-reduced-motion: reduce) { .photo-hero > img { animation: none; } }

/* ============ Heritage onboarding ============ */
.overlay.ob-ov { background: rgba(6, 13, 24, .66); backdrop-filter: blur(6px); }
.ob-card {
  display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); width: min(880px, 96vw); max-height: min(92vh, 700px);
  border-radius: var(--r-card-lg); overflow: hidden; background: var(--card);
  box-shadow: 0 30px 90px rgba(3, 8, 16, .55); animation: ob-in .5s var(--ease-spring);
}
.ob-card.swap { animation: ob-swap .4s var(--ease); }
@keyframes ob-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
@keyframes ob-swap { from { opacity: .4; transform: translateX(14px); } }
.ob-side { position: relative; overflow: hidden; background: #0A1524; min-height: 100%; }
.ob-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite alternate; }
.ob-side-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,30,.3), rgba(8,17,30,.55) 55%, rgba(8,17,30,.92)); }
.ob-side-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.ob-brand { font: 600 19px Fraunces, serif; }
.ob-brand b { color: #EFD37E; }
.ob-quote { font: italic 500 14.5px/1.45 Fraunces, serif; color: rgba(255,255,255,.88); margin-top: 8px; }
.ob-dots { display: flex; gap: 6px; margin-top: 14px; }
.ob-dots span { width: 22px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); transition: background .3s var(--ease); }
.ob-dots span.now { background: #EFD37E; }
.ob-dots span.done { background: rgba(239,211,126,.55); }
.ob-main { padding: 30px 32px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.ob-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-deep); }
.ob-main h2 { font: 500 clamp(24px, 2.4vw, 32px)/1.12 Fraunces, serif; color: var(--ink); letter-spacing: -.012em; }
.ob-main h2 em { font-style: italic; color: var(--ok-deep); }
.ob-lede { font-size: 14px; color: var(--mut); line-height: 1.6; }
.ob-roles { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.ob-role {
  display: flex; align-items: center; gap: 13px; text-align: left; padding: 11px 14px; border-radius: 16px;
  background: var(--card2); border: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--ink);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.ob-role:hover { transform: translateX(4px); border-color: var(--ok-deep); background: var(--ok-soft); }
.ob-role > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-role b { font-size: 13.5px; }
.ob-role > span:nth-child(2) > span { font-size: 11.5px; color: var(--mut); }
.ob-role-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #EFD37E; flex: 0 0 auto; }
.ob-role > .ico:last-child { color: var(--faint); }
.ob-his { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ob-hi { display: flex; gap: 13px; align-items: flex-start; opacity: 0; transform: translateY(10px); animation: ob-hi-in .5s var(--ease) forwards; }
@keyframes ob-hi-in { to { opacity: 1; transform: none; } }
.ob-hi-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-deep); flex: 0 0 auto; }
.ob-hi b { font-size: 14px; color: var(--ink); }
.ob-hi p { font-size: 12.5px; color: var(--mut); margin-top: 3px; line-height: 1.55; }
.ob-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.ob-facts span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r-pill); background: var(--card2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink); }
.ob-facts .ico { color: var(--ok-deep); }
.ob-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; padding-top: 12px; }
.ob-skip { align-self: center; margin-top: 4px; background: none; border: 0; color: var(--mut); font: 600 12.5px Inter, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ob-skip:hover { color: var(--ink); }
html.rmotion .ob-side img { animation: none; }
@media (max-width: 760px) {
  .ob-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: 94vh; }
  .ob-side { min-height: 130px; max-height: 150px; position: relative; }
  .ob-main { padding: 20px; }
}

/* ============ first-run coach card (phone apps) ============ */
.coach {
  position: relative; border-radius: var(--r-card); padding: 14px 38px 14px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--ok-soft), var(--card)); border: 1px solid var(--line);
}
.coach .coach-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.coach .coach-t .ico { color: var(--ok-deep); }
.coach .coach-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--mut); background: none; border: 0; cursor: pointer; font-size: 15px; }
.coach .coach-x:hover { background: var(--bg2); color: var(--ink); }
.coach .btn-row { margin-top: 9px; }

/* ============ onboarding wizards · documents · messaging ============ */
.sig-pad { width: 100%; height: 160px; border: 2px dashed var(--line2); border-radius: 14px; background: var(--card); cursor: crosshair; touch-action: none; display: block; }
.ob-photo { width: 74px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); padding: 0; cursor: pointer; background: var(--bg2); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.ob-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-photo:hover { transform: translateY(-2px); }
.ob-photo.on { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.lv-step { font-size: 13px; font-weight: 600; color: var(--ok-deep); text-align: center; min-height: 20px; }
.dx-sig { display: flex; align-items: center; gap: 10px; }
.dx-sig img { width: 130px; height: 52px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.dx-file { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dx-file img { width: 92px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.msg-scroll { max-height: calc(100vh - 200px); overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; }
.msg-scroll .bubble.me { align-self: flex-end; }
.msg-scroll .bubble.them { align-self: flex-start; }
.btn.danger { background: var(--err-soft); color: var(--err); border-color: var(--err-soft); }

/* Insights drawer */
.iq-brief { display: flex; gap: 9px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); background: var(--card2); }
.iq-brief .ico { color: var(--ok-deep); flex: 0 0 auto; margin-top: 1px; }
.iq-item { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.iq-item:hover { background: var(--card2); }
.iq-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg2); color: var(--mut); }
.iq-txt { min-width: 0; }
.iq-title { font-weight: 700; font-size: 13px; color: var(--ink); }
.iq-detail { font-size: 12px; color: var(--mut); margin-top: 2px; line-height: 1.45; }
.iq-go { margin-top: 8px; }
.iq-err { border-left-color: var(--err); } .iq-err .iq-ico { background: var(--err-soft); color: var(--err); }
.iq-warn { border-left-color: var(--warn); } .iq-warn .iq-ico { background: var(--warn-soft); color: var(--warn); }
.iq-ok { border-left-color: var(--ok); } .iq-ok .iq-ico { background: var(--ok-soft); color: var(--ok-deep); }
.iq-info { border-left-color: var(--sea); } .iq-info .iq-ico { background: var(--sea-soft); color: var(--sea); }

@media print {
  @page { margin: 16mm 14mm; }
  .topbar, .side, .copilot-fab, .copilot-panel, .btn, .ph-tabs, #toasts, .burger, .chip, .tabs, #director-bar, .overlay .m-foot { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12.5px; }
  .content { padding: 0 !important; }
  .content > .screen { max-width: none; animation: none; }
  .card, .stat { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; }
  .grid2 > *, .grid3 > *, .grid4 > * { animation: none !important; }
  .docpaper { max-height: none !important; overflow: visible !important; border: 0; box-shadow: none; }
  .modal { max-height: none !important; overflow: visible !important; width: auto !important; box-shadow: none !important; }
  .overlay { position: static !important; background: none !important; backdrop-filter: none !important; display: block !important; padding: 0 !important; }
  .content > .screen::before { content: "Real+ · realplus.korevra.com · verify any reference at realplus.korevra.com/#/verify"; display: block; font: 600 10px/1.4 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #667782; border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 14px; }
  .content > .screen::after { content: "Generated from the Korevra double-entry ledger · every figure is a journal line · NDPA 2023 registered controller"; display: block; font: 10px/1.4 Inter, sans-serif; color: #667782; border-top: 1px solid #ccc; padding-top: 6px; margin-top: 18px; }
  a { color: #000; text-decoration: none; }
}

/* ============================================================================
   MOTION LAYER
   Driven by js/motion.js. Three rules govern everything here:
     1. entrance choreography fires only on a real route change,
     2. nothing is hidden by CSS alone -- the .rv hide class is added by JS, so
        a script failure leaves content visible rather than blank,
     3. every effect collapses under prefers-reduced-motion / html.rmotion via
        the global reduce block near the top of this file.
   ============================================================================ */

/* ---- staggered block entrance ---- */
[data-anim-block] { animation: blk-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 52ms); }
@keyframes blk-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* ---- scroll reveal (class applied by JS only) ---- */
.rv { opacity: 0; transform: translateY(20px); }
.rv-in { animation: blk-in .58s var(--ease) both; }
html.rmotion .rv, html.rmotion .rv-in { opacity: 1; transform: none; animation: none; }

/* ---- photographic frames: blur-up, drift, parallax ---- */
.photo-hero .ph-lqip { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(18px); transform: scale(1.08); }
.photo-hero > img {
  opacity: 0;
  /* `translate` is its own property, so parallax composes with the kenburns
     transform instead of fighting it. */
  translate: 0 var(--par, 0px);
  transition: opacity .55s var(--ease);
  /* Safety net: if the load listener never fires, show the frame anyway. */
  animation: kenburns 22s ease-in-out infinite alternate, ph-safety 0s 2.5s forwards;
}
.photo-hero > img.in { opacity: 1; }
@keyframes ph-safety { to { opacity: 1; } }
html.rmotion .photo-hero > img { animation: ph-safety 0s forwards; translate: none; }

/* ---- side / tab navigation choreography ---- */
.side.nav-anim .snav { animation: blk-in .4s var(--ease) both; }
.side.nav-anim .snav:nth-of-type(1) { animation-delay: .02s; }
.side.nav-anim .snav:nth-of-type(2) { animation-delay: .05s; }
.side.nav-anim .snav:nth-of-type(3) { animation-delay: .08s; }
.side.nav-anim .snav:nth-of-type(4) { animation-delay: .11s; }
.side.nav-anim .snav:nth-of-type(5) { animation-delay: .14s; }
.side.nav-anim .snav:nth-of-type(6) { animation-delay: .17s; }
.side.nav-anim .snav:nth-of-type(7) { animation-delay: .20s; }
.side.nav-anim .snav:nth-of-type(8) { animation-delay: .23s; }
.side.nav-anim .snav:nth-of-type(n+9) { animation-delay: .26s; }

/* the active marker grows into place rather than snapping */
.snav { position: relative; }
.snav.on::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  border-radius: 99px; background: var(--ok); transform: translateY(-50%);
  animation: snav-ind .34s var(--ease) forwards;
}
@keyframes snav-ind { to { height: 62%; } }

.ph-tabs.nav-anim .ph-tab { animation: blk-in .34s var(--ease) both; }
.ph-tabs.nav-anim .ph-tab:nth-of-type(2) { animation-delay: .04s; }
.ph-tabs.nav-anim .ph-tab:nth-of-type(3) { animation-delay: .08s; }
.ph-tabs.nav-anim .ph-tab:nth-of-type(4) { animation-delay: .12s; }
.ph-tabs.nav-anim .ph-tab:nth-of-type(n+5) { animation-delay: .16s; }

/* ---- press feedback: the app should answer the finger ---- */
.btn:active { transform: translateY(1px) scale(.985); }
.chip:active { transform: scale(.96); }
.ph-tab:active { transform: scale(.94); }
.snav:active { transform: translateX(1px); }
.list-card:active, .mod-card:active, .portal-card:active { transform: translateY(-1px) scale(.995); }

/* ---- toast: spring, not slide ---- */
.toast { animation: t-in .34s var(--ease-spring); }
@keyframes t-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---- cold-start splash ---- */
.rp-splash { position: fixed; inset: 0; z-index: 900; overflow: hidden; background: #08111E; display: grid; place-items: center; }
.rp-splash.out { animation: rps-out .45s var(--ease) forwards; }
@keyframes rps-out { to { opacity: 0; transform: scale(1.03); } }
.rps-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; animation: kenburns 9s ease-out both; }
.rps-shade { position: absolute; inset: 0; background: radial-gradient(62% 62% at 50% 44%, rgba(8,17,30,.32), rgba(8,17,30,.93)); }
.rps-mid { position: relative; text-align: center; color: #fff; padding: 0 24px; }
.rps-mark { display: block; margin: 0 auto 15px; }
.rps-house { stroke-dasharray: 96; stroke-dashoffset: 96; animation: rps-draw .85s .12s var(--ease) forwards; }
@keyframes rps-draw { to { stroke-dashoffset: 0; } }
.rps-seal { transform-origin: 35px 13px; transform: scale(0); animation: rps-pop .5s .72s var(--ease-spring) forwards; }
@keyframes rps-pop { to { transform: scale(1); } }
.rps-tick { stroke-dasharray: 13; stroke-dashoffset: 13; animation: rps-draw .3s 1.06s ease forwards; }
.rps-name { font: 500 31px/1 Fraunces, "Source Serif Pro", serif; letter-spacing: -.02em; opacity: 0; animation: rps-up .6s .5s var(--ease) forwards; }
.rps-name span { color: #EFD37E; }
.rps-line { font-size: 12.5px; color: rgba(255,255,255,.74); margin-top: 8px; opacity: 0; animation: rps-up .6s .68s var(--ease) forwards; }
@keyframes rps-up { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.rps-bar { width: 132px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.17); margin: 22px auto 0; overflow: hidden; }
.rps-bar > i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #C9A227, #EFD37E); transform: scaleX(0); transform-origin: left; animation: rps-load 1.55s var(--ease) forwards; }
@keyframes rps-load { to { transform: scaleX(1); } }

/* ---- the seal: reserved for money that actually landed ---- */
.rp-seal { position: fixed; inset: 0; z-index: 880; display: grid; place-items: center; pointer-events: none; }
.rp-seal.out { animation: rps-out .36s var(--ease) forwards; }
.rp-seal .rps-card {
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-card-lg);
  padding: 26px 34px; text-align: center; box-shadow: var(--shadow-lg); color: var(--ok);
  animation: seal-in .5s var(--ease-spring) both;
}
@keyframes seal-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
.rps-arc { stroke-dasharray: 239; stroke-dashoffset: 239; animation: rps-draw .7s .06s var(--ease) forwards; }
.rps-check { stroke-dasharray: 46; stroke-dashoffset: 46; animation: rps-draw .34s .55s ease forwards; }
.rp-seal .rps-t { font: 500 19px/1.2 Fraunces, "Source Serif Pro", serif; color: var(--ink); margin-top: 10px; }
.rp-seal .rps-s { font-size: 12.5px; color: var(--mut); margin-top: 5px; }

/* Reduced motion: the splash and the seal still appear, they simply do not move. */
@media (prefers-reduced-motion: reduce) {
  .rps-house, .rps-tick, .rps-arc, .rps-check { stroke-dashoffset: 0; }
  .rps-seal { transform: none; }
  .rps-name, .rps-line { opacity: 1; }
  .rps-bar > i { transform: scaleX(1); }
  .photo-hero > img { opacity: 1; }
}

/* ---- portal arrival band ---- */
.photo-hero.portal-band { margin-bottom: 16px; }
.ph-body .photo-hero.portal-band { border-radius: 0; margin-bottom: 12px; }
/* Weighted across rather than down: the caption sits lower left, so that is
   the only region that needs protecting. */
.photo-hero.portal-band .ph-shade { background: linear-gradient(100deg, rgba(10,21,36,.90) 0%, rgba(10,21,36,.74) 34%, rgba(10,21,36,.40) 66%, rgba(10,21,36,.22) 100%); }
.photo-hero.portal-band .ph-title { font-size: 22px; }
@media (max-width: 560px) { .photo-hero.portal-band .ph-title { font-size: 18px; } }

/* ---- menus, drawers and sheets arrive item by item ----
   Safe without a JS guard: overlays are constructed fresh on every open, so
   there is no in-place re-render that could re-fire these. */
.modal .grid3 > *, .modal .grid2 > *, .modal .grid4 > *,
.drawer .notif-item, .drawer .iq-item, .drawer .msg-row,
.sheet .rowlink, .modal .rowlink {
  animation: menu-in .38s var(--ease) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(11px) scale(.985); } to { opacity: 1; transform: none; } }

.modal .grid3 > *:nth-child(1), .modal .grid2 > *:nth-child(1), .modal .grid4 > *:nth-child(1),
.drawer .notif-item:nth-child(1), .drawer .iq-item:nth-child(1) { animation-delay: .02s; }
.modal .grid3 > *:nth-child(2), .modal .grid2 > *:nth-child(2), .modal .grid4 > *:nth-child(2),
.drawer .notif-item:nth-child(2), .drawer .iq-item:nth-child(2) { animation-delay: .05s; }
.modal .grid3 > *:nth-child(3), .modal .grid2 > *:nth-child(3), .modal .grid4 > *:nth-child(3),
.drawer .notif-item:nth-child(3), .drawer .iq-item:nth-child(3) { animation-delay: .08s; }
.modal .grid3 > *:nth-child(4), .modal .grid2 > *:nth-child(4), .modal .grid4 > *:nth-child(4),
.drawer .notif-item:nth-child(4), .drawer .iq-item:nth-child(4) { animation-delay: .11s; }
.modal .grid3 > *:nth-child(5), .modal .grid2 > *:nth-child(5), .modal .grid4 > *:nth-child(5),
.drawer .notif-item:nth-child(5), .drawer .iq-item:nth-child(5) { animation-delay: .14s; }
.modal .grid3 > *:nth-child(6), .modal .grid2 > *:nth-child(6), .modal .grid4 > *:nth-child(6),
.drawer .notif-item:nth-child(6), .drawer .iq-item:nth-child(6) { animation-delay: .17s; }
.modal .grid3 > *:nth-child(7), .modal .grid4 > *:nth-child(7),
.drawer .notif-item:nth-child(7), .drawer .iq-item:nth-child(7) { animation-delay: .20s; }
.modal .grid3 > *:nth-child(8), .modal .grid4 > *:nth-child(8),
.drawer .notif-item:nth-child(8), .drawer .iq-item:nth-child(8) { animation-delay: .23s; }
/* Past eight the stagger stops growing: a twenty-item list should not take two
   seconds to finish arriving. */
.modal .grid3 > *:nth-child(n+9), .modal .grid4 > *:nth-child(n+9),
.drawer .notif-item:nth-child(n+9), .drawer .iq-item:nth-child(n+9) { animation-delay: .26s; }

/* the portal picker's icon settles a beat after its card */
.modal .portal-card .p-ico { animation: pico-in .42s .10s var(--ease-spring) both; }
@keyframes pico-in { from { opacity: 0; transform: scale(.72) rotate(-8deg); } to { opacity: 1; transform: none; } }

html.rmotion .modal .grid3 > *, html.rmotion .modal .grid2 > *, html.rmotion .modal .grid4 > *,
html.rmotion .drawer .notif-item, html.rmotion .drawer .iq-item,
html.rmotion .modal .portal-card .p-ico { animation: none; opacity: 1; transform: none; }

/* ---- an unread notification should catch the eye once, then stop ---- */
.notif-item .badge { animation: notif-ping 1.6s var(--ease) 2; }
@keyframes notif-ping { 0%, 100% { transform: none; } 12% { transform: scale(1.35); } 26% { transform: none; } }
html.rmotion .notif-item .badge { animation: none; }

/* ============================================================================
   UX AUDIT FIXES (tools/UX-AUDIT.md)
   ============================================================================ */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-act-proxy] { cursor: pointer; border-radius: 6px; }
[data-act-proxy]:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.scroll-x:focus-visible, .tbl-wrap:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; border-radius: 10px; }

/* the phone overflow menu */
.top-more { display: none; }
.menu-list { display: grid; gap: 4px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; background: transparent; border: 0; color: var(--ink); font: 600 14.5px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.menu-row:hover, .menu-row:focus-visible { background: var(--bg2); }
.menu-row span:first-of-type { flex: 1; }

/* Touch targets on phones: 40px icons, 32px chips and small buttons (WCAG 2.5.8 asks 24;
   a thumb asks more). The top bar keeps only what a phone needs in reach: the menu for
   the portal, the mark, notifications, the overflow menu and the account. */
@media (max-width: 600px) {
  .top-x, .top-portal, #sim-clock { display: none !important; }
  .top-more { display: grid; }
  .top-ico { width: 40px; height: 40px; }
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar .logo { min-height: 40px; padding-right: 4px; margin-right: auto; }
  .persona-chip { min-height: 40px; padding: 3px; }
  .persona-chip > span:not(.av):not([class*="avatar"]) { display: none; }
  .chip, .btn.sm, button.badge, .badge[data-act] { min-height: 32px; }
  .coach-x { min-width: 32px; min-height: 32px; }
  .leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; }
}

/* Phone wrapping, restated at the END of the sheet. The earlier copy (search "Buttons,
   badges and tabs are") sits above the base .badge and .btn rules at equal specificity,
   so the base `white-space: nowrap` won and the fix never applied: five screens scrolled
   sideways because one card-header badge ("spread 0.6% · rate locked at send") could not
   wrap. Source order is part of the rule. */
@media (max-width: 600px) {
  .btn, .badge { white-space: normal; }
  .c-head { flex-wrap: wrap; row-gap: 6px; }
  .c-head > .badge { max-width: 100%; text-align: left; }
  .tbl-wrap { overflow-x: auto; max-width: 100%; }
}

/* .content is a flex child of .main: without min-width:0 it grows to its widest child, so one
   wide table (developer/sales) pushed the whole column 94px past a phone screen instead of
   scrolling inside .tbl-wrap. */
.content, .screen, .ph-body { min-width: 0; }
/* card-title keyboard handles (data-act-proxy) need a real target size, not an inline line box */
[data-act-proxy] { display: inline-block; min-height: 24px; }

/* Every clickable badge or chip meets WCAG 2.5.8's 24px at any width ("KYC pending — verify" was 20px). */
button.badge, .badge[role="button"], .badge[data-act], button.chip { min-height: 24px; display: inline-flex; align-items: center; }
/* Phone touch targets: our bar is 32px (WCAG 2.5.8 asks 24). Clickable titles (a11yify proxies) and
   clickable chips/badges (unit grids) were 24-28px tall on a phone. */
@media (max-width: 600px) {
  [data-act-proxy] { display: inline-flex; align-items: center; min-height: 32px; }
  .badge[data-act], .badge[role="button"], button.badge, .chip, button.chip { display: inline-flex; align-items: center; min-height: 32px; }
}
/* the phone app body is the scroll region: focusable so a keyboard can scroll it, no ring on tap */
.ph-body:focus:not(:focus-visible) { outline: none; }