/* ============================================================================================
   core.css — the stox design system, lifted out of book.html on 18 Aug 2026.

   WHY: KH asked for the single page to become a portal — smaller, comprehensible pages anchored
   in one header nav. The weight is not here (markup 14 kB, CSS 67 kB, **JS 260 kB**), but every
   page of that portal has to look like the same product, and a design system that lives inside
   one page cannot be shared by six. This file is step one of the agreed order: pull the shared
   core out FIRST, with no change of behavior, then peel views off one at a time, and touch the
   portfolio (the money path) LAST.

   RULE: this file is shared. Anything here must be true for every page in the portal. A rule that
   is only true of one view stays in that view's own <style> block — a shared file that quietly
   carries view-specific rules is how design systems rot.

   Verified on extraction by a full-page pixel comparison of book.html before and after: identical.
   ============================================================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0c0b07; --panel:#15130d; --panel-2:#1c1910; --raise:#252013; --line:rgba(201,162,74,.14);
  --ink:#f4f1e8; --dim:#d2cbb9; --mute:#9d947d;
  --gold:#c9a24a; --gold-soft:#d9bd84; --bronze:#8a6d34; --graphite:#6b6558;
  --gold-tex:url("assets/gold-v5-polished.png") center/cover;
  --gain:oklch(0.73 0.15 150); --loss:oklch(0.61 0.20 27);
  --gain-bg:oklch(0.73 0.15 150 / .14); --loss-bg:oklch(0.61 0.20 27 / .16);
}
/* NE height:100%. Bylo tu měsíce a utrhávalo to horní lištu — změřeno 18. 8. v prohlížeči,
   ne odhadnuto: `.bar` je `position:sticky`, a sticky prvek se drží jen v rámci boxu svého
   RODIČE. S `height:100%` měl <body> box vysoký přesně jedno okno (835 px), zatímco dokument
   měřil 8 985 px — takže lišta držela nahoře prvních ~735 px scrollu a pak ujela s obsahem.
   Vypadalo to jako vada sticky, a byla to vada výšky rodiče. `min-height` drží původní záměr
   (stránka nikdy kratší než okno) a nechá <body> růst s obsahem. Pozadí to nepotřebuje vůbec,
   protože gradient je `fixed`. Pozor: `index.html` má `height:100%` schválně — přední dveře
   jsou mřížka na jedno okno a tam je to správně. */
html,body{min-height:100%;}
body{
  background:radial-gradient(125% 90% at 50% -15%, #19160d 0%, #0c0b07 58%) fixed,#0c0b07;
  color:var(--ink);font-family:'Titillium Web',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4;
}
.mono{font-family:'DM Mono',monospace;}
.wrap{max-width:1260px;margin:0 auto;padding:0 clamp(22px,4.5vw,60px);}
.pos{color:var(--gain);} .neg{color:var(--loss);}
.metal{background-color:var(--gold);background-image:var(--gold-tex);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:30;background:rgba(12,11,7,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
.bar .wrap{display:flex;align-items:center;gap:34px;height:70px;}
.logo{display:flex;align-items:center;gap:15px;cursor:pointer;text-decoration:none;transition:opacity .2s;}
.logo:hover{opacity:.82;}
.khmark{height:26px;width:auto;display:block;flex:0 0 auto;}
.khmark path{fill:var(--ink);}
.logo .sep{width:2px;height:30px;background:var(--gold);opacity:.62;}
.logo .app{font-weight:600;font-size:21px;letter-spacing:.09em;color:var(--ink);}
.logo .app .ax{color:var(--gold);}
.tabs{display:flex;gap:2px;margin-left:6px;}
/* Záložka je od v51 buď <button> (přepne pohled v rámci stránky), nebo <a> (odejde na
   vlastní stránku portálu). Vypadat musí stejně, jinak by se z tvaru odkazu stalo
   sdělení o navigaci, které tam nepatří — čtenář má vidět jednu lištu, ne dva druhy
   záložek. `text-decoration` a `display` jsou jediné, co <a> navíc potřebuje. */
.tab{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);background:none;border:none;cursor:pointer;padding:9px 16px;position:relative;transition:color .25s;text-decoration:none;display:inline-block;line-height:normal;}
.tab:hover{color:var(--dim);}
.tab.on{color:var(--ink);}
.tab.on::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1.5px;background:var(--gold);}
.tab .ph{color:var(--gold);font-size:8px;vertical-align:super;margin-left:3px;}
.barright{margin-left:auto;display:flex;align-items:center;gap:22px;}
/* provenance strip */
.asof .bld{font-size:10px;letter-spacing:.08em;color:var(--dim);margin-left:12px;}
.asof .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle;cursor:help;}
.asof .dot.ok{background:var(--gain);animation:pulse 2.8s infinite;}
.asof .dot.warn{background:var(--gold);}
.asof{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.05em;display:flex;align-items:center;gap:9px;}
.pfsel{position:relative;}
.pfbtn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:0 7px 0 0;padding:7px 13px;cursor:pointer;}
.pfmenu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:0 10px 0 0;padding:6px;min-width:170px;z-index:50;box-shadow:0 12px 28px -10px rgba(0,0,0,.7);}
.pfmenu.open{display:block;}
.pfopt{display:block;width:100%;text-align:left;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--dim);background:none;border:none;cursor:pointer;padding:9px 11px;border-radius:0 6px 0 0;}
.pfopt:hover{background:var(--panel-2);color:var(--ink);}
.pfopt.on{color:#0c0b07;background:var(--gold);}
.pfopt.pfnew{color:var(--gold);border-top:1px solid var(--line);margin-top:4px;}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.73 0.15 150 / .5);}70%{box-shadow:0 0 0 7px oklch(0.73 0.15 150 / 0);}100%{box-shadow:0 0 0 0 oklch(0.73 0.15 150 / 0);}}

/* ---------- views ---------- */
.view{display:none;padding:64px 0 100px;}
.view.on{display:block;}
.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:22px;}

/* hero */
/* minmax(0,...) rather than 1.25fr: a grid track defaults to min-content, and the hero number's
   min-content is 809 px, so between roughly 860 and 1500 px the whole page was quietly wider than
   the window - the same defect as the phone had, just less obvious because it was only 100 px. The
   track may now shrink and the figure is scaled to fit it by the measured backstop in applyBase(). */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:54px;align-items:end;padding-bottom:54px;border-bottom:1px solid var(--line);}
/* The hero number is clamp(70px,13vw,176px) with line-height .86, so its line box overflows
   UPWARD across the whole eyebrow row above it and swallowed every click aimed at the base-
   currency buttons. applyBase() worked when called from code and never when clicked, which is
   why it read as a dead control rather than an error. Lift the eyebrow out of the hero's way. */
.eyebrow{position:relative;z-index:3;}
.htot{min-width:0;white-space:nowrap;font-weight:200;font-size:clamp(70px,13vw,176px);line-height:.86;letter-spacing:-.025em;transform:scaleY(.98);transform-origin:left;filter:drop-shadow(0 2px 18px rgba(201,162,74,.12));}
.htot .cur{font-size:.32em;font-weight:300;vertical-align:super;margin-left:.14em;letter-spacing:0;}
/* Six figures, three to a line: what is in it and what it did on top, what it pays underneath.
   A wrapping flex row put them 2-2-2 with "Today" orphaned; an explicit three-column grid keeps
   the two groups on their own lines whatever the column width. */
.hrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 34px;margin-top:34px;}
.hstat .k{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:9px;}
.hstat .v{font-weight:300;font-size:27px;letter-spacing:-.01em;white-space:nowrap;}
/* The qualifier goes UNDER the figure, not beside it. Beside it, "+37 256 $ +5,36 %" ran past
   its grid cell and collided with the pace in the next column; under it, every statistic has the
   same two-line shape and the columns cannot touch. */
.hstat .v small{display:block;font-size:.58em;color:var(--dim);margin:3px 0 0;letter-spacing:0;white-space:nowrap;}
/* second sub-line: the same amount in korunas, stacked under the percentage rather than beside
   it - side by side the pair was wider than the tile and ran into the next column. */
.hstat .v small.kc{margin-top:2px;color:var(--dim);}
/* The pace pays out in two currencies and the koruna figure is the one that gets spent, so it
   sits under the base figure rather than beside it - a pair on one line at 27 px is wider than
   the column it lives in. */
.hstat.hyield .v{font-size:23px;}
.hstat.hyield .v small{display:block;margin-left:0;margin-top:3px;font-size:.62em;color:var(--dim);}
.hstat .v .ptmute{color:var(--mute);font-size:.8em;}
.spark{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px;position:relative;}
.spark svg{width:100%;height:136px;display:block;cursor:crosshair;}
.chx{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s;pointer-events:none;}
.chdot{fill:var(--gold);stroke:var(--bg);stroke-width:2;opacity:0;transition:opacity .15s;pointer-events:none;}
.spark.live .chx{opacity:.5;} .spark.live .chdot{opacity:1;}
.chtip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line);border-radius:0 8px 0 0;padding:6px 10px;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .15s;transform:translate(-50%,-128%);z-index:5;}
.chtip .tv{color:var(--gold);} .chtip .td{color:var(--mute);font-size:10px;}
.spark.live .chtip{opacity:1;}
.spark .lbl{display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:12px;}

/* allocation */
.alloc{display:grid;grid-template-columns:1fr 1fr;gap:58px;padding:50px 0;border-bottom:1px solid var(--line);}
.alloc h3{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:400;margin-bottom:24px;}
.abar{display:flex;height:8px;border-radius:0 4px 0 0;overflow:hidden;margin-bottom:24px;gap:2px;}
.abar i{height:100%;}
.akey{display:flex;flex-direction:column;}
.akey .row{display:grid;grid-template-columns:11px 1fr auto auto;gap:13px;align-items:center;font-size:14.5px;padding:11px 0;border-top:1px solid var(--line);}
.akey .row:first-child{border-top:none;}
.akey .sw{width:9px;height:9px;border-radius:1px;}
.akey .nm{color:var(--dim);} .akey .pc{font-family:'DM Mono',monospace;font-size:13px;color:var(--ink);} .akey .vl{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--dim);min-width:124px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.akey .ret2{font-size:11px;} .akey .ret2.pos{color:var(--gain);} .akey .ret2.neg{color:var(--loss);}
.abar i{transition:opacity .2s,box-shadow .2s;}
.abar.act i{opacity:.24;} .abar.act i.hot{opacity:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
.akey .row{cursor:pointer;border-radius:0 6px 0 0;transition:opacity .2s;}
.akey.act .row{opacity:.36;} .akey.act .row.hot{opacity:1;}
.akey .row.hot .nm{color:var(--ink);}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;}
.fchip{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:var(--panel);border:1px solid var(--line);padding:7px 14px;border-radius:0 8px 0 0;cursor:pointer;transition:color .2s,background .2s,border-color .2s;}
.fchip:hover{color:var(--dim);}
.fchip.on{color:#0c0b07;background:var(--gold);border-color:var(--gold);}
.fchip[disabled],.fchip.off{opacity:.3;cursor:not-allowed;}
#filters{margin-bottom:0;}
#filtersReg{margin-top:10px;}
.trow.hide{display:none;}
.thead .sc{cursor:pointer;user-select:none;transition:color .2s;display:inline-flex;align-items:center;gap:5px;}
.thead .r.sc{justify-content:flex-end;}
.thead .sc:hover{color:var(--dim);}
.thead .sc.on{color:var(--gold);}
.sarr{font-style:normal;font-size:8px;opacity:0;transition:opacity .2s;line-height:1;}
.thead .sc:hover .sarr{opacity:.45;}
.thead .sc.on .sarr{opacity:1;}
.fchip .fpc{font-style:normal;display:block;font-size:9px;letter-spacing:.04em;margin-top:3px;opacity:.85;}
.fchip .fpc b{font-weight:400;font-size:7.5px;letter-spacing:.1em;opacity:.6;margin-left:4px;}
.fnote{font-family:'DM Mono',monospace;font-size:11px;line-height:1.6;color:var(--mute);
 max-width:74ch;margin:2px 0 4px;}
.fnote b{color:var(--dim);font-weight:400;}
.fchip .fpc.mute{color:var(--mute);opacity:.6;}
.fchip .fpc.lead::after{content:"\25b4";font-size:7px;margin-left:3px;opacity:.75;}
.fchip .fpc.lag::after{content:"\25be";font-size:7px;margin-left:3px;opacity:.6;}
.tsv.mute{color:var(--mute);}
/* pod vodou — tiché, dokud to není hodně; barva až od třetiny držby, protože pod tou to
   o ničem nevypovídá a červená by udělala poplach z normálního kolísání */
.trow .uw{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:8.5px;
 letter-spacing:.07em;color:var(--mute);opacity:.75;margin-top:3px;cursor:help;}
/* ŽÁDNÝ nowrap: první běh s ním rozšířil stránku na 783 px při okně 768 — sekundární metrika
   nesmí nikdy rozhodovat o šířce řádku. Změřeno, ne odhadnuto. */
.trow .uw.mid{color:var(--gold-soft);opacity:.9;}
.trow .uw.bad{color:var(--loss);opacity:.95;}
/* Pod 900 px se schovává. Změřeno: se štítkem rostl sloupec „ret" a stránka měla při okně
   768 px šířku 783 — sekundární metrika nesmí nikdy rozhodovat o šířce řádku. Neztrácí se nic,
   protože totéž nese tooltip i karta pozice. */
@media(max-width:900px){ .trow .uw{display:none;} }
/* KHTIP — a tooltip we can color. The native title= attribute is drawn by the operating
   system and cannot be styled, so "ahead of the book" and "behind the book" could never be
   green and red while they lived in a title. This layer exists for exactly that reason.
   ONE RULE, so the two systems cannot drift: data-tip is for a tooltip whose MEANING is
   partly carried by color or markup; title= stays for plain sentences. If a tooltip needs
   a color, it moves to data-tip in the same commit.
   And inside a khtip, green and red mean ONE thing: standing against the whole book. The
   achieved and pace figures are deliberately left in the normal ink here, even though they
   are green and red on the chip itself — two meanings for one color in a single sentence
   is the same defect as naming a currency filter with a bare code. */
.khtip{position:fixed;z-index:99;max-width:min(46ch,calc(100vw - 24px));pointer-events:none;
 background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
 font-family:'DM Mono',monospace;font-size:11.5px;line-height:1.55;color:var(--dim);
 box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;transform:translateY(-2px);
 transition:opacity .12s ease,transform .12s ease;}
.khtip.on{opacity:1;transform:none;}
.khtip b{color:var(--ink);font-weight:400;}
.khtip .up{color:var(--gain);} .khtip .dn{color:var(--loss);}
.khtip .up,.khtip .dn{font-weight:400;}
@media (prefers-reduced-motion:reduce){.khtip{transition:none;}}
.fchip.on .fpc{opacity:1;}
/* the active chip is gold; green-on-gold is unreadable, so the figure goes dark there */
.fchip.on .fpc,.fchip.on .fpc.pos,.fchip.on .fpc.neg,.fchip.on .fpc.mute{color:#1b1608;}
.fchip.on .fpc b{opacity:.7;}
.fchip:disabled .fpc{display:none;}
.tsum{display:flex;align-items:baseline;gap:10px 26px;flex-wrap:wrap;padding:14px 0 18px;
 border-bottom:1px solid var(--line);font-family:'DM Mono',monospace;font-size:13px;}
/* The whole-portfolio line was reading as the last group's subtotal: same weight, same size,
   six pixels below it. It is a different order of thing - the sum of everything above, not the sum
   of the block above - so it gets air, weight and its own rule. */
.tsum.ttot{border-bottom:none;border-top:1.5px solid var(--gold);margin-top:38px;padding-top:24px;
 padding-bottom:26px;font-size:15px;}
.tsum.ttot .tsl{opacity:1;font-size:11.5px;letter-spacing:.2em;font-weight:600;}
.tsum.ttot .tsv{font-weight:500;}
.tsum.ttot .tsv i{color:var(--dim);}
.tsum.ttot .tsn{font-size:12px;color:var(--dim);}
.tsl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8;min-width:180px;}
.tsn{font-size:11px;color:var(--mute);letter-spacing:.06em;}
.tsv{color:var(--ink);} .tsv i{font-style:normal;display:block;font-size:9px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
.tsv b{font-weight:400;opacity:.85;}
@media(max-width:880px){.tsum{gap:8px 16px;font-size:12px;}.tsl{min-width:100%;}}
.hstat.hpace .v{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.hstat.hpace small{font-family:'DM Mono',monospace;font-size:12px;color:var(--dim);font-weight:400;letter-spacing:.02em;}
.hstat.hpace .ptmute{color:var(--mute);font-size:.62em;letter-spacing:.06em;}
.hstat.hpace .ptthin{font-style:normal;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:2px 5px;opacity:.8;}
.sortbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:20px 0 2px;}
.sortbar .sl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-right:4px;}
.sortbtn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--mute);background:none;border:1px solid var(--line);border-radius:0 6px 0 0;padding:6px 11px;cursor:pointer;transition:color .2s,border-color .2s;}
.sortbtn:hover{color:var(--dim);}
.sortbtn.on{color:var(--gold);border-color:var(--gold);}
.booksum{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0 4px;}
.booksum .bsum-spark{width:150px;height:34px;display:block;}
.booksum .bl{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.booksum .bv{font-family:'Titillium Web',sans-serif;font-weight:300;font-size:22px;letter-spacing:-.01em;color:var(--ink);}
.booksum .br{font-family:'DM Mono',monospace;font-size:13px;}
.booksum .br.pos{color:var(--gain);} .booksum .br.neg{color:var(--loss);}
.booksum .bnote{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);}

/* holdings */
.hold{padding-top:16px;}
.hgrp{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin:34px 0 6px;}
.hgrp .gsh{font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--mute);white-space:nowrap;cursor:help;}
.hgrp::after{content:"";flex:1;height:1px;background:var(--line);order:1;}
/* the rule sits BETWEEN the group name and its share, so the eye runs name - line - number */
.hgrp .gsh{order:2;}
.thead,.trow{display:grid;grid-template-columns:1.7fr .9fr 1fr 1fr .7fr .8fr;gap:14px;align-items:center;}
.thead{padding:12px 0;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);}
.thead .r,.trow .r{text-align:right;}
.trow{padding:19px 0;border-bottom:1px solid var(--line);position:relative;transition:background .22s;cursor:pointer;}
#hold .trow .tk .sym::after{content:'\203a';margin-left:.5em;color:var(--gold);opacity:0;transition:opacity .18s,transform .18s;display:inline-block;transform:translateX(-3px);}
#hold .trow:hover .tk .sym::after{opacity:.9;transform:translateX(0);}
.trow::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .22s;}
.trow:hover{background:linear-gradient(90deg,var(--panel),transparent);}
.trow:hover::before{transform:scaleY(1);}
.tk{display:flex;flex-direction:column;gap:3px;}
.tk .sym{font-weight:600;font-size:16.5px;letter-spacing:.01em;}
.tk .top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.tk .nm{font-size:12px;color:var(--mute);}
/* The style of a holding is the one label that explains WHY it is in the book, and until now
   it lived only in the filter chips - so a table sorted by return read as a list of tickers
   with no rule behind them. It sits on the row, and clicking it filters to that style. */
.tk .stag{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:400;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:0 5px 0 0;padding:2px 7px;cursor:pointer;white-space:nowrap;transition:color .18s,background .18s,border-color .18s;}
.tk .stag:hover{color:var(--ink);border-color:var(--gold);}
/* "GBP" under the big number is a UNIT, not a selection - and on a screen where currency codes
   are ALSO filter chips, that had to be said in words rather than left to be inferred. */
.eyebrow .ebin{font-size:9.5px;letter-spacing:.14em;color:var(--dim);opacity:.7;margin:0 2px 0 6px;}
.htf .ppl{white-space:nowrap;}
/* A row's chart is either evidence or a placeholder, and the difference has to be visible at a
   glance rather than in a header note that covers a column where only some rows are fabricated:
   real is a solid line with the session count, synthesised is dashed and chipped. */
.mscell .realtag{font-family:'DM Mono',monospace;font-style:normal;font-size:8.5px;letter-spacing:.1em;color:var(--dim);opacity:.55;margin-left:7px;vertical-align:middle;}
.mscell.isreal:hover .realtag{opacity:.9;color:var(--gain);}
/* the payment tick is small on a 16 px line, so it grows when its row is hovered */
.mscell .divdot{transition:r .15s;} .trow:hover .mscell .divdot{r:2.6;}
.mtip{white-space:normal;}
.mscell .demochip{margin-left:7px;vertical-align:middle;}
.tk .stag.on{color:#1b1608;background:var(--gold);border-color:var(--gold);}
/* Dividends RECEIVED sit on the row because they are the one part of the return already PAID
   rather than merely marked to market. Gold, because it is money in hand. */
.tk .divtag{font-family:'DM Mono',monospace;font-size:8.5px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,162,74,.42);
  border-radius:0 5px 0 0;padding:2px 7px;margin-left:7px;white-space:nowrap;cursor:help;}
.num{font-family:'DM Mono',monospace;font-size:13.5px;color:var(--dim);}
.val{font-family:'DM Mono',monospace;font-size:14.5px;color:var(--ink);}
.chip{font-family:'DM Mono',monospace;font-size:12px;padding:3px 9px;border-radius:0 6px 0 0;display:inline-block;}
.chip.up{color:var(--gain);background:var(--gain-bg);} .chip.down{color:var(--loss);background:var(--loss-bg);}
.mscell{position:relative;display:block;}
.mspark{width:100%;height:26px;display:block;opacity:.95;cursor:crosshair;overflow:visible;}
.msx{stroke:var(--dim);stroke-width:1;stroke-dasharray:2 2;opacity:0;}
.msdot{stroke:var(--bg);stroke-width:1.4;opacity:0;}
.mscell.live .msx{opacity:.55;} .mscell.live .msdot{opacity:1;}
.mtip{position:absolute;top:-22px;transform:translateX(-50%);pointer-events:none;background:var(--panel-2);border:1px solid var(--line);border-radius:0 6px 0 0;padding:3px 7px;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .12s;z-index:8;}
.mscell.live .mtip{opacity:1;}
.msbase{stroke:var(--mute);stroke-width:.7;stroke-dasharray:2 2;opacity:.4;}
.dbase{stroke:var(--mute);stroke-width:1;stroke-dasharray:4 4;opacity:.4;}

/* phase-2 views */
.p2head{display:flex;align-items:baseline;gap:18px;margin-bottom:10px;}
.p2head h2{font-weight:200;font-size:clamp(34px,5.5vw,60px);letter-spacing:-.015em;transform:scaleY(.97);transform-origin:left;}
.p2badge{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:4px 10px;border-radius:0 7px 0 0;}
.p2lead{font-weight:300;font-size:clamp(17px,2vw,22px);color:var(--dim);max-width:66ch;line-height:1.55;margin-bottom:48px;}
.p2grid{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:0 20px 0 0;padding:30px 32px;}
.card .ch{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:22px;}
.news{display:flex;flex-direction:column;}
.nitem{padding:17px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.nitem:first-of-type{border-top:none;padding-top:0;}
.nsrc{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--mute);white-space:nowrap;padding-top:3px;}
.ntext{font-size:14.5px;color:var(--dim);line-height:1.5;}
.insight{background:linear-gradient(158deg,var(--panel-2),var(--panel));border-left:2px solid var(--gold);}
.insight .body{font-weight:300;font-size:18.5px;line-height:1.6;color:var(--ink);letter-spacing:-.005em;}
.insight .body b{font-weight:600;color:var(--gold-soft);}
.insight .sig{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);margin-top:24px;display:flex;align-items:center;gap:9px;}
.sigdot{width:6px;height:6px;border-radius:50%;background:var(--gold);}
.signal{display:flex;flex-direction:column;gap:18px;}
.sgrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);}
.sgrow:last-child{border-bottom:none;padding-bottom:0;}
.sgname{font-size:14px;color:var(--dim);} .sgname b{color:var(--ink);font-weight:600;}
.meter{height:4px;background:var(--raise);border-radius:2px;overflow:hidden;margin-top:8px;width:100%;}
.meter i{display:block;height:100%;}

/* footer */
.foot{margin-top:66px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--mute);}
.foot .khend{display:flex;align-items:center;gap:11px;}
.foot .khe{height:15px;width:auto;opacity:.6;} .foot .khe path{fill:var(--mute);}

@media(max-width:880px){
  .hero,.alloc,.p2grid{grid-template-columns:1fr;gap:36px;}
  .thead{display:none;}
  .trow{grid-template-columns:1.4fr 1fr 1fr;grid-auto-flow:row;gap:8px 14px;padding:20px 0;}
  .trow .base,.trow .day,.trow .mscell{display:none;}
}
.bswitch{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle;}
.bswitch button{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--mute);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:0 5px 0 0;transition:color .2s,background .2s;}
.bswitch button:hover{color:var(--dim);}
.bswitch button.on{color:#0c0b07;background:var(--gold);}
/* holding detail modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(8,7,4,.74);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:3vh 18px;overflow:auto;}
.modal.open{display:flex;}
.msheet{background:var(--panel);border:1px solid var(--line);border-radius:0 24px 0 0;width:min(760px,100%);padding:34px 38px 40px;position:relative;}
.msheet.wide{width:min(1500px,96vw);padding:40px 48px 48px;}
.msheet.wide .donuts{gap:60px;padding:30px 0 8px;}
.msheet.wide .dwrap{gap:34px;}
.msheet.wide .dwrap svg{width:300px;height:300px;}
.msheet.wide .dleg{font-size:13px;gap:9px;}
.msheet.wide .mh-nm{font-size:15px;}
.mclose{position:absolute;top:22px;right:24px;width:34px;height:34px;border:1px solid var(--line);background:none;color:var(--dim);border-radius:0 9px 0 0;cursor:pointer;font-size:17px;line-height:1;transition:color .2s,border-color .2s;}
.mclose:hover{color:var(--gold);border-color:var(--gold);}
.mh-sym{font-weight:600;font-size:30px;letter-spacing:.01em;}
.mh-nm{color:var(--mute);font-size:14px;margin-top:3px;}
.mh-tags{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;}
.mtag.gov{color:var(--gold);border-color:var(--gold);}
.rbkbox{margin:18px 0 4px;border-left:2px solid var(--gold);background:linear-gradient(158deg,var(--panel-2),var(--panel));border-radius:0 12px 0 0;padding:16px 20px;}
.rbkh{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.rbkr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px;padding:6px 0;font-size:13px;color:var(--dim);}
.rbkr .rbkk{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);align-self:center;}
.rbkmiss{color:var(--mute);font-style:italic;}
.rbkunv{display:inline-block;margin-left:7px;font-style:normal;font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,162,74,.45);border-radius:0 5px 0 0;padding:1px 5px;vertical-align:1px;}
.rbkpills{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px;}
.rbkpill{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:0 7px 0 0;padding:6px 11px;}
.rbkpill b{color:var(--gold);font-weight:500;}
.rbkwrap{margin:18px 0 6px;}
.rbkhead,.rbkrow{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,.52fr) minmax(0,.5fr) minmax(0,.58fr) minmax(0,1.42fr) minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.34fr);gap:10px;align-items:start;}
.rbkmoney b{font-weight:400;font-size:12px;}
.rbkshare{color:var(--mute);}
.rbkmoney i{display:block;font-size:10px;margin-top:3px;}
.rbkmoney{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink);}
.rbklink{display:inline-block;margin-top:5px;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,74,.35);}
.rbklink:hover{color:var(--ink);}
.rbklink.snap{margin-left:10px;color:var(--mute);border-bottom-color:var(--line);}
.rbklink.snap:hover{color:var(--dim);}
/* Jedna věta, kterou si KH přál vytesat. Je tu proto, že shrnuje to, co z jedenácti rulebooků
   a ze srovnání s cizími koši vypadlo, a protože pravidlo, které se čte, je pravidlo, které
   se dodržuje. Datum a důvod jsou u ní schválně: až přestane platit, bude vidět, od kdy. */
.rbkcarve{margin:18px 0 2px;padding:14px 0 0;border-top:1px solid var(--line);
 font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--gold-soft);max-width:62ch;}
.rbkcarve i{display:block;margin-top:8px;font-style:normal;font-family:'DM Mono',monospace;
 font-size:11px;line-height:1.55;letter-spacing:.02em;color:var(--mute);}
/* A DEAD LIVE LINK IS NOT DELETED, IT IS MARKED. KH, 16. 8.: „váhám zda tam ten odkaz nechávat,
   pokud je k hovnu." Deleting it would say ICE never published a methodology; marking it says
   they published it, then moved it, and this is exactly why the snapshot column exists. The
   date is when we last saw it fail, so the claim stays checkable. */
.rbklink.dead{color:var(--mute);border-bottom-style:dashed;border-bottom-color:var(--line);
 text-decoration:line-through;text-decoration-thickness:1px;cursor:help;}
.rbklink.dead:hover{color:var(--dim);}
.rbkpill u{display:block;text-decoration:none;font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--ink);margin-top:4px;}
.rbknote{grid-column:1/-1;font-size:11px;color:var(--mute);font-style:italic;margin-top:6px;}
.rbkhead{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:10px;border-bottom:1px solid var(--line);}
.rbkrow{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim);}
.rbkrow i{display:block;font-style:normal;font-size:10px;color:var(--mute);margin-top:3px;}
.rbkrow i.rbkmiss{display:inline;font-style:italic;}
.rbksym{font-family:'DM Mono',monospace;letter-spacing:.06em;color:var(--ink);}
.nextr{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:16px 0 4px;padding:13px 18px;border:1px dashed rgba(201,162,74,.42);border-radius:0 12px 0 0;background:linear-gradient(158deg,var(--panel-2),transparent);}
.nextr .nrk{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.nextr b{font-weight:300;font-size:20px;letter-spacing:-.01em;color:var(--ink);}
.nextr .nrd{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);}
.nextr .nrg{font-size:12px;color:var(--dim);margin-left:auto;}
.nextr span{min-width:0;overflow-wrap:anywhere;}
@media(max-width:700px){.nextr{gap:8px;padding:12px 14px;}.nextr .nrg{margin-left:0;}.nextr .nrd{letter-spacing:.05em;}.nextr b{font-size:17px;}}
.rbksec{padding:56px 0 10px;border-top:1px solid var(--line);}
.rbksec h3{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:16px;}
.rbkintro{max-width:78ch;font-size:14px;line-height:1.62;color:var(--dim);margin-bottom:6px;}
.rbksec .rbknote{max-width:96ch;line-height:1.6;}
.rsc{cursor:pointer;user-select:none;transition:color .18s;}
.rsc:hover{color:var(--dim);}
.rsc.on{color:var(--gold);}
.rsc.on::after{content:' \2193';} .rsc.on.asc::after{content:' \2191';}
.rbkage{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:6px;}
.rbkage.old{color:var(--gold);}
.rbkflags{display:block;font-style:normal;margin-top:7px;}
.rbkflags b{display:inline-block;margin:0 6px 5px 0;font-weight:400;font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,162,74,.45);border-radius:0 5px 0 0;padding:2px 6px;}
.rbkmode{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.rbkmode.m-rule{color:var(--gain);} .rbkmode.m-house-rule{color:var(--gold);} .rbkmode.m-manager{color:#c9a24a;}
.rbkhead .rr,.rbkrow .rr{text-align:right;}
@media(max-width:760px){.rbkhead{display:none;}.rbkrow{grid-template-columns:1fr 1fr;gap:8px;}.rbkr{grid-template-columns:1fr;gap:2px;}}
.mtag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:4px 9px;border-radius:0 6px 0 0;}
#dchart{width:100%;height:200px;display:block;margin:26px 0 6px;cursor:crosshair;}
.dmark{stroke:var(--bg);stroke-width:1.5;cursor:pointer;}
.dmark.buy,.dmark.add{fill:var(--gain);} .dmark.sell{fill:var(--loss);}
.dlegend{display:flex;gap:18px;flex-wrap:wrap;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.dlegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.msheet.live .chx{opacity:.5;} .msheet.live .chdot{opacity:1;} .msheet.live .chtip{opacity:1;}
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:18px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:16px 0 24px;}
.mstat .k{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:7px;}
.mstat .v{font-weight:300;font-size:19px;letter-spacing:-.01em;}
.mtx{display:flex;flex-direction:column;}
.mtxh,.mtxr{display:grid;grid-template-columns:1.1fr .9fr .8fr 1fr 1fr;gap:12px;align-items:center;}
.mtxh{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:11px;border-bottom:1px solid var(--line);}
.mtxr{padding:13px 0;border-bottom:1px solid var(--line);font-family:'DM Mono',monospace;font-size:13px;color:var(--dim);}
.mtxr .act{font-weight:500;letter-spacing:.03em;}
.act.buy,.act.add{color:var(--gain);} .act.sell{color:var(--loss);}
.mtxh .rr,.mtxr .rr{text-align:right;}
.whatif{margin-top:24px;background:linear-gradient(158deg,var(--panel-2),var(--panel));border-left:2px solid var(--gold);border-radius:0 14px 0 0;padding:22px 24px;}
.whatif .wk{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:11px;}
.whatif .wv{font-weight:300;font-size:17px;line-height:1.55;color:var(--ink);}
.whatif .wv b{font-weight:600;}
@media(max-width:680px){.mtxh,.mtxr{grid-template-columns:1.1fr .9fr .7fr 1fr;}.mtxh .vcol,.mtxr .vcol{display:none;}.msheet{padding:30px 22px 34px;}}
.whero{padding:6px 0 42px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.whtot{font-weight:200;font-size:clamp(42px,7vw,84px);letter-spacing:-.02em;line-height:1;transform:scaleY(.98);transform-origin:left;}
.khidx{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;
 border:1px solid var(--line);border-top-right-radius:14px;background:rgba(201,162,74,.035);}
.khidx .pl{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.8;}
.khidx .pv{font-family:'DM Mono',monospace;font-size:26px;letter-spacing:-.01em;}
.khidx .pmute{font-family:'DM Mono',monospace;font-size:19px;color:var(--dim);}
.khidx .pm{font-family:'DM Mono',monospace;font-size:13px;color:var(--ink);}
.khidx .pm i{color:var(--mute);font-style:normal;font-size:11px;}
.khidx .pmat{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);display:flex;align-items:center;gap:8px;}
.matbar{display:inline-block;width:56px;height:4px;background:var(--line);position:relative;}
.matbar b{position:absolute;left:0;top:0;height:4px;background:var(--gold);opacity:.75;}
.khidx .ptwr{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);border-left:1px solid var(--line);padding-left:16px;cursor:help;}
.khidx .ptwr i{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;display:block;}
.khidx .pm i{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:2px;}
.khidx .pm em{font-style:normal;color:var(--line);padding:0 2px;}
.hbarlbl .exact{font-family:'DM Mono',monospace;color:var(--ink);margin-right:18px;}
.khtwr{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px;padding:0 18px;}
.khtwr .twl{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);opacity:.8;}
.khtwr .twv{font-family:'DM Mono',monospace;font-size:17px;}
.khtwr .twn{font-size:11.5px;color:var(--dim);line-height:1.5;flex:1;min-width:260px;}
.khtwr .twn em{font-style:italic;color:var(--mute);}
.khidx .pnote{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--dim);margin-left:auto;letter-spacing:.03em;}
.hview{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap;}
.hvsep{width:1px;height:16px;background:var(--line);margin:0 4px;}
.hvbtn{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:4px 10px;background:transparent;
 border:1px solid var(--line);color:var(--mute);cursor:pointer;border-top-right-radius:7px;}
.hvbtn.on{color:#0c0b07;background:var(--gold);border-color:var(--gold);}
.hvbtn:disabled{opacity:.4;cursor:not-allowed;}
.tfbtn:disabled{opacity:.32;cursor:not-allowed;}
@media(max-width:880px){.khidx{gap:12px}.khidx .pnote{margin-left:0;width:100%}}
/* ── DEMO-DATA MARKING ─────────────────────────────────────────────────────────────────
   This dashboard now drives real decisions, so anything that is NOT a real figure has to
   announce itself. Two levels, deliberately different in weight:
   .demo      — a block whose CONTENT is invented (Markets, Advisor, the Monika portfolio).
                Hatched, dimmed, corner chip. Unmissable.
   .demochip  — a real block containing ONE synthetic element (a price path whose endpoints
                are real, an estimated yield). Chip only, no dimming, because greying out a
                real number would be its own kind of lie. */
.demo{position:relative;}
.demo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(201,162,74,.06) 12px 24px);}
.demo::after{content:"DEMO DATA \2014 NOT REAL";position:absolute;top:8px;right:8px;z-index:3;
 font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.18em;padding:4px 9px;
 color:#0c0b07;background:var(--gold);border-bottom-left-radius:8px;pointer-events:none;}
.demo > *{opacity:.5;}
/* PARTIAL is not a warning like SHAPE - it says most of this is measured - so it is quieter */
.demochip.partial{color:var(--dim);border-color:rgba(122,116,102,.5);}
.demochip{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;
 padding:2px 6px;margin-left:8px;border:1px solid var(--gold);color:var(--gold);border-radius:3px;
 vertical-align:middle;white-space:nowrap;opacity:.85;}
.demochip.strong{background:var(--gold);color:#0c0b07;}
.demonote{font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);opacity:.9;margin:0 0 14px;}
.whsub{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);margin-top:18px;letter-spacing:.04em;}
/* below-the-line "considered" rail — intentionally muted so it never competes with owned
   positions or live ideas; it is a memory of intent, not a holding. */
#consTbl{margin-top:34px;}
.consbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:0 0 12px;border-top:1px solid var(--line);padding-top:26px;}
.conshd{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.75;}
.conssub{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);letter-spacing:.03em;}
.conshead{display:grid;grid-template-columns:1.5fr .7fr 120px .9fr .8fr .85fr;gap:14px;padding:0 0 8px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.conshead span{text-align:right;}.conshead span:first-child{text-align:left;}
.conshead em{font-style:normal;display:block;font-size:8px;opacity:.6;letter-spacing:.1em;margin-top:2px;}
.consdiv{font-family:'DM Mono',monospace;font-size:13px;text-align:right;color:var(--dim);white-space:nowrap;}
.consdiv em{font-style:normal;display:block;font-size:10px;opacity:.7;}
.consdiv.hi{color:var(--loss);}.consdiv.lo{color:var(--gain);}
.consdiv.unst{color:var(--gold);opacity:.85;}.consdiv.unst em{letter-spacing:.06em;}
.consrow{display:grid;grid-template-columns:1.5fr .7fr 120px .9fr .8fr .85fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);opacity:.66;transition:opacity .22s,background .22s;}
.consrow:hover{opacity:1;}
.consrow.has{cursor:pointer;}
.consrow.has:hover{background:rgba(201,162,74,.045);}
.consrow .consnote{grid-column:1/-1;margin-top:-4px;}
.conssum{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;padding:2px 0 16px;}
.csk{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.csv{font-family:'DM Mono',monospace;font-size:15px;color:var(--ink);}
.csrc{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--mute);opacity:.7;margin-left:auto;}
.cspend{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--gold);opacity:.75;}
.conscost{font-family:'DM Mono',monospace;font-size:13px;color:var(--dim);text-align:right;}
.conschart{display:block;height:30px;}
.conspark{width:100%;height:30px;display:block;overflow:visible;}
.conspl{font-family:'DM Mono',monospace;font-size:13px;text-align:right;white-space:nowrap;}
.conspl em{font-style:normal;display:block;font-size:11px;opacity:.72;}
.conspl.dimq{color:var(--mute);opacity:.5;}
.consrow .sym{font-size:15px;}
.consnote{font-size:13px;color:var(--mute);line-height:1.45;}
.conssrc{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.04em;text-align:right;opacity:.8;}
@media(max-width:880px){.conshead{display:none;}.consrow{grid-template-columns:1fr 1fr;gap:6px 14px;}.conssrc{text-align:left;}.conscost,.conspl,.consdiv{text-align:left;}.conschart{grid-column:1/-1;}}
#watch .thead,#watch .trow{grid-template-columns:26px 1.5fr .9fr .7fr .7fr .7fr 1fr 24px;}
.wdel{background:none;border:none;color:var(--mute);cursor:pointer;font-size:12px;opacity:0;transition:opacity .2s,color .2s;justify-self:center;}
#watch .trow:hover .wdel{opacity:1;}
.wdel:hover{color:var(--loss);}
.wcheck{display:flex;align-items:center;}
.wcheck input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1px solid var(--mute);border-radius:0 4px 0 0;background:none;cursor:pointer;position:relative;flex:0 0 auto;}
.wcheck input:checked{background:var(--gold);border-color:var(--gold);}
.wcheck input:checked::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#0c0b07;}
@media(max-width:880px){#watch .trow{grid-template-columns:26px 1.4fr .8fr 1fr 24px;} #watch .trow .wc,#watch .trow .mscell{display:none;}}
.watchbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 6px;}
.stakectl{display:flex;align-items:center;gap:10px;}
.stakectl .feeinput{width:120px;font-size:14px;}
.addbtn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--gold);cursor:pointer;padding:8px 15px;border-radius:0 8px 0 0;transition:background .2s,color .2s;}
.addbtn:hover{background:var(--gold);color:#0c0b07;}
.addform{display:none;gap:10px;flex-wrap:wrap;align-items:center;padding:18px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:0 14px 0 0;}
.addform.open{display:flex;}
.addform input{background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:'DM Mono',monospace;font-size:12px;padding:8px 10px;border-radius:0 6px 0 0;width:118px;}
.addform input::placeholder{color:var(--mute);}
.addform .save{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:#0c0b07;border:none;cursor:pointer;padding:9px 16px;border-radius:0 6px 0 0;}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.feeinput{background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:'DM Mono',monospace;font-size:16px;padding:10px 12px;border-radius:0 8px 0 0;width:120px;}
.setnote{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);margin-top:14px;line-height:1.7;}
.setnote b{color:var(--ink);font-weight:500;}
.tagwrap{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--line);border-radius:0 7px 0 0;cursor:pointer;color:var(--mute);background:none;transition:color .2s,background .2s,border-color .2s;}
.tag:hover{color:var(--dim);}
.tag.prefer{color:#0c0b07;background:var(--gold);border-color:var(--gold);}
.tag.avoid{color:var(--loss);border-color:var(--loss);text-decoration:line-through;}
.srow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);}
.srow:first-child{border-top:none;}
.srcname{font-family:'DM Mono',monospace;font-size:13px;color:var(--dim);}
.srow2{padding:13px 0;border-top:1px solid var(--line);}
.srow2:first-child{border-top:none;}
.srh{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.srh .srcname{flex:1;}
.srwt{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);}
.srcw{width:100%;}
.srcw:disabled{opacity:.35;}
.rolerow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);}
.rolerow:first-child{border-top:none;}
.rolen{font-weight:600;font-size:14px;}
.roled{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);margin-top:3px;}
.rolest{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:0 6px 0 0;padding:4px 9px;}
.rolest.on{color:#0c0b07;background:var(--gold);border-color:var(--gold);}
.toggle{width:38px;height:22px;border-radius:0 11px 0 0;background:var(--raise);border:1px solid var(--line);cursor:pointer;position:relative;transition:background .2s;flex:0 0 auto;}
.toggle.on{background:var(--gold);}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--ink);transition:transform .2s;}
.toggle.on::after{transform:translateX(16px);background:#0c0b07;}
@media(max-width:880px){.setgrid{grid-template-columns:1fr;}}
#watch .whero{position:sticky;top:70px;background:var(--bg);z-index:12;padding-top:18px;}
.modelbar{display:flex;justify-content:flex-end;gap:10px;margin:14px 0 -6px;flex-wrap:wrap;}
/* THE REPORT LIVES IN THE BAR. It was one of six chart buttons in a row below the fold, labeled
   just "Report" - and KH went looking for it on the main page, needing the PDF for a bank, and
   could not find it. It is not a visualisation, it is the deliverable. There was also a second
   copy on the watchlist, which is how a thing ends up with two labels and one of them wrong.
   One button, in the bar, reachable from any view at any scroll position. */
.repbtn{display:inline-flex;align-items:center;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#0c0b07;background:var(--gold);border:1px solid var(--gold);
  border-radius:0 7px 0 0;padding:7px 12px;cursor:pointer;font-weight:600;white-space:nowrap;
  transition:background .2s,border-color .2s;}
.repbtn:hover{background:var(--ink);border-color:var(--ink);}
.repbtn .btnico{width:15px;height:15px;margin-right:7px;vertical-align:-3px;}
.mixtop{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.mixpin{position:sticky;top:-42px;background:var(--panel);z-index:8;padding:14px 0 10px;margin-bottom:6px;box-shadow:0 10px 18px -8px rgba(12,11,7,.9);}
.mixhead{display:grid;grid-template-columns:.8fr 1.6fr .8fr .8fr;gap:14px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:10px;border-bottom:1px solid var(--line);}
.mixhead .r{text-align:right;}
.mixrow{display:grid;grid-template-columns:.8fr 1.6fr .8fr .8fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);}
.mixlabel{font-weight:600;font-size:14px;}
.mixalloc{color:var(--ink);} .mixnew{color:var(--gold);}
.mixslider{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--raise);outline:none;}
.mixslider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--gold);cursor:pointer;}
.mixslider::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--gold);cursor:pointer;}
.mixproj{font-family:'DM Mono',monospace;font-size:13px;color:var(--dim);}
.mixsk{margin:18px 0 8px;}
.mixsk svg{width:100%;height:auto;display:block;}
.mixsk.folded{display:none;}
.mixfold{margin-left:auto;background:none;border:1px solid var(--line);border-radius:2px;color:var(--mute);
 font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .2s,border-color .2s;}
.mixfold:hover{color:var(--gold);border-color:var(--gold);}
/* the sheet owns the height; the slider list scrolls, not the page behind it */
.msheet.mixsheet{display:flex;flex-direction:column;max-height:92vh;}
.msheet.mixsheet .mixpin{position:static;flex:0 0 auto;box-shadow:none;}
.mixbody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
 overscroll-behavior:contain;padding-right:4px;}
.mixbody .mixhead{position:sticky;top:0;background:var(--panel);z-index:2;padding-top:6px;}
/* short viewport - iPad landscape is 768 tall, and that is where this broke */
@media(max-height:900px),(max-width:1100px){
  .msheet.mixsheet{max-height:97vh;padding:18px 30px 16px;}
  .msheet.mixsheet .mh-nm{display:none;}
  .msheet.mixsheet .mh-sym{font-size:20px;margin-bottom:2px;}
  .msheet.mixsheet .mixpin{padding:6px 0 4px;}
  .msheet.mixsheet .mixtop{margin-bottom:8px;}
  .mixsk{margin:6px 0 2px;}
  .mixsk svg{max-height:26vh;}
  .mixsug{margin:2px 0 6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .mixrow{padding:8px 0;}
}
@media(max-width:1100px){ .mixrow,.mixhead{grid-template-columns:.7fr 1.4fr .9fr .9fr;gap:10px;} }
.mixsk text{font-family:'DM Mono',monospace;paint-order:stroke;stroke:rgba(12,11,7,.7);stroke-width:2px;stroke-linejoin:round;}
.hbar{display:flex;height:6px;max-width:560px;background:var(--raise);border-radius:0 3px 0 0;overflow:hidden;margin:34px 0 0;}
.hbar i{display:block;height:100%;}
#hbInv{background:var(--gold-soft,#d9bd84);opacity:.55;} #hbGain{background:var(--gain);}
.hbarlbl{display:flex;gap:22px;max-width:560px;margin:13px 0 8px;font-family:'DM Mono',monospace;font-size:11.5px;color:var(--mute);flex-wrap:wrap;}
.hbarlbl b{font-weight:400;}
.hbarlbl .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:0;}
.hbarlbl .inv .sw{background:var(--gold-soft,#d9bd84);opacity:.7;} .hbarlbl .gn .sw{background:var(--gain);}
.mixsug{margin:6px 0 14px;font-family:'DM Mono',monospace;font-size:12.5px;color:var(--dim);line-height:1.6;}
.mixsug .sugk{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-right:8px;}
.mixsug b{color:var(--ink);font-weight:600;}
.donuts{display:none;grid-template-columns:1fr 1fr;gap:48px;padding:44px 0;border-bottom:1px solid var(--line);}
.donuts.show{display:grid;}
.donut h3{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:400;margin-bottom:18px;}
.dwrap{display:flex;gap:22px;align-items:center;}
.dwrap svg{width:140px;height:140px;flex:0 0 auto;}
.dleg{display:flex;flex-direction:column;gap:5px;font-family:'DM Mono',monospace;font-size:11px;flex:1;}
.dleg .dr{display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;}
.dleg .ds{width:8px;height:8px;border-radius:2px;flex:0 0 auto;}
.dleg .dn{color:var(--dim);} .dleg .dv{color:var(--mute);}
@media(max-width:880px){.donuts{grid-template-columns:1fr;gap:32px;}}
/* The bar carries five things - identity, navigation, the report, the portfolio switcher and the
   provenance line - and they stop fitting on one row at about 1180 px, not at the phone breakpoint.
   Between the two the page was 1156 px wide inside an 860 px window, which is exactly the defect
   the phone had and just as invisible. The right-hand group drops to its own row and the bar stays
   sticky; only on a phone (below) does it stop being sticky. */
/* THE BAR IS TWO ROWS AT EVERY WIDTH. It carries five things - identity, navigation, the report,
   the portfolio switcher and the provenance line - and they do not fit on one row even at 1920 px;
   trying made the provenance wrap to four lines and spill out of a 70 px bar. Rather than a
   breakpoint that hides the problem on big screens and exposes it on laptops, the right-hand
   group always has its own strip. Same shape everywhere, nothing clipped, nothing hidden. */
.bar .wrap{flex-wrap:wrap;height:auto;gap:6px 16px;padding-top:12px;padding-bottom:0;}
.barright{order:4;flex-basis:100%;margin-left:0;justify-content:flex-end;gap:14px;
          border-top:1px solid var(--line);padding:8px 0;}
.asof{flex-wrap:wrap;justify-content:flex-end;text-align:right;}
/* the timeframe row is a caption plus seven buttons; in a narrowed hero column it wraps */
@media(max-width:1440px){
  .htf{flex-wrap:wrap;} .periodperf{flex-basis:100%;margin-right:0;margin-bottom:8px;flex-wrap:wrap;}
}

/* ============================ THE PHONE ============================
   Built against a 402 px viewport (iPhone 17 Pro). Before this block the page
   was 831 px wide on a 402 px screen — you could swipe the whole dashboard
   sideways and half of every number was off-frame — and the tab bar was set to
   `display:none`, so Watchlist, Markets and Settings were simply unreachable on
   a phone. Two different failures with the same cause: a desktop layout asked
   to shrink rather than a phone layout designed to fit.
   The rule here: nothing is hidden that the reader needs, and nothing is wider
   than the screen. Where something genuinely cannot fit, it wraps or shortens —
   it does not overflow and it does not disappear. */
@media(max-width:820px){
  /* The bar becomes two rows: identity and portfolio on top, navigation under it.
     The tabs scroll horizontally rather than vanish - a phone can swipe. */
  /* The bar stops being sticky here. It needs three rows on a phone, and three sticky rows
     eat a quarter of an 874 px screen for the whole session; scrolling back up is cheaper. */
  .bar{position:static;}
  .bar .wrap{flex-wrap:wrap;height:auto;gap:10px 16px;padding-top:12px;padding-bottom:0;}
  .logo{order:1;}
  /* The portfolio switcher and the provenance line share a full-width strip under the tabs,
     so the provenance reads as a line of text rather than three words crushed against the edge. */
  .barright{order:4;flex-basis:100%;margin-left:0;gap:12px;justify-content:space-between;
            align-items:flex-start;border-top:1px solid var(--line);padding:9px 0;}
  .tabs{display:flex;order:3;flex-basis:100%;margin-left:-4px;gap:0;
        overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:10px 13px;font-size:10px;letter-spacing:.14em;white-space:nowrap;}
  .tab.on::after{left:13px;right:13px;}
  /* The provenance line is three facts and a build stamp; on a phone it reads as
     two lines rather than one that runs off the edge. */
  .asof{flex-wrap:wrap;font-size:10px;line-height:1.55;gap:0 8px;justify-content:flex-end;text-align:right;flex:1 1 auto;}
  .asof .bld{margin-left:0;flex-basis:100%;text-align:right;}
  .pfbtn{padding:6px 10px;font-size:10px;}
  .repbtn{padding:6px 10px;font-size:9.5px;} .repbtn .btnico{width:13px;height:13px;margin-right:5px;}
}
@media(max-width:620px){
  /* The hero number is the one element that cannot simply shrink: at 70 px the
     unshortened figure is 800 px wide. It is capped by viewport width here and
     switched to the short form in applyBase() - the exact figure is directly
     underneath in the bar label, so nothing is lost. */
  .view{padding:26px 0 72px;}
  .hero{padding-bottom:34px;gap:26px;}
  .alloc{padding:34px 0;gap:34px;}
  /* The hero figure IS the page - it is what the dashboard is for and it should read from arm's
     length. After the bar was restacked there was room to give it back, and the short form on a
     phone is only four or five glyphs, so it can be very large without overflowing. Capped by
     viewport width, not by a fixed size, and measured: it must never exceed the wrap. */
  .htot{font-size:clamp(56px,25vw,124px);line-height:.82;}
  .htot .cur{font-size:.34em;vertical-align:.32em;margin-left:.04em;}
  .eyebrow{margin-bottom:14px;font-size:10px;letter-spacing:.2em;}
  .eyebrow{flex-wrap:wrap;}
  /* Four statistics in a row need 809 px. Two by two needs none. */
  .hrow{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:30px;}
  .hstat .v{font-size:21px;white-space:normal;}
  .hstat .v small{display:block;margin-left:0;margin-top:3px;font-size:.62em;}
  .hstat .k{font-size:9px;letter-spacing:.16em;margin-bottom:6px;}
  /* the timeframe row wraps under its own caption instead of extending past the edge */
  .htf{flex-wrap:wrap;gap:2px 0;}
  .periodperf{flex-basis:100%;margin-right:0;margin-bottom:8px;flex-wrap:wrap;font-size:12px;}
  .htf .ppl{white-space:normal;}
  .tfbtn{padding:6px 9px;}
  .hview{gap:5px;} .hvbtn{font-size:10px;padding:6px 9px;}
  .hbarlbl{flex-wrap:wrap;gap:6px 14px;font-size:11px;}
  /* the row tag and the name must not force the table wider than the screen */
  .tk .top{gap:7px;} .tk .sym{font-size:15px;} .tk .nm{font-size:11px;}
  .mscell .demochip,.mscell .realtag{margin-left:0;}
  .fnote,#fnote{font-size:11px;}
  .vbtn{min-width:0;flex:1 1 46%;}
  /* Segmented controls are a row of filters, not a toolbar - on a phone they wrap
     onto as many lines as they need. The advisor's theme filter had seven of them. */
  .dseg{flex-wrap:wrap;gap:4px;}
  .sptop{flex-wrap:wrap;}
  .modal{padding:2vh 10px;} .msheet{padding:26px 18px 30px;}
  /* The purchase ledger is five columns of monospace. At 402 px the header alone wrapped onto
     two lines and stopped lining up with anything, so on a phone each lot becomes a small block
     instead: date and action, then units at price and how it filled, then the amount. */
  .mtxh{display:none;}
  .mtxr{grid-template-columns:1fr auto;gap:3px 12px;padding:13px 0;}
  .mtxr .rr{text-align:left;}
  .mtxr>span:nth-child(2){text-align:right;}
  .mtxr>span:nth-child(5){grid-column:1/-1;text-align:right;color:var(--ink);}
  .mstats{grid-template-columns:1fr 1fr;gap:18px 14px;}
  .mh-tags{flex-wrap:wrap;gap:6px;}
}

.sankeywrap{padding:44px 0;border-bottom:1px solid var(--line);}
.sankeywrap h3{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:400;margin-bottom:22px;}
.sankeywrap svg{width:100%;height:auto;display:block;}
.donhead{display:flex;align-items:center;gap:14px;padding-top:40px;padding-bottom:26px;flex-wrap:wrap;}
.donttl{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}
.dseg{display:flex;gap:2px;}
.skbtn{margin-left:auto;font-size:10px;padding:8px 15px;background:var(--gold);color:#0c0b07;border-color:var(--gold);}
.btnico{width:18px;height:18px;vertical-align:-4px;margin-right:8px;}
.btnico *{stroke-width:1.5;}
.tfbtn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--mute);background:none;border:none;cursor:pointer;padding:6px 11px;border-radius:0 6px 0 0;transition:color .2s,background .2s;}
.tfbtn:hover{color:var(--dim);}
.tfbtn.on{color:#0c0b07;background:var(--gold);}
#portfolio .spark{position:relative;}
.dsel{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:0 6px 0 0;padding:6px 8px;cursor:pointer;}
.rec{border-top:1px solid var(--line);}
.recline{display:flex;align-items:center;gap:16px;padding:18px 0;cursor:pointer;flex-wrap:wrap;}
.recact{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:0 6px 0 0;}
.recact.a-buy{background:var(--gain-bg);color:var(--gain);} .recact.a-sell{background:var(--loss-bg);color:var(--loss);} .recact.a-hold{background:var(--raise);color:var(--dim);} .recact.a-watch{background:transparent;border:1px solid var(--gold);color:var(--gold);}
.recsym{font-weight:600;font-size:18px;}
.recsec{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.recconf{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);}
.cbar{width:60px;height:4px;background:var(--raise);border-radius:2px;overflow:hidden;display:inline-block;}
.cbar i{display:block;height:100%;background:var(--gold);}
.recsrc{font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);white-space:nowrap;}
.recrat{font-size:14px;color:var(--dim);line-height:1.55;padding:0 0 16px;max-width:72ch;}
.recwhy{display:none;padding:0 0 18px;}
.rec.open .recwhy{display:block;}
.recpref{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--gold);}
.recav{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--loss);}
.recpick{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--gold);background:none;border:1px solid var(--gold);border-radius:0 6px 0 0;padding:5px 11px;cursor:pointer;transition:background .2s,color .2s;}
.recpick:hover,.recpick.on{background:var(--gold);color:#0c0b07;}
.buylist{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;margin-bottom:22px;background:var(--panel);border:1px solid var(--gold);border-radius:0 14px 0 0;}
.buylist.show{display:flex;}
.buylist .bll{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.buylist .bltag{font-family:'DM Mono',monospace;font-size:12px;color:#0c0b07;background:var(--gold);border-radius:0 6px 0 0;padding:5px 10px;cursor:pointer;}
.buylist .blnote{font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);margin-left:auto;}
.fxwrap{margin-top:24px;display:flex;flex-direction:column;gap:4px;}
.fxrow{padding:18px 0;border-top:1px solid var(--line);}
.fxhead{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;}
.fxc{font-weight:600;font-size:17px;} .fxtot{font-family:'DM Mono',monospace;font-size:14px;} .fxv{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);margin-left:auto;}
.fxbars svg{width:100%;height:26px;display:block;}
.fxleg{display:flex;gap:24px;margin-top:7px;font-family:'DM Mono',monospace;font-size:11px;color:var(--dim);flex-wrap:wrap;}
.fxrate{margin-left:auto;opacity:.66;}
.fxleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle;}
.fxrow{cursor:pointer;transition:background .18s;border-radius:0 10px 0 0;}
.fxrow:hover{background:linear-gradient(90deg,var(--panel),transparent);}
.fxgo{font-size:10px;color:var(--gold);margin-left:8px;opacity:0;transition:opacity .18s;}
.fxrow:hover .fxgo{opacity:1;}
.fxchart{margin-top:18px;}
.fxchart svg{width:100%;height:auto;display:block;}
.incwrap{margin-top:20px;display:flex;flex-direction:column;}
.incrow{display:grid;grid-template-columns:140px 1fr auto auto;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--line);}
.incsym{font-weight:600;font-size:15px;}
.incstar{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-left:6px;}
.incbar{height:8px;background:var(--raise);border-radius:0 4px 0 0;overflow:hidden;}
.incbar i{display:block;height:100%;background:var(--gold);}
.incy{font-family:'DM Mono',monospace;font-size:12px;color:var(--dim);min-width:44px;text-align:right;}
.incv{font-family:'DM Mono',monospace;font-size:13px;color:var(--ink);min-width:110px;text-align:right;}
.mapwrap{margin-top:20px;background:url("assets/world-dots.svg") center/contain no-repeat;border-radius:0 16px 0 0;}
.mapwrap svg{width:100%;height:auto;display:block;aspect-ratio:566.4/268.5;}
.mapglob{display:inline-block;color:var(--gold);margin-right:6px;}
.dsum{display:flex;gap:18px;align-items:baseline;justify-content:center;flex-wrap:wrap;padding:16px 0 2px;margin-top:10px;border-top:1px solid var(--line);font-family:'DM Mono',monospace;font-size:13px;}
.dsum .dsl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.mapwrap2{margin-top:18px;background:#0c0b07;border:1px solid var(--line);border-radius:0 16px 0 0;overflow:hidden;}
.mapwrap2 svg{width:100%;height:auto;display:block;}
.maplegend{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0 4px;font-family:'DM Mono',monospace;font-size:12.5px;color:var(--dim);}
.maplegend .mlg{display:flex;align-items:center;gap:8px;}
.maplegend .mlg i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.maplegend .mlgv{color:var(--mute);}
.mapclick{margin:10px 0 2px;font-family:'DM Mono',monospace;font-size:12.5px;color:var(--dim);}
.mapclick .mcl{color:var(--gold);letter-spacing:.08em;}
.mapwrap text{paint-order:stroke;stroke:rgba(12,11,7,.9);stroke-width:2.6px;stroke-linejoin:round;}
.srcrow{display:grid;grid-template-columns:1.5fr 1fr auto;gap:14px;align-items:center;padding:7px 0;font-family:'DM Mono',monospace;font-size:12px;}
.srcrow .sn{color:var(--dim);} .sw2{height:4px;background:var(--raise);border-radius:2px;overflow:hidden;} .sw2 i{display:block;height:100%;background:var(--gold);} .sst{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.vizbar{display:flex;gap:14px;justify-content:center;padding:40px 0 48px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.vbtn{font-size:13px;padding:12px 16px;flex:1 1 0;min-width:140px;max-width:200px;justify-content:center;text-align:center;}
.htf{display:flex;gap:2px;align-items:baseline;margin-bottom:6px;}
.periodperf{margin-right:auto;font-family:'DM Mono',monospace;font-size:13px;display:flex;gap:8px;align-items:baseline;}
.periodperf .ppl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.heropills{display:flex;gap:6px;margin-bottom:8px;}
.heropill{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#0c0b07;background:var(--gold);border:none;border-radius:0 6px 0 0;padding:4px 9px;cursor:pointer;}
#spark{touch-action:none;}
.wrec{align-self:flex-start;margin-top:4px;font-size:9px;padding:3px 7px;}
.wrecbox{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.wrh{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
.wrconf{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;color:var(--mute);}
.wrsrc{font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);margin-left:auto;}
.addhint{flex-basis:100%;font-family:'DM Mono',monospace;font-size:12px;color:var(--mute);display:none;align-items:center;gap:10px;padding-top:6px;}
.addhint.show{display:flex;}

/* ---- ZÁHLAVÍ STRÁNKY (v63) ---------------------------------------------------------------
   Otázka, kterou stránka zodpovídá, dynamická infografika a pod ní tvrdá čísla. Jeden prvek pro
   všech devět stránek — kdyby si ho každá napsala po svém, portál se za tři měsíce rozpadne na
   sbírku podobných stránek. Kreslí to `renderPageHead()` z /core.js, definice jsou v `PHEAD`. */
.phead{margin:0 0 44px;}
.pq{font-weight:200;font-size:clamp(23px,3.3vw,40px);line-height:1.14;letter-spacing:-.018em;
  color:var(--ink);max-width:26ch;margin:0 0 26px;}
.pviz{background:var(--panel);border:1px solid var(--line);border-radius:0 20px 0 0;padding:26px 28px 22px;}
.pviz svg{overflow:visible;}
.pnote{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--mute);
  margin-top:18px;line-height:1.5;}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px 34px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.pstat .k{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-bottom:9px;}
.pstat .v{font-weight:300;font-size:clamp(20px,2.1vw,27px);letter-spacing:-.01em;line-height:1.15;}
.pstat .v small{display:block;font-size:.5em;color:var(--dim);margin-top:6px;letter-spacing:0;
  line-height:1.45;font-weight:300;}
/* Na Portfoliu je záhlaví jen otázka — hodnotu knihy kreslí hero hned pod ním a dva taháky
   v jednom záhlaví by si konkurovaly. */
#portfolio .phead{margin-bottom:16px;}
@media(max-width:880px){
  .pviz{padding:20px 18px 18px;}
  .pstats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px;}
}

/* Interaktivita záhlaví (v63). KH: „jsme na webu, ne ve vytištěném pdf." Bublina následuje myš
   uvnitř karty a nikdy neuteče za její okraj; ukazovák je jen tam, kde kliknutí něco udělá. */
.pviz{position:relative;}
.pvhit{outline:none;}
.pvgo{cursor:pointer;}
.pvhit:hover{filter:brightness(1.22);}
.pvtip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;z-index:9;
  background:var(--panel-2);border:1px solid var(--line);border-radius:0 10px 0 0;
  padding:12px 15px;max-width:min(420px,72%);box-shadow:0 14px 40px rgba(0,0,0,.55);}
.pvtip.on{opacity:1;}
.pvtip b{display:block;font-weight:400;font-size:15px;color:var(--ink);letter-spacing:-.005em;}
.pvtip i{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:4px;}
.pvtip span{display:block;font-family:'DM Mono',monospace;font-size:11.5px;color:var(--dim);
  margin-top:7px;line-height:1.45;}
.pvtip em{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;color:var(--gold);margin-top:11px;padding-top:9px;border-top:1px solid var(--line);}
/* Řádek, na který se přišlo odkazem, se na dvě vteřiny označí — jinak čtenář přistane uprostřed
   osmnácti stejných řádků a neví, který z nich byl ten jeho. */
.rbkhit{outline:1px solid var(--gold);background:var(--panel-2);transition:background .3s;}
/* Bublina je od v65 jedna pro celý web a visí v `body`, ne v grafice — proto `fixed`. */
.pvtip{position:fixed;left:0;top:0;}
.dr[data-tip]{cursor:default;}
.dr[data-go],.dr[data-fn]{cursor:pointer;}
.dr[data-tip]:hover{background:var(--panel-2);}
/* Přepínač měny je od v67 v liště každé stránky — měna zobrazení je nastavení studia,
   ne stav jedné stránky. */
.barright .ebin{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);opacity:.8;margin-right:2px;}
.barright .bswitch{margin-right:14px;}
