/* book.css: the app's one stylesheet. The PM's pick (rulings 162 to 164; batch 6 lane A; notes/design/clone_ui_samples/,
   sample A): Addepar faithful. A grey page, white cards with a small title at the top left, Addepar's multi-colour
   asset-class bars, red negatives in parentheses, a charcoal dark mode; tabular digits everywhere, hanging parentheses
   on negatives (a figure that is not a negative carries data-hang and an invisible closing parenthesis here, so the
   digits of positives and negatives line up in every right-aligned column); no headline figure row (ruling 163); the
   widened ending-value column and bar labels of the rendered screenshots.

   The markup carries structure, classes and data attributes and no element carries a style of its own (the
   screens build with DOM calls; the server's policy refuses inline style), so this file is the whole look. No font is
   loaded and nothing comes from a CDN: the system font. Light and dark follow the operating system.

   Hooks the markup offers:
     .num, [data-negative], [data-hang], [data-unknown]   figures, negatives, the hanging parenthesis, n/m and incomplete
     [data-cls]                                             an asset class (or a GP line kind): its Addepar colour
     .card, .card-head, .card-grid                          the view cards
     .twr-*, .perf-*                                        the bars and the period line
     .asset-table tr[data-level=class|item|total]           the asset table
     .tier, .flag, .state-mark                              tier and provisional or stale markers (text for every reader)
*/

:root {
  color-scheme: light dark;
  --gutter: 24px;
  --bg: #eef0f2;
  --card: #ffffff;
  --tx: #1f2933;
  --mut: #6b7785;
  --line: #e3e6ea;
  --line-strong: #cfd5db;
  --hov: #e9f7f5;
  --acc: #1f9d93;
  --acc-tx: #ffffff;
  --neg: #c0392b;
  --warn: #c98a12;
  --link: #17827a;
  --band: rgba(31, 41, 51, 0.035);
  --shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 24px rgba(16, 24, 32, 0.10);
  --wash: rgba(31, 157, 147, 0.13);
  --perf: #e0a33a;
  --radius: 10px;
  /* Addepar's asset-class colours (sample A's palette) and the house-only and GP kinds beside them */
  --c-private-climate: #5fcfc4;
  --c-hedge-fund: #5b6fd8;
  --c-cash: #0e7c86;
  --c-foreign-currencies: #e0a33a;
  --c-real-assets: #9aa4b1;
  --c-fixed-income: #d4472f;
  --c-structured-managers: #e06060;
  --c-equity: #6fd3f0;
  --c-derivative: #b58ad6;
  --c-fund-interest: #8f7ad6;
  --c-annuity: #c4ad4e;
  --c-other: #b0b7c0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --card: #1f2329;
    --tx: #e6e9ed;
    --mut: #9aa4b1;
    --line: #2f353d;
    --line-strong: #3d444d;
    --hov: #1d3532;
    --acc: #45c7bc;
    --acc-tx: #0f1a19;
    --neg: #ff7b6e;
    --warn: #f0b84a;
    --link: #6fd6cc;
    --band: rgba(230, 233, 237, 0.035);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --wash: rgba(69, 199, 188, 0.08);
    --c-cash: #1aa6b2;
  }
}

* { box-sizing: border-box; }

html { background: radial-gradient(60rem 22rem at 100% 0, var(--wash), transparent 70%) no-repeat, var(--bg); min-height: 100%; }
body {
  margin: 0;
  background: transparent;
  color: var(--tx);
  font: 14px/1.45 system-ui, "Segoe UI", -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;           /* ruling 164: tabular digits everywhere */
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 10px;
  cursor: pointer; font-size: 12px;
}
button:hover { background: var(--hov); }
input[type="date"], input[type="search"], select {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px; font-size: 12px;
}
input[type="date"] { color-scheme: inherit; }

.sr-only, .seg > legend, .annuity > legend {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 8px; top: 8px; z-index: 40; background: var(--card); padding: 6px 10px; border-radius: 6px; }

/* ------------------------------------------------------------------ the top bar */
.app-header {
  display: flex; align-items: center; gap: 0 18px; flex-wrap: wrap;
  padding: 10px var(--gutter); background: var(--card); border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
}
.app-header p { margin: 0; }
.app-name { margin-right: auto !important; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--acc), #5b6fd8);
}
.brand-word { font-weight: 650; letter-spacing: 0.2px; }
.brand-sub { color: var(--mut); font-weight: 500; }
.who { color: var(--mut); font-size: 12px; }
.signout button { font-size: 12px; }

/* the More menu (every screen, grouped) */
.menu { position: relative; }
.menu-button, .picker-button {
  list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12px;
  white-space: nowrap;
}
.menu-button::-webkit-details-marker, .picker-button::-webkit-details-marker { display: none; }
.menu-button::after, .picker-button::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut);
  transform: rotate(45deg) translateY(-2px); margin-left: 2px;
}
.menu[open] > .menu-button, .picker[open] > .picker-button { border-color: var(--acc); }
.menu-panel, .picker-panel {
  position: absolute; z-index: 30; margin: 6px 0 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu-panel { right: 0; list-style: none; padding: 6px; min-width: 16rem; max-height: 75vh; overflow-y: auto; }
.menu-panel li a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--tx); }
.menu-panel li a:hover { background: var(--hov); text-decoration: none; }
.menu-panel li a[aria-current="page"] { color: var(--acc); font-weight: 600; }
.menu-panel li a[data-view-only] { font-style: italic; }
.menu-group { padding: 8px 10px 2px; font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: 0.4px; }

/* ------------------------------------------------------------------ the control row */
.control-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px var(--gutter) 4px;
}
.topbar { display: contents; }
.topbar fieldset, .view-toggle { border: 0; margin: 0; padding: 0; min-width: 0; }

/* segmented controls: the portfolio selector, the holder selector, the view toggle */
.seg { display: inline-flex; }
.seg label, .seg .view-options label, .seg .holder-options label {
  position: relative; display: inline-flex; align-items: center; padding: 5px 11px; font-size: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); margin-left: -1px; color: var(--mut); white-space: nowrap;
}
.seg label:first-of-type, .seg .view-options label:first-child, .seg .holder-options label:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.seg label:last-of-type, .seg .view-options label:last-child, .seg .holder-options label:last-child { border-radius: 0 8px 8px 0; }
.seg label:only-of-type { border-radius: 8px; }
.seg input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label:has(input:checked) { background: var(--acc); border-color: var(--acc); color: var(--acc-tx); z-index: 1; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.seg label:has(input:disabled) { cursor: default; }
.view-options, .holder-options { display: inline-flex; }
.view-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.view-toggle .note:empty { display: none; }
.view-toggle .note { font-size: 11px; color: var(--mut); max-width: 22rem; }

/* the pickers: the view picker (with its search box) and the date range */
.picker { position: relative; }
.picker-button::before {
  /* the view picker's mark: three bars (gradients only, no image) */
  content: ""; width: 12px; height: 11px; margin-right: 2px;
  background: linear-gradient(var(--mut), var(--mut)) 0 100% / 3px 55% no-repeat,
    linear-gradient(var(--mut), var(--mut)) 4.5px 100% / 3px 100% no-repeat,
    linear-gradient(var(--mut), var(--mut)) 9px 100% / 3px 35% no-repeat;
}
.range-picker .picker-button::before { background: none; width: 12px; height: 11px; border: 1.5px solid var(--mut); border-top-width: 3px; border-radius: 2px; }
.picker-panel { left: 0; padding: 12px; min-width: 20rem; }
.view-picker .picker-panel { width: min(26rem, calc(100vw - 32px)); }
.picker-search { margin: 0 0 8px; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--mut); }
.picker-search input { flex: 1; min-width: 0; }
.view-list { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.view-list a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--tx); }
.view-list a:hover { background: var(--hov); text-decoration: none; }
.view-list a[aria-current="page"] { color: var(--acc); font-weight: 600; }
/* ruling 175 (PM 2026-10-07, sample A): a view's group opens on its bold consolidated row under a gradient rule in the
   group's tint; its entity rows sit indented, the entity in bold */
.view-list li.vg-t0 { --gc: var(--acc); }
.view-list li.vg-t1 { --gc: var(--c-hedge-fund); }
.view-list li.vg-t2 { --gc: var(--c-foreign-currencies); }
.view-list li.vg-t3 { --gc: var(--c-derivative); }
.view-list li.vg-t4 { --gc: var(--c-real-assets); }
.view-list li.vg-cons:not(:first-child) { margin-top: 6px; padding-top: 6px; position: relative; }
.view-list li.vg-cons:not(:first-child)::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--gc), transparent 85%); }
.view-list li.vg-cons a { font-weight: 650; }
.view-list li.vg-ent a { padding-left: 22px; color: var(--mut); }
.view-list li.vg-ent a b { font-weight: 600; color: var(--tx); }
.view-list li.vg-ent a[aria-current="page"], .view-list li.vg-ent a[aria-current="page"] b { color: var(--acc); }
.range-picker .picker-panel { width: min(34rem, calc(100vw - 32px)); }
.range-picker fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.range-picker legend { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: 0.4px; padding: 0; margin-bottom: 4px; }
.presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.presets button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-tx); }
.range-inputs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
#scope-set label { margin-right: 10px; font-size: 12px; }

.annuity { display: inline-flex; align-items: center; gap: 6px; }
.annuity .switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.annuity .note { display: none; }

.range-line { margin: 0; padding: 2px var(--gutter) 0; font-size: 11px; color: var(--mut); }
.status { margin: 6px var(--gutter) 0; padding: 8px 12px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 8px; font-size: 12px; }
.status:empty { display: none; }

/* ------------------------------------------------------------------ the page */
.app-main { padding: 8px var(--gutter) 24px; max-width: 100%; }
.app-main:focus { outline: none; }
h1 { font-size: 20px; font-weight: 600; margin: 10px 0 2px; letter-spacing: -0.1px; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 13px; font-weight: 600; margin: 8px 0 6px; }
.note, .context, .method-line, .reason, .locator, .completeness { font-size: 12px; color: var(--mut); }
.context { margin: 0 0 12px; }
.message { font-weight: 600; }
.error { font-weight: 600; color: var(--neg); }
p { margin: 6px 0; }

/* every screen's sections are cards on the grey page */
.screen > section, .screen > details, .card, .drawer section {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px 14px; margin: 0 0 12px; min-width: 0;
}
.screen > details { padding: 10px 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 13px; }
.card-tools { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); }
.card-tools label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.card-grid > .card { margin: 0; display: flex; flex-direction: column; }   /* ruling 177: both fill the row */
.view-title { margin-bottom: 2px; }
.view-notes { margin: 4px 2px 0; }
.view-notes .note { margin: 3px 0; }
.table-actions { display: flex; gap: 6px; margin: 10px 0 0; }
.table-note { margin: 6px 0 0; font-size: 12px; color: var(--mut); }
h1[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ figures */
.num { text-align: right; white-space: nowrap; }
.fig { white-space: nowrap; }
.fig .tier, .fig .flag, .fig .mark-date { font-size: 0.8em; color: var(--mut); }
.fig .bench-from { font-size: 0.8em; color: var(--mut); }       /* ruling 180: a benchmark from the first held day */
abbr[title] { text-decoration: none; }
[data-negative] { color: var(--neg); }
[data-unknown] { color: var(--mut); font-style: normal; }
/* ruling 164: hanging parentheses. A figure that is not a negative hangs an invisible ")" in every right-aligned place */
.num [data-hang]::after, td [data-hang]::after, .twr-val [data-hang]::after { content: ")"; visibility: hidden; }
.num-link { color: inherit; }
.num-link:hover { color: var(--link); }
.state-mark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 6px; vertical-align: 2px; }
.state-mark[data-flag="stale"] { background: var(--neg); }

/* ------------------------------------------------------------------ the bars: time-weighted return by asset class */
/* ruling 177: the rows share the card's height (a 2 px gap between bars, each bar its row's full height, at most 48 px,
   the rows centred when that cap leaves room), the class names in the primary ink, a long one wrapping in place of the
   ellipsis */
.twr-list { list-style: none; margin: 4px 0 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; }
.twr-row {
  display: grid; grid-template-columns: minmax(8rem, 13.5rem) minmax(4rem, 1fr) 6.25rem; gap: 10px; align-items: center;
  flex: 1 1 0; max-height: 48px; border-radius: 4px;      /* at least its content: a wrapped name */
}
.twr-row:hover { background: var(--hov); }
.twr-name { font-size: 12px; line-height: 1.25; color: var(--tx); text-align: right; overflow-wrap: break-word; }   /* wraps, never cut */
.twr-track { display: block; align-self: stretch; position: relative; min-height: 21px; }
.twr-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.twr-zero { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.twr-val { font-size: 12px; text-align: right; white-space: nowrap; }
[data-cls] { --cls: var(--c-other); }
[data-cls="private-climate"] { --cls: var(--c-private-climate); }
[data-cls="hedge-fund"] { --cls: var(--c-hedge-fund); }
[data-cls="cash-and-cash-equivalent"] { --cls: var(--c-cash); }
[data-cls="foreign-currencies"] { --cls: var(--c-foreign-currencies); }
[data-cls="real-assets"] { --cls: var(--c-real-assets); }
[data-cls="fixed-income"] { --cls: var(--c-fixed-income); }
[data-cls="structured-managers"] { --cls: var(--c-structured-managers); }
[data-cls="equity"] { --cls: var(--c-equity); }
[data-cls="derivative"] { --cls: var(--c-derivative); }
[data-cls="fund-interest"] { --cls: var(--c-fund-interest); }
[data-cls="annuity"] { --cls: var(--c-annuity); }
[data-cls="fees-series"] { --cls: var(--c-private-climate); }
[data-cls="current-year-incentive-crystallized"] { --cls: var(--c-hedge-fund); }
[data-cls="current-year-incentive-accrued"] { --cls: var(--c-foreign-currencies); }
[data-cls="incentive-accrual-since-the-last-packet"] { --cls: var(--c-structured-managers); }
[data-cls="pocket-slices"] { --cls: var(--c-equity); }
.twr-bar { fill: var(--cls); }
.cls-chip { display: none; }

/* ------------------------------------------------------------------ the period line */
/* ruling 177: the plot box fills the card left and right and down to the readout; lineCard draws at its pixel size */
.perf-chart { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.perf-plot { position: relative; flex: 1 1 auto; min-height: 240px; }
.perf-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.perf-band { fill: var(--band); }
.perf-grid { stroke: var(--line); stroke-width: 1; }
.perf-zero { stroke: var(--line-strong); stroke-width: 1; }
.perf-line { fill: none; stroke: var(--perf); stroke-width: 1.8; stroke-linejoin: round; }
.perf-dot { fill: var(--perf); }
.perf-cursor { stroke: var(--mut); stroke-width: 1; stroke-dasharray: 3 3; }
.perf-focus { fill: var(--card); stroke: var(--perf); stroke-width: 2; }
.axis-label { fill: var(--mut); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-readout { display: block; font-size: 12px; color: var(--mut); margin-top: 4px; min-height: 1.4em; }

/* ------------------------------------------------------------------ the asset table */
.table-wrap { overflow-x: auto; max-width: 100%; margin: 0 -4px; padding: 0 4px; }
.asset-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 13px; }
.asset-table th, .asset-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.asset-table thead th { color: var(--mut); font-weight: 500; font-size: 12px; text-align: right; vertical-align: bottom;
  border-bottom: 1px solid var(--line-strong); white-space: normal; }
.asset-table thead th.col-name { text-align: left; }
.asset-table .col-name { text-align: left; font-weight: 400; width: 27%; min-width: 13rem; }
.asset-table .col-end { min-width: 9.75rem; width: 13%; }           /* the widened ending-value column */
.asset-table .col-allocation, .asset-table .col-contribution, .asset-table .col-benchmark { min-width: 6.5rem; }
.asset-table tbody tr:hover > * { background: var(--hov); }
.asset-table tr[data-level="class"] > th { font-weight: 500; }
.asset-table tr[data-level="class"] > th .cls-name { vertical-align: middle; }
.asset-table tr[data-level="item"] > th { padding-left: 38px; color: var(--tx); white-space: normal; }   /* ruling 177 */
.asset-table tr[data-level="item"] > th a { color: var(--tx); }
.asset-table tr[data-level="item"] > th a:hover { color: var(--link); }
.asset-table tr[data-level="item"] > td { color: var(--tx); }
.asset-table tr[data-open] > * { background: var(--hov); }
.asset-table tfoot th, .asset-table tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--line-strong); }
.line-count { color: var(--mut); font-size: 11px; }
/* the fund look-through (lane L, rulings 177 and 179): a row held through the fund, and the memo row under Total */
.via-tag { display: inline-block; margin-left: 2px; padding: 0 6px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--mut); white-space: nowrap; vertical-align: 1px; }
.via-tag[data-via="partly"] { border-style: dashed; }
.asset-table tfoot tr[data-level="memo"] > th, .asset-table tfoot tr[data-level="memo"] > td { font-weight: 400;
  color: var(--mut); font-style: italic; border-top: 1px dashed var(--line); }
.asset-table tfoot tr[data-level="memo"] > th { white-space: normal; }
button.chev {
  width: 20px; height: 20px; padding: 0; margin: 0 4px 0 -4px; border: 0; background: transparent; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
button.chev::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut);
  transform: rotate(-45deg); transition: transform 0.12s ease;
}
button.chev[aria-expanded="true"]::before { transform: rotate(45deg) translate(-1px, -1px); }
button.chev:hover { background: var(--line); }
button.sort { border: 0; background: transparent; padding: 0; font-size: 12px; color: var(--mut); text-align: right; white-space: normal; }
button.sort:hover { color: var(--tx); background: transparent; }
th[aria-sort] button.sort { color: var(--tx); font-weight: 600; }
th[aria-sort="descending"] button.sort::after { content: " \2193"; }
th[aria-sort="ascending"] button.sort::after { content: " \2191"; }

/* ------------------------------------------------------------------ the other screens' tables, tiles and charts */
.scroll { overflow-x: auto; max-width: 100%; }
table.grid { border-collapse: collapse; margin: 6px 0; font-size: 13px; width: 100%; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
table.grid thead th { color: var(--mut); font-weight: 500; font-size: 12px; border-bottom-color: var(--line-strong);
  position: sticky; top: 0; background: var(--card); }
table.grid th.num, table.grid td.num { text-align: right; }
table.grid tbody th { font-weight: 400; }
table.grid tbody tr:hover > * { background: var(--hov); }
table.grid caption { text-align: left; font-size: 12px; color: var(--mut); padding: 2px 0 4px; }
table.compact th, table.compact td { padding: 4px 8px; }

/* the holdings tree: indent by depth */
tr[data-depth="1"] > :first-child { padding-left: 1.5rem; }
tr[data-depth="2"] > :first-child { padding-left: 3rem; }
tr[data-depth="3"] > :first-child { padding-left: 4.5rem; }
tr[data-depth="4"] > :first-child { padding-left: 6rem; }
tr[data-depth="5"] > :first-child { padding-left: 7.5rem; }
.asset-table tr[data-depth="1"] > :first-child { padding-left: 38px; }
tr:not([data-leaf])[data-level] > th { font-weight: 500; }
.tree-name .toggle { min-width: 5rem; margin-right: 4px; }

/* tiles: stacked full width, never a row of headline cards across the top (ruling 163) */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tiles.attention { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tile, .attention-tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; background: var(--card); }
.tile h2, .tile h3, .attention-tile h3 { margin: 2px 0 6px; }
dl.facts { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 6px 0; font-size: 13px; }
dl.tile-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 4px 16px; margin: 6px 0; }
dl.facts dt, dl.tile-figures dt { color: var(--mut); font-size: 12px; }
dl.facts dd, dl.tile-figures dd { margin: 0; overflow-wrap: anywhere; }
.tile .fig, .tile .reason { white-space: normal; }

.controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; background: var(--card); }
.chip-remove { font-size: 11px; padding: 0 6px; margin-left: 2px; }
.bars { list-style: none; padding: 0; margin: 6px 0; }
.bar { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(6rem, 1fr) max-content max-content; gap: 8px; align-items: center; margin: 3px 0; font-size: 12px; }
.bar button { text-align: left; }
.bar meter { width: 100%; height: 10px; }

.chart { margin: 6px 0; max-width: 60rem; }
.chart-svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.chart .value-line { fill: none; stroke: var(--perf); stroke-width: 1.6; }
.chart .value-dot { fill: var(--perf); }
.chart .flow-mark { fill: var(--card); stroke: var(--acc); stroke-width: 1.5; }
.chart .axis, .chart .zero, .chart .cursor { stroke: var(--line-strong); stroke-width: 1; }
.chart .zero { stroke-dasharray: 4 3; }
.chart .value-line[data-series="0"] { stroke: var(--c-private-climate); }
.chart .value-line[data-series="1"] { stroke: var(--c-hedge-fund); }
.chart .value-line[data-series="2"] { stroke: var(--perf); }
.chart-legend { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 12px; color: var(--mut); }
.chart-legend li::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c-other); }
.chart-legend li[data-series="0"]::before { background: var(--c-private-climate); }
.chart-legend li[data-series="1"]::before { background: var(--c-hedge-fund); }
.chart-legend li[data-series="2"]::before { background: var(--perf); }
.chart figcaption { font-size: 12px; color: var(--mut); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 6px 0 12px; }
.tabs a { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--tx); font-size: 12px; }
.tabs a[aria-current="page"] { background: var(--acc); border-color: var(--acc); color: var(--acc-tx); }
.restricted-note { font-size: 12px; color: var(--warn); }

/* ------------------------------------------------------------------ the drawer */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100%); overflow-y: auto; background: var(--bg);
  color: var(--tx); border-left: 1px solid var(--line); padding: 0 16px 24px; z-index: 35; box-shadow: var(--shadow);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: 0;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 0; z-index: 1; }
.drawer-head h2 { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------ text blocks */
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.md li[data-depth="1"] { margin-left: 1.5rem; }
.md li[data-depth="2"] { margin-left: 3rem; }
details { margin: 4px 0; }
summary { cursor: pointer; }
.rules li { margin: 4px 0; }

/* ------------------------------------------------------------------ the footer */
.app-footer { padding: 4px var(--gutter) 28px; font-size: 11px; color: var(--mut); }
.app-footer p { margin: 4px 0; }
.app-footer .run { margin-left: 10px; }

/* ------------------------------------------------------------------ sign-in, enrolment and passphrase pages
   Lane S (ruling 176): sample A, a frosted glass card, centred, over the PM's photo (img/desk_bg.webp); the mark and
   the favicon a bold W, white on the deep teal. Only a body of class glass-page takes these rules and tokens, so the
   app's own look (rulings 162 to 164, 175) is untouched. */
.glass-page {
  --g-tx: #1f2933;
  --g-mut: #4a5560;
  --g-fine: #5f6b78;
  --g-field: #ffffff;
  --g-field-line: #cfd5db;
  --g-brand: #14575a;
  --g-brand-hov: #0f4648;
  --g-brand-tx: #ffffff;
  --g-glass: rgba(255, 255, 255, 0.72);
  --g-glass-line: rgba(255, 255, 255, 0.6);
  --g-shadow: 0 20px 60px rgba(20, 30, 50, 0.25);
  --g-scrim: rgba(10, 16, 20, 0);
  --g-neg: #b03a2e;
  --g-ok: #14575a;
  --g-link: #14575a;
  --g-code-bg: rgba(20, 87, 90, 0.08);
}
@media (prefers-color-scheme: dark) {
  .glass-page {
    --g-tx: #e6e9ed;
    --g-mut: #c3cbd3;
    --g-fine: #a9b3bd;
    --g-field: rgba(17, 21, 25, 0.82);
    --g-field-line: #4a525c;
    --g-brand: #17827a;
    --g-brand-hov: #1f9d93;
    --g-glass: rgba(22, 26, 31, 0.68);
    --g-glass-line: rgba(255, 255, 255, 0.12);
    --g-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --g-scrim: rgba(6, 10, 14, 0.28);
    --g-neg: #ff8a7e;
    --g-ok: #6fd6cc;
    --g-link: #6fd6cc;
    --g-code-bg: rgba(111, 214, 204, 0.10);
  }
}
html:has(> body.glass-page) { background: #33454a; }
body.glass-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; color: var(--g-tx);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-variant-numeric: normal;
}
/* the photo, fixed behind the card: an img of the page (the stylesheet loads nothing itself) */
.glass-page .backdrop {
  position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center;
  background: #33454a; pointer-events: none; user-select: none;
}
body.glass-page::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--g-scrim); }
.glass-page .glass-card {
  width: 100%; max-width: 380px; padding: 30px 30px 24px; border-radius: 18px;
  background: var(--g-glass); border: 1px solid var(--g-glass-line); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.glass-page .glass-card.wide { max-width: 440px; }
.glass-page .glass-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.glass-page .glass-head .mark { width: 40px; height: 40px; flex: none; display: block; }
.glass-page .glass-head h1 { font-size: 20px; line-height: 1.2; margin: 0; }
.glass-page .glass-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--g-mut); }
.glass-page form { margin: 0; }
.glass-page label { display: block; font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; }
.glass-page input[type="email"], .glass-page input[type="password"], .glass-page input[type="text"] {
  width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--g-field-line); background: var(--g-field);
  padding: 0 12px; font-size: 14px; color: var(--g-tx);
}
.glass-page input::placeholder { color: var(--g-fine); }
.glass-page :focus-visible { outline: 2px solid var(--g-brand-hov); outline-offset: 2px; }
.glass-page input:disabled { opacity: 0.65; }
.glass-page input.code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.glass-page input.code:placeholder-shown { letter-spacing: normal; }
.glass-page .check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 13px; margin-top: 12px; }
.glass-page .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--g-brand); }
.glass-page .btn {
  margin-top: 20px; width: 100%; height: 42px; border: 0; border-radius: 8px; padding: 0; background: var(--g-brand);
  color: var(--g-brand-tx); font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.glass-page .btn:hover { background: var(--g-brand-hov); }
.glass-page .btn:disabled { opacity: 0.7; cursor: progress; }
.glass-page .linkish { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--g-link); cursor: pointer; }
.glass-page .linkish:hover { background: none; text-decoration: underline; }
.glass-page a { color: var(--g-link); }
.glass-page .fine { font-size: 11.5px; color: var(--g-fine); margin: 14px 0 0; line-height: 1.5; }
.glass-page .hint { font-size: 11.5px; color: var(--g-fine); margin: 6px 0 0; }
.glass-page .msg { min-height: 1.4em; margin: 12px 0 0; font-size: 12.5px; }
.glass-page .msg[data-kind="error"] { color: var(--g-neg); }
.glass-page .msg[data-kind="ok"] { color: var(--g-ok); }
.glass-page .step-code .when-pass { display: none; }
.glass-page form:not(.step-code) .when-code { display: none; }
.glass-page .qr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; }
.glass-page .qr img { width: 148px; height: 148px; border-radius: 8px; background: #ffffff; padding: 6px; image-rendering: pixelated; }
.glass-page .qr p { margin: 0 0 6px; font-size: 12.5px; color: var(--g-mut); }
.glass-page .secret { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; word-break: break-word;
  background: var(--g-code-bg); border-radius: 6px; padding: 6px 8px; }
.glass-page .facts { margin: 12px 0 0; font-size: 12.5px; color: var(--g-mut); }
.glass-page .facts strong { color: var(--g-tx); font-weight: 600; }
@media (max-width: 420px) {
  .glass-page .glass-card { padding: 24px 20px 20px; border-radius: 16px; }
  .glass-page .qr { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-page .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-field); }
}

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 64rem) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; }
  .app-header { gap: 6px 10px; }
  .who { display: none; }
  .control-row { gap: 6px; }
  .view-toggle { margin-left: 0; }
  .picker-panel { position: fixed; left: 16px; right: 16px; width: auto !important; min-width: 0; }
  .twr-row { grid-template-columns: minmax(5rem, 8rem) minmax(3rem, 1fr) 5.5rem; gap: 6px; }
  .perf-plot { min-height: 200px; }
  .bar { grid-template-columns: 1fr; }
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  .asset-table .col-name { min-width: 10rem; }
  table.grid th, table.grid td { padding: 4px 6px; }
}