/* Generated by site/theme/build_theme.py from world/brand/theme.md (the B-Brain brand kit). Do not edit. */
:root{
  --paper:#F7F5F3;
  --surface:#FFFFFF;
  --ink:#1F2430;
  --text-muted:#5A5F6B;
  --border:#E4DEDB;
  --slate:#3A4150;
  --brain-pink:#E3A6A8;
  --pink-text:#9E4A50;
  --brand-ink:#1F2430;
  --brand-paper:#F7F5F3;
  --good:#008226;
  --watch:#8A5A00;
  --bad:#B8430B;
  --chart-1:#1F2430;
  --chart-2:#D27073;
  --chart-3:#5B6B9E;
  --chart-4:#9E4A50;
  --chart-5:#6E9584;
  --chart-6:#B18741;
  --bg:#F7F5F3;
  --text:#1F2430;
  --heading:#1F2430;
  --muted:#5A5F6B;
  --line:#888C95;
  --title-rule:#E3A6A8;
  --link:#9E4A50;
  --link-underline:#E3A6A8;
  --hue:#E3A6A8;
  --on-hue:#1F2430;
  --focus:#1F2430;
  --sea:#3A4150;
  --on-sea:#F7F5F3;
  --success:#008226;
  --warn:#8A5A00;
  --danger:#B8430B;
  --on-status:#FFFFFF;
  --pos:#008226;
  --neg:#B8430B;
  --sun:#E3A6A8;
  --on-sun:#1F2430;
  --sun-ink:#9E4A50;
  --deep:#1F2430;
  --on-deep:#F7F5F3;
  --deep-2:#3A4150;
  --bar:#1F2430;
  --hue-bar:#E3A6A8;
  --on-hue-bar:#1F2430;
  --c1:#1F2430;
  --c2:#D27073;
  --c3:#5B6B9E;
  --c4:#9E4A50;
  --c5:#6E9584;
  --c6:#B18741;
  --s1:#E0E2E4;
  --s2:#B3B6BD;
  --s3:#888D97;
  --s4:#7C818C;
  --s5:#707581;
  --s6:#444B59;
  --s7:#1F2430;
  --d1:#5B6B9E;
  --d2:#8791B4;
  --d3:#B4B7C8;
  --d4:#E4DEDB;
  --d5:#D0ACAB;
  --d6:#B97C7D;
  --d7:#9E4A50;
  --font-display:Manrope, system-ui, sans-serif;
  --font-sans:"Public Sans", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-tile:28px;
  --radius-full:9999px;
  --f-display:var(--font-display);
  --f-body:var(--font-sans);
  --f-mono:var(--font-mono);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --paper:#1F2430;
  --surface:#2A303D;
  --ink:#F7F5F3;
  --text-muted:#A9AFBC;
  --border:#3A4150;
  --pink-text:#E3A6A8;
  --brand-ink:#3A4150;
  --good:#4BB859;
  --watch:#F6B83D;
  --bad:#F08A4B;
  --chart-1:#F7F5F3;
  --chart-2:#E3A6A8;
  --chart-3:#8A9AD0;
  --chart-4:#D08B8E;
  --chart-5:#9BC2B4;
  --chart-6:#D9BC85;
  --bg:#1F2430;
  --text:#F7F5F3;
  --heading:#F7F5F3;
  --muted:#A9AFBC;
  --line:#747A88;
  --link:#E3A6A8;
  --focus:#F7F5F3;
  --success:#4BB859;
  --warn:#F6B83D;
  --danger:#F08A4B;
  --on-status:#1F2430;
  --pos:#4BB859;
  --neg:#F08A4B;
  --sun-ink:#E3A6A8;
  --deep:#3A4150;
  --bar:#3A4150;
  --c1:#F7F5F3;
  --c2:#E3A6A8;
  --c3:#8A9AD0;
  --c4:#D08B8E;
  --c5:#9BC2B4;
  --c6:#D9BC85;
  --s1:#3E4553;
  --s2:#535A67;
  --s3:#6A6F7B;
  --s4:#80848D;
  --s5:#9599A0;
  --s6:#C5C6C9;
  --s7:#F7F5F3;
  --d1:#8A9AD0;
  --d2:#626E90;
  --d3:#4E576F;
  --d4:#3A4150;
  --d5:#5F5460;
  --d6:#866770;
  --d7:#D08B8E;
  color-scheme:dark;
}
}
:root[data-theme="dark"]{
  --paper:#1F2430;
  --surface:#2A303D;
  --ink:#F7F5F3;
  --text-muted:#A9AFBC;
  --border:#3A4150;
  --pink-text:#E3A6A8;
  --brand-ink:#3A4150;
  --good:#4BB859;
  --watch:#F6B83D;
  --bad:#F08A4B;
  --chart-1:#F7F5F3;
  --chart-2:#E3A6A8;
  --chart-3:#8A9AD0;
  --chart-4:#D08B8E;
  --chart-5:#9BC2B4;
  --chart-6:#D9BC85;
  --bg:#1F2430;
  --text:#F7F5F3;
  --heading:#F7F5F3;
  --muted:#A9AFBC;
  --line:#747A88;
  --link:#E3A6A8;
  --focus:#F7F5F3;
  --success:#4BB859;
  --warn:#F6B83D;
  --danger:#F08A4B;
  --on-status:#1F2430;
  --pos:#4BB859;
  --neg:#F08A4B;
  --sun-ink:#E3A6A8;
  --deep:#3A4150;
  --bar:#3A4150;
  --c1:#F7F5F3;
  --c2:#E3A6A8;
  --c3:#8A9AD0;
  --c4:#D08B8E;
  --c5:#9BC2B4;
  --c6:#D9BC85;
  --s1:#3E4553;
  --s2:#535A67;
  --s3:#6A6F7B;
  --s4:#80848D;
  --s5:#9599A0;
  --s6:#C5C6C9;
  --s7:#F7F5F3;
  --d1:#8A9AD0;
  --d2:#626E90;
  --d3:#4E576F;
  --d4:#3A4150;
  --d5:#5F5460;
  --d6:#866770;
  --d7:#D08B8E;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
/* Role overrides (tokens only, world/brand/theme.md): the brand-ink header bar, brand blocks, pink highlights, control edges on --line */
.hdr{--surface:var(--bar);--bg:var(--deep);--text:var(--on-deep);--border:var(--bar);--hue:var(--hue-bar);--on-hue:var(--on-hue-bar);--ink:var(--on-deep);--link:var(--on-deep);--muted:var(--on-deep);--focus:var(--on-deep)}
.mk,.tile.hi,.hero .state{--hue:var(--deep);--on-hue:var(--on-deep)}
mark,.bigfig{--hue:var(--sun);--on-hue:var(--on-sun)}
.fbtn,.inp{--border:var(--line)}
/* Components (token-only). Grown from site/mockup/build_mockup.py; layout grammar of docs/reference/site-pages.md §3.2. */
/* S55 type scale (David 12 Oct: "I think it may be a little small ... compare to other sites and try and use something
   standard"; Zuse, world/brand/theme.md Type). Every text size in this file is one of these tokens; titles keep L35 and
   L11; figures (.mstrip .v, .bigfig, .harr), the wordmark and icon glyphs (x) are drawn sizes, not text sizes. BVIZ
   visuals, their tables and the SaaS matrices keep BVIZ's own 12px (docs/18 section 8) so every column fits at 1180;
   table heads are 12px caps at .05em tracking (was 10.5px at .08em) so no table grows wider than it was. */
:root{--fs-body:16px;--fs-text:15px;--fs-2:14px;--fs-small:12.5px;--fs-caps:12px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
/* body clips sideways rather than hiding: hidden made the body a scroll container, so the sticky header scrolled
   away with the page (found with the S58 Ask dock); clip keeps the window the scroller (hidden stays as the fallback) */
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.55 var(--f-body);overflow-x:hidden;overflow-x:clip}
a{color:var(--link);font-weight:400;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover,a:focus-visible{text-decoration:underline}
/* S77 links in running text (Wren; David 13 Oct, "please fix": the Summary read very pink; theme.md Components): a
   classless link inside written text is ink with a 1.5px brain-pink underline (--link-underline) and turns pink-text
   (--link) on hover and focus. Written text: the AI prose and summaries, markdown and the Ask B answer (.ab-b.md), the
   organisation cards' snippets and reasons, the names in a list row's meta line, a next step's What and Why. Links that
   stand alone (nav, card actions, crumbs, list and table titles, chips, buttons) keep the rules above */
.prose a:not([class]),.md a:not([class]),.hero-sum a:not([class]),.ocard .snip a:not([class]),.ocard .why a:not([class]),.list .meta a:not([class]),.ns dd:first-of-type a:not([class]),.ns dd:last-of-type a:not([class]){color:var(--text);text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:1.5px;text-underline-offset:.15em}
.prose a:not([class]):hover,.prose a:not([class]):focus-visible,.md a:not([class]):hover,.md a:not([class]):focus-visible,.hero-sum a:not([class]):hover,.hero-sum a:not([class]):focus-visible,.ocard .snip a:not([class]):hover,.ocard .snip a:not([class]):focus-visible,.ocard .why a:not([class]):hover,.ocard .why a:not([class]):focus-visible,.list .meta a:not([class]):hover,.list .meta a:not([class]):focus-visible,.ns dd a:not([class]):hover,.ns dd a:not([class]):focus-visible{color:var(--link);text-decoration-color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
ul.plain,ol.plain{padding:0;list-style:none}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:50;background:var(--surface);padding:8px}

/* header (S1 S7 S8 S9 S10; S33 one row as tidied 11 Oct 21:20; docs/21 decision 2): a brand-ink bar in both modes (the
   .hdr role override in build_theme.py maps the bar's tokens), the lockup, nav, Find, then Ask B, Claude, theme; Help
   floats bottom-right */
.hdr{position:sticky;top:0;z-index:20;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border)}
.hdr-in{margin:0;padding:6px 16px;display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;position:relative}
/* the lockup (docs/21 decision 6, BRAND.md Lockups): the kit's symbol inline and "B-Brain" as live text in Manrope 800
   at -3%, reversed on the bar (marks.lockup_svg sizes everything in em, so one font-size sets it: 20px draws the symbol
   28.8px high, about 120px wide in all), linking to the B-Brain site; the demo's and the portal's headers share it */
.lock{display:inline-flex;align-items:center;text-decoration:none;flex:none;color:var(--on-deep);padding:2px 0}
.lock:hover,.lock:focus-visible{text-decoration:none}
.lock .bb-lockup{font-size:20px}
.lock .bb-logo{width:47.47px;height:26px;display:block;flex:none} /* the S73 logo until the lockup markup lands */
.mk{width:36px;height:36px;display:block}
.mk rect{fill:var(--deep)}
.mk g{fill:var(--on-hue);stroke:var(--on-hue)}
.mk circle{fill:var(--sun)}
.lock .mk{width:30px;height:30px;display:block}
.hdr nav{order:5;flex:1 1 100%;min-width:0}
.hdr .tools{margin-left:0}
@media (min-width:1100px){.hdr nav{order:0;flex:1 1 auto}}
.hdr nav>ul{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none}
.hdr nav li{position:relative}
.hdr nav a{display:block;padding:6px 6px;border-radius:6px;color:var(--text);font-weight:400;font-size:var(--fs-2);text-decoration:none;white-space:nowrap}
.hdr nav a:hover,.hdr nav a:focus-visible{background:var(--bg);text-decoration:none}
.hdr nav .cur>a{box-shadow:inset 0 -3px 0 var(--hue-bar);border-radius:0}
.hdr nav .gh::after{content:"";display:inline-block;margin-left:5px;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-3px) rotate(45deg);opacity:.75}
.hdr nav .grp>ul{display:none;position:absolute;left:0;top:100%;z-index:30;min-width:220px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgb(0 0 0 / .25)}
.hdr nav .grp:hover>ul,.hdr nav .grp:focus-within>ul,.hdr nav .grp.open>ul{display:block}
/* S33 one row from 1100 (S34: the 1180 baseline minus a scrollbar is about 1163): on the wide bar the groups carry no chevron (as the specimen draws them; aria-haspopup stays) */
@media (min-width:861px) and (hover:hover),(min-width:1100px){.hdr nav .gh::after{display:none}}
/* S34 wide touch screens (an iPad 11-inch in landscape is 1180px; the one-row rules start at 1100): the labelled nav, a tap opens a group and a second
   tap or a tap outside closes it (nav.js); hover and focus do not open it there, so the second tap can close it */
@media (hover:none) and (min-width:1100px){.hdr.jsnav nav .grp:not(.open)>ul{display:none}}
.menu-t{display:none;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:8px;border:0;background:transparent;color:var(--text);font:600 var(--fs-2)/1 var(--f-body);cursor:pointer}
.menu-t svg{width:20px;height:20px}
.tools{display:flex;align-items:center;gap:4px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 var(--fs-2)/1 var(--f-body);background:var(--hue);color:var(--on-hue);border:0;border-radius:var(--radius-md);padding:10px 14px;cursor:pointer;text-decoration:none}
/* S32 the Claude logo tile (David 09:45): a 28px clay tile with a white burst in the same 38px button as the theme toggle.
   S72 (David 12 Oct: "Ask B should be some kind of Logo beside the claude icon not the pop up similar to help"; 21:00, of
   Rand's third set: "I like 1 can we use that"; about 21:08, a brain from his own sheet "but flipped"): Ask B's side-view
   brain, no tile, in the same 38px button immediately left of Claude, as high as the Claude tile. The brand kit (docs/21
   decision 2) makes it the Ask B bubble (marks.ask_b_svg) on the bar without a tile. Hover is a lighter square of the
   bar, focus a 2px brand-paper ring inside the button */
.hdr .ico.ask svg,.hdr .ico.claude svg{width:28px;height:28px}
.hdr .ico.ask svg{overflow:visible}
.hdr .ico.ask:focus-visible{outline:2px solid var(--on-deep);outline-offset:-2px;border-radius:8px}
.hdr .ico:hover{background:color-mix(in srgb,var(--on-deep) 12%,var(--bar))}
.btn:hover{filter:brightness(1.04);text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:0;background:transparent;color:var(--text);cursor:pointer;text-decoration:none;padding:0;font:600 var(--fs-2)/1 var(--f-body)}
.ico:hover{background:var(--bg)}
.ico svg{width:22px;height:22px;display:block}
.ico.txt{width:auto;padding:0 10px;gap:6px}
.theme-t .ic-dark,.theme-t .ic-light{display:none}
:root[data-theme="dark"] .theme-t .ic-light,:root[data-theme="light"] .theme-t .ic-dark{display:block}
:root:not([data-theme]) .theme-t .ic-auto{display:block}
.theme-t .ic-auto{display:none}
@media (max-width:860px){.ico.txt .lbl{display:none}}
/* S16, S34 the Menu button: under 861px, and on touch screens under 1100px; it opens the groups as a full-width
   tap-to-expand list (nav.js). A touch screen 1100px and wider keeps the labelled nav on the one header row */
@media (max-width:860px),(hover:none) and (max-width:1099px){
.menu-t{display:inline-flex;padding:0 8px}
.hdr-in{column-gap:8px}
.tools{gap:4px}
.hdr nav{order:4;flex-basis:100%}
.hdr.jsnav:not(.open) nav{display:none}
.hdr nav>ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:4px 0 8px}
.hdr nav a{padding:12px 8px;font-size:var(--fs-body);border-radius:0;border-top:1px solid color-mix(in srgb,var(--on-deep) 18%,transparent)}
.hdr nav .grp>ul,.hdr nav .grp:hover>ul,.hdr nav .grp:focus-within>ul{display:none;position:static;box-shadow:none;border:0;border-radius:0;background:transparent;padding:0 0 0 16px;min-width:0}
.hdr nav .grp.open>ul,.hdr:not(.jsnav) nav .grp>ul{display:block}
.hdr nav .grp.open>.gh::after{transform:translateY(1px) rotate(-135deg)}
.hdr nav .cur>a{box-shadow:inset 3px 0 0 var(--hue-bar)}
}
/* One header row down to 320px: Menu 79, Find 38, three 38px icons (Ask B, Claude, theme) and the gaps take about 250px,
   so a phone keeps the symbol and drops the name (the link's label still says B-Brain): under 480px the lockup is the
   symbol alone at 18px, under 360px the Menu button's padding is 6px */
@media (max-width:479px){.lock .bb-lockup{font-size:18px}.lock .bb-name{display:none}}
@media (max-width:359px){.menu-t{padding:0 6px}.lock .bb-logo{width:36.51px;height:20px}}
@media (max-width:400px){.hdr-in{column-gap:4px}}
.banner{background:var(--surface);color:var(--text);border-bottom:1px solid var(--border)}
/* S35: one thin line, "Data as of Fri 9 Oct 2026 · CRM 6 Oct · ...": one line at 1180px, wraps only on phones */
.banner-in{margin:0;padding:5px 16px;display:flex;gap:2px .5em;flex-wrap:wrap;align-items:baseline;font-size:var(--fs-2);line-height:1.5}
.banner b{font-weight:600}
.banner .bn-src{display:contents}
.banner .bn-s{font-size:var(--fs-small);color:var(--muted)}
.banner .bn-s,.banner .bn-asof{white-space:nowrap}
/* S80 the breadcrumb bar on every page, demo and portal (Halley; David 13 Oct: "WZINtel used bread crumbs as you
   navigate around the site, can you do that too?"; wz-intel's .navsticky): directly under the as-of banner, sticking
   just under the sticky header on scroll (--crumb-top is the header's height, set by the script after the bar; the
   fallback is the one-row header), on surface with a hairline below, 14px; crumbs text-muted, separators --line grey,
   the current page ink (the role tokens --muted and --text are the kit's text-muted and ink). It sits in the flow, so
   at rest it covers nothing, and anchors land below header and bar. On a phone the trail scrolls sideways rather than
   wrapping and each crumb is clamped with an ellipsis at about 40ch */
:root{--crumb-top:51px}
html{scroll-padding-top:calc(var(--crumb-top) + 48px)}
.subbar{position:sticky;top:var(--crumb-top);z-index:15;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px}
.crumbs{margin:0;font-size:var(--fs-2);line-height:1.45;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin:0;padding:8px 0;list-style:none}
.crumbs li{display:flex;align-items:baseline;min-width:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted);font-weight:400}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--text)}
.crumbs [aria-current] span{color:var(--text);font-weight:600}
@media (max-width:699px){
.crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -6px;padding:8px 6px}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li{flex:none;white-space:nowrap}
.crumbs li>a,.crumbs li>span{display:inline-block;max-width:40ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
}
@media print{.subbar{position:static}}

/* page and layout grammar */
.page{margin:0;padding:16px 16px 64px;display:grid;gap:16px}
.page>*{min-width:0}
.ptitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
/* L35 page titles (David 11 Oct 21:22, "simple and professional but does stand out as a Title"; Frutiger, candidate A):
   Public Sans 700 in ink; the brand's pink only as a short --title-rule under the title (and under the organisation line) */
.ptitle h1{font:700 clamp(1.6rem,3.2vw,1.9rem)/1.15 var(--f-body);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.ptitle h1::after,.hero:not(.hero-org) h1::after,.hero-org::after{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--title-rule);margin-top:10px}
.ptitle .sub{color:var(--muted);font-size:var(--fs-2)}
.sec{display:grid;gap:12px;min-width:0}
.sec>h2{font:700 1.2rem/1.25 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.sec>.note{margin-top:-6px}
/* page grid: world/brand/theme.md Layout L1-L10 */
.pg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch;min-width:0}
.pg>*{min-width:0}
.pg>.blk,.pg>.stack{grid-column:span var(--tr,2)}
.pg>.sec-h,.pg>.sec-n{grid-column:1 / -1}
.pg>.sec-h{font:700 1.2rem/1.25 var(--f-display);letter-spacing:-.02em;color:var(--text);margin-top:8px}
.pg>.sec-n{margin-top:-10px}
@media (min-width:1600px){.pg{display:flex;flex-wrap:wrap;--n:4}
  .pg>.blk,.pg>.stack{flex:1 1 calc((100% - (var(--n) - 1) * 16px) / var(--n) * var(--sp) + (var(--sp) - 1) * 16px);
    max-width:calc((100% - (var(--n) - 1) * 16px) / var(--n) * 3 + 32px)}
  .pg>.sec-h,.pg>.sec-n{flex:0 0 100%}
  .pg>[data-full]{flex:0 0 100%;max-width:100%}}
@media (min-width:2100px){.pg{--n:5}}
@media (max-width:1099px){.pg{grid-template-columns:repeat(2,minmax(0,1fr))}.pg>.blk,.pg>.stack{grid-column:span 1}
  .pg>[data-span="2"],.pg>[data-span="3"],.pg>.alone{grid-column:span 2}}
@media (max-width:699px){.pg{grid-template-columns:minmax(0,1fr)}.pg>[data-span]{grid-column:1 / -1}}
.note{font-size:var(--fs-2);color:var(--muted);font-style:italic}
.filt{display:flex;gap:8px;align-items:center}
.inp{font:400 var(--fs-2) var(--f-body);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;min-width:0;width:min(100%,360px)}
.foot{margin:0;padding:0 16px 40px;font-size:var(--fs-small);color:var(--muted)}
/* the portal footer's lockup (docs/21): ink on paper, so it follows the page in both modes; 16px draws it about 100px
   wide, above the kit's 96px minimum */
.foot-logo{display:inline-block;margin:0 0 10px;text-decoration:none}
.foot-logo:hover{text-decoration:none}
.foot-logo .bb-lockup{font-size:16px}
.foot-logo .bb-logo{width:36.51px;height:20px;display:block}

/* block card */
.blk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;position:relative}
.blk.bare{background:transparent;border:0;padding:0}
.bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bh h3{font:600 16px/1.25 var(--f-body);margin-right:auto;color:var(--text)}
.bh h3 a{color:var(--link)}
.bb{min-width:0;display:grid;gap:10px;align-content:start}
.clamp .bb{max-height:calc(var(--rs,1) * 300px);overflow:hidden;position:relative}
.clamp.open .bb{max-height:none}
.clamp:not(.open) .bb.over::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,var(--surface))}
.more{align-self:flex-start;font:600 var(--fs-small)/1 var(--f-body);color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer}
.bf{margin-top:auto;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--fs-small);color:var(--muted)}
.bf .mf{margin-left:auto;font-weight:500;font-size:var(--fs-small)}
.src{font:500 var(--fs-caps)/1 var(--f-mono);letter-spacing:.02em;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 6px;white-space:nowrap}
.src.ai{color:var(--on-sea);background:var(--sea);border-color:var(--sea)}
.asof{font:400 var(--fs-small) var(--f-mono);color:var(--muted)}
.pending{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;color:var(--muted);font-size:var(--fs-2);background:var(--bg)}
.pending b{color:var(--text);display:block;font-weight:600;margin-bottom:2px}
.pending.quiet{border-style:dotted;background:transparent;padding:8px 12px;font-size:var(--fs-2)}
.pending.quiet b{color:var(--muted);font-weight:600;font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.06em}
.blk-missing{border:2px dashed var(--danger);border-radius:8px;padding:12px;display:grid;gap:4px;color:var(--text)}
.lab{font:600 var(--fs-caps)/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
mark{background:var(--sun);color:var(--on-sun);font-weight:600;padding:1px 6px;border-radius:4px}
.pill{display:inline-block;font:600 var(--fs-small)/1 var(--f-body);padding:5px 9px;border-radius:var(--radius-full);white-space:nowrap;background:var(--border);color:var(--text)}
.pill.su{background:var(--success);color:var(--on-status)}
.pill.wa{background:var(--warn);color:var(--on-status)}
.pill.da{background:var(--danger);color:var(--on-status)}
.pill.ln{background:transparent;border:1px solid var(--border);color:var(--muted)}
.chip{display:inline-block;font:500 var(--fs-small)/1 var(--f-mono);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px;color:var(--text);background:var(--surface);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipgrp{display:grid;gap:6px}

/* basic blocks */
.mstrip{display:flex;flex-wrap:wrap;gap:10px 28px}
.mstrip>div{display:grid;gap:1px;min-width:90px}
.mstrip .k{font:600 var(--fs-caps)/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mstrip .v{font:500 clamp(1.2rem,2.4vw,1.5rem)/1.1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mstrip .n{font-size:var(--fs-small);color:var(--muted)}
.portal .mstrip .v{font:800 clamp(1.3rem,2.6vw,1.7rem)/1.1 var(--f-display);letter-spacing:-.02em}
.prose{display:grid;gap:8px;font-size:var(--fs-text)}
.prose .sum{font-size:var(--fs-text);line-height:1.6}
.prose ul,.md ul{margin:0;padding-left:20px}
.prose li+li,.md li+li{margin-top:3px}
.md{display:grid;gap:8px;font-size:var(--fs-text)}
.md h1,.md h2,.md h3,.md h4{font-family:var(--f-body);font-weight:700;line-height:1.25;color:var(--text);letter-spacing:-.01em}
.md h1{font-size:1.35rem}.md h2{font-size:1.2rem}.md h3{font-size:1.08rem}.md h4{font-size:1rem}
.md pre{overflow-x:auto;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;font:400 var(--fs-small)/1.5 var(--f-mono)}
.list{display:grid;gap:0;margin:0;padding:0;list-style:none;font-size:var(--fs-2)}
.list>li{padding:8px 0;border-top:1px solid var(--border);display:grid;gap:2px}
.list>li:first-child{border-top:0;padding-top:0}
.list span.t{font-weight:600}
.meta{font-size:var(--fs-2);color:var(--muted)}
.date{font:400 var(--fs-small) var(--f-mono);color:var(--muted);white-space:nowrap}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-2)}
th,td{text-align:left;padding:6px 10px 6px 0;border-top:1px solid var(--border);vertical-align:top}
thead th{border-top:0;font:600 var(--fs-caps)/1.2 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
td.r,th.r{text-align:right}
td.r{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.split{display:grid;gap:6px}
.split+.split{padding-top:10px;border-top:1px solid var(--border)}
.ailab{display:inline-block;font:600 var(--fs-caps)/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;background:var(--sea);color:var(--on-sea);padding:4px 7px;border-radius:4px;justify-self:start}
.status{font:700 1.05rem var(--f-body)}
.st-good{color:var(--pos)}.st-bad{color:var(--neg)}.st-warn{color:var(--warn)}
.ns{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:var(--fs-text);align-items:baseline}
.ns dt{font:600 var(--fs-caps)/1.6 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ns dd{margin:0}
.turns,.msgs,.trail{display:grid;gap:0;margin:0;padding:0;list-style:none}
.turns>li,.msgs>li,.trail>li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;padding:10px 0;border-top:1px solid var(--border)}
.turns>li:first-child,.msgs>li:first-child,.trail>li:first-child{border-top:0}
.turns .who,.msgs .who,.trail .who{font-weight:600;font-size:var(--fs-2)}
.msgs .body,.trail .body,.turns .body{white-space:pre-wrap;font-size:var(--fs-text)}
.fold>summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:var(--fs-2);margin-top:6px}

/* hero */
.hero{display:grid;gap:12px;grid-template-columns:auto minmax(0,1fr);align-items:center}
.hero .av,.hero .lg.hero-av{width:64px;height:64px}
.hero .lg.hero-av{border-radius:14px}
.hero-blank{display:inline-grid;place-items:center;background:var(--sea);color:var(--on-sea);font:700 1.6rem var(--f-body)}
.hero .meta{margin-top:4px;color:var(--muted)}
.hero-sum{margin-top:6px;color:var(--text)}
.hero h1{font:700 clamp(1.6rem,3.2vw,1.9rem)/1.15 var(--f-body);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.hero .kind{font:500 1.05rem var(--f-body);color:var(--muted)}
.hero .state{font:600 .95rem var(--f-body);background:var(--deep);color:var(--on-deep);padding:3px 10px;border-radius:5px}
.hero .top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.pills{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:6px}
.bigfig{font:800 clamp(1.4rem,3vw,2rem)/1 var(--f-display);letter-spacing:-.02em;background:var(--sun);color:var(--on-sun);padding:5px 10px;border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}

/* people rows (S2): logos and portraits */
.av{width:28px;height:28px;border-radius:50%;display:inline-block;vertical-align:middle;flex:none;object-fit:cover}
.lg{width:28px;height:28px;border-radius:7px;display:inline-block;vertical-align:middle;flex:none}
.av.sm,.lg.sm{width:22px;height:22px}
.av.lgx,.lg.lgx{width:40px;height:40px}
.faces{display:inline-flex;align-items:center}
.faces .av{margin-left:-6px;box-shadow:0 0 0 2px var(--surface)}
.faces .av:first-child{margin-left:0}
.faces .plus{font:500 var(--fs-small) var(--f-mono);color:var(--muted);margin-left:4px}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.crow:first-child{border-top:0}
.crow .tiles2{grid-row:1 / span 2;display:inline-flex;gap:4px}
.crow .tiles2 .lg,.crow .tiles2 .av{width:32px;height:32px}
.crow .ln1{min-width:0;font-size:var(--fs-2);line-height:1.3}
.crow .meta{grid-column:2 / span 2}
.tchip{grid-column:3;grid-row:1;font-size:var(--fs-small);line-height:1;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);background:var(--surface)}
.days-top{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;margin:-4px 0 8px}
.days-top .upd{font-size:var(--fs-small);color:var(--muted)}
.days{display:grid;gap:12px;grid-template-columns:repeat(var(--days,5),minmax(0,1fr))}
.day{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:grid;gap:4px;align-content:start;min-width:0}
.day h4{font:600 var(--fs-2)/1.25 var(--f-body);color:var(--text)}
.day .empty{font-size:var(--fs-small);color:var(--muted)}
@media (max-width:1040px){.days{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.days{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.days{grid-template-columns:minmax(0,1fr)}}
.ocards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ocard{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;display:grid;gap:6px;align-content:start}
.ocard .top{display:flex;gap:10px;align-items:center}
.ocard h4{font:600 var(--fs-text)/1.25 var(--f-body)}
.ocard .facts{font-size:var(--fs-small);color:var(--muted)}
.ocard .snip{font-size:var(--fs-2)}
.ocard .why{font-size:var(--fs-2);border-left:3px solid var(--sun);padding-left:8px}
.people{display:grid;gap:0;margin:0;padding:0;list-style:none}
.person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;align-items:center;padding:8px 0;border:0;border-top:1px solid var(--border);width:100%;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.people>li:first-child .person{border-top:0}
.person>.av{grid-row:1 / span 2}
.person[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--sea);padding-left:8px}
.person .nm{font-weight:600}
.person .ct{font:400 var(--fs-small) var(--f-mono);color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fbtn{font:500 var(--fs-2)/1 var(--f-body);border:1px solid var(--border);background:var(--surface);color:var(--text);padding:6px 10px;border-radius:var(--radius-full);cursor:pointer}
.fbtn[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.act{display:grid;gap:0;margin:0;padding:0;list-style:none}
.act>li{display:grid;grid-template-columns:92px 64px minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--border);align-items:center}
.act>li:first-child{border-top:0}
.act .ty{font:500 var(--fs-caps)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.act .tx{min-width:0}
@media (max-width:560px){.act>li{grid-template-columns:minmax(0,1fr) auto}.act .date,.act .ty{grid-column:1}}
.ochart{display:grid;gap:14px}
.ochart h4{font:600 var(--fs-caps)/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.ptile{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);min-width:0}
.ptile .nm{font-weight:600;font-size:var(--fs-2);display:block}
.ptile .ti{font-size:var(--fs-small);color:var(--muted);display:block}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font:400 var(--fs-caps) var(--f-mono);fill:var(--muted)}
.chart .strong{fill:var(--text);font-weight:500}
.chart .gl{stroke:var(--border);stroke-width:1;fill:none}
.chart .mk-l{stroke:var(--muted);stroke-width:1.25;stroke-dasharray:3 3}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-small);color:var(--muted);margin:0;padding:0;list-style:none}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.smx{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.smx figure{display:grid;gap:2px}
.smx figcaption{font:600 var(--fs-caps)/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
details.tfb>summary{cursor:pointer;font-size:var(--fs-small);color:var(--muted)}

/* drawers: help (S10); dialogs share the shell */
.drawer{position:fixed;inset:0 0 0 auto;width:min(560px,100vw);height:100vh;max-height:none;margin:0 0 0 auto;border:0;border-left:1px solid var(--line);padding:0;background:var(--surface);color:var(--text);overflow:auto}
.drawer::backdrop{background:rgb(0 0 0 / .35)}
.drawer .dh{position:sticky;top:0;display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
.drawer .dh h2{font:700 1.2rem var(--f-body);color:var(--text);margin-right:auto}
.drawer .db{padding:16px 18px 32px}
.x{background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--text);font-size:18px;line-height:1}
/* Find in the header row (S15, S33; the breadcrumb bar, S80, is with the banner above): a 38px field on the brand-ink
   bar with a 3:1 edge (--on-deep 60% on --bar); on a phone a 38px icon that opens over the row on focus */
.hsearch{position:relative;flex:1 1 110px;max-width:240px;margin-left:auto;min-width:110px}
.hsearch .hs-ic{position:absolute;left:9px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;color:var(--text)}
.hsearch input{width:100%;height:38px;font:400 var(--fs-2) var(--f-body);color:var(--text);background:color-mix(in srgb,var(--on-deep) 10%,var(--bar));border:1px solid color-mix(in srgb,var(--on-deep) 60%,var(--bar));border-radius:var(--radius-md);padding:0 10px 0 34px;-webkit-appearance:none;appearance:none}
.hsearch input:focus{outline:2px solid var(--on-deep);outline-offset:1px}
.hsearch input::placeholder{color:var(--text);opacity:.85}
.hs-list{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;min-width:280px;margin:0;padding:4px;list-style:none;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgb(0 0 0 / .18)}
.hs-list{background:var(--surface);color:var(--text)}
.hs-list li>a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:6px 8px;border-radius:6px;color:var(--link)}
.hs-list .meta{grid-column:2;font-size:var(--fs-small);color:var(--muted)}
.hs-list li>a>.tile{grid-row:1 / span 2;width:22px;height:22px;border-radius:5px}
.hs-list .tile.blank{display:inline-grid;place-items:center;background:var(--sea);color:var(--on-sea);font:700 var(--fs-caps) var(--f-body)}
.hs-grp{font:600 var(--fs-caps)/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 8px 4px}
.hs-list{max-height:70vh;overflow:auto}
.hs-list li[aria-selected="true"]>a{background:color-mix(in srgb,var(--line) 18%,transparent)}
.hs-none{padding:8px;font-size:var(--fs-2);color:var(--muted)}
@media (max-width:600px){.hsearch{flex:0 0 38px;min-width:0}
  .hsearch input{padding:0 0 0 38px;cursor:pointer}
  .hsearch input::placeholder{color:transparent}
  .hsearch .hs-ic{left:10px}
  .hsearch:focus-within{position:absolute;left:16px;right:16px;top:6px;z-index:40;max-width:none}
  .hsearch:focus-within input{cursor:text;background:var(--bar);font-size:var(--fs-body)}
  .hsearch:focus-within input::placeholder{color:var(--text)}}
/* S22 stamps, lead sentence, data-freshness strip */
.bh .stamp{font:400 var(--fs-small) var(--f-mono);color:var(--muted);white-space:nowrap}
.blk p{font-size:var(--fs-text);line-height:1.6}
.prose .sum b{font-weight:600;color:var(--text)}
.sources{display:flex;flex-wrap:wrap;gap:6px}
.sbadge{font-size:var(--fs-small);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted)}
.sbadge b{color:var(--text);font-weight:600}
/* S21 organisation hero: one title line */
.hero-org{display:block}
.hero-org .hline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.hero-org h1{font:700 clamp(1.6rem,3.2vw,1.9rem)/1.15 var(--f-body);color:var(--text)}
.hero-org .tline{font:500 1.1rem var(--f-body);color:var(--muted)}
.stword{font-weight:700}
.stword.good{color:var(--pos)}.stword.warn{color:var(--watch)}.stword.bad{color:var(--neg)}.stword.steady{color:var(--text)}
.harr{font:600 clamp(1.4rem,3vw,2rem)/1 var(--f-mono);color:var(--text)}
.hchips{display:inline-flex;flex-wrap:wrap;gap:6px}
.hchips .chip{font-size:var(--fs-2);padding:4px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}
.hchips .chip.wa{border-color:var(--warn)}
.hero-org>.meta{margin-top:6px}

/* L9 equal heights: a list's own height does not set the row; it scrolls inside its card */
.pg>.blk.lst>.bb{flex:1 1 0;min-height:min(320px,60vh);overflow:auto;contain:size}
@media (max-width:699px){.pg>.blk.lst>.bb{contain:none;max-height:480px}}
/* L20 compact rows */
.calls>.crow,.act>li,.list>li{padding:6px 0}
/* S18 amended, L21, L22: call row = logo above portrait in one narrow column; title and "Org · person" take the width */
.crow{grid-template-columns:28px minmax(0,1fr) auto;gap:2px 8px}
.crow .tiles2{grid-row:1 / span 2;display:flex;flex-direction:column;gap:2px}
.crow .tiles2 .lg,.crow .tiles2 .av{width:28px;height:28px}
.crow .meta{grid-column:2 / span 2;font-size:var(--fs-small);color:var(--muted)}
.crow .cd{grid-column:3;grid-row:1;font:400 var(--fs-small) var(--f-mono);color:var(--muted)}
/* an entity page's sources line (the L23 freshness strip is in the banner, S35; no STALE pills) */
.pg>.blk.bare[data-as="sources"]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px 14px;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.pg>.blk.bare[data-as="sources"]>.bf{margin:0 0 0 auto;padding:0;border:0}
.fresh{font-size:var(--fs-small);line-height:1.8}
.bh .hlink{font-size:var(--fs-2)}
/* L8b stacks: blocks one above the other at the row's height; the last one scrolls inside its card */
.pg>.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.stack>.blk:last-child{flex:1 1 0;min-height:200px}
.stack>.blk:last-child>.bb{flex:1 1 0;min-height:0;overflow:auto;contain:size}
@media (max-width:699px){.stack>.blk:last-child>.bb{contain:none}}
/* S60 (Saarinen): a stack left alone on its line in the two-column band (the customer page's Open deals over Open
   tickets, beside Documents from 1100px) has no partner to take its height from: its last block shows its rows */
@media (min-width:700px) and (max-width:1099px){.pg>.stack.alone>.blk:last-child>.bb{contain:none;max-height:480px}}
/* S37 organisation page, rows 1-3 (Eileen; Aalto, David 11 Oct ~21:22): [AI facts 2 | Profile 1] and
   [AI opinion 2 | Key facts 1] each share one line and align at the bottom: the row stretches both cards to the
   taller, the shorter card's body grows, so the footers sit level. In the two-column band (700-1099px) each pair
   still shares its line, half and half; on phones they stack. Next step spans the row, wide and low: What, Who and
   When on one line, Why across the width below. Contacts on a row of their own flow into columns.
   Key facts and Profile row styles live in render/keyfacts.py. */
.pg>#assessment[data-as="assessment"],.pg>#profile[data-as="key_facts"],.pg>#ai-opinion[data-as="assessment"],.pg>#key-facts[data-as="key_facts"]{align-self:stretch}
.pg>#assessment[data-as="assessment"]>.bb,.pg>#profile[data-as="key_facts"]>.bb,.pg>#ai-opinion[data-as="assessment"]>.bb,.pg>#key-facts[data-as="key_facts"]>.bb{flex:1 0 auto}
@media (min-width:700px) and (max-width:1099px){.pg>#assessment[data-as="assessment"],.pg>#profile[data-as="key_facts"],.pg>#ai-opinion[data-as="assessment"],.pg>#key-facts[data-as="key_facts"]{grid-column:span 1}}
@media (min-width:700px){.blk[data-as="next_step"][data-span="3"] .ns{grid-template-columns:auto minmax(0,2fr) auto minmax(0,1fr) auto minmax(0,1fr)}
  .blk[data-as="next_step"][data-span="3"] .ns>dd:last-of-type{grid-column:2 / -1}}
.blk[data-as="contacts"][data-span="3"] .people{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:24px}
.blk[data-as="contacts"][data-span="3"] .people>li .person{border-top:0;border-bottom:1px solid var(--border)}
.ai-op .status{font-size:1em}
.chips.ev .chip{text-decoration:none}

/* Ask B (Nikola, docs/15): the chat panel in the ask-brain dialog, its pop-out page, and the Help pill. S72 (David 12 Oct:
   "Ask B should be some kind of Logo beside the claude icon not the pop up similar to help"): Ask B is the header tile
   beside Claude (.hdr .ico.ask, above), so there is no Ask pill; Help alone stays bottom-right in .ask-fabs. */
.ask-fabs{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center}
.ask-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:6px 18px;border-radius:var(--radius-full);background:var(--deep);color:var(--on-deep);font:600 var(--fs-2)/1 var(--f-body);text-decoration:none;box-shadow:0 6px 18px rgb(0 0 0 / .22)}
.ask-pill:hover,.ask-pill:focus-visible{text-decoration:none;filter:brightness(1.08)}
.ab-h svg{width:30px;height:30px;display:block;flex:none}
@media print{.ask-fabs{display:none}}
.drawer.askb[open],.askb.pop{display:flex;flex-direction:column;overflow:hidden}
.drawer.askb.max{width:100vw}
.askb.pop{height:100vh;height:100dvh;background:var(--surface);color:var(--text)}
body.ask-popout{margin:0;overflow:hidden}
.ab-h{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 12px;background:var(--deep);color:var(--on-deep);flex:none}
.ab-t{margin-right:auto;display:grid;line-height:1.25;min-width:0}
.ab-t h2{font:600 1.05rem var(--f-body);color:var(--on-deep);margin:0}
.ab-t span{font-size:var(--fs-small);opacity:.85}
.ab-i{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:8px;background:transparent;border:1px solid color-mix(in srgb,var(--on-deep) 40%,transparent);color:var(--on-deep);cursor:pointer;font-size:18px;line-height:1;text-decoration:none}
.ab-i:hover,.ab-i:focus-visible,.ab-i[aria-pressed="true"]{background:color-mix(in srgb,var(--on-deep) 14%,transparent);text-decoration:none}
.ab-back{color:var(--on-deep);font-size:var(--fs-2);text-decoration:underline}
.ab-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ab-status{flex:none;margin:0;padding:5px 16px;min-height:1.9em;font-size:var(--fs-small);color:var(--muted);border-bottom:1px solid var(--border)}
.ab-status:empty{min-height:0;padding:0;border-bottom:0}
.ab-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px}
.ab-intro{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;font-size:var(--fs-2);line-height:1.5}
.ab-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ab-chips button{font:inherit;font-size:var(--fs-2);text-align:left;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:6px 11px;cursor:pointer}
.ab-chips button:hover{border-color:var(--line)}
.ab-thread{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ab-u{justify-self:end;max-width:85%}
.ab-u .ab-b{background:var(--sea);color:var(--on-sea);border-radius:12px 12px 3px 12px;padding:8px 12px;overflow-wrap:anywhere}
.ab-a .ab-b{background:var(--surface);border:1px solid var(--border);border-radius:12px 12px 12px 3px;padding:10px 12px;overflow-wrap:anywhere;font-size:var(--fs-text)}
/* The assistant's avatar (docs/21 decision 7): the plain B-Brain symbol on a 28px surface disc with a hairline (the
   launcher and the title bar carry the Ask B bubble); the answer's corner points at it */
.ab-a{display:flex;align-items:flex-start;gap:8px;min-width:0;width:100%;align-self:stretch}
.ab-a .ab-b{flex:1 1 auto;min-width:0}
.ab-av+.ab-b{border-radius:3px 12px 12px 12px}
.ab-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--border)}
.ab-av svg{width:18px;height:18px;display:block}
.ab-b p+p,.ab-b p+ul,.ab-b p+ol,.ab-b ul+p,.ab-b ol+p{margin-top:7px}
.ab-b ul,.ab-b ol{margin:4px 0 0;padding-left:20px}
.ab-b li+li{margin-top:3px}
.ab-b code{font:var(--fs-small) var(--f-mono)}
.ab-dead{color:var(--muted)}
.ab-meta{font-size:var(--fs-small);color:var(--muted);margin-top:6px}
.ab-u .ab-meta{color:inherit;opacity:.85}
/* The answer being written (Turing, after Ku's .a.pend): a thin shimmer, not a spinner, and the steps so far */
.ab-pend{display:block;width:100%;min-width:0;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.ab-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.ab-steps li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.ab-tick{flex:none;width:28px;text-align:center;color:var(--success);line-height:1.45}
.ab-steps .cur{color:var(--text)}
.ab-b>*+.ab-pend{margin-top:8px}
.ab-shim{flex:none;width:28px;height:6px;margin-top:.55em;border-radius:3px;background:linear-gradient(90deg,var(--border) 0%,var(--sea) 50%,var(--border) 100%);background-size:220% 100%;animation:ab-shim 1.3s linear infinite}
@keyframes ab-shim{0%{background-position:160% 0}100%{background-position:-160% 0}}
@media (prefers-reduced-motion:reduce){.ab-shim{animation:none;background:var(--sea);opacity:.55}}
/* the step sentence takes the rest of the row and wraps by words (iPad Safari laid it out at min-content: one character a line) */
.ab-stat{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
.ab-chart{margin:8px 0 0}
/* viz figures carry their own white surface: a white card with a --line edge in both themes reads as a figure */
.ab-chart img{display:block;max-width:100%;height:auto;border-radius:6px;background:#fff;border:1px solid var(--line);padding:4px}
.ab-chart figcaption{font-size:var(--fs-small);color:var(--muted)}
.ab-key{flex:none;display:grid;gap:8px;padding:10px 16px;border-top:1px solid var(--border)}
.ab-key label{display:grid;gap:6px;font-weight:600;font-size:var(--fs-2)}
.ab-key input{height:38px;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 10px}
.ab-comp{flex:none;display:grid;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--surface)}
.ab-comp textarea{width:100%;min-height:46px;max-height:180px;resize:none;font:inherit;font-size:var(--fs-body);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.ab-comp textarea:focus-visible,.ab-pick:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.ab-bar{display:flex;align-items:center;gap:8px;min-width:0}
.ab-clip{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer}
.ab-pick{height:34px;min-width:0;flex:0 1 auto;font:inherit;font-size:var(--fs-2);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 6px}
.ab-clear{margin-left:auto;background:none;border:0;padding:6px 4px;font:inherit;font-size:var(--fs-2);color:var(--muted);cursor:pointer;text-decoration:underline}
.ab-send{height:34px;padding:0 16px;flex:none}
.ab-send:disabled{opacity:.6;cursor:progress}
.ab-files{display:flex;flex-wrap:wrap;gap:6px}
.ab-file{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-small);border:1px solid var(--border);border-radius:999px;padding:2px 4px 2px 10px}
.ab-file button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
/* S83 (Herschel): the Summary's Recent calls and Week ahead (call_days, site/render/calls_block.py), wz-intel's five day
   cards. The block's frame drops away so the five cards sit on the page under its title line (title, "Updated", the
   "All upcoming calls" link, made from). Hooke's card breakpoints: one column, two from 560px, three from 860px, all
   five from 1100px. Call titles and organisations in ink, not link pink, so five cards of links keep pink the spark. */
.blk[data-as="call_days"]{background:transparent;border:0;border-radius:0;padding:0}
.blk[data-as="call_days"]>.bh{padding:0 2px}
.blk[data-as="call_days"]>.bf{border-top:0;padding:0 2px}
.cdays{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:560px){.cdays{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.cdays{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.cdays{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cday{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px 10px;min-width:0;display:flex;flex-direction:column}
.cday h4{font:600 var(--fs-2)/1.3 var(--f-body);color:var(--text);margin:0 0 4px}
.cdays .crow{grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:start;padding:8px 0;border-top:1px solid var(--border)}
.cdays .crow:first-of-type{border-top:0;padding-top:4px}
.cdays .crow .tiles2{grid-row:1 / span 2;display:flex;flex-direction:row;gap:4px;padding-top:1px}
.cdays .crow .tiles2 .lg,.cdays .crow .tiles2 .av{width:24px;height:24px}
.cdays .crow .tiles2 .lg{border-radius:6px}
.cdays .crow .tiles2 a{display:inline-flex}
.cdays .crow .ln1{grid-column:2;font-size:var(--fs-2);line-height:1.35;overflow-wrap:anywhere}
.cdays .crow .ln1 .t{font-weight:600;color:var(--text);text-decoration:none}
.cdays .crow .meta{grid-column:2;font-size:var(--fs-small);line-height:1.35;color:var(--muted)}
.cdays .crow .meta .org{font-weight:600;color:var(--text);text-decoration:none}
.cdays .crow .meta a:not(.org){color:var(--muted);text-decoration:none}
.cdays .crow a:hover{text-decoration:underline;text-decoration-color:var(--link)}
.cdays .tchip{display:inline-block;font:500 var(--fs-caps)/1 var(--f-mono);padding:3px 5px;margin-right:2px;vertical-align:1px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text)}
.cday .empty{font-size:var(--fs-2);color:var(--muted);margin:2px 0 4px}
.cday .cmore{margin-top:2px;padding-top:8px;border-top:1px solid var(--border);font-size:var(--fs-small);font-weight:600}