/* ==========================================================================
   Portara — app.css
   Design source of truth: review/DESIGN-DIRECTION.md (merged ruling) over
   review/r1_fable_design.md (BASE) with additions from r1_astra_design.md.
   No build step. No inline styles anywhere (CSP style-src 'self'), so every
   visual state is a class; the only runtime styling is CSSOM from app.js
   (el.style.width = ...) for data-driven widths.

   TOKEN TABLE (Fable §1) — what each custom property is FOR
   --paper         page background, warm whitewash
   --card          cards, tables, inputs (pure white)
   --sand          zebra rows, inactive tabs, skeletons, bar tracks
   --hairline      EVERY border. Never use a darker border.
   --ink           text, icons, primary buttons
   --muted         secondary text, labels, axis
   --faint         decorative only (dots, hover borders). TEXT uses --faint-text; input borders use --input-line (R2-A12)
   --cobalt        the ONE accent: links, focus ring, active nav, CTA hover
   --cobalt-soft   selected row, info chips
   --positive(+soft)  paid / approved / cap reached
   --warning(+soft)   dunning, W-9 missing, pending
   --danger(+soft)    failed / blocked / destructive
   --gold          "money settled" hairline ONLY. Never a fill, never text.
   --gold-soft     settled-row left edge, signature rule tint
   Rules that must not be broken: money is tabular-nums + right-aligned;
   weights 400/600 only; cards have hairline not shadow; shadows only on
   popovers and slide-overs; every status pill carries a WORD.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --paper: #F7F4EE; --card: #FFFFFF; --sand: #EFE9DE; --hairline: #E4DDD0;
  --ink: #10233A; --muted: #5E6C7B; --faint: #9AA5B1; --faint-text: #626F7D; --input-line: #8A95A1;   /* R2-A12: --faint is decorative only (2.5:1); TEXT uses --faint-text (>=4.5:1); input borders use --input-line (>=3:1) */
  --cobalt: #1F4FBF; --cobalt-soft: #E8EEFB;
  --positive: #1E7A58; --positive-soft: #E2F2EA;
  --warning: #855810;  /* R2-A12: was #A8701A (3.7:1 on warning-soft); now 5.4:1 */ --warning-soft: #FBF0DA;
  --danger: #B3302C; --danger-soft: #F9E4E2;
  --gold: #C8A24A; --gold-soft: #F3EAD1;
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-pop: 0 12px 32px rgba(16,35,58,.14);
  --focus: 0 0 0 3px #E8EEFB, 0 0 0 4px #1F4FBF;
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-micro: 160ms; --t-std: 240ms; --t-tide: 320ms;
  --rail: 232px;
}
/* Dark tokens exist but are opt-in via <html data-theme="dark"> only: the
   demo must never flip to an untested look because of an OS setting. */
:root[data-theme="dark"] {
  --paper: #0F1A28; --card: #15233A; --sand: #1B2C45; --hairline: #223247;
  --ink: #EDE8DF; --muted: #A6B2C0; --faint: #6F7D8E; --cobalt: #6D93F0;
  --cobalt-soft: #1C2B4A;
}

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Naxos marble grain: 2% multiply, the ONLY texture outside Login. Delete
   this block if it ever reads as noise in a screenshot (DESIGN-DIRECTION). */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .02; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#app { position: relative; z-index: 1; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
.num, .money { font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); } .faint { color: var(--faint-text); }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: var(--r-sm); z-index: 99; }
.skip:focus { left: 8px; }
.noscript { padding: 24px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.hidden { display: none !important; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* ---- 3. Buttons, inputs, pills ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink);
  font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap;
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.btn:hover { border-color: var(--faint); text-decoration: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--cobalt); border-color: var(--cobalt); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn.lg { height: 48px; font-size: 15px; padding: 0 20px; }
.btn.block { width: 100%; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--sand); color: var(--ink); }
.btn.danger { color: var(--danger); }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.input, .select {
  height: 38px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: inherit; width: 100%; min-width: 0;
  transition: border-color var(--t-micro) var(--ease);
}
.input:hover, .select:hover { border-color: var(--muted); }
.input:disabled, .select:disabled, textarea:disabled { background: var(--sand); color: var(--muted); border-color: var(--hairline); cursor: not-allowed; opacity: 1; }   /* R2-F12: locked fields read as locked */
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input:focus, .select:focus { border-color: var(--cobalt); box-shadow: var(--focus); outline: none; }
.input::placeholder { color: var(--faint-text); }
.input.money-in { text-align: right; font-variant-numeric: tabular-nums; }
.affix { position: relative; }
.affix > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--faint-text); pointer-events: none; font-size: 13px; }
.affix > span.pre { left: 12px; } .affix > span.post { right: 12px; }
.affix > .input.has-pre { padding-left: 24px; } .affix > .input.has-post { padding-right: 26px; }
.hint { font-size: 12px; color: var(--muted); }
.err-text { font-size: 12px; color: var(--danger); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--sand); color: var(--muted);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.ok { background: var(--positive-soft); color: var(--positive); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--cobalt-soft); color: var(--cobalt); }
.pill.gold { background: var(--gold-soft); color: #7A5E1B; }
.pill.plain::before { display: none; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--card); color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600;
  transition: all var(--t-micro) var(--ease);
}
.chip:hover { border-color: var(--faint); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .count { opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---- 4. Cards and tables ------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--hairline); background: var(--card);
  white-space: nowrap; position: sticky; top: 0;
}
table.t td { padding: 0 16px; height: 44px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
table.t.dense td { height: 36px; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t th.num, table.t td.num { text-align: right; }
table.t tbody tr { transition: background var(--t-micro) var(--ease); }
table.t tbody tr.link { cursor: pointer; }
table.t tbody tr.link:hover { background: #FBF9F4; }
table.t tbody tr.selected { background: var(--cobalt-soft); }
table.t tfoot td { font-weight: 600; background: #FBF9F4; border-top: 1px solid var(--hairline); }
table.t .cell-main { font-weight: 600; }
table.t .cell-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
table.t tr.group td { background: var(--sand); height: 32px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
table.t tr.warnrow td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
table.t tr.settled td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
table.t tr.flip td { animation: flip 700ms var(--ease); }
@keyframes flip { 0% { background: var(--gold-soft); } 100% { background: transparent; } }

/* ---- 5. App shell (admin) ----------------------------------------------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); border-right: 1px solid var(--hairline); padding: 20px 12px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.brand img { width: 28px; height: 28px; display: block; }
.brand .wm { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.brand .tn { font-size: 12px; color: var(--muted); margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px;
  border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: 13px; text-decoration: none;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { background: var(--cobalt-soft); color: var(--cobalt); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cobalt); }
.nav .badge { margin-left: auto; font-size: 11px; background: var(--warning-soft); color: var(--warning); border-radius: 999px; padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; }
.nav .sep { height: 1px; background: var(--hairline); margin: 10px 8px; }
.rail-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sand); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 12px; border: 1px solid var(--hairline); flex: none; }
.rail-foot .who { min-width: 0; flex: 1; }
.rail-foot .who b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-foot .who span { font-size: 11px; color: var(--muted); text-transform: capitalize; }

.main { min-width: 0; }
.topwrap { position: sticky; top: 0; z-index: 20; background: rgba(247,244,238,.92); backdrop-filter: saturate(1.2) blur(8px); }
.demo-strip {
  height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: #6a5420; background: var(--gold-soft); border-bottom: 1px solid #EADDB7;
}
.demo-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
.topbar { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--hairline); }
.crumb { flex: 1; font-size: 13px; color: var(--muted); min-width: 120px; white-space: nowrap; }
.crumb b { color: var(--ink); font-weight: 600; }
.search {
  flex: 2; max-width: 420px; margin: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--hairline); background: var(--card); border-radius: var(--r-sm); color: var(--faint-text); cursor: pointer; font-size: 13px;
  transition: border-color var(--t-micro) var(--ease);
}
.search:hover { border-color: var(--faint); }
.search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.search kbd { margin-left: auto; font: 600 11px var(--font); background: var(--sand); color: var(--muted); border-radius: 4px; padding: 1px 6px; }
.menu-btn { display: none; }

.page { max-width: 1200px; margin: 0 auto; padding: 32px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* R2-F11: NO opacity fade on page entry (a slow frame / screenshot caught a washed-out page). Position only, 160ms. */
.view-enter { animation: enter var(--t-micro) var(--ease); }
@keyframes enter { from { transform: translateY(4px); } to { transform: none; } }

/* ---- 6. KPI tiles -------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; font: inherit; text-align: left; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 16px 20px; cursor: pointer; transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.kpi:hover { border-color: var(--faint); }
.kpi .eyebrow { display: block; }
.kpi .v { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.01em; margin-top: 6px; font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; }
.kpi .s { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi { position: relative; }
.kpi .eyebrow { white-space: nowrap; }
/* R2: the hover hint is out of flow so a long label can never wrap and misalign the numbers across tiles. */
.kpi .rcpt { position: absolute; top: 16px; right: 16px; font-size: 11px; color: var(--cobalt); opacity: 0; transition: opacity var(--t-micro); }
.kpi:hover .rcpt { opacity: 1; }

/* ---- 7. Today inbox ------------------------------------------------------ */
.inbox-group { margin-bottom: 20px; }
.inbox-head { position: sticky; top: 84px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 4px; background: var(--paper); }
.inbox-head .count { background: var(--sand); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 18px; }
.inbox-row {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; min-height: 56px; border-bottom: 1px solid var(--hairline);
  transition: max-height var(--t-std) var(--ease), opacity var(--t-std) var(--ease), min-height var(--t-std) var(--ease), padding var(--t-std) var(--ease);
}
.inbox-row:last-child { border-bottom: 0; }
.inbox-row.out { overflow: hidden; max-height: 0; min-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.ico { width: 32px; height: 32px; border-radius: 8px; background: var(--sand); display: grid; place-items: center; flex: none; color: var(--muted); }
.ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.warn { background: var(--warning-soft); color: var(--warning); }
.ico.bad { background: var(--danger-soft); color: var(--danger); }
.ico.info { background: var(--cobalt-soft); color: var(--cobalt); }
.inbox-row .t { font-weight: 600; }
.inbox-row .d { font-size: 12px; color: var(--muted); }
.empty {
  text-align: center; padding: 48px 24px; color: var(--muted); border-radius: var(--r-md);
}
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.empty.dawn { background: linear-gradient(180deg, #FBF1D8 0%, #F8F1E3 45%, var(--card) 100%); border: 1px solid var(--hairline); }
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; }
.banner.bad { background: var(--danger-soft); color: var(--danger); }
.banner.warn { background: var(--warning-soft); color: var(--warning); }
.banner.info { background: var(--cobalt-soft); color: var(--cobalt); }

/* ---- 8. Deal editor + waterfall ----------------------------------------- */
.deal-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.form-sec { margin-bottom: 24px; }
.form-sec:last-child { margin-bottom: 0; }
.form-sec > .eyebrow { display: block; margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.form-row.one { grid-template-columns: 1fr; }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg { display: inline-flex; background: var(--sand); border-radius: var(--r-sm); padding: 2px; }
.seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 5px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12px; transition: all var(--t-micro) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16,35,58,.12); }

.wf-card { position: sticky; top: 100px; }
.wf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wf-status { font-size: 12px; color: var(--muted); min-height: 18px; }
.wf-status.busy::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); margin-right: 6px; animation: pulse 900ms ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.wf { list-style: none; margin: 0; padding: 0; }
.wf li { border-bottom: 1px solid var(--hairline); }
.wf li:last-child { border-bottom: 0; }
.wf-line {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0 10px; cursor: pointer;
  border-radius: 0;
}
.wf-line:hover .wf-label { color: var(--cobalt); }
.wf-line .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wf-label { font-size: 13px; transition: color var(--t-micro) var(--ease); }
.wf-amt { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; transition: opacity var(--t-std) var(--ease); }
.wf-amt.neg { color: var(--muted); font-weight: 400; }
.wf-track { height: 4px; background: var(--sand); border-radius: 4px; margin-top: 8px; display: flex; overflow: hidden; }
.wf-track i { display: block; height: 100%; width: 0; background: var(--ink); opacity: .72; transition: width var(--t-std) var(--ease); }
.wf-track i.c1 { background: var(--cobalt); opacity: 1; }
.wf-track i.c2 { background: var(--positive); opacity: 1; }
.wf-track i.net { background: var(--positive); opacity: .9; }
.wf-detail { display: none; background: #FBF9F4; border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.wf-detail.open { display: block; animation: enter var(--t-std) var(--ease); }
.wf-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.wf-detail dt { color: var(--faint-text); } .wf-detail dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.wf li.net { border-top: 1px solid var(--gold); margin-top: 6px; border-bottom: 0; }
.wf li.net .wf-label { font-weight: 600; font-size: 14px; }
.wf li.net .wf-amt { font-size: 20px; letter-spacing: -.01em; }
.wf.ghost li { opacity: .3; }
.wf-cap { font-size: 12px; color: var(--positive); margin-top: 6px; font-weight: 600; }
.wf-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 10px 0 0; }
.wf-error { background: var(--danger-soft); color: var(--danger); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 8px; }
.wf-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wf-actions .row { gap: 8px; }
.wf-actions .row > * { flex: 1; }
.watermark-note { font-size: 12px; color: var(--muted); text-align: center; }

/* ---- 9. Meters (cap) ----------------------------------------------------- */
.meter { height: 6px; background: var(--sand); border-radius: 999px; overflow: hidden; position: relative; min-width: 80px; }
.meter > i { display: block; height: 100%; width: 0; background: var(--cobalt); border-radius: 999px; transition: width var(--t-tide) var(--ease), background var(--t-tide); }
.meter.full > i { background: var(--positive); box-shadow: inset -1px 0 0 var(--gold); }
.meter.big { height: 10px; }
/* One-time sunrise sweep when a cap is hit (once per session, see app.js dawn()) */
.meter > i.dawn { background: linear-gradient(90deg, var(--gold), #E9D49A 35%, var(--cobalt) 100%); background-size: 220% 100%; animation: sunrise 1400ms var(--ease) both; }
.meter > i.dawn.settle { background: var(--positive); animation: none; }
@keyframes sunrise { 0% { width: 0; background-position: 100% 0; } 100% { width: 100%; background-position: 0 0; } }
.cap-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.cap-cell .meter { flex: 1; }
.cap-cell .pct { width: 38px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop {
  position: fixed; z-index: 60; background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 12px; box-shadow: var(--shadow-pop); max-width: 280px; pointer-events: none;
}
.pop b { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.pop .ln { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; padding: 1px 0; }
.group-toggle { width: 100%; text-align: left; background: #FBF9F4; border: 0; border-top: 1px solid var(--hairline); padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.group-toggle .chev { transition: transform var(--t-micro) var(--ease); display: inline-block; }
.group-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* ---- 10. Dues / bars ----------------------------------------------------- */
.two-nums { display: flex; gap: 48px; align-items: flex-end; flex-wrap: wrap; }
.big-num { font-size: 28px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bar { height: 6px; background: var(--sand); border-radius: 99px; overflow: hidden; margin-top: 16px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--positive); border-radius: 99px; transition: width var(--t-tide) var(--ease); }
.month-nav { display: inline-flex; align-items: center; gap: 4px; }
.month-nav b { min-width: 96px; text-align: center; font-weight: 600; }

/* ---- 11. 1099 ring ------------------------------------------------------- */
.ring-wrap { display: flex; align-items: center; gap: 20px; }
.ring { width: 76px; height: 76px; flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring .trk { stroke: var(--sand); }
.ring .val { stroke: var(--positive); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset var(--t-tide) var(--ease); }
.ring text { font: 600 15px var(--font); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }

/* ---- 12. Reports spark bars --------------------------------------------- */
svg.spark { display: block; width: 140px; height: 12px; }   /* R2-F-polish6 */
svg.spark rect { rx: 2; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---- 13. Integrations + import ------------------------------------------ */
.int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.int-card { display: flex; flex-direction: column; gap: 12px; }
.int-card .hd { display: flex; align-items: center; gap: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.ok { background: var(--positive); } .dot.warn { background: var(--warning); } .dot.bad { background: var(--danger); }
.log { background: #0F1D30; color: #D7E0EC; border-radius: var(--r-sm); padding: 12px 14px; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 20px; }
.log div { animation: enter var(--t-std) var(--ease); }
.log .ok { color: #7FD6AE; } .log .dim { color: #8CA0B8; }
pre.code { background: var(--sand); border-radius: var(--r-sm); padding: 10px 12px; font: 12px/1.5 ui-monospace, Menlo, monospace; overflow: auto; margin: 0; }
.stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--faint-text); font-weight: 600; font-size: 13px; }
.step .n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; font-size: 11px; background: var(--card); }
.step.on { color: var(--ink); } .step.on .n { background: var(--ink); color: #fff; border-color: var(--ink); }
.step.done .n { background: var(--positive); color: #fff; border-color: var(--positive); }
.step-line { flex: 1; height: 1px; background: var(--hairline); max-width: 80px; }
.drop {
  border: 1.5px dashed var(--hairline); border-radius: var(--r-md); padding: 48px 24px; text-align: center; background: var(--card);
  transition: all var(--t-micro) var(--ease); color: var(--muted);
}
.drop.over { border-color: var(--cobalt); background: var(--cobalt-soft); }
.drop b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.drop .names { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); padding: 0 12px; }
.tab { background: none; border: 0; height: 44px; padding: 0 12px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; position: relative; }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--cobalt); }
.tab .count { margin-left: 6px; font-size: 11px; background: var(--sand); border-radius: 99px; padding: 1px 7px; }
.diff-old { text-decoration: line-through; color: var(--muted); margin-right: 6px; }
.diff-new { color: var(--ink); font-weight: 600; }

/* ---- 14. Slide-over, palette, toast ------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(16,35,58,.28); z-index: 40; opacity: 0; transition: opacity var(--t-std) var(--ease); }
.scrim.on { opacity: 1; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 41; background: var(--card);
  border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--shadow-pop); transform: translateX(100%);
  transition: transform var(--t-std) var(--ease); display: flex; flex-direction: column;
}
.panel.on { transform: none; }
.panel.wide { width: 680px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--hairline); }
.panel-body { padding: 20px 24px 32px; overflow-y: auto; flex: 1; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.palette { position: fixed; z-index: 70; top: 14vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; border: 1px solid var(--hairline); }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--hairline); height: 52px; padding: 0 20px; font: 16px var(--font); background: transparent; color: var(--ink); outline: none; }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow-y: auto; }
.palette li { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 44px; border-radius: var(--r-sm); cursor: pointer; }
.palette li[aria-selected="true"] { background: var(--cobalt-soft); }
.palette li .k { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.palette .none { padding: 20px; text-align: center; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 80; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-size: 13px; box-shadow: var(--shadow-pop); transition: all var(--t-std) var(--ease); display: flex; gap: 12px; align-items: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); }
.toast button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 0; }
.skel { background: linear-gradient(90deg, var(--sand) 0%, #F6F1E8 50%, var(--sand) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- 15. Login ----------------------------------------------------------- */
.login { display: grid; grid-template-columns: 55fr 45fr; min-height: 100vh; }
.login-hero {
  position: relative; overflow: hidden; background: linear-gradient(170deg, #F4E3BC 0%, #EBD3A3 30%, #A9BBD2 70%, #5C7CA3 100%);
}
.login-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; max-width: none; }
.login-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(16,35,58,0), rgba(16,35,58,.55)); }
.login-hero .tag { text-wrap: balance; position: absolute; left: 48px; right: 48px; bottom: 44px; z-index: 2; color: #FBF8F1; font-size: 22px; letter-spacing: -.01em; font-weight: 600; line-height: 1.3; max-width: 420px; text-shadow: 0 1px 12px rgba(16,35,58,.35); }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.login-box { width: 100%; max-width: 380px; margin: 0 auto; }
.login-box .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.login-box .logo img { width: 36px; height: 36px; }
.login-box .logo b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.login-box h1 { font-size: 24px; letter-spacing: -.015em; margin-bottom: 6px; }
.login-box .lead { color: var(--muted); margin-bottom: 28px; }
.role-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; height: 64px; padding: 0 18px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; font-weight: 600; font-size: 15px;
  transition: all var(--t-micro) var(--ease);
}
.role-btn:hover { border-color: var(--cobalt); background: var(--cobalt-soft); color: var(--cobalt); transform: translateY(-1px); }
.role-btn small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.role-btn:hover small { color: var(--cobalt); }
.role-btn .arrow { margin-left: auto; opacity: .35; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint-text); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.login-box .fine { margin-top: 24px; font-size: 12px; color: var(--faint-text); text-align: center; }

/* ---- 16. Agent portal (mobile first) ------------------------------------ */
.pshell { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.ptop { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.ptop img { width: 32px; height: 32px; }
.ptop .nm { flex: 1; min-width: 0; line-height: 1.2; }
.ptop .nm b { display: block; font-size: 15px; } .ptop .nm span { font-size: 12px; color: var(--muted); }
.pbody { padding: 8px 16px calc(72px + env(safe-area-inset-bottom));   /* R2-F-polish11: last card clears the tab bar */
  display: flex; flex-direction: column; gap: 16px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center;
  background: rgba(247,244,238,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar nav { display: flex; width: 100%; max-width: 560px; }
.tabbar a { flex: 1; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; }
.tabbar a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--cobalt); }
.hero-num { text-align: left; }
.hero-num .big { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 6px 0 14px; }
.hero-num .meter { margin-bottom: 10px; }
.prow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--hairline); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; }
.prow:last-child { border-bottom: 0; }
.prow .grow b { display: block; font-weight: 600; } .prow .grow span { font-size: 12px; color: var(--muted); }
.prow.static { cursor: default; }
.card.settled { border-top: 2px solid var(--gold); }

/* ---- 17. Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-grid { grid-template-columns: 1fr; }
  .wf-card { position: static; }
}
@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 50; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform var(--t-std) var(--ease); box-shadow: var(--shadow-pop); }
  .rail.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 16px; } .page { padding: 24px 16px; }
  .search { max-width: none; }
  .int-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-form { padding: 32px 20px; }
  .panel { width: 100vw; border-radius: 0; }
  .crumb { display: none; }
  /* QA-15: the search pill wrapped "Search deals, agents, addresses" onto three lines beside a shrunken icon on a phone. */
  .search { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .search svg { flex: none; }
  .search kbd { display: none; }
  .form-row, .form-row.three { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi { padding: 14px; } .kpi .v { font-size: 22px; }
  .page-head { margin-bottom: 16px; }
}

/* ---- 18. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---- 18b. ASK PORTARA (chat tab in the agent portal) --------------------
   # ASK: user bubbles cobalt, assistant bubbles white and carrying their cards (concept: email/concept/ask_portara.html).
   The composer is sticky above the tab bar (60px + safe area). No inline styles; everything is a class. */
.ask { display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 190px); }
.ask-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.ask-head b { display: block; font-size: 17px; } .ask-head span:not(.ask-mark) { font-size: 12px; color: var(--muted); }
.ask-mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--gold); border-radius: 9px; background: var(--card);
  font: 600 20px/1 Georgia, "Times New Roman", serif; color: var(--ink); }
.ask-empty { padding: 18px 2px 4px; }
.ask-empty h1 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 6px; }
.ask-empty p { margin: 0 0 16px; }
.ask-chips { display: flex; flex-direction: column; gap: 8px; }
.ask-chip { text-align: left; min-height: 48px; padding: 10px 16px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--card); color: var(--ink); font: 600 15px/1.3 var(--font); cursor: pointer; }
.ask-chip:hover { border-color: var(--cobalt); color: var(--cobalt); }
.ask-thread { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ask-row { display: flex; scroll-margin-bottom: 150px; }
.ask-row.me { justify-content: flex-end; }
.ask-bub { max-width: 92%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ask-bub p { margin: 0; }
.ask-bub.me { background: var(--cobalt); color: #fff; border-bottom-right-radius: 5px; max-width: 82%; }
.ask-bub.bot { background: var(--card); border: 1px solid var(--hairline); border-bottom-left-radius: 5px; width: 100%; max-width: 100%; }
.ask-bub.bot.err { border-color: #E5BDBA; background: var(--danger-soft); color: var(--danger); }
.ask-bub.err .btn { margin-top: 10px; color: var(--ink); }
.ask-bub .ask-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #FBF9F5; }
.ask-bub .ask-card .eyebrow { display: block; }
.ask-big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 6px 0 12px; }
.ask-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; }
.ask-kv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ask-rule { border: 0; border-top: 1px solid var(--gold); margin: 6px 0; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
.ask-card .small { margin: 10px 0 0; }
.ask-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.ask-line:last-of-type { border-bottom: 0; }
.ask-line.top { padding-top: 0; }
.ask-line .grow { flex: 1; min-width: 0; }
.ask-line .grow b { display: block; font-weight: 600; text-wrap: balance; }
.ask-line .grow span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ask-bub.typing { display: inline-flex; gap: 5px; align-items: center; width: auto; padding: 14px 16px; }
.ask-bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: pulse 1.1s infinite ease-in-out; }
.ask-bub.typing i:nth-of-type(2) { animation-delay: .18s; } .ask-bub.typing i:nth-of-type(3) { animation-delay: .36s; }
.ask-form { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 8px; padding: 8px; margin: 0 -4px;
  background: rgba(247,244,238,.96); border: 1px solid var(--hairline); border-radius: 30px; box-shadow: 0 -6px 18px rgba(16,35,58,.06); }
.ask-input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 12px; font: 400 16px var(--font); color: var(--ink); }   /* 16px: iOS does not zoom */
.ask-input:focus, .ask-input:focus-visible { outline: none !important; box-shadow: none !important; border: 0; }   /* the form carries the focus ring (:focus-within) */
.ask-form:focus-within { border-color: var(--cobalt); box-shadow: var(--focus); }
.ask-send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--cobalt); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ask-send svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-form[data-busy] .ask-send { opacity: .5; pointer-events: none; }
.ask-foot { margin: 18px 2px 0; }
.ask-entry { display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border: 0; border-top: 2px solid var(--gold); text-decoration: none; }
.ask-entry:hover { text-decoration: none; background: #17304E; }
.ask-entry .ask-mark { background: transparent; color: #fff; border-color: var(--gold); }
.ask-entry .grow { flex: 1; min-width: 0; } .ask-entry b { display: block; font-size: 17px; } .ask-entry span:not(.ask-mark):not(.arrow) { font-size: 13px; color: #C9D2DD; }
.ask-entry .arrow { font-size: 20px; color: var(--gold); }
.ask-entry:focus-visible { box-shadow: var(--focus); outline: none; }

/* ---- 19. Print (statements / CDA summaries) ----------------------------- */
@media print {
  body::before, .rail, .topwrap, .tabbar, .scrim, .toast, .btn, .skip, .palette { display: none !important; }
  .app { display: block; } .page, .pshell { max-width: none; padding: 0; }
  body { background: #fff; }
  .card { border-color: #ccc; break-inside: avoid; }
  .panel { position: static; transform: none; box-shadow: none; width: auto; }
}

/* ---- 20. Utilities used by screens ------------------------------------- */
.spaced { margin-top: 16px; } .spaced-sm { margin-top: 8px; } .center { justify-content: center; }
.kbd-hint { padding-bottom: 6px; }

/* ---- 21. Pay-day hero (Today, above KPIs) ------------------------------- */
/* Ink panel with a cobalt wash and a warm warning accent line; gold + sunrise when everything is paid. */
.payday {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 24px; padding: 28px 32px;
  border-radius: var(--r-lg); color: #F7F4EE; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #25489a 0%, rgba(37,72,154,0) 55%), linear-gradient(135deg, #10233A 0%, #162e4d 100%);
  box-shadow: inset 0 3px 0 #D9A441;
}
.payday .eyebrow { color: #E9D49A; }
.pd-main { flex: 1; min-width: 0; }
.pd-title { font-size: 28px; font-weight: 600; letter-spacing: -.015em; margin: 6px 0 4px; line-height: 1.2; }
.pd-sub { color: #C9D4E3; margin-bottom: 18px; }
.pd-bar { display: flex; align-items: center; gap: 16px; max-width: 520px; }
.pd-bar .meter { flex: 1; background: rgba(255,255,255,.16); }
.pd-bar .meter > i { background: #E9B95A; }
.pd-bar .meter.full > i { background: #E9D49A; }
.pd-count { font-size: 13px; color: #E6ECF5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payday .btn { background: #fff; color: var(--ink); border-color: #fff; min-width: 168px; }
.payday .btn.pd-cta { background: #E9B95A; border-color: #E9B95A; color: #10233A; }
.payday .btn:hover { background: #F3EAD1; border-color: #F3EAD1; }
.payday.done { background: radial-gradient(120% 160% at 100% 0%, #F3E2B0 0%, rgba(243,226,176,0) 60%), linear-gradient(135deg, #FFF9EA 0%, #F7EFD8 100%); color: var(--ink); box-shadow: inset 0 3px 0 var(--gold); border: 1px solid #EADDB7; }
.payday.done .eyebrow { color: #7A5E1B; } .payday.done .pd-sub { color: var(--muted); } .payday.done .pd-count { color: var(--ink); }
.payday.done .pd-bar .meter { background: rgba(16,35,58,.08); }
.payday.done .btn { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- 22. Collections view ----------------------------------------------- */
.coll-head .bar { margin-top: 16px; }
.crow {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--hairline);   /* R2-A14: no resting max-height / overflow clip (it cut wrapped actions on mobile + zoom) */
  transition: max-height var(--t-std) var(--ease), opacity var(--t-std) var(--ease), padding var(--t-std) var(--ease), background var(--t-micro);
}
.crow:last-child { border-bottom: 0; }
.crow.sel { background: #FBF9F4; box-shadow: inset 3px 0 0 var(--cobalt); }
.crow.out { overflow: hidden; max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.crow .avatar { width: 40px; height: 40px; font-size: 13px; }
.crow .who { min-width: 160px; }
.crow .why { margin-top: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crow .amt { text-align: right; min-width: 100px; } .crow .amt .money { font-weight: 600; font-size: 15px; display: block; }
.crow .late { color: var(--warning); font-weight: 600; }
.crow .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }
.chips-sm { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chips-sm:empty { display: none; }
.rchip { background: var(--cobalt-soft); color: var(--cobalt); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.menu { position: fixed; z-index: 90; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column; min-width: 150px; }
.menu button { text-align: left; background: none; border: 0; height: 34px; padding: 0 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.menu button:hover, .menu button:focus { background: var(--cobalt-soft); color: var(--cobalt); outline: none; }
textarea.composer { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* ---- 23. Report cards + email preview ----------------------------------- */
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rcard { display: flex; flex-direction: column; gap: 10px; } .rcard .ico { width: 36px; height: 36px; }
.inbox-mock { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: #F3F1EC; }
.inbox-mock .mh { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--hairline); }
.mail-frame { width: 100%; height: 460px; border: 0; display: block; background: #F4F1EA; }

@media (max-width: 900px) {
  .payday { flex-direction: column; align-items: stretch; padding: 22px; } .pd-title { font-size: 22px; }
  .crow { flex-wrap: wrap; } .crow .acts { max-width: none; justify-content: flex-start; width: 100%; }
  .report-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   24. Round-2 review additions (R2-*)
   ========================================================================== */
/* R2-A12: forced-colors / high-contrast users get a real outline (box-shadow focus rings vanish there). */
@media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } .btn, .input, .select { border: 1px solid ButtonText; } }
/* R2-A14: 16px form text on touch widths stops iOS from zooming the page on focus. */
@media (max-width: 760px) { .input, .select, textarea.composer, .palette input { font-size: 16px; } }
/* R2-F-polish3: quiet = hairline-only 13px; the contextual primary stays ink-filled (.btn.primary). */
.btn.quiet { font-size: 13px; font-weight: 400; color: var(--ink); background: transparent; border-color: var(--hairline); }
.btn.quiet:hover { background: var(--sand); border-color: var(--hairline); }
.btn.sm.primary { color: #fff; }
/* R2-F-polish1: slim "all paid" strip with a gold top hairline (Today, after pay day is fully collected). */
.paid-strip { margin-bottom: 24px; padding: 12px 18px; background: var(--positive-soft); color: var(--ink); border: 1px solid #CFE6DA; border-top: 2px solid var(--gold); border-radius: var(--r-md); font-size: 13px; }
.paid-strip b { color: var(--positive); }
/* R2-F-polish2: the settled/empty collections state gets a gold rule above it. */
.empty.settled-rule { border-top: 2px solid var(--gold); border-radius: 0 0 var(--r-md) var(--r-md); }
/* R2-F5: muted note that replaces "Run dues" once the month has run. */
.ran-note { color: var(--muted); font-size: 13px; padding: 0 6px; }
/* R2-F12: locked deal banner. */
.lock-note { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: #5B4510; font-size: 13px; font-weight: 600; }
.lock-note svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wf.stale, .wf-card .stale { opacity: .55; transition: opacity var(--t-micro); }
.wf-unavailable { padding: 18px 4px; }
.save-hint { margin-top: 8px; min-height: 18px; }
/* R2-A6: "Did you send it?" confirmation under the composer button. */
.sent-confirm { border: 1px solid var(--hairline); background: var(--sand); border-radius: var(--r-md); padding: 12px 14px; }
.sent-confirm p { margin-bottom: 10px; font-size: 13px; }
.btn.disabled, a.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Persona switcher chip in the rail footer + menu chrome */
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; background: none; border: 0; padding: 4px; border-radius: var(--r-sm); text-align: left; color: inherit; }
button.user-chip { cursor: pointer; } button.user-chip:hover { background: var(--sand); }
.user-chip .who { min-width: 0; flex: 1; }
.user-chip .who b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who span { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.menu .menu-title { padding: 6px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); max-width: 260px; }
.menu button[aria-current="true"] { font-weight: 600; color: var(--cobalt); }
.panel-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.field.passcode { margin-bottom: 12px; }
.prow .addr { text-wrap: balance; font-size: 15px; }