/* ANIC Tracker: a ledger on warm paper.
   Content sits straight on the page in sections ruled off in ink; only
   instruments (the countdown, the date slider, the map, forms) get a panel.
   Type: Fraunces for headings and big figures, Instrument Sans for text,
   Chivo Mono for labels and numbers. Colour roles are defined once per theme;
   chart and map colours are validated for colour-blind separation. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("fonts/chivo-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --page: #f4f1e8;
  --surface: #fbf9f3;
  --surface-2: #ebe7db;
  --line: #dcd7c9;
  --rule: #1b201c;
  --ink: #1b201c;
  --ink-2: #474e49;
  --muted: #656b65;
  --tick: #696d66;
  --grid: #e6e2d6;
  --axis: #c8c3b4;
  --accent: #2e6a4f;
  --accent-ink: #fbf9f3;
  --accent-soft: #e2eae0;
  --series-1: #00739a;
  --series-2: #c8682c;
  --good-text: #2e6a4f;
  --bad-text: #a63d32;
  --pending-text: #8a5d0f;
  --tag-bg: #ebe7db;
  --focus: #2e6a4f;
  --shadow: 0 1px 2px rgba(27, 32, 28, 0.05), 0 10px 28px rgba(27, 32, 28, 0.09);
  /* map */
  --sea: #f9f7f1;
  --land: #e1dccf;
  --land-stroke: #f9f7f1;
  --q1: #7fb6d3;
  --q2: #4a93bb;
  --q3: #22709e;
  --q4: #114b70;
  --pin: #1b201c;
  --pin-ring: #f9f7f1;
  --cleared: #d8b56e;
  --g1: #55a583;
  --g2: #348c6c;
  --g3: #1d7055;
  --g4: #0e4d3b;
  --sell: var(--g3);
  --st-approved: #1f6fb5;
  --st-review: #d39a2c;
  --st-banned: #c0433a;
  --inv-ferm: #c98d1c;
  --inv-cult: #00739a;
  --inv-plant: #4f8a3a;
  --inv-all: #8a8d86;
  --fin-inv: #1f6fb5;
  --fin-cash: #2f8f6a;
  --fin-cost: #a0452a;
  --fin-fx: #d39a2c;
  /* gain / loss bars: a diverging pair, validated for colour-blind separation */
  --gain: #1a8a6e;
  --loss: #cc5a34;
  --radius: 8px;
  --radius-s: 5px;
  --serif: "Fraunces", ui-serif, "Iowan Old Style", Charter, Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* A graduated edge, like the scale on lab glassware: a rule with a tick
     every 12px and a longer one every 60px. */
  --ruler:
    linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 60px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--axis) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat;
}
/* Dark: warm graphite, green only as an accent. Light is the default for
   everyone; dark applies only once the header toggle has saved it (theme.js
   sets data-theme before paint). Ramps are re-stepped for the dark surface,
   not flipped. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #1c1b19;
  --surface: #242321;
  --surface-2: #2c2a27;
  --line: #383631;
  --rule: #a8a39a;
  --ink: #ece9e3;
  --ink-2: #c7c2b8;
  --muted: #9b968c;
  --tick: #8a857c;
  --grid: #2d2b28;
  --axis: #46433d;
  --accent: #9fcbb0;
  --accent-ink: #151413;
  --accent-soft: #2a2926;
  --series-1: #1f96c4;
  --series-2: #d0773a;
  --good-text: #9fcbb0;
  --bad-text: #e0786c;
  --pending-text: #e2b45a;
  --tag-bg: #2c2a27;
  --focus: #9fcbb0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
  --sea: #191816;
  --land: #302e2a;
  --land-stroke: #191816;
  --q1: #346f94;
  --q2: #4790ba;
  --q3: #6db1d6;
  --q4: #abd7ee;
  --cleared: #8f7234;
  --g1: #2f7a5c;
  --g2: #3f9a76;
  --g3: #66ba95;
  --g4: #a5dcc2;
  --st-approved: #3f8bd8;
  --st-review: #b88628;
  --st-banned: #d8507e;
  --inv-ferm: #b98326;
  --inv-cult: #2f9bd0;
  --inv-plant: #5f9a46;
  --inv-all: #8a857c;
  --fin-inv: #3f8bd8;
  --fin-cash: #3fa27b;
  --fin-cost: #b5463b;
  --fin-fx: #b48e2c;
  --gain: #1ea392;
  --loss: #de6c45;
  --pin: #ece9e3;
  --pin-ring: #191816;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; } /* anchors clear the sticky header */
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The footer sits at the bottom of the window on short pages. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--axis); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 0.6rem; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.8rem); font-weight: 320; line-height: 1; letter-spacing: -0.032em; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 0.75rem; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 4px; }
strong, b { font-weight: 600; }

.wrap { max-width: 1232px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } }
.small { font-size: 0.9rem; }
.fine { font-size: 0.84rem; color: var(--muted); margin: 0; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--good-text); }
.neg { color: var(--bad-text); }
.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; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 30; }
.skip:focus { left: 16px; }

/* Labels: one small mono voice for every eyebrow, column head and tag. */
.eyebrow, .tile-label, th, .tag, .cd-tag, .cd-u, .map-switch-group, .mc-kicker, .mc-label, .fc-need-l, .crumbs, .footer-inner, .approval-status, .hist-kind {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}

/* Header & footer */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: stretch; gap: 0 28px; min-height: 58px; }
/* Wordmark: "ANIC" is drawn (100 units = sans cap height, baseline at y=100) so the
   A can be an up-tick; the SVG's bottom edge sits on the text baseline. */
.brand, .masthead { align-self: center; margin-right: auto; }
.masthead { display: flex; align-items: baseline; gap: 0 14px; }
.masthead .brand { align-self: auto; margin-right: 0; }
.brand { display: inline-flex; align-items: baseline; gap: 0.3em; font-family: var(--sans); font-size: 1.3rem; line-height: 1; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-word { flex: none; width: 2.158em; height: 0.753em; overflow: visible; fill: currentColor; }
.brand-tick { fill: var(--accent); }
.brand-light { font-family: var(--serif); font-size: 1.1em; font-weight: 340; letter-spacing: -0.02em; color: var(--ink-2); }
/* Share price: a ticker on the wordmark's baseline, filled in by app.js.
   The masthead holds the auto margin, so its late arrival moves nothing. */
.price { display: inline-flex; align-items: baseline; gap: 0.6em; padding-left: 14px; border-left: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; animation: price-in 0.4s ease; }
.price-change { font-size: 0.92em; }
.price-change:empty { display: none; }
@keyframes price-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .price { animation: none; } }
.site-nav { display: flex; align-items: stretch; gap: 0 24px; }
/* The current page is underlined in ink, on the header's own bottom edge. */
.site-nav a { display: inline-flex; align-items: center; margin-bottom: -1px; padding-top: 2px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--axis); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.theme-toggle { align-self: center; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Narrow screens: wordmark and toggle on one row, the nav scrolling sideways below. */
@media (max-width: 859px) {
  .header-inner { flex-wrap: wrap; padding-top: 10px; min-height: 0; }
  .header-inner > .brand, .masthead { order: 1; }
  .theme-toggle { order: 2; }
  html { scroll-padding-top: 112px; }
  .site-nav { order: 3; flex: 0 0 calc(100% + 32px); margin: 8px -16px 0; padding: 0 36px 0 16px; gap: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 8px 0 9px; }
}
@media (max-width: 399px) {
  .header-inner { gap: 0 12px; }
  .masthead { gap: 0 10px; }
  .price { padding-left: 10px; }
}
/* Just above that, one row is tight with the share price in it: close up the gaps. */
@media (min-width: 860px) and (max-width: 959px) {
  .header-inner { gap: 0 18px; }
  .site-nav { gap: 0 14px; }
  .site-nav a { font-size: 0.88rem; }
}
@media (min-width: 960px) and (max-width: 1079px) {
  .header-inner { gap: 0 22px; }
  .site-nav { gap: 0 19px; }
}
.site-footer { margin-top: 96px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-bottom: 40px; line-height: 1.7; }
.footer-inner::before { content: ""; flex: 0 0 100%; height: 9px; margin-bottom: 14px; background: var(--ruler); }
.footer-inner p { margin: 0; }

main { flex: 1 0 auto; width: 100%; padding-top: 44px; }
main > section, main > .two-col, main > .callout { margin-bottom: 60px; }

/* Hero: headline, a serif standfirst, then the graduated rule that opens the page. */
.hero { padding: 0; }
main > .hero { margin-bottom: 0; }
.hero::after, .co-head::after { content: ""; display: block; flex: 0 0 100%; height: 9px; margin-top: 34px; background: var(--ruler); }
.hero > h1, .hero > .lead { max-width: 860px; }
.eyebrow { margin-bottom: 16px; }
.lead { font-family: var(--serif); font-size: 1.25rem; font-weight: 360; line-height: 1.42; letter-spacing: -0.005em; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.lead a { color: var(--ink); }
.hero h1 { margin-bottom: 0.38em; }
.hero-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.hero-split .hero-text { flex: 1 1 420px; max-width: 860px; }
/* The section under the hero hangs from that rule instead of drawing its own. */
.hero + section, .hero + .type-filter, .hero + .chat { margin-top: 26px; }
.hero + .card, .hero + section > .section-head:first-child, .hero + .tiles { border-top: 0; padding-top: 0; }

/* Next-results countdown */
.countdown { flex: 0 1 328px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 14px; }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.cd-head .tile-label { margin: 0; }
.cd-tag { font-size: 0.625rem; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--axis); color: var(--ink-2); cursor: help; }
.cd-clock { margin: 0; display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); }
.cd-n { font-size: 2.75rem; font-weight: 320; line-height: 1; letter-spacing: -0.03em; }
.cd-u { margin-left: 3px; font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.cd-due { display: none; font-size: 2.1rem; font-weight: 360; line-height: 1.15; letter-spacing: -0.02em; }
.countdown.is-due .cd-seg, .countdown.is-overdue .cd-seg { display: none; }
.countdown.is-due .cd-due, .countdown.is-overdue .cd-due { display: inline; }
.countdown.is-overdue .cd-due { color: var(--bad-text); }
/* Progress since the last results: a bar under a row of graduations. */
.cd-track { display: block; margin: 14px 0 12px; overflow: visible; background: repeating-linear-gradient(90deg, var(--axis) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat; }
.cd-bg { fill: var(--line); }
.cd-fill { fill: var(--accent); }
.cd-when { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.cd-when strong { color: var(--ink); font-weight: 600; }
.cd-basis { margin: 3px 0 0; font-size: 0.78rem; color: var(--muted); }
.cd-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-2); cursor: help; }
.cd-next strong { color: var(--ink); font-weight: 600; }
@media (max-width: 719px) { .countdown { flex-basis: 100%; } }

/* Sections. "card" is a ruled section, not a box: an ink rule, a serif
   title, then the content straight on the page. */
.card { border-top: 1px solid var(--rule); padding-top: 18px; min-width: 0; }
.card-head, .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.card-head h2, .section-head h2 { margin: 0; }
.section-head { border-top: 1px solid var(--rule); padding-top: 18px; }
.more { font-size: 0.92rem; text-decoration: none; }

/* Tiles: headline figures as one ruled strip, hairlines between the cells.
   The dividers hang in the gaps, so a row's first cell stays flush left
   however the strip wraps (the strip clips the ones that fall outside). */
.tiles { display: flex; flex-wrap: wrap; gap: 0 44px; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.tile { position: relative; flex: 1 1 180px; min-width: 0; padding: 18px 0 20px; }
.tile::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.tile::after { content: ""; position: absolute; left: -44px; right: 0; top: -1px; border-top: 1px solid var(--line); }
.tile-label { margin: 0 0 10px; }
.tile-value { margin: 0; font-family: var(--serif); font-size: 2.6rem; font-weight: 320; line-height: 1; letter-spacing: -0.03em; }
.tile-sub { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 640px) {
  .tiles { gap: 0 32px; }
  .tile { flex-basis: 140px; padding: 16px 0 18px; }
  .tile::before { left: -16px; }
  .tile::after { left: -32px; }
  .tile-value { font-size: 2.1rem; }
}

/* Chart */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; font-size: 0.84rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.key { display: inline-block; width: 16px; height: 0; border-top: 2px solid; border-radius: 2px; }
.key-s1 { border-color: var(--series-1); }
.key-s2 { border-color: var(--series-2); }
.key-deal { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.chart { position: relative; margin: 4px 0 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--axis) transparent; }
.chart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart .gridline { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 1 4; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--tick); font-size: 10.5px; font-family: var(--mono); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s1 { stroke: var(--series-1); }
.chart .line.s2 { stroke: var(--series-2); }
.chart .marker, .chart .hl { stroke: var(--page); stroke-width: 2; }
.chart .marker.s1, .chart .hl.s1 { fill: var(--series-1); }
.chart .marker.s2, .chart .hl.s2 { fill: var(--series-2); }
.chart .deal { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width: 1.25; }
.chart .deal.sell { fill: color-mix(in srgb, var(--bad-text) 26%, transparent); stroke: var(--bad-text); }
.tooltip .tt-deals { color: var(--accent); }
.chart .dlabel { font-size: 11.5px; font-family: var(--sans); fill: var(--ink-2); }
.chart .dlabel-v { font-family: var(--mono); fill: var(--ink); font-weight: 600; }
.chart .crosshair line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.tooltip { position: absolute; z-index: 5; pointer-events: none; min-width: 160px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; font-size: 0.82rem; box-shadow: var(--shadow); }
.tooltip .tt-date { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.tooltip strong { font-family: var(--mono); font-size: 0.94em; font-weight: 500; }
.tooltip .tt-row span:last-child { color: var(--ink-2); }
.tooltip .tt-note { margin-top: 6px; color: var(--ink-2); }
/* "Table" disclosure: a ledger-style plus and minus instead of a triangle. */
.table-view summary { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 4px 0 8px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.table-view summary::-webkit-details-marker { display: none; }
.table-view summary::before { content: "+"; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--axis); border-radius: 3px; font-size: 0.75rem; line-height: 1; letter-spacing: 0; }
.table-view[open] summary::before { content: "\2212"; }
.table-view summary:hover { color: var(--ink); }
.table-view summary:hover::before { border-color: var(--ink-2); }

/* Tables: mono heads over an ink hairline, figures in mono, text flush with
   the section's rule. The scroller is 12px wider each side so a row's
   hover band has room past the text. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; scrollbar-width: thin; scrollbar-color: var(--axis) transparent; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
caption { text-align: left; color: var(--muted); font-size: 0.84rem; padding: 4px 0 8px; }
th { text-align: left; border-bottom: 1px solid var(--axis); padding: 10px; white-space: nowrap; }
tbody th { font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom-color: var(--grid); padding: 11px 10px; }
td { border-bottom: 1px solid var(--grid); padding: 11px 10px; vertical-align: top; }
td.num { font-family: var(--mono); font-size: 0.8rem; line-height: 1.75; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
tbody tr:hover > :first-child { box-shadow: -12px 0 0 color-mix(in srgb, var(--surface-2) 55%, transparent); }
tbody tr:hover > :last-child { box-shadow: 12px 0 0 color-mix(in srgb, var(--surface-2) 55%, transparent); }
.companies th, .companies td { padding-left: 8px; padding-right: 8px; }
.companies th:first-child, .companies td:first-child { padding-left: 0; min-width: 170px; }
.companies th:last-child, .companies td:last-child { padding-right: 0; }
.companies td { padding-top: 14px; padding-bottom: 14px; }
.companies thead th { vertical-align: top; }
.companies .co-name { white-space: nowrap; }
.companies td.latest, .companies td.next { min-width: 140px; }
.companies td.next { color: var(--ink-2); }
.companies td.round { min-width: 92px; max-width: 120px; }
.companies td.round .nowrap, .companies td.latest .fine { font-family: var(--mono); font-size: 0.8rem; line-height: 1.75; }
.companies td.latest .fine { font-size: 0.75rem; }
/* Sortable headers (app.js wraps each label in a button) */
.sort-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.sort-btn::after { content: ""; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid currentColor; opacity: 0; transition: opacity 0.15s ease; }
th.num .sort-btn { flex-direction: row-reverse; } /* label stays flush with the figures */
.sort-btn:hover { color: var(--ink); }
.sort-btn:hover::after { opacity: 0.4; }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
th[aria-sort] .sort-btn { color: var(--ink); }
th[aria-sort] .sort-btn::after { opacity: 1; border-top-color: var(--accent); }
th[aria-sort="ascending"] .sort-btn::after { transform: rotate(180deg); }
.mult { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Returns: headline tiles under the section rule, then one table per
   grouping. Each gain bar grows from a shared zero, gains right and
   losses left, beside its signed figure. */
.ret-tiles { border-top-color: var(--line); }
.tile-value small { margin-left: 6px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0; color: var(--muted); }
.bound { color: var(--muted); }
.tile-value .bound { font-size: 0.62em; margin-right: 3px; vertical-align: 0.18em; }
.ret-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 26px 0 6px; }
.ret-bar .type-filter { margin: 0; }
.returns-table th:first-child, .returns-table td:first-child { min-width: 170px; }
.returns-table td:first-child .fine { max-width: 30em; margin-top: 2px; font-size: 0.78rem; line-height: 1.45; white-space: normal; }
.returns-table td.num { white-space: nowrap; }
.returns-table td.gain { padding-top: 10px; padding-bottom: 10px; }
.gain-cell { display: inline-flex; align-items: center; gap: 10px; }
.gain-cell > span { min-width: 4.6em; text-align: right; }
.gbar { display: block; flex: none; overflow: visible; }
.gbar-gain { fill: var(--gain); }
.gbar-loss { fill: var(--loss); }
.gbar-zero { stroke: var(--axis); stroke-width: 1; }
.returns-table tfoot th, .returns-table tfoot td { border-top: 1px solid var(--axis); border-bottom: 0; font-weight: 600; }
.returns-table tfoot td.num { font-weight: 600; }
.stale { color: var(--pending-text); }
.owners td:first-child { min-width: 220px; }
.deals td:first-child { min-width: 150px; }
.co-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.co-name:hover { color: var(--accent); }

/* Position sparklines (companies table) */
.spark svg { display: block; overflow: visible; }
.spark-th svg { display: block; margin-top: 6px; overflow: visible; }
.spark-axis text { fill: var(--tick); font: 400 9.5px var(--mono); letter-spacing: 0; text-transform: none; }
.spark-base { stroke: var(--axis); stroke-width: 1; }
.spark-year { stroke: var(--grid); stroke-width: 1; }
.spark-dot { fill: var(--series-1); stroke: var(--page); stroke-width: 1.25; }
.spark-area { fill: color-mix(in srgb, var(--series-1) 13%, transparent); }
.spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark-end, .spark-hl circle { fill: var(--series-1); stroke: var(--page); stroke-width: 1.5; }
.tooltip .tt-note.pos { color: var(--good-text); }
.tooltip .tt-note.neg { color: var(--bad-text); }
.spark-hl line { stroke: var(--axis); stroke-width: 1; }
.spark-v { fill: var(--ink); font: 600 11.5px var(--mono); paint-order: stroke; stroke: var(--page); stroke-width: 3px; stroke-linejoin: round; }
/* Every title on the site, shown at once by app.js in place of the
   browser's own (which waits about a second). */
.tooltip.tip { position: fixed; z-index: 40; min-width: 0; max-width: min(300px, calc(100vw - 16px)); padding: 6px 9px; font-family: var(--mono); font-size: 0.6875rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; opacity: 0; transition: opacity 0.1s ease; }
.tooltip.tip.is-on { opacity: 1; }
.tooltip.spark-tip { position: fixed; min-width: 0; padding: 6px 9px; white-space: nowrap; }

/* Buttons */
.btn-ghost { font: inherit; font-size: 0.88rem; background: none; border: 1px solid var(--axis); color: var(--ink-2); border-radius: var(--radius-s); padding: 6px 14px; min-height: 36px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-2); }

/* Stage meter & revenue mark. The meter is six cells, filled as far as the
   company has got; the revenue mark is drawn here (a full, half or empty
   disc), with the glyph text kept for copy and paste. */
.stage { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.meter { display: inline-flex; gap: 3px; }
.meter i { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--axis); }
.meter i.on { background: var(--accent); border-color: var(--accent); }
.closed-x { color: var(--muted); font-size: 0.8rem; width: 69px; text-align: center; }
.stage-label { font-size: 0.92rem; }
.rev { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; font-size: 0.86rem; color: var(--ink-2); }
.rev .glyph { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); overflow: hidden; color: transparent; font-size: 1px; line-height: 1; }
.rev-revenue .glyph { background: var(--accent); border-color: var(--accent); }
.rev-early .glyph { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.rev-undisclosed .glyph { border-style: dotted; }
.rev-na .glyph { border-color: transparent; background: linear-gradient(var(--muted), var(--muted)) center / 8px 1.5px no-repeat; }
.rev-summary { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rev-summary li { display: inline-flex; align-items: baseline; gap: 7px; }
.rev-summary strong { font-family: var(--mono); font-weight: 500; font-size: 0.84rem; color: var(--ink); }

/* Pipeline: six stations on one track, each with its companies beneath.
   On a phone the track runs down the left edge instead. */
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px 28px; grid-template-columns: 1fr; }
.pipe-col { position: relative; min-width: 0; }
.pipe-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-bottom: 8px; cursor: help; }
.pipe-step { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule); background: var(--page); color: var(--ink); font: 500 0.6875rem/1 var(--mono); }
.pipe-col:last-child .pipe-step { background: var(--rule); color: var(--page); }
.pipe-label { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.pipe-count { font: 400 0.75rem var(--mono); color: var(--muted); }
.pipe-col::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: -26px; border-left: 1px solid var(--rule); }
.pipe-col:last-child::before { display: none; }
.pipe-list { list-style: none; margin: 0; padding: 0 0 0 36px; display: grid; align-content: start; }
.pipe-list li { border-top: 1px solid var(--line); }
.pipe-list li.fine { padding: 10px 0; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 44px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: background-color 0.15s ease; }
.chip:hover { color: var(--ink); background: var(--surface-2); }
.chip .rev-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 640px) {
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  /* Each column shares the grid's rows, so the lists start level whether a
     stage name takes one line or two. */
  .pipe-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .pipe-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 24px auto; align-items: start; row-gap: 12px; margin-bottom: 12px; }
  .pipe-step { grid-column: 1 / -1; }
  .pipe-count { padding-top: 0.2em; }
  /* The track: from this station to the next one. */
  .pipe-head::before { content: ""; position: absolute; top: 12px; left: 24px; right: -28px; border-top: 1px solid var(--rule); }
  .pipe-col:last-child .pipe-head::before { right: 1px; }
  .pipe-col:last-child .pipe-head::after { content: ""; position: absolute; top: 8.5px; right: 1.5px; width: 8px; height: 8px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); transform: rotate(45deg); }
  .pipe-col::before { display: none; }
  .pipe-list { padding-left: 0; }
}
@media (min-width: 640px) and (max-width: 1039px) {
  .pipe-col:nth-child(3n) .pipe-head::before { right: 0; }
}
@media (min-width: 1040px) { .pipeline { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Feed: headlines in the serif, date and type in the margin. */
.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.feed-item { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: 0; }
@media (min-width: 720px) { .feed-item { grid-template-columns: 150px 1fr; } }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
@media (min-width: 720px) { .feed-meta { flex-direction: column; align-items: flex-start; padding-top: 3px; } }
.feed-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 440; line-height: 1.3; letter-spacing: -0.008em; margin-bottom: 4px; text-wrap: pretty; }
.feed-title a { color: var(--ink); }
.feed-title a:hover { color: var(--accent); }
.feed-detail { font-size: 0.92rem; color: var(--ink-2); margin-bottom: 6px; max-width: 78ch; }
.feed-sources { font-size: 0.8rem; margin: 0; color: var(--muted); }
.feed-sources a { color: var(--muted); }
.feed-sources a:hover { color: var(--accent); }
.feed-parent { font-weight: 600; color: var(--ink); }
.feed-title .feed-parent { font-weight: inherit; }
.tag { display: inline-block; font-size: 0.625rem; line-height: 1.5; color: var(--ink-2); border: 1px solid var(--axis); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.type-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.type-filter a { padding: 5px 12px; border-radius: var(--radius-s); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 0.86rem; transition: color 0.15s ease, border-color 0.15s ease; }
.type-filter a:hover { color: var(--ink); border-color: var(--ink-2); }
.type-filter a[aria-current="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }

/* Company page */
.crumbs { margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.co-head { margin-bottom: 26px; }
.co-head > * { max-width: 860px; }
.co-head::after { max-width: none; }
.co-head h1 { margin-bottom: 0.32em; }
.co-tech { color: var(--ink-2); font-size: 0.92rem; }
.status-grid { display: grid; gap: 28px 48px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .status-grid { grid-template-columns: 1fr 1fr; } }
.co-head + .status-grid > .card { border-top: 0; padding-top: 0; }
.status-value { margin: 0 0 12px; }
.status-value .stage-label { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.015em; }
.status-value .rev { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); gap: 10px; }
.status-value .rev .glyph { width: 12px; height: 12px; }
.status-card p:last-child { margin-bottom: 0; }
.status-card .small { color: var(--ink-2); max-width: 62ch; }
.callout { background: var(--accent-soft); border-radius: var(--radius-s); padding: 14px 18px; margin: 0; }
.callout .tile-label { display: inline; margin-right: 10px; color: var(--accent); }
.two-col { display: grid; gap: 60px 48px; grid-template-columns: 1fr; }
.two-col > * { min-width: 0; } /* let wide charts scroll inside their column, not widen the page */
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }
.facts { margin: 0 0 12px; display: grid; }
.facts div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--grid); padding: 9px 0; }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts-tight { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.approval { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: baseline; }
.approval p { margin: 0; }
.approval-status { white-space: nowrap; }
.approval-approved .approval-status { color: var(--good-text); }
.approval-pending .approval-status { color: var(--pending-text); }
/* Timeline: dated rows, like the feed. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.timeline li:first-child { padding-top: 2px; }
.timeline li:last-child { border-bottom: 0; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
@media (min-width: 720px) {
  .timeline li { grid-template-columns: 150px 1fr; }
  .timeline .tl-meta { flex-direction: column; align-items: flex-start; padding-top: 3px; }
}
.tl-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 440; line-height: 1.3; letter-spacing: -0.008em; margin-bottom: 3px; }
.tl-body p:last-child { margin-bottom: 0; }
.tl-body .small { max-width: 78ch; }
.cite { font-family: var(--mono); font-size: 0.62em; font-weight: 400; letter-spacing: 0; margin-left: 2px; white-space: nowrap; }
.cite a { color: var(--accent); text-decoration: none; }
.cite a:hover { text-decoration: underline; }
.source-list { margin: 0; padding-left: 2rem; display: grid; gap: 10px; }
.source-list li::marker { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.fold > summary { display: flex; align-items: baseline; gap: 6px 12px; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; }
.fold-chev { margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.fold[open] > summary .fold-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.fold > summary:hover .fold-chev { border-color: var(--ink); }
.fold[open] > summary { margin-bottom: 16px; }
.more-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 22px; font: inherit; font-size: 0.84rem; color: var(--ink-2); background: none; border: 1px solid var(--axis); border-radius: var(--radius-s); padding: 5px 12px; cursor: pointer; }
.more-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.more-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.more-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, 0); }
.source-list li:target { background: var(--accent-soft); border-radius: 4px; }
.source-list span { display: block; }
.sources td:nth-child(2) { min-width: 260px; }
.sources td:first-child { font-family: var(--mono); font-size: 0.75rem; line-height: 2; }

/* Company logos: official wordmarks on a white chip (graphite for logos
   made for dark backgrounds), or a monogram when there's no logo. */
.brand-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: 5px 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09); max-width: 100%; vertical-align: middle; }
.brand-logo.on-dark { background: #1c1b19; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.brand-logo img { display: block; width: auto; height: 16px; max-width: 100%; object-fit: contain; }
.brand-xs { padding: 3px 6px; border-radius: 4px; max-width: 80px; }
.brand-xs img { height: 11px; }
.brand-sm { max-width: 112px; }
.brand-chip { max-width: 100%; }
.brand-chip img { height: 17px; }
.brand-md { padding: 6px 10px; max-width: 190px; }
.brand-md img { height: 22px; }
.brand-lg { padding: 12px 18px; border-radius: 8px; max-width: min(380px, 100%); }
.brand-lg img { height: 40px; }
.brand-mono { display: inline-grid; place-items: center; flex: none; border-radius: 6px; color: #fff; font: 600 11px/1 var(--mono); letter-spacing: 0; vertical-align: middle; }
.brand-mono.brand-xs { width: 22px; height: 22px; font-size: 9px; padding: 0; border-radius: 4px; }
.brand-mono.brand-sm { width: 28px; height: 28px; }
.brand-mono.brand-md { width: 36px; height: 36px; font-size: 13px; }
.brand-mono.brand-lg { width: 64px; height: 64px; font-size: 22px; border-radius: 8px; }
.mono-0 { background: #a24f39; } .mono-1 { background: #2b6a88; } .mono-2 { background: #5f6e27; } .mono-3 { background: #55595f; }
.mono-4 { background: #7a5630; } .mono-5 { background: #3a7149; } .mono-6 { background: #85621a; } .mono-7 { background: #66497a; }
.brand-name { font-weight: 600; }
.co-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.co-logo { width: 112px; flex: none; display: flex; }
.chip-name { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.co-title { margin: 4px 0 18px; }
.co-title + h1 { margin-top: 0; }

/* Map */
/* Full-bleed: wider than the text column, centred on the page. */
.bleed { width: min(1400px, calc(100vw - 32px)); margin-left: calc(50% - min(700px, calc(50vw - 16px))); }
.map-stage { position: relative; height: clamp(460px, 74vh, 820px); border-radius: var(--radius); overflow: hidden; background: var(--sea); border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 3px; }
@media (max-width: 720px) { .map-stage { height: clamp(420px, 70vh, 640px); } }
.worldmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.is-dragging .worldmap { cursor: grabbing; }
.worldmap path { fill: var(--land); stroke: var(--land-stroke); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 0.25s ease, opacity 0.25s ease; }
.worldmap .states path { stroke: color-mix(in srgb, var(--land-stroke) 70%, var(--land)); stroke-width: 0.5; pointer-events: none; }
.worldmap .states path:not([data-s]) { fill: none; }
.worldmap .states path[data-s] { pointer-events: auto; stroke: var(--land-stroke); }
.worldmap .countries path:hover, .worldmap .states path[data-s]:hover { stroke: var(--ink); stroke-width: 1; }
.worldmap path.is-active { stroke: var(--ink); stroke-width: 1.6; }
.worldmap.has-focus .countries path:not(.is-focus) { opacity: 0.35; }
.worldmap.has-focus .states path { opacity: 0.35; }
.worldmap path.is-focus { stroke: var(--ink); stroke-width: 0.9; }
.worldmap [data-s="q1"] { fill: var(--q1); }
.worldmap [data-s="q2"] { fill: var(--q2); }
.worldmap [data-s="q3"] { fill: var(--q3); }
.worldmap [data-s="q4"] { fill: var(--q4); }
.worldmap [data-s="cleared"] { fill: var(--cleared); }
.worldmap [data-s="g1"] { fill: var(--g1); }
.worldmap [data-s="g2"] { fill: var(--g2); }
.worldmap [data-s="g3"] { fill: var(--g3); }
.worldmap [data-s="g4"] { fill: var(--g4); }
.worldmap [data-s="sell"] { fill: var(--sell); }
.worldmap [data-s="approved"] { fill: var(--st-approved); }
.worldmap [data-s="review"] { fill: var(--st-review); }
.worldmap [data-s="banned"] { fill: var(--st-banned); }
.worldmap .dot { stroke: var(--pin-ring); stroke-width: 1.5; cursor: pointer; }
.worldmap .dot.is-active { stroke: var(--ink); stroke-width: 2; }
.worldmap .arc { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; pointer-events: none; }
.worldmap .arc.arc-cleared { stroke-dasharray: 4 4; opacity: 0.6; }
.worldmap .arc-end { fill: var(--ink); stroke: var(--pin-ring); stroke-width: 1.5; pointer-events: none; }
.worldmap .pin, .worldmap .cluster { cursor: pointer; }
.worldmap .pin-dot { fill: var(--pin); stroke: var(--pin-ring); stroke-width: 1.5; }
.worldmap .pin.is-selected .pin-dot, .worldmap .pin:hover .pin-dot { fill: var(--series-2); }
.worldmap .pin-chip { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)); }
.worldmap .chip-bg { fill: #fff; stroke: rgba(0, 0, 0, 0.12); stroke-width: 1; }
.worldmap .chip-bg.dark { fill: #1c1b19; stroke: rgba(255, 255, 255, 0.16); }
.worldmap .pin:hover .chip-bg, .worldmap .pin.is-selected .chip-bg { stroke: var(--series-2); stroke-width: 2; }
.worldmap .chip-text { font: 600 11px/1 var(--sans); fill: #1b201c; pointer-events: none; }
.worldmap .cluster circle { fill: var(--pin); stroke: var(--pin-ring); stroke-width: 2; }
.worldmap .cluster:hover circle { fill: var(--series-2); }
.worldmap .cluster text { font: 600 10.5px/1 var(--mono); fill: var(--pin-ring); pointer-events: none; }

/* Floating chrome */
.map-float, .map-switch, .map-search, .map-zoomctl, .map-legend, .map-toggle, .map-card, .map-tip {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.map-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-switch { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.map-switch::-webkit-scrollbar { display: none; }
.map-switch-group { font-size: 0.625rem; padding: 0 6px 0 10px; white-space: nowrap; }
.map-switch-group:not(:first-child) { margin-left: 6px; border-left: 1px solid var(--line); padding-left: 12px; }
.map-tab { padding: 5px 12px; border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; font-size: 0.86rem; white-space: nowrap; }
.map-tab:hover { color: var(--ink); background: var(--surface-2); }
.map-tab[aria-current="true"] { background: var(--ink); color: var(--page); }
.map-search { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--radius); height: 40px; min-width: 220px; }
.map-search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.map-search input { border: 0; background: transparent; font: inherit; font-size: 0.88rem; color: var(--ink); width: 100%; outline: none; }
.map-search:focus-within { border-color: var(--ink-2); }
.map-zoomctl { position: absolute; right: 12px; bottom: 12px; display: grid; border-radius: var(--radius); overflow: hidden; }
.map-zoomctl button { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); font: 400 1.1rem/1 var(--mono); cursor: pointer; }
.map-zoomctl button + button { border-top: 1px solid var(--line); }
.map-zoomctl button:hover { background: var(--surface-2); }
.map-zoomctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-bottom { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: calc(100% - 80px); pointer-events: none; }
.map-bottom > * { pointer-events: auto; }
.map-legend { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 7px 12px; border-radius: var(--radius); font-size: 0.8rem; color: var(--ink-2); }
.map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-title { font-weight: 600; color: var(--ink); }
.map-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius); font-size: 0.8rem; color: var(--ink-2); cursor: pointer; }
.map-toggle input { accent-color: var(--ink); margin: 0; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
.sw-q1 { background: var(--q1); }
.sw-q2 { background: var(--q2); }
.sw-q3 { background: var(--q3); }
.sw-q4 { background: var(--q4); }
.sw-cleared { background: var(--cleared); }
.sw-g1 { background: var(--g1); }
.sw-g2 { background: var(--g2); }
.sw-g3 { background: var(--g3); }
.sw-g4 { background: var(--g4); }
.sw-sell { background: var(--sell); }
.sw-approved { background: var(--st-approved); }
.sw-review { background: var(--st-review); }
.sw-banned { background: var(--st-banned); }
.sw-ev-next, .sw-ev-recent { width: 16px; height: 10px; border-radius: 3px; }
.sw-ev-next { background: var(--pin); }
.sw-ev-recent { background: var(--pin-ring); box-shadow: inset 0 0 0 1.5px var(--pin); }
.map-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: var(--radius-s); font-size: 0.8rem; display: grid; gap: 1px; }
.map-tip strong { font-weight: 600; }
.map-tip span { color: var(--ink-2); }
.map-card { position: absolute; z-index: 5; top: 64px; right: 12px; width: 320px; max-height: calc(100% - 138px); overflow-y: auto; padding: 16px 18px; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 760px) { .map-card { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 52%; } }
.map-card-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.map-card-close:hover { background: var(--surface-2); color: var(--ink); }
.mc-kicker { margin: 0 0 5px; padding-right: 28px; }
.mc-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 4px; padding-right: 24px; }
.mc-title a { color: var(--ink); text-decoration: none; }
.mc-title a:hover { color: var(--accent); }
.mc-value { color: var(--ink-2); font-size: 0.88rem; margin: 0 0 10px; }
.mc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--axis); }
.mc-label { margin: 14px 0 6px; }
.mc-list, .mc-markets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; }
.mc-list li, .mc-markets li { display: grid; gap: 1px; }
.mc-markets li { grid-template-columns: 10px auto; column-gap: 8px; align-items: center; }
.mc-markets .mc-sub { grid-column: 2; }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.mc-dot.arc-cleared { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.mc-sub { font-size: 0.78rem; color: var(--muted); }
.mc-text { font-size: 0.88rem; margin: 0; }
.mc-src { font-size: 0.84rem; }
.mc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 24px; }
.mc-head .mc-kicker { margin-bottom: 3px; padding-right: 0; }
.mc-head .mc-title { margin: 0; padding-right: 0; }
.mc-list li.mc-row { grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.mc-row-body { display: grid; gap: 1px; }
.mc-co { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.mc-co:hover { color: var(--accent); }
.mc-more { display: inline-block; margin-top: 14px; font-size: 0.88rem; }
.map-below { margin-top: 22px; }

/* Regulatory calendar: badges on the map (filled = coming up, outlined =
   recent), steps in the country card, and a two-column timeline below. */
.worldmap .ev-pin { cursor: pointer; }
.worldmap .ev-drop { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); animation: ev-drop 0.55s cubic-bezier(0.3, 1.45, 0.55, 1) both; }
@keyframes ev-drop { from { transform: translateY(-34px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.worldmap .ev-body { fill: var(--pin); stroke: var(--pin-ring); stroke-width: 1.5; }
.worldmap .ev-eye { fill: var(--pin-ring); }
.worldmap .ev-flag rect { fill: var(--pin); stroke: var(--pin-ring); stroke-width: 1.2; }
.worldmap .ev-flag text { font: 600 10.5px var(--mono); fill: var(--pin-ring); pointer-events: none; }
.worldmap .ev-recent .ev-body, .worldmap .ev-recent .ev-flag rect { fill: var(--pin-ring); stroke: var(--pin); }
.worldmap .ev-recent .ev-eye, .worldmap .ev-recent .ev-flag text { fill: var(--pin); }
.worldmap .ev-pin:hover .ev-body, .worldmap .ev-pin.is-active .ev-body,
.worldmap .ev-pin:hover .ev-flag rect, .worldmap .ev-pin.is-active .ev-flag rect { fill: var(--series-2); stroke: var(--pin-ring); }
.worldmap .ev-pin:hover .ev-eye, .worldmap .ev-pin.is-active .ev-eye,
.worldmap .ev-pin:hover .ev-flag text, .worldmap .ev-pin.is-active .ev-flag text { fill: #fff; }
.map-tip .tip-ev { color: var(--ink); font-weight: 600; margin-top: 3px; }
.mc-events { list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; display: grid; gap: 10px; font-size: 0.86rem; border-left: 1px solid var(--axis); }
.mc-ev { position: relative; display: grid; gap: 1px; }
.mc-ev::before { content: ""; position: absolute; left: -21px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.mc-ev-recent::before { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-2), 0 0 0 2px var(--surface); }
.mc-when { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--ink); }
.cal { display: grid; gap: 40px; }
@media (min-width: 860px) { .cal { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cal-col { border-top: 1px solid var(--rule); padding-top: 16px; }
.cal-col .tile-label { margin-bottom: 18px; font-family: var(--mono); }
.cal-list { list-style: none; margin: 0 0 0 5px; padding: 0 0 0 24px; border-left: 1px solid var(--axis); display: grid; gap: 20px; }
.cal-item { position: relative; }
.cal-item::before { content: ""; position: absolute; left: -30px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--page); }
.cal-recent .cal-item::before { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--ink-2), 0 0 0 3px var(--page); }
.cal-when { margin: 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; }
.cal-when.is-undated { color: var(--muted); font-weight: 400; }
.cal-where { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.86rem; }
.cal-go { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--axis); text-underline-offset: 3px; }
.cal-go:hover { color: var(--accent); text-decoration-color: currentColor; }
.cal-sep { color: var(--muted); }
.cal-where .tag { margin-left: 4px; }
.cal-title { margin: 4px 0 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 440; line-height: 1.35; letter-spacing: -0.005em; }
.cal-item .fine { margin-top: 3px; }
.map-lists { display: grid; gap: 16px; margin-top: 12px; }
.map-list .tile-label { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 0.84rem; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 4px 10px 4px 8px; cursor: pointer; transition: border-color 0.15s ease; }
.map-chip:hover, .map-chip.is-active { border-color: var(--ink-2); }
.map-chip b { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.map-chip .swatch { width: 8px; height: 8px; border-radius: 50%; }

/* Sector: series colours are validated for colour-blind separation
   (fermentation / cultivated / plant-based, in stacking order). */
.s-fermentation { --c: var(--inv-ferm); }
.s-cultivated { --c: var(--inv-cult); }
.s-plant { --c: var(--inv-plant); }
.s-all { --c: var(--inv-all); }
.key-box { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--muted)); flex: none; }
.legend-toggle { gap: 2px 4px; }
.legend-toggle a { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; transition: opacity 0.15s ease; }
.legend-toggle a:hover { color: var(--ink); background: var(--surface-2); }
.legend-toggle a[aria-current="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.legend-toggle.is-filtered a:not([aria-current]) { opacity: 0.55; }
.legend-toggle.is-filtered a:not([aria-current]):hover { opacity: 1; }
.chart-stack svg { min-width: 480px; }
.chart .seg { fill: var(--c); transition: opacity 0.15s ease; }
.chart .cap { font-size: 11px; font-family: var(--mono); font-weight: 600; fill: var(--ink); }
.chart svg.has-hot .col:not(.is-hot) { opacity: 0.35; }
.chart-stack .hit { cursor: default; }
.s-plant-soft { --c: color-mix(in srgb, var(--inv-plant) 42%, var(--page)); }

/* Financials: colour follows what a series is (validated for colour-blind
   separation, in stacking order): the portfolio, cash and
   income, costs, currency. A series that shares a colour is hatched. */
.s-fin-inv, .s-fin-sale { --c: var(--fin-inv); }
.s-fin-cash { --c: var(--fin-cash); }
.s-fin-cost, .s-fin-fee { --c: var(--fin-cost); }
.s-fin-fx { --c: var(--fin-fx); }
.key-box.hatch { background: repeating-linear-gradient(-45deg, var(--c) 0 2px, color-mix(in srgb, var(--c) 28%, var(--page)) 2px 4px); }
.key-box.is-faded { opacity: 0.4; }
.key-net { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--ink); border-radius: 2px; }
.chart .hseg { transition: opacity 0.15s ease; }
.chart .hatch-bg { fill: color-mix(in srgb, var(--c) 28%, var(--page)); }
.chart .hatch-line { stroke: var(--c); stroke-width: 2.2; }
.chart .col.is-faded { opacity: 0.4; }
.chart svg.has-hot .col.is-faded.is-hot { opacity: 0.7; }
.chart .net { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.chart .net-halo { stroke: var(--page); stroke-width: 6.5; stroke-linecap: round; }
main > .fin-head { margin: 8px 0 20px; }
.chart-wide svg { min-width: 860px; }
.period-switch { margin: 0; }
.period-view > * + * { margin-top: 60px; }
#period-views { margin-bottom: 60px; }
.fin-head + #period-views .period-view > .card:first-child { border-top: 0; padding-top: 0; }
sup.derived { color: var(--muted); margin-left: 1px; }

/* Sales today: a hero total, then bar lists with a strong (meat) and a soft
   (dairy) tone of the plant-based hue. */
.sales-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 20px; }
.sales-total { margin: 0; font-family: var(--serif); font-size: 2.6rem; font-weight: 320; line-height: 1; letter-spacing: -0.03em; }
.sales-sub { margin: 0; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.splits { display: grid; gap: 20px; }
.splits + .fine { margin-top: 14px; }
.hbar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hbar-list li { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: center; column-gap: 10px; font-size: 0.86rem; }
.hbar-name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar { display: block; overflow: visible; }
.hbar .strong { fill: var(--inv-plant); }
.hbar .rest { fill: color-mix(in srgb, var(--inv-plant) 42%, var(--page)); }
.hbar .cut { fill: var(--page); }
.hbar-v { font: 500 11px var(--mono); fill: var(--ink); }

/* Forecasts: per segment, today's sales (filled dot) joined to a forecast
   (open dot) on one shared scale, with bands for ranges and high cases. */
.fc-layout { display: grid; gap: 24px; }
@media (min-width: 960px) { .fc-layout { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; gap: 40px; } }
.fc-row { display: grid; gap: 4px 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.fc-row.fc-axis { border-top: 0; padding: 0 0 2px; }
@media (min-width: 720px) { .fc-row { grid-template-columns: minmax(170px, 28%) minmax(0, 1fr) 96px; } }
@media (max-width: 719px) { .fc-axis > span { display: none; } }
.fc-name { margin: 0; font-weight: 600; font-size: 0.95rem; }
.fc-meta .fine { line-height: 1.45; }
.fc-track { display: block; overflow: visible; }
.fc-axis text { font: 10.5px var(--mono); fill: var(--tick); }
.fc-grid { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 1 4; }
.band { fill: color-mix(in srgb, var(--c, var(--ink-2)) 22%, transparent); }
.fc-link { stroke: var(--c); stroke-width: 2; stroke-dasharray: 3 3; }
.dot-fc { fill: var(--page); stroke: var(--c, var(--ink-2)); stroke-width: 2.5; }
.dot-today { fill: var(--c, var(--ink-2)); stroke: var(--page); stroke-width: 2; }
.fc-label { font: 600 11.5px var(--mono); fill: var(--ink); }
.fc-today { font: 10.5px var(--mono); fill: var(--muted); }
.fc-need { text-align: right; }
.fc-needs { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 360; line-height: 1.1; letter-spacing: -0.02em; }
.fc-needs small { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0; color: var(--muted); margin-left: 2px; }
.fc-need-l { margin: 0 0 2px; font-size: 0.625rem; }
@media (max-width: 719px) { .fc-need { text-align: left; display: flex; align-items: baseline; gap: 8px; } }
.fc-layout + .fine { margin-top: 14px; }
.fc-share { display: grid; justify-items: start; gap: 4px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.waffle { display: block; margin-bottom: 8px; }
.waffle .w-on { fill: var(--ink); }
.waffle .w-fc { fill: color-mix(in srgb, var(--ink) 35%, transparent); }
.waffle .w-off { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.fc-share-big { margin: 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 340; line-height: 1.1; letter-spacing: -0.02em; }
main > .map-head { margin: 8px 0 16px; }

@media (forced-colors: active) {
  .meter i.on { background: CanvasText; }
  .meter i { border: 1px solid CanvasText; }
  .rev-revenue .glyph { background: CanvasText; forced-color-adjust: none; }
  .rev-early .glyph { background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); forced-color-adjust: none; }
  .cd-fill { fill: CanvasText; }
  .cd-bg { fill: Canvas; stroke: CanvasText; }
}
@media print {
  .site-header, .filters, .table-view summary, .theme-toggle { display: none; }
}

/* ---------- History (portfolio over time) ---------- */
/* The date slider is an instrument: a panel that stays in view while the
   page below it changes. */
.card.hist-bar { padding: 16px 22px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 860px) and (min-height: 640px) {
  .hist-bar { position: sticky; top: 70px; z-index: 15; box-shadow: var(--shadow); }
}
/* Narrow screens: pinned under the taller two-row header. Not on landscape
   phones, where header and bar together would fill the window. */
@media (max-width: 859px) and (min-height: 520px) {
  .hist-bar { position: sticky; top: 100px; z-index: 15; box-shadow: var(--shadow); }
}
.hist-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hist-date { margin: 0; font-family: var(--serif); font-size: 1.9rem; font-weight: 340; line-height: 1.1; letter-spacing: -0.025em; min-width: 6.6em; }
.hist-kind { font-size: 0.625rem; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--axis); color: var(--ink-2); white-space: nowrap; }
.hist-buttons { margin-left: auto; display: flex; gap: 6px; }
.hist-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--axis); background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; transition: color 0.15s ease, border-color 0.15s ease; }
.hist-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); }
.hist-btn:disabled { opacity: 0.4; cursor: default; }
.hist-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hist-play { background: var(--ink); border-color: var(--ink); color: var(--page); }
.hist-play:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hist-play .i-play { fill: currentColor; stroke: none; }
.hist-play .i-pause, .hist-play.is-playing .i-play { display: none; }
.hist-play.is-playing .i-pause { display: block; stroke-width: 2.4; }

.hist-slider { --thumb: 18px; margin-top: 8px; }
.hist-slider input[type="range"] { --fill: 100%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.hist-slider input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--fill), var(--axis) var(--fill)); }
.hist-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -8px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.hist-slider input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--axis); }
.hist-slider input[type="range"]::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--ink); }
.hist-slider input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.hist-slider input[type="range"]:focus-visible { outline: none; }
.hist-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.hist-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.hist-ticks { position: relative; height: 28px; margin: 0 calc(var(--thumb) / 2) 0; }
.hist-dot { position: absolute; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 1.5px solid var(--axis); background: var(--surface); }
.hist-dot.on { background: var(--accent); border-color: var(--accent); }
.hist-year { position: absolute; top: 11px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.hist-legend { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; }
.hist-legend .hist-dot { position: static; margin: 0; }
.hist-bar + .tiles { margin-top: -28px; }

/* What moved NAV: one ruled row per driver. */
.hist-drivers { list-style: none; margin: 0 0 14px; padding: 0; display: grid; font-size: 0.98rem; }
.hist-drivers li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--grid); }
.hist-drivers li::before { content: ""; position: absolute; left: 1px; top: 1.15em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); }
.hist-drivers:empty { display: none; }
.hist-note { font-size: 0.9rem; color: var(--ink-2); }
.hist-basis { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 4px; }
.hist-basis.is-carried { color: var(--pending-text); }

.chart .sel line { stroke: var(--ink-2); stroke-width: 1; }
.chart .sel circle { stroke: var(--page); stroke-width: 2; }
.chart .sel circle.s1 { fill: var(--series-1); }
.chart .sel circle.s2 { fill: var(--series-2); }
.chart .sel circle.off { fill: var(--page); stroke: var(--series-1); stroke-width: 2.5; }

/* Ranked holdings bars. Rows are absolutely placed so re-ranking animates. */
.hbars { --hb-name: 200px; --hb-gap: 12px; --hb-val: 92px; --row: 30px; position: relative; margin: 10px 0 12px; padding-top: 22px; }
.hb-axis { position: absolute; top: 0; bottom: 0; left: calc(var(--hb-name) + var(--hb-gap)); right: var(--hb-val); pointer-events: none; }
.hb-grid { position: absolute; top: 20px; bottom: 0; width: 0; border-left: 1px dotted var(--axis); }
.hb-grid.is-zero { border-left: 1px solid var(--axis); }
.hb-tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--tick); white-space: nowrap; }
.hb-rows { position: relative; transition: height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hb-row { position: absolute; left: 0; right: 0; top: 0; height: var(--row); display: grid; grid-template-columns: var(--hb-name) 1fr; column-gap: var(--hb-gap); align-items: center; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease; }
.hb-row.is-gone { opacity: 0; pointer-events: none; }
.hb-name { font-size: 0.88rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.hb-name a { color: var(--ink); text-decoration: none; }
.hb-name a:hover { color: var(--accent); text-decoration: underline; }
.hb-name.is-other { color: var(--muted); }
.hb-track { position: relative; height: 100%; margin-right: var(--hb-val); }
.hb-bar { position: absolute; left: 0; top: 50%; width: 0; height: 12px; margin-top: -6px; border-radius: 0 2px 2px 0; background: var(--series-1); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.hb-val { position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-left: 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hb-val.is-zero { color: var(--muted); }
.hb-row:hover .hb-bar { filter: brightness(1.15); }
.hbars.is-est .hb-bar { opacity: 0.7; }
.hbars.is-carried .hb-bar { opacity: 0.35; }
.hbars.is-carried .hb-val { color: var(--muted); }
.hbars .tooltip { min-width: 0; }
@media (max-width: 640px) {
  .hbars { --hb-name: 108px; --hb-gap: 8px; --hb-val: 70px; }
  .hb-name { font-size: 0.8rem; }
  /* Compact bar, since it stays on screen: date over its tag, buttons beside. */
  .card.hist-bar { padding: 10px 14px 4px; }
  .hist-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  .hist-date { grid-area: 1 / 1; font-size: 1.35rem; min-width: 0; }
  .hist-kind { grid-area: 2 / 1; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .hist-buttons { grid-area: 1 / 2 / 3 / 3; margin-left: 0; }
  .hist-slider { margin-top: 4px; }
  .hist-ticks { height: 24px; }
  .hist-year { top: 10px; line-height: 1.2; }
  .hist-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-rows, .hb-row, .hb-bar, .hb-val { transition: none; }
  .worldmap .ev-drop { animation: none; }
}

/* ---------- Chat ---------- */
.chat { max-width: 780px; }
.card.chat-compose { display: grid; gap: 14px; margin-bottom: 48px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chat-compose > .fine { margin-top: -4px; }
.chat input[name="name"], .chat textarea { font: inherit; color: var(--ink); background: var(--page); border: 1px solid var(--line); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.chat input[name="name"]:focus, .chat textarea:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chat textarea { display: block; width: 100%; min-height: 88px; padding: 10px 14px; border-radius: var(--radius-s); line-height: 1.5; resize: vertical; }
.chat-id { font-size: 0.92rem; color: var(--ink-2); }
.chat-rename > summary { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; list-style: none; }
.chat-rename > summary::-webkit-details-marker { display: none; }
.chat-me { color: var(--ink); font-weight: 600; }
.chat-change { color: var(--ink-2); font-size: 0.86rem; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--axis); text-underline-offset: 3px; }
.chat-rename[open] .chat-change { color: var(--muted); }
.chat-rename .chat-name-form { margin-top: 10px; }
.chat-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chat-name-form label { font-weight: 600; color: var(--ink); }
.chat-name-form input { width: min(100%, 220px); min-height: 36px; padding: 6px 12px; border-radius: var(--radius-s); font-size: 0.92rem; }
.chat-name-form .chat-error { flex-basis: 100%; }
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 10px; }
.chat-error { margin: 0 auto 0 0; font-size: 0.86rem; color: var(--bad-text); }
.chat-error:empty { display: none; }
.btn { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--page); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-s); padding: 6px 20px; min-height: 36px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.chat-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.chat-h { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 18px 0 6px; border-top: 1px solid var(--rule); }
.chat-count { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.chat-threads { list-style: none; margin: 0; padding: 0; }
.chat-threads:empty { display: none; }
.chat-thread { padding: 20px 0; border-bottom: 1px solid var(--line); }
.chat-thread:last-child { border-bottom: 0; }
.chat-empty { padding: 14px 0 28px; }
.chat-c { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; border-radius: 6px; }
.chat-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--axis); color: var(--ink-2); font-family: var(--serif); font-size: 0.95rem; font-weight: 440; }
.chat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 0.9rem; line-height: 1.4; }
.chat-author { color: var(--ink); font-weight: 600; }
.chat-at { color: var(--ink-2); }
.chat-as { margin: 0; }
.chat-admin-name, .chat-c-admin .chat-author { color: var(--accent); font-weight: 600; }
.chat-c-admin .chat-av { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chat-meta time { font-family: var(--mono); color: var(--muted); font-size: 0.72rem; }
.chat-body { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-replies { list-style: none; display: grid; gap: 14px; margin: 14px 0 0 44px; padding: 0 0 0 16px; border-left: 1px solid var(--axis); }
.chat-replies:empty { display: none; }
.chat-replies .chat-c { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.chat-replies .chat-av { width: 26px; height: 26px; font-size: 0.78rem; }
.chat-reply-btn, .chat-reply-box > summary { font: inherit; font-size: 0.84rem; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.chat-reply-btn { margin-top: 2px; }
.chat-del { font: inherit; font-size: 0.84rem; color: var(--muted); background: none; border: 0; padding: 0; margin: 2px 0 0 14px; cursor: pointer; }
.chat-del:hover, .chat-del.is-armed { color: var(--bad-text); }
.chat-del.is-armed { font-weight: 600; }
.chat-reply-btn:hover, .chat-reply-box > summary:hover { color: var(--accent); }
.chat-reply-box { margin: 10px 0 0 44px; }
.chat-reply-box > summary { display: inline-block; list-style: none; }
.chat-reply-box > summary::-webkit-details-marker { display: none; }
.chat-reply-box[open] > summary { color: var(--ink-2); }
/* With JavaScript each comment has its own Reply button, so the thread's
   fallback link goes and the form shows only while open. */
.chat.js .chat-reply-box > summary { display: none; }
.chat.js .chat-reply-box:not([open]) { display: none; }
.chat.js .chat-reply-box form { margin-top: 0; }
.chat-reply-box form { margin-top: 8px; }
.chat-reply-box textarea { min-height: 68px; }
.chat-to { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.86rem; color: var(--ink-2); }
.chat-to strong { color: var(--ink); }
.chat-to-x { font: inherit; line-height: 1; color: var(--muted); background: none; border: 0; padding: 2px 4px; cursor: pointer; }
.chat-to-x:hover { color: var(--ink); }
.chat-pages { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 0.92rem; }
.is-new > .chat-c { animation: chat-new 2.4s ease-out; }
@keyframes chat-new { from { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 560px) {
  .chat-replies { margin-left: 12px; padding-left: 12px; }
  .chat-reply-box { margin-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-new > .chat-c { animation: none; }
}

/* Admin: the traffic dashboard at /admin. Same ledger, fewer words. */
.admin-out { align-self: center; margin: 0; }
.admin-out .btn-ghost { min-height: 32px; padding: 4px 12px; font-size: 0.84rem; }
@media (max-width: 859px) { .admin-out { order: 2; } }
.admin tbody th { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; }
.admin tbody th a { color: var(--ink); text-decoration: none; }
.admin tbody th a:hover { color: var(--accent); }
.admin #period-views { margin-bottom: 0; }
.admin .callout { margin-bottom: 24px; }
.admin-login { max-width: 360px; margin: 6vh auto 0; }
.login-form { display: grid; gap: 10px; margin-top: 24px; }
.login-form .tile-label { margin: 0; }
.login-form input[type="password"] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 12px; min-height: 42px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.login-form input[type="password"]:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.login-form .btn { justify-self: start; margin-top: 4px; }
.form-error { margin: 0; color: var(--bad-text); font-size: 0.88rem; }
.s-fin-traffic { --c: var(--series-1); }
.s-q1 { --c: var(--q1); } .s-q2 { --c: var(--q2); } .s-q3 { --c: var(--q3); } .s-q4 { --c: var(--q4); }
/* A row's share of the largest, as a hairline bar under its name. */
.share { display: block; width: 100%; max-width: 240px; height: 3px; margin-top: 7px; border-radius: 2px; }
.share rect { fill: var(--series-1); }
.share .share-track { fill: var(--grid); }
.where { display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .where { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.visit-map { display: block; width: 100%; height: auto; background: var(--sea); border: 1px solid var(--line); border-radius: var(--radius); }
.visit-map path { fill: var(--land); stroke: var(--land-stroke); stroke-width: 0.6; stroke-linejoin: round; transition: fill 0.2s ease; }
.visit-map path:hover { stroke: var(--ink); stroke-width: 1; }
.visit-map [data-s="q1"] { fill: var(--q1); }
.visit-map [data-s="q2"] { fill: var(--q2); }
.visit-map [data-s="q3"] { fill: var(--q3); }
.visit-map [data-s="q4"] { fill: var(--q4); }
.where-table { max-height: 470px; overflow-y: auto; }
.where-table thead th { position: sticky; top: 0; background: var(--page); z-index: 1; }
.visitors td { font-size: 0.88rem; }
.mono, .mono-h { font-family: var(--mono); }
td.mono { font-size: 0.8rem; line-height: 1.75; }
.mono-h { font-weight: 400; letter-spacing: -0.03em; }
a.btn-ghost { display: inline-flex; align-items: center; text-decoration: none; }
.more-row { margin: 18px 0 0; }
.visit-list { list-style: none; margin: 0; padding: 0; }
.visit-list > li { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.visit-list > li:first-child { padding-top: 2px; }
.visit-list > li:last-child { border-bottom: 0; }
.visit-meta { margin: 0 0 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.92rem; }
.steps li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.step-t { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); text-align: right; }
.steps a { color: var(--ink); text-decoration: none; }
.steps a:hover { color: var(--accent); }

/* ---------- What you own ---------- */
/* The header's share price leads here. */
a.price { text-decoration: none; }
a.price:hover { color: var(--accent); }
/* The holding is an instrument, like the countdown: a panel in the hero. */
.yours-panel { flex: 0 1 340px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 14px; }
@media (max-width: 719px) { .yours-panel { flex-basis: 100%; } }
.yours-panel .cd-head { margin-bottom: 4px; }
.y-form { margin: 0; }
.y-field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink-2); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.y-field:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.y-field input, .y-pre, .y-static { font-family: var(--serif); font-size: 2.6rem; font-weight: 320; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.y-field input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 2px 0 6px; border: 0; border-radius: 0; background: transparent; }
.y-field input::placeholder { color: var(--muted); opacity: 0.55; }
.y-field input:focus { outline: none; }
.y-pre { flex: none; padding-bottom: 4px; color: var(--ink-2); }
.y-static { margin: 0; padding: 2px 0 7px; border-bottom: 1px solid var(--line); }
.y-units { flex: none; display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.y-units button { min-width: 32px; min-height: 30px; padding: 4px 10px; border: 0; background: transparent; color: var(--ink-2); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.y-units button + button { border-left: 1px solid var(--line); }
.y-units button:hover { color: var(--ink); }
.y-units button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.y-conv { margin: 10px 0 0; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }
.yours-panel .cd-basis { margin-top: 4px; }
.y-covers { max-width: 760px; margin: -4px 0 14px; font-family: var(--serif); font-size: 1.15rem; font-weight: 360; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }

/* Holdings: each one's value a share is a step of the waterfall to NAV,
   solid up to the share price and pale past it; the price is a line that
   runs through every row. */
.yours-table td, .yours-table th { vertical-align: middle; }
.yours-table th:first-child, .yours-table td:first-child { min-width: 170px; }
.yours-table td:first-child .fine { margin-top: 2px; font-size: 0.78rem; }
.yours-table td.num { white-space: nowrap; }
.yours-table .wf-cell { position: relative; overflow: hidden; width: 42%; min-width: 200px; padding-left: 20px; }
@media (max-width: 640px) {
  .yours-table th:first-child, .yours-table td:first-child { min-width: 128px; }
  .yours-table .wf-cell { min-width: 150px; }
}
.wf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 3.9em; align-items: center; gap: 10px; }
.wf { display: block; width: 100%; height: 12px; overflow: visible; }
.wf-in { fill: var(--series-1); }
.wf-out { fill: color-mix(in srgb, var(--series-1) 32%, var(--page)); }
.wf-neg { fill: var(--loss); }
.wf-p { stroke: var(--series-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wf-v { text-align: right; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }
.wf-key-in { --c: var(--series-1); }
.wf-key-out { --c: color-mix(in srgb, var(--series-1) 32%, var(--page)); }
.wf-key-p { width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--series-2); border-radius: 0; }
#y-price { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); }
/* Cash and the rest of net assets, under the holdings. */
.yours-table tr.y-rest .co-name { font-weight: 400; color: var(--ink-2); }
.yours-table tbody tr:not(.y-rest) + tr.y-rest > * { border-top: 1px solid var(--axis); }
.yours-table tfoot th, .yours-table tfoot td { border-top: 1px solid var(--axis); border-bottom: 0; }
.yours-table tfoot th { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.yours-table tfoot td.num, .yours-table tfoot .wf-v { font-weight: 600; color: var(--ink); }

/* What it's in: share of the holdings by one grouping at a time. */
#mix .card-head .type-filter { margin: 0; }
.mix-table td:first-child { min-width: 170px; }
.mix-table td.mix-share { width: 55%; min-width: 180px; }
.share-cell { display: grid; grid-template-columns: minmax(0, 1fr) 3em; align-items: center; gap: 10px; }
.mixbar { display: block; width: 100%; height: 10px; }
.mixbar-bg { fill: var(--grid); }
.mixbar-v { fill: var(--series-1); }
.share-cell > span { text-align: right; }