/* ============================================================
   PCM FUND ADMIN — terminal design system
   Source of truth: attached_assets/Design/Closebook TUI.html
   (token values transcribed from the mock's inline styles).
   IBM Plex Mono for everything; Tiempos Headline for the
   product wordmark and display headings. Amber panel chrome,
   green/red signed numerics, gold selection.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/tiempos-headline-regular.otf') format('opentype');
}

:root {
  --bg: #0A0D13;
  --bg-hover: #11161F;
  --bg-panel: #0D1119;
  --bg-band: rgba(125, 161, 216, 0.045);
  --bg-band-strong: rgba(207, 165, 62, 0.055);
  --line-chrome: #232B3B;   /* top/tab/footer bars */
  --line-panel: #2E3648;    /* panel + control borders */
  --line-row: #1B2130;      /* table hairlines */
  --line-bucket: #3B4D6B;
  --line-subtotal: #6A5930;
  --line-danger: #6B3A31;   /* attention panel border */
  --fg-bright: #E8E2D9;     /* brand / display headings */
  --fg: #D7DBE4;            /* primary text + strong numerics */
  --fg-2: #AFB6C6;          /* secondary text */
  --fg-muted: #8B93A6;      /* de-emphasized text, inactive tabs */
  --fg-dim: #67718A;        /* table headers, annotations */
  --fg-faint: #39415A;      /* separators, disabled */
  --gold: #CFA53E;          /* chrome accents, panel titles, active tab */
  --sand: #E1C78F;          /* soft numeric highlight */
  --green: #5FAF77;         /* positive / LIVE / PASS */
  --red: #D0705A;           /* negative / FAIL / blocking */
  --amber: #E08A3C;         /* HELD: clean calculation waiting on an export check */
  --bg-hl-green: #182015;   /* table row hover (from the RW mockup's Total-return row) */
  --bg-hl-gold: #1D1A10;    /* RW hover: the hovered member row */
  --label: #9AACC8;         /* label blue: links, OPEN status */
  --accent: #7DA1D8;        /* series/selection blue */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-display: 'Tiempos Headline', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.auth-shell {
  min-height: calc(100vh - 42px);
  display: grid;
  place-items: center;
  padding: 32px;
}

.auth-panel {
  width: min(480px, 100%);
  padding: 28px;
  border: 1px solid var(--line-panel);
  background: var(--bg-hover);
}
a { color: var(--label); text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: var(--bg); }

/* ---------- scrollbars (terminal chrome, not the OS default) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-panel) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-panel);
  border: 2px solid var(--bg); border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
::-webkit-scrollbar-corner { background: transparent; }
h1, h2 { font-family: var(--font-display); font-weight: 400; color: var(--fg-bright); }
h1 { font-size: 21px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 8px; }

/* ---------- shell ---------- */
.topbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 9px 18px 8px; border-bottom: 1px solid var(--line-chrome); white-space: nowrap;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand img { width: 22px; height: 22px; opacity: 0.9; }
.topbar .brand .firm { font-size: 11px; letter-spacing: 0.22em; color: var(--fg-bright); font-weight: 600; }
.topbar .brand .sep { color: var(--fg-faint); }
.topbar .brand .product { font-family: var(--font-display); font-size: 16px; color: var(--gold); letter-spacing: 0.01em; }
/* A long page status (the fund page's KPI strip) wraps onto a second line
   instead of pushing the right-hand meta (Export JSON, engine, help) off-screen. */
.topbar .status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-left: 14px; min-width: 0; }
.topbar .brand, .topbar .meta { flex-shrink: 0; }
.topbar .meta { margin-left: auto; display: flex; align-items: center; gap: 18px; color: var(--fg-dim); font-size: 11.5px; }

.tabstrip {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 14px; border-bottom: 1px solid var(--line-chrome); white-space: nowrap;
}
.tab {
  color: var(--fg-muted); padding: 2px 12px; cursor: pointer;
  font-size: 11.5px; letter-spacing: 0.06em;
}
.tab:hover { color: var(--fg-2); }
.tab.active { background: var(--gold); color: var(--bg); font-weight: 600; border-radius: 3px; }
.tabstrip .meta { margin-left: auto; color: var(--fg-dim); font-size: 11.5px; }

.content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; padding: 18px 18px 26px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.cols { display: grid; gap: 16px; }

/* ---------- headline tiles (dashboard) ---------- */
/* Always one row of equal-width tiles: minmax(0, 1fr) lets long sublines
   shrink instead of forcing a column wider than its share. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tiles .panel { padding: 16px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
.tiles .tile-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; }
.tile-sub { color: var(--fg-dim); font-size: 11px; margin-top: 3px; }

.keybar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 7px 18px; border-top: 1px solid var(--line-chrome);
  white-space: nowrap; font-size: 11.5px;
}
.keybar .key-item { display: flex; gap: 5px; align-items: baseline; padding: 1px 8px; border-radius: 2px; }
.keybar a.key-item:hover { background: var(--bg-hover); }
.keybar .key { color: var(--gold); font-weight: 600; }
.keybar .key-label { color: var(--fg-muted); }
.keybar .meta { margin-left: auto; color: var(--fg-dim); }

/* ---------- panels ---------- */
.panel {
  position: relative; border: 1px solid var(--line-panel); border-radius: 4px;
  padding: 18px 14px 10px;
  background:
    linear-gradient(180deg, rgba(24, 32, 49, 0.42) 0, rgba(13, 17, 25, 0.18) 70px, transparent 180px),
    var(--bg);
}
.panel > .panel-title {
  position: absolute; top: -9px; left: 10px; background: var(--bg); padding: 0 8px;
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--gold); font-weight: 600;
  text-transform: uppercase;
}
.panel.danger { border-color: var(--line-danger); }
/* collapsible panel: <details class="panel collapsible"><summary> carries the title */
details.panel.collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px 4px; font-size: 11.5px; }
details.panel.collapsible > summary::-webkit-details-marker { display: none; }
details.panel.collapsible > summary > .panel-title {
  position: absolute; top: -9px; left: 10px; background: var(--bg); padding: 0 8px;
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--gold); font-weight: 600; text-transform: uppercase;
}
details.panel.collapsible > summary .toggle-hint { font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-dim); font-weight: 600; text-transform: uppercase; }
details.panel.collapsible > summary:hover .toggle-hint { color: var(--fg-2); }
details.panel.collapsible:not([open]) > summary .toggle-hint.opened, details.panel.collapsible[open] > summary .toggle-hint.closed { display: none; }
details.panel.collapsible > summary .summary-kpis { display: inline-flex; gap: 16px; flex-wrap: wrap; color: var(--fg-2); font-variant-numeric: tabular-nums; }
details.panel.collapsible > summary .summary-kpis b { color: var(--fg); font-weight: 600; }
details.panel.collapsible:not([open]) { padding-bottom: 8px; }
.panel .panel-note { color: var(--fg-dim); font-size: 11px; padding: 6px 6px 2px; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; }
th {
  text-align: left; padding: 2px 6px; font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--fg-dim); font-weight: 600; text-transform: uppercase; white-space: nowrap;
}
td { padding: 3px 6px; border-top: 1px solid var(--line-row); color: var(--fg-2); white-space: nowrap; }
th.num, td.num { text-align: right; }
td.num { color: var(--fg); }
tr.total td { border-top: 1px solid var(--line-panel); color: var(--fg); font-weight: 600; }
tr.superseded td { color: var(--fg-faint); text-decoration: line-through; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--bg-hl-green); }

/* Quiet row bands make long financial tables traceable without competing
   with semantic total/group treatments. The exclusion list sits in :where()
   so the band never out-ranks the row hover below. */
.panel table > tbody > tr:nth-child(even):where(:not(.grp):not(.total):not(.waterfall-bucket):not(.waterfall-subtotal):not(.bridge)) > td {
  background-color: var(--bg-band);
}
/* Row hover: one green tint across every cell of the row (banded or not,
   total/subtotal included); group heading rows are left alone. */
.panel table > tbody > tr:hover:not(.grp) > td { background-color: var(--bg-hl-green); }

/* Waterfalls: blue rules mark buckets; gold rules mark calculation
   checkpoints. Shape, weight, and spacing reinforce the color distinction. */
.waterfall-panel,
.tax-waterfall-panel {
  border-color: #33435E;
  background:
    linear-gradient(180deg, rgba(14, 21, 34, 0.82) 0, rgba(14, 21, 34, 0.28) 150px, transparent 360px),
    var(--bg);
}
tr.waterfall-bucket td {
  padding-top: 9px;
  padding-bottom: 4px;
  border-top: 1px solid var(--line-bucket);
  border-bottom: 1px solid rgba(59, 77, 107, 0.45);
  background: #101725;
  color: var(--label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
tr.waterfall-subtotal td {
  border-top: 1px solid var(--line-subtotal);
  background: #17150F;
  color: var(--fg);
  font-weight: 600;
}
tr.waterfall-subtotal td:first-child {
  border-left: 2px solid var(--gold);
  padding-left: 10px;
}
/* Reconciling steps between two gold totals (e.g. the dashboard's
   Funds → Members bridge): plain, unbanded rows indented to the totals'
   label column, so only the endpoints read as totals. */
tr.bridge td { color: var(--fg-2); font-weight: 400; }
tr.bridge td.num { color: var(--fg); }
tr.bridge td:first-child { padding-left: 12px; }

/* Far-right note column: one annotation style on every row, totals
   included (tie glyphs keep their own colour). */
.panel td.note,
.panel tr.total td.note,
.panel tr.waterfall-subtotal td.note,
.panel tr.mm > td.note { color: var(--fg-dim); font-weight: 400; }
/* Managing member row: gold label and figures in every member table
   (negatives keep their red span). */
.panel tr.mm > td,
.panel tr.mm > td.rowlabel { color: var(--gold); }
.panel tr.mm td.ucell .e { color: var(--gold); }

/* ---------- semantics ---------- */
.pos { color: var(--green); }
.neg { color: var(--red); }
.gold { color: var(--gold); }
.sand { color: var(--sand); }
.label { color: var(--label); }
.bright { color: var(--fg); }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.micro { font-size: 10.5px; }
.b600 { font-weight: 600; }

.chip { display: inline-block; padding: 0 8px; border-radius: 3px; font-weight: 600; font-size: 11.5px; }
.period-chip {
  display: inline-block; padding: 1px 10px; border: 1px solid var(--line-panel);
  border-radius: 3px; font-size: 11.5px; font-weight: 600; color: var(--fg-2);
}
.period-chip:hover { background: var(--bg-hover); color: var(--fg); }
.period-chip.active { border-color: var(--gold); color: var(--gold); }
.chip.filled-gold { background: var(--gold); color: var(--bg); }
.chip.filled-green { background: var(--green); color: var(--bg); }
.chip.filled-red { background: var(--red); color: var(--bg); }
.chip.outline { border: 1px solid var(--line-panel); color: var(--fg-muted); }

.check { color: var(--green); font-weight: 700; }

/* ---------- controls ---------- */
.btn {
  display: inline-block; padding: 4px 14px; border-radius: 3px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-2); background: transparent; border: 1px solid var(--line-panel);
  text-decoration: none;
}
.btn:hover { background: var(--bg-hover); color: var(--fg); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.btn.primary:hover { background: var(--sand); border-color: var(--sand); color: var(--bg); }
.btn.danger { border-color: var(--line-danger); color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--bg); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* Segmented toggle above a grid (e.g. Monthly Δ / Cumulative). Sits in normal
   flow below the floating panel title so it never overlaps the border or table. */
.grid-mode-bar { display: flex; align-items: center; gap: 0; margin: 0 0 8px; }
.grid-mode-bar .lbl { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin-right: 8px; }
.grid-mode-bar .btn { border-radius: 0; margin: 0; position: relative; }
.grid-mode-bar .btn + .btn { margin-left: -1px; }
.grid-mode-bar .btn:first-of-type { border-radius: 3px 0 0 3px; }
.grid-mode-bar .btn:last-of-type { border-radius: 0 3px 3px 0; }
.grid-mode-bar .btn.active,
.grid-mode-bar .btn:has(input:checked) { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 600; z-index: 1; }
.grid-mode-bar .btn.active:hover,
.grid-mode-bar .btn:has(input:checked):hover { background: var(--sand); border-color: var(--sand); color: var(--bg); }
/* Radio-backed variant: <label class="btn"><input type="radio" …>Text</label>.
   The native radio is visually hidden but stays focusable/submittable; the
   checked input's label takes the same gold active look as .btn.active. */
.grid-mode-bar label.btn { user-select: none; }
.grid-mode-bar .btn input[type=radio] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.grid-mode-bar .btn:has(input:focus-visible) { outline: 1px solid var(--gold); outline-offset: 2px; z-index: 2; }
.grid-mode-bar .btn:has(input:disabled) { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
form.inline { display: inline; }

input[type=text], input[type=number], input[type=date], input[type=email], select, textarea {
  width: 100%; padding: 5px 8px; border: 1px solid var(--line-panel); border-radius: 3px;
  background: var(--bg-hover); color: var(--fg); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--gold); outline-offset: 0; }
input[type=checkbox] { accent-color: var(--gold); }
/* right-aligned numeric entry inside tables (tax inputs, seeds, adjustments) */
input.num-in { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
input.num-in.wide { width: 130px; }
input.num-in.wider { width: 150px; }
input.note-in { width: 40%; }
input:disabled { opacity: 0.45; cursor: not-allowed; }

.field { margin-bottom: 12px; max-width: 520px; }
.field label { display: block; font-weight: 600; margin-bottom: 3px; color: var(--fg-2);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.field .help { font-size: 11px; color: var(--fg-dim); }

table.matrix { width: auto; border: 1px solid var(--line-panel); margin: 3px 0 4px; }
table.matrix th, table.matrix td { text-align: center; padding: 4px 14px; }
table.matrix td { border-top: none; }
table.matrix select { width: auto; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { position: relative; border: 1px solid var(--line-panel); border-radius: 4px; padding: 12px; }
.card a { color: var(--label); font-weight: 600; }
.card a:hover { color: var(--gold); }
.card .muted { font-size: 11.5px; }

/* ---------- fund detail: period chips + workbook grid ---------- */
.panel .tscroll { overflow-x: auto; }

/* Month grids (NAV history, §3.4 waterfall, tax pour): fixed column widths so
   the month columns line up top-to-bottom across panels and stay compact. */
/* width must be non-auto or the browser silently falls back to auto layout
   (content-sized columns), which is what breaks the cross-panel alignment.
   Every monthgrid's <colgroup> must total the same width: label + 12 × month
   + Σ + note. When the panel is
   wider than that total the slack is spread proportionally — identically in
   every panel, so months still line up. */
/* Month grids use the same 12.5px type as every other table. Column widths
   are sized for that type (IBM Plex Mono = 0.6em per character): a month
   cell fits "(12,345,678.90)" and the Σ cell the same plus its divider
   padding. Every month grid shares these tracks, so months line up from
   panel to panel. */
table.monthgrid { table-layout: fixed; width: 100%; min-width: 100%; }
table.monthgrid th, table.monthgrid td { padding: 3px 5px; }
table.monthgrid col.c-label { width: 380px; }
table.monthgrid col.c-m { width: 124px; }
table.monthgrid col.c-sum { width: 140px; }
table.monthgrid col.c-note { width: 300px; }
table.monthgrid th { white-space: normal; }
table.monthgrid th:first-child, table.monthgrid td:first-child { white-space: nowrap; }
table.monthgrid td:last-child, table.monthgrid th:last-child { white-space: nowrap; }
table.monthgrid td.num { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* Freeze first column on all .tscroll tables */
.tscroll table th:first-child,
.tscroll table td:first-child:not([colspan]) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
}
.panel .tscroll table > tbody > tr:nth-child(even):where(:not(.grp):not(.total):not(.waterfall-bucket):not(.waterfall-subtotal):not(.bridge)) > td:first-child:not([colspan]) {
  background-color: #101620;
}
/* Frozen label cell follows the row hover. Specificity (0,6,3) must stay
   above the even-band rule above and the waterfall subtotal/bucket
   first-cell overrides further down. */
.panel .tscroll table > tbody > tr:hover:not(.grp) > td:first-child:not([colspan]) {
  background-color: var(--bg-hl-green);
}
.waterfall-panel tr.waterfall-bucket td,
.tax-waterfall-panel tr.waterfall-bucket td { background: #101725; }
.waterfall-panel tr.waterfall-subtotal td,
.tax-waterfall-panel tr.waterfall-subtotal td { background: #17150F; }
/* The frozen first column above wins on specificity over the plain
   tr.waterfall-* rules, so the sticky label cell of a subtotal/bucket row
   would fall back to the panel color. Re-assert the row background at a
   specificity that beats the sticky rule but still yields to row hover. */
.waterfall-panel .tscroll tr.waterfall-bucket > td:first-child:not([colspan]),
.tax-waterfall-panel .tscroll tr.waterfall-bucket > td:first-child:not([colspan]) { background: #101725; }
.tscroll tr.waterfall-subtotal > td:first-child:not([colspan]) {
  background: #17150F;
  border-left: 2px solid var(--gold);
  padding-left: 10px;
}
.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chiprow .chiplabel {
  font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dim); font-weight: 600;
  text-transform: uppercase; margin-right: 2px;
}
.period-chip.q { padding: 0 10px; font-size: 11px; }

.wg td.rowlabel { color: var(--fg-2); }
.wg tr.subhead td {
  padding: 8px 6px 2px; font-size: 10.5px; letter-spacing: 0.14em; color: var(--label);
  font-weight: 600; text-transform: uppercase; border-top: 1px solid var(--line-panel);
}
.panel th.sig, .panel td.sig { border-left: 1px solid var(--line-panel); padding-left: 18px; }
.wg td.ucell .e { color: var(--fg-muted); }
.wg td.ucell.chg .e { color: var(--fg); font-weight: 600; }

/* Members — net cash flow section (fund detail): activity glyphs + toggles */
.wg .glyphs { margin-left: 4px; font-size: 10px; letter-spacing: 1px; }
.wg .glyphs span { font-weight: 700; }
.g-c { color: var(--green); }
.g-d { color: var(--red); }
.g-r { color: var(--gold); }
.g-e { color: var(--sand); }
.g-t { color: var(--label); }
.wg tr.ncf-inactive { display: none; }
.wg table.ncf-showall tr.ncf-inactive, table.ncf-showall tr.ncf-inactive { display: table-row; }
table.ncf-collapsed tr.ncf-row, table.ncf-collapsed tr.ncf-inactive { display: none; }

/* skipped waterfall steps (bound annotation present but never binding) */
tr.skipped td { color: var(--fg-dim); }

/* clickable sourced cells → provenance popover */
td.src { cursor: pointer; }
td.src:hover { background: var(--bg-hl-green); } /* same tint as the row hover — no second color */

/* provenance popover (fixed near the click) */
.prov-pop {
  position: fixed; z-index: 99; width: 380px;
  background: var(--bg); border: 1px solid var(--gold); border-radius: 4px;
  padding: 12px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}
.prov-pop .pp-head { display: flex; align-items: baseline; gap: 8px; }
.prov-pop .pp-kind {
  font-size: 10px; letter-spacing: 0.16em; color: var(--gold);
  font-weight: 600; text-transform: uppercase;
}
.prov-pop .pp-close { margin-left: auto; color: var(--fg-dim); }
.prov-pop .pp-close:hover { color: var(--gold); }
.prov-pop .pp-label { color: var(--fg); font-weight: 600; margin-top: 6px; }
.prov-pop .pp-value { font-size: 18px; font-weight: 600; color: var(--sand); }
.prov-pop table { border-collapse: collapse; width: 100%; margin-top: 8px; }
.prov-pop td {
  padding: 2px 6px 2px 0; border-top: 1px solid var(--line-row);
  color: var(--fg-2); font-size: 11px; white-space: normal;
}
.prov-pop td.k { color: var(--fg-dim); white-space: nowrap; padding-right: 10px; }
.prov-pop .pp-link { display: inline-block; margin-top: 10px; margin-right: 14px; font-weight: 600; }

/* collapsed audit-only sections (run history, validations, recon) */
.audit-details { border: 1px solid var(--line-chrome); border-radius: 4px; }
.audit-details > summary {
  cursor: pointer; padding: 8px 14px; font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--fg-dim); font-weight: 600; text-transform: uppercase;
}
.audit-details > summary:hover { color: var(--fg-2); }
.audit-details .audit-body { padding: 2px 14px 12px; }

/* status word colors (dashboard grid, manifests, runs) */
.st-SUCCEEDED, .st-PASS, .st-UPLOADED, .st-FETCHED { color: var(--green); font-weight: 600; }
.st-READY, .st-WARN, .st-OFFICIAL, .st-GENERATED, .st-RUNNING { color: var(--gold); font-weight: 600; }
.st-OPEN, .st-PENDING { color: var(--label); font-weight: 600; }
.st-FAILED, .st-FAIL, .st-BLOCKED, .st-VOID { color: var(--red); font-weight: 600; }
.st-FEED, .st-NO_CHANGE, .st-REOPENED, .st-SUPERSEDED { color: var(--fg-dim); font-weight: 600; }
/* Shared quarter status colors for dashboard cells, guide and details. */
.st-CLOSED { color: #FFFFFF; font-weight: 600; }
.st-LIVE { color: var(--green); font-weight: 600; }
.st-CALCULATED { color: var(--accent); font-weight: 600; }
td.qstatus a { text-decoration: none; }
td.qstatus a:hover { text-decoration: underline; }
td.qstatus [title] { cursor: help; }
td.qstatus a[title] { cursor: pointer; }
.reopened-mark { color: var(--fg-dim); font-size: 9px; font-weight: 700; margin-left: 2px; cursor: help; }

/* ---------- user guide (/guide, rendered from docs/user-guide.md) ---------- */
.topbar .help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1.5px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-size: 12px; line-height: 1; font-weight: 700;
}
.topbar .help-icon:hover { color: var(--bg, #000); background: var(--gold); border-color: var(--gold); }

/* ---------- Export JSON menu (top bar, every page) ---------- */
.topbar .export-menu { position: relative; align-self: center; }
.topbar .export-btn {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  border: 1px solid var(--line-panel); border-radius: 3px;
  color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.topbar .export-btn::-webkit-details-marker { display: none; }
.topbar .export-btn:hover, .topbar .export-menu[open] > .export-btn { border-color: var(--gold); background: var(--bg-hl-gold); }
.topbar .export-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.topbar .export-btn .caret { color: var(--fg-dim); font-size: 9px; }
.topbar .export-menu.is-busy > .export-btn { cursor: progress; color: var(--fg-2); }
.topbar .export-menu.is-busy .export-icon { animation: export-pulse 1s ease-in-out infinite; }
.topbar .export-menu.is-warn > .export-btn { border-color: var(--line-danger); color: var(--red); }
.topbar .export-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; min-width: 230px;
  padding: 6px 0; white-space: normal; text-transform: none;
  background: var(--bg-panel); border: 1px solid var(--line-panel); border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.topbar .export-head {
  margin-bottom: 4px; padding: 2px 12px 6px; border-bottom: 1px solid var(--line-row);
  color: var(--fg-dim); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.topbar .export-item { display: block; padding: 4px 12px; color: var(--fg); font-size: 12px; }
.topbar .export-item:hover, .topbar .export-item:focus-visible { background: var(--bg-hl-gold); color: var(--gold); outline: none; }
.topbar .export-note { display: block; padding: 4px 12px; color: var(--fg-dim); font-size: 11px; }
.topbar .export-error { margin: 6px 12px 2px; color: var(--red); font-size: 11px; }
@keyframes export-pulse { 50% { opacity: 0.3; } }

.guide { padding: 22px 26px 26px; }
.guide > *, .guide .tscroll { max-width: 150ch; }
.guide h1 { margin: 4px 0 14px; }
.guide h2 { margin: 26px 0 10px; color: var(--gold); }
.guide h3 { margin: 18px 0 8px; font-size: 12.5px; color: var(--fg-bright); letter-spacing: 0.03em; }
.guide p, .guide li { color: var(--fg-2); line-height: 1.65; }
.guide li { margin: 3px 0; }
.guide strong { color: var(--fg); }
.guide hr { border: none; border-top: 1px solid var(--line-panel); margin: 22px 0; }
.guide code { background: var(--bg-hover); padding: 0 4px; border-radius: 3px; }
.guide .tscroll { margin: 8px 0 12px; }
.guide table { width: auto; }
.guide td { white-space: normal; }

/* TXN_TIEOUT surfacing — NCF cells that don't tie to Addepar's fund-level
   net cash flow get a red flag; the row label carries a summary flag. */
.tieout-flag { color: var(--red); font-weight: 600; cursor: help; }
td.tieout-miss { color: var(--red); }
.tieout-review-control {
  appearance: none; border: 0; background: transparent; padding: 0; font: inherit;
}
button.tieout-flag { cursor: pointer; }
.acknowledged-flag {
  color: var(--fg-dim); font-size: 10px; font-weight: 600; letter-spacing: .03em;
  border: 1px solid var(--line-panel); border-radius: 3px; padding: 1px 4px;
  background: transparent; vertical-align: middle;
}
button.acknowledged-flag { cursor: pointer; }
.tieout-review-panel { margin-top: 12px; }
.tieout-error { color: var(--red); font-weight: 600; padding: 0 8px; }
.tieout-review { border-top: 1px solid var(--line-panel); padding: 7px 8px; }
.tieout-review summary { cursor: pointer; }
.tieout-review-body { padding: 8px 2px 2px; }
.tieout-evidence {
  display: grid; grid-template-columns: minmax(180px, 1fr) max-content; gap: 4px 20px;
  max-width: 620px; margin: 4px 0 10px;
}
.tieout-evidence dt { color: var(--fg-dim); }
.tieout-evidence dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tieout-action-form { display: grid; gap: 6px; max-width: 620px; margin: 10px 0; }
.tieout-action-form textarea { resize: vertical; }
.tieout-action-form button { width: fit-content; }
.tieout-inline-form { display: inline; margin-left: 8px; }
.acknowledged-note { color: var(--fg-dim); max-width: 760px; }
.tieout-history { margin-top: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Breadcrumbs + cross-page links (fund page ↔ member page) */
.crumbs { font-size: 12px; color: var(--fg-dim); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--label); }
.crumbs a:hover { color: var(--gold); }
.panel td a.xlink { color: inherit; border-bottom: 1px dotted var(--fg-dim); }
.panel td a.xlink:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* Member page: a fund behind the selected period stays visible but is left
   out of the TOTAL (the dashboard's stale-row convention). */
.panel tr.behind > td { opacity: 0.5; }
.panel tr.behind > td.note { opacity: 1; }
.member-switch select { background: var(--bg); color: var(--fg); border: 1px solid var(--line-panel); padding: 2px 6px; font: inherit; font-size: 12px; }

/* ---- Demo mode (app/demo) ------------------------------------------------ */
.demo-banner {
  position: sticky; top: 0; z-index: 1000;
  background: var(--gold); color: var(--bg);
  font-weight: 600; font-size: 11px; letter-spacing: .06em;
  text-align: center; padding: 3px 8px;
}
.demo-banner a { color: var(--bg); text-decoration: underline; }
/* Downloads are refused in demo mode; hide their links, disable writes. */
.demo-on a[download], .demo-on a[href*="/download"], .demo-on a[href*="/exports/bundle"],
.demo-on a[href*=".xlsx"], .demo-on a[href*=".csv"], .demo-on a[href$=".json"],
.demo-on a[href*=".json?"] { display: none !important; }
.demo-on form[method="post" i]:not(.demo-keep) button,
.demo-on form[method="post" i]:not(.demo-keep) input[type="submit"] {
  pointer-events: none; opacity: .35;
}
.demo-panel p { max-width: 760px; }
.demo-panel .demo-facts { margin: 10px 0; }
.demo-panel .demo-facts th { text-align: left; color: var(--fg-dim); padding-right: 18px; font-weight: 400; }
.demo-panel .demo-actions { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.demo-panel .demo-note { border-left: 3px solid var(--fg-dim); padding: 4px 10px; }
.demo-panel .demo-note.ok { border-color: var(--green); }
.demo-panel .demo-note.warn, .demo-panel .demo-bad { border-color: var(--red); color: var(--red); }
.demo-on-label { color: var(--gold); }

/* Live refresh indicator (dashboard Import freshness panel + imports page). */
.refresh-progress { border: 1px solid var(--line-panel); border-radius: 4px; padding: 10px 12px; margin: 0 0 12px; background: var(--bg-band); }
.refresh-progress .rp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.refresh-progress .rp-title { color: var(--gold); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.refresh-progress .rp-title.pos { color: var(--green); }
.refresh-progress .rp-title.neg { color: var(--red); }
.refresh-progress .rp-count { color: var(--fg-2); font-size: 12px; }
.refresh-progress .rp-count strong { color: var(--fg); }
.refresh-progress .rp-bar { height: 4px; margin: 8px 0 6px; background: var(--line-row); border-radius: 2px; overflow: hidden; }
.refresh-progress .rp-bar span { display: block; height: 100%; background: var(--gold); transition: width .6s ease; }
.refresh-progress .rp-meta, .refresh-progress .rp-step { color: var(--fg-muted); font-size: 11.5px; margin-top: 2px; }
.refresh-progress .rp-meta strong, .refresh-progress .rp-step strong { color: var(--fg); }
.refresh-progress .rp-funds { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0; padding: 0; }
.refresh-progress .rp-fund { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--line-panel); font-size: 11.5px; color: var(--fg-dim); }
.refresh-progress .rp-fund .rp-sec { color: var(--fg-dim); font-size: 10.5px; }
.refresh-progress .rp-fund.done { color: var(--fg-2); border-color: #2F4A36; }
.refresh-progress .rp-fund.done .rp-mark { color: var(--green); }
.refresh-progress .rp-fund.failed { color: var(--red); border-color: var(--line-danger); }
.refresh-progress .rp-fund.current { color: var(--fg); border-color: var(--gold); }
.refresh-progress .rp-fund.current .rp-mark { color: var(--gold); animation: rp-pulse 1.4s ease-in-out infinite; }
.refresh-progress .rp-done-note { margin-top: 8px; color: var(--green); font-size: 12px; }
@keyframes rp-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .refresh-progress .rp-fund.current .rp-mark { animation: none; }
  .refresh-progress .rp-bar span { transition: none; }
}