/* Robot Overflow. Palette follows Robot Real2Sim (paper, teal-navy ink,
   dotted canvas). One status scale everywhere: green achieved/kept, amber at
   risk, red slipped, grey open. Segment hues appear only where segments matter
   (network rings, small dots); logos carry identity everywhere else. */
:root{
  --bg:#f3f6f7;--paper:#fff;--soft:#f7f9fa;--raised:#edf2f4;--ink:#172a35;--muted:#5d707e;--faint:#7c8d98;
  --line:#d7e3e5;--line-faint:#e8eff0;--focus:#1775da;--accent:#1775da;--accent-soft:#e6f0fb;
  --good:#16a34a;--good-soft:#e3f5e9;--warn:#e29a00;--bad:#d03b3b;--open:#a5b2ba;
  --moon:#5560c9;--s-maker:#2a78d6;--s-brain:#9b4fd9;--s-component:#1baf7a;--s-silicon:#eda100;--s-data:#d9437b;--s-deployer:#eb6834;--s-investor:#8a96a0;
  --fig-fill:#fff;--fig-line:#9aacb5;--fig-visor:#193b43;--fig-eye:#6ee1d0;--hl:#1775da;--hl-soft:#dcebfb;--pt:#c98500;--pt-soft:#fff2db;
  --e-supply:#7d8f9a;--e-partner:#3f86bd;--e-compete:#c96a6a;--e-alt:#8c7cc8;--e-invest:#aab5bc;--e-acq:#172a35;
  --card-shadow:0 1px 2px rgba(20,45,55,.05),0 4px 14px rgba(20,45,55,.05);--float-shadow:0 24px 80px rgba(15,39,49,.22);
  --gutter:clamp(12px,1.6vw,28px);
}
:root[data-theme="dark"]{
  --bg:#12212a;--paper:#182a35;--soft:#1d303c;--raised:#22394a;--ink:#edf5f6;--muted:#b0c0c8;--faint:#8fa2ad;
  --line:#344a55;--line-faint:#263b46;--focus:#8fc7ff;--accent:#6aafff;--accent-soft:#1f3b57;
  --good:#3ccf72;--good-soft:#1b3d2c;--warn:#f2b33d;--bad:#ef6b6b;--open:#5f7380;
  --moon:#aab3ff;--s-maker:#3987e5;--s-brain:#b98af0;--s-component:#199e70;--s-silicon:#c98500;--s-data:#e2628f;--s-deployer:#d95926;--s-investor:#7d8a94;
  --fig-fill:#1e303b;--fig-line:#5f7785;--fig-visor:#0c1a21;--hl:#6aafff;--hl-soft:#1f3b57;--pt:#e0a63a;--pt-soft:#3d3220;
  --e-supply:#8ea2ad;--e-partner:#6aafff;--e-compete:#e08a8a;--e-alt:#a99cf0;--e-invest:#5f7380;--e-acq:#edf5f6;
  --card-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.18);--float-shadow:0 24px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
button,a,[data-co],[data-tip]{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
svg{overflow:visible}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Top bar */
.topbar{position:relative;z-index:20;height:60px;display:flex;align-items:center;gap:14px;padding:0 var(--gutter);background:var(--paper);border-bottom:1px solid var(--line)}
.brand-area{display:flex;align-items:center;flex:1 1 0;min-width:max-content}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none;min-width:max-content}
.brand-mark{display:block;width:40px;height:40px;flex:none}
.brand-text strong{display:block;font-size:15px;letter-spacing:-.02em}
.brand-text small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.sample-pill{flex:none;font-size:11px;font-weight:650;color:var(--muted);border:1px dashed var(--faint);border-radius:999px;padding:3px 9px}
/* The navigation: three tabs, centered in the top bar (the brand and the right-hand buttons take equal room on either
   side), each a word with a chevron; the active one is underlined. A tab opens a menu of its views on hover or click,
   attached under the bar, the current view in the accent. */
.tabs{flex:none;align-self:stretch;display:flex;gap:4px}
.tab{position:relative;display:flex}
.tab-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 12px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.tab-btn .ic:not(.chev){display:none}
.tab-btn:hover,.tab.open .tab-btn{color:var(--ink)}
.tab.on .tab-btn{color:var(--ink)}
.tab.on .tab-t{position:relative}
.tab.on .tab-t::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:1px;background:var(--accent)}
.tab-btn .chev{width:12px;height:12px;opacity:.55}
.tab-menu{display:none;position:absolute;z-index:40;top:100%;left:0;min-width:200px;padding:8px;background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;box-shadow:var(--float-shadow)}
.tab.open .tab-menu{display:grid}
@media (hover:hover){.tabs:not(.picked) .tab:hover .tab-menu{display:grid}}
.tab-menu a{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:8px;color:var(--ink);font-size:13.5px;font-weight:500;white-space:nowrap}
.tab-menu a .ic{display:none;width:16px;height:16px;color:var(--muted)}
.tab-menu a:hover{background:var(--soft)}
.tab-menu a[aria-current="page"]{color:var(--accent);font-weight:600}
.tabs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.top-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0}
/* Search matches: a dropdown under the field (a full panel on phones). */
/* The company filter: a funnel with "All companies", or the first picked logos and a count. */
.cofilter{flex:none;display:flex;align-items:center}
.cofilter-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--muted);font-size:12.5px;font-weight:650;white-space:nowrap}
.cofilter-btn:hover{border-color:var(--accent);color:var(--ink)}
.cofilter-btn .ic{width:16px;height:16px}
.cofilter-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.cofilter:has(.cofilter-reset:not([hidden])) .cofilter-btn{border-radius:9px 0 0 9px}
.cf-logos{display:inline-flex}
.cf-logos .logo+.logo{margin-left:-6px;box-shadow:0 0 0 1.5px var(--accent-soft)}
.cofilter-reset{display:grid;place-items:center;width:28px;height:32px;margin-left:-1px;border:1px solid var(--accent);border-radius:0 9px 9px 0;background:var(--accent-soft);color:var(--muted)}
.cofilter-reset[hidden]{display:none}
.cofilter-reset:hover{color:var(--ink)}
.cofilter-reset .ic{width:13px;height:13px}
/* View controls: the network's relation types, as toggles with a line sample. */
.viewbar{flex:none;display:flex;align-items:center;gap:4px}
.viewbar:empty{display:none}
.vtoggle{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 7px;border:1px solid transparent;border-radius:8px;background:none;font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.vtoggle:hover{background:var(--soft);border-color:var(--line)}
.vtoggle svg{width:26px;height:10px;flex:none}
.vtoggle[aria-pressed="false"]{opacity:.4}
.vtoggle[aria-pressed="false"] span{text-decoration:line-through}
/* When the bar runs out of room it gives up, in order: the sample tag, the search box (an icon that opens
   over its neighbours), the words on the other tabs, every tab word and the relation words, the brand's words. */
.topbar.fit1 .sample-pill{display:none}
.topbar.fit3 .tab:not(.on) .tab-t{display:none}
.topbar.fit4 .tab-t,.topbar.fit4 .cofilter-btn .cf-text{display:none}
.topbar.fit5 .brand-text{display:none}
.fresh svg.moon,.ro-fresh-row .ic.moon{color:var(--moon)}
.src-link{display:inline-grid;place-items:center;vertical-align:-2px;width:16px;height:16px;border-radius:4px;color:var(--faint)}
.src-link:hover{color:var(--accent);background:var(--accent-soft)}
.src-link .ic{width:12px;height:12px}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.src-list a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.src-list .ic{width:13px;height:13px}
.tip .ic{width:11px;height:11px;vertical-align:-1px}
.ro-fresh{display:block}
.ro-fresh-row{display:grid}
.ro-fresh-row{grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;font-size:12px}
.ro-fresh-row .ic{width:16px;height:16px;margin-top:1px;color:var(--warn)}
.ro-fresh-row b{display:block;font-weight:600;white-space:nowrap}
.ro-fresh-row small{display:block;color:var(--muted);font-size:11px;white-space:nowrap}
.ds-menu .ds-panel:has(.ro-fresh-row){width:auto;min-width:210px}
.ds-menu{--ds-trigger-size:32px;--ds-trigger-radius:9px;--ds-trigger-bg:var(--soft);--ds-trigger-border:var(--line);--ds-trigger-ink:var(--muted);--ds-hover:var(--raised);--ds-surface:var(--paper);--ds-border:var(--line);--ds-track:var(--raised);--ds-selected:var(--paper);--ds-ink:var(--ink);--ds-ink-dim:var(--muted);--ds-ink-faint:var(--faint);--ds-focus:var(--focus)}
:root[data-theme="dark"] .ds-menu{--ds-selected:#2d4757}

/* Views */
#views{position:relative;height:calc(100vh - 60px);height:calc(100dvh - 60px)}
.view{position:absolute;inset:0;overflow:auto}
/* A hidden view stays hidden whatever display its own rules give it (Anatomy is a flex column). */
.view[hidden]{display:none!important}
.canvas-bg{background-color:var(--paper);background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:20px 20px}

/* Logos: a company's favicon on a white tile, or its initials when there is none. */
.logo{--s:22px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .26);background:#fff;border:1px solid var(--line);overflow:hidden}
:root[data-theme="dark"] .logo{border-color:transparent}
.logo img{width:78%;height:78%;object-fit:contain}
.logo .ini{font-weight:750;letter-spacing:-.03em;line-height:1;color:#193b43;white-space:nowrap}
.logo.noimg{background:color-mix(in srgb,var(--seg,var(--faint)) 16%,#fff)}
.seg-maker{--seg:var(--s-maker)}.seg-brain{--seg:var(--s-brain)}.seg-component{--seg:var(--s-component)}.seg-silicon{--seg:var(--s-silicon)}
.seg-data{--seg:var(--s-data)}.seg-deployer{--seg:var(--s-deployer)}.seg-investor{--seg:var(--s-investor)}
.tile{display:inline-grid;place-items:center;padding:0;border:0;background:none;border-radius:9px;transition:transform .12s}
.tile:hover{transform:translateY(-1px)}
.tile.lit .logo{box-shadow:0 0 0 2px var(--hl)}
.tile.lit-pt .logo{box-shadow:0 0 0 2px var(--pt)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 3px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:12px;font-weight:600;white-space:nowrap;max-width:100%}
.chip:hover{border-color:var(--accent)}
.chip.active{border-color:var(--hl);background:var(--hl-soft)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--seg)}

/* Shared */
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-shadow);padding:16px 18px;min-width:0}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--ink)}
.card-head{flex-wrap:wrap}
.card-head h2{margin:0;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.card-head .ic{color:var(--muted)}
.card-head .grow{flex:1}
.card-head .note{font-size:12px;color:var(--faint)}
/* The page head, the same on every page but Network: what the page shows (icon, name, a count or a summary that
   opens a list) or its view switch, then the page's controls. Wide screens set it on the page above the content. */
.page-head{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:34px;color:var(--ink)}
.page-head>.ic{width:18px;height:18px;color:var(--muted)}
.page-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.page-head .note{font-size:12.5px;color:var(--faint)}
.page-head .grow{flex:1}
.page-head .seg-toggle .ic{width:15px;height:15px}
/* Milestones' figures as chips in its head: the status mark, the count, the name; each opens its list. */
.st-chip .st{width:9px;height:9px}
.st-chip b{font-weight:700;color:var(--ink)}
.st-chip .sw.ring{width:10px;height:10px;box-shadow:inset 0 0 0 2.2px var(--seg)}
.kpi .k-st .sw.ring{width:14px;height:14px;box-shadow:inset 0 0 0 3px var(--seg)}
.seg-toggle{display:inline-flex;padding:3px;background:var(--raised);border-radius:10px;gap:2px}
.seg-toggle button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:0;border-radius:7px;background:none;font-size:12px;font-weight:650;color:var(--muted)}
.seg-toggle button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
:root[data-theme="dark"] .seg-toggle button[aria-pressed="true"]{background:#2d4757}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--seg)}
.st{display:inline-block;width:10px;height:10px;border-radius:50%}
.st.hit{background:var(--good)}.st.slipped{background:var(--bad)}.st.open{border:2px solid var(--open)}.st.risk{border:2px solid var(--warn)}
.pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:650;background:var(--raised);color:var(--muted);white-space:nowrap}
.pill.reported,.pill.sample{background:none;border:1px dashed var(--faint)}
.tip{position:fixed;z-index:90;max-width:300px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:var(--float-shadow);font-size:12px;pointer-events:none}
.tip .t-sub{color:var(--muted);margin-top:2px}
/* On touch screens: the way on, at the foot of a tip; the whole tip takes the tap. */
.tip.go{pointer-events:auto;cursor:pointer}
.tip.caret::after{content:"";position:absolute;left:var(--ax);bottom:-6px;width:10px;height:10px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.tip.caret.below::after{bottom:auto;top:-6px;transform:translateX(-50%) rotate(225deg)}
.tip-go{margin-top:7px;padding-top:6px;border-top:1px solid var(--line-faint);font-weight:700;color:var(--accent)}
.tip table{border-collapse:collapse;margin-top:4px}
.tip td{padding:1px 8px 1px 0}
.tip td:last-child{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.empty{font-size:12.5px;color:var(--faint)}

/* Small menus: a button that opens a list (news topics). */
.pop{position:relative;flex:none}
.pop-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.pop-btn .ic{width:14px;height:14px}
.pop-btn:hover,.pop-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--ink)}
.pop-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pop-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;width:max-content;min-width:210px;max-width:calc(100vw - 32px);max-height:min(60vh,420px);overflow:auto;padding:6px;display:grid;gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--float-shadow)}
.pop-menu[hidden]{display:none}
.pop-menu button{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;font-size:13px;font-weight:600;color:var(--ink);text-align:left;white-space:nowrap}
.pop-menu button:hover{background:var(--soft)}
.pop-menu button[aria-checked="true"]{background:var(--accent-soft);color:var(--accent)}
.pop-menu button .ic{width:16px;height:16px;color:var(--muted)}
.pop-menu button[aria-checked="true"] .ic{color:var(--accent)}
.pop-menu b{font-size:11.5px;font-weight:600;color:var(--faint);padding-left:10px}
.pop-menu span{overflow:hidden;text-overflow:ellipsis}

/* Pulse: a full-width grid */
.pulse{padding:18px var(--gutter) 40px;display:grid;gap:14px}
/* A page: figures across the top, then cards. Wide screens fit a page to the window, its cards scrolling inside. */
.page{padding:18px var(--gutter) 24px;display:flex;flex-direction:column;gap:14px}
.page.fill{height:100%}
.kpis{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.page.fill>.c-news{flex:1;min-height:0;max-height:none}
/* News: a news item's row (its companies, its title with its date and confirmed or reported mark, its tags, its
   outlet), then a line for each milestone or strategic move it reports, on a rule that starts under the title. */
.feed li.nw{display:block;padding:0}
.nrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto minmax(0,150px);gap:10px;align-items:center;padding:9px 0}
/* An item's logo carries the number of its other companies, which opens their logos. */
.nrow .logos{position:relative;display:block;width:22px;height:22px}
.nrow .logos .tile{display:block}
.more-cos{position:absolute;right:-8px;bottom:-6px;min-width:16px;height:16px;padding:0 4px;border:0;border-radius:999px;background:var(--muted);box-shadow:0 0 0 2px var(--paper);font-size:9.5px;font-weight:750;line-height:16px;color:var(--paper);letter-spacing:-.02em}
.more-cos:hover{background:var(--ink)}
.nrow .tail{white-space:nowrap}
.nrow .when{margin-left:2px;font-size:12px;font-weight:500;color:var(--faint)}
.nrow .sure{display:inline-grid;place-items:center;margin-left:5px;vertical-align:-3px;color:var(--faint);cursor:help}
.nrow .sure .ic{width:14px;height:14px}
.nrow .tags{display:flex;gap:4px}
.nrow .tg{padding:2px 7px;border-radius:6px;background:var(--raised);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.nrow .src{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .src:hover{color:var(--accent)}
.nrow .src .ic{width:11px;height:11px;margin-right:3px;vertical-align:-1px}
.kids{list-style:none;margin:-4px 0 10px 40px;padding:0;border-left:2px solid var(--line-faint)}
.feed .kids li{display:block;padding:0;border:0}
.kid{display:flex;align-items:flex-start;gap:8px;width:100%;padding:4px 10px;border:0;border-radius:0 8px 8px 0;background:none;font:inherit;font-size:13px;line-height:1.4;color:var(--ink);text-align:left;cursor:pointer}
.kid:hover{background:var(--soft)}
.k-mark{flex:none;display:grid;place-items:center;width:14px;height:18px;color:var(--muted)}
.k-mark .ic{width:14px;height:14px}
.k-t{min-width:0;font-weight:500}
.k-l{margin-left:6px;font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap}
.k-l.ms-s{margin-left:6px}
.k-ic{display:none}
.kid .nb{white-space:nowrap}
/* "+N": a small popup with the item's other companies. */
.co-pop{position:fixed;z-index:60;display:flex;flex-wrap:wrap;gap:6px;max-width:min(280px,calc(100vw - 16px));padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--float-shadow)}
.co-pop[hidden]{display:none}
/* The tag filter: the special tags (with icons) in a block, then the plain tags as chips. */
/* What confirmed and reported mean, under their chips. */
/* What we drew from a source: its own words, then our note. */
.quote{margin:0 0 10px;padding:6px 0 6px 14px;border-left:3px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink)}
.quote cite{display:block;margin-top:4px;font-size:12px;font-style:normal;color:var(--faint)}
.page.fill>.c-road{flex:1;min-height:0;max-height:none}
/* Finance: the fundraising chart takes the page. */
.page.fill>.c-cap{flex:1;display:flex;flex-direction:column;min-height:0}
.page.fill>.c-cap #capChart{flex:1;min-height:0;overflow:hidden}
/* Stacks: both views alike, the switch and legend on the page and the content on a card below
   (Anatomy's canvas scrolls inside its card). */
.stacks-page{height:100%;padding:18px var(--gutter);display:flex;flex-direction:column;gap:14px}
.anat-host{position:relative;flex:1;min-height:0;padding:0;overflow:hidden auto}
/* Milestones' figures: one per status, so they double as the chart's legend. */
.kpi{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px;padding:14px 18px}
.kpi .k-st{grid-row:1/3;display:grid;place-items:center;width:18px}
.kpi .k-st .st{width:14px;height:14px}
.kpi .value{grid-column:2;grid-row:1;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.kpi .label{grid-column:2;grid-row:2;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-news{display:flex;flex-direction:column;max-height:720px}
.c-news .feed{overflow:auto;min-height:0;padding-right:12px}
.feed.two{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.feed.two li:nth-child(2){border-top:0}
.feed .title a{color:inherit}
.feed .title a:hover{color:var(--accent)}
.feed .title .src .ic{width:11px;height:11px;margin-right:3px;vertical-align:-1px}
.lane-name{display:flex;align-items:center;gap:8px;cursor:pointer;height:32px}
.lane-name .nm{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-name.compact{height:24px;gap:7px}
.brief{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.brief li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;line-height:1.5}
.brief .logos{display:flex;gap:4px;padding-top:1px}
.chart-svg{display:block;max-width:none}
.axis text{font-size:10.5px;fill:var(--faint)}
.grid line{stroke:var(--line-faint)}
/* Capital flow: rounds as logos on a log scale, monthly totals under them. */
.cap .q-band{fill:var(--soft)}
.cap .grid.minor line{stroke-dasharray:2 4}
.cap .node .ring{stroke-width:2.2}
.cap-round:hover .ring{stroke-width:3.2}
.cap-month{cursor:default}
.cm-label{font-size:11px;font-weight:650;fill:var(--muted)}
.cap-axis{font-size:10.5px;font-weight:600;fill:var(--muted)}
.cm-total{font-size:10.5px;font-weight:600;fill:var(--faint)}
.cap-divide{stroke:var(--line-faint)}
.cap .cm-total{font-size:9.5px}
.sw.ring{width:11px;height:11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--seg)}
.ms-hit{fill:var(--good);stroke:var(--paper);stroke-width:2}
.ms-open{fill:var(--paper);stroke:var(--open);stroke-width:2}
.ms-risk{fill:var(--paper);stroke:var(--warn);stroke-width:2.4}
.ms-slip{fill:var(--bad);stroke:var(--paper);stroke-width:2}
.today-line{stroke:var(--accent);stroke-width:1.5}
.today-text{font-size:10.5px;font-weight:700;fill:var(--accent)}
.future-band{fill:var(--accent-soft);opacity:.45}
.lane-rule{stroke:var(--line-faint)}
/* Roadmaps scroll inside the card, under a frozen row of years. The scroller has no padding, so nothing shows
   through above the frozen row. */
.c-road{display:flex;flex-direction:column;max-height:760px}
#roadmap{overflow:hidden auto;min-height:0;overscroll-behavior:contain}
.road-head{position:sticky;top:0;z-index:2;background:var(--paper)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.filter{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:600;color:var(--muted)}
.filter .ic{width:14px;height:14px}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.feed{list-style:none;margin:0;padding:0}
.feed li{--date-w:46px;display:grid;grid-template-columns:var(--date-w) 22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line-faint)}
.feed li:first-child{border-top:0}
.feed .date{font-size:12px;color:var(--faint);white-space:nowrap}
:root[lang^="zh"] .feed li{--date-w:60px}
.feed .cat{color:var(--faint);display:grid;place-items:center}
.feed .title{font-size:13.5px;font-weight:600;line-height:1.4}
.feed .title .src{font-weight:500;color:var(--faint);font-size:12px;margin-left:6px;overflow-wrap:anywhere}
.feed .logos{display:flex;gap:4px}
.feed.no-logos li{grid-template-columns:var(--date-w) 22px minmax(0,1fr)}
.moves{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.moves li{display:grid;grid-template-columns:22px 24px minmax(0,1fr);gap:8px;align-items:center;padding:6px 0;font-size:12.5px}
.moves .m-ic{color:var(--muted);display:grid;place-items:center}
.moves .m-text b{font-weight:650}
.moves .m-date{display:block;font-size:11px;color:var(--faint)}
.sd{display:grid;gap:10px}
.sd-row{display:grid;grid-template-columns:24px minmax(0,1fr) 54px;gap:4px 10px;align-items:center;font-size:12.5px}
.sd-row .logo{grid-row:1/3}
.sd-row .name{font-weight:650}
.sd-bar{grid-column:2;display:flex;gap:2px;height:6px}
.sd-bar i{display:block;height:100%;border-radius:3px}
.sd-bar .hit{background:var(--good)}.sd-bar .slipped{background:var(--bad)}.sd-bar .open{background:var(--line)}
.sd-row .rate{grid-row:1/3;grid-column:3;text-align:right;font-weight:700}

/* Anatomy */
#view-anatomy{overflow:hidden}
.anat-plane{position:absolute;left:0;top:0;transform-origin:0 0}
.anat-lines{position:absolute;left:0;top:0;pointer-events:none}
.leader{fill:none;stroke:var(--fig-line);stroke-width:1.2}
.leader-halo{fill:none;stroke:var(--paper);stroke-width:4;opacity:.85}
.leader-dot{fill:var(--fig-line);stroke:var(--paper);stroke-width:2}
.anat-lines .on .leader{stroke:var(--hl);stroke-width:1.8}
.anat-lines .on .leader-dot{fill:var(--hl)}
.anat-lines .dim{opacity:.25}
.col-title{position:absolute;top:76px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.col-title span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.layer-card{position:absolute;width:380px;padding:11px 13px 10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow);cursor:pointer;overflow:hidden;transition:opacity .15s,border-color .15s,box-shadow .15s}
.layer-card:hover,.layer-card.on{border-color:var(--hl);box-shadow:0 0 0 3px color-mix(in srgb,var(--hl) 18%,transparent),var(--card-shadow)}
.layer-card.dim{opacity:.32}
.lc-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lc-head .ic{color:var(--muted);width:18px;height:18px}
.lc-head h3{margin:0;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.xray-tag{display:none;margin-left:auto;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.xray .xray-tag{display:inline-flex}
.xray-tag.in{background:var(--hl-soft);color:var(--hl)}
.xray-tag.pt{background:var(--pt-soft);color:var(--pt)}
.xray-tag.na{background:var(--raised);color:var(--faint)}
.lc-body{display:flex;flex-direction:column;gap:7px}
.lc-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lc-body .lc-group:has(.g-ic){position:relative;padding-left:28px}
.lc-group .g-ic{position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:26px;color:var(--faint)}
.lc-group .g-ic .ic{width:15px;height:15px}
/* Wide screens name the two rows ("Builds", "Sells"); phones keep the wrench and tag icons. */
.lc-group .g-ic .g-w{display:none;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
@media (min-width:761px){
  .lc-body .lc-group:has(.g-ic){padding-left:42px}
  .lc-group .g-ic{width:auto;place-items:center start}
  .lc-group .g-ic .ic{display:none}
  .lc-group .g-ic .g-w{display:block}
}
.anat-figure{position:absolute;width:400px;height:700px}
.anat-legend{position:absolute;display:flex;gap:14px;font-size:12px;color:var(--muted)}
.anat-legend span{display:flex;align-items:center;gap:6px}
/* The X-ray chip above the robot: the company being X-rayed, or how to X-ray one. */
.xray-chip:empty{display:none}
.xray-chip{position:absolute;z-index:3;top:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:var(--card-shadow);font-size:12.5px;color:var(--faint);white-space:nowrap}
.xray-chip>.ic{width:17px;height:17px}
.xray-chip:has(.xc-co){padding-left:6px;color:var(--ink)}
.xray-chip.pinned{border-color:var(--hl);box-shadow:0 0 0 3px color-mix(in srgb,var(--hl) 18%,transparent),var(--card-shadow)}
.xc-co{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;font-size:13px}
.xc-co:hover b{color:var(--accent)}
.xc-sub{color:var(--muted);font-size:12px}
.xc-x{display:grid;place-items:center;width:24px;height:24px;margin-right:-6px;border:0;border-radius:50%;background:var(--raised);color:var(--muted)}
.xc-x:hover{color:var(--ink)}
.xc-x .ic{width:12px;height:12px}
.sim-box{fill:color-mix(in srgb,var(--s-brain) 5%,transparent);stroke:color-mix(in srgb,var(--s-brain) 50%,transparent);stroke-width:1.5;stroke-dasharray:6 5}
.sim-label{font-size:10px;font-weight:750;letter-spacing:.08em;fill:var(--s-brain)}

/* The figure. Parts dim when another part is in focus. */
.fig .sh{fill:var(--fig-fill);stroke:var(--fig-line);stroke-width:1.6;stroke-linejoin:round}
.fig .lo{stroke:var(--fig-line);stroke-linecap:round}
.fig .li{stroke:var(--fig-fill);stroke-linecap:round}
.fig .ln{fill:none;stroke:var(--fig-line);stroke-width:1.4;stroke-linecap:round}
.fig .dk{fill:var(--fig-visor)}
.fig .eye{fill:var(--fig-eye)}
.fig .halo{fill:none;stroke:var(--fig-line);stroke-width:1.6;stroke-dasharray:3 4}
.fig .node{fill:var(--fig-fill);stroke:var(--fig-line);stroke-width:1.4}
.fig .stream{fill:none;stroke:var(--fig-line);stroke-width:1.4;stroke-dasharray:3 3}
.fig .spine{stroke:var(--fig-line);stroke-width:1.6;stroke-dasharray:2 4;opacity:.7}
.fig .ground{stroke:var(--line);stroke-width:1.4;stroke-dasharray:6 6}
.fig .part{transition:opacity .15s}
.fig.focus .part{opacity:.3}
.fig.focus .part[data-l="body"]{opacity:.6}
.fig.focus .part.on,.fig.focus .part.pt,.fig.focus .part.in{opacity:1}
.fig .part.on .sh,.fig .part.in .sh{fill:var(--hl-soft);stroke:var(--hl)}
.fig .part.on .lo,.fig .part.in .lo{stroke:var(--hl)}
.fig .part.on .li,.fig .part.in .li{stroke:var(--hl-soft)}
.fig .part.on :is(.ln,.halo,.node,.stream,.spine),.fig .part.in :is(.ln,.halo,.node,.stream,.spine){stroke:var(--hl);opacity:1}
.fig .part.on .node,.fig .part.in .node{fill:var(--hl-soft)}
.fig .part.pt .sh{fill:var(--pt-soft);stroke:var(--pt);stroke-dasharray:4 3}
.fig .part.pt .lo{stroke:var(--pt)}
.fig .part.pt .li{stroke:var(--pt-soft)}
.fig .part.pt :is(.ln,.halo,.node,.stream,.spine){stroke:var(--pt);opacity:1}
.fig.ghost .sh,.fig.ghost .ln{fill:none;stroke:color-mix(in srgb,var(--s-brain) 55%,transparent);stroke-dasharray:3 3}
.fig.ghost .lo{stroke:color-mix(in srgb,var(--s-brain) 55%,transparent)}
.fig.ghost .li{stroke:var(--paper)}
.fig.ghost .dk,.fig.ghost .eye{fill:none}
.fig.ghost:is(.on,.in) :is(.sh,.ln,.lo){stroke:var(--hl)}
.fig.ghost.pt :is(.sh,.ln,.lo){stroke:var(--pt)}
.fig.ghost.dim{opacity:.3}

/* Network */
#view-network{overflow:hidden}
/* On phones the Ecosystem switch is a bar over the canvas's top edge (wide screens show it under the tabs). */
.net-head{display:none}
#netSvg{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#netSvg:active{cursor:grabbing}
/* The bottom card: the time slider, and beside it the relation types (the network's legend and toggles). */
.timeline{position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:16px;width:min(1000px,calc(100% - 2 * var(--gutter)));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:10px 14px}
.tl-row{display:flex;align-items:center;gap:12px}
.tl-types{display:flex;gap:4px;padding-left:16px;border-left:1px solid var(--line-faint)}
.timeline .play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--soft);display:grid;place-items:center;flex:none}
.timeline input{flex:1;accent-color:var(--accent)}
.timeline .when{min-width:72px;font-weight:700;font-size:13px;text-align:left}
.band{fill:color-mix(in srgb,var(--raised) 45%,transparent);stroke:var(--line-faint)}
.band-label{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;fill:var(--faint)}
.node .ring{fill:var(--paper);stroke:var(--seg);stroke-width:3}
.node .ring-parent{fill:none;stroke:var(--seg);stroke-width:1.5;stroke-dasharray:3 3}
.node .ini{font-weight:750;fill:#193b43;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.node .label{font-size:11px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.node{cursor:pointer}
.node:focus{outline:none}
.node:focus-visible .ring{stroke-width:5}
.node.new .ring{stroke-dasharray:4 2}
.link{fill:none}
/* Replaying time only switches these classes, a month at a time, with no fades. */
.link.off{opacity:0!important;pointer-events:none}
/* Changes since the month before: everything else steps back; new links are bold in their own color, ended ones
   dotted, and a company that appeared or changed value wears a badge in the accent ("New", ↑, ↓), like the "New"
   tag on Companies. No hue of its own, since every hue on this map already means a segment. */
.net.diffing:not(.focus) .link:not(.added):not(.gone){opacity:.2}
.net.diffing:not(.focus) .node:not(.added):not(.up):not(.down){opacity:.5}
.net .link.added{stroke-width:3;opacity:1}
.net .link.gone{stroke-width:2.4;stroke-dasharray:.5 5;stroke-linecap:round;opacity:.9}
.net .nbadge>g{display:none}
.net.diffing .node.added .nb-new,.net.diffing .node.up .nb-up,.net.diffing .node.down .nb-down{display:inline}
.nbadge rect{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.nbadge text{font-size:9.5px;font-weight:750;fill:#fff;pointer-events:none}
/* Changes: a toggle chip, its dot in the badges' accent; on, it takes the accent like a picked chip. */
.diff-btn{flex:none;height:28px}
.diff-btn i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.diff-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.link.supplies{stroke:var(--e-supply);stroke-width:1.4}
.link.partner{stroke:var(--e-partner);stroke-width:1.6}
.link.competes{stroke:var(--e-compete);stroke-width:1.4;stroke-dasharray:5 4}
.link.alt{stroke:var(--e-alt);stroke-width:1.6;stroke-dasharray:1 4;stroke-linecap:round}
.link.invests{stroke:var(--e-invest);stroke-width:1.1;stroke-dasharray:2 3}
.link.acquires{stroke:var(--e-acq);stroke-width:2}
.link.unconfirmed{opacity:.55}
.net.focus .node{opacity:.14}
.net.focus .link{opacity:.05}
.net.focus .node.hi,.net.focus .link.hi{opacity:1}
.etag{cursor:pointer}
.etag rect{fill:var(--paper);stroke:var(--line);stroke-width:1}
.etag text{font-size:10.5px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.etag.unconfirmed rect{stroke-dasharray:3 2}
/* A pinned company: its edges are easy to point to, and the pair being looked at stands out. */
.link-hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}
.net.has-hot .link.hi:not(.hot){opacity:.22}
.net.has-hot .etag:not(.hot){opacity:.3}
.net.has-hot .node.hi:not(.hot){opacity:.45}
.net .link.hot{stroke-width:3}
.etag.hot rect{stroke:var(--accent);stroke-width:1.5}
.net-chip{position:absolute;z-index:6;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);display:grid;gap:4px;padding:6px 8px 6px 6px;border:1px solid var(--hl);border-radius:16px;background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--hl) 18%,transparent),var(--card-shadow);font-size:12.5px}
.net-chip[hidden]{display:none}
.nc-top{display:flex;align-items:center;gap:10px;min-width:0}
.nc-top .xc-co b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-counts{display:flex;gap:9px;color:var(--muted);font-weight:650;white-space:nowrap}
.nc-counts span{display:inline-flex;align-items:center;gap:3px}
.nc-counts .ic{width:14px;height:14px}
.nc-top .xc-x{margin:0 0 0 auto}
.nc-rel{display:flex;align-items:flex-start;gap:7px;padding:4px 4px 0 6px;border-top:1px solid var(--line-faint);color:var(--ink);line-height:1.35}
.nc-rel .ic{width:14px;height:14px;margin-top:2px;color:var(--accent)}
.nc-rel .t-sub{color:var(--muted)}
.tip .nc-rel{padding:5px 0 0;margin-top:5px;font-size:12px}
.col-head{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;fill:var(--faint)}

/* Bets */
/* Bets: a switch between the debates (one full-width card each, their stances in five aligned columns) and the
   bet map (two debates as a 5 × 5 grid). */
.bets{padding:18px var(--gutter) 26px;display:flex;flex-direction:column;gap:14px}
.debate .card-head{margin-bottom:6px}
.stance{position:absolute;transform:translateX(-50%);display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.stance.pole-end{color:var(--muted);font-weight:650}
.stance.up{transform:none}
.stance .ic,.ylab .ic{width:16px;height:16px}
.bmap{position:relative}
.bm-svg{position:absolute;left:0;top:0;pointer-events:none}
.bm-box{fill:none;stroke:var(--line)}
.bm-grid{stroke:var(--line-faint)}
.bm-mid{stroke:var(--line);stroke-dasharray:4 4}
.bmap .tile{position:absolute}
.bmap .bin{position:absolute;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-faint)}
/* The picked square: a tint under its logos and an outline over them (taps go through it). */
.bm-hl-bg{position:absolute;border-radius:9px;background:var(--accent-soft)}
.bm-hl{position:absolute;z-index:2;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--accent);pointer-events:none}
/* Wide screens: the picked square's companies in a column beside the map. */
@media (min-width:761px){
  .bet-map{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24%,320px);gap:22px;align-items:start}
  #bmList{overflow:auto;padding-left:18px;border-left:1px solid var(--line-faint)}
  #bmList .clist{list-style:none;margin:0;padding:0}
  #bmList .crow{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"logo title" "logo meta";gap:1px 10px;align-items:center;width:100%;padding:7px 6px;border:0;border-radius:8px;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
  #bmList .crow:hover{background:var(--soft)}
  #bmList .crow>.logo{grid-area:logo}
  #bmList .crow .title{grid-area:title;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bmList .crow .meta{grid-area:meta;min-width:0;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bmList .crow .meta .dot{margin-right:5px;vertical-align:1px}
  .bm-lh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:6px;padding:4px 6px 10px;border-bottom:1px solid var(--line-faint);font-size:13px;font-weight:650}
  .bm-lh span{display:inline-flex;align-items:center;gap:5px}
  .bm-lh .ax{font-weight:750;color:var(--faint)}
  .bm-lh .note{margin-left:auto;font-weight:600;color:var(--faint)}
  .bm-none{padding:8px 6px;font-size:13px;color:var(--faint)}
}
.bmap .end{position:absolute;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.bmap .end .ic{width:16px;height:16px}
.bmap .end.r{right:0}
.ylab{position:absolute;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:11.5px;font-weight:600;color:var(--faint);text-align:right;line-height:1.25}
.ylab.pole-end{color:var(--muted);font-weight:650}
.ylab.up{white-space:nowrap;justify-content:flex-start}
/* The bet map's axes are two small menus. */
.axis-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.axis-btn{max-width:100%;padding-left:9px}
.axis-btn span{overflow:hidden;text-overflow:ellipsis}
.axis-btn .ax{font-weight:750;color:var(--faint)}
.bm-ax{position:absolute;z-index:5;top:0;height:34px;display:flex;align-items:center}
.bm-ax.y{left:0;z-index:6}
.bm-ax.x{pointer-events:none}
.bm-ax.x .pop{pointer-events:auto}
.bm-ax.x{justify-content:center}
.bm-ax.y .pop-menu{right:auto;left:0}
.quad-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;fill:var(--faint)}
.pole{font-size:11.5px;font-weight:650;fill:var(--muted)}
.debate .card-head h2{cursor:help}
.track{min-width:0}
.track-in{position:relative}
.track-svg{position:absolute;left:0;top:0;pointer-events:none}
.track-svg .rail{stroke:var(--line);stroke-width:2}
.track-svg .shift-line{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 4}
.shift-when{font-size:10.5px;font-weight:600;fill:var(--faint);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.track-svg .shift-head{fill:var(--accent)}
.track-svg .tick{fill:var(--paper);stroke:var(--faint);stroke-width:1.5}
/* Each stance's block: a pale tile behind its logos. */
.track .bin{position:absolute;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-faint)}
.track .tile{position:absolute}
.track .ghost{position:absolute;border-radius:8px}
.track .ghost img,.track .ghost .ini{filter:grayscale(1);opacity:.45}
/* A moved stance's arrow is drawn in the SVG under the logos; this strip over it takes the click. */
.track .shift-hit{position:absolute;cursor:pointer}
.track .ghost,[data-bet]{cursor:pointer}
.track .end{position:absolute;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.track .end .ic{width:16px;height:16px}
.track .end.l{left:0}
.track .end.r{right:0}

/* Companies */
.companies{height:100%;padding:18px var(--gutter);display:flex;flex-direction:column;gap:14px}
.table-card{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.ctable td:first-child,.ctable th:first-child{position:sticky;left:0;z-index:1;background:var(--paper);box-shadow:inset -1px 0 0 var(--line-faint)}
.ctable th:first-child{z-index:3}
table.ctable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.ctable th{position:sticky;top:0;z-index:2;background:var(--paper);text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.ctable th.r,.ctable td.r{text-align:right}
.ctable th[data-dir="-1"]::after{content:" ↓";color:var(--accent)}
.ctable th[data-dir="1"]::after{content:" ↑";color:var(--accent)}
.stage{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.pips{display:inline-flex;gap:2px}
.pips i{width:6px;height:10px;border-radius:2px;background:var(--line-faint)}
.pips i.on{background:var(--accent)}
.pips.none{width:38px;height:10px}
/* A value that is the parent company's: lighter, after a small "parent" mark. */
.pval{color:var(--muted)}
.pval small{margin-right:5px;font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--faint)}
.ctable .latest a{color:var(--muted)}
.ctable .latest a:hover{color:var(--accent)}
.ctable .latest .d{color:var(--faint)}
.ctable .latest.is-new a{color:var(--ink);font-weight:600}
.pill.new{background:var(--accent);color:#fff;height:18px;padding:0 6px}
.ctable td{padding:9px 10px;border-bottom:1px solid var(--line-faint);vertical-align:middle;white-space:nowrap}
.ctable tbody tr{cursor:pointer}
.ctable tbody tr:hover td{background:var(--soft)}
/* The matrix's card has no padding (a scroller's padding would leave a strip where cells show through above
   and beside the frozen parts); its room comes from the table's margin. The 4px offsets and shadows cover the
   gaps between cells, so nothing peeks past the header row or the company column. */
.matrix{margin:12px 12px 0}
.matrix{width:calc(100% - 24px)}
.matrix thead th{position:sticky;top:4px;z-index:2;background:var(--paper);box-shadow:0 0 0 4px var(--paper),0 -8px 0 4px var(--paper)}
/* Two frozen header rows: the body / mind groups, then the layers. */
.matrix tr.grp th{height:24px;padding:2px 4px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-align:left;border-bottom:2px solid var(--line)}
.matrix tr.grp th span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.matrix tr.grp th:first-child,.matrix th.gap{border-bottom:0}
.matrix tr.lay th{top:32px}
.matrix th.rowh,.matrix thead th:first-child{position:sticky;left:4px;z-index:1;background:var(--paper);box-shadow:0 0 0 4px var(--paper),-8px 0 0 4px var(--paper)}
.matrix thead th:first-child{box-shadow:0 0 0 4px var(--paper),-8px -8px 0 4px var(--paper)}
.matrix thead th:first-child{z-index:3}
.matrix .gap{width:4px;min-width:4px;padding:0;background:none}
.ctable .co{display:flex;align-items:center;gap:10px;font-weight:650}
/* A value trend: the line since the first mark, and the change over the past year. */
.trend{display:inline-flex;align-items:center;gap:6px}
.trend .spark{display:block}
.trend small{font-size:11.5px;font-weight:650;color:var(--muted);text-align:right}
.ctable .latest{max-width:360px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.cov{display:flex;gap:2px}
.cov i{width:11px;height:14px;border-radius:2px;background:var(--line-faint)}
/* The Stack column's header names its cells: a small icon over each layer's cell. */
.ctable thead th{vertical-align:bottom}
.ctable th.cov-th{cursor:default}
.cov-ic{margin-top:6px}
.cov-ic i{display:grid;place-items:center;height:12px;background:none}
.cov-ic .ic{width:11px;height:11px;color:var(--muted)}
.cov i.in{background:var(--hl)}
.cov i.pt{background:none;border:1.5px solid var(--pt)}
.cov i.sup{background:var(--hl-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hl) 55%,transparent)}
.cov i.gap{margin-left:4px}
.cov i.no{background:linear-gradient(var(--faint),var(--faint)) center/7px 1.5px no-repeat;box-shadow:inset 0 0 0 1px var(--line-faint)}
.matrix{border-collapse:separate;border-spacing:4px;font-size:12px}
.matrix th{font-size:11px;font-weight:650;color:var(--muted);padding:4px;text-align:center;white-space:nowrap}
.matrix th .ic{display:block;margin:0 auto 3px;width:18px;height:18px}
.matrix th.rowh{text-align:left}
.matrix td{min-width:72px;height:40px;border-radius:9px;text-align:center}
.matrix td.in{background:color-mix(in srgb,var(--hl) 85%,var(--paper))}
.matrix td.pt{background:var(--pt-soft);border:1.5px dashed var(--pt)}
.matrix td.na{background:var(--soft)}
/* Not used (a source shows it): an empty cell with a short dash; no facts found stays a plain gray cell. */
.matrix td.no{background:none;box-shadow:inset 0 0 0 1px var(--line-faint)}
.matrix td.no i{display:inline-block;width:14px;height:2px;border-radius:1px;background:var(--faint);vertical-align:middle}
/* Sells it: a light-blue cell with a price tag, between in-house (solid blue) and bought (dashed amber). */
.matrix td.sup{background:var(--hl-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hl) 45%,transparent)}
.matrix td.sup .ic{color:var(--hl);width:16px;height:16px}
.matrix td .ic{color:#fff;width:18px;height:18px}
.matrix tfoot td{height:auto;background:none;font-size:11px;color:var(--muted);font-weight:650}

/* The company filter popup: one block per segment, chips that switch on and off. */
.filter-modal{width:min(1180px,100%)}
.f-badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.f-badge .ic{width:22px;height:22px}
.f-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.f-tools .grow{flex:1}
.f-tools .seg-toggle .ic{width:14px;height:14px}
.f-count{font-size:12.5px;font-weight:650;color:var(--muted)}
/* The company filter's "Find a company" field. */
.search{display:flex;align-items:center;gap:6px;height:32px;width:220px;flex:none;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--muted)}
.search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:13px;color:var(--ink)}
.f-find{width:240px}
.f-body{gap:4px}
.fseg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line-faint)}
.fseg:first-child{border-top:0}
.fseg[hidden]{display:none}
.fseg-head{display:flex;align-items:center;gap:6px;padding-top:2px}
.fseg-toggle{user-select:none;display:flex;align-items:center;gap:8px;padding:4px 6px 4px 2px;border:0;background:none;border-radius:8px;font-size:13px;text-align:left;white-space:nowrap}
.fseg-toggle:hover{background:var(--soft)}
.fseg-count{font-size:11.5px;font-weight:600;color:var(--faint)}
.fcheck{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--faint);background:var(--paper);color:#fff}
.fcheck .ic{width:12px;height:12px;stroke-width:2.6;display:none}
.fcheck.all{background:var(--accent);border-color:var(--accent)}
.fcheck.all .ic{display:block}
.fcheck.some{border-color:var(--accent);background:linear-gradient(var(--accent),var(--accent)) center/9px 2.5px no-repeat var(--paper)}
.fseg-chips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{user-select:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 3px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:12px;font-weight:600;white-space:nowrap;transition:opacity .12s,background .12s}
.fchip:hover{border-color:var(--accent)}
.fchip[hidden]{display:none}
.fchip.off{border-style:dashed;background:none;color:var(--faint)}
.fchip.off .logo{filter:grayscale(1);opacity:.45}
/* Where the filter leaves nothing to show. */
.nothing{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:28px 12px;font-size:13px;color:var(--faint);text-align:center}
.nothing>.ic{width:18px;height:18px}
.net-nothing{position:absolute;inset:0 0 80px;z-index:2}

/* Popup (like Robot Real2Sim's modal, with back/forward) */
.modal-layer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal-layer[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,22,31,.55)}
.detail-modal{position:relative;width:min(1280px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--float-shadow);animation:modal-in .18s ease-out;outline:none}
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-header{flex:none;padding:18px 22px 16px 24px;border-bottom:1px solid var(--line);background:radial-gradient(circle at top right,var(--accent-soft),transparent 62%)}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-id{display:flex;align-items:center;gap:14px;min-width:0}
.modal-id h2{margin:0;font-size:24px;letter-spacing:-.03em}
.modal-id .sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.modal-id .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted)}
.m-founders{flex-basis:100%;color:var(--muted)}
.m-founders b{font-weight:600;color:var(--ink)}
.home-link{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-weight:600}
.home-link .ic{width:12px;height:12px}
.modal-actions{flex:none;display:flex;gap:6px;align-self:flex-start}
.modal-button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:22px;line-height:1}
.modal-button:hover:not(:disabled){border-color:var(--accent)}
.modal-button:disabled{opacity:.35;cursor:default}
.modal-content{min-height:0;padding:18px 24px 24px;overflow:auto;overscroll-behavior:contain;display:grid;gap:18px}
.m-row{display:grid;gap:18px;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.m-row.one{grid-template-columns:minmax(0,1fr)}
/* Section titles: plain words, a size up from the text, and a rule above each section. */
.m-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.m-sec h3>.ic{display:none}
.modal-content>.m-sec{padding-top:18px;border-top:1px solid var(--line)}
.modal-content>.m-sec:first-child{padding-top:0;border-top:0}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kgrid div{padding:10px 12px;border:1px solid var(--line-faint);border-radius:12px;background:var(--soft)}
.kgrid span{display:block;font-size:11.5px;color:var(--muted)}
.kgrid b{display:block;font-size:20px;letter-spacing:-.02em}
.kgrid small{display:block;font-size:11px;color:var(--faint)}
.mission{margin:0;font-size:15px;line-height:1.5}
/* The company popup: one column of full-width sections, each using the width its own way. */
.m-sec h3 .legend{margin-left:auto;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;gap:4px 12px}
/* Stack today: the body's layers, then the mind's, each layer a cell; a bought layer names its partner. */
.sl-wrap{display:grid;gap:12px}
.sl-half h4{margin:0 0 6px;font-size:11.5px;font-weight:700;color:var(--ink)}
.sl-half h4 span{font-weight:500;color:var(--faint)}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:6px}
.sl-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px;padding:4px 10px;border:1px solid var(--line-faint);border-radius:10px;background:var(--soft);font-size:12.5px}
.sl-cell>.ic{width:16px;height:16px;color:var(--muted)}
.sl-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-cell .v{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3px;font-weight:650;white-space:nowrap}
.sl-cell.in{background:var(--hl-soft);border-color:color-mix(in srgb,var(--hl) 35%,transparent)}
.sl-cell.in .v,.sl-cell.in>.ic{color:var(--hl)}
.sl-cell.pt{background:var(--pt-soft);border:1px dashed var(--pt)}
.sl-cell.na{background:none;border-style:dashed}
.sl-cell.na .v,.sl-cell.na .sl-name,.sl-cell.na>.ic{color:var(--faint);font-weight:500}
.sl-cell.no{background:none}
.sl-cell.no .v,.sl-cell.no .sl-name,.sl-cell.no>.ic{color:var(--faint);font-weight:500}
.sl-cell.sup{grid-template-columns:16px auto minmax(0,1fr)}
.sl-co{display:inline-flex;align-items:center;gap:5px;max-width:150px;padding:2px 6px 2px 2px;border:0;border-radius:7px;background:none;color:var(--pt);font-weight:650}
.sl-co span{overflow:hidden;text-overflow:ellipsis}
.sl-co:hover{background:color-mix(in srgb,var(--pt) 14%,transparent)}
/* Relations: a block per kind, side by side across the width. */
.compass{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.compass .zone{border:1px solid var(--line-faint);border-radius:12px;padding:8px 10px;background:var(--soft);min-height:52px}
.compass .zone h4{margin:0 0 6px;font-size:11.5px;font-weight:700;color:var(--muted);display:flex;gap:6px;align-items:center}
.compass .zone h4 .ic{width:14px;height:14px}
.compass .zone h4 .num{margin-left:auto;font-weight:600;color:var(--faint)}
.compass .zone .tiles{display:flex;flex-wrap:wrap;gap:5px}
.compass .z-wide{grid-column:1/-1}
/* Bets: two columns of rails on wide popups; each pole is named (an icon on phones). */
.mini-bets{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:6px 36px}
.mini-bet{display:grid;grid-template-columns:118px minmax(0,1fr) 118px;gap:10px;align-items:center;color:var(--muted)}
.mb-pole{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap;min-width:0}
.mb-pole .mb-t{overflow:hidden;text-overflow:ellipsis}
.mb-pole.l{justify-content:flex-end}
.mb-pole.l .mb-t{order:2}
.mb-pole.l .ic{order:1}
.mb-pole .ic{display:none;width:16px;height:16px}
.mini-bet .mt{position:relative;height:22px}
.mini-bet .mt::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--line)}
.mini-bet .mt b{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--paper);transform:translateX(-50%)}
.mini-bet .mt i{position:absolute;top:6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--faint);background:var(--paper);transform:translateX(-50%)}
.mini-bet .mt em{position:absolute;top:10px;height:2px;background:var(--accent)}
/* The bet popup: each stance a company took on a debate, newest first, with our reason and its sources. */
.why-list{list-style:none;margin:12px 0 0;padding:0}
.why-list li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line-faint);font-size:13.5px}
.why-list li:first-child{border-top:0}
.why-list .d{font-size:12px;color:var(--faint);white-space:nowrap;padding-top:2px}
.why-list p{margin:3px 0 0;color:var(--muted);line-height:1.45}
.why-src{margin-top:5px;font-size:12.5px;line-height:1.4}
.why-src a{color:inherit;font-weight:600}
.why-src a:hover{color:var(--accent)}
.why-src .ic{width:12px;height:12px;margin-right:5px;vertical-align:-2px;color:var(--faint)}
.why-src .src{color:var(--faint);margin-left:6px;overflow-wrap:anywhere}
/* News and milestones: one list, grouped by year, upcoming milestones first. */
.nm-feed .nm-grp{display:block;padding:12px 0 4px;border-top:0;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.nm-feed .nm-grp:first-child{padding-top:0}
.nm-feed .nm-grp+li{border-top:0}
.nm-feed li{--date-w:62px}
:root[lang^="zh"] .nm-feed li{--date-w:74px}
.nm-feed .title{font-weight:450}
.nm-feed li.ms .title{font-weight:700}
/* A company's news in its popup: the News page's rows without the logos (they are all that company's). */
.co-news .nrow{grid-template-columns:minmax(0,1fr) auto minmax(0,150px)}
.co-news .kids{margin-left:2px}
.ms-s{margin-left:8px;font-size:11px;font-weight:700;white-space:nowrap}
.ms-s.hit{color:var(--good)}.ms-s.open{color:var(--muted)}.ms-s.risk{color:var(--warn)}.ms-s.slipped{color:var(--bad)}
/* Evolution: names | timeline (scrolls sideways) | now. Every row of a group has the same height. */
.evo{position:relative;display:grid;align-items:start;border:1px solid var(--line-faint);border-radius:12px;overflow:hidden}
.evo-col{min-width:0;background:var(--paper)}
/* The names' rule stops at group rows, whose title may run on over the timeline (on a paper ground). */
.evo-lab{position:relative;z-index:3}
.evo-lab .er:not(.eg){box-shadow:inset -1px 0 var(--line-faint)}
.evo-lab .eg{overflow:visible;white-space:nowrap}
.evo-lab .eg .eg-t{position:relative;padding-right:6px;background:var(--paper)}
/* The Now column floats over the timeline's right end, as wide as --nw. */
.evo-now{position:absolute;z-index:2;top:0;right:0;width:var(--nw);touch-action:pan-y}
/* Group rows read as one merged cell: a rule across, no rules down. */
.evo-now .er:not(.eg){box-shadow:inset 1px 0 var(--line-faint)}
.evo-h,.evo .eh{font-size:10.5px;font-weight:650;color:var(--faint)}
.evo-now .er{white-space:nowrap;overflow:hidden}
.evo-now small{overflow:hidden;text-overflow:ellipsis}

.evo .er{display:flex;align-items:center;min-width:0;padding:0 10px;font-size:12px}
.evo-lab .er{padding:0 8px 0 10px}
.evo .eg{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)!important}
/* Narrow popups: icons and logos sit centered in the names column, clear of its rule on both sides. */
.evo.narrow .evo-lab .er:not(.eg){justify-content:center;padding:0}
.evo.narrow .evo-lab .el-co{gap:0}
.eg-t{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.el-t{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-more{font-size:11.5px;font-weight:650;color:var(--faint)}
.el-ic{display:grid;place-items:center;width:100%;color:var(--muted)}
.el-ic .ic{width:15px;height:15px}
.el-co{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--ink);font-size:12px;font-weight:600}
.el-co span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-co:hover span{color:var(--accent)}
.evo-now .er{gap:6px}
.evo-now b{font-size:13px;font-weight:750}
.evo-now small{font-size:11px;font-weight:600;color:var(--faint)}
/* Phones: a figure's note sits under the figure, one line each, ending in "…" when it doesn't fit. */
.en-fig{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:100%;line-height:1.2}
.en-fig :is(b,small){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-in{font-weight:650;color:var(--hl)}
.en-pole{display:inline-grid;place-items:center;color:var(--ink)}
/* The next promise in the milestones row's Now column: its status dot and month; it opens the milestone. */
.en-ms{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.en-ms:hover{color:var(--accent)}
.en-pole .ic{width:16px;height:16px}
.en-pole.lean{opacity:.5}
.en-na{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-tag{color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evo-now .el-co{color:var(--pt)}
.evo-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;cursor:grab;scrollbar-width:thin}
.evo-scroll.dragging{cursor:grabbing;user-select:none}
.evo-svg{display:block}
.evo-yr{stroke:var(--line-faint)}
.evo-yt{font-size:10.5px;font-weight:650;fill:var(--faint)}
.evo-sep{stroke:var(--line)}
.evo .seg-in{fill:var(--hl)}
.evo .seg-pt{fill:var(--pt-soft);stroke:var(--pt);stroke-width:1.2;stroke-dasharray:3 2}
.evo-logo{cursor:pointer;line-height:0}
.evo-logo .logo{border-color:var(--pt)}
.evo .span{stroke:var(--faint);stroke-width:2.5;stroke-linecap:round}
.evo .span.out{stroke:var(--accent)}
.evo .span-dot{fill:var(--paper);stroke:var(--faint);stroke-width:2}
.evo .span-dot.out{stroke:var(--accent)}
.evo .span-hit{stroke:transparent;stroke-width:16;cursor:pointer}
.evo .end-x{stroke:var(--bad);stroke-width:2;stroke-linecap:round}
.evo .val-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.evo .val-area{fill:var(--accent-soft);opacity:.7}
.evo .val-dot{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.evo .bet-line{stroke:var(--line);stroke-width:2}
.evo .bet-dot{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.evo .bet-dot.first{fill:var(--paper);stroke:var(--faint)}
/* The lists behind the Pulse blocks. */
.kpi-act{text-align:left;font:inherit;color:inherit;cursor:pointer}
.kpi-act:hover{border-color:var(--accent)}
.kpi-act .label::after{content:"\00A0\203A";color:var(--faint)}
/* The capital flow's rounds in a line that opens their list. */
.note-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;margin-left:4px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.note-btn:hover{border-color:var(--accent);color:var(--ink)}
.note-btn .chev{font-size:14px;line-height:1;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.st-badge{background:var(--raised)}
.st-badge .st{width:16px;height:16px}
.seg-badge{background:var(--raised)}
.seg-badge .sw.ring{width:18px;height:18px;box-shadow:inset 0 0 0 3.5px var(--seg)}
/* One row per item, across the width: icon, company, what happened, and an amount or date at the end. */
.lgrp{margin-bottom:16px}
.lgrp h4{display:flex;align-items:center;gap:6px;margin:0 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.lgrp h4 .ic{width:15px;height:15px;color:var(--muted)}
.lrows{list-style:none;margin:0;padding:0}
/* A popup list's row reads like a news item: the logo, the words over a line of details, an amount at the end. */
.irow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"logo title end" "logo meta meta";gap:3px 12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-faint)}
.irow>.tile{grid-area:logo;align-self:start}
.irow .title{grid-area:title;min-width:0;font-size:14px;font-weight:600;line-height:1.38;color:var(--ink)}
.irow .title a{color:inherit}
.irow .title a:hover,.ir-co:hover{color:var(--accent)}
/* The details take the row's full width on one line; with no room left, the source keeps only its icon. */
.irow .meta{grid-area:meta;min-width:0;font-size:12.5px;line-height:1.45;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow .meta .src{color:inherit;white-space:nowrap}
.irow .meta .src:hover{color:var(--accent)}
.irow .meta .ic{width:11px;height:11px;margin-right:3px;vertical-align:-1px}
/* A line with no room wraps rather than cut its words or drop its source's name. */
.irow .meta.tight{white-space:normal}
.irow .end{grid-area:end;font-size:15px;font-weight:700;white-space:nowrap}
.ir-co{padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.irow .meta .ir-co{color:var(--muted)}
.seg-toggle.sm button{height:24px;padding:0 9px;font-size:11.5px}
.rel-head{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700}

/* Narrow screens */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page.fill{height:auto}
  .page.fill>.c-news{flex:none}
  .page.fill>.c-news .feed{overflow:visible}
  .page.fill>.c-road{max-height:min(760px,80vh)}
  .feed.two{grid-template-columns:1fr}
  .m-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Top bar: the brand with its name, then the company filter, search and settings (which holds the date). */
  .topbar{height:56px;gap:6px;padding:0 12px}
  .brand-area{flex:1 1 auto;min-width:0}
  .brand{gap:9px;min-width:0}
  .brand-mark{width:36px;height:36px}
  .brand-text strong{font-size:14.5px;white-space:nowrap}
  .brand-text small{display:none}
  .top-actions{flex:0 0 auto}
  .cofilter{margin-left:auto}
  .sample-pill,#fresh,.viewbar,.cofilter-btn:not(.on) .cf-text,.cf-logos{display:none}
  .cofilter-btn{padding:0 9px}
  /* Searching: the whole bar becomes the field (16px text, so iOS doesn't zoom), with Cancel at the end. */
  /* Form fields at 16px, so iOS doesn't zoom the page when one is focused. */
  .f-find input{font-size:16px}
  /* Tabs: a full-width bar along the bottom edge, clear of the home indicator. */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:0;justify-content:space-around;border-radius:0;background:var(--paper);border-top:1px solid var(--line)}
  .tabs svg{width:19px;height:19px}
  /* Three tabs across; a tap opens the tab's views in a panel just above the bar. */
  .tab{position:relative;flex:1;min-width:0}
  .tab-btn{width:100%;flex-direction:column;justify-content:center;gap:3px;height:48px;padding:0;border-radius:10px;font-size:11px}
  .tab-btn .chev,.tab-cur{display:none}
  .tab.on .tab-t{color:inherit}
  .tab.on .tab-btn{background:var(--raised);box-shadow:none}
  .tab.open .tab-btn{color:var(--ink)}
  .tab-btn .ic:not(.chev){display:block}
  .tab-btn .ic.chev{display:none}
  .tab.on .tab-t::after{display:none}
  .tab-menu{left:50%;right:auto;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%);width:max-content;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:14px}
  .tab:first-child .tab-menu{left:0;transform:none}
  .tab:last-child .tab-menu{left:auto;right:0;transform:none}
  .tab-menu a{height:46px;padding:0 14px;gap:12px;font-size:15px;font-weight:600}
  .tab-menu a .ic{display:block;width:19px;height:19px}
  .tab-menu a[aria-current="page"]{background:var(--accent-soft)}
  /* The top bar and the tab bar float over the page, which scrolls under them; scrolling down slides them away
     (app.js), and what sticks to the top follows the bar's edge. Network doesn't scroll, so it keeps its room. */
  /* Scrolling down slides and fades both bars away (app.js); the slides are transforms, which phones animate on the
     compositor, smooth even mid-scroll. The tab bar sits outside the top bar on phones (app.js), so the top bar's
     transform doesn't carry it. What sticks under the top bar follows it up. */
  .topbar{position:fixed;top:0;left:0;right:0;transition:transform .25s ease,opacity .25s ease}
  body.bars-hidden .topbar{transform:translateY(-100%);opacity:0}
  .tabs{transition:transform .25s ease,opacity .25s ease}
  body.bars-hidden .tabs{transform:translateY(100%);opacity:0}
  .page-head,.road-head{transition:transform .25s ease}
  body.bars-hidden :is(.page-head,.road-head){transform:translateY(-56px)}
  #views{position:fixed;inset:0;height:auto}
  .view{padding-top:56px;padding-bottom:calc(57px + env(safe-area-inset-bottom))}
  /* (A sticky element's top counts from inside that padding: top 0 sits just under the top bar.) */
  #view-network{top:56px;bottom:calc(57px + env(safe-area-inset-bottom));padding:0}
  /* Milestones' row of years sticks to the top: phones give Milestones no page head (its figures are a strip that
     scrolls away), so nothing sits above the row; under a page head it would stick below it. */
  .road-head{top:0}
  .page-head~* .road-head{top:52px}
  /* Pulse */
  .pulse,.page{padding:12px 12px 24px;gap:12px}
  .card{padding:14px}
  .c-news{max-height:none}
  .c-road{max-height:min(620px,75vh)}
  .c-news .feed{max-height:460px}
  .c-cap>.legend{margin-bottom:10px;gap:4px 10px;font-size:11.5px}
  .feed li,.feed.no-logos li{grid-template-columns:var(--date-w) minmax(0,1fr)}
  .feed .cat,.feed .logos{display:none}
  /* In a company's news, the milestone dot and topic icon stay, and the date keeps its distance. */
  .feed.nm-feed li,.feed.no-logos.nm-feed li{grid-template-columns:var(--date-w) 18px minmax(0,1fr);gap:8px}
  .feed.nm-feed .logos{display:none}
  .feed.nm-feed .cat{display:grid}
  .feed.nm-feed .nm-grp{display:block}
  .c-road .card-head{flex-wrap:wrap}
  .c-road .card-head .legend{flex-basis:100%;gap:4px 12px}
  /* Network: the bottom card holds the time slider and, under it, the relation types. */
  .timeline{bottom:10px;width:calc(100% - 20px);padding:10px 12px;grid-template-columns:minmax(0,1fr)}
  .tl-types{justify-content:space-between;padding-left:0;border-left:0}
  .diff-btn{margin-left:0}
  .timeline .when{min-width:64px}
  .tl-types .vtoggle{flex:1;justify-content:center;height:30px;padding:0 4px;font-size:11.5px;border:1px solid var(--line);background:var(--paper)}
  /* The pinned company's chip floats just above the bottom card, as Anatomy's does above the tab bar. */
  .net-chip{top:auto;bottom:calc(var(--tl-h,90px) + 18px);width:calc(100% - 20px);box-shadow:var(--float-shadow)}
  /* Bets */
  .bets{padding:12px 12px 12px}
  .axis-pick{flex-basis:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .axis-pick .pop{min-width:0}
  .axis-btn{width:100%}
  .axis-btn .ic:last-child{margin-left:auto}
  .debate{padding:10px 12px}
  /* Tables */
  .companies{padding:12px}
  .ctable td,.ctable th{padding:8px}
  .ctable .co{gap:8px}
  .ctable td:first-child{max-width:150px;white-space:normal}
  /* Popups open as pages of their own: the full screen, sliding in from the right, with a back arrow at the top left
     (the browser's back, or a swipe from the left edge, does the same). No frame, no backdrop. */
  .modal-layer{padding:0;place-items:stretch}
  .modal-backdrop{display:none}
  .detail-modal{width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;animation:page-in .22s ease-out}
  .modal-header{position:relative;padding:calc(14px + env(safe-area-inset-top)) 16px 14px}.modal-id h2{font-size:21px;padding-right:44px}.modal-content{padding:12px 16px 28px}
  /* The back button sits at the right end of the logo and name's row, so it takes no row of its own. */
  .modal-top{display:block}
  .modal-actions{position:absolute;top:calc(16px + env(safe-area-inset-top));right:12px}
  #navForward,#modalClose{display:none}
  .modal-actions :is(#navBack,#filterClose){display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0 2px 3px 0;border:0;border-radius:50%;background:none;font-size:30px;font-weight:300;line-height:1;color:var(--ink)}
  /* The header: the logo and the name on one row; the description and the details under them, the full width. */
  .modal-id{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px;align-items:center}
  .modal-id>div{display:contents}
  .modal-id h2{grid-column:2}
  .modal-id :is(.sub,.meta){grid-column:1/-1}
  /* Under the name, three paragraphs evenly apart: the description, then the details (segment and the rest), then who
     founded it. */
  .modal-id .sub{margin-top:12px;font-size:14px;line-height:20px}
  .modal-id .meta{margin-top:8px;gap:8px 0;font-size:13px;line-height:20px}
  .modal-id .meta .m-line{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;min-height:20px}
  .modal-id .meta .home-link{line-height:20px}
  .modal-id .meta .m-line .dot{margin-right:3px}
  .kline{list-style:none;margin:0;padding:0}
  .kline li{padding:9px 0;border-bottom:1px solid var(--line-faint);font-size:14px;line-height:1.4;color:var(--muted)}
  .kline b{margin-right:2px;font-size:16px;color:var(--ink)}
  .kline+.m-sec{border-top:0}
  .modal-id>.logo,.modal-id>.f-badge{width:40px!important;height:40px!important}
  /* Inside a page, no panes: the figures are a strip, relations and the anatomy are rows, all on hairlines. */
  .modal-content{gap:0}
  .modal-content>.m-sec{padding:16px 0}
  .kgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:-12px -16px 0;border-bottom:1px solid var(--line)}
  .kgrid div{padding:12px 16px;border:0;border-radius:0;background:none}
  .kgrid div:nth-child(even){border-left:1px solid var(--line-faint)}
  .kgrid div:nth-child(n+3){border-top:1px solid var(--line-faint)}
  .kgrid+.m-sec{border-top:0}
  .compass{gap:0}
  .compass .zone{min-height:0;padding:10px 0;border:0;border-top:1px solid var(--line-faint);border-radius:0;background:none}
  .compass .zone:first-child{border-top:0}
  .sl-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .sl-cell,.sl-cell.pt{min-height:40px;padding:6px 0;border:0;border-bottom:1px solid var(--line-faint);border-radius:0;background:none}
  .evo{border:0;border-radius:0}
  /* Bets name their poles with icons on phones. */
  .mini-bets{grid-template-columns:minmax(0,1fr)}
  .mini-bet{grid-template-columns:minmax(0,100px) minmax(0,1fr) minmax(0,100px);gap:8px}
  .mb-pole{white-space:normal;line-height:1.2}
  .mb-pole .mb-t{overflow:visible}
  .sl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .compass{grid-template-columns:minmax(0,1fr)}
  .compass .zone{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start;gap:10px}
  .compass .zone h4{margin:7px 0 0}
  .compass .zone h4 .num{display:none}
  .kgrid>div:last-child:nth-child(odd){grid-column:1/-1}
  .fseg{grid-template-columns:1fr;gap:6px}
  .f-tools .grow{display:none}
  .f-find{width:100%}
  /* Anatomy becomes a list: the figure, then one card per layer; the X-ray chip floats at the bottom. */
  /* Stacks on a phone: the switch across the width, the legend centred under it; Anatomy is its list of layer
     cards (the robot drawing would only repeat them). */
  #view-anatomy{overflow:auto}
  .stacks-page{height:auto;padding:12px}
  .anat-host{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
  .anat-figure{display:none!important}
  #anatHost{padding:0}
  #anatHost .anat-plane{padding:0 0 72px}
  .stacks-bar{justify-content:flex-start;gap:10px}
  .stacks-bar .seg-toggle,.bets-bar .seg-toggle,.news-bar .seg-toggle{flex:1 1 100%;display:flex}
  .stacks-bar .seg-toggle button,.bets-bar .seg-toggle button,.news-bar .seg-toggle button{flex:1;justify-content:center}
  .stacks-bar .grow,.bets-bar .grow,.news-bar .grow{display:none}
  .anat-plane{position:static;width:auto!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;gap:10px;padding:12px 12px 72px}
  .anat-lines,.col-title,.anat-legend{display:none}
  .anat-figure{position:static;order:1;width:min(240px,64vw)!important;height:auto;margin:0 auto}
  /* The chip floats above the tab bar: shown on a tap's hover, it must not push the cards down under the finger. */
  .xray-chip{position:fixed;z-index:20;left:50%!important;top:auto;bottom:calc(57px + 10px + env(safe-area-inset-bottom));transform:translateX(-50%);transition:transform .25s ease;max-width:calc(100% - 24px);box-shadow:var(--float-shadow)}
  body.bars-hidden .xray-chip{transform:translate(-50%,calc(57px + env(safe-area-inset-bottom)))}
  .xc-sub{overflow:hidden;text-overflow:ellipsis}
  .layer-card{position:static!important;order:3;width:auto!important;height:auto!important}
}
/* Phones, the News, Milestones and Finance pages: sections run the full width, one under another, and the page is
   the only thing that scrolls (no list scrolls inside it). The figures are one strip; News switches between its
   feed and its companies under a bar that stays at the top, with the month headings stuck under it. */
@media (max-width:760px){
  .page{padding:0 0 16px;gap:8px}
  .page .card:not(.kpi){border:0;border-radius:0;box-shadow:none;padding:14px 16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--paper);border-bottom:1px solid var(--line)}
  .kpi{display:flex;align-items:center;gap:8px;min-width:0;padding:11px 10px 11px 16px;border:0;border-radius:0;box-shadow:none}
  .kpi:nth-child(even){border-left:1px solid var(--line-faint);padding-left:12px}
  .kpi:nth-child(n+3){border-top:1px solid var(--line-faint)}
  .kpi .k-st{width:auto}
  .kpi .k-st .st{width:10px;height:10px}
  .kpi .value{font-size:18px}
  .kpi .label{min-width:0;font-size:12px}
  /* Milestones' and Funding's figures: one row of four, each its mark and number over its name. */
  .kpis.st4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kpis.st4 .kpi{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:5px;row-gap:2px;padding:10px 4px;text-align:center}
  .kpis.st4 .kpi:nth-child(even){padding-left:4px}
  .kpis.st4 .kpi+.kpi{border-left:1px solid var(--line-faint)}
  .kpis.st4 .kpi:nth-child(n+3){border-top:0}
  .kpis.st4 .kpi .k-st{grid-row:1;grid-column:1}
  .kpis.st4 .kpi .k-st .st{width:9px;height:9px}
  .kpis.st4 .kpi .k-st .sw.ring{width:10px;height:10px;box-shadow:inset 0 0 0 2.2px var(--seg)}
  .kpis.st4 .kpi .value{grid-row:1;grid-column:2;font-size:16px;line-height:1.15}
  .kpis.st4 .kpi .label{grid-row:2;grid-column:1/-1;max-width:100%;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Lists and the milestone chart grow with the page; the year row of the milestones stays at the top. */
  .page.fill>.c-road,.c-road,.c-news{max-height:none}
  #roadmap{overflow:visible}
  /* News: the feed's head (its count and topic menu) stays at the top, the month headings stuck under it. */
  .page .card:is(.c-news,.c-cos){padding:0}
  /* The page head is a bar that stays at the top, flush with what follows it; a page with two views makes the
     switch its whole width. */
  .page-head{position:sticky;top:0;z-index:4;flex-wrap:nowrap;gap:6px;height:52px;margin:0;padding:0 12px 0 16px;background:var(--paper);border-bottom:1px solid var(--line)}
  .page>.page-head,.bets:not(.pager)>.page-head{margin-bottom:-8px}
  .page-head:is(.bets-bar,.stacks-bar){padding:0 12px}
  .net-head{display:block;position:absolute;z-index:6;top:0;left:0;right:0}
  #netSvg{inset:0;height:100%}
  /* The News tab's switch fills its bar, as Bets' and Ecosystem's do. The feed's count and tag menu get a row of
     their own under it, where Milestones and Funding keep their figures. */
  .page-head.news-bar{padding:0 12px}
  .page-head .pop-btn{height:36px;max-width:52vw;padding:0 9px 0 11px;border-radius:10px;font-size:13px}
  .page-head .pop-btn span{overflow:hidden;text-overflow:ellipsis}
  /* (The tab bar under the page already shows its icon.) */
  .page-head>.ic{display:none}
  .page-head .note-btn{min-width:0;margin-left:0;padding:0 8px}
  .page-head .note-btn .nb-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .c-news .feed.phone{max-height:none;overflow:visible;padding:0}
  /* A news item: its logo (and "+N" under it), then its title with its date and mark; the title's link covers the
     item's row, under the logos and the mark. Its milestones and moves follow on a rule, indented a little. */
  .feed.phone li.nw{background:linear-gradient(var(--line-faint),var(--line-faint)) right top/calc(100% - 64px) 1px no-repeat}
  .feed.phone li.nw:first-child{background-image:none}
  .feed.phone .nrow{position:relative;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px}
  .feed.phone .nrow:has(.title a:active){background-color:var(--soft)}
  .feed.nm-feed.phone .nrow .logos{position:relative;z-index:1;display:block;width:36px;height:36px;margin-top:1px}
  .feed.phone .more-cos{right:-6px;bottom:-5px;min-width:20px;height:20px;padding:0 5px;font-size:11px;line-height:20px}
  .feed.phone .nrow .title{font-size:15px;line-height:1.38;font-weight:500;color:var(--ink)}
  .feed.phone .nrow .title a::after{content:"";position:absolute;inset:0}
  /* The confirmed or reported icon takes a finger-sized tap (it shows its meaning) without moving anything. */
  .feed.phone .nrow .sure{position:relative;z-index:1}
  .feed.phone .nrow .sure::before{content:"";position:absolute;inset:-10px}
  .feed.phone .nrow .when{font-size:12.5px}
  .feed.phone .kids{margin:-6px 16px 12px 33px}
  .feed.phone .kid{padding:5px 8px;font-size:13.5px}
  .feed.phone .k-l{display:none}
  .feed.phone .k-ic{position:relative;display:inline-grid;place-items:center;width:18px;height:16px;margin-left:4px;vertical-align:middle;color:var(--muted)}
  .feed.phone .k-ic>*{display:block}
  .feed.phone .k-ic .ic{width:14px;height:14px}
  .feed.phone .k-ic .st{width:9px;height:9px}
  /* In a popup the rows run the popup's width: no logo column, and the rule between rows spans it. */
  .co-news.phone li.nw{border-top:0;background-size:100% 1px}
  .co-news.phone li.nw:first-child{background-image:none}
  .co-news.phone .nrow{grid-template-columns:minmax(0,1fr);padding:11px 0}
  .co-news.phone .kids{margin:-5px 0 11px 2px}
  .feed.phone li.none{display:block;padding:16px}
}
/* Phones, Companies, Bets and Stacks: the same pattern as News. Each page's controls sit in a bar that stays at the top,
   sections run the full width, and nothing scrolls inside the page. Companies is a list of rows (logo, name, the
   figure it's sorted by, then segment, HQ and stage); the Stacks table fits all 14 layers across in small cells. */
@media (max-width:760px){
  .sort-menu button{grid-template-columns:minmax(0,1fr)}
  /* The sort button beside the Show menu: high to low, low to high, or by name. */
  .sort-btn{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-left:6px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--muted)}
  .sort-btn .ic{width:19px;height:19px}
  .sort-btn.off{color:var(--faint)}
  .clist{list-style:none;margin:0;padding:0}
  .crow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"logo title end" "logo meta meta";gap:3px 12px;align-items:center;width:100%;padding:11px 16px;border:0;
    background:linear-gradient(var(--line-faint),var(--line-faint)) right top/calc(100% - 64px) 1px no-repeat;font:inherit;color:var(--ink);text-align:left}
  .clist li:first-child .crow{background-image:none}
  .crow:active{background-color:var(--soft)}
  .crow>.logo{grid-area:logo}
  .crow .title{grid-area:title;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crow .end{grid-area:end;font-size:14px;font-weight:700}
  .crow .end.stage{gap:7px;font-size:13px;font-weight:600;color:var(--muted)}
  .crow .trend small{min-width:38px;font-size:12.5px}
  .crow.tall{grid-template-areas:"logo title end" "logo meta end"}
  .crow .meta{grid-area:meta;min-width:0;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crow .meta .dot{margin-right:6px;vertical-align:1px}
  /* Bets: the switch stays at the top over the debates; the bet map's axis menus scroll with it. */
  .bets{padding:0 0 16px;gap:8px}
  .bet-map>.axis-pick{margin-bottom:12px}
  .bets .card{border:0;border-radius:0;box-shadow:none}
  .bets .debate{padding:12px 16px 14px}
  /* Debates page by page: each debate fills the screen between the switch and the tab bar, and a swipe snaps to the
     next. The pager is the screen's only scroller (the bars stay put); a track wider than the screen scrolls
     sideways. Dots down the right edge show which debate is in view, and take a tap. */
  #view-bets.paged{overflow:hidden}
  .bets.pager{height:100%;padding:0;gap:0}
  .bets.pager .page-head{position:relative;transform:none!important}
  .deb-wrap{position:relative;flex:1;min-height:0}
  .deb-pager{height:100%;overflow:hidden auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
  .deb-pager::-webkit-scrollbar{display:none}
  .bets .deb-pager .debate{display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;padding:12px 24px 12px 16px}
  .deb-pager .card-head{flex:none}
  .deb-pager .track{flex:1;min-height:0;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .deb-pager .track::-webkit-scrollbar{display:none}
  .deb-dots{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid}
  .deb-dots button{display:grid;place-items:center;width:16px;height:18px;padding:0;border:0;background:none}
  .deb-dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:height .2s ease,background .2s ease}
  .deb-dots button[aria-current] i{height:14px;background:var(--accent)}
  /* The bet map's picked square (the fullest at first; a tap picks another) lists its companies under the map. */
  .bm-lh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;padding:12px 0 6px;border-top:1px solid var(--line-faint);font-size:13.5px;font-weight:650}
  .bm-lh span{display:inline-flex;align-items:center;gap:6px}
  .bm-lh .ax{font-weight:750;color:var(--faint)}
  .bm-lh .note{margin-left:auto;font-weight:600;color:var(--faint)}
  #bmList .crow{grid-template-columns:32px minmax(0,1fr) auto;padding:9px 0;background-size:calc(100% - 44px) 1px}
  #bmList li:first-child .crow{background-image:none}
  .bm-none{padding:10px 0;font-size:13px;color:var(--faint)}
  /* Stacks: the switch and the legend (and, over the table, the layer icons) stay at the top. */
  .stacks-page,.smx-page{padding:0;gap:0}
  /* Over the table, the layer icons join the head on a row of their own. */
  .page-head.stacks-bar:has(.smx-head){flex-wrap:wrap;gap:6px;height:auto;padding:8px 12px 6px}
  #anatHost .anat-plane{gap:8px;padding:8px 0 72px}
  .layer-card{border:0!important;border-radius:0!important;box-shadow:none!important}
  .smx-head,.smx-row{display:grid;grid-template-columns:28px repeat(8,minmax(0,1fr)) 5px repeat(6,minmax(0,1fr));gap:3px;align-items:center}
  .smx-head{flex:1 1 100%;height:26px;margin-top:2px;color:var(--muted)}
  .smx-head span{display:grid;place-items:center}
  .smx-head .ic{width:15px;height:15px}
  .page .card.smx{padding:10px 12px 16px;border:0;border-radius:0;box-shadow:none}
  .smx-row{height:34px;border-bottom:1px solid var(--line-faint)}
  .smx-row:last-child{border-bottom:0}
  .smx-row i{display:grid;place-items:center;height:22px;border-radius:5px}
  .smx-row i.in{background:color-mix(in srgb,var(--hl) 85%,var(--paper))}
  .smx-row i.pt{background:var(--pt-soft);border:1.5px dashed var(--pt)}
  .smx-row i.sup{background:var(--hl-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hl) 45%,transparent)}
  .smx-row i.na{background:var(--soft)}
  .smx-row i.no{background:none;box-shadow:inset 0 0 0 1px var(--line-faint)}
  .smx-row i.no::after{content:"";width:8px;height:2px;border-radius:1px;background:var(--faint)}
  .smx-row i .logo{border:0;background:#fff}
}
@media (hover:none){[data-tip]{cursor:pointer}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.node.off{opacity:0!important;pointer-events:none}
/* Wide screens, in the phones' design language: no panes. The current tab's views are underlined words in a bar under
   the tabs, centered under them. A view runs the page's full width in white sections parted by thin bands of the
   page's grey, and opens with a toolbar (its figures on the left, its controls on the right) when it has any. */
@media (min-width:761px){
  .page,.companies,.stacks-page,.bets{padding:0;gap:8px}
  :is(.page,.companies,.stacks-page,.bets) .card:not(.anat-host):not(.table-card){border:0;border-radius:0;box-shadow:none;padding:16px var(--gutter)}
  :is(.companies,.stacks-page) :is(.table-card,.anat-host){border:0;border-radius:0;box-shadow:none}
  /* A toolbar heads its view's content: a hairline under it, no band. Bands part peer sections (the debates). */
  .page-head.tools{min-height:52px;padding:8px var(--gutter);background:var(--paper);border-bottom:1px solid var(--line-faint)}
  .page-head.tools+*{margin-top:-8px}
  .page-head.center{justify-content:center}
  /* The last section reaches the bottom of the page, so no grey strip is left under a short view. */
  .page,.bets{min-height:100%}
  :is(.page,.bets)>:last-child{flex:1 0 auto}
  .page-head.center .grow{display:none}
  /* Tables run edge to edge; their first and last columns keep the page's margin. */
  .ctable :is(th,td):first-child,.matrix :is(th,td):first-child{padding-left:var(--gutter)}
  .ctable :is(th,td):last-child{padding-right:var(--gutter)}
}
@keyframes page-in{from{transform:translateX(30%);opacity:.3}to{transform:none;opacity:1}}
/* News on wide screens: the feed is the main column (its own scroller), the top stories over it, and beside it a rail
   with the context of the story under the pointer. Below 1000px the rail is left out. */
@media (min-width:761px){
  /* One body, like X or Reddit on a laptop: the whole page in the content's color, the content capped at 1600px and
     centered, so very wide screens see a slim page rather than stretched rows or grey margins. */
  /* The page itself scrolls, wherever the pointer is (as on X or Reddit); the rail stays in view beside the feed. */
  .page.news-page{height:auto;min-height:100%;gap:0;background:var(--paper)}
  .news-page>.news-wide{flex:1 0 auto;width:100%;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,26vw,440px)}
  .news-main{background:var(--paper);border-right:1px solid var(--line-faint)}
  .news-main>.c-news{max-height:none}
  .news-main>.c-news .feed{overflow:visible;padding-right:0}
  .news-main .feed li.nw{margin:0 -12px;padding:0 12px;border-radius:0;transition:background .12s;cursor:pointer}
  .news-main .feed li.nw.ctx{background:var(--soft);box-shadow:inset 3px 0 0 var(--line)}
  .news-main .feed li.nw.pinned{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
  .top-story{cursor:pointer}
  .top-story.pinned{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  .top-stories{padding:14px var(--gutter) 16px;background:var(--paper);border-bottom:1px solid var(--line-faint)}
  .top-stories[hidden]{display:none}
  .ts-h{margin:0 0 10px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .ts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .top-story{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"logo title" "logo meta";gap:6px 12px;align-content:start;padding:12px;border:1px solid var(--line-faint);border-radius:12px;background:var(--paper);transition:border-color .12s,background .12s}
  .top-story.ctx{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
  .top-story .logos{grid-area:logo;position:relative;width:36px;height:36px}
  .top-story .more-cos{right:-6px;bottom:-5px;min-width:18px;height:18px;font-size:10px;line-height:18px}
  .ts-t{grid-area:title;font-size:15px;font-weight:650;line-height:1.35;color:var(--ink)}
  .ts-t:hover{color:var(--accent)}
  .ts-m{grid-area:meta;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden}
  .ts-m .sure{display:inline-grid;place-items:center;color:var(--faint)}
  .ts-m .sure .ic{width:13px;height:13px}
  .news-rail{position:sticky;top:0;align-self:start;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow:auto;overscroll-behavior:contain;padding:16px 18px 24px;background:var(--paper)}
  /* Pinned: a pin at the top right (a click unpins); unpinned it isn't shown. */
  .r-unpin{display:none;position:absolute;top:10px;right:10px;z-index:1;width:30px;height:30px;place-items:center;border:0;border-radius:50%;background:var(--accent-soft);color:var(--accent);cursor:pointer}
  .r-unpin .ic{width:16px;height:16px}
  .news-rail.pinned .r-unpin{display:grid}
  .news-rail.pinned .r-co .chev{visibility:hidden}
  .r-aside{float:right;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
  .r-co{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"logo nm chev" "logo meta chev";gap:2px 12px;align-items:center;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
  .r-co>.logo{grid-area:logo}
  .r-nm{grid-area:nm;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r-co:hover .r-nm{color:var(--accent)}
  .r-meta{grid-area:meta;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r-meta .dot{margin-right:5px;vertical-align:1px}
  .r-co .chev{grid-area:chev;font-size:18px;color:var(--faint)}
  .r-val{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"v spark" "t spark";align-items:center;gap:0 12px;margin-top:14px}
  .r-val b{grid-area:v;font-size:20px;letter-spacing:-.02em}
  .r-val small{grid-area:t;font-size:11.5px;color:var(--faint)}
  .r-spark{grid-area:spark;justify-self:end}
  .r-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-faint)}
  .r-sec h4{margin:0 0 8px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .r-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
  .r-rows li{display:grid;grid-template-columns:5.5em minmax(0,1fr) auto auto;gap:8px;align-items:center;color:var(--muted)}
  .r-rows li>.num:first-child{white-space:nowrap}
  .r-rows b{color:var(--ink)}
  .r-anat .cov{gap:3px}
  .r-anat .cov i{width:16px;height:16px}
  .r-anat .cov-ic i{height:14px}
  .r-anat .cov-ic .ic{width:13px;height:13px}
  .r-bets{grid-template-columns:minmax(0,1fr);gap:4px}
  .r-bets .mini-bet{grid-template-columns:90px minmax(0,1fr) 90px;gap:8px}
  .r-bets .mb-pole{font-size:11.5px}
  .r-others{display:grid;gap:2px}
  .r-o{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .r-o:hover span{color:var(--accent)}
  .r-o b{font-size:12.5px;color:var(--muted)}
  .r-news{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .r-news a{display:block;font-size:13px;font-weight:550;line-height:1.35;color:var(--ink)}
  .r-news a:hover{color:var(--accent)}
  .r-news span{font-size:11.5px;color:var(--faint)}
}
@media (min-width:761px) and (max-width:1199px){.ts-t{font-size:14px}}
@media (min-width:761px) and (max-width:999px){
  .news-page>.news-wide{grid-template-columns:minmax(0,1fr)}
  .news-rail{display:none}
}



/* Bets: the screener. Wide screens: one table, each debate's column headed by its question over its three options,
   the companies' stances under them; the picked debates' columns are tinted, and a company that misses a pick
   (under "One bet off") shows that cell without the tint. */
.ic2{display:inline-flex;align-items:center;gap:1px}
.lean-btn .ic,.scr-clear .ic{width:13px;height:13px}
.lean-btn[aria-pressed="false"] .ic{opacity:.25}
.scr-clear{margin-left:0}
.scr-sum{font-size:13px;color:var(--muted);white-space:nowrap}
.scr-sum b{font-size:14px;color:var(--ink)}
@media (min-width:761px){
  .companies.scr{gap:0}
  .scr-head{gap:8px}
  .scr-hint{font-size:12.5px;color:var(--faint)}
  .scr-hint::before{content:"·";margin-right:8px}
  .scr-table thead th{padding:12px 6px 10px;vertical-align:bottom;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal;cursor:default}
  .scr-table thead th.scr-coh{padding-bottom:12px}
  .scr-q{display:block;width:100%;margin:0 0 8px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--ink);text-align:left;cursor:pointer}
  .scr-coh .scr-q{margin:0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
  .scr-q:hover{color:var(--accent)}
  .scr-q[data-dir="1"]::after{content:" ↑";color:var(--accent)}
  .scr-q[data-dir="-1"]::after{content:" ↓";color:var(--accent)}
  .scr-opts{display:grid;gap:3px}
  .scr-opt{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:4px;width:100%;height:28px;padding:0 8px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .scr-opt>.ic,.scr-opt>.ic2{justify-self:center;color:var(--muted)}
  .scr-opt>.ic{width:15px;height:15px}
  .scr-opt .ic2 .ic{width:11px;height:11px}
  .scr-opt span{white-space:nowrap}
  .scr-opt b{font-size:11.5px;font-weight:600;color:var(--faint)}
  .scr-opt:hover{border-color:var(--accent)}
  .scr-opt[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  .scr-opt[aria-pressed="true"] :is(.ic,b){color:var(--accent)}
  .scr-opt.zero{color:var(--faint)}
  .scr-opt.zero>:is(.ic,.ic2){opacity:.5}
  /* A picked debate's column, header included (opaque, for the frozen row). */
  .scr-table .on{background:color-mix(in srgb,var(--accent-soft) 65%,var(--paper))}
  .scr-table td.on.miss{background:var(--paper)}
  .scr-table tbody tr:hover td.on:not(.miss){background:var(--accent-soft)}
  .scr-table td{padding:7px 6px;white-space:normal}
  .scr-co{display:grid;grid-template-columns:28px auto;gap:10px;align-items:center;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
  .scr-nm{display:grid}
  .scr-nm b{font-size:13.5px;font-weight:600;white-space:nowrap}
  .scr-nm small{font-size:11.5px;color:var(--faint);white-space:nowrap}
  .scr-nm small .dot{margin-right:5px;vertical-align:1px}
  .scr-co:hover b{color:var(--accent)}
  .scr-c button{display:inline-flex;align-items:center;gap:6px;margin:-4px -6px;padding:4px 6px;border:0;border-radius:6px;background:none;font:inherit;font-size:12.5px;line-height:1.25;color:var(--ink);text-align:left;cursor:pointer}
  .scr-c button>.ic{flex:none}
  .scr-c button:hover{background:color-mix(in srgb,var(--raised) 70%,transparent)}
  .scr-c .ic{width:15px;height:15px;color:var(--muted)}
  .scr-c .ic2 .ic{width:12px;height:12px}
  .scr-c:is(.s0,.s4) button{font-weight:600}
  .scr-c:is(.s1,.s2,.s3) button{color:var(--muted)}
  .scr-c:is(.s1,.s3) .ic{opacity:.55}
  .scr-c.na{color:var(--faint)}
  .scr-c.on button,.scr-c.on .ic{color:var(--accent)}
  .scr-c.on.miss button,.scr-c.on.miss .ic{color:var(--faint)}
  /* No facts on a picked debate: a "?" in the column's tint, the company still in the running. */
  .scr-c.unk span{padding:0 2px;font-weight:750;color:var(--accent);opacity:.75}
  /* "One bet off" and an empty result: a row across the table, its words kept in view. */
  .scr-table tr.scr-sep td{position:static;padding:16px 10px 8px var(--gutter);border-bottom:1px solid var(--line);background:var(--paper);box-shadow:none;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);cursor:default}
  .scr-table tr.scr-sep td>span{position:sticky;left:var(--gutter);display:inline-flex;align-items:center;gap:6px}
  .scr-table tr.scr-sep b{color:var(--muted)}
  .scr-table tr.scr-empty td{padding:22px 10px 22px var(--gutter);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
  .scr-table tr.scr-empty b{font-weight:650;color:var(--ink)}
  .scr-empty .ic{width:16px;height:16px;color:var(--faint)}
  .scr-table tbody tr.scr-sep:hover td{background:var(--paper)}
}
/* Phones: the debates' buttons across the bar at the top (each opens its options), and under the count a row per
   company whose stances line up under those buttons: a pole's icon (filled when firm, outlined when leaning), both
   icons for Both, a dot when unknown; picked debates in the accent color. */
@media (max-width:760px){
  .page.scr-page{gap:0}
  .scr-page>.page-head{margin-bottom:0}
  .page-head.scr-bar{padding:0 12px}
  .scr-bar .grow{display:none}
  .scr-pills{flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:4px}
  .scr-bar .pop{position:static;min-width:0}
  .page-head .scr-pill{justify-content:center;width:100%;max-width:none;height:38px;padding:0;gap:0;border-radius:10px;color:var(--muted)}
  .scr-pill .ic{width:19px;height:19px}
  .scr-pill .ic2 .ic{width:14px;height:14px}
  .page-head .scr-pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  .scr-bar .scr-menu{left:12px;right:12px;top:calc(100% + 4px);width:auto;min-width:0;max-height:none}
  .scr-mh{padding:6px 10px 6px;font-size:12px;font-weight:700;color:var(--faint)}
  .scr-menu button{grid-template-columns:28px minmax(0,1fr) auto;height:44px;font-size:15px}
  .scr-menu button>:is(.ic,.ic2){justify-self:center}
  .scr-menu button .ic2 .ic{width:12px;height:12px}
  .scr-menu button b{font-size:13px}
  .scr-menu button.zero{color:var(--faint)}
  .scr-menu button.zero>:is(.ic,.ic2){opacity:.5}
  .scr-sumrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px 10px 16px;background:var(--paper)}
  .scr-sumrow .note-btn{height:30px;margin-left:0}
  .scr-words{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;font-weight:600;color:var(--accent)}
  .scr-words span{display:inline-flex;align-items:center;gap:5px}
  .scr-words .ic{width:15px;height:15px}
  .scr-words .ic2 .ic{width:12px;height:12px}
  .scr-list{list-style:none;margin:0;padding:0;background:var(--paper);border-top:1px solid var(--line-faint)}
  .scr-row{padding:10px 12px 12px}
  .scr-row+.scr-row{border-top:1px solid var(--line-faint)}
  .scr-row .scr-co{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:0 4px;border:0;background:none;font:inherit;color:var(--ink);text-align:left}
  .scr-row .title{min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scr-row .end{font-size:14px;font-weight:700}
  .scr-fp{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:4px;margin-top:8px}
  .scr-i{display:grid;place-items:center;height:30px;padding:0;border:0;border-radius:8px;background:var(--soft);color:var(--ink)}
  .scr-i .ic{width:17px;height:17px}
  .scr-i .ic2 .ic{width:12px;height:12px}
  .scr-i:is(.s1,.s3){background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
  .scr-i.s2{color:var(--muted)}
  .scr-i.na{background:none}
  .scr-i.na i{width:4px;height:4px;border-radius:50%;background:var(--line)}
  .scr-i.on{background:var(--accent-soft);color:var(--accent)}
  .scr-i.on:is(.s1,.s3){background:none;box-shadow:inset 0 0 0 1px var(--accent)}
  .scr-i.on.miss{background:none;box-shadow:inset 0 0 0 1px var(--line-faint);color:var(--faint)}
  .scr-i.on.unk{background:none;box-shadow:none;outline:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-1.5px;font-size:14px;font-weight:750;color:var(--accent)}
  .scr-sep{padding:18px 16px 8px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .scr-sep b{color:var(--muted)}
  .scr-empty{padding:22px 16px;font-size:13.5px;color:var(--muted)}
  .scr-empty>span{display:inline}
  .scr-empty .ic{width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--faint)}
  .scr-empty b{color:var(--ink)}
}
@media (max-width:760px){.scr-words.hint{font-weight:500;color:var(--faint)}}
/* Mid-size screens: the options drop their icons (the cells keep theirs), so the table fits without scrolling. */
@media (min-width:761px) and (max-width:1279px){
  .scr-opt{grid-template-columns:1fr auto;padding-left:8px}
  .scr-opt>:is(.ic,.ic2){display:none}
}