/* Sfera Review — calm, dense, neutral. State is carried by shape and weight first, colour second. */

:root{
  --bg:#FFFFFF; --panel:#FBFBFA; --sunk:#F5F5F4; --raise:#F0F0EC;
  --ink:#191918; --ink-2:#5C5C57; --ink-3:#8E8E88;
  --line:#EAEAE7; --line-2:#DFDFDA;
  --accent:#3D5A80;
  --ok:#137A55; --open:#8E8E88; --manual:#9A6207; --warn:#B3261E;
  --ok-bg:#E7F2EC; --manual-bg:#F6ECD9;
  --glow:rgba(61,90,128,.05);
  --r:6px;
  --sidebar:264px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F11; --panel:#141618; --sunk:#191C1F; --raise:#1C2024;
    --ink:#E8E8E4; --ink-2:#A6A69F; --ink-3:#75756E;
    --line:#232629; --line-2:#2C3034;
    --accent:#8AB0D9;
    --ok:#4CB68B; --open:#75756E; --manual:#D4A44C; --warn:#E8756B;
    --ok-bg:#132520; --manual-bg:#241E12;
    --glow:rgba(138,176,217,.08);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F11; --panel:#141618; --sunk:#191C1F; --raise:#1C2024;
  --ink:#E8E8E4; --ink-2:#A6A69F; --ink-3:#75756E;
  --line:#232629; --line-2:#2C3034;
  --accent:#8AB0D9;
  --ok:#4CB68B; --open:#75756E; --manual:#D4A44C; --warn:#E8756B;
  --ok-bg:#132520; --manual-bg:#241E12;
  --glow:rgba(138,176,217,.08);
}

/* ── MACHINE ─────────────────────────────────────────────────────────────────────────────────────────
   The view for reading this thing as an instrument rather than a document: phosphor on black, everything
   monospaced, corners square.

   It earns its place rather than being a costume. Every figure in this reader is a FIGURE — a subtotal that
   must foot to the sum of its members — and proportional type is the wrong tool for columns of digits you
   are checking by eye: the glyphs have different widths, so the ones and the sevens do not line up and a
   transposed pair hides. Monospace with tabular numerals puts every digit in the same column, which is how
   an accountant reads a page and how a misread announces itself.

   The green is a CALIBRATED phosphor, not #0F0 on #000. Pure green on pure black is the one combination
   that genuinely cannot be read for more than a minute: it blooms on an LCD and there is no headroom left
   to distinguish ok from warn. So: a near-black with a green cast, ink at ~80% of full brightness, and the
   status colours kept distinct from the accent so «ties» and «does not tie» never read as the same signal. */
:root[data-machine="1"]{
  --bg:#05080A; --panel:#080D10; --sunk:#0B1216; --raise:#0F181D;
  --ink:#BFEBCF; --ink-2:#6FA886; --ink-3:#3F6E55;
  --line:#13211B; --line-2:#1B2F25;
  --accent:#4ADE80;
  --ok:#36D399; --open:#3F6E55; --manual:#D9A23B; --warn:#FF6B5B;
  --ok-bg:#071612; --manual-bg:#1A1206;
  --glow:rgba(74,222,128,.07);
  --r:2px;
}
/* One font for the whole surface. `font-variant-numeric` is the half that matters — without it a monospace
   face can still render proportional digits and the columns drift again. */
:root[data-machine="1"] body,
:root[data-machine="1"] button,
:root[data-machine="1"] input,
:root[data-machine="1"] select,
:root[data-machine="1"] textarea{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
/* Headings lose their display face too, or the page reads half-terminal. */
:root[data-machine="1"] .mark b,
:root[data-machine="1"] h1, :root[data-machine="1"] h2, :root[data-machine="1"] h3{
  font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.02em;
}

/* the machine view: a transcript, not a table. Pre-formatted so the columns the renderer aligned with
   spaces STAY aligned - any CSS table would re-measure them and the point is lost. Scrolls horizontally
   rather than wrapping, because a wrapped record is unreadable. */
.mach{
  margin:14px 0 0; padding:14px 16px; overflow:auto;
  background:var(--sunk); border:1px solid var(--line); border-radius:var(--r);
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums; font-size:12px; line-height:1.55;
  color:var(--ink-2); white-space:pre; tab-size:2;
}
.mach-src{
  margin:8px 0 0; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink-3);
}
.mach-src a{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.mach-src a:hover{ border-bottom-color:var(--accent); }

/* ── the landing page ───────────────────────────────────────────────────────────────────────────────
   A reading width, generous vertical rhythm, and figures given room: the numbers ARE the argument, so
   they are set large and the prose around them stays quiet. */
.page-landing{ max-width:1560px }
.blk.blk-wide{ max-width:none }             /* TWO classes: .blk's own 760px is declared later */
.sub.sub-wide{ max-width:78ch }             /* same reason */
.hero{ padding:28px 0 8px; display:grid; gap:56px; align-items:center;
       grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr) }
.hero-l, .hero-r{ min-width:0 }
@media (max-width:1040px){ .hero{ grid-template-columns:1fr; gap:26px } }
.hero h1{ font-size:40px; line-height:1.14; letter-spacing:-.03em; font-weight:700;
          margin:0 0 14px; max-width:none; text-wrap:balance }
.hero-sub{ font-size:16px; line-height:1.55; color:var(--ink-2); max-width:74ch;
           margin:0 0 22px; text-wrap:pretty }
.hero-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px }
/* NO BRAND COLOUR ON THIS PAGE. The accent is a blue the rest of the reader uses for links and meters;
   as a filled button it introduced a colour the product does not otherwise have. Ink on page, page on ink
   — the same two tones everything else is made of, and it inherits the theme for free. */
.cta{ background:var(--ink); color:var(--bg); border:1px solid var(--ink); border-radius:var(--r);
      padding:9px 18px; font-size:13.5px; font-weight:600; cursor:pointer }
.cta:hover{ opacity:.86 }
.cta-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.cta-ghost:hover{ background:var(--sunk); opacity:1 }

/* the agent transcript: a question, the call it made, the result, the conclusion */
.chat{ border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:16px 18px 18px; margin-top:18px }
.ask{ display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line-2);
      border-radius:var(--r); background:var(--bg); color:var(--ink);
      font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px }
.ask svg{ color:var(--ink-3); flex:0 0 auto }
.step{ margin:14px 0 10px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink-3) }
.step code{ color:var(--ink-2) }
.step.done{ margin:14px 0 0; color:var(--ok) }
.ltabs{ display:flex; gap:4px; margin:4px 0 12px; flex-wrap:wrap }
.ltab{ font-size:12px; padding:5px 11px; border-radius:99px; border:1px solid transparent;
       background:transparent; color:var(--ink-3); cursor:pointer }
.ltab:hover{ color:var(--ink) }
.ltab.on{ background:var(--sunk); border-color:var(--line-2); color:var(--ink); font-weight:600 }

/* the original filings, as cards — the documents every figure came out of */
.docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px }
.doc{ display:flex; flex-direction:column; gap:3px; padding:12px; text-decoration:none;
      border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg); color:var(--ink-2) }
.doc:hover{ border-color:var(--ink-3); color:var(--ink) }
.doc b{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14px }
.doc span{ font-size:11px; color:var(--ink-3) }

/* the three capability cards */
.land-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 16px }
.lcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:16px }
.lcard b{ font-size:13px; letter-spacing:.02em }
.lcard p{ margin:7px 0 10px; font-size:12.5px; line-height:1.55; color:var(--ink-2) }
.lcard code{ display:block; font-size:11px; color:var(--ink-3); word-break:break-all; line-height:1.5 }
.lcard code a{ color:var(--accent); text-decoration:none }
.hero-foot{ font-size:12.5px; color:var(--ink-3); margin:14px 0 0 }
@media (max-width:860px){ .land-grid{ grid-template-columns:1fr } }

/* the headline counts */
.land-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
             border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:26px 0 8px }
.ls{ background:var(--panel); padding:16px 18px }
.ls b{ display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
       font-size:24px; font-weight:600; letter-spacing:-.02em }
.ls span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3); letter-spacing:.02em }
@media (max-width:760px){ .land-stats{ grid-template-columns:repeat(2,1fr) } .hero h1{ font-size:30px } }

/* the benchmark bars — a count with its method printed beside it, never a score on its own */
.bm{ margin:18px 0 10px }
.bm-row{ display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:16px;
         padding:14px 0; border-bottom:1px solid var(--line) }
.bm-row:last-child{ border-bottom:0 }
.bm-lbl{ font-size:13.5px; color:var(--ink) }
.bm-track{ height:8px; background:var(--sunk); border-radius:99px; overflow:hidden }
.bm-track i{ display:block; height:100%; background:var(--ok); border-radius:99px }
.bm-val{ text-align:right; font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums }
.bm-val b{ font-size:16px }
.bm-val span{ display:block; font-size:11px; color:var(--ink-3) }
.bm-note{ grid-column:1 / -1; font-size:12px; color:var(--ink-3); line-height:1.5; margin-top:-4px }
.bm-method{ font-size:12.5px; color:var(--ink-3); line-height:1.6; max-width:76ch }
.land-code{ margin-top:12px }
@media (max-width:760px){ .bm-row{ grid-template-columns:1fr auto } .bm-track{ display:none } }

/* ── digital rain ───────────────────────────────────────────────────────────────────────────────────
   Behind everything, never in the way: fixed, non-interactive, and dimmed hard. The canvas paints its own
   near-black ground, so in machine mode the body's background sits under it rather than fighting it.

   The opacity is the whole argument. At full strength this is a screensaver and the statements become
   unreadable; at ~18% it reads as texture in the margins and disappears behind any panel. Every surface
   that carries figures keeps its own solid fill below, so no number is ever read against moving glyphs. */
#rain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.18; display:block;
}
/* Everything that is not the canvas sits above it. */
:root[data-machine="1"] body > *:not(#rain){ position:relative; z-index:1; }
/* ...and the surfaces that hold figures stay opaque, so the rain never shows through a column of numbers. */
:root[data-machine="1"] .mtx-wrap,
:root[data-machine="1"] .mach{ background:rgba(8,13,16,.93); backdrop-filter:blur(2px); }
@media (prefers-reduced-motion: reduce){ #rain{ display:none } }

/* THE RAIN STARTS AT THE TOP OF THE SCREEN, not under the chrome. The canvas is already full-viewport, but
   the search bar and the sidebar paint a solid --bg over it, so the effect appeared to begin a header's
   height down the page. In machine mode both go translucent so the columns run the full height of the
   window.

   The first attempt — 72% black with a 7px blur — was transparent in theory and flat darkness on screen,
   which is why the top still looked empty. Less tint, far less blur: the rain now reads THROUGH the
   chrome, and the controls stay legible because each one carries its own fill. */
:root[data-machine="1"] .bar{ background:rgba(5,8,10,.40); backdrop-filter:blur(1.5px); }
:root[data-machine="1"] aside{ background:rgba(5,8,10,.55); backdrop-filter:blur(1.5px); }
:root[data-machine="1"] .bar .search{ background:rgba(11,18,22,.88) }

/* Machine brings its own palette, so Theme has nothing to act on while it is selected: the group is hidden
   rather than left there doing nothing. Done in CSS, not JS, because the settings panel is rendered from a
   template each time the sheet opens — a one-off JS toggle would miss every later open. The setting itself
   is untouched, so the chosen theme is still there when the human version comes back. */
:root[data-machine="1"] #theme{ display:none }

/* ── the terminal prompt ────────────────────────────────────────────────────────────────────────────
   A solid block that keeps blinking after the title has finished typing. `steps(1)` rather than a fade:
   a phosphor cursor is on or off, it does not dissolve. `vertical-align` keeps it sitting on the baseline
   of whatever size the heading is. */
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.caret{
  display:inline-block; width:.62em; height:1.02em; margin-left:.12em; vertical-align:-.14em;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
  animation:caret 1.06s steps(1,end) infinite;
}
:root:not([data-machine="1"]) .caret{ display:none }

/* THE CURSOR SITS IN THE SEARCH FIELD, not on the heading. A blinking block after a title is decoration;
   in a field it is the thing every terminal has — an invitation to type. Shown only while the field is
   empty (`:placeholder-shown`), so it disappears the moment there is real text and the browser's own
   caret takes over. Pure CSS: no JS has to watch the input. */
.qwrap{ position:relative; flex:1; max-width:420px; display:flex }
.qwrap .search{ max-width:none; width:100% }
.caret-q{ display:none }
:root[data-machine="1"] .qwrap .search{ padding-left:27px }
:root[data-machine="1"] .search:placeholder-shown ~ .caret-q{
  display:block; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:9px; height:15px; margin:0;
}

/* ── JSON, and the switch between it and the table ──────────────────────────────────────────────────
   The payload as the API returns it. Keys take the accent so the shape is scannable; values stay in the
   reading ink. It wraps rather than scrolls, because a JSON line can be arbitrarily long and a horizontal
   bar per object is unusable. */
.mach.json{ white-space:pre-wrap; word-break:break-word; color:var(--ink-2); max-height:74vh; overflow:auto }
.mach.json b{ color:var(--accent); font-weight:500 }
.mview{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.08em;
  padding:3px 9px; margin-right:6px; border-radius:var(--r);
  border:1px solid var(--line-2); background:transparent; color:var(--ink-3); cursor:pointer;
}
.mview:hover{ color:var(--ink) }
.mview.on{ color:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 9999px var(--glow) }
/* The switch sits ABOVE the data it switches. Below a 700-row table it is unreachable precisely when the
   view is the wrong one — which is the only time anyone looks for it. */
.mach-switch{ margin:14px 0 0 }
/* the onboarding button reads as the primary thing on the About page, in either version */
.mview.onboard{ color:var(--accent); border-color:var(--accent); padding:5px 12px; font-size:11.5px }
.mview.onboard:hover{ box-shadow:inset 0 0 0 9999px var(--glow) }
.onboard-row{ margin:0 0 24px }

/* ── drill in ───────────────────────────────────────────────────────────────────────────────────────
   The clicked value flies at the viewer and the index recedes behind it. Transform and opacity only —
   both run on the compositor, so a 700-row table underneath does not get re-laid-out 60 times.
   `translate(-50%,-50%)` first, so the growth is centred on the cell you actually clicked rather than
   springing from its corner. */
.drill{
  position:fixed; z-index:60; pointer-events:none; white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; font-weight:600;
  color:var(--accent); text-shadow:0 0 12px var(--accent);
  transform:translate(-50%,-50%) scale(1); opacity:1;
  /* SLOW ENOUGH TO READ ON THE WAY IN. At 0.42s this was a flicker; the point is that you watch the value
     you picked grow until you pass through it, so it runs a full second and holds its opacity most of the
     way — the fade is weighted to the very end (ease-in on opacity) rather than dissolving at the start. */
  transition:transform 1.05s cubic-bezier(.45,0,.25,1), opacity 1.05s cubic-bezier(.75,0,1,1);
}
.drill.go{ transform:translate(-50%,-50%) scale(130); opacity:0; }
/* the index falls away behind it, a little slower than before so the two movements read as one */
.page.drilling{ transition:transform .8s ease-in, opacity .8s ease-in; transform:scale(1.18); opacity:0; }

/* ── the matrix table ───────────────────────────────────────────────────────────────────────────────
   A record grid: every column a field, every row an object, nothing styled to look like a document.
   `table-layout:auto` with `tabular-nums` keeps the figures in line without the fixed-width padding the
   first <pre> version used — and because these are real rows, they stay clickable, which is the whole
   reason the <pre> was abandoned. */
.mtx-wrap{ margin:14px 0 0; overflow:auto; border:1px solid var(--line); border-radius:var(--r);
           background:var(--sunk); }
.mtx{ width:100%; border-collapse:collapse;
      font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
      font-variant-numeric:tabular-nums; font-size:12px; }
.mtx th{ position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap;
         padding:8px 12px; background:var(--raise); color:var(--ink-3);
         font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
         border-bottom:1px solid var(--line-2); }
.mtx td{ padding:6px 12px; white-space:nowrap; color:var(--ink-2);
         border-bottom:1px solid var(--line); }
.mtx th.n, .mtx td.n{ text-align:right; }
.mtx tbody tr:last-child td{ border-bottom:0 }
.mtx-row[data-id]{ cursor:pointer }
.mtx-row:hover td{ background:var(--raise); color:var(--ink) }
.mtx td[data-c="ok"]{ color:var(--ok) }
.mtx td[data-c="warn"]{ color:var(--manual) }
/* In machine mode the grid lines are the structure, so they carry the phosphor rather than grey, and the
   hovered row gets a left marker — the terminal equivalent of a cursor. */
:root[data-machine="1"] .mtx th{ color:var(--accent) }
:root[data-machine="1"] .mtx-row:hover td{ box-shadow:inset 0 0 0 9999px var(--glow) }
:root[data-machine="1"] .mtx-row:hover td:first-child{ box-shadow:inset 2px 0 0 var(--accent), inset 0 0 0 9999px var(--glow) }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  /* calm ambient depth: a faint accent-tinted glow from the top, anchored to the viewport (not a loud
     gradient). Layered over the flat --bg so it reads as lighting, not decoration. Theme-aware via --glow. */
  background:
    radial-gradient(1200px 680px at 50% -18%, var(--glow), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ── shell ───────────────────────────────────────────────── */
.shell{display:grid; grid-template-columns:var(--sidebar) 1fr; height:100vh}
.navtoggle, .scrim{ display:none; }                 /* mobile-only chrome: hamburger + drawer backdrop */
@media (max-width:820px){
  /* Phone: one column, and the sidebar becomes a drawer that slides IN over the content (instead of being
     hidden, which stranded the filters / language / theme). A ☰ button in the top bar opens it. */
  .shell{ grid-template-columns:1fr; }
  aside{ position:fixed; top:0; left:0; z-index:60; width:272px; max-width:84vw; height:100dvh;
         transform:translateX(-102%); transition:transform .22s ease; box-shadow:2px 0 24px rgba(0,0,0,.30); }
  .shell.nav-open aside{ transform:translateX(0); }
  .scrim{ display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45);
          opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .shell.nav-open .scrim{ opacity:1; pointer-events:auto; }
  .navtoggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:34px;
              flex:0 0 auto; border-radius:8px; background:var(--sunk); border:1px solid var(--line);
              color:var(--ink-2); font-size:17px; line-height:1; }
  .navtoggle:hover, .navtoggle:focus-visible{ color:var(--ink); }
  .bar{ padding:11px 14px; gap:10px; }
  .page{ padding:16px 14px 64px; }
  table.fg{ --namecol:150px; }                       /* narrower frozen name column so value columns fit */
  /* Identity above controls. As a space-between ROW the title column collapsed to nothing on a phone and the
     name/ticker overlapped the RSBU-IFRS switch, with the sub-line wrapping one word per line. */
  .det-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .det-ctrls{ width:100%; }
  .det-head .sub{ margin-top:4px; }
}

aside{
  background:var(--panel); border-right:1px solid var(--line);
  padding:20px 16px; display:flex; flex-direction:column; gap:22px; overflow-y:auto;
}
/* The wordmark: caps, small, moderately tracked. A grotesque rather than a serif - at 15px a display
   serif loses its hairlines in Latin (SFERA goes hollow while СФЕРА still holds), and .20em tracking
   left the mark floating above the nav instead of anchoring it. Instrument Sans carries Cyrillic. */
.mark{display:flex; align-items:baseline; padding:0 6px}
.mark b{font-family:"Instrument Sans",Manrope,system-ui,sans-serif; font-weight:700; font-size:15px;
        text-transform:uppercase; letter-spacing:.14em; color:var(--ink)}

.stat-list{display:flex; flex-direction:column; gap:2px}
.stat{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
      padding:7px 8px; border-radius:var(--r)}
.stat b{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;
        font-size:14px; font-weight:500}
.stat small{color:var(--ink-3); font-size:12.5px; font-weight:500}

.filters{display:flex; flex-direction:column; gap:1px}
.filters .lbl{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
              color:var(--ink-3); padding:0 8px 6px}
/* `display:flex` here beats the UA sheet's [hidden]{display:none}, so a hidden button stayed
   visible - the Favourites entry is hidden until there is something in it, and needs this to work. */
.filters button[hidden]{display:none}
.filters button{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 8px; border-radius:var(--r); color:var(--ink-2); font-size:13.5px; text-align:left;
  transition:background .12s ease, color .12s ease;
}
.filters button:hover{background:var(--sunk); color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--sunk); color:var(--ink); font-weight:600}
.filters button .n{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3)}
/* echelon rows sit UNDER their parent market — indented and a shade quieter, so the group reads as a tree */
.filters button.sub-f{padding-left:20px; font-size:12.5px; color:var(--ink-3)}
/* the client menu at the top: larger, no counts, a little air below */
.filters.menu{margin:4px 0 6px}
.filters.menu button{font-size:14.5px; font-weight:600; padding:8px 10px}
/* the reviewer's section folds away */
details.dev{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
details.dev summary{list-style:none; cursor:pointer; padding:2px 0 8px; display:flex; align-items:center; gap:6px; color:var(--ink-3)}
details.dev summary::-webkit-details-marker{display:none}
details.dev summary::before{content:"▸"; font-size:9px; transition:transform .12s}
details.dev[open] summary::before{transform:rotate(90deg)}
details.dev summary .lbl{padding:0; margin:0}
details.dev .stat-list{margin-bottom:12px}
details.dev .filters{margin-bottom:8px}
details.dev .optgrp{margin-top:8px}
.filters button.sub-f[aria-pressed="true"]{color:var(--ink)}

/* ── main ────────────────────────────────────────────────── */
main{overflow-y:auto; padding:0}
.bar{
  position:sticky; top:0; z-index:5; background:var(--bg);
  border-bottom:1px solid var(--line); padding:14px 28px;
  display:flex; align-items:center; gap:14px;
}
.search{
  flex:1; max-width:420px; background:var(--sunk); border:1px solid transparent;
  border-radius:var(--r); padding:7px 11px; color:var(--ink); font-size:13.5px;
  transition:border-color .12s ease, background .12s ease;
}
.search::placeholder{color:var(--ink-3)}
.search:focus{outline:none; border-color:var(--line-2); background:var(--bg)}
.bar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
/* the page-top row: back link or heading on the left, the count on the right, one baseline */
.page-top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px}
.page-top .back{margin-bottom:8px}
.page-top .title{margin:0}
.pcount{font-size:12.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
/* the language toggle: barely there until you look for it */
.lang-tgl{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); opacity:.55;
          padding:4px 6px; border-radius:5px; border:1px solid transparent}
.lang-tgl:hover{opacity:1; color:var(--ink-2); border-color:var(--line)}
.gear{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; color:var(--ink-3)}
.gear:hover, .gear[aria-expanded="true"]{color:var(--ink); background:var(--sunk)}

/* the right-hand sheet */
.sheet-scrim{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.10); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
             opacity:0; transition:opacity .18s}
.sheet-scrim.on{opacity:1}
.sheet{position:fixed; top:0; right:0; height:100dvh; width:min(400px, 92vw); z-index:75; display:flex; flex-direction:column;
       background:color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
       border-left:1px solid var(--line-2); box-shadow:-16px 0 48px rgba(0,0,0,.18);
       transform:translateX(24px); opacity:0; transition:transform .18s ease, opacity .18s ease}
.sheet.on{transform:none; opacity:1}
.sheet[hidden], .sheet-scrim[hidden]{display:none}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px 10px}
.sheet-head b{font-size:15px; font-weight:700; letter-spacing:-.01em}
.sheet-close{width:30px; height:30px; border-radius:7px; color:var(--ink-3); font-size:18px; line-height:1}
.sheet-close:hover{color:var(--ink); background:var(--sunk)}
.sheet-body{padding:6px 22px 28px; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.sheet-body .theme{margin-top:14px}
.sheet-body .modal{width:auto; background:transparent; border:0; box-shadow:none; padding:0}

.page{padding:26px 28px 80px}                        /* fills the pane — the grid grows with the window */
.page-list{max-width:1180px}                          /* the issuer list keeps a reading width */
h1.title{font-size:22px; font-weight:700; letter-spacing:-.022em; margin:0 0 3px}
.sub{color:var(--ink-3); font-size:13px; margin:0 0 22px}

/* issuer rows */
.rows{display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:1fr 250px 18px 20px; align-items:center; gap:14px;
  padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; width:100%;
  border-radius:var(--r); transition:background .1s ease;
}
.row:hover{background:var(--sunk)}
/* ONE line per issuer: ★ · [TICKER] · name · legal form — the desktop explorer's reading order. The ticker
   slot keeps its width when empty (tk-none), so the names line up in a column no matter which rows are listed. */
.row .nm{min-width:0; display:flex; align-items:center; gap:9px}
.row .nm b{font-weight:600; font-size:13.8px; letter-spacing:-.005em; flex:0 1 auto;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .nm .star{flex:0 0 auto; color:#E0A800; font-size:11px; margin-right:-4px}
.row .nm .tk{flex:0 0 auto; min-width:52px; text-align:center; padding:2px 6px; border-radius:4px;
             background:var(--sunk); border:1px solid var(--line-2); color:var(--ink-2);
             font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:.05em}
.row:hover .nm .tk{background:var(--bg)}
.row .nm .tk-none{background:none; border-color:transparent; min-height:18px}
.row .nm .lf{flex:0 0 auto; color:var(--ink-3); font-size:9.5px; font-weight:600; letter-spacing:.04em}
.row .num{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-2);
          text-align:right; font-variant-numeric:tabular-nums}

/* two progress lines per issuer: IFRS (green) over RSBU (blue) */
.dual{display:flex; flex-direction:column; gap:4px}
.ml{display:grid; grid-template-columns:34px 68px 1fr; align-items:center; gap:8px}
.ml i{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.08em; color:var(--ink-3)}
.ml b{font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:500; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums}
.ml.rsbu .meter .meter-ok{background:var(--accent)}
.ml.none b{color:var(--line-2)}
.ml.none .meter{opacity:.5}

/* progress meter — thin, no chrome */
.meter{height:4px; background:var(--line); border-radius:2px; overflow:hidden; position:relative}
/* Three states on one 4px line: verified, loaded-but-not-verified, and the gap at the right for what
   has been filed and not read. Each segment is addressed by its OWN class, never by element name - a
   rule like `.ml.rsbu .meter i` matches both of them and outranks the one that greys the loaded part,
   which is how a bar came to read nearly finished beside a counter saying 10 / 62. */
.meter i{display:block; height:100%; border-radius:2px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.meter .meter-load{position:absolute; inset:0 auto 0 0; background:var(--line-2)}
.meter .meter-ok{position:relative; z-index:1; background:var(--ok)}   /* above the absolute one */
.meter.is-done .meter-ok{background:var(--ok)}

.state{font-size:13px; text-align:center; color:var(--ink-3)}
.state.done{color:var(--ok)}
.state.manual{color:var(--manual)}

/* ── detail ──────────────────────────────────────────────── */
.back{color:var(--ink-3); font-size:12.5px; margin-bottom:14px; display:inline-block}
.back:hover{color:var(--ink)}

.yr{margin-top:22px}
.yr h3{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em;
       color:var(--ink-3); font-weight:500; margin:0 0 6px; padding-bottom:6px;
       border-bottom:1px solid var(--line)}
.st{
  display:grid; grid-template-columns:64px 52px 1fr auto; gap:14px; align-items:baseline;
  padding:9px 8px; border-radius:var(--r); border-bottom:1px solid var(--line);
}
.st:hover{background:var(--sunk)}
.st .per{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-2)}
.st .std{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3);
         letter-spacing:.04em}
.st .why{font-size:13px; color:var(--ink-2); min-width:0; overflow-wrap:anywhere}
.st .why.clear{color:var(--ink-3)}
.st .tag{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em;
         padding:2px 7px; border-radius:3px; white-space:nowrap}
.tag.done{background:var(--ok-bg); color:var(--ok)}
.tag.manual{background:var(--manual-bg); color:var(--manual)}
.tag.open{background:var(--sunk); color:var(--ink-3)}

.forms{display:inline-flex; gap:3px; margin-right:8px; vertical-align:middle}
.forms i{width:5px; height:5px; border-radius:50%; background:var(--line-2); display:block}
.forms i.on{background:var(--ok)}

/* calendar: expected publications, grouped by day. Certainty is carried by the tag's weight — confirmed in
   the ok green, tentative in the manual amber, our own estimates quiet — so the eye reads it before the date. */
.cal-day{display:flex; align-items:baseline; gap:10px; padding:18px 10px 6px; border-bottom:1px solid var(--line-2)}
.cal-day b{font-size:12.5px; font-weight:600}
.cal-day span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3)}
.cal-day.today b{color:var(--accent)}
.row.cal-row{grid-template-columns:1fr auto; align-items:start}
.cal-stmts{display:flex; flex-direction:column; gap:5px; align-items:stretch}
.cal-stmt{display:grid; grid-template-columns:118px auto; gap:12px; align-items:center; justify-items:end}
.cal-stmt .cal-what{justify-self:start}
.row.cal-row.cal-nolink{cursor:default}
.row.cal-row.cal-nolink:hover{background:none}
.cal-what{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-2); white-space:nowrap}
.cal-c{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; padding:2px 7px;
       border-radius:3px; white-space:nowrap; text-align:center; border:1px solid transparent}

/* ONE grammar for certainty, shared by the list tag (.cal-c) and the grid chip (.cal-chip): the BORDER says
   how sure the date is — solid = announced, dashed = our tight estimate, dotted = our loose one; filled = it
   happened; red dashed = it did not. Colour is secondary, so it still reads in monochrome. */
.c-published{background:var(--ok); color:#fff; border-color:var(--ok)}
.c-scheduled{background:var(--ok-bg); color:var(--ok); border:1.5px solid var(--ok)}
.c-tentative{background:var(--manual-bg); color:var(--manual); border:1.5px solid var(--manual)}
.c-estimated{background:transparent; color:var(--ink-2); border:1.5px dashed var(--ink-3)}
.c-rough{background:transparent; color:var(--ink-3); border:1.5px dotted var(--line-2)}
.c-released{background:transparent; color:var(--ok); border:1.5px solid var(--ok)}
.c-missed{background:var(--sunk); color:var(--ink-3); border:1.5px dashed var(--line-2)}
/* a corporate event (operating update, dividend date, board, AGM): announced, so a solid border — in the accent
   colour, because it is not a statement and has no load status */
.c-event{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border:1.5px solid var(--accent)}
.cal-ev{white-space:normal; font-family:inherit; font-size:12.5px}
.cal-acc{margin-left:auto; color:var(--ink-3); font-size:11.5px}

.cal-legend{display:flex; flex-wrap:wrap; gap:14px; margin:-6px 0 16px; font-size:11.5px; color:var(--ink-3)}
.cal-legend span{display:inline-flex; align-items:center; gap:6px}
.cal-legend i.cal-chip{width:22px; height:11px; padding:0; margin:0}

/* the month grid */
.cal-nav{display:inline-flex; align-items:center; gap:6px}
.cal-nav b{font-size:14px; min-width:150px; text-align:center}
.cal-btn{font-family:"JetBrains Mono",monospace; font-size:13px; padding:4px 10px; border-radius:var(--r);
         background:var(--sunk); border:1px solid var(--line); color:var(--ink-2); cursor:pointer}
.cal-btn:hover{color:var(--ink); background:var(--bg)}
.cal-btn.cal-today{font-size:11.5px; letter-spacing:.04em}
.cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; background:var(--line);
          border:1px solid var(--line); border-radius:8px; overflow:hidden}
.cal-wd{background:var(--panel); padding:6px 8px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
        letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cal-cell{background:var(--bg); min-height:96px; padding:6px 6px 8px; display:flex; flex-direction:column; gap:4px;
          transition:background .1s ease}
.cal-cell.wk{background:var(--panel)}
.cal-cell.out .cal-num{color:var(--ink-3)}           /* a neighbouring month's day: labelled, not dimmed */
.cal-num em{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-left:3px}
.cal-cell.has{cursor:pointer}
.cal-cell.has:hover{background:var(--sunk)}
.cal-cell.sel{background:var(--sunk); box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal-num{display:flex; justify-content:space-between; align-items:baseline; font-family:"JetBrains Mono",monospace;
         font-size:12px; color:var(--ink-2)}
.cal-num span{font-size:10.5px; color:var(--ink-3)}
.cal-cell.today .cal-num{color:var(--accent); font-weight:700}
.cal-chips{display:flex; flex-direction:column; gap:3px; min-width:0}
.cal-chip{display:flex; align-items:baseline; gap:5px; min-width:0; padding:2px 6px; border-radius:4px;
          font-family:"JetBrains Mono",monospace; font-size:10.5px; line-height:1.35; text-align:left; cursor:pointer}
.cal-chip.nolink{cursor:default}
.cal-chip b{font-weight:700; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-chip span{font-size:9.5px; opacity:.8; white-space:nowrap; margin-left:auto}
.cal-chip:hover{filter:brightness(1.12)}
.cal-more{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-3); padding:1px 6px}
.cal-hint{font-size:12px; color:var(--ink-3); margin:12px 2px}
.cal-daypanel{margin-top:18px}
.cal-daypanel .cal-day{padding-top:6px}
.cal-close{margin-left:auto; padding:1px 8px}
@media (max-width:820px){
  .cal-cell{min-height:64px; padding:4px}
  .cal-chip span{display:none}
  .cal-nav b{min-width:120px}
}
.det-head .sub b{color:var(--ink-2); font-weight:600}

/* About: question and answer, set for reading rather than scanning */
.faq{max-width:760px; margin-top:4px}
.qa{padding:18px 0; border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:-.01em}
.qa p{margin:0; font-size:14px; line-height:1.62; color:var(--ink-2)}
.qa p b{color:var(--ink); font-weight:600}
.qa p i{font-style:italic}

/* the About page's sections: one rhythm for all of them */
.blk{max-width:760px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line-2)}
.blk h2{margin:6px 0 4px; font-size:19px; font-weight:700; letter-spacing:-.018em}
.blk > .sub{margin-bottom:18px}
.blk .note{margin:12px 0 0; font-size:12px; line-height:1.55; color:var(--ink-3)}

/* the pipeline diagram */
.dg{margin:4px 0 22px}
.dg svg{width:100%; height:auto; overflow:visible}
.dg-n rect{fill:var(--sunk); stroke:var(--line-2); stroke-width:1}
.dg-n text, .dg-g text{font-family:Manrope,system-ui,sans-serif; font-size:13px; font-weight:600;
                       fill:var(--ink-2); text-anchor:middle}
.dg-g rect{fill:none; stroke:var(--ink-2); stroke-width:1.5}
.dg-g text{fill:var(--ink)}
.dg-a{stroke:var(--line-2); stroke-width:1.5; fill:none}
.dg-a.dash{stroke-dasharray:4 3}
.dg marker path{fill:var(--line-2)}
.dg-ok, .dg-no{font-family:Manrope,system-ui,sans-serif; font-size:12px; font-weight:600}
.dg-ok{fill:var(--ok)} .dg-no{fill:var(--ink-3)}
.dg figcaption{margin-top:10px; font-size:12px; line-height:1.55; color:var(--ink-3)}

/* Method: numbered, spacious, each step titled. */
ol.meth{margin:0; padding:0; list-style:none; counter-reset:meth}
ol.meth li{position:relative; padding:0 0 18px 40px; counter-increment:meth}
ol.meth li::before{content:counter(meth); position:absolute; left:0; top:1px; width:24px; height:24px;
                 display:flex; align-items:center; justify-content:center; border-radius:50%;
                 background:var(--sunk); border:1px solid var(--line-2); color:var(--ink-3);
                 font-family:"JetBrains Mono",monospace; font-size:11px}
ol.meth li h4{margin:0 0 4px; font-size:14px; font-weight:700; letter-spacing:-.005em}
ol.meth li p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
ol.meth li p b{color:var(--ink); font-weight:600}

/* coverage and cadence */
.covt{width:100%; border-collapse:collapse; font-size:13px}
.covt th{text-align:left; padding:0 14px 8px 0; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
         color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--line-2)}
.covt td{padding:10px 14px 10px 0; vertical-align:top; line-height:1.5; color:var(--ink-2);
         border-bottom:1px solid var(--line)}
.covt tr td:first-child{color:var(--ink); font-weight:600}
.covt tr:last-child td{border-bottom:0}

/* the roadmap */
ul.road{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
ul.road li{position:relative; padding-left:18px; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
ul.road li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%;
                   background:var(--accent)}
ul.road li b{color:var(--ink); font-weight:600}

/* References */
.refs > .sub{margin-bottom:12px}
.refs ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.refs a{display:block; font-size:12.5px; line-height:1.55; color:var(--ink-3); text-decoration:none}
.refs a:hover{text-decoration:underline; text-underline-offset:2px}
.refs a span{font-family:"JetBrains Mono",monospace; color:var(--accent); margin-right:6px}
.refs a:hover{color:var(--ink-2)}
.refs a:hover span{text-decoration:underline}
/* an inline citation inside an answer */
a.cit{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--accent); vertical-align:super;
      margin-left:1px; text-decoration:none}
a.cit:hover{text-decoration:underline}

/* the disclosure footer - quiet, on every page */
.foot{border-top:1px solid var(--line); background:var(--panel); padding:26px 28px 34px; margin-top:40px}
.foot-in{max-width:1180px; display:flex; flex-direction:column; gap:8px}
.foot-mark{font-family:"Instrument Sans",Manrope,system-ui,sans-serif; font-weight:700; font-size:12.5px;
           text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2)}
.foot-src{margin:0; font-size:11.5px; line-height:1.6; color:var(--ink-3); max-width:760px}
.foot-cr{margin:6px 0 0; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em;
         text-transform:uppercase; color:var(--ink-3)}
@media (max-width:820px){ .foot{padding:22px 14px 28px} }

/* reasons list */
.reason{display:grid; grid-template-columns:1fr 56px; gap:14px; align-items:baseline;
        padding:9px 8px; border-bottom:1px solid var(--line)}
.reason:hover{background:var(--sunk)}
.reason span{font-size:13.2px; color:var(--ink-2)}
.reason b{font-family:"JetBrains Mono",monospace; font-size:12.5px; text-align:right; font-weight:500}

.empty{color:var(--ink-3); font-size:13.5px; padding:34px 8px}
.skel{height:13px; background:var(--sunk); border-radius:3px; animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ── FUNDAMENTALS GRID ──────────────────────────────────────────────────────────────────────────────────
   Notion-flat: no cell borders, one hairline under the header, subtotals carry the weight. Numbers are
   tabular-figure aligned so a column reads as a column. */
.fg-title { font-size:15px; font-weight:600; margin:26px 0 8px; color:var(--ink); }
.fg-title span { font-weight:400; color:var(--ink-3); font-size:13px; margin-left:6px; }
/* full height (no inner vertical scroll) — each BS/IS/CF tab is short. Only the YEARS scroll horizontally, and the
   table's OWN bottom bar is hidden: the visible bar lives ABOVE the table (.fg-topscroll) and is synced in JS. */
.fg-wrap { overflow-x:auto; overflow-y:hidden; border:1px solid var(--line);
           border-radius:var(--r); background:var(--panel); scrollbar-width:none; }
.fg-wrap::-webkit-scrollbar { height:0; display:none; }
.fg-topscroll { overflow-x:auto; overflow-y:hidden; margin-bottom:3px;
                scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.fg-topscroll::-webkit-scrollbar { height:9px; }
.fg-topscroll::-webkit-scrollbar-track { background:transparent; }
.fg-topscroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:6px; border:2px solid var(--bg); }
.fg-topscroll::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }
#fg-topscroll-inner { height:1px; }
table.fg { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
/* FROZEN: header row stays on top (vertical scroll), first column stays on the left (horizontal scroll) */
table.fg thead th { position:sticky; top:0; z-index:2; background:var(--panel); }
table.fg tbody th, table.fg .fg-lbl { position:sticky; left:0; z-index:1; background:var(--panel); }
table.fg thead th.fg-lbl { z-index:3; }                                   /* top-left corner above both */
table.fg tr.fg-sub th { background:var(--sunk); }                         /* subtotal keeps its band when frozen */
table.fg th, table.fg td { padding:6px 12px; text-align:left; vertical-align:top; }
table.fg td.fg-n, table.fg thead th.fg-n { white-space:nowrap; }   /* numbers never wrap; names may */
table.fg thead th { position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line-2);
                    font-weight:500; color:var(--ink-2); font-size:12px; }
table.fg thead th span { display:block; font-size:10px; color:var(--ink-3); font-weight:400; }
table.fg thead th.fg-unver { color:var(--ink-3); }
table.fg thead th.fg-unver::after { content:"·"; color:var(--manual); margin-left:3px; }
/* line-item column: fixed (draggable) width via --namecol; names WRAP to it, with room before the numbers */
.fg-lbl, table.fg tbody th { white-space:normal; width:var(--namecol,300px); min-width:var(--namecol,300px);
                             max-width:var(--namecol,300px); padding-right:26px; line-height:1.35; overflow-wrap:anywhere; }
/* draggable divider on the right edge of the name column */
.fg-resize { position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; z-index:4; }
.fg-resize:hover, .fg-resize:active { background:var(--accent); opacity:.4; }
/* cash-flow line names are very wordy → a touch smaller */
.fg-cf-form tbody th, .fg-cf-form .fg-lbl { font-size:11.5px; line-height:1.28; }
.fg-n { text-align:right !important; font-variant-numeric:tabular-nums; font-size:12px; }
table.fg tbody th { font-weight:400; color:var(--ink); }
table.fg tbody tr:hover { background:var(--sunk); }
/* summary / subtotal lines — bold + a soft band so they read as the totals they are. The NAME needs a higher-
   specificity rule to beat the frozen-column `table.fg tbody th{font-weight:400}`, else only the values go bold. */
tr.fg-sub th, tr.fg-sub td { font-weight:700; border-top:1px solid var(--line-2); background:var(--sunk); }
table.fg tbody tr.fg-sub th { font-weight:700; color:var(--ink); }
tr.fg-sub:hover th, tr.fg-sub:hover td { background:var(--line); }
tr.fg-child th { padding-left:28px; }
.fg-derived { color:var(--ink-3); font-size:9px; font-weight:500; }
/* cash-flow 2nd-level headers (receipts / payments total) — italic, quieter */
tr.fg-cf2 th, tr.fg-cf2 td { font-style:italic; color:var(--ink-2); }
/* big form sections (Balance Sheet / Income Statement / Cash Flow) — a clear rule + space above each */
tr.fg-form td { padding:20px 12px 6px; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
                color:var(--ink-2); font-weight:600; border-top:2px solid var(--line-2); }
tr.fg-form:first-child td { border-top:none; padding-top:8px; }

/* ── issuer detail: header + RSBU/IFRS segmented toggle ─────────────────────────────────────────── */
.det-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:2px 0 16px; }
.det-head .title{ margin:0; } .det-head .sub{ margin:2px 0 0; }
.seg-wrap{ display:inline-flex; flex:0 0 auto; background:var(--sunk); border:1px solid var(--line);
           border-radius:8px; padding:3px; }
.seg{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.04em; padding:5px 16px;
      border-radius:6px; color:var(--ink-3); }
.seg.on{ background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.seg[disabled]{ opacity:.38; cursor:default; }

/* grid header: year / period / publish-date, stacked and quiet (Notion-calm, no vertical rules) */
/* the year line: the absent-form mark and the year on ONE row, so the heading stays three lines tall */
table.fg thead th .fg-yrline{ display:block; white-space:nowrap; }
table.fg thead th .fg-yrline .fg-yr{ display:inline; }
/* ...AND THE WARNING SITS BESIDE THE YEAR, not above it. `thead th span{display:block}` above catches every
   span in the header, and only .fg-yr was put back inline — so the ⚠ that marks a period with no cash flow
   became a block of its own and pushed a blank line above the year on EVERY column, whether it had a note
   or not. It belongs on the same line, to the left of the year, and costs no height. */
table.fg thead th .fg-yrline .fg-note{ display:inline; }
table.fg thead th .fg-yr{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); }
table.fg thead th .fg-per{ display:block; font-size:10px; font-weight:500; color:var(--ink-3); }
table.fg thead th .fg-dt{ display:block; font-size:9px; font-weight:400; color:var(--ink-3); opacity:.75;
                          font-family:"JetBrains Mono",monospace; }
/* jump-to-source: the publish date IS the link to the original filing PDF — no icon, no extra column chrome.
   Only linked where the document is actually on disk, so on a host without the raw tree it stays plain text. */
table.fg thead th a.fg-doc{ text-decoration:none; cursor:pointer; transition:color .12s, opacity .12s; }
table.fg thead th a.fg-doc:hover{ color:var(--accent); opacity:1;
                                  text-decoration:underline; text-underline-offset:2px; }
table.fg th, table.fg td{ border-right:none; }               /* keep it clean — no column dividers between years */
.fg-wrap{ box-shadow:0 1px 2px rgba(0,0,0,.04); }

/* intake line: loaded / registered in the last week — the pipeline's own pulse, for the person running it */
.stat-intake b i{font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-left:6px}

/* ── sidebar option groups: data quality, language, theme ──────────────────────────────────────────────────────── */
.theme, .optgrp{ margin-top:20px; }
.theme .lbl, .optgrp .lbl{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em;
             text-transform:uppercase; color:var(--ink-3); padding:0 10px 6px; }
.theme-opts, .optgrp-opts{ display:flex; flex-direction:column; gap:1px; }
.theme-opts button, .optgrp-opts button{ text-align:left; font-size:13px; padding:6px 10px;
             border-radius:var(--r); color:var(--ink-2); }
.theme-opts button:hover, .optgrp-opts button:hover{ background:var(--sunk); }
.theme-opts button[aria-pressed="true"], .optgrp-opts button[aria-pressed="true"]{
             background:var(--sunk); color:var(--ink); font-weight:600; }

/* detail controls row: the segmented switches + export, wrapping on small screens */
.det-ctrls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:0 0 auto; }
.det-id{ min-width:0; }
/* ticker as a boxed chip BEFORE the entity name — [APRI] Apri PJSC. Bordered and accent-inked so it reads as
   an identifier (the one thing you scan for), while the legal form stays a quiet gray chip after the name. */
.title .tick{ display:inline-block; margin-right:11px; padding:3px 9px; border-radius:6px;
              background:var(--sunk); border:1px solid var(--line-2); color:var(--ink-2);
              font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; letter-spacing:.07em;
              text-transform:uppercase; vertical-align:middle; position:relative; top:-1px; }

/* the verified gate, as a mark beside the name rather than a caption */
.title .vq-mark{ display:inline-block; margin-left:10px; color:var(--ok); font-size:16px; font-weight:700; vertical-align:middle; }

/* Forecast teaser — the one button that promises something: accent-tinted, with a small "soon" tag */
/* Forecast teaser: the same family as the segmented switches beside it (mono, 12px, .04em, ink-3 on sunk),
   with the chart glyph in the accent and a small SOON tag in the same accent - one voice across the row */
.fc-btn{ display:inline-flex; align-items:center; gap:7px; padding:0 12px 0 11px; border-radius:8px; height:34px;
         background:var(--sunk); border:1px solid var(--line); color:var(--ink-3);
         font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.04em; font-weight:400; }
.fc-btn svg{ color:var(--accent); }
.fc-btn i{ font-style:normal; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
           padding:2px 5px; border-radius:4px; background:var(--accent); color:var(--bg); opacity:.85; }
.fc-btn:hover{ color:var(--ink); background:var(--panel); box-shadow:0 1px 2px rgba(0,0,0,.10); }

/* the report form */
.modal-scrim{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ width:min(520px, 100%); background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:22px 24px;
        box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:12px; }
.modal h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.modal .sub{ margin:0 0 4px; }
.modal label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.modal label small{ color:var(--ink-3); font-weight:400; }
.modal .frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal select, .modal input, .modal textarea{ font:inherit; font-size:13.5px; color:var(--ink); background:var(--sunk);
        border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; outline:none; }
.modal select:focus, .modal input:focus, .modal textarea:focus{ border-color:var(--accent); }
.modal textarea{ resize:vertical; min-height:88px; }
.fbtns{ display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.btn-main{ background:var(--accent); color:var(--bg); font-weight:600; padding:8px 16px; border-radius:8px; }
.btn-quiet{ background:var(--sunk); color:var(--ink-2); padding:8px 14px; border-radius:8px; border:1px solid var(--line); }
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 12px); z-index:90; max-width:min(560px, 92vw);
        background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:13px;
        box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; transition:opacity .2s, transform .2s; }
.toast.on{ opacity:1; transform:translate(-50%, 0); }

/* legal form as a quiet grayish chip after the entity name */
.title .form-chip{ display:inline-block; margin-left:10px; padding:2px 8px; border-radius:5px;
                   background:var(--sunk); color:var(--ink-3); font-family:"JetBrains Mono",monospace;
                   font-size:11px; font-weight:600; letter-spacing:.03em; vertical-align:middle; }

/* the same chip in green when the verified-only gate is what is shaping the page */
.title .form-chip.vq{ background:var(--ok-bg); color:var(--ok); }

/* export dropdown */
.exp{ position:relative; }
.exp-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
          background:var(--sunk); border:1px solid var(--line); border-radius:8px; color:var(--ink-2); }
.exp-btn:hover{ color:var(--ink); background:var(--line); }
/* unit under the form name ("M RUB") — plain caption, no box */
.fg-unit{ display:block; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:400;
          color:var(--ink-3); margin-top:2px; text-transform:none; letter-spacing:0; }
.exp-menu{ position:absolute; right:0; top:calc(100% + 4px); min-width:130px; padding:4px; z-index:30;
           background:var(--panel); border:1px solid var(--line-2); border-radius:8px;
           box-shadow:0 8px 24px rgba(0,0,0,.16); }
.exp-menu[hidden]{ display:none; }
.exp-menu button{ display:block; width:100%; text-align:left; padding:7px 12px; border-radius:6px;
                  font-size:13px; color:var(--ink-2); }
.exp-menu button:hover{ background:var(--sunk); color:var(--ink); }

/* ── comparing periods ────────────────────────────────────────────────────────────────────────────
   The bar sits between the header and the grid, at the grid's own left edge, and is quiet: it is a
   statement of what you are looking at, not a control panel. It only exists while a pick exists. */
.cmp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px;
      padding:9px 12px; background:var(--sunk); border:1px solid var(--line-2); border-radius:9px }
.cmp-lbl{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600 }
.cmp-chips{ display:flex; gap:6px; flex-wrap:wrap }
.cmp-chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600;
           color:var(--ink); background:var(--panel); border:1px solid var(--accent); border-radius:6px;
           padding:3px 7px 3px 9px; cursor:pointer }
.cmp-chip i{ font-style:normal; font-size:13px; line-height:1; color:var(--ink-3) }
.cmp-chip:hover i{ color:var(--warn) }
.cmp-addwrap{ position:relative }
.cmp-add, .cmp-clear{ font:inherit; font-size:12px; color:var(--ink-2); background:none;
                      border:1px dashed var(--line-2); border-radius:6px; padding:3px 9px; cursor:pointer }
.cmp-clear{ border-style:solid; margin-left:auto }
.cmp-add:hover, .cmp-clear:hover{ color:var(--ink); border-color:var(--ink-3) }
.cmp-menu{ position:absolute; z-index:40; top:calc(100% + 5px); left:0; min-width:130px; max-height:264px;
           overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:8px;
           box-shadow:0 10px 28px rgba(0,0,0,.28); padding:4px }
.cmp-menu button{ display:block; width:100%; text-align:left; font:inherit; font-size:12.5px; color:var(--ink-2);
                  background:none; border:0; border-radius:5px; padding:5px 9px; cursor:pointer }
.cmp-menu button:hover{ background:var(--sunk); color:var(--ink) }
.cmp-note{ font-size:12px; color:var(--ink-3) }

/* a period heading is a handle for picking - say so on hover, and light the ones that are picked */
.fg thead th.fg-pick{ cursor:pointer }
.fg thead th.fg-pick:hover{ background:var(--sunk) }
.fg thead th.fg-pick.on{ box-shadow:inset 0 -2px 0 var(--accent) }
.fg thead th.fg-pick.on .fg-yr{ color:var(--accent) }

/* the computed columns: set apart from the filed figures by a rule, never mistaken for them */
.fg th.fg-d, .fg td.fg-d{ border-left:1px solid var(--line-2); background:var(--sunk) }
.fg td.fg-d{ font-variant-numeric:tabular-nums }
.fg td.fg-d.up{ color:var(--ok) }
.fg td.fg-d.dn{ color:var(--warn) }
.fg td.fg-d.nm{ color:var(--ink-3) }
.fg th.fg-d .fg-dt{ color:var(--ink-3); font-weight:400 }

/* a period verified by an evidenced exemption rather than by its own arithmetic */
/* the absent-form mark: inline, ahead of the year, and never on a line of its own — it used to sit after
   the year with a paragraph of evidence in its tooltip, which pushed the heading onto two rows. */
.fg-note{font-size:.72em;opacity:.6;cursor:help;vertical-align:baseline;margin-right:2px;line-height:1}
.fg-note:hover{opacity:1}

/* ── the issuer list on a phone ───────────────────────────────────────────────────────────────────
   The meter column was a fixed 250px and would not give, so the name column collapsed and the ticker
   chip landed on top of the IFRS / RSBU labels. Here the meters take a share of the width rather than
   a fixed slice, the ticker and name keep the left, and each standard's label sits to the RIGHT of
   its own bar — so the two lines end on the same word and the eye reads down them. */
@media (max-width:820px){
  .row{grid-template-columns:minmax(0,1fr) minmax(0,46%) 14px 18px; gap:8px; padding:9px 4px}
  .row .nm{gap:7px}
  .row .nm .tk{min-width:46px; font-size:9.5px; padding:2px 5px}
  .row .nm .tk-none{min-width:0; padding:0}
  .row .nm b{font-size:12.6px}
  .row .nm .lf{display:none}          /* the legal form is a desktop nicety; ticker and name come first */
  .row .state{font-size:12px}
  .dual{gap:3px}
  /* count · bar · label, left to right. The DOM order is label · count · bar, so the label is moved
     rather than re-rendered — one markup, two readings. */
  .ml{grid-template-columns:auto minmax(24px,1fr) auto; gap:6px}
  .ml > b{order:1; font-size:9.5px}
  .ml > .meter{order:2}
  .ml > i{order:3; font-size:8px; letter-spacing:.06em; min-width:27px; text-align:right}
}

/* ── the reader's own favourites ──────────────────────────────────────────────────────────────────
   Ghosted until the row is under the cursor, so a list of 559 names is not a field of stars; solid
   gold once chosen. On touch there is no hover to reveal it, so it sits a shade darker there. */
.fav{font-size:13px; line-height:1; text-align:center; color:var(--line-2); cursor:pointer;
     user-select:none; transition:color .12s ease, transform .12s ease}
.row:hover .fav{color:var(--ink-3)}
.fav:hover{color:#E0A800; transform:scale(1.18)}
.fav.on, .row:hover .fav.on{color:#E0A800}
.fav:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (hover:none){ .fav{color:var(--ink-3)} }
/* on the issuer's own page the star rides with the title */
h1.title .fav{font-size:15px; margin-left:9px; vertical-align:middle; color:var(--ink-3)}
h1.title .fav.on{color:#E0A800}

/* refresh, and the hint under a settings block */
.rfr svg{transition:transform .2s ease}
.rfr:hover svg{transform:rotate(-40deg)}
.rfr.spin svg{animation:rfr-spin .8s linear infinite}
.rfr.spin{pointer-events:none; opacity:.7}
@keyframes rfr-spin{to{transform:rotate(360deg)}}
.opt-hint{margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-3)}

/* A subtotal's working, shown on the figure being hovered. The dashed rule sits on the LEFT EDGE of
   each contributing cell, in that column only - a whole-row highlight would say "these lines" when
   what is meant is "these numbers". */
.fg td.roll-part{box-shadow:inset 2px 0 0 var(--accent); background:var(--sunk)}
.fg td.roll-sum{background:var(--sunk); outline:1px solid var(--accent); outline-offset:-1px}
.fg tbody tr[data-roll] td[data-k]{cursor:help}

/* the subtotal panel: names quiet and small, figures in a column with their digits aligned */
/* A READING AID, NOT A DOCUMENT: small type and tight rows. On the LIGHT theme the panel sat white on
   white, so it is given its own slightly grey ground to read as an overlay rather than as more of the page
   (`--panel` is the page's own surface; `--raise` steps off it). */
#roll-pop{position:fixed; z-index:60; min-width:190px; max-width:276px; padding:6px 8px;
          background:var(--raise, var(--panel)); border:1px solid var(--line-2); border-radius:8px;
          box-shadow:0 10px 26px rgba(0,0,0,.30); pointer-events:none}
#roll-pop[hidden]{display:none}
.rp-r{display:flex; align-items:baseline; justify-content:space-between; gap:11px; padding:1px 0}
.rp-r span{font-size:10px; line-height:1.35; color:var(--ink-3); overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap}
.rp-r b{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; color:var(--ink-2);
        font-variant-numeric:tabular-nums; white-space:nowrap}
/* the one line a tied subtotal earns: the figure and a tick */
.rp-tied span, .rp-tied b{color:var(--ok); font-weight:700}
.rp-sum{margin-top:4px; padding-top:4px; border-top:1px solid var(--line-2)}
.rp-sum span, .rp-sum b{color:var(--ink); font-weight:600}
.rp-tot span, .rp-tot b{color:var(--ink-3)}
.rp-diff span, .rp-diff b{color:var(--warn); font-weight:600}
.rp-ok{text-align:right; font-size:13px; line-height:1.2; color:var(--ok); margin-top:2px}
.rp-note{font-size:10.5px; line-height:1.4; color:var(--ink-3); margin-bottom:5px;
         padding-bottom:5px; border-bottom:1px solid var(--line)}

/* the statutory line number, when it is asked for: quiet, monospaced, out of the name's way */
.fg tbody th .fg-code{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10.5px;
                      color:var(--ink-3); margin-right:8px; letter-spacing:.02em}
/* a line the filer added under a coded subtotal: «4110·1». Dimmer than a real OKUD code, because the form
   does not print it - it says which subtotal the row adds into, not a number off the page. */
.fg tbody th .fg-own{opacity:.62; cursor:help}
/* the fold control on a receipts/payments total: quiet until the row is hovered, and it never takes space
   from the caption - the name wraps as before and this sits after it. */
/* ...and it is the SAME control on every row that has one: the glyph does not inherit the cell's weight
   or slant, so an italic header and a bold one carry an identical triangle. */
.fg tbody th .fg-disc{margin-left:6px; padding:0 4px; border:0; background:none; cursor:pointer;
                      color:var(--ink-3); opacity:.45; font-size:10px; line-height:1; vertical-align:middle;
                      font-weight:400; font-style:normal; transition:opacity .12s}
.fg tbody tr:hover th .fg-disc, .fg tbody th .fg-disc[aria-expanded="true"]{opacity:.9}
.fg tbody th .fg-disc:hover{color:var(--ink-1); opacity:1}

/* the registry's verdicts for one period, as the reviewer's matrix lists them */
.chk-list{display:flex; flex-direction:column; margin-top:10px}
.chk-r{display:grid; grid-template-columns:26px 1fr 18px; align-items:baseline; gap:10px;
       padding:5px 0; border-bottom:1px solid var(--line)}
.chk-r:last-child{border-bottom:0}
.chk-r span{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-3)}
.chk-r i{font-style:normal; font-size:12px; line-height:1.45; color:var(--ink-2)}
.chk-r b{font-size:12px; text-align:right; line-height:1}
.chk-r b.ok{color:var(--ok)} .chk-r b.bad{color:var(--warn)} .chk-r b.na{color:var(--ink-3)}

/* A MEMBER WHOSE CELL IS EMPTY. It belongs to the sum and contributes nothing, so it is marked but not
   coloured like a figure that moved the total — otherwise a blank row reads as excluded from a subtotal
   it is part of. */
.fg td.roll-part-nil{outline:1px dashed var(--line-2); outline-offset:-2px}

/* the tolerated gap: shown, quietly */
.rp-r.rp-round span, .rp-r.rp-round b{color:var(--ink-3); font-size:9px}

/* the tolerated gap, inline beside the figure */
.rp-r b i.rp-round{font-style:normal; font-weight:500; font-size:9px; color:var(--ink-3); margin-right:3px}

/* the transcript arrives in stages: each one fades up once the question has finished typing */
.land-stage{ opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease }
.land-stage.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .land-stage{ opacity:1; transform:none; transition:none } }

/* the mark beside the wordmark. `currentColor` on an INLINE svg means one file serves light, dark and the
   machine phosphor — and it sits on the cap height of the wordmark, not its baseline, or it floats. */
.mark{ align-items:center; gap:9px }
.mark-svg{ color:var(--ink); flex:0 0 auto; display:block }
:root[data-machine="1"] .mark-svg{ color:var(--accent) }

/* ALIGNMENT. The wordmark is uppercase with .14em tracking, so its optical centre sits above the box
   centre; centring the two boxes left the mark looking low. Nudged up a hair and given the tracking's
   worth of space, so the circle sits inside the cap height rather than under it. */
.mark{ align-items:center; gap:10px }
.mark-svg{ position:relative; top:-1px }

/* the inline chart: bars in the reading ink, losses in the warning colour, a hairline zero rule.
   Everything is a CSS variable, so the chart themes with the page instead of carrying its own palette. */
.chart{ width:100%; height:auto; margin:0 0 14px; display:block }
.chart .cb{ fill:var(--ink-2) }
.chart .cb-neg{ fill:var(--warn) }
.chart .cz{ stroke:var(--line-2); stroke-width:1 }
.chart .cx{ fill:var(--ink-3); font-size:9.5px; font-family:"JetBrains Mono",ui-monospace,monospace }
:root[data-machine="1"] .chart .cb{ fill:var(--ok) }

/* The painted logo as a tile. It carries its own ground, so it is given a rounded crop and a hairline
   edge — that reads as an app icon rather than as a picture someone forgot to cut out. No colour of ours
   touches it: it is the brand asset, shown as it is. */
/* The traced logo is a shape on transparency, not a tile, so it needs no rounding or edge - it simply
   sits next to the wordmark the way a drawn mark would. */
.mark-img{ flex:0 0 auto; display:block; height:32px; width:32px }   /* inline SVG: pin BOTH axes */
:root[data-machine="1"] .mark-img{ opacity:.95 }

/* ── request / response, two panes ─────────────────────────────────────────────────────────────────
   Equal columns: the call and what it returns carry the same weight, which is the whole argument of the
   section. They collapse to one column below 1000px, where two panes of monospace would each be too
   narrow to read a JSON line without wrapping. */
.rr{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px }
@media (max-width:1000px){ .rr{ grid-template-columns:1fr } }

.rr-pane{ border:1px solid var(--line-2); border-radius:10px; background:var(--sunk); overflow:hidden;
          display:flex; flex-direction:column; min-width:0 }
.rr-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 12px;
          border-bottom:1px solid var(--line-2) }
.rr-pick{ display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0 }

.rr-chip{ font:11.5px/1 ui-monospace,"JetBrains Mono",monospace; letter-spacing:.01em; padding:6px 9px;
          border:1px solid var(--line-2); border-radius:6px; background:transparent; color:var(--ink-3);
          cursor:pointer; white-space:nowrap }
.rr-chip:hover{ color:var(--ink-2) }
.rr-chip.on{ color:var(--ink); border-color:var(--ink-3); background:var(--bg) }

.rr-run{ font:11.5px/1 Manrope,system-ui,sans-serif; font-weight:600; letter-spacing:.02em;
         padding:7px 13px; border-radius:6px; border:1px solid transparent; background:var(--ink);
         color:var(--bg); cursor:pointer; white-space:nowrap }
.rr-run:hover{ opacity:.88 }

.rr-tabs{ display:flex; gap:2px; padding:0 12px; border-bottom:1px solid var(--line-2) }
.rr-tab{ font:12px/1 Manrope,system-ui,sans-serif; padding:10px 11px; background:transparent; border:0;
         border-bottom:2px solid transparent; color:var(--ink-3); cursor:pointer; margin-bottom:-1px }
.rr-tab:hover{ color:var(--ink-2) }
.rr-tab.on{ color:var(--ink); border-bottom-color:var(--ink) }

.rr-code,.rr-json{ margin:0; padding:14px 14px 16px; font:12px/1.65 ui-monospace,"JetBrains Mono",monospace;
                   overflow:auto; flex:1; color:var(--ink-2); min-height:300px }
/* The call WRAPS - it is one long URL and a sideways scrollbar to read it is absurd. The response does
   not: JSON indentation is structure, and wrapping it destroys the shape the pane exists to show. */
.rr-code{ white-space:pre-wrap; overflow-wrap:anywhere }
.rr-json{ white-space:pre }
.rr-json{ max-height:460px }
.rr-code{ color:var(--ink) }

.rr-lbl{ font:10.5px/1 ui-monospace,monospace; letter-spacing:.14em; color:var(--ink-3) }
.rr-ok{ font:10.5px/1 ui-monospace,monospace; letter-spacing:.04em; padding:4px 7px; border-radius:4px;
        background:color-mix(in srgb, var(--ok,#2E8B57) 16%, transparent); color:var(--ok,#2E8B57) }
.rr-ok.bad{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn) }
.rr-path{ font:11px/1 ui-monospace,monospace; color:var(--ink-3); flex:1; min-width:0;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rr-copy{ font:11px/1 Manrope,system-ui,sans-serif; padding:6px 9px; border-radius:6px;
          border:1px solid var(--line-2); background:transparent; color:var(--ink-3); cursor:pointer }
.rr-copy:hover{ color:var(--ink) }

/* In the agent version the panes take the phosphor palette like everything else. */
:root[data-machine="1"] .rr-code,
:root[data-machine="1"] .rr-json{ font-family:ui-monospace,"JetBrains Mono",monospace }

/* ── two columns: words on one side, evidence on the other ─────────────────────────────────────────
   The page is wide; a single narrow column down the left of it wastes the half of the screen where the
   proof belongs. Text takes the smaller share because prose has a reading measure and figures do not.
   Below 1000px it stacks - two 400px columns are worse than one 800px one for both halves.
   `.blk.blk-split` carries two classes deliberately: `.blk` sets max-width later in this file, and a
   single-class override would lose to it on source order. */
.blk.blk-split{ display:grid; grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);
                gap:40px; align-items:start }
.blk.blk-split > .split-l, .blk.blk-split > .split-r{ min-width:0 }
.blk.blk-split .sub{ margin-bottom:16px }
.blk.blk-split .bm-method{ margin-top:18px }
@media (max-width:1000px){ .blk.blk-split{ grid-template-columns:1fr; gap:22px } }


/* ── About: capability cards, forecast prose, chart captions ───────────────────────────────────────
   Four cards rather than four paragraphs, because each is a separate claim a reader may care about
   individually; prose would make them a wall to be skimmed. Three across at full width, two in the
   middle, one on a phone — the text in each is too long for a four-up. */
.capgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:20px }
@media (max-width:1320px){ .capgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:760px){ .capgrid{ grid-template-columns:1fr } }
.capcard{ border:1px solid var(--line-2); border-radius:10px; background:var(--sunk); padding:16px 17px }
.capcard b{ display:block; font-size:14px; letter-spacing:-.01em; margin-bottom:7px }
.capcard p{ margin:0; font-size:13px; line-height:1.62; color:var(--ink-2) }

.cap-lbl{ font:10.5px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
          color:var(--ink-3); margin:0 0 6px }
.cap-lbl + .chart{ margin-bottom:22px }

.fcp{ margin:0 0 15px; font-size:14px; line-height:1.68; color:var(--ink-2) }
.fcp:last-child{ margin-bottom:0 }
.fcp b{ color:var(--ink); font-weight:600 }


/* At full width the numbered method steps and the roadmap would run to 180 characters a line. */
.meth-wide{ max-width:88ch }
.road-wide{ max-width:88ch }

/* ── the method, standing up beside its own steps ──────────────────────────────────────────────── */
.methsplit{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr); gap:40px;
            align-items:start; margin-top:18px }
@media (max-width:1040px){ .methsplit{ grid-template-columns:1fr; gap:26px } }
/* The figure fills its column and sits at the TOP of it, level with the first step it illustrates -
   centred in a tall column it drifted half a screen below the text it belongs to. */
.dg-v{ margin:0; position:sticky; top:18px }
.dg-v svg{ width:100%; height:auto; display:block }
.dg-v figcaption{ margin-top:12px; font-size:11.5px; line-height:1.55; color:var(--ink-3) }
@media (max-width:1040px){ .dg-v{ position:static } }

/* ── the Forma schematic ───────────────────────────────────────────────────────────────────────────
   HTML, not SVG, so each box sizes itself around its own text and nothing can overflow in a language
   whose words are longer. The flow wraps to a column on a narrow screen and the arrows turn with it. */
.fcsplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start }
@media (max-width:1100px){ .fcsplit{ grid-template-columns:1fr; gap:26px } }

.fma{ margin:0 }
.fma-hdr{ font:10.5px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
          color:var(--ink-3); margin-bottom:12px }
.fma-flow{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap }
.fma-card{ flex:1 1 150px; min-width:0; border:1px solid var(--line-2); border-radius:9px;
           background:var(--sunk); padding:12px 13px }
.fma-card b{ display:block; font-size:13px; line-height:1.3; margin-bottom:5px; color:var(--ink) }
.fma-card span{ display:block; font:10.5px/1.45 ui-monospace,"JetBrains Mono",monospace; color:var(--ink-3) }

.fma-arr{ flex:0 0 24px; display:flex; align-items:center; justify-content:center }
.fma-arr svg{ width:24px; height:10px }
.fma-arr path{ stroke:var(--ink-3); stroke-width:1.4; fill:none }
.fma-arr path.hd{ fill:var(--ink-3); stroke:none }

/* the gate is the claim, so it is outlined in ink rather than hairline grey */
.fma-card.fma-gate{ background:var(--bg); border-color:var(--ink); border-width:1.5px }
.fma-card.fma-gate b{ color:var(--ink) }

/* our corpus enters below the model, dashed and in the OK colour: planned, not shipped */
.fma-under{ display:flex; flex-direction:column; align-items:flex-start; margin-top:0 }
.fma-up{ margin-left:44px; height:34px }
.fma-up svg{ width:10px; height:34px }
.fma-up path{ stroke:var(--ok); stroke-width:1.4; fill:none; stroke-dasharray:4 3 }
.fma-up path.hd{ fill:var(--ok); stroke:none; stroke-dasharray:none }
.fma-card.fma-ft{ flex:0 1 auto; background:transparent; border-style:dashed; border-color:var(--ok) }
.fma-card.fma-ft b{ color:var(--ok) }

.fma figcaption{ margin-top:14px; font-size:11.5px; line-height:1.55; color:var(--ink-3) }

@media (max-width:620px){
  .fma-flow{ flex-direction:column; align-items:stretch }
  .fma-arr{ flex:0 0 18px; height:18px }
  .fma-arr svg{ transform:rotate(90deg) }
}

/* The questions sat at .faq's own 760px while every section around them ran to the page width, so the
   page appeared to change its mind halfway down. Two columns at width keeps the measure readable without
   stranding the block on the left. */
.blk-split .faq{ max-width:none; margin-top:14px }
.blk-split .road{ margin-top:14px }

/* A limitation is not a feature, so the cards that hold them are quieter: no fill, just an outline. */
.capcard.capcard-lim{ background:transparent; border-style:dashed }
.capcard.capcard-lim b{ color:var(--ink-2) }

/* Caveat rows in the coverage table: same table, quieter voice. */
.covt tr.covt-n td{ color:var(--ink-3) }
.covt tr.covt-n td:first-child{ color:var(--ink-2) }

/* ── the hero's other half: how much there is ──────────────────────────────────────────────────── */
.hstats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end }
.hstat b{ display:block; font:600 34px/1.05 Manrope,system-ui,sans-serif; letter-spacing:-.03em;
          color:var(--ink); font-variant-numeric:tabular-nums }
.hstat span{ display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--ink-3) }
@media (max-width:620px){ .hstats{ grid-template-columns:1fr 1fr } .hstat b{ font-size:27px } }

/* ── three steps: connect, ask, or call one of the rest ────────────────────────────────────────── */
.step-b{ margin-bottom:18px }
.step-l{ display:flex; align-items:center; gap:8px; margin-bottom:9px;
         font:10.5px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
         color:var(--ink-3) }
.step-l i{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
           border-radius:50%; border:1px solid var(--line-2); font-style:normal; font-size:10px;
           color:var(--ink-2) }
.step-code{ display:block; font:11.5px/1.5 ui-monospace,"JetBrains Mono",monospace; color:var(--ink);
            background:var(--sunk); border:1px solid var(--line-2); border-radius:7px; padding:9px 11px;
            overflow-wrap:anywhere }
.tools.step-b{ margin-top:0; padding-top:0; border-top:0 }

/* ── depth per form: the benchmark that can be checked ─────────────────────────────────────────────
   Two lengths on one track: the solid bar is the median statement, the hairline behind it the deepest
   one in the corpus. Same scale across all three forms, so the cash flow's reach is visible rather than
   asserted. */
.bqs{ display:flex; flex-direction:column; gap:18px }
.bq-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px }
.bq-h b{ font-size:13.5px; font-weight:600; color:var(--ink) }
.bq-h span{ font:11.5px/1 ui-monospace,"JetBrains Mono",monospace; color:var(--ink-2) }
.bq-bar{ position:relative; height:10px; border-radius:5px; background:var(--sunk);
         border:1px solid var(--line-2); overflow:hidden }
.bq-bar i{ position:absolute; inset:0 auto 0 0; background:var(--ink-2); border-radius:5px }
.bq-bar u{ position:absolute; inset:0 auto 0 0; border-right:2px solid var(--ink-3); text-decoration:none }
.bq-f{ margin-top:6px; font:11px/1.5 ui-monospace,monospace; color:var(--ink-3) }


/* ── the example call, folded ──────────────────────────────────────────────────────────────────── */
.rrwrap{ margin-top:20px; border-top:1px solid var(--line-2); padding-top:16px }
.rrwrap > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
                   font:12.5px/1 Manrope,system-ui,sans-serif; color:var(--ink-2);
                   border:1px solid var(--line-2); border-radius:7px; padding:9px 13px;
                   background:var(--sunk) }
.rrwrap > summary::-webkit-details-marker{ display:none }
.rrwrap > summary::before{ content:"+"; font:12px/1 ui-monospace,monospace; color:var(--ink-3) }
.rrwrap[open] > summary::before{ content:"\2212" }
.rrwrap > summary:hover{ color:var(--ink) }
.rrwrap[open] > summary{ margin-bottom:4px }

/* the six tool names, inline: enough to know what to ask for, not a reference table */
.toolsline{ margin:14px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
            font-size:12.5px; color:var(--ink-3) }
.toolsline span{ font:10.5px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase }
.toolsline code{ font:11.5px/1.5 ui-monospace,"JetBrains Mono",monospace; color:var(--ink-2);
                 background:var(--sunk); border:1px solid var(--line-2); border-radius:5px;
                 padding:3px 7px }

/* the answer's step marker sits above the tabs in the right column */
.step-l-r{ margin-bottom:8px }   /* the answer starts right under its number, level with step 1 */

/* The question strip sits with the step label it belongs to, then a clear gap before the question
   itself - so the row reads as "what kind of question", not as another control bar. */
.ltabs.ltabs-q{ margin:0 0 18px }

/* ── client picker on step 1 ───────────────────────────────────────────────────────────────────── */
.ctabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px }
.ctab{ font:11.5px/1 Manrope,system-ui,sans-serif; padding:6px 10px; border-radius:99px;
       border:1px solid transparent; background:transparent; color:var(--ink-3); cursor:pointer }
.ctab:hover{ color:var(--ink) }
.ctab.on{ color:var(--ink); border-color:var(--line-2); background:var(--sunk) }
.step-code{ white-space:pre-wrap }
.cnote{ margin:8px 2px 0; font-size:11.5px; line-height:1.5; color:var(--ink-3) }