/* arete.css — the design system. Colour tokens come from css/tokens.css, which
   tools/palette.mjs solves and writes; nothing here picks a colour. */

:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:16px; --rl:28px; --rxl:34px;
  --wrap:1160px;
  --shadow-s:0 1px 2px rgba(30,28,70,.05), 0 6px 18px rgba(30,28,70,.06);
  --shadow-m:0 1px 3px rgba(30,28,70,.06), 0 14px 38px rgba(30,28,70,.09);
  --shadow-l:0 2px 8px rgba(30,28,70,.08), 0 34px 80px rgba(30,28,70,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.62 var(--sans);letter-spacing:-.009em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.024em;line-height:1.07}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}
::selection{background:color-mix(in oklab,var(--warm) 26%,transparent)}

/* Scroll reveal is SCOPED TO .js, set by an inline script before any
   stylesheet. Unscoped, every revealed element starts at opacity 0 and the
   whole page is blank to anyone without JavaScript. */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-reveal].seen{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:770px;margin:0 auto}
.mid{max-width:940px;margin:0 auto}
.center{text-align:center}

/* ---------------- nav ---------------- */
.bar{position:fixed;inset:16px 0 auto;z-index:80;pointer-events:none}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:0 16px;display:flex;justify-content:center}
.bar-pill{pointer-events:auto;display:flex;align-items:center;gap:4px;
  background:color-mix(in oklab,var(--card) 80%,transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);
  border-radius:999px;padding:7px 8px 7px 17px;box-shadow:var(--shadow-s);max-width:100%}
.bar-mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--serif);
  font-size:20.5px;letter-spacing:-.022em;padding-right:12px;white-space:nowrap;color:var(--ink)}
.bar-mark svg{width:21px;height:21px;flex:none}
.bar-nav{display:flex;gap:1px}
.bar-nav a{text-decoration:none;color:var(--ink-mid);font-size:14.5px;padding:8px 12px;border-radius:999px;
  white-space:nowrap;transition:background .18s,color .18s}
.bar-nav a:hover{background:color-mix(in oklab,var(--sunk) 82%,transparent);color:var(--ink)}
.bar-nav a[aria-current]{color:var(--ink);background:color-mix(in oklab,var(--sunk) 90%,transparent)}
/* .bar-nav a IS TWO CLASSES AND A CTA WRITTEN AS ONE LOSES TO IT. A sibling
   shipped its primary call to action as dark-on-dark at 1.3:1 for exactly this
   reason, and no file check could see it. */
.bar .bar-cta{background:var(--accent);color:#fff;padding:9px 18px;border-radius:999px;
  font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:transform .18s,filter .18s;margin-left:4px}
.bar .bar-cta:hover{transform:translateY(-1px);filter:brightness(1.12)}
.bar-more{display:none;pointer-events:auto;background:none;border:0;cursor:pointer;
  padding:9px 13px;color:var(--ink-mid);font:inherit;font-size:14.5px;border-radius:999px}
.bar-sheet{display:none}
@media (max-width:960px){
  .bar-nav{display:none}
  .bar-more{display:block}
  /* The mobile menu is NOT decoration: collapsing the nav with nothing behind
     it leaves every page but this one reachable only from the footer. */
  .bar-sheet{display:block;position:fixed;inset:0;z-index:79;background:color-mix(in oklab,var(--deep-band) 42%,transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .22s}
  .bar-sheet[data-open]{opacity:1;pointer-events:auto}
  .bar-sheet-in{position:absolute;left:16px;right:16px;top:76px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--rl);padding:10px;box-shadow:var(--shadow-l)}
  .bar-sheet a{display:block;text-decoration:none;padding:13px 16px;border-radius:14px;color:var(--ink);font-size:17px}
  .bar-sheet a:hover{background:var(--sunk)}
}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:min(104vh,1000px);display:flex;align-items:center;
  justify-content:center;padding:132px 22px 84px;overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:52% 46%}
/* The scrim is what makes type on a photograph legible without making the
   photograph grey. Measured, not eyeballed: tools/measure-image.mjs reports
   the composite. */
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 42%, color-mix(in oklab,var(--ground) 26%,transparent) 0%, transparent 62%),
    linear-gradient(to bottom, color-mix(in oklab,var(--ground) 30%,transparent) 0%, transparent 26%, transparent 62%, var(--ground) 100%)}
.hero-card{width:min(830px,100%);border-radius:var(--rxl);padding:clamp(34px,5.4vw,60px) clamp(24px,5vw,58px);
  background:color-mix(in oklab,var(--card) 76%,transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(26px);backdrop-filter:saturate(1.5) blur(26px);
  border:1px solid color-mix(in oklab,#fff 55%,transparent);
  box-shadow:var(--shadow-l);text-align:center}
.hero h1{font-family:var(--serif);font-size:clamp(58px,10.4vw,116px);line-height:.93;
  letter-spacing:-.036em;margin:16px 0 22px}
.hero-lede{font-size:clamp(17px,2vw,20.5px);line-height:1.55;color:var(--ink-mid);
  max-width:56ch;margin:0 auto 30px}
.chip{display:inline-flex;align-items:center;gap:9px;background:color-mix(in oklab,var(--card) 88%,transparent);
  border:1px solid color-mix(in oklab,var(--line) 70%,transparent);border-radius:999px;
  padding:8px 16px;font-size:14px;color:var(--ink-mid)}
.chip b{font-weight:600;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--pos);flex:none;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--pos) 22%,transparent)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;border:0;cursor:pointer;
  font:inherit;font-size:16px;font-weight:500;padding:15px 27px;border-radius:999px;
  transition:transform .18s,filter .18s,background .18s}
.btn-1{background:var(--accent);color:#fff}
.btn-1:hover{transform:translateY(-1px);filter:brightness(1.13)}
.btn-2{background:color-mix(in oklab,var(--card) 92%,transparent);color:var(--ink);
  border:1px solid color-mix(in oklab,var(--line) 75%,transparent)}
.btn-2:hover{transform:translateY(-1px);background:var(--card)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-mid);
  background:color-mix(in oklab,var(--card) 74%,transparent);border-radius:999px;padding:8px 15px;
  border:1px solid color-mix(in oklab,var(--line) 55%,transparent)}
.pill svg{width:14px;height:14px;opacity:.75}

/* the card that overlaps the hero and the first band */
.float{max-width:660px;margin:-72px auto 0;position:relative;z-index:5;
  background:var(--card);border-radius:var(--rl);box-shadow:var(--shadow-l);
  border:1px solid var(--line);overflow:hidden}
.float-head{display:flex;gap:14px;align-items:flex-start;padding:22px 26px 18px}
.float-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in oklab,var(--warm) 16%,var(--card))}
.float-ic svg{width:20px;height:20px}
.float-head h3{font-size:17px;font-weight:600;letter-spacing:-.012em;font-family:var(--sans)}
.float-head p{font-size:13.5px;color:var(--ink-faint);margin:3px 0 0}
.float-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 26px;border-top:1px solid var(--line);font-size:15px}
.float-row span{color:var(--ink-mid)}
.float-row b{font-family:var(--mono);font-size:14.5px;font-weight:500;white-space:nowrap}
.float-row.hi{background:color-mix(in oklab,var(--warm) 9%,var(--card))}
.float-row.hi b{color:var(--warm)}

/* ---------------- bands ---------------- */
.band{padding:clamp(70px,10vw,124px) 0}
.band-sunk{background:var(--sunk)}
.band-card{background:var(--card)}
/* A DARK BAND HAS TO OVERRIDE EVERY INK TOKEN IT INHERITS, and the way to do
   that is to REDEFINE THE TOKENS rather than to enumerate the selectors. The
   first version here listed .lede, .note, td and th — and shipped every
   .panel p, every .ticks li and every panel icon as dark-on-dark, because a
   list of selectors is a list of the ones somebody thought of. A sibling
   shipped three nodes at 1.2, 1.4 and 1.9:1 the same way. */
.band-deep{
  background:var(--deep-band);
  --ink:var(--on-deep);
  --ink-mid:var(--on-deep-faint);
  --ink-faint:var(--on-deep-faint);
  --accent:var(--warm-on-deep);
  --warm:var(--warm-on-deep);
  --card:color-mix(in oklab,#fff 7%,transparent);
  --sunk:color-mix(in oklab,#fff 13%,transparent);
  --line:color-mix(in oklab,#fff 17%,transparent);
  --line-strong:color-mix(in oklab,#fff 30%,transparent);
  color:var(--on-deep)}
.band-deep a{color:var(--on-deep)}
/* The one thing the token swap cannot do: a filled button needs a background
   that is not translucent, and white-on-amber is not a contrast anybody wants.
   The primary CTA inverts to a solid light pill with dark ink. */
.band-deep .btn-1{background:var(--ground);color:var(--deep-band)}
.band-deep .btn-2{background:color-mix(in oklab,#fff 13%,transparent);color:var(--on-deep);
  border-color:color-mix(in oklab,#fff 26%,transparent)}
.band-deep .panel-ic{background:color-mix(in oklab,#fff 13%,transparent)}

.eyebrow{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--warm);
  font-weight:600;margin:0 0 18px}
/* CLASS, NOT TAG. Written as `h2.display` this rule silently stopped applying
   the moment every interior page's title became the h1 it should always have
   been — and no contrast, overflow or heading-order check can see an unstyled
   heading, because it is still a heading and still legible. */
.display{font-family:var(--serif);font-size:clamp(36px,5.6vw,62px);line-height:1.03;
  letter-spacing:-.032em;margin:0 0 20px}
.display em{font-style:italic;color:var(--accent)}
.sub{font-family:var(--serif);font-size:clamp(24px,3.2vw,34px);letter-spacing:-.026em;margin:0 0 14px}
.lede{font-size:clamp(16.5px,1.8vw,19px);color:var(--ink-mid);line-height:1.58;max-width:60ch}
.center .lede{margin-left:auto;margin-right:auto}
.note{font-size:13.5px;color:var(--ink-faint);line-height:1.55}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--rl);
  padding:26px 26px 24px;min-width:0}
.panel-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in oklab,var(--accent) 11%,var(--card))}
.panel-ic svg{width:20px;height:20px;color:var(--accent)}
.panel h2,.panel h3{font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.02em;margin:0 0 11px}
.panel p{font-size:15.5px;color:var(--ink-mid);line-height:1.56}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink-mid);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:999px;background:var(--warm)}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--rl);padding:26px 22px;text-align:center;min-width:0}
.stat b{display:block;color:var(--ink);font-family:var(--serif);font-size:clamp(30px,4.6vw,46px);letter-spacing:-.03em;line-height:1;
  margin-bottom:11px;font-weight:400}
.stat span{display:block;font-size:13.5px;color:var(--ink-faint);line-height:1.45}
.stat.warm b{color:var(--warm)}

/* before / after */
.ba{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.ba{grid-template-columns:minmax(0,1fr)}}
.ba .panel{background:color-mix(in oklab,var(--card) 70%,var(--sunk))}
.ba .panel.good{background:var(--card)}
.xy{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.xy li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:15px;color:var(--ink-mid);line-height:1.5}
/* A GRID CONTAINER SPLITS INLINE MARKUP INTO ANONYMOUS ITEMS. Written with the
   text as a bare child, every <b> in these list items became its own grid item
   and the sentence rendered one word per row — valid markup, and only a
   screenshot found it. The text is always exactly one element. */
.xy li > span:last-child{min-width:0}
.xy li > span:last-child b{font-weight:600;color:var(--ink)}
.xy svg{width:15px;height:15px;margin-top:4px}
.xy .no{color:var(--neg)} .xy .yes{color:var(--pos)}

/* ---------------- tables ---------------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--rl);background:var(--card);min-width:0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;
  background:var(--sunk);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:13.5px}
tbody tr:hover td{background:color-mix(in oklab,var(--sunk) 55%,var(--card))}
.mono{font-family:var(--mono);font-size:13.5px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:999px}
.tag-ok{background:color-mix(in oklab,var(--pos) 16%,var(--card));color:var(--pos)}
.tag-no{background:color-mix(in oklab,var(--neg) 15%,var(--card));color:var(--neg)}
.tag-w{background:color-mix(in oklab,var(--warm) 18%,var(--card));color:var(--warm)}

/* ---------------- prose ---------------- */
.prose{font-size:17.5px;line-height:1.72;color:var(--ink-mid)}
/* Styled by DEPTH IN THE PROSE, not by tag number. The tags carry the
   document outline — a page with one h1 and no skipped levels — and the size
   here follows the role. Written the other way round, an interior page opened
   at h2 and jumped to h4 in its own footer. */
.prose h2{font-family:var(--serif);font-size:27px;font-weight:400;color:var(--ink);margin:46px 0 14px;letter-spacing:-.022em}
.prose h3{font-size:16px;font-weight:600;color:var(--ink);margin:30px 0 8px;letter-spacing:-.01em}
.prose p{margin:0 0 1.05em}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font-family:var(--mono);font-size:.87em;background:var(--sunk);padding:2px 6px;border-radius:6px;
  color:var(--ink);word-break:break-word}
.prose ul{margin:0 0 1.1em;padding-left:20px}
.prose li{margin:0 0 .5em}
.formula{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin:22px 0;font-family:var(--mono);font-size:15px;line-height:1.8;
  color:var(--ink);overflow-x:auto}
.formula em{font-style:normal;color:var(--warm)}
.callout{border-left:3px solid var(--warm);padding:4px 0 4px 20px;margin:26px 0;
  font-size:17px;color:var(--ink)}

/* ---------------- charts ---------------- */
figure{margin:26px 0}
figure svg{width:100%;height:auto;display:block;overflow:visible}
figcaption{font-size:13.5px;color:var(--ink-faint);margin-top:12px;line-height:1.55}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--rl);padding:22px}

/* ---------------- controls ---------------- */
.ctl{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:0 0 20px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
input[type=text],input[type=number],select{font:inherit;font-size:15px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);min-width:0;max-width:100%}
input[type=text]:focus,input[type=number]:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
input[type=range]{width:100%;accent-color:var(--accent)}
.seg{display:inline-flex;background:var(--sunk);border-radius:999px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:14px;border:0;background:none;cursor:pointer;padding:8px 16px;
  border-radius:999px;color:var(--ink-mid)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-s)}

/* ---------------- accordion ---------------- */
.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--rl);
  margin-bottom:12px;overflow:hidden}
.acc summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:17px;color:var(--ink);
  display:flex;justify-content:space-between;gap:18px;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;color:var(--ink-faint);line-height:1}
.acc[open] summary::after{content:"\2013"}
.acc-body{padding:0 24px 22px;font-size:16px;color:var(--ink-mid);line-height:1.65}
.acc-body p{margin:0 0 .9em}
.acc-body code{font-family:var(--mono);font-size:.87em;background:var(--sunk);padding:2px 6px;border-radius:6px}

/* ---------------- footer ---------------- */
.foot{background:var(--deep-band);color:var(--on-deep);padding:72px 0 30px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px}
@media (max-width:820px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-mark{font-family:var(--serif);font-size:27px;display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-mark svg{width:24px;height:24px}
.foot p{font-size:14.5px;color:var(--on-deep-faint);max-width:36ch;line-height:1.6}
.foot h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--warm-on-deep);
  font-weight:600;margin:0 0 14px}
.foot a{display:block;text-decoration:none;color:var(--on-deep-faint);font-size:15px;padding:5px 0}
.foot a:hover{color:var(--on-deep)}
.foot-bot{margin-top:52px;padding-top:22px;border-top:1px solid color-mix(in oklab,#fff 16%,transparent);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--on-deep-faint)}

/* ---------------- misc ---------------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:15px;align-items:baseline}
.kv dt{color:var(--ink-faint)} .kv dd{margin:0;font-family:var(--mono);font-size:14px;word-break:break-all}
.state-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line)}
@media (max-width:640px){.state-row{grid-template-columns:minmax(0,1fr)}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--card);padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* market grid */
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.mk-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.mk-t b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.mk-b{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-faint);padding:2px 0}
.mk-b b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-mid)}
.mk-b b.up{color:var(--pos)} .mk-b b.dn{color:var(--neg)} .mk-b b.fee{color:var(--warm)}
.float-row b.dn{color:var(--neg)}

/* Nested labels inside a segmented control are not field labels. Written as
   `.field label` the rule reached them and set the radio captions in small
   caps with letterspacing. */
.field > label{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.seg label{font-size:14.5px;letter-spacing:normal;text-transform:none;color:var(--ink-mid);font-weight:400}
.seg label:has(input:checked){color:var(--ink)}

/* A table that scrolls has to LOOK like one. The audit proves the page does not
   scroll sideways, which is a different thing from the reader knowing the table
   does. */
.tw{position:relative}
.tw::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(to right, transparent, color-mix(in oklab,var(--card) 92%,transparent));
  border-radius:0 var(--rl) var(--rl) 0}
.tw:has(table:only-child)::after{opacity:1}

/* The X link in the nav pill. Sized and padded like .bar-nav a so the pill's
   rhythm holds, and given an aria-label because an icon-only link has no
   accessible name — the live audit checks for exactly that. */
.bar-x{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  color:var(--ink-mid);flex:none;transition:background .18s,color .18s}
.bar-x svg{width:15px;height:15px}
.bar-x:hover{background:color-mix(in oklab,var(--sunk) 90%,transparent);color:var(--ink)}