/* Design tokens: warm paper + ink, serif display, Geist for UI and figures. */
:root {
  color-scheme: light;
  --paper: #f6f5f3;
  --surface: #fdfcfa;
  --wash: #eceae7;
  --ink: #1a1410;
  --ink-2: #3a322a;
  --muted: #6e6254;
  --faint: #b8b4ab;
  --line: rgba(26, 20, 16, 0.10);
  --line-2: rgba(26, 20, 16, 0.18);
  --btn-ink: #f6f5f3;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --critical: #d03b3b;
  --serif: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15110e;
    --surface: #1f1a16;
    --wash: #2a241f;
    --ink: #f6f5f3;
    --ink-2: #d9d4cc;
    --muted: #a89d90;
    --faint: #5e554c;
    --line: rgba(246, 245, 243, 0.10);
    --line-2: rgba(246, 245, 243, 0.18);
    --btn-ink: #1a1410;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --good-text: #0ca30c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15110e; --surface: #1f1a16; --wash: #2a241f; --ink: #f6f5f3; --ink-2: #d9d4cc;
  --muted: #a89d90; --faint: #5e554c; --line: rgba(246, 245, 243, 0.10); --line-2: rgba(246, 245, 243, 0.18);
  --btn-ink: #1a1410; --series-1: #3987e5; --series-2: #d95926; --good-text: #0ca30c;
  --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Shell */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; }
.brand { font-family: var(--serif); font-size: 25px; text-decoration: none; letter-spacing: -0.03em; padding: 0 6px; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
/* Logo mark: drawn in the theme's colours, so it inverts in dark mode (light tile, dark lines). */
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark .bm-tile { fill: var(--ink); }
.brand-mark .bm-ink { fill: var(--paper); }
.brand-mark .bm-dot { fill: #eb6834; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a { text-decoration: none; padding: 5px 12px; border-radius: 999px; color: var(--ink-2); font-size: 13px; }
#nav a:hover { background: var(--wash); }
#nav a.active { background: var(--ink); color: var(--btn-ink); }
/* Menu sections: "Integrations" (custody accounting) and "Chainscan" (on-chain wallets). */
#nav { min-height: 0; overflow-y: auto; }
.nav-group { margin: 12px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav-group.nav-gap { margin: 6px 0 0; }
#nav a.nav-sub { padding-left: 26px; font-size: 12px; color: var(--muted); }
#nav a.nav-sub:not(.active):hover { color: var(--ink); }
#nav a.nav-sub.active { color: var(--btn-ink); }
.nav-group[data-group] { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.nav-group[data-group]:hover { color: var(--ink); }
.nav-group[data-group]::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -2px 0 0 auto; transition: transform .15s; }
.nav-group.collapsed::after { transform: rotate(-45deg); margin-top: 0; }
/* Section headers (Integrations, Chainscan) stand out; their pages sit indented below them. Settings
   follows the empty .nav-gap group and is not indented. */
.nav-group[data-group] { margin-top: 16px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
#nav .nav-group[data-group] ~ a { margin-left: 10px; }
#nav .nav-group.nav-gap ~ a { margin-left: 0; }
#nav a.nav-hidden { display: none; }
#nav .nav-off { display: none; }
#nav .nav-removed { display: none; }
.sidebar-foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 0 10px; }
.view { padding: 22px 28px 64px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 900px; }

/* Controls */
button, .btn { font: inherit; font-size: 13px; border-radius: 999px; padding: 6px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--btn-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
button.ghost:hover { background: var(--wash); }
button.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; border-radius: 0; }
button.danger { background: transparent; color: var(--critical); border-color: var(--line-2); }
button:disabled { opacity: 0.5; cursor: default; }
button.sm { padding: 3px 10px; font-size: 12px; }
input, select, textarea { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
/* Bulk action bar (Vaults): one calm line, controls inline. */
.bulkbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 8px 10px 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--wash); font-size: 13px; }
.bulkbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.bulkbar select { min-width: 150px; }
.bulkbar button:first-of-type { margin-left: auto; }
/* Settings · Classification: calm lists side by side; stacked on narrow screens. */
.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; margin-top: 6px; }
@media (max-width: 1100px) { .class-grid { grid-template-columns: minmax(0, 1fr); } }
.cl-head { display: flex; align-items: baseline; gap: 8px; }
.cl-head h4 { margin: 0; }
.cl-count { font-size: 12px; color: var(--muted); }
.cl-hint { margin: 2px 0 10px; min-height: 2.6em; }
.cl-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cl-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--line); min-height: 44px; }
.cl-row:first-child { border-top: 0; }
.cl-row.editing { background: var(--wash); padding: 10px; }
.cl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cl-actions { display: flex; gap: 2px; opacity: .35; transition: opacity .15s; }
.cl-row:hover .cl-actions, .cl-actions:focus-within { opacity: 1; }
.cl-actions button.icon { padding: 3px 8px; line-height: 1; font-size: 13px; border-color: transparent; }
.cl-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }
.cl-add, .cl-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cl-add { margin-top: 10px; }
.cl-edit { width: 100%; }
.cl-add input, .cl-edit input { flex: 1 1 140px; min-width: 0; }
.cl-add select, .cl-edit select { flex: 1 1 130px; min-width: 0; }
.cl-add.has-extra input, .cl-row.editing .cl-edit input { flex-basis: 100%; }
.cl-edit-btns { display: flex; gap: 6px; margin-left: auto; }
.cl-select { max-width: 160px; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--wash); color: var(--ink-2); white-space: nowrap; }
/* Vaults: one section per workspace type. */
.vault-section + .vault-section { margin-top: 22px; }
.vault-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.vault-section-head h3 { margin: 0; }
/* Workspaces: one compact row per connected workspace. */
.ws-list { padding: 4px 0; }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.ws-row:first-child { border-top: 0; }
.ws-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.ws-title a { color: inherit; text-decoration: none; }
.ws-title a:hover { text-decoration: underline; }
.ws-type select { width: 100%; }
.ws-actions { display: flex; align-items: center; gap: 4px; }
.ws-actions .icon { padding: 4px 9px; line-height: 1; }
@media (max-width: 720px) { .ws-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* Report builder */
.rb-actions { opacity: 1 !important; gap: 8px !important; }
.rb-editor { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chip { padding: 4px 10px; font-size: 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.rb-chip.on { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
.rb-order { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-col { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 2px 4px 2px 10px; border-radius: 6px; background: var(--wash); }
.rb-col button { padding: 0 6px; font-size: 13px; line-height: 1.4; background: transparent; color: var(--ink-2); border: 0; cursor: pointer; }
.rb-col button:disabled { opacity: .25; cursor: default; }
.rb-group td { background: var(--wash); font-weight: 600; }
.rb-sub td { font-weight: 600; border-top: 1px solid var(--line-2); }
label.field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
label.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; background: var(--surface); }
.segmented button, .segmented .btn { border: 0; background: transparent; color: var(--ink-2); padding: 4px 12px; font-size: 12px; }
.segmented button.on, .segmented .btn.on { background: var(--ink); color: var(--btn-ink); }
.segmented button:not(.on):hover, .segmented .btn:not(.on):hover { background: var(--wash); }

/* Cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card > h3 { margin-bottom: 4px; }
.card .sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 16px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hero { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.tile .label { font-size: 13px; color: var(--muted); }
.tile .value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.tile .foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tile.big .value { font-size: 48px; line-height: 1.1; }
.dark-card { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dark-card .label, .dark-card .foot { color: var(--faint); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--wash); }
th.num, td.num { text-align: right; }
/* Vault lists: every row one line, the same height, values in the middle */
.vlist td { height: 40px; padding-top: 4px; padding-bottom: 4px; vertical-align: middle; white-space: nowrap; }
.vlist td input, .vlist td select { padding: 4px 8px; }
/* Fixed column widths: Vaults and each type view (Corporate, Brand, PSP…) line up the same. */
.vlist.fixed { table-layout: fixed; width: 100%; min-width: 1280px; }
.vlist.fixed td { overflow: hidden; text-overflow: ellipsis; }
.vlist.fixed td select { width: 100%; }
.bcadd { font: inherit; font-size: 12px; color: var(--ink-2); background: none; border: 1px dashed var(--line-2); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.bcadd:hover { background: var(--wash); }
.vlist td input.bcedit { width: 160px; }
/* Row buttons in the vault lists: Reconciliation (blue), Statement (green), Details (neutral) */
.rowbtns { display: inline-flex; gap: 6px; justify-content: flex-end; }
.rowbtn { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background 0.12s; }
.rowbtn.rec { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, transparent); border-color: color-mix(in srgb, var(--series-1) 30%, transparent); }
.rowbtn.rec:hover { background: color-mix(in srgb, var(--series-1) 22%, transparent); }
.rowbtn.stmt { color: var(--series-3); background: color-mix(in srgb, var(--series-3) 12%, transparent); border-color: color-mix(in srgb, var(--series-3) 30%, transparent); }
.rowbtn.stmt:hover { background: color-mix(in srgb, var(--series-3) 22%, transparent); }
.rowbtn.det { color: var(--ink-2); background: var(--surface); border-color: var(--line-2); }
.rowbtn.det:hover { background: var(--wash); }
/* Brand reconciliation, Discrepancy log: every coin line the same height, its values in the middle; the coin name lines up with its first line */
.brlog th, .brlog td { padding-left: 6px; padding-right: 6px; }
/* Calm tables: small grey capitals for the head, one thin line under it, faint lines between the rows, a soft wash on hover. */
.brlog th { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 600; border-bottom: 1px solid var(--line-2); }
.brlog td { border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.brlog tbody:last-child tr:last-child td { border-bottom: 0; }
/* The same calm style for the other Brand reconciliation tables (Transactions): rows of one height, values in the middle, totals plain. */
.calm tbody td { vertical-align: middle; height: 36px; }
.calm thead tr + tr th { border-top: 0; }
.calm tfoot th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line-2); border-bottom: 0; }
.brlog tr.lr > td { height: 40px; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; line-height: 1.3; }
.brlog tr.lr > td .small { font-size: 11px; line-height: 1.2; }
.brlog tr.lr > td.lcoin { vertical-align: top; padding-top: 14px; }
.brlog tr.lr select, .brlog tr.lr input { height: 28px; padding: 3px 8px; font-size: 12px; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: 8px; }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill .sw { width: 8px; height: 8px; border-radius: 50%; }
.status { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.good::before { background: var(--good); } .status.warn::before { background: var(--warning); } .status.bad::before { background: var(--critical); }
.tag-spam { color: var(--muted); }

/* Charts */
.hbar { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.hbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar .track { height: 20px; display: flex; align-items: center; }
.hbar .bar { height: 20px; max-width: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar .bar:hover, .hbar .bar:focus { filter: brightness(1.12); outline: none; }
.hbar .val { font-variant-numeric: tabular-nums; color: var(--ink); }
.stackbar { display: flex; gap: 2px; height: 28px; margin: 4px 0 16px; }
.stackbar .seg { position: relative; height: 100%; min-width: 2px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.stackbar .seg span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.stackbar .seg:first-child { border-radius: 4px 0 0 4px; }
.stackbar .seg:last-child { border-radius: 0 4px 4px 0; }
.stackbar .seg:only-child { border-radius: 4px; }
.stackbar .seg:hover, .stackbar .seg:focus { filter: brightness(1.1); outline: none; }
.type-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; font-size: 13px; }
.type-legend .item { display: flex; gap: 8px; align-items: baseline; }
.type-legend .key { width: 10px; height: 10px; border-radius: 2px; flex: none; transform: translateY(1px); }
.type-legend .v { margin-left: auto; font-variant-numeric: tabular-nums; }
.type-legend .pct { color: var(--muted); width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart-svg { display: block; max-height: 340px; }
.chart-svg text { fill: var(--muted); font: 11px var(--sans); }
.chart-svg .grid { stroke: var(--line); }
.chart-svg .base { stroke: var(--line-2); }
.tooltip { position: fixed; pointer-events: none; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 10px; font-size: 13px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.tooltip strong { display: block; font-size: 14px; }
.tooltip .k { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }

/* Drawer / modal */
.modal-bg { position: fixed; inset: 0; background: rgba(26, 20, 16, 0.35); display: flex; justify-content: flex-end; z-index: 40; }
.modal { background: var(--paper); width: min(480px, 100%); height: 100%; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* "How to use this page": a small button in the top-right corner, opening a dropdown panel. */
/* Floated, so the page heading always flows beside it and never underneath it. */
#help { float: right; margin: -18px 0 8px 16px; position: relative; z-index: 30; }
#help:empty { display: none; }
.help { position: relative; }
.help summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; }
.help summary:hover, .help[open] summary { color: var(--ink); border-color: var(--ink-2); }
.help summary::-webkit-details-marker { display: none; }
.help-icon { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }
.help-body { position: absolute; right: 0; top: calc(100% + 8px); width: min(520px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 14px; }
.help-body h4 { margin: 0; font-size: 14px; color: var(--ink); }
.help-body ol, .help-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.help-tips { border-top: 1px solid var(--line); padding-top: 12px; }
.help-tips ul { margin-top: 6px; font-size: 12px; }
.progress { font-size: 13px; color: var(--muted); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 60; max-width: calc(100% - 32px); }
.toast.error { background: var(--critical); color: #fff; }
.callout { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--ink-2); background: var(--wash); }
.loading { opacity: 0.55; transition: opacity .2s; }
details.plain summary { cursor: pointer; color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  #nav { flex-direction: row; flex-wrap: wrap; }
  .view { padding: 24px 16px 60px; }
  .hero { grid-template-columns: 1fr 1fr !important; }
  .cards.two { grid-template-columns: 1fr; }
  .hero .big { grid-column: 1 / -1; }
  h1 { font-size: 32px; }
}

/* Sign-in gate (Clerk): full page, sidebar hidden */
body.auth-gate .sidebar { display: none; }
body.auth-gate .shell { grid-template-columns: 1fr; }
body.auth-gate .view { padding: 8vh 16px 40px; }
body.auth-gate #view { display: flex; justify-content: center; }
.auth-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(440px, 100%); text-align: center; }
.auth-wrap .card { text-align: left; width: 100%; }
.auth-brand { font-family: var(--serif); font-size: 30px; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark { width: 38px; height: 38px; }

/* Account menu: minimal, bottom-left of the sidebar */
.user-corner { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; min-width: 0; }
.user-corner:empty { display: none; }
.user-corner-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.user-corner-text > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-name { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13px; color: var(--ink); max-width: 100%; }
.org-name .chev { font-size: 11px; color: var(--muted); transform: translateY(-2px); }
.org-name:hover .chev, .org-name:focus-visible .chev { color: var(--ink); }
.org-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 20; }
.org-menu button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--ink); }
.org-menu button:hover { background: var(--wash); }
.org-menu button.on { font-weight: 600; }
.org-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Until sign-in has been checked, show nothing (no flash of the app before the sign-in screen).
   Revealed after 8 s regardless, should the sign-in service fail to load. */
body.booting .shell { visibility: hidden; animation: boot-reveal 0s 8s forwards; }
@keyframes boot-reveal { to { visibility: visible; } }
/* Phone: a top bar with the logo on the left and the account on the right (sync dot, organisation, avatar), then one row with
   Dashboard, the sections and Settings; the pages of the open section (one at a time, js/app.js) wrap in below it. */
@media (max-width: 900px) {
  .shell { align-content: start; }
  .sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; align-self: start; gap: 10px 12px; padding: 10px 16px 12px; }
  .sidebar .brand { font-size: 21px; padding: 0; }
  .sidebar .brand .brand-mark { width: 26px; height: 26px; }
  #nav { grid-column: 1 / -1; gap: 6px 2px; }
  #nav > * { order: 2; }
  #nav > a[data-view="dashboard"], #nav > a[data-view="settings"], #nav .nav-group[data-group] { order: 0; }
  #nav .nav-group.nav-gap { order: 1; display: block; flex-basis: 100%; height: 0; margin: 0; }
  #nav .nav-group[data-group] ~ a { margin-left: 0; }
  #nav .nav-group[data-group] { margin: 0; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  #nav .nav-group[data-group]:not(.collapsed) { background: var(--wash); color: var(--ink); }
  #nav .nav-group[data-group]::after { margin-left: 2px; }
  #nav a { padding: 6px 10px; }
  #nav > a:not([data-view="dashboard"]):not([data-view="settings"]) { font-size: 12px; }
  /* Settings as a gear at the end of the row, so Dashboard, the sections and Settings fit on one line. */
  #nav > a[data-view="settings"] { margin-left: auto; font-size: 0; padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
  /* A drawn gear in the menu's own colour and line weight (it follows the theme, light or dark, and the active state). */
  #nav > a[data-view="settings"]::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .sidebar-foot { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; grid-row: 1; grid-column: 2; }
  #syncStatus > div:first-child { font-size: 0; }
  #syncStatus > div:first-child .status { font-size: 12px; }
  #syncStatus > div:first-child ~ div:not(.callout) { display: none; }
  .user-corner { margin: 0; padding: 0; border: 0; gap: 8px; }
  .user-corner #userButton { order: 2; }
  .user-corner-text > span { display: none; }
  .user-corner-text { max-width: 38vw; }
  .org-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  .org-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; min-width: 240px; max-width: calc(100vw - 32px); }
  /* One information circle per page: "How to use this page" as a circle (the page's note is at the top of its panel), and the
     heading's own circle only where there is no such panel. */
  #help { margin: 2px 0 8px 12px; }
  .help summary { padding: 0; border: 0; background: none; font-size: 0; gap: 0; }
  .help-icon { width: 28px; height: 28px; font-size: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
  .help-icon::after { content: "i"; font-size: 14px; font-weight: 600; font-family: var(--serif); }
  .help[open] .help-icon { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
  main:has(#help .help) .page-head .note-i { display: none; }
  /* Filters side by side: Entity, Group and Network share the width. */
  .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .filters label.field { min-width: 0; }
  .filters select { width: 100%; min-width: 0; }
  .page-head .row { flex-wrap: nowrap; align-items: flex-end; }
  .page-head .row label.field { min-width: 0; flex: 1; }
  .page-head .row select { width: 100%; }
}
.help-about { margin: 0; color: var(--ink-2); }
@media (min-width: 901px) { .help-about { display: none; } }

/* Brand reconciliation: Investigate (button in the Discrepancy log and its popup) */
.inv-btn { padding: 2px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.modal.inv-modal { padding-top: 0; padding-bottom: 0; }
/* Investigate opens in the middle of the window, a little smaller than it. */
.modal-bg.inv-bg { justify-content: center; align-items: center; }
.modal-bg.inv-bg .modal.inv-modal { width: min(1180px, 92vw); height: 86vh; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(26, 20, 16, 0.25); }
/* Larger: nearly the whole screen, with a margin so it still reads as a popup over the page. */
.modal-bg.inv-bg.inv-max .modal.inv-modal { width: calc(100vw - 120px); height: calc(100vh - 80px); }
@media (max-width: 700px) { .modal-bg.inv-bg .modal.inv-modal { width: 100vw; height: 100%; border-radius: 0; } }
/* Investigate with uncertain transactions: orange, with how many. */
/* Investigate: the BI's lines and the assets counted as the coin, small and next to each other. */
.inv-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 16px; align-items: start; }
.inv-panel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.inv-compact { width: auto; min-width: 0; }
.inv-compact th, .inv-compact td { padding: 3px 14px 3px 0; }
.inv-btn.unc { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.inv-n { font-size: 11px; font-weight: 600; line-height: 16px; min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--warning); color: #1a1410; }
.inv-bar { position: sticky; z-index: 2; background: var(--paper); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-top { top: 0; padding: 20px 0 12px; border-bottom: 1px solid var(--line); }
.inv-top h3 { flex: 1; }
.inv-foot { bottom: 0; margin-top: auto; padding: 12px 0 20px; border-top: 1px solid var(--line); }
.inv-x { font-size: 20px; line-height: 1; padding: 2px 10px; }
.inv-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.inv-fig { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.inv-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-explain { padding: 10px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--warning); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.inv-explain ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.inv-cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.inv-cands table td, .inv-cands table th { padding: 6px 8px; }
/* A small "i" that opens an explanation below it (Discrepancy log) */
.info-i { position: relative; }
.info-i > summary { list-style: none; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-style: italic; color: var(--muted); background: var(--surface); }
.info-i > summary::-webkit-details-marker { display: none; }
.info-i[open] > summary { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
.info-i .info-pop { position: absolute; left: 0; top: 28px; z-index: 4; width: min(640px, 80vw); margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 6px 24px rgba(26, 20, 16, 0.12); }

/* Page and card explanations fold behind a small "i" next to their heading (js/app.js, foldNotes). */
.note-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font: italic 600 11px var(--sans); vertical-align: middle; cursor: pointer; }
.note-i[aria-expanded="true"] { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
/* Approval: an open point in a few words, a link to where it is fixed (red: blocks approval, amber: a reminder). */
.fix-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; text-decoration: none; color: var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent); }
.fix-chip:hover { background: color-mix(in srgb, var(--critical) 16%, transparent); }
.fix-chip.warn { color: #8a6500; background: color-mix(in srgb, var(--warning) 18%, transparent); }
.fix-chip.warn:hover { background: color-mix(in srgb, var(--warning) 30%, transparent); }

/* Dashboard: changes against last month, wallet types and custody, brand flows */
.delta { font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--muted); }
.delta.up { color: var(--good-text); } .delta.down { color: var(--critical); }
.tile .value .delta { font-size: inherit; font-weight: inherit; }
.seg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.segs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 16px; }
.segs .tile .value { font-size: 24px; }
.mini4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.mini { background: var(--wash); border-radius: 10px; padding: 12px; min-width: 0; }
.mini .label { font-size: 13px; color: var(--muted); }
.mini .value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.mini .foot { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .mini4 { grid-template-columns: 1fr 1fr; } }
/* The top tiles' lists: the value per wallet type, the hot / cold split */
.tlist { margin-top: 8px; display: grid; gap: 4px; }
.trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; }
.trow i { width: 8px; height: 8px; border-radius: 2px; }
.trow .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.trow .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.splitbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.splitbar i { min-width: 3px; }
.callout.issues { margin-bottom: 16px; border-color: color-mix(in srgb, var(--warning) 60%, transparent); }

/* Investigate: classifying transactions one by one, with what it changes. */
.inv-preview { position: sticky; top: 0; z-index: 2; background: var(--surface); border: 1px dashed var(--warning); border-radius: 10px; padding: 10px 12px; }
.inv-preview table td, .inv-preview table th { padding: 2px 10px 2px 0; }
.txcls td { vertical-align: middle; }
.txcls .addr { font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* A long note is cut to three lines (all of it on hover), so Post as stays in view; the last column stays put while the table scrolls. */
.txcls td.note { max-width: 220px; }
.txcls td.note strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.txcls th:last-child, .txcls td:last-child { position: sticky; right: 0; background: var(--surface); box-shadow: -6px 0 6px -6px var(--line-2); }
.fbtag { display: inline-block; font-size: 11px; line-height: 16px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px; margin-top: 2px; white-space: nowrap; }