/* ============ The Haff Group — design system ============ */
:root {
  --bg: #0b0b0c; --bg-2: #101012; --surface: #141416; --surface-2: #1a1a1d; --surface-3: #202024;
  --border: #26262b; --border-2: #303036; --text: #ececea; --text-2: #b9b9bd; --muted: #86868c; --faint: #5a5a60;
  --accent: #c8b280; --accent-2: #a89466; --accent-soft: rgba(200,178,128,.12);
  --pos: #6dbf8f; --neg: #d9706e; --warn: #d8b45c; --info: #7fa7d6;
  --c1: #c8b280; --c2: #9a9aa0; --c3: #e6e6e2; --c4: #7fa7d6; --c5: #6dbf8f; --c6: #d9706e; --c7: #5a5a60; --c8: #b48ead;
  --panel: #101012; --panel-2: #17171a; --panel-3: #1f1f23; --panel-border: #26262b;
  --panel-text: #ececea; --panel-text-2: #b9b9bd; --panel-muted: #7c7c84; --panel-accent: #c8b280; --panel-on-accent: #0b0b0c;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --radius: 10px; --radius-sm: 6px;
  --sidebar-w: 248px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #faf8f4; --bg-2: #f3efe7; --surface: #ffffff; --surface-2: #f7f4ed; --surface-3: #efe9dd;
  --border: #e8e2d6; --border-2: #d8d0be; --text: #17161a; --text-2: #3d3b3c; --muted: #6f6b66;
  /* faint corrected 2026-09-15: #7d786f measured 4.39:1 against white, still short of WCAG AA 4.5:1 for
     normal-size text (the auth-foot line is 11px); this value gives 5.79:1. */
  --faint: #6a655c;
  --accent: #8a7442; --accent-2: #a89466; --accent-soft: rgba(138,116,66,.10);
  --panel: #191714; --panel-2: #22201c; --panel-3: #2c2924; --panel-border: #2f2b25;
  --panel-text: #f3efe7; --panel-text-2: #c3bcae; --panel-muted: #8d867a; --panel-accent: #c9ae6b; --panel-on-accent: #17161a;
  /* pos, warn and faint were darkened from #2f8f5b, #a9811f and #a5a099 (2026-09-14): those failed WCAG AA
     (4.04:1, 3.59:1 and 2.60:1 on white; gaps G010, G015). Verified >=4.5:1 with docs/ux/gaps.csv G010's method. */
  /* neg and info darkened 2026-09-15 for the same reason as pos/warn above: their tinted badge backgrounds
     (badge-neg, badge-info) measured 3.55:1 and 4.02:1 against the worst realistic surface (surface-3),
     both below WCAG AA. Plain-text uses (numbers, pills) only get more legible from the change. */
  --pos: #1f6e42; --neg: #963330; --warn: #8a6414; --info: #2c5480;
  --c1: #8a7442; --c2: #6c6c72; --c3: #2a2a2e; --c4: #3f6ea6; --c5: #2f8f5b; --c6: #c24a48; --c7: #b5b5ba; --c8: #7d5a8a;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12px; } .tiny { font-size: 11px; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .info { color: var(--info); } .accent { color: var(--accent); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; }
.serif { font-family: var(--serif); }
.u { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; color: var(--muted); }
.mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px}.ml1{margin-left:8px}.mr1{margin-right:8px}
.flex { display: flex; gap: 10px; align-items: center; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .col { flex-direction: column; align-items: stretch; }
.hidden { display: none !important; }

/* ---- Shell ---- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--panel); border-right: 1px solid var(--panel-border); color: var(--panel-text); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; justify-content: center; padding: 26px 22px 18px; border-bottom: 1px solid var(--panel-border); }
.brand svg { width: 100%; max-width: 194px; height: auto; color: var(--text); display: block; }
.sidebar .brand svg { color: var(--panel-text); }
.nav { padding: 12px 10px; flex: 1; }
.nav .group { margin: 12px 8px 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--panel-muted); font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--panel-text-2); font-size: 13.5px; }
.nav a svg { width: 16px; height: 16px; opacity: .7; flex: none; }
.nav a:hover { background: var(--panel-2); color: var(--panel-text); }
.nav a.active { background: var(--panel-3); color: var(--panel-text); box-shadow: inset 2px 0 0 var(--panel-accent); }
.nav a.active svg { opacity: 1; color: var(--panel-accent); }
.nav a .count { margin-left: auto; font-size: 11px; background: var(--panel-3); border: 1px solid var(--panel-border); padding: 0 6px; border-radius: 10px; color: var(--panel-text-2); }
.nav a.active .count, .nav a .count.hot { background: var(--panel-accent); color: var(--panel-on-accent); border-color: var(--panel-accent); }
/* color: var(--text), not --accent, since --accent on --surface-2/3 measures 3.73:1 and 4.10:1 in the light
   theme (fails WCAG AA 4.5:1 for this 12px text; found live in the rebuilt topbar, gap G010/G015 family). */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); flex: none; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .crumbs { color: var(--muted); font-size: 12px; } .topbar .crumbs a:hover { color: var(--accent); }
.topbar .spacer { flex: 1; }
.search { position: relative; min-width: 0; } .search input { width: 260px; padding: 7px 10px 7px 32px; }
/* Account controls, moved from the sidebar foot into the topbar (docs/ux/ia.md section 2) so the sidebar holds
   navigation only. Hidden on phones (below), where the same controls live in the More dialog. */
.acct { display: flex; align-items: center; gap: 10px; flex: none; }
.acct .who { min-width: 0; } .acct .who b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .acct .who span { font-size: 11px; color: var(--muted); }
/* Skip link: first focusable element, invisible until it receives keyboard focus (fixes G011). */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--accent); color: var(--panel-on-accent, #0b0b0c); padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 8px; }
/* Phone bottom bar: replaces the off canvas drawer (fixes G013 — nothing stays focusable off screen). */
.bottombar { display: none; }
#more-dialog { border: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 0; width: 100%; max-width: 420px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#more-dialog::backdrop { background: rgba(0,0,0,.5); }
.more-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.more-nav { display: flex; flex-direction: column; padding: 8px; border-bottom: 1px solid var(--border); }
.more-nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; min-height: 44px; }
.more-nav a svg { width: 18px; height: 18px; opacity: .7; flex: none; }
.more-nav a.active { background: var(--surface-2); font-weight: 600; }
.more-acct { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.more-acct .who b { display: block; } .more-acct .who span { font-size: 12px; color: var(--muted); }
.more-actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.more-actions .btn, .more-actions form { width: 100%; } .more-actions .btn, .more-actions button { width: 100%; min-height: 44px; }
.search svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--muted); }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-2); width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-2); }
.icon-btn svg { width: 16px; height: 16px; }
.content { padding: 24px 28px 60px; max-width: 1480px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; } .page-head .sub { color: var(--muted); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Cards & grids ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-head h2, .card-head h3 { font-size: 14px; font-weight: 600; }
.card-head .sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.card-body { padding: 18px; } .card-body.tight { padding: 0; } .card-body.slim { padding: 12px 18px; }
.card-foot { padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-23 { grid-template-columns: 2fr 1fr; } .grid-32 { grid-template-columns: 1fr 2fr; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpis-4 { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden; }
.kpi .label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi .value { font-size: 22px; font-weight: 600; margin-top: 6px; letter-spacing: -.02em; line-height: 1.15; }
.kpi .value.sm { font-size: 18px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi .delta { font-size: 12px; margin-top: 4px; }
.kpi.accent { border-color: var(--accent-2); background: linear-gradient(135deg, var(--accent-soft), transparent 60%); }
.kpi .spark { position: absolute; right: 8px; bottom: 6px; width: 90px; height: 32px; opacity: .8; }
.stat-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.stat-row:last-child { border-bottom: 0; } .stat-row b { font-weight: 600; }

/* ---- Tables ---- */
/* A first attempt paired overflow-x:auto with overflow-y:hidden, reasoning that an explicit non-visible
   value on one axis would stop the other being forced to auto. Measured live, it made no difference: per
   the CSS Overflow spec any axis other than visible already makes the box "a scroll container", so
   .table-wrap (needing overflow-x:auto for wide tables) was always going to be the sticky containing block
   for its own thead, regardless of overflow-y - and a box that only ever grows to fit its table never
   itself scrolls vertically, so a header sticky against it never moves and never "sticks" either. The
   working fix accepts what a horizontally-scrollable wrapper actually requires: give .table-wrap its own
   bounded height and let IT scroll vertically, so the header sticks to the top of that box. max-height is
   generous enough that short tables (most of them) are completely unaffected and never show a scrollbar;
   only a table already taller than that (the ones this gap is actually about) gets a sticky header, by
   scrolling inside its own frame rather than following the page (G111; D19). */
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 70vh; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; white-space: nowrap; }
table.data th.num { text-align: right; }
table.data th[data-sort] { cursor: pointer; user-select: none; } table.data th[data-sort]:hover { color: var(--text); }
table.data th.sorted-asc::after { content: " ↑"; color: var(--accent); } table.data th.sorted-desc::after { content: " ↓"; color: var(--accent); }
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tr.total td { font-weight: 600; border-top: 2px solid var(--border-2); background: var(--surface-2); }
table.data tr.sub td { color: var(--muted); font-size: 12px; }
table.data .actions { white-space: nowrap; text-align: right; }
table.data a.strong { font-weight: 600; }
table.compact td, table.compact th { padding: 6px 10px; }
.empty { padding: 36px; text-align: center; color: var(--muted); }
.empty .big { font-size: 28px; margin-bottom: 8px; opacity: .5; }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: capitalize; border: 1px solid transparent; line-height: 1.5; white-space: nowrap; }
.badge-pos { color: var(--pos); background: rgba(109,191,143,.12); border-color: rgba(109,191,143,.25); }
.badge-neg { color: var(--neg); background: rgba(217,112,110,.12); border-color: rgba(217,112,110,.25); }
.badge-warn { color: var(--warn); background: rgba(216,180,92,.12); border-color: rgba(216,180,92,.25); }
.badge-info { color: var(--info); background: rgba(127,167,214,.12); border-color: rgba(127,167,214,.25); }
/* badge-muted and badge-accent get their own darker text rather than a global token change: --muted and
   --accent already pass AA everywhere else they're used (plain text on a light surface); only their own
   tinted badge background pulls them under 4.5:1 (measured 4.37:1 and 3.34:1 against surface-3). */
[data-theme="light"] .badge-muted { color: #5c5850; }
[data-theme="light"] .badge-accent { color: #5f4d29; }
.badge-muted { color: var(--muted); background: var(--surface-3); border-color: var(--border-2); }
.badge-accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-2); }
.pill { display: inline-block; padding: 1px 7px; border: 1px solid var(--border-2); border-radius: 4px; font-size: 11px; color: var(--muted); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; line-height: 1.4; }
.btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--muted); }
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
/* #0b0b0c on the brass background measured 4.36:1, just under WCAG AA; pure black clears it at 4.66:1. */
.btn-accent { background: var(--accent); border-color: var(--accent); color: #000; } .btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: #000; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--neg); border-color: rgba(217,112,110,.35); background: transparent; } .btn-danger:hover { background: rgba(217,112,110,.12); border-color: var(--neg); color: var(--neg); }
.btn-sm { padding: 4px 10px; font-size: 12px; } .btn-xs { padding: 2px 8px; font-size: 11px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }

/* ---- Forms ---- */
input, select, textarea { font: 13.5px var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="date"] { color-scheme: inherit; }
textarea { min-height: 80px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field .help { font-size: 11.5px; color: var(--muted); }
.field.full { grid-column: 1 / -1; }
.field.sacred label::after { content: " ●"; color: var(--accent); font-size: 8px; vertical-align: middle; }
.inline-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-top: 4px; }
.prefix { position: relative; } .prefix input { padding-left: 28px; } .prefix::before { content: attr(data-prefix); position: absolute; left: 10px; top: 8px; color: var(--muted); font-size: 13px; }
.suffix { position: relative; } .suffix input { padding-right: 34px; } .suffix::after { content: attr(data-suffix); position: absolute; right: 10px; top: 8px; color: var(--muted); font-size: 12px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 16px; } legend { padding: 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.filters { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; } .filters .field { min-width: 140px; } .filters input, .filters select { padding: 6px 9px; font-size: 13px; }

/* ---- Flash ---- */
.flash-wrap { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow); font-size: 13px; display: flex; gap: 10px; align-items: flex-start; animation: slide .25s ease; }
.flash-success { border-color: var(--pos); } .flash-error { border-color: var(--neg); } .flash-info { border-color: var(--info); } .flash-warning { border-color: var(--warn); }
.flash .x { margin-left: auto; cursor: pointer; color: var(--muted); background: none; border: 0; font-size: 16px; line-height: 1; }
@keyframes slide { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.notice { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); font-size: 13px; }
.notice.warn { border-color: rgba(216,180,92,.4); } .notice.info { border-color: rgba(127,167,214,.4); } .notice.accent { border-color: var(--accent-2); background: var(--accent-soft); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 9px 14px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--text); } .tabs a.active { color: var(--text); border-color: var(--accent); }
.tabs a:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Browser default placeholder colour measured as low as 4.37:1 on the app's own input backgrounds; #5c5850
   clears 5.85:1 on the worst of them (found by the Portfolio rebuild on the lease form's recovery fields,
   which only show a placeholder when the input is enabled; a genuinely disabled input is exempt from this). */
::placeholder { color: #5c5850; opacity: 1; }
.tab-pane { display: none; } .tab-pane.active { display: block; }

/* ---- Charts ---- */
/* Standard visually-hidden pattern: present to assistive tech, removed from sighted layout without
   affecting document flow (unlike display:none, which also hides it from screen readers). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chart { position: relative; width: 100%; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .grid line { stroke: var(--border); stroke-dasharray: 2 3; }
.chart .zero line { stroke: var(--border-2); }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); z-index: 5; min-width: 120px; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.chart-tip b { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 600; font-size: 11px; }
.chart-tip .row { display: flex; justify-content: space-between; gap: 14px; } .chart-tip .row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* ---- Stacking plan ---- */
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack-floor { display: flex; align-items: stretch; gap: 6px; min-height: 46px; }
.stack-floor .fl { width: 90px; flex: none; display: flex; align-items: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stack-floor .units { flex: 1; display: flex; gap: 4px; }
.su { border-radius: 4px; padding: 5px 8px; font-size: 11px; line-height: 1.25; border: 1px solid var(--border-2); background: var(--surface-2); overflow: hidden; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.su b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .su span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su.let { background: rgba(109,191,143,.14); border-color: rgba(109,191,143,.35); } .su.expiring { background: rgba(216,180,92,.16); border-color: rgba(216,180,92,.4); } .su.vacant { background: rgba(217,112,110,.14); border-color: rgba(217,112,110,.35); } .su.unlettable { opacity: .5; }
.su:hover { border-color: var(--accent); }

/* ---- Progress ---- */
.bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar i.pos { background: var(--pos); } .bar i.neg { background: var(--neg); } .bar i.warn { background: var(--warn); }
.score { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-2); font-weight: 700; font-size: 14px; }
.score.hi { border-color: var(--pos); color: var(--pos); } .score.mid { border-color: var(--warn); color: var(--warn); } .score.lo { border-color: var(--neg); color: var(--neg); }

/* ---- Map ---- */
.map { height: 560px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.map.short { height: 320px; }
.leaflet-container { background: var(--surface-2); font-family: var(--font); }
.osm-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.45); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--border-2); }
.leaflet-popup-content { margin: 12px 14px; font-size: 12.5px; line-height: 1.45; } .leaflet-popup-content b { font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-control-attribution { background: rgba(0,0,0,.5) !important; color: #999 !important; font-size: 10px !important; } .leaflet-control-attribution a { color: #bbb !important; }
/* The light theme override set the container's colour but not its link's, leaving the dark-theme link
   colour (#bbb, tuned for the semi-transparent dark overlay above) applied on a near-white background
   at 1.6:1. */
[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.7) !important; color: #555 !important; }
[data-theme="light"] .leaflet-control-attribution a { color: #333 !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.haff-pin { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #0b0b0c; box-shadow: 0 0 0 4px rgba(200,178,128,.25); }
.haff-pin.opp { background: var(--info); box-shadow: 0 0 0 4px rgba(127,167,214,.25); } .haff-pin.opp.hot { background: var(--pos); box-shadow: 0 0 0 5px rgba(109,191,143,.3); }
.haff-pin.node { width: 10px; height: 10px; background: var(--muted); box-shadow: none; opacity: .7; }
.map-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; } .map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* ---- Lists / timeline ---- */
.list { list-style: none; margin: 0; padding: 0; } .list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; } .list li:last-child { border-bottom: 0; }
.list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 6px; flex: none; } .list .dot.neg { background: var(--neg); } .list .dot.warn { background: var(--warn); } .list .dot.pos { background: var(--pos); } .list .dot.info { background: var(--info); }
.list .t { flex: 1; min-width: 0; } .list .t b { font-weight: 600; } .list .t span { display: block; font-size: 12px; color: var(--muted); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.big-num { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.ring { position: relative; width: 120px; height: 120px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring .c { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 18px; }
.dl { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .dl img { width: 44px; height: 44px; object-fit: contain; background: var(--surface-2); border-radius: 6px; padding: 4px; }
.cmp { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px 16px; font-size: 13px; align-items: center; } .cmp .h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.perm-grid td .y { color: var(--pos); font-weight: 700; } .perm-grid td .n { color: var(--faint); }
.sacred { color: var(--accent); }
.qr { background: #fff; padding: 8px; border-radius: 8px; display: inline-block; } .qr svg { display: block; width: 200px; height: 200px; }
kbd { font: 11px var(--mono); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--muted); }

/* ---- Auth ---- */
.auth { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% 10%, var(--surface-2), var(--bg) 60%); padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 34px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; border: 0; padding: 4px 0 26px; } .auth-card .brand svg { width: 268px; max-width: 86%; height: auto; }
.auth-card h1 { font-size: 16px; text-align: center; margin-bottom: 18px; font-weight: 500; color: var(--text-2); }
.auth-card .field { margin-bottom: 14px; } .auth-card .btn { width: 100%; justify-content: center; padding: 10px; }
.auth-foot { text-align: center; font-size: 11px; color: var(--faint); margin-top: 22px; letter-spacing: .05em; }

/* ---- Print (invoices, statements, reports) ---- */
.doc { background: #fff; color: #111; max-width: 860px; margin: 0 auto; padding: 44px 48px; font-size: 13px; border-radius: var(--radius); }
.doc h1 { font-size: 26px; font-family: var(--serif); letter-spacing: .04em; } .doc .muted { color: #666; }
.doc table.data th { background: #f4f4f2; color: #555; border-color: #ddd; position: static; } .doc table.data td { border-color: #e4e4e4; color: #111; }
.doc table.data tr.total td { background: #f4f4f2; border-color: #ccc; } .doc .badge { border-color: #ccc; color: #333; background: #f4f4f2; }
.doc .brand-line { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 16px; margin-bottom: 20px; } .doc .brand-line svg { width: 176px; height: auto; color: #111; margin-right: 18px; }
@media print { .sidebar, .topbar, .no-print, .flash-wrap, .bottombar, #more-dialog, .skip-link { display: none !important; } .shell { display: block; } .content { padding: 0; max-width: none; } body { background: #fff; color: #111; } .doc { border-radius: 0; box-shadow: none; padding: 0; max-width: none; } .card { border: 0; } }

/* ---- Responsive ---- */
/* .grid-23/.grid-32 and .grid-2/.grid-3/.grid-4 below used a bare 1fr, not minmax(0,1fr): a bare 1fr track
   still sizes to its content's min-width (a wide table or the ownership graph's canvas), so it can blow the
   whole grid out past the viewport. minmax(0,1fr) lets the track actually shrink to the column's share of
   the available width (G039: two family-office screens measured 2.4x the phone width from this). */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-23, .grid-32 { grid-template-columns: minmax(0,1fr); } .span-3 { grid-column: span 2; } .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) {
  /* The sidebar and its links are removed from layout (not just hidden) so nothing off screen stays
     keyboard focusable (fixes G013); the bottom bar and its "More" dialog take over navigation.
     The fixed bottom bar overlays the last slice of the viewport rather than taking up document flow, so
     anything that happens to render there (with or without scrolling) is genuinely covered and unclickable,
     not merely visually crowded: scroll-padding only helps when a scroll is actually triggered, and a short
     page whose content already "fits" the raw viewport height never triggers one. So .main is given a real,
     bounded height that stops before the bar, and .content scrolls inside that box: nothing can render behind
     the bar because that space is never part of .content's own box in the first place. --bottombar-h matches
     the bar's own rendered height (measured 62.75px) plus its own safe-area padding, kept in one place. */
  :root { --bottombar-h: calc(64px + env(safe-area-inset-bottom)); } /* measured rendered height 62.75px; rounded up */
  .shell { grid-template-columns: 1fr; } .sidebar { display: none; }
  .main { height: calc(100vh - var(--bottombar-h)); height: calc(100dvh - var(--bottombar-h)); display: flex; flex-direction: column; }
  .topbar { position: static; flex: none; padding: 10px 16px; gap: 8px; } .topbar h1 { font-size: 15px; max-width: 40vw; } .topbar .crumbs { display: none; }
  .content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
  .search { flex: 1; min-width: 0; } .search input { width: 100%; min-width: 0; }
  .acct { display: none; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel); border-top: 1px solid var(--panel-border); padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right)); }
  .bottombar a, .bottombar button.more-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--radius-sm); color: var(--panel-text-2); font-size: 10.5px; background: none; border: 0; min-height: 44px; }
  .bottombar svg { width: 20px; height: 20px; opacity: .8; }
  .bottombar a.active { color: var(--panel-accent); } .bottombar a.active svg { opacity: 1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } .span-2, .span-3 { grid-column: auto; } .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: minmax(0,1fr); } .kv { grid-template-columns: minmax(0,1fr); }
  .stack-floor .fl { width: 56px; } .doc { padding: 20px; }
  /* 44px is the touch-target floor; .btn-sm/.btn-xs stay small on purpose for dense inline table actions
     (every destructive one already carries a data-confirm dialog, so a mis-tap there asks first) (G108). */
  .btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
}

/* ---- Data room drop zone ---- */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 34px 20px; border: 1.5px dashed var(--border-2); border-radius: var(--radius); background: var(--bg-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .dz-icon svg { width: 34px; height: 34px; color: var(--accent); }
#dz-list li { padding: 5px 0; gap: 8px; } #dz-list li .t span { display: inline; margin-left: 6px; }

/* ---- Comments & discussion ---- */
.pattern { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; } .pattern .pill b { color: var(--text); margin-left: 3px; } .pattern .pill.warn { color: var(--warn); border-color: var(--warn); } .pattern .pill.neg { color: var(--neg); border-color: var(--neg); }
.composer { margin: 14px 18px 0; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg); }
.composer textarea { border: 0; background: transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; resize: vertical; min-height: 84px; } .composer textarea:focus { box-shadow: none; }
.composer-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-sm) var(--radius-sm); flex-wrap: wrap; }
.composer-bar select { width: auto; padding: 5px 28px 5px 9px; font-size: 12.5px; } .composer-bar input[type=date] { width: auto; padding: 4px 8px; font-size: 12.5px; margin-left: 4px; }
.thread { padding: 8px 18px 6px; }
.comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); } .comment:last-child { border-bottom: 0; }
.comment .avatar { width: 40px; height: 40px; font-size: 13px; background: var(--surface-2); }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .comment-head .author { color: var(--info); font-size: 14px; }
.comment-body { margin-top: 6px; font-size: 13.5px; line-height: 1.55; white-space: normal; word-wrap: break-word; }
/* .55 measured 3.06:1 for the --text-2 button text once blended toward white, failing WCAG AA; .8 gives
   6.05:1 with the same visual de-emphasis. Keyboard users get full opacity on focus, not just mouse hover
   (a hover-only reveal is itself inaccessible: G068 family). */
.comment-actions { margin-top: 6px; display: flex; gap: 6px; opacity: .8; }
.comment:hover .comment-actions, .comment-actions:focus-within { opacity: 1; }

/* ---- Rent roll (spreadsheet layout) ---- */
table.rentroll th { font-size: 10px; white-space: normal; line-height: 1.25; min-width: 64px; vertical-align: bottom; }
table.rentroll td { white-space: nowrap; font-size: 12px; }
table.rentroll tr.group td { background: var(--surface-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
table.rentroll tr.sub td { background: transparent; color: var(--muted); }
@media print { table.rentroll { font-size: 9px; } .content { max-width: none; } }

/* ---- Family office ---- */
.fo-subnav { margin-bottom: 14px; }
.fo-perspective .fo-root-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; } .seg a { padding: 6px 12px; font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; } .seg a.active { background: var(--text); color: var(--bg); } .seg a:hover:not(.active) { background: var(--surface-2); color: var(--text); }
.kpis.hero { grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 12px; } .kpi.hero .value { font-size: 30px; } .kpi .formula { font-size: 11px; color: var(--faint); margin-top: 6px; font-family: var(--mono); }
.fo-graph { position: relative; height: calc(100vh - 330px); min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.fo-canvas, .fo-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .fo-svg { touch-action: none; cursor: grab; user-select: none; } .fo-svg:active { cursor: grabbing; }
.fo-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--muted); font-size: 13px; background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: var(--radius-sm); }
.fo-node { cursor: pointer; } .fo-card { fill: var(--surface); stroke: var(--border-2); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); } .fo-node:hover .fo-card { stroke: var(--accent); } .fo-node.sel .fo-card, .fo-node.root .fo-card { stroke: var(--accent); stroke-width: 2; }
.fo-card-head { fill: var(--surface-2); } .fo-property .fo-card-head { fill: var(--accent-soft); }
.fo-node text { font-family: var(--font); fill: var(--text); font-size: 12px; pointer-events: none; } .fo-title { font-weight: 600; font-size: 12.5px; } .fo-sub { fill: var(--muted); font-size: 10.5px; } .fo-lbl { fill: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; } .fo-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .fo-val.neg { fill: var(--neg); } .fo-pct { fill: var(--accent); font-weight: 600; font-size: 12px; } .fo-rootlbl { fill: var(--accent); font-size: 9px; letter-spacing: .1em; font-weight: 700; }
.fo-node.dim { opacity: .45; } .fo-node.inactive .fo-card { stroke-dasharray: 4 3; }
.fo-toggle circle { fill: var(--surface); stroke: var(--border-2); } .fo-toggle text { fill: var(--text-2); font-size: 13px; font-weight: 600; pointer-events: none; } .fo-toggle:hover circle { stroke: var(--accent); } .fo-toggle { cursor: pointer; }
.fo-flag circle { fill: var(--warn); } .fo-flag.err circle { fill: var(--neg); } .fo-flag text { fill: #0b0b0c; font-size: 11px; font-weight: 700; }
.fo-edge { fill: none; stroke: var(--border-2); stroke-width: 1.5; } .fo-edge.hi { stroke: var(--accent); stroke-width: 2; } .fo-arrowhead { fill: var(--border-2); }
.fo-edge-label { cursor: pointer; } .fo-edge-label rect { fill: var(--surface); stroke: var(--border-2); } .fo-edge-label text { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font); } .fo-edge-label:hover rect { stroke: var(--accent); } .fo-edge-label.over rect { stroke: var(--neg); } .fo-edge-label.over text { fill: var(--neg); }
.fo-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .fo-toolbar .btn.warn { color: var(--warn); border-color: var(--warn); }
.fo-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 420px; max-width: calc(100% - 24px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow-y: auto; z-index: 5; display: none; } .fo-panel.open { display: block; }
.fo-panel-head { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 8px; align-items: flex-start; z-index: 1; } .fo-panel-head h3 { font-size: 15px; line-height: 1.3; } .fo-panel-body { padding: 10px 16px 20px; font-size: 13px; }
.fo-sec { margin-top: 16px; } .fo-sec h4 { margin-bottom: 6px; } .fo-sec h4 .fo-h4sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.fo-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; } .fo-kv dt { color: var(--muted); } .fo-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .fo-kv .b { font-weight: 600; color: var(--text); } .fo-kv.total { border-top: 1px solid var(--border-2); padding-top: 6px; margin-top: 6px; }
.fo-path { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; background: var(--surface-2); } .hop { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; align-items: flex-start; } .hop b { white-space: nowrap; } .fo-path .hop:last-child { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.fo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fo-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; align-items: center; } .fo-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--border-2); background: var(--surface); }
dialog.fo-dialog { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 0; width: 600px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); } dialog.fo-dialog::backdrop { background: rgba(0,0,0,.45); } dialog.fo-dialog.wide { width: 720px; }
dialog.fo-dialog .card-head { padding: 12px 16px; } dialog.fo-dialog .card-body { padding: 16px; max-height: 75vh; overflow-y: auto; }
.fo-issues { margin: 0; padding: 0; } .fo-issues li { padding: 5px 0; border-bottom: 1px solid var(--border); display: block; } .fo-issues li:last-child { border: 0; } .fo-issues .lvl { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; } .fo-issues .lvl.error { background: var(--neg); } .fo-issues .lvl.warn { background: var(--warn); } .fo-issues .lvl.info { background: var(--info); }
.fo-colpick { position: relative; } .fo-colpick .menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px 12px; z-index: 10; columns: 2; min-width: 360px; } .fo-colpick .menu label { display: block; font-size: 12.5px; padding: 3px 0; white-space: nowrap; break-inside: avoid; }
table.fo-table td, table.fo-table th { white-space: nowrap; } table.fo-table td.eff, table.fo-table th.eff { background: var(--accent-soft); } table.fo-table tfoot td { font-weight: 600; border-top: 2px solid var(--border-2); background: var(--surface-2); padding: 9px 12px; }
@media (max-width: 860px) { .rec-panel { width: calc(100vw - 32px); } .fo-panel { width: auto; left: 12px; } .kpis.hero { grid-template-columns: 1fr; } .fo-graph { height: 70vh; min-height: 420px; } .fo-colpick .menu { columns: 1; min-width: 220px; } }
#portfolio .toolbar select, #portfolio .toolbar input[type=search] { width: auto; min-width: 180px; }

/* ---- Recoveries sheet ---- */
table.rec-table th.met, table.rec-table td.met { background: var(--accent-soft); }
tr.rec-row { cursor: pointer; } tr.rec-row:hover { background: var(--surface-2); }
tr.rec-row.open td { border-bottom-color: transparent; }
tr.rec-detail > td { background: var(--surface-2); padding: 0; }
.rec-panel { position: sticky; left: 0; width: calc(100vw - var(--sidebar-w) - 96px); max-width: 1380px; padding: 14px 18px; box-sizing: border-box; }
table.rec-table td.rec-name { min-width: 180px; }
table.rec-meters { width: 100%; table-layout: auto; }
.rec-lines { display: grid; gap: 10px; }
.rec-line { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; }
.rec-line-head { display: flex; gap: 10px; align-items: center; font-size: 13px; } .rec-line-head .grow { flex: 1; min-width: 0; }
table.rec-meters { margin-top: 8px; font-size: 12px; } table.rec-meters th { background: transparent; position: static; }
.doc h3.rec-h { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #666; margin: 22px 0 8px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.doc table.data { margin-bottom: 10px; }

/* ---- Colour palettes (the side panel and accent) ---- */
[data-palette="forest"] { --panel: #12241d; --panel-2: #193026; --panel-3: #21402f; --panel-border: #24402f; --panel-text: #eef3ee; --panel-text-2: #b4c6b8; --panel-muted: #7e968a; --panel-accent: #cbb26a; --panel-on-accent: #12241d; }
[data-palette="forest"][data-theme="light"], [data-palette="forest"] { --accent: #3f6b52; --accent-2: #58876a; --accent-soft: rgba(63,107,82,.10); }
[data-palette="navy"] { --panel: #101d33; --panel-2: #16273f; --panel-3: #1e3350; --panel-border: #1f3350; --panel-text: #eef2f8; --panel-text-2: #b3c1d4; --panel-muted: #7f8ea6; --panel-accent: #c9b57e; --panel-on-accent: #101d33; }
[data-palette="navy"] { --accent: #2f5788; --accent-2: #4a75a8; --accent-soft: rgba(47,87,136,.10); }
[data-palette="wine"] { --panel: #2a1219; --panel-2: #371a22; --panel-3: #45222c; --panel-border: #45222b; --panel-text: #f6ecee; --panel-text-2: #d0b6bc; --panel-muted: #a08289; --panel-accent: #d3ad6a; --panel-on-accent: #2a1219; }
[data-palette="wine"] { --accent: #8a3d51; --accent-2: #a85f72; --accent-soft: rgba(138,61,81,.10); }
[data-palette="stone"][data-theme="light"] { --panel: #eeeeea; --panel-2: #e6e6e1; --panel-3: #dedeD8; --panel-border: #e1e1dc; --panel-text: #141416; --panel-text-2: #3b3b40; --panel-muted: #8b8b91; --panel-accent: #8a7442; --panel-on-accent: #ffffff; }
[data-palette="stone"][data-theme="light"] { --bg: #f4f4f1; --bg-2: #eeeeea; --surface-2: #f6f6f3; --surface-3: #ecece8; --border: #e1e1dc; --border-2: #d2d2cc; --accent: #8a7442; }
[data-palette="stone"] { --panel: #101012; --panel-2: #17171a; --panel-3: #1f1f23; --panel-border: #26262b; --panel-text: #ececea; --panel-text-2: #b9b9bd; --panel-muted: #7c7c84; --panel-accent: #c8b280; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.swatch { display: block; cursor: pointer; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px; background: var(--surface); }
.swatch:hover { border-color: var(--accent); } .swatch input { position: absolute; opacity: 0; } .swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.swatch .bars { display: flex; height: 34px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.swatch .bars i { display: block; height: 100%; } .swatch .bars i.p { width: 34%; } .swatch .bars i.b { flex: 1; } .swatch .bars i.a { width: 12%; }
.swatch .nm { font-size: 12px; font-weight: 600; margin-top: 6px; } .swatch .de { font-size: 11px; color: var(--muted); }