/* Org Signal application styles. Built on assets/theme.css (the site's tokens,
   verbatim). The rules of graystoneindustries.co carry over: deep blue ground,
   near-white type, a mint accent used sparingly, Geist and Geist Mono, thin
   rules instead of cards, no gradients, glass, pills or badges. The app is
   denser than the site because it is an instrument; the measures and the
   typographic roles are the site's. */

/* ---------------------------------------------------------------------------
   Data palette. Overrides the provisional --cat/--seq tokens in theme.css.
   Retuned in the UX pass (2026-10-02): the previous palette passed only
   adjacent pairs, and on the network map, where any two groups can touch,
   communities 4 and 6 differed by dE 2.6 under deuteranopia (#6ba04b vs
   #d36757 by 0.6). This one was found by search over the dark lightness band
   and checked with the dataviz validator (OKLab dE x100, Machado 2009
   simulation at severity 1.0) for ALL PAIRS of the eight slots, on both
   --bg #071A2B and --bg-deep #051521:
     lightness band 0.48-0.67 PASS, chroma >= 0.10 PASS,
     worst all-pairs protan/deutan dE 8.3 (target 8) PASS,
     worst all-pairs tritan dE 8.7 PASS,
     worst all-pairs normal-vision dE 15.5 (floor 15) PASS,
     contrast >= 3:1 against the ground PASS.
   So every slot can sit next to every other one: maps, scatters and small
   multiples may use all eight. Groups past eight fold into "Other".
   --cat-other is a recessive neutral gray, dE >= 9.7 from every slot under
   every simulation (normal 15.4); at 2.0:1 it is deliberately quiet, so it
   is always labeled "Other" in a legend, never shown by color alone.
   Slot 1 stays in the accent's green-mint family.
   Sequential: one hue (mint, h 175), lightness monotone, steps >= 0.06,
   darkest step 2.15:1 against the ground (ordinal check PASS); --seq-zero is
   a near-ground step for "none" so zero recedes in matrices.
   Diverging: cool (blue) <-> warm (coral) through a slate midpoint. Named by
   temperature, not sign; the --div-neg/--div-pos names are kept as aliases
   (neg = cool, pos = warm) until every view has moved over.
   --------------------------------------------------------------------------- */
:root{
  --cat-1:#228f61; --cat-2:#9f74f8; --cat-3:#dd5d94; --cat-4:#b48d17;
  --cat-5:#4a9ec6; --cat-6:#5055d3; --cat-7:#8c5485; --cat-8:#bc4001;
  --cat-other:#444c52;
  --seq-zero:#0d2a35;
  --seq-0:#16594b; --seq-1:#1f7d69; --seq-2:#29a288; --seq-3:#46c6aa; --seq-4:#7be9cd; --seq-5:#c5fcec;
  --div-cool-2:#85b6e9; --div-cool-1:#4e90d2; --div-mid:#2a3a48; --div-warm-1:#cf6b5b; --div-warm-2:#e59c8f;
  --div-neg-2:var(--div-cool-2); --div-neg-1:var(--div-cool-1); --div-pos-1:var(--div-warm-1); --div-pos-2:var(--div-warm-2);

  --status-h:0px;
  --row-h:2.25rem;
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{overflow-x:hidden;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,canvas{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}
/* Headings receive focus programmatically on view change; no ring for that. */
[tabindex="-1"]:focus{outline:none}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- skip link ---------- */
.skip{position:absolute;left:var(--pad-app);top:0;transform:translateY(-130%);z-index:300;
  background:var(--bg-deep);color:var(--text);padding:.7rem 1rem;border:1px solid var(--accent);text-decoration:none;font-weight:600}
.skip:focus-visible{transform:translateY(.5rem)}

/* ---------- masthead ---------- */
.app-header{
  position:sticky;top:0;z-index:60;
  background:rgba(var(--bg-rgb),.82);
  backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--t),border-color var(--t);
}
/* Rule and deeper ground only once the page scrolls, as on the site. */
.app-header[data-scrolled='true']{background:rgba(var(--bg-deep-rgb),.94);border-bottom-color:var(--rule)}
.app-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--bar-h);padding-inline:var(--pad-app);max-width:calc(var(--w-frame) + 2*var(--pad-app));margin-inline:auto}
.app-header__end{display:flex;align-items:center;gap:1.25rem;min-width:0}
.brand{text-decoration:none;color:var(--text);line-height:1.2;display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.brand__name{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.012em}
.brand__desc{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-top:.2rem;white-space:nowrap}
.brand:hover .brand__name{color:var(--accent)}

.app-nav ul{display:flex;align-items:center;gap:clamp(.6rem,1.05vw,1.3rem);list-style:none;padding:0;margin:0}
.app-nav a{
  display:inline-block;padding:.45rem 0;font-size:.875rem;color:var(--text-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t);
}
.app-nav a:hover{color:var(--text);border-bottom-color:var(--rule-strong)}
/* Current view marked by weight and rule, never colour alone (as on the site). */
.app-nav a[aria-current='page']{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.app-nav a[aria-disabled='true']{color:var(--text-muted)}
.app-nav .sep{width:1px;height:1.1rem;background:var(--rule-strong)}
.menu-btn{display:none}

@media (max-width:1240px){ .app-nav a{font-size:.8125rem} .brand__desc{display:none} }
@media (max-width:1060px){
  .brand__desc{display:block}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-.4rem;
    background:none;border:1px solid var(--rule-strong);color:var(--text);cursor:pointer;
  }
  .menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{display:block;width:18px;height:1.5px;background:currentColor;content:''}
  .menu-btn__bars::before{transform:translateY(-6px)}
  .menu-btn__bars::after{transform:translateY(4.5px)}
  .app-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg-deep);border-block:1px solid var(--rule);padding:.25rem var(--pad-app) 1rem;max-height:calc(100vh - var(--header-h));overflow-y:auto;z-index:2}
  .app-nav[data-open='true']{display:block}
  .app-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .app-nav a{display:flex;padding:.8rem 0;border-bottom:1px solid var(--rule);min-height:44px;font-size:.9375rem;align-items:center}
  .app-nav a[aria-current='page']{border-bottom-color:var(--accent)}
  .app-nav .sep{display:none}
}

/* ---------- page frame ---------- */
main{display:block;min-height:calc(100vh - var(--header-h));padding-bottom:calc(var(--status-h) + 2rem)}
main:focus{outline:none}
/* One frame for every view (design rule 3): the same 90rem wrap as the
   masthead, so the title never jumps between views. */
.view,.frame{width:100%;max-width:calc(var(--w-frame) + 2*var(--pad-app));margin-inline:auto;padding-inline:var(--pad-app)}
.view{padding-top:clamp(1.5rem,3vw,2.75rem)}
/* Reading views keep the frame's left edge and cap their content at 62rem. */
.view--col > *{max-width:var(--w-col)}
.col{max-width:var(--w-col)}
.measure{max-width:var(--measure)}
.view__head + .section{border-top:0;padding-top:0}
.view__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2.5rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.view__title{font-weight:500;font-size:var(--fs-h1);letter-spacing:-.022em;line-height:1.15;margin:0}
.view__title:focus{outline:none}
.view__intro{margin-top:.8rem;color:var(--text-2);max-width:54ch;font-size:var(--fs-lead);line-height:1.55}
/* Head actions: a row of text links, plus at most one boxed primary. */
.view__actions{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}

/* Mono section label, like the site's "CURRENT RESEARCH THREADS". Section
   labels, metadata and captions only; field labels are sans (.field__label). */
.label{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-muted);margin:0 0 .7rem;font-weight:400}
.section{padding-block:1.5rem;border-top:1px solid var(--rule)}
.section:first-child{border-top:0;padding-top:0}
.section > h2,.section__title{font-size:var(--fs-h2);font-weight:600;margin:0 0 .6rem;letter-spacing:-.012em}
.prose{color:var(--text-2);max-width:var(--measure)}
.prose p + p{margin-top:.8em}
.prose strong{color:var(--text);font-weight:600}
.small{font-size:var(--fs-small);max-width:var(--measure)}
.foot{font-size:var(--fs-foot);color:var(--text-muted);max-width:var(--measure)}
.meta{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.text2{color:var(--text-2)}
.nowrap{white-space:nowrap}
.stack > * + *{margin-top:.75rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.row--between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.25rem 2rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem 2rem}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.25rem;padding:.4rem .85rem;
  background:transparent;color:var(--text);border:1px solid var(--rule-strong);border-radius:0;
  font-size:var(--fs-small);font-weight:500;letter-spacing:.005em;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.btn:hover{border-color:var(--accent-dim)}
.btn--primary{color:var(--accent);border-color:var(--accent-dim);font-weight:600}
.btn--primary:hover{border-color:var(--accent);background:rgba(111,216,190,.06)}
.btn--quiet{border-color:transparent;color:var(--text-2);padding-inline:.5rem}
.btn--quiet:hover{color:var(--text);border-color:var(--rule)}
.btn--danger{color:var(--critical);border-color:rgba(232,138,122,.45)}
.btn[disabled],.btn[aria-disabled='true']{border-color:var(--rule);color:var(--text-muted);background:none;cursor:not-allowed}
.btn--sm{min-height:1.9rem;padding:.25rem .6rem;font-size:.75rem}
.tlink{
  display:inline-block;background:none;border:0;border-bottom:1px solid var(--accent-dim);border-radius:0;padding:.2rem 0 1px;margin:0;
  cursor:pointer;font-family:inherit;font-weight:600;font-size:var(--fs-small);line-height:1.4;letter-spacing:0;text-transform:none;
  color:var(--accent);text-decoration:none;text-align:left;white-space:nowrap;min-height:var(--target);transition:border-color var(--t),color var(--t)
}
.tlink:hover{border-bottom-color:var(--accent)}
/* Arrow when the link navigates (site style); down arrow for downloads. */
.tlink--arrow::after{content:' \2192';font-weight:400}
.tlink--down::after{content:' \2193';font-weight:400}
.tlink--quiet{color:var(--text-2);border-bottom-color:var(--rule-strong);font-weight:500}
.tlink--quiet:hover{color:var(--text);border-bottom-color:var(--text-2)}
.tlink--danger{color:var(--critical);border-bottom-color:rgba(232,138,122,.45)}
.tlink[disabled],.tlink[aria-disabled='true']{color:var(--text-muted);border-bottom-color:var(--rule);cursor:not-allowed}
.tlinks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.linkish{background:none;border:0;padding:0;color:var(--text);cursor:pointer;text-align:left;font:inherit;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:.2em}
.linkish:hover{text-decoration-color:var(--accent)}

.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field > span,.field__label{font-family:var(--sans);font-size:var(--fs-foot);color:var(--text-muted);letter-spacing:0;text-transform:none}
.field--inline{flex-direction:row;align-items:center;gap:.5rem}
.input,.select,textarea.input{
  width:100%;min-height:2.25rem;padding:.35rem .6rem;background:var(--panel);color:var(--text);
  border:1px solid var(--rule-strong);border-radius:0;font-size:.875rem;
}
.select{appearance:none;-webkit-appearance:none;padding-right:1.8rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input:hover,.select:hover{border-color:rgba(255,255,255,.36)}
.input::placeholder{color:var(--text-muted);font-family:var(--sans)}
.input:disabled,.select:disabled{color:var(--text-muted);border-color:var(--rule);cursor:not-allowed}
textarea.input{min-height:5rem;resize:vertical;line-height:1.45}
.check{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-size:var(--fs-small);color:var(--text-2);min-height:1.75rem}
.check input{margin:0}
/* Checkboxes and radios, drawn (design rule 5): no OS grey anywhere. */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:1rem;height:1rem;margin:0;display:inline-grid;place-content:center;
  background:var(--panel);border:1px solid var(--rule-strong);border-radius:0;cursor:pointer;vertical-align:-.15rem;
  transition:border-color var(--t),background var(--t)
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:rgba(255,255,255,.45)}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--accent);background:var(--accent)}
input[type=checkbox]::before{content:'';width:.55rem;height:.3rem;border-left:2px solid var(--bg-deep);border-bottom:2px solid var(--bg-deep);transform:translateY(-.05rem) rotate(-45deg);opacity:0}
input[type=checkbox]:checked::before{opacity:1}
input[type=checkbox]:indeterminate{border-color:var(--accent);background:var(--accent)}
input[type=checkbox]:indeterminate::before{opacity:1;width:.5rem;height:0;border-left:0;transform:none}
input[type=radio]::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:var(--bg-deep);opacity:0}
input[type=radio]:checked::before{opacity:1}
input[type=checkbox]:disabled,input[type=radio]:disabled{border-color:var(--rule);background:transparent;cursor:not-allowed}
input[type=checkbox]:checked:disabled,input[type=radio]:checked:disabled{background:var(--text-muted);border-color:var(--text-muted)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Radio list with descriptions, for more than five choices. */
.radios{display:flex;flex-direction:column;gap:.15rem;border:0;padding:0;margin:0;min-width:0}
.radios > legend{font-size:var(--fs-foot);color:var(--text-muted);padding:0;margin-bottom:.35rem}
.radio{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.1rem .6rem;align-items:start;padding:.4rem 0;cursor:pointer;color:var(--text)}
.radio input{margin-top:.2rem}
.radio__desc{grid-column:2;color:var(--text-muted);font-size:var(--fs-foot)}
.radio--disabled{color:var(--text-muted);cursor:not-allowed}
input[type=range]{accent-color:var(--accent);width:100%}

/* segmented choice: a row of plain buttons with an underline on the active one */
.seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-strong);width:auto;max-width:100%;align-self:flex-start}
.seg button{background:none;border:0;border-right:1px solid var(--rule);border-radius:0;padding:.35rem .75rem;font-size:var(--fs-small);color:var(--text-2);cursor:pointer;min-height:2.25rem}
.seg button[disabled]{color:var(--text-muted);cursor:not-allowed}
.seg button:last-child{border-right:0}
.seg button[aria-pressed='true']{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.seg button:hover{color:var(--text)}

/* tabs inside a view */
.tabs{display:flex;gap:1.25rem;border-bottom:1px solid var(--rule);margin-bottom:1rem;overflow-x:auto;scrollbar-width:none}
.tabs button,.tabs a{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:.5rem 0;color:var(--text-2);font-size:var(--fs-small);font-weight:400;cursor:pointer;white-space:nowrap;text-decoration:none;min-height:var(--target)}
.tabs a[aria-current='page']
,.tabs button[aria-selected='true']{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--text)}

/* ---------- toolbar (view controls in one row above charts) ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end;padding-bottom:.9rem}
.toolbar .field{min-width:9rem}
.toolbar .field--grow{flex:1 1 12rem}

/* ---------- status flags (icon + label, never colour alone) ---------- */
.flag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:var(--fs-mono-th);letter-spacing:var(--ls-mono-th);text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.flag svg{width:.8rem;height:.8rem;flex:0 0 auto}
.flag--caution{color:var(--warn)}
.flag--na{color:var(--text-muted)}
.flag--error{color:var(--critical)}
.flag--ok{color:var(--accent)}
.flag--info{color:var(--text-2)}
.sev{display:inline-flex;align-items:center;gap:.4rem;min-width:4.5rem}

/* ---------- tooltips ---------- */
.tip-wrap{position:relative;display:inline-flex;align-items:center;gap:.25rem}
.tip-trigger{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:help;text-align:inherit;
  text-decoration:underline dotted var(--rule-strong);text-underline-offset:.25em}
.tip{
  position:fixed;z-index:400;max-width:min(22rem,calc(100vw - 2rem));padding:.65rem .75rem;
  background:var(--bg-deep);border:1px solid var(--rule-strong);color:var(--text-2);
  font-family:var(--sans);font-size:.8125rem;line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;
  pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.35)
}
.tip strong{color:var(--text);font-weight:600;display:block;margin-bottom:.2rem}
.tip p + p{margin-top:.35rem}
.tip .tip__rel{color:var(--text-muted)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;max-width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:.8125rem}
.tbl th{font-family:var(--mono);font-size:var(--fs-mono-th);letter-spacing:var(--ls-mono-th);text-transform:uppercase;color:var(--text-muted);font-weight:400;text-align:left;padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
.tbl td{padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--text-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:.9rem}
.tbl td.name{color:var(--text)}
.tbl tr.is-selected td{background:rgba(111,216,190,.07)}

/* virtualized table */
.vt{position:relative;border-top:1px solid var(--rule-strong);font-size:.8125rem}
.vt__scroll{overflow:auto;position:relative;max-height:calc(100vh - 17rem);min-height:18rem;outline:none}
.vt__scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vt__head{position:sticky;top:0;z-index:2;display:grid;background:var(--bg);border-bottom:1px solid var(--rule-strong)}
.vt__th{display:flex;align-items:flex-end;gap:.25rem;padding:.4rem .6rem .45rem 0;line-height:1.3;overflow:hidden;font-family:var(--mono);font-size:var(--fs-mono-th);letter-spacing:var(--ls-mono-th);text-transform:uppercase;color:var(--text-muted);min-width:0}
.vt__th.num{justify-content:flex-end;padding-right:.9rem;text-align:right}
.vt__sort{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer;text-align:inherit;display:inline-flex;align-items:center;gap:.25rem}
.vt__sort[aria-sort] {color:var(--text)}
.vt__row{display:grid;position:absolute;left:0;right:0;height:var(--row-h);align-items:center;border-bottom:1px solid var(--rule);cursor:pointer}
.vt__row:hover{background:rgba(255,255,255,.03)}
.vt__row.is-selected{background:rgba(111,216,190,.08)}
.vt__row.is-focus{box-shadow:inset 2px 0 0 var(--accent)}
.vt__td{padding:0 .6rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2);min-width:0}
.vt__td.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:.9rem}
.vt__td.name{color:var(--text)}
.vt__td .swatch{margin-right:.4rem}

/* virtualized table: keyboard cursor, header info buttons, side fades (UX pass) */
/* Visible row cursor while the table has focus (A2). */
.vt__scroll.has-focus .vt__row.is-focus{background:rgba(111,216,190,.12);box-shadow:inset 3px 0 0 var(--accent)}
/* Room for the selection bar so it never clips the first cell (V38). */
.vt__th:first-child,.vt__td:first-child{padding-left:.6rem}
/* A fade on the side with more columns (P21). */
.vt--more-right::after,.vt--more-left::before{content:'';position:absolute;top:0;bottom:0;width:2.5rem;pointer-events:none;z-index:3}
.vt--more-right::after{right:0;background:linear-gradient(90deg,rgba(var(--bg-rgb,7,26,43),0),var(--bg))}
.vt--more-left::before{left:0;background:linear-gradient(270deg,rgba(var(--bg-rgb,7,26,43),0),var(--bg))}
.vt__th .tip-wrap--icon{flex:0 0 auto}
.vt__th .tip-wrap--icon .tip-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;color:var(--text-muted);text-decoration:none}
.vt__th .tip-wrap--icon .tip-trigger:hover,.vt__th .tip-wrap--icon .tip-trigger:focus-visible{color:var(--text)}
.vt__th .tip-wrap--icon svg{width:.8rem;height:.8rem}
.vt__th.is-sorted .vt__sort{color:var(--text)}
/* Long measure names wrap to two lines instead of being clipped. */
.vt__th .vt__sort{min-width:0;white-space:normal}
.vt__th.num .vt__sort{text-align:right;justify-content:flex-end}

/* ---------- layout with side panel ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:0;align-items:start}
.split > .split__main{min-width:0;padding-right:1.5rem}
.split > .split__side{border-left:1px solid var(--rule);padding-left:1.5rem;min-width:0;position:sticky;top:calc(var(--header-h) + 1rem);max-height:calc(100vh - var(--header-h) - 2rem - var(--status-h));overflow-y:auto}
@media (max-width:1060px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split > .split__main{padding-right:0}
  .split > .split__side{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:1.25rem;margin-top:1.25rem;position:static;max-height:none;overflow:visible}
}

/* ---------- network canvas ---------- */
.net{position:relative;height:clamp(440px,calc(100vh - 24rem - var(--status-h)),1200px);background:var(--bg-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
.net__canvas{position:absolute;inset:0}
.net__overlay{position:absolute;left:.75rem;bottom:.6rem;right:.75rem;display:flex;justify-content:space-between;gap:.5rem;pointer-events:none}
.net__overlay > *{pointer-events:auto}
.net__zoom{display:flex;flex-direction:column;gap:0;position:absolute;right:.75rem;top:.75rem}
.net__zoom .btn{background:rgba(var(--bg-deep-rgb),.85);min-width:2.25rem;padding:0;border-bottom-width:0}
.net__zoom .btn:last-child{border-bottom-width:1px}
.net__hover{position:absolute;pointer-events:none;z-index:5}
.net__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);text-align:center;padding:2rem}
@media (max-width:600px){ .net{height:62vh;min-height:360px} }

/* legend: plain swatch + text rows, text in ink colours */
.legend{display:flex;flex-direction:column;gap:.15rem;font-size:.8125rem}
.legend__item{display:flex;align-items:center;gap:.5rem;padding:.2rem .25rem;margin-inline:-.25rem;background:none;border:0;color:var(--text-2);text-align:left;cursor:pointer;width:calc(100% + .5rem);font:inherit}
.legend__item:hover,.legend__item[aria-pressed='true']{color:var(--text);background:rgba(255,255,255,.04)}
.legend__item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend__count{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.75rem}
.swatch{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.swatch--sq{border-radius:1px}
.ramp{height:.5rem;width:100%;max-width:14rem;border-radius:1px}
.ramp-labels{display:flex;justify-content:space-between;max-width:14rem;font-size:.7rem;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:.2rem}

/* ---------- key/value lists ---------- */
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;font-size:.8125rem;margin:0}
.kv dt{color:var(--text-2);min-width:0}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.kv--wide{grid-template-columns:minmax(8rem,auto) minmax(0,1fr)}
.kv--wide dd{text-align:left}
.metric-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.4rem 0;border-bottom:1px solid var(--rule);font-size:.8125rem}
.metric-row:last-child{border-bottom:0}
.metric-row__val{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.metric-row__sub{grid-column:1/-1;color:var(--text-muted);font-size:.75rem}

/* ---------- empty state ---------- */
.empty{max-width:46rem;padding:clamp(1.5rem,5vw,3.5rem) 0}
.empty h2{font-weight:500;font-size:var(--fs-h2);letter-spacing:-.02em}
.empty .lead{margin-top:.9rem;color:var(--text-2);font-size:1.05rem;line-height:1.55;max-width:46ch}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.25rem 2rem;margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.ways h3{font-size:1rem;font-weight:600;margin-bottom:.35rem}
.ways p{color:var(--text-2);font-size:.875rem;margin-bottom:.6rem}
.notice-line{display:flex;gap:.6rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--text-2);font-size:.875rem}

/* ---------- drop zone ---------- */
.drop{border:1px dashed var(--rule-strong);padding:clamp(1.25rem,4vw,2.25rem);display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;transition:border-color var(--t),background var(--t)}
.drop[data-over='true']{border-color:var(--accent);background:rgba(111,216,190,.05)}
.drop__title{font-size:1.05rem;font-weight:600}
.drop__hint{color:var(--text-2);font-size:.875rem;max-width:58ch}

/* ---------- import report ---------- */
.src{padding:1.1rem 0;border-top:1px solid var(--rule)}
.src__head{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;justify-content:space-between}
.src__title{font-size:1rem;font-weight:600}
.src__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem 2rem;margin-top:.8rem}
.can-list{margin:0;padding-left:1.1rem;color:var(--text-2);font-size:var(--fs-small);max-width:var(--measure)}
.can-list li + li{margin-top:.3rem}
.warn-list{list-style:none;margin:0;padding:0;font-size:.8125rem}
.warn-list li{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:.6rem;padding:.35rem 0;border-bottom:1px solid var(--rule);color:var(--text-2)}
.warn-list li:last-child{border-bottom:0}
@media (max-width:520px){ .warn-list li{grid-template-columns:minmax(0,1fr) auto} .warn-list li .sev{grid-column:1/-1} }

/* ---------- drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(var(--bg-deep-rgb),.55);z-index:80}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(30rem,100vw);background:var(--bg);border-left:1px solid var(--rule-strong);z-index:90;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.35)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--rule)}
.drawer__head h2{font-size:1.1rem;font-weight:600}
.drawer__body{flex:1 1 auto;overflow-y:auto;padding:.25rem 1.25rem 1.5rem}
.drawer__foot{display:flex;gap:.6rem 1.5rem;align-items:center;justify-content:flex-end;padding:.85rem 1.25rem;border-top:1px solid var(--rule);background:var(--bg-deep)}
.rule-row{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:.4rem 1rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--rule)}
.rule-row__desc{grid-column:1/-1;font-size:.75rem;color:var(--text-muted);margin-top:-.15rem}
.rule-row--off .check{color:var(--text-muted)}
.rule-row .input{min-height:1.9rem;padding:.2rem .4rem;font-size:.8125rem;text-align:right}

/* ---------- modal dialogs ---------- */
/* Above the sticky masthead (z 60) and the drawer (90), and scrolled within
   the viewport, so a dialog's title and Close are never under the header (P28). */
.dialog-backdrop{position:fixed;inset:0;z-index:100;background:rgba(var(--bg-deep-rgb),.82);display:flex;align-items:flex-start;justify-content:center;padding:max(4vh,1rem) 1rem;overflow:auto}
.dialog{background:var(--bg);border:1px solid var(--rule-strong);width:100%;max-width:44rem;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.dialog__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dialog__head h2{font-size:var(--fs-h2);font-weight:600}

/* ---------- status bar ---------- */
.status{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(var(--bg-deep-rgb),.97);border-top:1px solid var(--rule)}
.status__job{display:flex;align-items:center;gap:1rem;padding:.45rem var(--pad-app);font-size:.8125rem;color:var(--text-2);position:relative}
.status__job + .status__job{border-top:1px solid var(--rule)}
.status__bar{position:absolute;left:0;top:-1px;height:2px;background:var(--accent);transition:width .2s ease}
.status__bar--indet{width:30%!important;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{0%{left:-30%}100%{left:100%}}
.status__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status__pct{font-family:var(--mono);font-size:.7rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.notices{position:fixed;right:var(--pad-app);bottom:calc(max(var(--status-h),var(--notice-lift,0px)) + 1rem);z-index:75;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;width:min(26rem,calc(100vw - 2*var(--pad-app)));pointer-events:none}
.notices > *{pointer-events:auto}
.notice{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .85rem;background:var(--bg-deep);border:1px solid var(--rule-strong);border-left:2px solid var(--text-muted);font-size:var(--fs-small);color:var(--text-2);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.notice__body{display:flex;flex-direction:column;gap:.35rem}
.notice__list{margin:0;padding-left:1rem;font-size:var(--fs-foot)}
.notice .tlink{font-size:var(--fs-foot)}
.notice--warn{border-left-color:var(--warn)}
.notice--error{border-left-color:var(--critical)}
.notice--info{border-left-color:var(--accent)}
.notice .grow{min-width:0;overflow-wrap:anywhere}

/* ---------- charts ---------- */
.chart{width:100%;position:relative}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .flag svg,.chart .tip svg{width:.8rem;height:.8rem}
.chart text{fill:var(--text-muted);font-family:var(--sans);font-size:11px}
.chart .axis line,.chart .axis path{stroke:var(--rule-strong)}
.chart .grid line{stroke:rgba(255,255,255,.07)}
.chart__title{font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:.15rem}
.chart__sub{font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem}
.chart__tip{position:absolute;pointer-events:none;background:var(--bg-deep);border:1px solid var(--rule-strong);padding:.4rem .55rem;font-size:.75rem;color:var(--text-2);white-space:nowrap;z-index:5}
.chart__tip b{color:var(--text);font-weight:600}
.multiples{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem 1.5rem}

/* reading paragraphs in plain language */
.reading{border-left:2px solid var(--accent-dim);padding:.15rem 0 .15rem .9rem;color:var(--text-2);font-size:var(--fs-body);max-width:var(--measure)}
.reading p + p{margin-top:.5rem}
.basis{font-size:var(--fs-foot);color:var(--text-muted);margin-top:.4rem;max-width:var(--measure)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;gap:1rem}
.msg{padding:.25rem 0 .9rem;border-bottom:1px solid var(--rule)}
.msg__who{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.msg__text{white-space:pre-wrap;color:var(--text);max-width:70ch;overflow-wrap:anywhere}
.msg--user .msg__text{color:var(--text-2)}
mark.unverified{background:none;color:var(--warn);text-decoration:underline wavy rgba(232,194,106,.7);text-underline-offset:.2em}
details.disclose{border-top:1px solid var(--rule);margin-top:.6rem}
details.disclose > summary{cursor:pointer;padding:.45rem 0;font-size:var(--fs-small);min-height:var(--target);color:var(--text-2);list-style:none;display:flex;align-items:center;gap:.4rem}
details.disclose > summary::-webkit-details-marker{display:none}
details.disclose > summary::before{content:'';width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t);margin-right:.2rem}
details.disclose[open] > summary::before{transform:rotate(45deg)}
pre.code{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:.72rem;color:var(--text-2);background:var(--bg-deep);border:1px solid var(--rule);padding:.6rem .7rem;margin:.3rem 0;max-height:16rem;overflow:auto}

/* rendered markdown (methods, reports) */
.md{color:var(--text-2);max-width:var(--measure);font-size:var(--fs-body);overflow-wrap:anywhere}
.md h1{font-size:var(--fs-h2);font-weight:500;color:var(--text);margin:0 0 1rem}
.md h2{font-size:1.1rem;font-weight:600;color:var(--text);margin:1.8rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--rule)}
.md h3{font-size:.98rem;font-weight:600;color:var(--text);margin:1.2rem 0 .4rem}
.md p{margin:0 0 .85em}
.md ul,.md ol{margin:0 0 .85em;padding-left:1.2rem}
.md li + li{margin-top:.25rem}
.md code{font-family:var(--mono);font-size:.82em;color:var(--text)}
.md strong{color:var(--text)}
.md a{color:var(--accent)}

/* small multiples */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:.75rem 1.25rem}

.spinner{display:inline-block;width:.85rem;height:.85rem;border:1.5px solid var(--rule-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-.1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;gap:.6rem;align-items:center;color:var(--text-muted);font-size:.875rem;padding:1.5rem 0}

/* ---------- Ask and Methods ---------- */
.ask-try{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ask-try .tlink{white-space:normal;text-align:left;font-weight:500}
.tbl--files td{vertical-align:middle}
.tbl--files td.name{width:9rem}
.tbl--files td.num{width:8rem}
.tbl--files .tlink{font-variant-numeric:normal}

/* ---------- what is loaded (header chip) ---------- */
/* "Analyzing: <name>" with Start over, always in the masthead while data is
   loaded (decision 7). Text and a rule, no pill. */
.loaded{display:flex;align-items:center;gap:.75rem;min-width:0;font-size:var(--fs-foot);color:var(--text-2);padding-left:1.25rem;border-left:1px solid var(--rule-strong)}
.loaded__name{min-width:0;max-width:19.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loaded__name strong{color:var(--text);font-weight:600}
.loaded .tlink{font-size:var(--fs-foot)}
.confirm{position:absolute;right:var(--pad-app);top:calc(100% + .5rem);z-index:90;width:min(24rem,calc(100vw - 2*var(--pad-app)));background:var(--bg-deep);border:1px solid var(--rule-strong);padding:1rem;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:var(--fs-small);color:var(--text-2)}
.confirm p + p{margin-top:.5rem}
.confirm .tlinks{margin-top:.9rem}
/* On narrow screens the chip moves to its own row under the bar. */
.loaded-row{display:none}
@media (max-width:1240px){ .loaded__name{max-width:10rem} }
/* In the one-row header the dataset name needs the room (a generated
   scenario's name, J14): the "Analyzing:" label stays for screen readers. */
@media (min-width:1421px) and (max-width:1560px){ .app-header__end > .loaded .loaded__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} }
/* With Learn and the Explanations switch the row is full below 1420px: the
   chip takes its own row under the bar there (and on phones). */
@media (max-width:1420px){
  .app-header__end > .loaded{display:none}
  .loaded-row{display:block;border-top:1px solid var(--rule)}
  .loaded-row .loaded{border-left:0;padding-left:0;min-height:2.5rem;justify-content:space-between}
  .loaded-row .loaded__name{max-width:none;flex:1 1 auto}
  :root[data-loaded='true']{--header-h:calc(var(--bar-h) + 2.5rem)}
  .confirm{top:100%}
}
/* Phones: the name may take two lines of the chip's row rather than lose its
   scenario to an ellipsis. */
@media (max-width:600px){ .loaded-row .loaded__name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3} }

/* ---------- minimum target sizes (WCAG 2.5.8) ---------- */
/* Small inline controls keep their look; padding grows the hit area. */
.tip-trigger,.vt__sort,.linkish,.legend__item{min-height:var(--target)}
.btn--sm{min-height:var(--target)}
@media (pointer:coarse){
  .tip-trigger,.vt__sort{min-height:2rem}
  input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem}
  .check{min-height:2.75rem}
}

/* ---------- phone ---------- */
@media (max-width:600px){
  :root{--bar-h:3.75rem;--row-h:2.5rem}
  .view__title{font-size:1.75rem}
  .view__intro{font-size:var(--fs-body)}
  .toolbar .field{min-width:calc(50% - .5rem);flex:1 1 calc(50% - .5rem)}
  .btn{min-height:2.5rem}
  .vt__scroll{max-height:70vh}
}

@media (prefers-reduced-motion:reduce){
  .status__bar--indet,.spinner{animation:none}
}

@media print{
  body{background:#fff;color:#000}
  .app-header,.status,.notices,.skip,.view__actions,.toolbar,.drawer,.drawer-backdrop{display:none!important}
  .md,.md h1,.md h2,.md h3,.md strong,.prose{color:#000}
}

/* Mounted views (Build, Generate) bring their own page padding. */
.view--bare{padding:0}
/* Align the mounted views with the masthead gutter. */
.view--bare > .ob-view,.view--bare > section{padding-inline:var(--pad-app)}

/* ---------- navigation groups, descriptions, Explanations switch (round 2) ---------- */
/* Desktop: groups separated by the thin rules, descriptions as titles only.
   Phone menu: small mono group labels and a description under each link. */
.nav-group__label{display:none}
.nav-link__label{display:inline-flex;align-items:baseline;gap:.35rem}
.nav-link__note{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:400}
.nav-link__desc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-nav a[data-note]{color:var(--text-muted)}
.app-nav a[data-note][aria-current='page']{color:var(--text)}
.explain-switch{background:none;border:0;padding:.45rem 0;font:inherit;font-size:var(--fs-foot);color:var(--text-muted);cursor:pointer;white-space:nowrap;min-height:var(--target);border-bottom:1px solid transparent}
.explain-switch:hover{color:var(--text);border-bottom-color:var(--rule-strong)}
.explain-switch__v{color:var(--text-2);font-weight:600}
.nav-explain{padding-left:.25rem}
/* With data loaded the masthead also holds the loaded chip; the brand's
   descriptor gives way first so the views keep one row. */
@media (max-width:1500px){ :root[data-loaded='true'] .app-header__inner .brand__desc{display:none} }
@media (max-width:1060px){
  :root[data-loaded='true'] .app-header__inner .brand__desc{display:block}
  .nav-group__label{display:block;font-family:var(--mono);font-size:var(--fs-mono-th);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-muted);padding:1rem 0 .2rem}
  .app-nav a{flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem;padding:.6rem 0}
  .nav-link__desc{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:var(--fs-foot);color:var(--text-muted);font-weight:400}
  .nav-explain{padding:1rem 0 0}
  .explain-switch{font-size:var(--fs-small)}
}

/* ---------- click-to-open popovers: Term, reasoned flags (round 2) ---------- */
.pop-wrap{position:relative;display:inline}
.pop-trigger{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-align:inherit}
/* Term: a dotted underline, like the site's footnote links. */
.pop-trigger.term{display:inline;color:inherit;text-decoration:underline dotted var(--text-muted);text-decoration-thickness:1px;text-underline-offset:.22em}
.pop-trigger.term:hover,.pop-trigger.term[aria-expanded='true']{text-decoration-color:var(--accent)}
.flag--btn{cursor:pointer;border-bottom:1px dotted currentColor;padding-bottom:1px;min-height:var(--target)}
.flag--btn:hover{color:var(--text)}
.pop{position:fixed;z-index:400;display:block;width:max-content;max-width:min(22rem,calc(100vw - 16px));padding:.7rem .8rem;background:var(--bg-deep);border:1px solid var(--rule-strong);color:var(--text-2);
  font-family:var(--sans);font-size:.8125rem;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;white-space:normal;text-align:left;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.pop--wide{max-width:min(30rem,calc(100vw - 16px))}
.pop strong{display:block;color:var(--text);font-weight:600;margin-bottom:.2rem}
.pop__p{display:block}
.pop__more{margin-top:.5rem;font-size:var(--fs-foot)}

/* ---------- How to read this, verdicts, purposeful empty states (round 2) ---------- */
.howto{max-width:var(--measure)}
.howto > summary{color:var(--text-2)}
.howto__body{margin:.2rem 0 .6rem;font-size:var(--fs-small)}
.howto__body p + p{margin-top:.4rem}
.howto__k{color:var(--text);font-weight:600}
.verdict{max-width:var(--measure)}
.verdict__claim{color:var(--text);font-size:var(--fs-body);line-height:1.5}
.verdict__plain{color:var(--text-2);font-size:var(--fs-small);margin-top:.3rem}
.verdict__details{margin-top:.3rem}
.view__purpose{color:var(--text)}
.needs{padding-top:0}
.needs__shows{margin:0 0 1.75rem;padding-left:1.1rem;color:var(--text-2);max-width:var(--measure)}
.needs__shows li + li{margin-top:.3rem}
.needs__h{font-weight:500;font-size:var(--fs-h2);letter-spacing:-.012em;padding-top:1.5rem;border-top:1px solid var(--rule)}
.needs__lead{margin-top:.5rem;color:var(--text-2);max-width:56ch}
.needs__acts{margin-top:1.1rem;gap:.75rem 1.5rem}
.needs__learn{margin-top:1.5rem}

/* Notices over a map on a phone: one short line, tap to read (C14). */
.notices--compact .notice{padding:.45rem .6rem;align-items:center}
.notice__more{background:none;border:0;padding:0;font:inherit;color:var(--text-2);text-align:left;cursor:pointer;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:var(--target)}

/* ---------- Learn (round 2) ---------- */
.learn__jump{padding-bottom:1.25rem;align-items:baseline}
.learn__explain{flex:1 1 20rem;text-align:right}
.learn__explain .tlink{font-size:var(--fs-foot);margin-left:.4rem}
.learn__part > h2{font-size:var(--fs-h2)}
.learn__part > .prose{margin-bottom:1rem}
.tasks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr));gap:0 2.5rem}
.task{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.75rem;padding:.85rem 0;border-top:1px solid var(--rule)}
.task__a{padding-top:.2rem}
.task__q{color:var(--text);font-weight:600}
.task__how{color:var(--text-2);font-size:var(--fs-small);margin-top:.2rem}
.task__links{margin-top:.35rem;gap:.25rem 1.25rem}
.task__links .small{white-space:normal}
.examples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:0 2.5rem}
.example{padding:.85rem 0;border-top:1px solid var(--rule)}
.example__title{font-size:1rem;font-weight:600}
.example__what{color:var(--text-2);font-size:var(--fs-small);margin:.25rem 0 .35rem;max-width:var(--measure)}
.learn__concepts-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 2rem;margin-bottom:.5rem}
.learn__concepts-head h2{font-size:var(--fs-h2);font-weight:600;margin:0}
.learn__search{width:min(100%,20rem)}
.learn__sec{margin-top:2.25rem}
.learn__sec-intro{margin-bottom:.5rem}
.concept{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 2.5rem;max-width:66rem;padding:1.1rem 0;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--header-h) + 1rem)}
.concept--fig{grid-template-columns:minmax(0,1fr) 15rem}
.concept:focus{outline:none}
.concept.is-target .concept__name{box-shadow:inset 2px 0 0 var(--accent);padding-left:.6rem;margin-left:-.6rem}
.concept__name{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.concept__anchor{color:var(--text);text-decoration:none}
.concept__anchor:hover{text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:.2em}
.concept__meaning{color:var(--text);margin-top:.3rem;max-width:var(--measure)}
.concept__dl{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:.4rem 1.25rem;margin:.8rem 0 0;font-size:var(--fs-small);max-width:calc(var(--measure) + 11rem)}
.concept__dl dt{font-family:var(--mono);font-size:var(--fs-mono-th);letter-spacing:var(--ls-mono-th);text-transform:uppercase;color:var(--text-muted);padding-top:.2rem}
.concept__dl dd{margin:0;color:var(--text-2)}
.concept__where{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem}
.concept__where .tlink{white-space:normal}
.concept__k{color:var(--text);font-weight:600}
.concept__more{max-width:var(--measure)}
.learn-fig{margin:0;align-self:start}
.learn-fig svg{width:100%;height:auto;max-width:15rem}
.learn-fig figcaption{font-size:var(--fs-foot);color:var(--text-muted);margin-top:.4rem;line-height:1.45}
.lf-tie{stroke:var(--edge);stroke-width:1.5}
.lf-tie--key{stroke:var(--cat-1);stroke-width:2}
.lf-tie--missing{stroke:var(--text-muted);stroke-width:1.25;stroke-dasharray:3 4}
.lf-node{fill:var(--node);stroke:var(--bg);stroke-width:2}
.lf-node--focus{fill:var(--cat-1)}
.lf-text{fill:var(--text-2);font-family:var(--sans);font-size:11px}
@media (max-width:760px){
  .concept--fig{grid-template-columns:minmax(0,1fr)}
  .concept__dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .concept__dl dd + dt{margin-top:.5rem}
  .learn__explain{text-align:left;flex-basis:100%}
}
/* A caller's extra paragraph in a measure tooltip (formula in plain words). */
.tip__note{margin-top:.45rem;padding-top:.45rem;border-top:1px solid var(--rule);color:var(--text-2)}
/* With a sticky first column, the left fade would dim it; the sticky column
   already shows that the table has scrolled. */
.people-table .vt--more-left::before,.people-table.vt--more-left::before{display:none}

/* Learn: About and limits */
.learn-about h3{margin-top:1.75rem}
.learn-about__list{margin:.4rem 0 0;padding-left:1.1rem}
.learn-about__list li{margin-bottom:.4rem}
.learn-about__group{margin-top:1rem}