/* Balance Board — Simplified UX Prototype
   Design tokens are lifted verbatim from the production stylesheet. The brief asks
   to evaluate information architecture, not branding, so the palette, typography and
   dark mode are deliberately unchanged. What differs here is layout and hierarchy. */
:root {
  color-scheme: light;
  --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e8eef6;
  --border: #d8dee8; --border-strong: #b8c2d1;
  --text: #0f172a; --text-soft: #334155; --muted: #64748b; --muted-2: #94a3b8;
  --accent: #0369a1; --accent-soft: #e0f2fe;
  --success: #15803d; --success-soft: #dcfce7;
  --warning: #b45309; --warning-soft: #fef3c7;
  --danger: #b91c1c; --danger-soft: #fee2e2;
  --info: #2563eb; --info-soft: #dbeafe;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --font-sans: "Geist","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono: "JetBrains Mono","SF Mono","Roboto Mono",ui-monospace,monospace;
  --sidebar-bg: #0f172a; --sidebar-bg-hover: #1e293b; --sidebar-text: #e2e8f0; --sidebar-muted: #94a3b8;
  --on-accent: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 22%, transparent);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14; --surface: #111827; --surface-2: #172033; --surface-3: #1f2937;
  --border: #263244; --border-strong: #334155;
  --text: #e5e7eb; --text-soft: #cbd5e1; --muted: #94a3b8; --muted-2: #64748b;
  --accent: #38bdf8; --accent-soft: rgba(56,189,248,.14);
  --success: #22c55e; --success-soft: rgba(34,197,94,.14);
  --warning: #f59e0b; --warning-soft: rgba(245,158,11,.14);
  --danger: #ef4444; --danger-soft: rgba(239,68,68,.14);
  --info: #60a5fa; --info-soft: rgba(96,165,250,.14);
  --shadow-sm: none; --shadow-md: none;
  --sidebar-bg: #0d1420; --sidebar-bg-hover: #1a2537; --on-accent: #04212f;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; }
a { color: var(--accent); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding: 14px 10px; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 6px 10px 14px; display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #0369a1, #38bdf8);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.brand-name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.brand-sub { font-size: 10px; color: var(--sidebar-muted); letter-spacing: .04em; text-transform: uppercase; }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--sidebar-text); font-size: 13.5px; text-align: left;
}
.nav-item:hover { background: var(--sidebar-bg-hover); }
.nav-item.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.nav-item .badge {
  margin-left: auto; background: var(--danger); color: #fff;
  border-radius: 999px; padding: 1px 6px; font-size: 11px; font-weight: 600;
}
.nav-item.active .badge { background: rgba(0,0,0,.28); }
.nav-sep { height: 1px; background: rgba(255,255,255,.1); margin: 10px 6px; }
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--sidebar-muted); padding: 8px 10px 4px; }
.sidebar-foot { margin-top: auto; padding: 8px 6px 0; display: grid; gap: 8px; }
.role-select {
  width: 100%; background: var(--sidebar-bg-hover); color: var(--sidebar-text);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12.5px;
}
.role-hint { font-size: 10.5px; color: var(--sidebar-muted); padding: 0 2px; line-height: 1.35; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 17px; letter-spacing: -.01em; }
.topbar .spacer { flex: 1; }
.search-trigger {
  display: flex; align-items: center; gap: 8px; min-width: 300px;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); font-size: 13px;
}
.search-trigger:hover { border-color: var(--border-strong); }
.search-trigger kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted-2);
}
.content { padding: 20px; max-width: 1220px; width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.tiny { padding: 4px 9px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.block { width: 100%; }
.btn.xl { padding: 12px 20px; font-size: 15px; }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 16px; }
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 14px 15px; }
.panel-body.flush { padding: 0; }
.empty { padding: 26px 15px; text-align: center; color: var(--muted); font-size: 13px; }
.empty strong { display: block; color: var(--text-soft); font-size: 14px; margin-bottom: 3px; font-weight: 600; }

/* ---------- Needs Attention ---------- */
.attn-list { display: flex; flex-direction: column; }
.attn {
  display: grid; grid-template-columns: 3px 1fr auto; gap: 0 14px; align-items: center;
  padding: 12px 15px 12px 0; border-bottom: 1px solid var(--border);
}
.attn:last-child { border-bottom: 0; }
.attn:hover { background: var(--surface-2); }
.attn-bar { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--muted-2); }
.attn.sev-high .attn-bar { background: var(--danger); }
.attn.sev-med .attn-bar { background: var(--warning); }
.attn.sev-low .attn-bar { background: var(--info); }
.attn-main { min-width: 0; cursor: pointer; }
.attn-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.attn-what { font-weight: 600; font-size: 14px; }
.attn-ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.attn-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.attn-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.attn-age { color: var(--warning); font-weight: 500; }
.attn.sev-high .attn-age { color: var(--danger); }
.attn-act { display: flex; gap: 6px; }

/* ---------- Tables ---------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 9px 15px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.grid td { padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--surface-2); }
td.right, th.right { text-align: right; }
td.amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-3); color: var(--text-soft); white-space: nowrap;
}
.chip.ok { background: var(--success-soft); color: var(--success); }
.chip.warn { background: var(--warning-soft); color: var(--warning); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.buy { background: var(--info-soft); color: var(--info); }
.chip.sell { background: var(--warning-soft); color: var(--warning); }
.chip.brokered { background: var(--accent-soft); color: var(--accent); }

/* ---------- Liquidity / metric rows ---------- */
.liq { display: grid; grid-template-columns: repeat(4, 1fr); }
.liq-cell { padding: 13px 15px; border-right: 1px solid var(--border); }
.liq-cell:last-child { border-right: 0; }
.liq-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.liq-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; margin-top: 3px; letter-spacing: -.02em; }
.liq-note { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.liq-value.pending { color: var(--muted); font-size: 17px; }

.today-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.today-cell { padding: 11px 15px; border-right: 1px solid var(--border); }
.today-cell:last-child { border-right: 0; }
.today-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.today-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Trade Workspace ---------- */
.ws-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 60;
  display: flex; justify-content: flex-end;
}
.ws {
  width: min(600px, 100%); background: var(--surface); height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-md);
  border-left: 1px solid var(--border);
}
.ws-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.ws-id { font-family: var(--font-mono); font-size: 17px; font-weight: 600; }
.ws-side { font-size: 12px; color: var(--muted); margin-top: 1px; }
.ws-body { overflow-y: auto; flex: 1; }
.ws-amounts { padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 26px; align-items: baseline; }
.ws-fiat { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ws-usdt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--muted); }
.ws-facts { padding: 12px 18px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.ws-fact dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ws-fact dd { margin: 1px 0 0; font-size: 13.5px; }

/* The single dominant action. Deliberately the loudest thing on screen. */
.next-action { padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--accent-soft); }
.next-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.next-title { font-size: 17px; font-weight: 600; margin: 5px 0 12px; }
.next-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.next-action.settled { background: var(--success-soft); }
.next-action.settled .next-label { color: var(--success); }
.next-action.blocked { background: var(--danger-soft); }
.next-action.blocked .next-label { color: var(--danger); }

/* Exception block — appears only when a trade actually became complex. */
.exception { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--danger-soft); }
.exception.aml_review { background: var(--warning-soft); }
.exc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--danger); }
.exception.aml_review .exc-label { color: var(--warning); }
.exc-title { font-weight: 600; font-size: 14.5px; margin: 4px 0 3px; }
.exc-detail { font-size: 13px; color: var(--text-soft); margin-bottom: 10px; }
.exc-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.exc-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* Progress — completed stages collapse to one evidence line. */
.progress { padding: 8px 18px 14px; }
.stage { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.stage-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); margin-top: 2px; display: grid; place-items: center; font-size: 9px; color: #fff; }
.stage.done .stage-dot { background: var(--success); border-color: var(--success); }
.stage.current .stage-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage-name { font-size: 13.5px; color: var(--muted); }
.stage.done .stage-name { color: var(--text-soft); }
.stage.current .stage-name { color: var(--text); font-weight: 600; }
.stage-evidence { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }

.ws-tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.ws-tab { padding: 9px 12px; border: 0; background: transparent; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; }
.ws-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.ws-pane { padding: 14px 18px 30px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 7px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.timeline-item { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-when { color: var(--muted); font-size: 12px; }
.note { padding: 9px 11px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 13px; }
.note-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.doc-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.doc-row:last-child { border-bottom: 0; }

/* ---------- Search overlay ---------- */
.search-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 80; display: flex; justify-content: center; padding-top: 9vh; }
.search-box { width: min(640px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); height: fit-content; max-height: 74vh; display: flex; flex-direction: column; }
.search-input { width: 100%; padding: 15px 18px; border: 0; background: transparent; font-size: 16px; outline: none; border-bottom: 1px solid var(--border); }
.search-results { overflow-y: auto; padding: 6px; }
.search-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 9px 12px 5px; font-weight: 600; }
.search-hit { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.search-hit:hover, .search-hit.sel { background: var(--accent-soft); }
.search-hit .hit-main { flex: 1; min-width: 0; }
.search-hit .hit-title { font-size: 13.5px; font-weight: 500; }
.search-hit .hit-sub { font-size: 12px; color: var(--muted); }
.search-foot { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted-2); display: flex; gap: 14px; }

/* ---------- New Trade ---------- */
.nt-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 70; display: grid; place-items: start center; padding: 6vh 16px 16px; overflow-y: auto; }
.nt { width: min(470px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.nt-head { padding: 15px 18px 0; }
.nt-body { padding: 15px 18px 18px; display: grid; gap: 13px; }
.side-toggle { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.side-btn { padding: 9px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
.side-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); font-size: 14px;
}
.field input:focus, .field select:focus { outline: 3px solid var(--focus-ring); outline-offset: 0; border-color: var(--accent); }
.field input.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* Inferred context: the payoff of automation is that it is visible. */
.inferred { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inferred .chip { font-size: 10.5px; padding: 1px 6px; }
.calc-note { font-size: 11px; color: var(--accent); font-weight: 500; }
.nt-foot { padding: 0 18px 18px; }
.advanced-toggle { font-size: 12.5px; color: var(--muted); background: none; border: 0; padding: 4px 0; text-align: left; }
.advanced-toggle:hover { color: var(--text); }

/* ---------- Secondary nav (tabs within a section) ---------- */
.subnav { display: flex; gap: 3px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.subnav button { padding: 8px 13px; border: 0; background: transparent; color: var(--muted); font-size: 13.5px; border-bottom: 2px solid transparent; }
.subnav button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.section-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

/* ---------- Records ---------- */
.rec-search { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; margin-bottom: 14px; }
.rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--border); cursor: pointer; }
.rec-row:last-child { border-bottom: 0; }
.rec-row:hover { background: var(--surface-2); }
.rec-name { font-weight: 500; font-size: 13.5px; }
.rec-sub { font-size: 12px; color: var(--muted); }
.avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-soft); flex: none; }

/* ---------- Mobile ---------- */
.mobile-only { display: none; }
.mob-nav { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .content { padding: 12px 12px 84px; }
  .topbar { padding: 10px 12px; }
  .topbar h1 { font-size: 16px; }
  .search-trigger { min-width: 0; flex: 1; }
  .search-trigger kbd { display: none; }

  .liq, .today-strip { grid-template-columns: 1fr 1fr; }
  .liq-cell:nth-child(2n) { border-right: 0; }
  .liq-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .today-cell:nth-child(2n) { border-right: 0; }
  .today-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

  .mob-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mob-nav button {
    padding: 9px 0 11px; border: 0; background: transparent; color: var(--muted);
    font-size: 10.5px; display: grid; gap: 3px; justify-items: center; position: relative;
  }
  .mob-nav button.active { color: var(--accent); font-weight: 600; }
  .mob-nav .ico { font-size: 17px; line-height: 1; }
  .mob-nav .dot { position: absolute; top: 6px; right: calc(50% - 17px); width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }

  /* Trade workspace becomes a full sheet, not a squeezed drawer. */
  .ws-backdrop { align-items: flex-end; }
  .ws { width: 100%; height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-left: 0; }
  .ws-facts { grid-template-columns: 1fr; }
  .ws-fiat { font-size: 24px; }
  .nt-backdrop { padding: 0; }
  .nt { width: 100%; min-height: 100%; border-radius: 0; }
  .search-backdrop { padding-top: 0; }
  .search-box { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }

  /* Mobile trade cards replace the desktop table outright. */
  .mob-card { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .mob-card:last-child { border-bottom: 0; }
  .mob-card-top { display: flex; align-items: baseline; gap: 8px; }
  .mob-card-ref { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
  .mob-card-amt { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
  .mob-card-client { font-size: 14px; font-weight: 500; margin-top: 2px; }
  .mob-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
  .attn { grid-template-columns: 3px 1fr; }
  .attn-act { grid-column: 2; margin-top: 9px; }
  .attn-act .btn { flex: 1; }
}
@media (min-width: 861px) { .mobile-only { display: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 17px; border-radius: var(--radius-md);
  font-size: 13.5px; z-index: 200; box-shadow: var(--shadow-md);
}
@media (max-width: 860px) { .toast { bottom: 76px; } }

/* ---------------------------------------------------------------------------
   Mobile: the screens added when this interface moved onto the live backend.
   The operational surfaces already had a phone treatment; treasury, admin and
   reference screens did not, and dense tables were pushing the page sideways.
   --------------------------------------------------------------------------- */

/* A table never widens the page. It scrolls inside its own panel instead.
   This is the safety net for every table, including ones added later. */
.panel-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ws-pane, .nt-body { overflow-x: hidden; }

@media (max-width: 860px) {
  /* Reference and admin tables stay tabular but scroll, with a hint that they do. */
  .panel-body.flush > table.grid { min-width: 520px; }
  .panel-body.flush { scrollbar-width: thin; }

  /* Anything tappable clears roughly 40px. Three actions per treasury row at
     24px was a genuine miss on a phone. */
  .btn { padding: 10px 14px; font-size: 14px; }
  .btn.tiny { padding: 8px 12px; font-size: 13px; }
  .btn.ghost { padding: 8px 10px; }
  .subnav button { padding: 11px 14px; }
  .ws-tab { padding: 12px 13px; }
  .rec-row { padding: 14px 15px; }
  .doc-row { padding: 12px 0; }

  /* Card treatment for the treasury screens, which are daily work.
     Admin and audit stay tabular — they are not phone tasks. */
  .acct-card { padding: 13px 15px; border-bottom: 1px solid var(--border); }
  .acct-card:last-child { border-bottom: 0; }
  .acct-top { display: flex; align-items: baseline; gap: 9px; }
  .acct-name { font-weight: 600; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
  .acct-bal { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
              font-weight: 600; font-size: 15px; white-space: nowrap; }
  .acct-sub { font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
  .acct-actions { display: flex; gap: 7px; margin-top: 10px; }
  .acct-actions .btn { flex: 1; }

  /* Movement rows read as a list, not a five-column grid. */
  .mv-card { display: flex; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--border); align-items: baseline; }
  .mv-card:last-child { border-bottom: 0; }
  .mv-main { flex: 1; min-width: 0; }
  .mv-what { font-size: 13.5px; overflow-wrap: anywhere; }
  .mv-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .mv-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

  /* Dialogs: full height, and the action stays reachable above the keyboard. */
  .nt { display: flex; flex-direction: column; }
  .nt-body { flex: 1; overflow-y: auto; }
  .nt-foot { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border);
             padding-top: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .field input, .field select { font-size: 16px; }   /* 16px stops iOS zooming on focus */

  /* Sign-in on a phone. */
  .gate { padding: 16px; align-items: start; padding-top: 8vh; }
  .gate-card { padding: 20px; }

  /* The wallet picker on Wallet Activity sat next to a button and overflowed. */
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .panel-head .role-select { width: 100%; }
}

@media (max-width: 380px) {
  .liq, .today-strip { grid-template-columns: 1fr; }
  .liq-cell, .today-cell { border-right: 0; border-bottom: 1px solid var(--border); }
  .liq-cell:last-child, .today-cell:last-child { border-bottom: 0; }
}