/* Financebot — research desk.
   A desk, not a trading terminal: warm paper, graphite type, one ink accent, and colour
   reserved entirely for thesis state (in zone / above trim / broken). Two densities in
   one system — data views are tight, report prose is airy and set in serif. */

:root {
  /* surfaces: one hue (warm neutral), lightness only */
  --paper:    hsl(40 24% 97.5%);
  --leaf:     hsl(40 30% 99.5%);
  --sunk:     hsl(40 16% 94.5%);
  --rule:     hsl(38 14% 87%);
  --rule-soft:hsl(38 14% 91%);

  /* four text levels */
  --graphite: hsl(35 12% 14%);
  --pencil:   hsl(35 8% 38%);
  --faint:    hsl(35 7% 54%);
  --ghost:    hsl(35 7% 68%);

  --ink:      hsl(228 58% 44%);   /* the pen — links, focus, identity */
  --ink-soft: hsl(228 58% 44% / .09);
  --grow:     hsl(155 62% 29%);   /* in zone — saturated so the one accent pulls the eye */
  --rich:     hsl(33 74% 42%);    /* above trim */
  --broken:   hsl(4 56% 45%);     /* thesis broken */

  --lift: 0 0 0 1px hsl(38 14% 87% / .9), 0 1px 2px -1px hsl(35 20% 30% / .07),
          0 3px 8px -2px hsl(35 20% 30% / .05);

  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --serif: Charter, "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --u: 4px;                        /* spacing base — all values are multiples */
  --r-sm: 5px; --r: 9px; --r-lg: 14px;
}

:root[data-theme="dark"] {
  --paper:    hsl(35 8% 8.5%);
  --leaf:     hsl(35 7% 11.5%);
  --sunk:     hsl(35 8% 6.5%);
  --rule:     hsl(0 0% 100% / .10);
  --rule-soft:hsl(0 0% 100% / .06);
  --graphite: hsl(38 16% 92%);
  --pencil:   hsl(38 8% 68%);
  --faint:    hsl(38 7% 52%);
  --ghost:    hsl(38 7% 38%);
  --ink:      hsl(224 78% 72%);
  --ink-soft: hsl(224 78% 72% / .13);
  --grow:     hsl(153 64% 54%);
  --rich:     hsl(36 78% 60%);
  --broken:   hsl(6 68% 65%);
  --lift: 0 0 0 1px hsl(0 0% 100% / .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: hsl(35 8% 8.5%); --leaf: hsl(35 7% 11.5%); --sunk: hsl(35 8% 6.5%);
    --rule: hsl(0 0% 100% / .10); --rule-soft: hsl(0 0% 100% / .06);
    --graphite: hsl(38 16% 92%); --pencil: hsl(38 8% 68%); --faint: hsl(38 7% 52%);
    --ghost: hsl(38 7% 38%); --ink: hsl(224 78% 72%); --ink-soft: hsl(224 78% 72% / .13);
    --grow: hsl(153 64% 54%); --rich: hsl(36 78% 60%); --broken: hsl(6 68% 65%);
    --lift: 0 0 0 1px hsl(0 0% 100% / .07);
  }
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0; background: var(--paper); color: var(--graphite);
  font: 400 14px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm); }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.017em; margin: 0; }
p { text-wrap: pretty; }

/* ─── chrome ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 7); height: 52px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.brand { font-weight: 620; color: var(--graphite); letter-spacing: -.02em; }
.brand span {
  display: block; font-size: 10px; font-weight: 500; color: var(--faint);
  letter-spacing: .08em; text-transform: uppercase; margin-top: -2px;
}
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: calc(var(--u) * 1); margin-right: auto; }
.top nav a {
  padding: 6px 10px; border-radius: var(--r-sm); color: var(--pencil);
  font-weight: 500; transition: background .14s cubic-bezier(.23,1,.32,1), color .14s;
}
.top nav a:hover { background: var(--sunk); color: var(--graphite); text-decoration: none; }
.top nav a.on { color: var(--ink); background: var(--ink-soft); }
.theme {
  width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%;
  background: linear-gradient(105deg, var(--graphite) 50%, var(--leaf) 50%);
  cursor: pointer; padding: 0;
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.theme:hover { transform: rotate(24deg); }
.theme:active { transform: scale(.94); }

/* language toggle — shows the language you would switch TO */
.lang {
  min-width: 26px; height: 26px; padding: 0 6px; margin-right: 6px;
  border: 1px solid var(--rule); border-radius: 13px; background: var(--leaf);
  color: var(--pencil); font-size: 12px; font-weight: 600; line-height: 24px;
  cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.lang:hover { transform: scale(1.06); }
.lang:active { transform: scale(.94); }
.lang::after { content: "中"; }
:root[data-lang=zh] .lang::after { content: "EN"; }

/* bilingual content: show one language, hide the other. Default (no data-lang) = English.
   `.l` + attribute keeps specificity above generic `X span` rules so toggling always wins. */
.l[data-zh] { display: none; }
:root[data-lang=zh] .l[data-en] { display: none; }
:root[data-lang=zh] .l[data-zh] { display: inline; }
/* block-level bilingual (a whole thesis panel) */
.lb[data-zh] { display: none; }
:root[data-lang=zh] .lb[data-en] { display: none; }
:root[data-lang=zh] .lb[data-zh] { display: block; }

main { max-width: 1180px; margin: 0 auto; padding: calc(var(--u) * 9) calc(var(--u) * 7) 96px; }
body.reading main { max-width: 860px; }

footer {
  max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--u) * 7) 56px;
  color: var(--ghost); font-size: 11.5px; max-width: 68ch;
}

/* ─── hero: the one focal zone ───────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 10); align-items: start;
  padding-bottom: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 9);
  border-bottom: 1px solid var(--rule-soft);
}
.hero h1 { font-size: 30px; font-weight: 640; letter-spacing: -.028em; }
.hero-t { max-width: 62ch; }
.regime {
  margin: calc(var(--u) * 3) 0 0; color: var(--pencil); font-size: 13px; line-height: 1.6;
}
.regime b { color: var(--graphite); font-weight: 600; }

/* demoted market-regime context: a slim strip under the actions, not the hero */
.regime-strip {
  margin: calc(var(--u) * 5) 0 0; padding: calc(var(--u) * 3) calc(var(--u) * 4);
  background: var(--leaf); border: 1px solid var(--rule-soft); border-radius: var(--r);
  font-size: 12px;
}
.regime-strip > summary {
  cursor: pointer; list-style: none; display: flex; gap: calc(var(--u) * 2);
  align-items: baseline; color: var(--pencil);
}
.regime-strip > summary::-webkit-details-marker { display: none; }
.regime-strip > summary::before {
  content: "▸"; color: var(--faint); font-size: 10px; transition: transform .15s;
}
.regime-strip[open] > summary::before { transform: rotate(90deg); }
.regime-strip > summary b { color: var(--graphite); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; font-size: 11px; flex: none; }
.rs-lead { min-width: 0; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regime-strip[open] .rs-lead { display: none; }
.regime-strip .regime { margin-top: calc(var(--u) * 3); }

.tally { display: flex; gap: calc(var(--u) * 8); margin: 0; }
.tally a {
  display: block; text-align: right; color: inherit;
  border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px;
  transition: background .14s;
}
.tally a:hover { background: var(--sunk); text-decoration: none; }
.ty-k {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
}
.ty-v { display: block; margin: 2px 0 0; font-size: 27px; font-weight: 600; letter-spacing: -.03em; }
.tally .is-in { color: var(--grow); }
.tally .is-hot { color: var(--rich); }
:target { scroll-margin-top: 68px; }

.hero-s { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
.filter {
  width: 200px; padding: 7px 11px; font: inherit; font-size: 13px;
  background: var(--sunk); color: var(--graphite);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.filter::placeholder { color: var(--ghost); }

/* ─── section headers ────────────────────────────────────────────────────── */
.sec {
  display: flex; align-items: baseline; gap: calc(var(--u) * 3);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--graphite);
  margin: calc(var(--u) * 10) 0 calc(var(--u) * 4);
}
section:first-child > .sec, .split > section > .sec:first-child { margin-top: 0; }
.sec span:not(.l) {
  font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--faint);
}

/* ─── the signature: price against its own entry band ────────────────────── */
.zb { position: relative; height: 12px; min-width: 90px; }
.zb::before {
  content: ""; position: absolute; inset: 5px 0 auto; height: 2px;
  background: var(--rule); border-radius: 1px;
}
.zb-band {
  position: absolute; top: 4px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--grow) 42%, transparent);
}
.zb-trim {
  position: absolute; top: 1px; width: 1.5px; height: 10px; border-radius: 1px;
  background: var(--rich); opacity: .8;
}
.zb-now {
  position: absolute; top: 0; width: 3px; height: 12px; margin-left: -1.5px;
  border-radius: 2px; background: var(--graphite);
}
.zb-now.is-in { background: var(--grow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--grow) 20%, transparent); }
.zb-none::before { background: repeating-linear-gradient(90deg, var(--rule) 0 3px, transparent 3px 6px); }
/* open-ended threshold ("accumulate below $140") — floor is inferred, so fade it out */
.zb-approx .zb-band {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--grow) 42%, transparent) 55%);
}
.zb-w { height: 16px; }
.zb-w::before { inset: 7px 0 auto; }
.zb-w .zb-band { top: 6px; }
.zb-w .zb-trim { top: 3px; height: 12px; }
.zb-w .zb-now { height: 16px; }
.zb-lbl {
  display: flex; justify-content: space-between; gap: var(--u);
  margin-top: 6px; font-size: 10.5px; color: var(--faint);
}
.zb-lbl span:nth-child(2) { color: var(--pencil); font-weight: 550; }

/* ─── conviction chip ────────────────────────────────────────────────────── */
.cv {
  display: inline-block; min-width: 26px; padding: 1px 5px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.45;
}
.cv-hi { background: color-mix(in srgb, var(--grow) 15%, transparent); color: var(--grow); }
.cv-mid { background: var(--sunk); color: var(--pencil); }
.cv-lo { background: color-mix(in srgb, var(--broken) 12%, transparent); color: var(--broken); }
.cv-none { color: var(--ghost); background: none; }

/* ─── in-zone cards: the focal element ───────────────────────────────────── */
.cards {
  display: grid; gap: calc(var(--u) * 4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.card {
  padding: calc(var(--u) * 5); border-radius: var(--r-lg);
  background: var(--leaf); box-shadow: var(--lift);
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s;
}
.card:hover { transform: translateY(-1px); box-shadow: var(--lift), 0 6px 16px -6px hsl(35 20% 25% / .13); }
.card-h { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); }
.tkr { font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--graphite); }
.tkr:hover { color: var(--ink); text-decoration: none; }
.px { margin-left: auto; font-size: 13px; font-weight: 550; color: var(--pencil); }
.th {
  margin: calc(var(--u) * 4) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--pencil);
}
.card-f {
  display: flex; justify-content: space-between; gap: var(--u);
  margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--rule-soft);
  font-size: 10.5px; color: var(--faint);
}
/* the top-ranked in-zone name: a focal card so "act on this first" is read, not deduced */
.card-lead {
  box-shadow: var(--lift), inset 3px 0 0 var(--grow), 0 4px 14px -8px hsl(35 20% 25% / .16);
  background: color-mix(in srgb, var(--grow) 4%, var(--leaf));
}
.lead-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grow); background: color-mix(in srgb, var(--grow) 13%, transparent);
  padding: 2px 6px; border-radius: 20px;
}

/* the decision the owner opened the page for, above the price axis */
.verdict {
  margin: 0 0 calc(var(--u) * 3); font-size: 15px; font-weight: 640; letter-spacing: -.01em;
}
.verdict.v-in  { color: var(--grow); }
.verdict.v-hot { color: var(--rich); }
.verdict.v-near { color: var(--pencil); }

/* ─── dense tables ───────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 10); }
.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grid th {
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 2); text-align: left;
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--rule);
}
.grid td { padding: 9px calc(var(--u) * 2); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.grid tbody tr:hover td { background: var(--sunk); }
.grid tr:last-child td { border-bottom: 0; }
.c-t { font-weight: 620; white-space: nowrap; width: 1%; }
.c-t a { color: var(--graphite); }
.c-t a:hover { color: var(--ink); }
.c-c, .c-p, .c-d { width: 1%; white-space: nowrap; }
.c-p { color: var(--pencil); font-weight: 550; }
.c-d { color: var(--ghost); font-size: 11px; }
.c-z { width: 130px; }
/* the thesis column absorbs all remaining width — without this the fixed/nowrap
   columns win the auto-layout fight and the prose wraps to a ~10-char ribbon */
.c-n { width: 100%; color: var(--faint); line-height: 1.5; }
/* Multi-prose-column tables need declared proportions — auto-layout lets the first
   wide column take everything and starves the rest into vertical ribbons. */
.grid.fixed { table-layout: fixed; }
.grid.fixed td { vertical-align: top; color: var(--faint); }
/* a fixed-layout column is a hard width -- the ticker cell's nowrap would overflow a long
   cluster label into the next column, so let the first column wrap here. */
.grid.fixed .c-t { white-space: normal; overflow-wrap: anywhere; }
.map th:nth-child(1), .map td:nth-child(1) { width: 16%; padding-right: 14px; }
.map th:nth-child(2), .map td:nth-child(2) { width: 22%; }
.map th:nth-child(3), .map td:nth-child(3) { width: 36%; }
.map th:nth-child(4), .map td:nth-child(4) { width: 26%; }
.c-k { font-weight: 500; color: var(--pencil) !important; letter-spacing: .01em; }
.gy th:nth-child(1), .gy td:nth-child(1) { width: 8%; }
.gy th:nth-child(2), .gy td:nth-child(2) { width: 8%; }
.gy th:nth-child(3), .gy td:nth-child(3) { width: 6%; }
.gy th:nth-child(4), .gy td:nth-child(4) { width: 11%; }
.gy th:nth-child(5), .gy td:nth-child(5) { width: 40%; }
.gy th:nth-child(6), .gy td:nth-child(6) { width: 27%; }
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: 5px; vertical-align: 1px; }
.dot-zone { background: var(--grow); }
.dot-trim { background: var(--rich); }
.dot-deck { background: var(--ink); }
.sleeve + .sleeve { margin-top: calc(var(--u) * 6); }
.sleeve-note { margin: calc(var(--u) * -1) 0 calc(var(--u) * 4); font-size: 13px;
  line-height: 1.55; color: var(--faint); max-width: 74ch; }
/* recent news, folded onto each company page */
.conews { list-style: none; margin: 0; padding: 0; }
.conews li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.conews time { flex: none; font-variant-numeric: tabular-nums; color: var(--ghost);
  font-size: 11.5px; min-width: 74px; }
.conews a { flex: 1 1 60%; line-height: 1.45; }
.conews .src-name { flex: none; font-size: 11px; font-style: italic; color: var(--ghost); }

.gates { list-style: none; margin: 0; padding: 0; }
.gates li {
  display: flex; align-items: baseline; gap: calc(var(--u) * 3);
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12.5px;
}
.gates time { width: 48px; flex: none; color: var(--rich); font-weight: 600; font-size: 11.5px; }
.gates a { font-weight: 600; color: var(--graphite); width: 52px; flex: none; }
.gates span { min-width: 0; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { color: var(--ghost); font-size: 12.5px; font-style: italic; }

/* ─── ticker page ────────────────────────────────────────────────────────── */
.thead {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: calc(var(--u) * 10);
  align-items: end; padding-bottom: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 8);
  border-bottom: 1px solid var(--rule-soft);
}
.thead h1 { font-size: 34px; font-weight: 650; letter-spacing: -.03em; }
.crumb { margin: 0 0 calc(var(--u) * 2); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.tmeta { display: flex; align-items: center; gap: calc(var(--u) * 3); margin: calc(var(--u) * 3) 0 0; font-size: 13px; }
.tmeta .px { margin-left: 0; }
.dim { color: var(--faint); font-size: 11.5px; }
.t-split { grid-template-columns: minmax(0,1fr) 240px; gap: calc(var(--u) * 12); margin-top: 0; }
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist a { display: flex; justify-content: space-between; gap: var(--u); padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.rlist a:hover { text-decoration: none; }
.rlist b { font-weight: 550; }
.rlist time { color: var(--ghost); font-size: 11px; }
.brk {
  margin-top: calc(var(--u) * 7); padding: calc(var(--u) * 4) calc(var(--u) * 5);
  background: color-mix(in srgb, var(--broken) 6%, transparent);
  border-left: 2px solid var(--broken); border-radius: 0 var(--r) var(--r) 0;
}
.brk h3 { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--broken); }
.brk p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--pencil); }

/* ─── company portal ─────────────────────────────────────────────────────── */
.portal-head { max-width: 74ch; margin-bottom: calc(var(--u) * 10); }
.ph-top { display: flex; align-items: baseline; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.ph-top h1 { font-size: 30px; font-weight: 640; letter-spacing: -.028em; }
.ph-t {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--faint);
  padding: 2px 7px; border-radius: var(--r-sm); background: var(--sunk);
}
.ph-meta { margin: calc(var(--u) * 2) 0 0; font-size: 12px; color: var(--faint); }
.lede {
  margin: calc(var(--u) * 5) 0 0; font-family: var(--serif);
  font-size: 17px; line-height: 1.62; color: var(--graphite);
}
.more { margin-top: calc(var(--u) * 3); }
.more summary {
  cursor: pointer; font-size: 12px; color: var(--ink); width: fit-content;
  padding: 3px 0;
}
.more p {
  margin: calc(var(--u) * 2) 0 0; font-size: 13px; line-height: 1.6; color: var(--pencil);
  max-width: 72ch;
}

/* price axis — 52wk range, entry band, trim and price on one track */
.ax-wrap { margin-bottom: calc(var(--u) * 10); }
.axis { position: relative; height: 50px; margin-top: calc(var(--u) * 8); }
/* the full price scale shown -- a faint baseline rail everything sits on */
.axis::before {
  content: ""; position: absolute; left: 0; right: 0; top: 32px; height: 2px;
  background: var(--rule-soft); border-radius: 1px;
}
/* the 52-week traded range: a subtle gray band ON the rail -- the context layer, underneath */
.ax-52 {
  position: absolute; top: 29px; height: 8px; border-radius: 4px; z-index: 1;
  background: color-mix(in srgb, var(--pencil) 20%, transparent);
}
/* the entry / buy zone: a green band layered ABOVE the 52-week range, taller and bordered, so
   the overlap reads as "the buy zone sits inside the year's range" -- not two competing bars */
.ax-band {
  position: absolute; top: 24px; height: 13px; border-radius: 5px; z-index: 2;
  background: color-mix(in srgb, var(--grow) 42%, var(--leaf));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grow) 55%, transparent);
}
.ax-band.is-approx {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--grow) 42%, var(--leaf)) 60%);
}
.ax-trim {
  position: absolute; top: 20px; width: 2px; height: 21px; border-radius: 1px; z-index: 3;
  background: var(--rich);
}
.ax-now { position: absolute; top: 15px; width: 3px; height: 30px; margin-left: -1.5px; z-index: 4;
  background: var(--graphite); border-radius: 2px; }
.ax-now b {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 650; white-space: nowrap; letter-spacing: -.01em;
}
.ax-now.is-in { background: var(--grow); }
.ax-now.is-in b { color: var(--grow); }
.ax-key {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 2); font-size: 11.5px; color: var(--faint);
}
.k { display: inline-flex; align-items: center; gap: 6px; }
.k::before { content: ""; width: 9px; height: 3px; border-radius: 2px; background: currentColor; opacity: .35; }
.k-band::before { background: var(--grow); opacity: .55; height: 6px; }
.k-trim::before { background: var(--rich); opacity: .9; width: 2px; height: 11px; }
.k-52::before { background: var(--rule); opacity: 1; height: 5px; }

/* authored "what the company sells" — segment block, then product + explanation */
.earns { margin: calc(var(--u) * 4) 0 0; font-size: 13.5px; color: var(--pencil); max-width: 76ch; }
.earns b { color: var(--graphite); font-weight: 600; }
.sells { display: grid; gap: calc(var(--u) * 5); }
.sg { padding: calc(var(--u) * 6) calc(var(--u) * 7); background: var(--leaf);
  border-radius: var(--r-lg); box-shadow: var(--lift); }
.sg > header { display: flex; align-items: center; gap: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 3); }
.sg h3 { font-size: 15px; font-weight: 640; letter-spacing: -.015em; }
.sg-pct {
  display: flex; align-items: center; gap: calc(var(--u) * 2); margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--pencil); white-space: nowrap;
}
/* fixed track — a % width needs something to be a % OF */
.sg-bar { display: block; width: 88px; height: 6px; border-radius: 3px;
  background: var(--sunk); overflow: hidden; }
.sg-bar i { display: block; height: 100%; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 50%, transparent); }
.sg > p { margin: 0 0 calc(var(--u) * 5); font-size: 13.5px; line-height: 1.6;
  color: var(--pencil); max-width: 72ch; }
.pdl { display: grid; gap: calc(var(--u) * 4); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pd dt { font-size: 13px; font-weight: 620; color: var(--graphite);
  margin-bottom: 3px; letter-spacing: -.01em; }
.pd dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); }
/* simple business: products stand on their own, so each gets a light tile of its own */
.pdl-flat { margin-top: calc(var(--u) * 4); }
.pdl-flat .pd { padding: calc(var(--u) * 5) calc(var(--u) * 6); background: var(--leaf);
  border-radius: var(--r-lg); box-shadow: var(--lift); }
.sells-cap { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pencil);
  max-width: 72ch; }
.sells-foot { margin: calc(var(--u) * 4) 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--faint); }

/* ─── portfolio breakdown: an asset owner's book as a composition ─────────── */
/* Muted earthy jewel tones (denim·terracotta·spruce·plum) — desaturated so they sit
   naturally against the warm paper, but with enough pigment to read as distinct identities
   (tenants, loan tiers). Order + values are dataviz-validated in BOTH modes (CVD +
   normal-vision separation clear the floors; the low chroma is the intended muted look).
   The order keeps the colour-blind-confusable pairs (terracotta↔spruce) lightness-separated.
   Deliberately no saturated green/amber/red — those are reserved for thesis status.
   Categories cap at four; the rest fold into a neutral 'Other'. */
.wf-wrap {
  --wf-1:#6faa93; --wf-2:#93aedb; --wf-3:#e6a483; --wf-4:#bb9dcf;
  --wf-5:#6fb0ba; --wf-6:#cfa0bc;                 /* slots 5-6: used only for 5-6 category books */
  --wf-x: var(--ghost);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--u) * 4) calc(var(--u) * 10);
}
:root[data-theme="dark"] .wf-wrap {
  --wf-1:#6fae98; --wf-2:#93aedb; --wf-3:#e29c72; --wf-4:#bd9bd0;
  --wf-5:#6fb0ba; --wf-6:#cba0bf;
  --wf-x:#55534d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-wrap {
    --wf-1:#6fae98; --wf-2:#93aedb; --wf-3:#e29c72; --wf-4:#bd9bd0;
    --wf-5:#6fb0ba; --wf-6:#cba0bf;
    --wf-x:#55534d;
  }
}
.wf { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  width: 236px; flex: none; }
.wf-c { aspect-ratio: 1; border-radius: 2px; background: var(--sunk);
  transition: opacity .15s; }
.wf-1 { background: var(--wf-1); } .wf-2 { background: var(--wf-2); }
.wf-3 { background: var(--wf-3); } .wf-4 { background: var(--wf-4); }
.wf-5 { background: var(--wf-5); } .wf-6 { background: var(--wf-6); }
.wf-x { background: var(--wf-x); }
.wf-legs { flex: 1 1 300px; min-width: 260px; max-width: 560px;
  display: grid; gap: calc(var(--u) * 4); }
.wf-leg { display: grid; align-items: baseline;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-template-areas: "sw nm pv" ".  wt wt";
  column-gap: calc(var(--u) * 3); row-gap: 3px; }
.wf-sw { grid-area: sw; align-self: center;
  width: 12px; height: 12px; border-radius: 3px; }
.wf-nm { grid-area: nm; font-size: 13.5px; font-weight: 620;
  color: var(--graphite); letter-spacing: -.01em; }
.wf-pv { grid-area: pv; font-size: 13.5px; font-weight: 640; color: var(--pencil);
  font-variant-numeric: tabular-nums; }
.wf-wt { grid-area: wt; font-size: 12px; line-height: 1.5; color: var(--faint);
  max-width: 52ch; }
/* hover a legend row -> keep its cells lit, dim the rest. Pure CSS via :has(), no JS. */
.wf-wrap:has(.leg-1:hover) .wf-c:not(.wf-1),
.wf-wrap:has(.leg-2:hover) .wf-c:not(.wf-2),
.wf-wrap:has(.leg-3:hover) .wf-c:not(.wf-3),
.wf-wrap:has(.leg-4:hover) .wf-c:not(.wf-4),
.wf-wrap:has(.leg-5:hover) .wf-c:not(.wf-5) { opacity: .16; }
.wf-leg:hover { cursor: default; }
@media (max-width: 640px) {
  .wf { width: 100%; max-width: 300px; }
}

/* donut: real SVG arc segments (one <circle> each via stroke-dasharray), so each slice is
   its own element the legend can hover-highlight. Rotated so the first arc starts at top. */
.dn-fig { position: relative; width: 208px; height: 208px; flex: none; }
.dnut { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dn-seg { transition: opacity .18s; }
.dn-1 { stroke: var(--wf-1); } .dn-2 { stroke: var(--wf-2); }
.dn-3 { stroke: var(--wf-3); } .dn-4 { stroke: var(--wf-4); }
.dn-5 { stroke: var(--wf-5); } .dn-6 { stroke: var(--wf-6); }
.dn-x { stroke: var(--wf-x); }
.dn-cap { position: absolute; inset: 22px; display: grid; place-items: center;
  text-align: center; line-height: 1.15; }
.dn-cap > * { grid-area: 1 / 1; }              /* stack every label in the same centre cell */
.dn-cap b { display: block; font-size: 30px; font-weight: 660; color: var(--graphite);
  letter-spacing: -.03em; }
.dn-cap-d span { font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); }
.dn-cap-s { display: none; }
.dn-cap-s b { font-size: 26px; }
.dn-cap-s span { display: block; margin-top: 2px; font-size: 11px; font-weight: 550;
  color: var(--pencil); max-width: 108px; line-height: 1.25; }
/* concentration read-out under the top-two number, + a glow on the two largest arcs when the
   book is concentrated AND idle (no hover / no open panel) so it never fights those states */
.dn-conc { display: block; margin-top: 3px; font-size: 9px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; }
.dn-conc.conc-hi { color: var(--rich); }
.dn-conc.conc-mid { color: var(--faint); }
.dn-conc.conc-lo { color: var(--grow); }
.wf-wrap.conc-hi:not(:has(.wf-leg:hover)):not(:has(.bd-r-1:checked, .bd-r-2:checked,
  .bd-r-3:checked, .bd-r-4:checked, .bd-r-5:checked, .bd-r-6:checked)) .dn-top {
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--rich) 55%, transparent));
}
/* segment N is 'active' -> light its arc, swap the centre stat to it, dim the rest.
   HOVER WINS: a hovered row always shows its own label alone; the clicked (checked) state
   only drives the centre/dim when NO row is being hovered (the `:not(:has(.wf-leg:hover))`
   guard) -- otherwise an open panel + hovering a different row stack two centre labels. The
   checked path still gives touch + keyboard the feedback hover can't. */
.wf-wrap:has(.leg-1:hover) .dn-seg:not(.dn-1),
.wf-wrap:has(.leg-2:hover) .dn-seg:not(.dn-2),
.wf-wrap:has(.leg-3:hover) .dn-seg:not(.dn-3),
.wf-wrap:has(.leg-4:hover) .dn-seg:not(.dn-4),
.wf-wrap:has(.leg-5:hover) .dn-seg:not(.dn-5),
.wf-wrap:has(.leg-6:hover) .dn-seg:not(.dn-6),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-1:checked) .dn-seg:not(.dn-1),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-2:checked) .dn-seg:not(.dn-2),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-3:checked) .dn-seg:not(.dn-3),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-4:checked) .dn-seg:not(.dn-4),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-5:checked) .dn-seg:not(.dn-5),
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-6:checked) .dn-seg:not(.dn-6) { opacity: .16; }
.wf-wrap:has(.leg-1:hover, .leg-2:hover, .leg-3:hover,
             .leg-4:hover, .leg-5:hover, .leg-6:hover) .dn-cap-d,
.wf-wrap:has(.bd-r-1:checked, .bd-r-2:checked, .bd-r-3:checked,
             .bd-r-4:checked, .bd-r-5:checked, .bd-r-6:checked) .dn-cap-d { display: none; }
.wf-wrap:has(.leg-1:hover) .dc-1,
.wf-wrap:has(.leg-2:hover) .dc-2,
.wf-wrap:has(.leg-3:hover) .dc-3,
.wf-wrap:has(.leg-4:hover) .dc-4,
.wf-wrap:has(.leg-5:hover) .dc-5,
.wf-wrap:has(.leg-6:hover) .dc-6,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-1:checked) .dc-1,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-2:checked) .dc-2,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-3:checked) .dc-3,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-4:checked) .dc-4,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-5:checked) .dc-5,
.wf-wrap:not(:has(.wf-leg:hover)):has(.bd-r-6:checked) .dc-6 { display: block; }

/* per-slice detail: a legend row is a <label> that opens its panel in the space at right.
   Radios are the state (hidden but focusable for keyboard); a checked 'none' closes it. */
.wf-amt { font-style: normal; font-size: 11px; font-weight: 500; color: var(--faint); }
.bd-r { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bd-lab { cursor: pointer; }
.bd-lab .wf-nm::after { content: " ›"; color: var(--faint); font-weight: 400; }
.bd-lab:hover .wf-nm { color: var(--ink); }
.bd-panels { flex: 1 1 236px; min-width: 0; align-self: center; }
.bd-hint { display: none; font-size: 12px; color: var(--ghost); padding: 0 calc(var(--u) * 2); }
.wf-wrap:has(.bd-r-none:checked) .bd-hint { display: block; }
.bd-panel { display: none; padding: calc(var(--u) * 5) calc(var(--u) * 6);
  background: var(--leaf); border: 1px solid var(--rule-soft); border-radius: var(--r-lg);
  box-shadow: var(--lift); }
.wf-wrap:has(.bd-r-1:checked) .bd-p-1,
.wf-wrap:has(.bd-r-2:checked) .bd-p-2,
.wf-wrap:has(.bd-r-3:checked) .bd-p-3,
.wf-wrap:has(.bd-r-4:checked) .bd-p-4,
.wf-wrap:has(.bd-r-5:checked) .bd-p-5,
.wf-wrap:has(.bd-r-6:checked) .bd-p-6 { display: block; }
.bd-ph { display: flex; align-items: center; gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 3); }
.bd-ph .wf-sw { width: 12px; height: 12px; border-radius: 3px; }
.bd-pnm { font-size: 14px; font-weight: 640; color: var(--graphite); letter-spacing: -.01em; }
.bd-ppv { font-size: 12.5px; font-weight: 600; color: var(--pencil);
  font-variant-numeric: tabular-nums; }
.bd-close { margin-left: auto; cursor: pointer; width: 22px; height: 22px; display: grid;
  place-items: center; border-radius: 50%; color: var(--faint); font-size: 17px; line-height: 1; }
.bd-close:hover { background: var(--sunk); color: var(--graphite); }
.bd-pd { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--pencil); max-width: 46ch; }
.bd-pchip { margin-top: calc(var(--u) * 3); font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em; }
.bd-tk { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 20px;
  background: var(--ink-soft); color: var(--ink); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; }
.bd-tk.is-off { background: var(--sunk); color: var(--pencil); }

/* horizontal 100% stacked bar; stacks above its legend (wf-stack) rather than beside it */
.wf-wrap.wf-stack { flex-direction: column; align-items: stretch; }
.wf-stack .wf-legs { max-width: none; }
.hb { display: flex; gap: 2px; height: 40px; border-radius: 8px; overflow: hidden;
  background: var(--sunk); }
.hb-seg { display: grid; place-content: center; min-width: 0; overflow: hidden;
  transition: opacity .15s; }
.hb-seg.wf-1 { background: var(--wf-1); } .hb-seg.wf-2 { background: var(--wf-2); }
.hb-seg.wf-3 { background: var(--wf-3); } .hb-seg.wf-4 { background: var(--wf-4); }
.hb-seg.wf-5 { background: var(--wf-5); } .hb-seg.wf-6 { background: var(--wf-6); }
.hb-seg.wf-x { background: var(--wf-x); }
.hb-seg i { font-style: normal; font-size: 12px; font-weight: 640; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-wrap.wf-stack:has(.leg-1:hover) .hb-seg:not(.wf-1),
.wf-wrap.wf-stack:has(.leg-2:hover) .hb-seg:not(.wf-2),
.wf-wrap.wf-stack:has(.leg-3:hover) .hb-seg:not(.wf-3),
.wf-wrap.wf-stack:has(.leg-4:hover) .hb-seg:not(.wf-4),
.wf-wrap.wf-stack:has(.leg-5:hover) .hb-seg:not(.wf-5) { opacity: .2; }
.sells-foot b { font-weight: 600; color: var(--pencil); }
.adv { margin: 0; font-size: 14px; line-height: 1.65; color: var(--pencil);
  max-width: 78ch; padding-left: calc(var(--u) * 4);
  border-left: 2px solid color-mix(in srgb, var(--grow) 45%, transparent); }

/* business segments, products, facts */
/* `.notes` is the Playbook card grid — this prose block needs its own name */
.biz-notes { max-width: 78ch; }
.biz-notes p { font-size: 14px; color: var(--pencil); margin-bottom: .8em; }
.segs { display: grid; gap: calc(var(--u) * 4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.seg { padding: calc(var(--u) * 5); background: var(--leaf);
  border-radius: var(--r); box-shadow: var(--lift); }
.seg h3 { font-size: 13.5px; font-weight: 640; letter-spacing: -.012em; margin-bottom: calc(var(--u) * 3); }
.seg ul, .prods { list-style: none; margin: 0; padding: 0; }
.seg li, .prods li {
  position: relative; padding: 5px 0 5px 15px; font-size: 12.5px; line-height: 1.5;
  color: var(--pencil); border-bottom: 1px solid var(--rule-soft);
}
.seg li:last-child, .prods li:last-child { border-bottom: 0; }
.seg li::before, .prods li::before {
  content: ""; position: absolute; left: 1px; top: 12px;
  width: 5px; height: 1.5px; background: var(--ghost);
}
.prods { columns: 2; column-gap: calc(var(--u) * 10); }
.prods li { break-inside: avoid; }
.facts { display: grid; gap: calc(var(--u) * 6); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts dt { font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 550; }

/* historical results — one sparkline per metric, single series, no legend */
.trends { display: grid; gap: calc(var(--u) * 4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tr { margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 5);
  background: var(--leaf); border-radius: var(--r); box-shadow: var(--lift); }
.tr figcaption {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pencil); margin-bottom: calc(var(--u) * 2);
}
.tr figcaption em {
  font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ghost);
}
.sp { display: block; width: 100%; height: 36px; overflow: visible; }
.sp-fill { stroke: none; fill: var(--ink); opacity: .07; }
.sp-fill.sp-good { fill: var(--grow); opacity: .10; }
.sp-fill.sp-bad  { fill: var(--broken); opacity: .09; }
.sp-line.sp-good, .sp-dot.sp-good { stroke: var(--grow); fill: var(--grow); }
.sp-line.sp-good { fill: none; }
.sp-line.sp-bad,  .sp-dot.sp-bad  { stroke: var(--broken); fill: var(--broken); }
.sp-line.sp-bad  { fill: none; }
.sp-line { fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.sp-dot { fill: var(--ink); }
.sp-zero { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-f { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: calc(var(--u) * 2); font-size: 12px; color: var(--pencil); }
.tr-f i { font-style: normal; color: var(--ghost); font-size: 10.5px; }
.tr-to { color: var(--ghost); }
.tr-r { margin-left: auto; font-weight: 620; }
.tr-r.up { color: var(--grow); }
.tr-r.dn { color: var(--broken); }

/* competitive advantages */
.moats { list-style: none; margin: 0; padding: 0; max-width: 82ch; }
.moats li {
  position: relative; padding: 9px 0 9px 18px; font-size: 13px; line-height: 1.6;
  color: var(--pencil); border-bottom: 1px solid var(--rule-soft);
}
.moats li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grow); opacity: .6;
}
.moats mark {
  background: color-mix(in srgb, var(--grow) 16%, transparent);
  color: var(--graphite); font-weight: 600; padding: 0 3px; border-radius: 3px;
}

/* sources */
.srcs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.src {
  font-size: 12.5px; font-weight: 500; padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--sunk); color: var(--pencil);
}
.src:hover { background: var(--ink-soft); color: var(--ink); text-decoration: none; }

/* margin cascade — what survives of every $1 of revenue */
.money { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12); align-items: start; }
.mg { display: grid; gap: calc(var(--u) * 3); }
.mg-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 40px;
  align-items: center; gap: calc(var(--u) * 3); }
.mg-l { font-size: 12px; color: var(--pencil); }
.mg-track { height: 22px; background: var(--sunk); border-radius: var(--r-sm); overflow: hidden; }
.mg-bar {
  height: 100%; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--grow) 55%, transparent);
}
.mg-bar.is-neg { background: color-mix(in srgb, var(--broken) 50%, transparent); }
.mg-v { font-size: 13px; font-weight: 600; text-align: right; }
.mg-v.is-neg { color: var(--broken); }
.cap { margin: calc(var(--u) * 3) 0 0; font-size: 11.5px; color: var(--ghost); }

.figs { display: grid; gap: calc(var(--u) * 5); margin: 0; }
.figs dt { font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); }
.figs dd { margin: 2px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.figs dd.up { color: var(--grow); }
.figs dd.dn { color: var(--broken); }

/* evidence groups — the long theses already mark ✅/🚩/⚠️ inline; this honours it */
.lead-p { margin-bottom: calc(var(--u) * 6); }
.lead-p p:last-child { margin-bottom: 0; }
.evidence { display: grid; gap: calc(var(--u) * 6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.ev h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: calc(var(--u) * 3);
}
.ev ul { list-style: none; margin: 0; padding: 0; }
.ev li {
  position: relative; padding: 6px 0 6px 16px; font-size: 12.5px; line-height: 1.55;
  color: var(--pencil); border-bottom: 1px solid var(--rule-soft);
}
.ev li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 6px; height: 6px; border-radius: 2px;
}
.ev li:last-child { border-bottom: 0; }
.ev strong { color: var(--graphite); font-weight: 620; }
.ev-works h3 { color: var(--grow); }
.ev-works li::before { background: var(--grow); opacity: .65; }
.ev-flags h3 { color: var(--broken); }
.ev-flags li::before { background: var(--broken); opacity: .65; }
.ev-watch h3 { color: var(--rich); }
.ev-watch li::before { background: var(--rich); opacity: .7; }
.ev-upgrade h3 { color: var(--ink); }
.ev-upgrade li::before { background: var(--ink); opacity: .6; }

/* tripwires */
.trip { list-style: none; margin: 0 0 calc(var(--u) * 4); padding: 0; }
.trip li {
  position: relative; padding: 7px 0 7px 18px; font-size: 12.5px; line-height: 1.5;
  color: var(--pencil); border-bottom: 1px solid var(--rule-soft);
}
.trip li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--broken); opacity: .75;
}

/* coverage — which lenses have been run, and which are gaps */
.cov { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0 0 calc(var(--u) * 4); padding: 0; }
.cov li {
  font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-sm);
}
.cov .on { background: var(--ink-soft); color: var(--ink); }
.cov .off { background: var(--sunk); color: var(--ghost); text-decoration: line-through; }
.age { margin: calc(var(--u) * 3) 0 0; font-size: 11.5px; }
.age.fresh { color: var(--grow); }
.age.aging { color: var(--faint); }
.age.stale { color: var(--rich); }

/* peer chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--sunk); color: var(--pencil);
  transition: background .14s cubic-bezier(.23,1,.32,1), color .14s;
}
a.chip:hover { background: var(--ink-soft); color: var(--ink); text-decoration: none; }
.chip.is-self { background: var(--graphite); color: var(--paper); }
.chip.is-off { color: var(--ghost); }
.rule-note {
  margin: calc(var(--u) * 3) 0 0; padding-left: calc(var(--u) * 3);
  border-left: 2px solid var(--rule); font-size: 12.5px; color: var(--pencil);
}
.portal-split { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); margin-top: 0; }

/* ─── sweeps ─────────────────────────────────────────────────────────────── */
/* no border-top here: the hero above already draws a separating rule, and a second one a
   margin-gap below it reads as an empty band between the intro and the first round. */
.round {
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 5) 0; border-bottom: 1px solid var(--rule-soft);
}
.rd { font-size: 11.5px; color: var(--faint); padding-top: 3px; }
.round h3 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.round h3 a { color: var(--graphite); }
.round h3 a:hover { color: var(--ink); text-decoration: none; }
.sib { list-style: none; margin: calc(var(--u) * 3) 0 0; padding: 0; columns: 2; column-gap: calc(var(--u) * 8); }
.sib li { font-size: 12px; padding: 2px 0; break-inside: avoid; }
.sib a { color: var(--faint); }
.sib a:hover { color: var(--ink); }

/* ─── playbook ───────────────────────────────────────────────────────────── */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 3);
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.note { padding: calc(var(--u) * 4) calc(var(--u) * 5); background: var(--leaf); border-radius: var(--r); box-shadow: var(--lift); }
.note h3 { font-size: 13.5px; font-weight: 600; color: var(--graphite); letter-spacing: -.012em; }
.note a:hover h3 { color: var(--ink); }
.note p { margin: calc(var(--u) * 2) 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); }
.nmeta { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }
.decay { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: var(--r-sm); background: var(--sunk); color: var(--faint); }
.decay-static { color: var(--grow); background: color-mix(in srgb, var(--grow) 12%, transparent); }
.decay-fast { color: var(--rich); background: color-mix(in srgb, var(--rich) 12%, transparent); }

.vd { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: var(--r-sm); background: var(--sunk); color: var(--pencil); }
.vd-buy, .vd-accumulate { background: color-mix(in srgb, var(--grow) 14%, transparent); color: var(--grow); }
.vd-avoid, .vd-trim, .vd-retracted { background: color-mix(in srgb, var(--broken) 12%, transparent); color: var(--broken); }
.vd-watch, .vd-superseded { background: color-mix(in srgb, var(--rich) 13%, transparent); color: var(--rich); }

/* ─── report prose: the airy density ─────────────────────────────────────── */
.rhead { padding-bottom: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); border-bottom: 1px solid var(--rule-soft); }
.rhead h1 { font-size: 27px; font-weight: 620; letter-spacing: -.025em; }
.prose { font-family: var(--serif); font-size: 16px; line-height: 1.68; color: var(--graphite); }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-family: var(--sans); font-size: 19px; font-weight: 620; margin: 2.2em 0 .7em; letter-spacing: -.02em; }
.prose h3 { font-family: var(--sans); font-size: 15px; font-weight: 620; margin: 1.9em 0 .5em; }
.prose h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 1.6em 0 .4em; color: var(--pencil); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.prose li { margin: .3em 0; }
.prose strong { font-weight: 650; }
.prose code { font: 500 .84em var(--mono); background: var(--sunk); padding: 1px 5px; border-radius: var(--r-sm); }
.prose blockquote {
  margin: 1.4em 0; padding: calc(var(--u) * 3) calc(var(--u) * 5);
  border-left: 2px solid var(--rule); background: var(--sunk);
  border-radius: 0 var(--r) var(--r) 0; font-size: .93em; color: var(--pencil);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 2.4em 0; }
.prose > span { color: var(--faint); }              /* defanged dead link */
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  font-family: var(--sans); font-size: 12.5px; font-variant-numeric: tabular-nums;
  display: block; overflow-x: auto;
}
.prose th {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--rule);
}
.prose td { padding: 7px 10px; border-bottom: 1px solid var(--rule-soft); line-height: 1.45; }
.prose tbody tr:hover td { background: var(--sunk); }
.news.prose { font-family: var(--sans); font-size: 13.5px; }
.news.prose p { margin: 0 0 .5em; color: var(--faint); font-size: 12px; }
.news.prose ul { margin-bottom: 1.8em; }

/* ─── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero, .thead { grid-template-columns: 1fr; gap: calc(var(--u) * 6); }
  .split, .t-split { grid-template-columns: 1fr; gap: calc(var(--u) * 9); }
  .tally { gap: calc(var(--u) * 6); }
  .tally a { text-align: left; }
  .money { grid-template-columns: 1fr; }
  .sib { columns: 1; }
  .top { padding: 0 calc(var(--u) * 4); gap: calc(var(--u) * 3); overflow-x: auto; }
  main { padding: calc(var(--u) * 6) calc(var(--u) * 4) 72px; }
  .book .c-n, .c-z { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .card:hover, .theme:hover { transform: none; }
}