/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — one release. Loaded after cc.css.
   Ported from notes/mockups/redesign-2026-08/c-changelog.html.

   Four class names differ from the mockup, because cc.css already owns the
   mockup's spelling and both sheets load on this page:
     .rel   → .relhead   (cc.css .rel is the ledger container)
     .acts  → .eacts     (cc.css .acts is the masthead's button cluster)
     .q     → .bq        (.fb-q is the feedback panel's question)
     .sub   → .bsub      (cc.css .sub is a section's standfirst)
   The feedback widgets keep the server's class names rather than the mockup's,
   because public/js/feedback.js finds them by those names and the markup is
   rendered by Blade partials shared with nothing else.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ok:#7ac74f;
  --no:#ff5b5b;
  /* The label gutter. Every .cols row hangs its tier mark in it. */
  --gutter:142px;
  /* Both measured in cc-detail.js: the masthead, then the masthead plus the
     deck, then the whole fixed chrome. A wrong guess here is a heading that
     lands under the sticky bar on every anchor jump. */
  --mast:72px;
  --stick:166px;
  --shell:166px;
}
html{scroll-behavior:smooth; scroll-padding-top:var(--stick)}

/* The mockup runs a size down from the front door: this page is a list of 350
   entries, not a poster. */
body.detail{font-size:13.8px}

.cols{display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); gap:32px}

/* ── release head ───────────────────────────────────────────────────────── */
.relhead{padding-top:44px}
.crumb{display:flex; align-items:center; gap:10px; margin-bottom:28px; flex-wrap:wrap}
.allrel{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sig); border:1px solid var(--sig-dim); padding:9px 15px 9px 13px; line-height:1;
  display:inline-flex; align-items:center; gap:9px; transition:.18s;
}
.allrel:hover{background:var(--sig-ghost); border-color:var(--sig)}
.allrel .ar{font-size:13px; line-height:1; transition:transform .18s var(--ease)}
.allrel:hover .ar{transform:translateX(-3px)}
.step{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:9px 13px; line-height:1; transition:.18s;
}
.step:hover{color:var(--ink); border-color:var(--ink-3)}
.step i{font-style:normal; color:var(--ink-4); margin:0 7px}

.relgrid{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:60px; align-items:end}
.relhead h1{font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(34px,4.3vw,58px); line-height:.94; letter-spacing:-.02em}
.relhead h1 .n{color:var(--ink-3)}
.reldate{margin-top:18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.reldate .d{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.reldate .sep{width:1px; height:11px; background:var(--rule-2)}

/* What is in the release, by tier, as four rows a reader can jump from. */
.jump{border:1px solid var(--rule-2); background:var(--bg-2)}
.jump .hd{padding:12px 15px 10px; border-bottom:1px solid var(--rule)}
.jump a{display:flex; justify-content:space-between; gap:12px; padding:8px 15px; font-size:13.4px; color:var(--ink-2); border-bottom:1px solid var(--rule); transition:.16s; cursor:pointer; font-weight:300}
.jump a:last-child{border-bottom:0}
.jump a:hover{background:var(--raise); color:var(--ink)}
.jump a b{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:500; color:var(--ink)}
.jump a.use b{color:var(--sig)}

.lede{padding:40px 0 30px; border-bottom:1px solid var(--rule)}
.lede .body{max-width:76ch; font-size:15.4px; line-height:1.62; font-weight:300; color:var(--ink)}
/* The summary is two to four paragraphs now, and cc.css resets every margin to
   zero, so without this they render as one wall of text with no break in it. */
.lede .body p{margin:0 0 13px}
.lede .body p:last-child{margin-bottom:0}
.lede .body code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.76em; color:var(--sig); background:var(--sig-ghost); padding:1px 4px}

/* ── sticky deck ────────────────────────────────────────────────────────── */
.deck{position:sticky; top:var(--mast); z-index:50; background:var(--bg); border-bottom:1px solid var(--rule)}
.prog{height:2px; background:var(--rule); position:relative}
.prog i{position:absolute; left:0; top:0; bottom:0; background:var(--sig); width:0}
.deckrow{display:flex; align-items:stretch}

/* The nav scrolls when there are more sections than fit, with no scrollbar and
   a fade on whichever edge has something behind it. The fade is a class rather
   than a constant, because a permanent one dims the last section on a wide
   window where nothing is cut, which reads as a rendering fault. */
.secnav{display:flex; overflow-x:auto; flex:1 1 auto; min-width:0; scrollbar-width:none; overscroll-behavior-x:contain}
.secnav::-webkit-scrollbar{display:none}
.secnav.ovr-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
.secnav.ovr-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px); mask-image:linear-gradient(90deg,transparent,#000 46px)}
.secnav.ovr-l.ovr-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent); mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent)}
.secnav a{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:11px 15px; white-space:nowrap; border-right:1px solid var(--rule);
  border-bottom:2px solid transparent; transition:.18s;
}
.secnav a:first-child{padding-left:0}
.secnav a sup{font-size:8.5px; color:var(--ink-4); margin-left:6px; position:relative; top:-.4em}
.secnav a:hover{color:var(--ink)}
.secnav a.on{color:var(--ink); border-bottom-color:var(--sig)}
.secnav a.on sup{color:var(--sig)}

/* Nothing renders these at the moment: the deck stopped offering the three
   views, and split is what everyone gets. Kept whole, along with every
   html[data-view="read"] and html[data-view="compact"] rule below, because the
   views themselves still work and the buttons are the only thing that went. */
.views{flex:0 0 auto; display:flex; align-items:center; gap:0; background:var(--bg); border-left:1px solid var(--rule); padding-left:15px}
.views .vlbl{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-4); margin-right:11px}
.vb{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid var(--rule-2); border-right-width:0; color:var(--ink-3);
  padding:7px 11px; cursor:pointer; transition:.16s; line-height:1;
}
.vb:last-child,.vb:has(+ .vb.narrow){border-right-width:1px}
.vb:hover{color:var(--ink)}
.vb.on{color:var(--sig); border-color:var(--sig-dim); box-shadow:0 0 14px var(--sig-ghost) inset}
.vb.on+.vb{border-left-color:var(--sig-dim)}
/* Split needs width. Below the threshold the button goes away rather than
   sitting there dead; the stored preference survives and comes back with the
   window. */
.vb.narrow{display:none}

/* ── filters ────────────────────────────────────────────────────────────── */
/* One field, three switches, and the full list of literal names in its own
   index. The two questions a reader arrives with are "does this name the thing
   I care about" and "show me only the parts that matter"; everything else was
   a chip nobody pressed. */
.facets{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding-block:8px 7px}
/* The switches are one group so a narrow screen can turn them into a single
   sideways-scrolling line rather than three stacked rows of sticky chrome. */
.fchips{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0}
.fsearch{position:relative; display:flex; align-items:center; flex:0 1 330px; min-width:180px}
.fsearch input{
  width:100%; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.05em;
  background:var(--bg-2); border:1px solid var(--rule-2); color:var(--ink);
  padding:7px 30px 7px 11px; line-height:1.35;
}
.fsearch input:focus{outline:0; border-color:var(--sig-dim); background:var(--bg)}
.fsearch input::placeholder{color:var(--ink-4); letter-spacing:.08em}
.fx{position:absolute; right:0; background:none; border:0; color:var(--ink-4); cursor:pointer; font-size:14px; line-height:1; padding:6px 9px; display:none}
.fsearch.has .fx{display:block}
.fx:hover{color:var(--ink)}
.ft{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:1px solid var(--rule-2);
  padding:6px 11px; cursor:pointer; transition:.16s; white-space:nowrap; line-height:1.3;
  display:inline-flex; align-items:center; gap:8px;
}
.ft:hover{color:var(--ink); border-color:var(--ink-3)}
.ft b{font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:400; font-size:8.5px; color:var(--ink-4)}
.ft.on{color:var(--ink); border-color:var(--sig-dim); background:var(--sig-ghost)}
.ft.on b{color:var(--sig)}
/* Each switch wears the same mark its entries wear on the rail, so the control
   and the thing it selects are visibly one object. */
.ft.notable::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ink-4); flex:0 0 auto}
.ft.notable.on::before{background:var(--sig)}
.ft.off::before{content:""; width:5px; height:5px; border-radius:50%; border:1px solid var(--ink-4); flex:0 0 auto}
.ft.off.on::before{border-color:var(--sig)}
/* A name picked out of the index is a harder constraint than anything typed, so
   it gets its own control rather than being poured into the search box: the
   reader can see it is on, see which name it is, and take it off in one click. */
.ftok{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.02em;
  color:var(--ink); background:var(--sig-ghost); border:1px solid var(--sig-dim);
  padding:5px 7px 5px 10px; cursor:pointer; line-height:1.3; transition:.16s;
  display:inline-flex; align-items:center; gap:8px; max-width:340px;
}
.ftok[hidden]{display:none}
.ftok:hover{border-color:var(--sig)}
.ftok i{font-style:normal; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4)}
.ftok s{text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sig)}
.ftok em{font-style:normal; font-size:13px; line-height:1; color:var(--ink-4); padding-left:2px}
.ftok:hover em{color:var(--ink)}
.findex{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  background:none; border:0; color:var(--ink-3); cursor:pointer; padding:6px 2px; transition:.16s;
  border-bottom:1px solid var(--rule-2);
}
.findex:hover{color:var(--sig); border-color:var(--sig)}
/* What the filter did, said in numbers, with the way out next to it. */
.fnow{display:none; margin-left:auto; align-items:center; gap:12px; padding-left:16px}
.fnow.show{display:flex}
.fnow .cnt{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.fnow .cnt b{color:var(--sig); font-weight:500}
.fclr{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid var(--rule-2); color:var(--ink-3); padding:5px 9px; cursor:pointer; transition:.16s; line-height:1;
}
.fclr:hover{color:var(--ink); border-color:var(--ink-3)}

/* ── the switched-off banner ────────────────────────────────────────────── */
/* Only on screen while that filter is on, which is also where its rating sits:
   asking whether the section was worth reading is a question for someone who
   just read it. */
.banner{display:none; background:var(--raise); border-bottom:1px solid var(--rule)}
.banner.show{display:block}
.banner .cols{padding-block:20px 22px}
.banner .bq{font-family:"Instrument Serif",serif; font-size:19px; margin-bottom:6px}
.banner .bsub{color:var(--ink-2); font-size:13.2px; font-weight:300; max-width:78ch; margin-bottom:14px; line-height:1.6}

/* ── sections ───────────────────────────────────────────────────────────── */
.browser section{border-bottom:1px solid var(--rule)}
.sechead{padding-block:46px 22px; cursor:default}
section.fold .sechead{cursor:pointer; padding-block:22px}
.sechead h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:25px; line-height:1.06; letter-spacing:-.012em; transition:.18s}
section.fold .sechead h2{font-size:18.5px; color:var(--ink-2)}
section.fold .sechead:hover h2{color:var(--ink)}
section.fold.open .sechead h2{color:var(--ink)}
.sechead .note{margin-top:10px; max-width:66ch; color:var(--ink-2); font-size:13.2px; line-height:1.55; font-weight:300}
.sechead .cnt{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:13px}
.sechead .cnt i{display:block; width:22px; height:1px; background:var(--sig); margin-bottom:11px}
section.fold .sechead .cnt{padding-top:7px}
section.fold .sechead .cnt i{display:none}
.chev{float:right; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
section.fold .rows{display:none}
section.fold.open .rows{display:block}
.divider{background:var(--bg-2); border-bottom:1px solid var(--rule)}
.divider .cols{padding-block:30px}
.divider h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:21px; color:var(--ink-2)}
.divider p{margin-top:7px; max-width:72ch; color:var(--ink-3); font-size:13.2px; font-weight:300}

/* ── entry, read view ───────────────────────────────────────────────────── */
.e{position:relative; padding-block:10px; border-top:1px solid var(--rule)}
.e:first-child{border-top:0}
.e.hide{display:none}
.e .g{padding-top:3px; display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.gmeta{display:flex; flex-wrap:wrap; gap:4px 9px; align-items:baseline}
.e .m{min-width:0}
.tier{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.tier::before{content:""; display:inline-block; width:6px; height:6px; margin-right:8px; vertical-align:1px}
.t-use{color:var(--sig)} .t-use::before{background:var(--sig)}
.t-notice{color:var(--ink-2)} .t-notice::before{background:var(--ink-2)}
/* Gated features are what most readers come for, so the ring is ember, not grey. */
.t-soon{color:var(--ink-2)} .t-soon::before{border:1px solid var(--sig-dim); width:4px; height:4px}
.t-internal{color:var(--ink-4)} .t-internal::before{background:var(--ink-4)}
.area{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.05em; color:var(--ink-4); line-height:1.5}
.e h3{font-family:"Newsreader",serif; font-weight:500; font-size:15.4px; line-height:1.3; letter-spacing:-.005em; margin-bottom:4px; max-width:62ch; cursor:pointer}
.e h3:hover{color:var(--sig)}
.e h3 code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.78em; font-weight:400; color:var(--sig)}
.gl{color:var(--ink-2); font-size:13.4px; line-height:1.52; max-width:74ch; font-weight:300}
.gate{margin-top:8px; max-width:74ch; font-size:12.8px; line-height:1.5; color:var(--ink-3); font-style:italic; border-left:1px solid var(--rule-2); padding-left:12px}
.gl code,.gate code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.79em; color:var(--sig); background:var(--sig-ghost); padding:1px 4px}
/* The one thing on a card a person wrote. It sits in the folded card, above the
   Details button, so it has to read as an aside and not as another line of the
   machine's prose: raised off the page, ember rule down the side, and a label
   saying who is talking. Only existing custom properties, so it lands in both
   themes without a second rule. */
.enote{margin-top:11px; max-width:74ch; background:var(--raise); border-left:2px solid var(--sig-dim); padding:11px 14px}
.enl{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--sig); margin-bottom:7px}
.enl time{color:var(--ink-4); margin-left:8px; letter-spacing:.08em}
.enb p{font-size:13.2px; line-height:1.6; color:var(--ink-2); font-weight:300; margin-bottom:9px}
.enb p:last-child{margin-bottom:0}
.enb a{color:var(--sig); border-bottom:1px solid var(--sig-dim)}
.enb a:hover{border-bottom-color:var(--sig)}
.enb code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.79em; color:var(--sig); background:var(--sig-ghost); padding:1px 4px}

/* What the flag server said, next to the entry the flag gates. It reads as
   evidence rather than as a verdict: the state is a label, both arms are shown
   as raw words underneath it, and the last line is the scope plus the FAQ,
   which is not optional copy. Only existing custom properties, so it lands in
   both themes. */
.flagbox{margin-top:11px; max-width:74ch; border:1px solid var(--rule-2); padding:11px 14px}
.fbl{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:8px}
.fbr{padding-left:9px; border-left:2px solid var(--rule-2); margin-bottom:10px}
.fbr:last-of-type{margin-bottom:8px}
.fbr.fb-on-in-practice,.fbr.fb-graduated{border-left-color:var(--sig-dim)}
.fbh{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:5px}
.fbh .fbn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink); background:var(--raise); padding:1px 5px}
.fbs{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.fb-on-in-practice .fbs,.fb-graduated .fbs{color:var(--sig)}
.fbb{font-size:13.2px; line-height:1.6; color:var(--ink-2); font-weight:300}
.fbv{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ink-4); margin-top:5px}
.fbv b{color:var(--ink-2); font-weight:500}
.fbw{font-size:12.4px; line-height:1.55; color:var(--ink-4); font-weight:300; margin-top:5px}
.fbf{font-size:12.4px; line-height:1.55; color:var(--ink-4); font-weight:300; border-top:1px solid var(--rule); padding-top:8px}
.fbf a{color:var(--sig); border-bottom:1px solid var(--sig-dim)}
.fbf a:hover{border-bottom-color:var(--sig)}
.ffs{margin-top:2px}
.fslbl{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-4)}
.enb ul{margin:0; padding-left:18px; font-size:13.2px; line-height:1.6; color:var(--ink-2); font-weight:300}
.toks{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.tok{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--ink-3); border:1px solid var(--rule-2); padding:2px 7px}
/* A search hit on a token used to be invisible: the name that matched lives in
   the body, which a rail row does not show, so the row looked like it had
   matched nothing. Named `hits` rather than `why`, because `.seg-evidence .why`
   is the evidence caption and a base `.why{display:none}` here hid it. */
.hits{display:none; margin-top:9px; gap:6px; flex-wrap:wrap; align-items:center}
.hits.show{display:flex}
.hits i{font-style:normal; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4)}
.hits span{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; color:var(--sig); border:1px solid var(--sig-dim); background:var(--sig-ghost); padding:2px 6px}

/* Controls float over the right of the row on hover, so a resting entry costs
   its words and nothing else. */
.eacts{
  position:absolute; right:0; top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  opacity:0; pointer-events:none; transition:opacity .15s; background:var(--bg); padding-left:16px; z-index:3;
}
.e:hover>.m>.eacts,.e:focus-within>.m>.eacts,.e.open>.m>.eacts,.e.fbopen>.m>.eacts{opacity:1; pointer-events:auto}
/* On a touch screen there is no hover to reveal them with, so they sit in the
   flow and take a finger-sized target. */
@media (hover:none){
  .eacts{position:static; opacity:1; pointer-events:auto; margin-top:12px; background:none; padding-left:0}
}
.btn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; background:var(--bg); border:1px solid var(--rule-2); color:var(--ink-2); padding:7px 12px; cursor:pointer; transition:.16s; line-height:1}
.btn:hover{color:var(--ink); border-color:var(--ink-3)}
.btn.det{border-color:var(--sig-dim); color:var(--sig)}
.btn.det:hover{background:var(--sig-ghost); border-color:var(--sig)}
.notable{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--sig); line-height:1.5}
.notable::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--sig); margin-right:6px; vertical-align:.5px}
.undoc{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); line-height:1.5}
/* Says a note exists where the note itself will not fit, which is the rail row
   in split. Squared rather than round so it does not read as a second Notable. */
.hasnote{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); line-height:1.5; white-space:nowrap}
.hasnote::before{content:""; display:inline-block; width:5px; height:5px; background:var(--sig-ghost); border:1px solid var(--sig-dim); margin-right:6px; vertical-align:.5px}
/* The two scores, under the tier mark. This repeats 358 times on the newest
   release, so it is the quietest thing on the card that can still be read: the
   label is ink-4, only the numeral is brighter, and only Signal takes ember. */
.gscore{display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.sc{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); line-height:1.5; white-space:nowrap}
.sc b{font-weight:400; color:var(--ink-3); margin-left:6px}
.sc.sig b{color:var(--sig)}

/* ── entry body ─────────────────────────────────────────────────────────── */
.bd{display:none; margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); max-width:86ch}
.e.open .bd{display:block; animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.bd .blabel{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.bd p{font-size:13.8px; line-height:1.66; color:var(--ink-2); margin-bottom:12px; font-weight:300}
.bd p:last-child{margin-bottom:0}
.bd ul{margin:0; padding:0; list-style:none}
.bd li{position:relative; padding-left:19px; margin-bottom:7px; font-size:13.4px; line-height:1.6; color:var(--ink-2); font-weight:300}
.bd li::before{content:""; position:absolute; left:1px; top:.68em; width:8px; height:1px; background:var(--ink-4)}
.bd code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.79em; color:var(--sig); background:var(--sig-ghost); padding:1px 4px}
.bd pre{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.3px; line-height:1.7; background:var(--bg-2); border-left:2px solid var(--rule-2); padding:10px 13px; overflow-x:auto; color:var(--ink-2)}
.bd pre code{background:none; color:var(--ink); padding:0; font-size:1em}
.bd hr{display:none}
.seg{margin-bottom:22px}
.seg:last-child{margin-bottom:0}
.seg-evidence{border-left:2px solid var(--sig-dim); background:var(--sig-ghost); padding:13px 15px}
.seg-evidence .blabel{color:var(--sig)}
.seg-evidence p{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; line-height:1.85; color:var(--ink-3); margin-bottom:7px; overflow-wrap:anywhere}
.seg-evidence code{background:none; color:var(--ink-2); padding:0; font-size:1em}
.seg-evidence .why{font-family:"Newsreader",serif; font-size:12.4px; line-height:1.5; color:var(--ink-3); font-style:italic; margin:11px 0 0; border-top:1px solid var(--sig-dim); padding-top:9px}

/* ── entry feedback ─────────────────────────────────────────────────────── */
/* The mockup's vote pair and its "tell us why" button are one cluster here,
   because that is the markup the endpoints and feedback.js were built against.
   Counts are in the DOM either way; body[data-counts] decides whether a reader
   sees them. */
.fb{display:inline-flex; border:1px solid var(--rule-2); background:var(--bg)}
.fb-btn{
  background:none; border:0; color:var(--ink-3); padding:7px 12px; cursor:pointer; line-height:1; transition:.16s;
  display:inline-flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
}
.fb-btn+.fb-btn{border-left:1px solid var(--rule-2)}
.fb-btn svg{width:12px; height:12px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fb-n{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; color:inherit}
body[data-counts="off"] .fb-n{display:none}
.fb-up:hover{color:var(--ok); background:rgba(122,199,79,.10)}
.fb-down:hover{color:var(--no); background:rgba(255,91,91,.10)}
.fb-up.on{color:var(--ok); background:rgba(122,199,79,.14)}
.fb-down.on{color:var(--no); background:rgba(255,91,91,.14)}
.fb-say:hover{color:var(--ink)}
.fb-say.on{color:var(--sig)}

.fb-panel{margin-top:15px; border:1px solid var(--rule-2); background:var(--bg-2); padding:16px; max-width:86ch; animation:rise .28s var(--ease)}
.fb-panel[hidden],.sfb-follow[hidden],.ftok[hidden]{display:none}
.fb-q{font-size:13.8px; color:var(--ink); margin-bottom:12px; font-weight:300}
.fb-chips{display:flex; flex-wrap:wrap; gap:7px}
.fb-chips[hidden]{display:none}
.fb-chip{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--rule-2); background:none; color:var(--ink-2); padding:8px 11px; cursor:pointer; transition:.16s; line-height:1}
.fb-chip:hover{border-color:var(--ink-3); color:var(--ink)}
.fb-chip.on{background:var(--sig); border-color:var(--sig); color:#0a0a0b}
.fb-note{width:100%; margin-top:12px; background:var(--bg); border:1px solid var(--rule-2); color:var(--ink); font-family:"Newsreader",serif; font-size:13.6px; padding:10px 12px; resize:vertical; min-height:58px; line-height:1.5}
.fb-note:focus{outline:0; border-color:var(--sig-dim)}
.fb-foot{margin-top:12px; display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.fb-send,.fb-cancel{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; padding:9px 14px; cursor:pointer; line-height:1; transition:.16s}
.fb-send{background:var(--sig); border:1px solid var(--sig); color:#0a0a0b}
.fb-send:hover{filter:brightness(1.1)}
.fb-cancel{background:none; border:1px solid var(--rule-2); color:var(--ink-3)}
.fb-cancel:hover{color:var(--ink); border-color:var(--ink-3)}
.fb-priv{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4)}
.fb-thanks{color:var(--ok); font-size:12.8px}
.fb-error{margin-top:10px; color:var(--no); font-size:12.4px; font-weight:300}
.fb-error[hidden]{display:none}

/* ── section rating ─────────────────────────────────────────────────────── */
.sfb{border-top:1px solid var(--rule); background:var(--bg-2); padding:20px 0 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.sfb-q{font-family:"Instrument Serif",serif; font-size:19px; color:var(--ink)}
.sfb-btns{display:flex; flex-wrap:wrap; gap:7px}
.sfb-btn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--rule-2); background:none; color:var(--ink-2); padding:9px 12px; cursor:pointer; transition:.16s; line-height:1}
.sfb-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.sfb-btn.on{background:var(--sig); border-color:var(--sig); color:#0a0a0b}
.sfb-tally{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4)}
body[data-counts="off"] .sfb-tally{display:none}
.sfb-follow{flex:1 0 100%; margin-top:4px; animation:rise .28s var(--ease)}
.sfb-follow .fb-q{font-size:13.4px; margin-bottom:10px}
/* Inside the banner it is on the raised background already, so it drops the
   panel treatment and keeps only its rule. */
.banner .sfb{background:none; padding-bottom:0}

/* ── compact rows: the compact view, and the split view's index ─────────── */
html[data-view="compact"] .e,
html[data-view="split"] .rail .e{
  display:flex; align-items:baseline; gap:11px; padding-block:6px;
}
/* These two out-specify a bare `.e.hide`, so filtering has to be restated at
   their weight or it does nothing you can see: the counts drop, the section
   heads drop, and every row stays on screen. */
html[data-view="compact"] .e.hide,
html[data-view="split"] .rail .e.hide{display:none}
html[data-view="compact"] .e .g,html[data-view="compact"] .e .gmeta,
html[data-view="split"] .rail .e .g,html[data-view="split"] .rail .e .gmeta{display:contents}
html[data-view="compact"] .e .tier,
html[data-view="split"] .rail .e .tier{order:1; font-size:0; letter-spacing:0; flex:0 0 auto; align-self:center}
html[data-view="compact"] .e .tier::before,
html[data-view="split"] .rail .e .tier::before{margin-right:0; vertical-align:middle}
html[data-view="compact"] .e .m,
html[data-view="split"] .rail .e .m{order:2; flex:1 1 auto; min-width:0}
html[data-view="compact"] .e .area,
html[data-view="split"] .rail .e .area{order:4; flex:0 0 auto; max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html[data-view="compact"] .e .notable,
html[data-view="split"] .rail .e .notable{order:3; flex:0 0 auto; font-size:0; letter-spacing:0; padding:0; border:0; box-shadow:none}
html[data-view="compact"] .e .notable::before,
html[data-view="split"] .rail .e .notable::before{margin-right:0}
html[data-view="compact"] .e .undoc,
html[data-view="split"] .rail .e .undoc{display:none}
/* The dense views are a list of headings; two more mono words per row is the
   thing they exist to strip out. The scores stay in the DOM and come back in
   the read view. */
html[data-view="compact"] .e .gscore,
html[data-view="split"] .rail .e .gscore{display:none}
html[data-view="compact"] .e h3,
html[data-view="split"] .rail .e h3{
  font-size:13.1px; font-weight:400; margin:0; max-width:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-view="compact"] .e .gl,html[data-view="compact"] .e .gate,
html[data-view="split"] .rail .e .gl,html[data-view="split"] .rail .e .gate{display:none}
/* A note block in a one-line row would wreck the list, so the row shows the
   marker instead and the note is read in the pane, which clones `.m` whole. The
   marker collapses to its square there for the same reason Notable does. */
html[data-view="compact"] .e .enote,
html[data-view="split"] .rail .e .enote{display:none}
html[data-view="compact"] .e.open .enote{display:block}
/* The flag block is the same shape of problem as the note, so it gets the same
   treatment: out of the dense rows, back when the row is opened, and present in
   the pane because the pane clones `.m`. */
html[data-view="compact"] .e .flagbox,
html[data-view="split"] .rail .e .flagbox{display:none}
html[data-view="compact"] .e.open .flagbox{display:block}
html[data-view="compact"] .e .hasnote,
html[data-view="split"] .rail .e .hasnote{order:3; flex:0 0 auto; font-size:0; letter-spacing:0}
html[data-view="compact"] .e .hasnote::before,
html[data-view="split"] .rail .e .hasnote::before{margin-right:0}
html[data-view="compact"] .e.open h3{white-space:normal; overflow:visible; font-size:15px; font-weight:500; margin-bottom:5px}
html[data-view="compact"] .e.open .gl{display:block}
html[data-view="compact"] .e.open{padding-block:14px}
html[data-view="compact"] .e .eacts{display:none}
html[data-view="compact"] .e.open .eacts,
html[data-view="compact"] .e.fbopen .eacts{display:flex; position:static; opacity:1; pointer-events:auto; margin-top:13px; background:none; padding-left:0}
html[data-view="compact"] .e:hover,
html[data-view="split"] .rail .e:hover{background:var(--bg-2); cursor:pointer}
/* Everything is listed in the dense views; a fold would defeat the point. */
html[data-view="compact"] section.fold .rows,
html[data-view="split"] section.fold .rows{display:block}
html[data-view="compact"] .chev,
html[data-view="split"] .chev{display:none}
html[data-view="compact"] .sechead{padding-block:34px 14px}
html[data-view="compact"] section.fold .sechead{padding-block:34px 14px; cursor:default}

/* ── split view: an app shell, not a panel inside a page ─────────────────
   Two scroll models stacked in the same pixels is what made this feel broken:
   the browser filled the viewport, so every wheel gesture landed on an inner
   scroller, and Chrome throws away whatever delta is left when that scroller
   hits its end. Here the document does not scroll at all, so there is no
   second scroller to hand off to and nothing to hand off. The price is that
   the release head and the method note lose their place in the flow, so they
   become pages the pane holds, picked from its own tabs. Anthropic's notes are
   not one of those pages: they are the foot of the release page, because they
   are an appendix to it and a tab of their own read as a rival changelog. The
   disclaimer is the exception and stays: split is the view everyone gets, and
   a caveat the reader never sees is not a caveat. */
html[data-view="split"],html[data-view="split"] body{height:100%; overflow:hidden}
html[data-view="split"] body>.relhead,
html[data-view="split"] body>.official,
html[data-view="split"] body>.switches{display:none}
/* Descendant, not a child: the footer is wrapped in a `.shell` on this page so
   it lines up with the content above it, so it is no longer `body`'s own child.
   The pane's copy is a `div.method-foot` clone, so this never hides that. */
html[data-view="split"] body footer.method-foot{display:none}
.panewrap,.pane{display:none}
html[data-view="split"] .browser{
  display:grid; grid-template-columns:minmax(300px,min(34vw,520px)) minmax(0,1fr);
  height:calc(100vh - var(--shell)); height:calc(100dvh - var(--shell));
  border-top:1px solid var(--rule);
}
/* The tabs belong to the pane they switch, so they sit on top of it rather than
   across the bottom of the whole browser: the control and the thing it controls
   are one column. */
html[data-view="split"] .panewrap{display:flex; flex-direction:column; min-height:0}
/* They also have to look like something you can press. At 9.5px in the third
   ink on the same grey as the pane they read as a caption over it, and a reader
   can finish a release without ever noticing the pane has other pages. Bigger
   type, a heavier ink, a raised strip that separates the control from what it
   controls, and the picked one lit rather than only underlined. */
.ptabs{display:flex; flex:0 0 auto; background:var(--raise); border-bottom:1px solid var(--rule-2); overflow-x:auto; scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptab{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  background:none; border:0; border-bottom:2px solid transparent; border-right:1px solid var(--rule-2);
  color:var(--ink-2); padding:13px 18px; cursor:pointer; transition:.16s; line-height:1; white-space:nowrap;
}
.ptab:hover{color:var(--ink); background:var(--bg-2)}
.ptab.on{color:var(--sig); border-bottom-color:var(--sig); background:var(--bg); box-shadow:0 -22px 20px -20px var(--sig-ghost) inset}
/* The entry tab is only real once a row has been picked. */
.ptab[data-p="entry"]{display:none}
.ptabs.hasentry .ptab[data-p="entry"]{display:block}
/* Nothing to chain to now, so containment costs nothing and buys back the
   trackpad's history swipe. */
html[data-view="split"] .rail,html[data-view="split"] .pane{overscroll-behavior:contain}
html[data-view="split"] .rail{overflow-y:auto; border-right:1px solid var(--rule)}
html[data-view="split"] .rail .shell{max-width:none; padding:0 22px 0 16px}
html[data-view="split"] .rail section{border-bottom:0}
html[data-view="split"] .rail .sechead{
  position:sticky; top:0; z-index:2; background:var(--bg); border-bottom:1px solid var(--rule);
  border-top:1px solid var(--rule); padding-block:9px; cursor:default; display:block;
}
html[data-view="split"] .rail .sechead h2{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
html[data-view="split"] .rail .sechead .note{display:none}
html[data-view="split"] .rail .sechead .cnt{float:right; padding:0; font-size:9.5px; color:var(--ink-4)}
html[data-view="split"] .rail .sechead .cnt i{display:none}
html[data-view="split"] .rail .divider{display:none}
html[data-view="split"] .rail .sfb{padding-block:18px 22px}
html[data-view="split"] .rail .sfb-q{font-size:15px}
html[data-view="split"] .rail .e.sel{background:var(--raise); box-shadow:inset 2px 0 0 var(--sig)}
html[data-view="split"] .rail .e.sel h3{color:var(--ink)}
html[data-view="split"] .rail .eacts,html[data-view="split"] .rail .fb-panel,html[data-view="split"] .rail .bd,
html[data-view="split"] .rail .relblk{display:none}
/* The rail is the reading surface in split, not a column of labels, so it runs
   a size up from the compact row it shares its markup with. */
html[data-view="split"] .rail .e{padding-block:7px}
html[data-view="split"] .rail .e h3{font-size:14.6px}
html[data-view="split"] .rail .e .area{font-size:10px}

html[data-view="split"] .pane{display:block; flex:1 1 auto; min-height:0; overflow-y:auto}
.pane .empty{padding:64px 40px; color:var(--ink-3); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase}
.pane .inner{padding:32px 40px 70px; max-width:84ch}
.pane .pmeta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.pane .pmeta .notable{border:1px solid var(--sig-dim); padding:5px 9px; box-shadow:0 0 16px var(--sig-ghost) inset; line-height:1}
.pane .pmeta .sec{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4)}
.pane h2{font-family:"Newsreader",serif; font-weight:500; font-size:20.5px; line-height:1.24; letter-spacing:-.008em; margin-bottom:10px}
.pane h2 code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.76em; font-weight:400; color:var(--sig)}
.pane .gl{display:block; font-size:14.4px; line-height:1.56; max-width:none; color:var(--ink)}
.pane .gate{display:block; margin-top:12px}
/* The names row sits inside the body, directly above the WHAT label, and a zero
   bottom margin puts the label hard against the chip borders. */
.pane .toks{margin-top:16px; margin-bottom:11px}
.pane .eacts{position:static; opacity:1; pointer-events:auto; margin-top:20px; padding-left:0; background:none; display:flex}
.pane .bd{display:block; margin-top:22px; padding-top:22px; max-width:none}
.pane .fb-panel{max-width:none}
/* The pane is the entry page, so it lays the cross-references out the way the
   entry page does: beside the entry, sticky, at the same three-child shape
   (`pmeta`, `.m`, the aside) that `entry-inner` produces.

   Keyed on the pane's own width and not the window's, because the pane is a
   grid track of the browser and the rail takes a share of the viewport that
   changes with it. A media query here would have to restate the rail's
   `min(34vw,520px)` formula, which is the second copy of a rule that started
   this whole change. Below the threshold, and in a browser with no container
   queries, the block simply lands under the body, which is what it does on a
   narrow entry page too. */
.panewrap{container-type:inline-size; container-name:pane}
.pane .pe .relblk{display:block; max-width:74ch}
@container pane (min-width:900px){
  .pane .pe .inner:has(>.relblk){
    display:grid; grid-template-columns:minmax(0,74ch) 250px; gap:0 40px;
    max-width:none; align-items:start; justify-content:start;
  }
  .pane .pe .inner>.pmeta,.pane .pe .inner>.m{grid-column:1; min-width:0}
  .pane .pe .inner>.relblk{
    grid-column:2; grid-row:1 / span 2; max-width:none;
    position:sticky; top:0; max-height:calc(100dvh - var(--shell) - 110px); overflow:auto;
  }
}
.pane .anchor{margin-top:26px; padding-top:16px; border-top:1px solid var(--rule)}
.pane .anchor a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4)}
.pane .anchor a:hover{color:var(--sig)}

/* The three page states the pane can hold instead of an entry. Each one is a
   clone of the block that owns the same content in the scrolling views, with
   its full-width dressing taken off. */
.pane .ppage h1.ph{font-family:"Instrument Serif",serif; font-weight:400; line-height:.96; letter-spacing:-.02em; font-size:clamp(30px,3vw,44px)}
.pane .ppage .reldate{margin-top:15px}
.pane .ppage .lede{padding:26px 0 24px; border-bottom:0}
.pane .ppage .lede .body{font-size:14.6px; max-width:none}
.pane .ppage .jump{max-width:380px; margin-bottom:28px}
.pane .official,.pane .switches,.pane .method-foot{background:none; border:0; padding:0; margin:0}
.pane .official li,.pane .official .sub,.pane .switches .sub,.pane .method p{max-width:none}
.pane .official .cols,.pane .switches .cols,.pane .fgrid{display:block; padding:0}
.pane .official h2,.pane .switches h2{font-family:"Instrument Serif",serif; font-size:23px; font-weight:400; margin-bottom:9px}
.pane .official .src{margin-top:26px}
/* At the foot of the release page rather than on a page of its own, so it needs
   a rule above it: these are Anthropic's words and the ones above them are not.
   Out-specifies the reset two rules up, which strips exactly this border. */
.pane .ppage .official{margin-top:4px; padding-top:30px; border-top:1px solid var(--rule-2)}
.pane .meta{margin-top:26px}
.hint{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-4); padding:10px 16px; border-bottom:1px solid var(--rule); background:var(--bg-2);
}
.railhint{display:none}
html[data-view="split"] .railhint{display:block}

/* ── Anthropic's own notes ──────────────────────────────────────────────── */
.official{border-top:1px solid var(--rule); background:var(--bg-2)}
.official .cols{padding-block:46px 52px}
.official h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:23px; margin-bottom:9px}
.official .sub{color:var(--ink-3); font-size:13.2px; max-width:74ch; margin-bottom:24px; font-weight:300; line-height:1.58}
.official ul{list-style:none}
.official li{position:relative; padding-left:21px; margin-bottom:10px; font-size:13.8px; line-height:1.58; color:var(--ink-2); font-weight:300; max-width:86ch}
.official li::before{content:""; position:absolute; left:0; top:.68em; width:9px; height:1px; background:var(--sig)}
.official code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.79em; color:var(--sig)}
.pill{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--rule-2); color:var(--ink-3); padding:5px 9px; display:inline-block; margin-bottom:16px}
.official .src{margin-top:24px}
.official .src a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); border-bottom:1px solid var(--rule-2); padding-bottom:3px}
.official .src a:hover{color:var(--sig); border-color:var(--sig)}

/* ── switches index ─────────────────────────────────────────────────────── */
.switches{border-top:1px solid var(--rule)}
.switches .cols{padding-block:46px 52px}
.switches h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:23px; margin-bottom:9px}
.switches .sub{color:var(--ink-3); font-size:13.2px; max-width:74ch; margin-bottom:26px; font-weight:300; line-height:1.58}
.swg{margin-bottom:26px}
.swg:last-child{margin-bottom:0}
.swg h3{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); margin-bottom:12px}
/* A chip is a real flag or environment variable name and the longest of them
   is wider than a small phone, with no space in it to break at. Left alone the
   row could not shrink below that name and the whole release page scrolled
   sideways: 58px of it at 320px, measured 2026-08-16. The chip breaks inside
   the name instead. */
.swl{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.sw{max-width:100%; overflow-wrap:anywhere; text-align:left}
.sw{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--ink-2); background:none; border:1px solid var(--rule-2); padding:5px 9px; cursor:pointer; transition:.16s; line-height:1.4}
.sw:hover{color:var(--sig); border-color:var(--sig-dim); background:var(--sig-ghost)}
.sw b{font-weight:400; font-size:8.5px; color:var(--ink-4); margin-left:9px}
.sw:hover b{color:var(--sig)}
/* The index is not a menu you leave behind: the name you are filtered to stays
   lit here, and picking it again is how you take the filter off. */
.sw.on{color:var(--ink); border-color:var(--sig); background:var(--sig-ghost)}
.sw.on b{color:var(--sig)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  :root{--gutter:104px}
  .relgrid{grid-template-columns:1fr; gap:32px}
  .jump{max-width:340px}
  .views .vlbl{display:none}
}

@media(max-width:860px){
  :root{--gutter:0px}
  .cols{grid-template-columns:1fr; gap:11px}
  .relhead{padding-top:30px}
  .relhead h1{font-size:34px}
  .lede{padding:28px 0 24px}
  .lede .body{font-size:14.6px}
  .jump{max-width:none}
  .sechead{padding-block:34px 16px}
  .sechead h2{font-size:21px}
  /* The label column collapsed, so the tier mark and the area go back to being
     one line above the heading instead of a column beside it. */
  .e .g{flex-direction:row; align-items:baseline; gap:12px; padding-top:0; margin-bottom:7px; flex-wrap:wrap}
  html[data-view="read"] .e h3{max-width:none}
  /* Side by side once the gutter is gone, so the pair costs the card one line
     of the row it is already sharing rather than two of its own. */
  .gscore{flex-direction:row; gap:12px}
  .undoc{width:100%}
  .official .cols,.switches .cols{padding-block:34px 40px}
  .banner .cols{padding-block:16px 18px}
}

/* A phone. The deck is the one thing that cannot simply reflow: it is sticky,
   so every row it grows costs the reader a row of the release for the whole
   page, on every page. Two lines is the budget: the search field on one, the
   switches on the other, scrolling sideways the way the section nav above them
   already does. Three lines measured 242px of chrome on a 390-wide screen,
   which is a third of the shorter phones. */
@media(max-width:560px){
  .facets{gap:6px 8px; padding-block:7px 8px}
  .facets .vlbl{display:none}
  .fsearch{flex:1 0 100%}
  .fchips{flex:1 0 100%; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
  .fchips::-webkit-scrollbar{display:none}
  .fchips>*{flex:0 0 auto}
  .ftok{max-width:190px}
  .findex{padding-block:8px}
  .fnow{margin-left:0; flex:1 0 100%; padding-left:0; justify-content:space-between}
  /* The rule between two items reads as a dangling tick once the pair it
     separated has wrapped apart; the gap says the same thing and cannot. */
  .reldate{gap:5px 14px}
  .reldate .sep{display:none}
  .views{padding-left:10px}
  .vb{padding:8px 9px; font-size:9.5px; letter-spacing:.1em}
  .secnav a{padding:11px 12px; font-size:9.5px}
  .crumb{gap:7px; margin-bottom:20px}
  .allrel{padding:10px 12px; font-size:10px; letter-spacing:.12em}
  .step{padding:10px 11px}
  .sfb{gap:10px}
  .sfb-q{font-size:17px; flex:1 0 100%}
  .banner .bq{font-size:17px}
  .seg-evidence{padding:11px 12px}
  .fb-panel{padding:13px}
  /* Finger-sized. These are 9.5px uppercase mono with line-height 1, so the
     padding is the whole tap target and the default leaves it at 30px, which
     is a miss on a thumb. The row is short enough to still fit across. */
  .fb-btn{padding:13px 15px}
  .fb-chip,.sfb-btn{padding:14px 13px}
  .fb-send,.fb-cancel{padding:14px 16px}
}


/* ── what this release did to the injected prompts ────────────────
   Lives here rather than in prompts.css because the release page loads exactly
   one sheet of its own, cc-detail.css, and nothing on the ledger's own pages
   renders a .promptchange. It used to sit in prompts.css under a comment
   claiming the detail page loaded both; it never did, so every release page
   rendered this block as unstyled body text butted against the section above
   it, with the three data-state values visually identical (#353). */
.promptchange{border-top:1px solid var(--rule); padding:34px 0}
.promptchange .lbl{color:var(--sig)}
.promptchange .pcline{color:var(--ink-2); font-weight:300; line-height:1.55; max-width:72ch}
/* "We never looked" reads dimmer than "we looked and nothing moved". Without
   this the two states say the same thing in the same colour. */
.promptchange[data-state="not-captured"] .pcline{color:var(--ink-3)}
/* Which arm the sentence above was measured on: provenance, so it sits under
   the claim and reads quieter than it. */
.promptchange .pcarm{margin-top:6px; color:var(--ink-3); font-size:13px}
.promptchange .src{margin-top:12px}
.promptchange .src a{color:var(--sig)}


/* ── documentation around this release ──────────────────────────────────
   The temporal join with the docs ledger. Styled off .official, because it is
   the same kind of block in the same place: an appendix at the foot of the
   release, from somebody else's corpus. The rows mirror .dr in docs.css rather
   than importing that sheet, which would drag the whole docs section's styling
   onto every release page for five selectors. */
.docsnear{border-top:1px solid var(--rule)}
.docsnear .cols{padding-block:46px 52px}
.docsnear .lbl{color:var(--sig)}
.docsnear h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:23px; margin-bottom:9px}
.docsnear .sub{color:var(--ink-3); font-size:13.2px; max-width:74ch; margin-bottom:8px; font-weight:300; line-height:1.58}
.docsnear .dnl{margin-top:18px; border-top:1px solid var(--rule)}
.docsnear .dn{
  display:grid; grid-template-columns:1fr 108px 96px 210px 96px; gap:22px; align-items:baseline;
  padding:11px 12px 11px 0; border-bottom:1px solid var(--rule); transition:background .18s;
}
.docsnear .dn:hover{background:var(--bg-2)}
.docsnear .pp{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.docsnear .dn:hover .pp{color:var(--sig)}
.docsnear .ww,.docsnear .tt,.docsnear .ss{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-4); letter-spacing:.06em; white-space:nowrap}
.docsnear .tt i{font-style:normal; color:var(--ink-4); opacity:.75}
.docsnear .ss{text-align:right}
.docsnear .nn{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; white-space:nowrap}
.docsnear .nn .ad{color:var(--add); font-weight:500}
.docsnear .nn .dl{color:var(--del); font-weight:500}
/* A minor change is dimmed rather than dropped, the way the ledger dims it. */
.docsnear .dn.is-minor .pp{color:var(--ink-2)}
.docsnear .dnnote{margin-top:16px; color:var(--ink-4); font-size:12.2px; font-weight:300; line-height:1.55; max-width:74ch}
.docsnear .src{margin-top:24px}
.docsnear .src a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); border-bottom:1px solid var(--rule-2); padding-bottom:3px}
.docsnear .src a:hover{color:var(--sig); border-color:var(--sig)}

@media(max-width:860px){
  .docsnear .cols{padding-block:34px 40px}
  .docsnear .dn{grid-template-columns:1fr 96px; gap:4px 16px; padding-right:0}
  .docsnear .dn .ww{grid-column:2; text-align:right}
  .docsnear .dn .nn,.docsnear .dn .tt,.docsnear .dn .ss{grid-column:1 / -1; text-align:left}
}

/* ── entry links, the flash, and the entry's own page ───────────────────── */

/* `scroll-padding-top` on <html> at the top of this file already clears the
   sticky chrome for the document scroller, and padding and margin ADD: giving
   the entry a margin of `--stick` too pushed every compact anchor jump a full
   chrome-height below the deck, leaving a heading sliver at the fold. The
   margin carries only the breathing room; the rail scroller in split starts
   below the chrome, so 14px is the right clearance there too. */
.e{scroll-margin-top:14px}
/* Except that the rail has sticky chrome of its own: `.sechead` sits at
   `top:0` inside that scroller at 31px tall, so a row scrolled to `nearest`
   lands flush with the rail's edge and reads as half a row under the section
   label. 45px is that height plus the same 14px of breathing room. */
html[data-view="split"] .rail .e{scroll-margin-top:45px}

/* The heading link inherits the heading. Eleven thousand underlined blue
   headings is a link farm, so it takes the hover colour the heading already
   took and nothing else; the cursor here was already a pointer. */
.e h3 a.eh{color:inherit}
.e h3:hover a.eh{color:var(--sig)}
/* The fragment link beside it. Invisible until the row is hovered or the link
   itself is focused, which is the bargain `.eacts` already makes: a resting
   card costs its words and nothing else, and a keyboard reader still reaches
   it. */
.eanc{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-4); margin-left:8px; opacity:0; transition:opacity .15s}
.e:hover .eanc,.eanc:focus{opacity:1}
.eanc:hover{color:var(--sig)}

/* What "this is the one you asked for" looks like when a reader arrives on a
   fragment. A brief wash rather than a permanent mark: it answers "which one"
   and then gets out of the way. cc-detail.js strips the class afterwards so a
   later reveal can play it again. */
.e.flash{animation:eflash 1.8s var(--ease)}
@keyframes eflash{0%{background:var(--sig-ghost)}70%{background:var(--sig-ghost)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .e.flash{animation:none; background:var(--sig-ghost)}
}

.relv{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.06em; color:var(--ink-4); margin-right:7px}

/* ── the entry's own page ───────────────────────────────────────────────── */

/* No deck and no rail here, so the sticky chrome is the masthead alone and the
   anchor offset that suits a release page would leave a hole above the target. */
body.entrypg{--stick:var(--mast)}

/* The entry and its cross-references, side by side. The article is the grid and
   the aside is its third child, so the same three-part shape lays out in the
   release page's pane; `erel` is set only when there is something to put in the
   second column, because most entries relate to nothing and a page that
   reserved it anyway would carry 268px of dead margin for the majority case.

   The first track is capped near the body's own 78ch and the pair is packed to
   the left, so the sidebar sits beside the text it is about. Letting it take
   `1fr` puts it against the right edge of the measure with 360px of nothing in
   between, which reads as two unrelated things rather than as a margin note.
   `minmax(0,...)` and not a bare width: a grid track's default minimum is its
   content, and one long unbreakable token in a code block would otherwise push
   the sidebar off the measure instead of scrolling inside its own column.

   `span 2` is exact rather than a guess: `entry-inner` renders the tier strip,
   the body and the aside, and nothing else. */
.epgmain{padding-block:26px 60px}
body.entrypg .e.erel{display:grid; grid-template-columns:minmax(0,700px) 268px; gap:0 52px; align-items:start; justify-content:start}
body.entrypg .e.erel>.g,body.entrypg .e.erel>.m{grid-column:1; min-width:0}
/* Sticky, so it is still there after a long body; `max-height` with its own
   scroll because a sidebar taller than the viewport sticks to nothing. */
body.entrypg .e.erel>.relblk{
  grid-column:2; grid-row:1 / span 2;
  position:sticky; top:calc(var(--stick) + 26px); max-height:calc(100dvh - var(--stick) - 52px); overflow:auto;
}
.epghead{padding-block:6px 4px}
.epgv{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--ink-4); margin-bottom:10px}
.epgv a{color:var(--sig)}
.epgv a:hover{border-bottom:1px solid var(--sig-dim)}
.epgh{font-family:"Newsreader",serif; font-weight:400; font-size:27px; line-height:1.22; letter-spacing:-.012em; max-width:34ch}
.epgh code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.72em; font-weight:400; color:var(--sig)}
/* The card is open and alone here, so the fold's affordances are wrong: there
   is no heading to click and no row to hover the controls out of. */
body.entrypg .e{border-top:0; padding-block:0; scroll-margin-top:0}
body.entrypg .e .eacts{position:static; opacity:1; pointer-events:auto; margin-top:16px; background:none; padding-left:0}
body.entrypg .bd{max-width:78ch}
/* Capped at the reading track rather than at the grid, so the rule under the
   entry ends where the entry ends instead of running on under the sidebar. */
.epgback{margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); max-width:700px}
.epgback a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.epgback a:hover{color:var(--sig)}

/* The related sidebar. A list and not cards: these are pointers to reading, and
   boxes beside one entry would compete with it rather than sit under it.

   It shows exactly where `.bd` shows and nowhere else, which is the whole of
   the operator's ask on 2026-08-24: a folded row in the rail is an index and
   gets no cross-references, and every surface that shows the entry itself gets
   them. One rule rather than a list of exceptions, so a new view mode inherits
   the right answer.

   Sticky is set per placement below, not here, because the two placements stick
   to different things: the entry page sticks under the masthead, the pane
   sticks to the top of its own scroller. */
.relblk{display:none; padding-top:14px; border-top:1px solid var(--rule)}
.e.open .relblk{display:block}
/* Read view lays the card out as gutter plus content; without this the aside
   drops into the gutter under the tier mark. */
.e.cols>.relblk{grid-column:2}
/* A compact row is one flex line whose parts carry explicit orders (tier 1,
   heading 2, notable 3, area 4), so an unordered block takes 0 and lands to the
   left of the heading it belongs to. Five puts it last, and a 100% basis on a
   card that may now wrap gives it a line of its own under the entry, which is
   the same answer the entry page gives at this width: beside is a wide-screen
   luxury, under is what fits. */
html[data-view="compact"] .e.open{flex-wrap:wrap}
html[data-view="compact"] .e .relblk{order:5; flex:1 0 100%; margin-top:18px}
/* The block's heading is an h3 on a surface where the entry's own heading is an
   h2, and an h2 where the entry's is an h1, so it lands one level under the
   subject on every surface and skips none. That makes it an `h3` inside `.e` in
   the pane, which `.e h3` styles as a card's own heading: serif, 15.4px,
   `cursor:pointer`, ember on hover. Naming both the block and the heading is
   what outranks it, and the resets below are the properties that rule sets and
   this one otherwise inherits. Without it the same block reads as a label on the
   entry page and as a clickable card title in the pane, which is the drift this
   whole change exists to end. */
.e .relblk .relbh{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:400; font-size:9.5px;
  letter-spacing:.2em; line-height:1.3; text-transform:uppercase; color:var(--ink-4);
  margin-bottom:0; max-width:none; cursor:auto;
}
.e .relblk .relbh:hover{color:var(--ink-4)}
.relsub{margin-top:8px; font-size:11.6px; line-height:1.5; color:var(--ink-4); font-weight:300}
.rell{margin-top:15px; list-style:none; padding:0}
.rell li{padding:9px 0 9px 12px; border-left:1px solid var(--rule-2)}
/* A name link matched on something both entries actually say, so it gets the
   ember edge the weaker text match does not. */
.rell li.relname{border-left-color:var(--sig-dim)}
.rell a{display:block; font-family:"Newsreader",serif; font-size:13.6px; line-height:1.34; color:var(--ink-2)}
.rell a:hover{color:var(--sig)}
.rell a code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.78em; color:var(--sig)}
.rell .relv{display:block; margin-right:0; margin-bottom:2px}
.relwhy{margin-top:5px; font-size:11.2px; line-height:1.45; color:var(--ink-4); font-weight:300}

/* One column, and the links land under the entry rather than beside it. Sticky
   is wrong here for the same reason the column is: there is nothing to stick
   beside, and a pinned block would cover the entry as the reader scrolls. */
@media (max-width:1000px){
  body.entrypg .e.erel{display:block}
  body.entrypg .e.erel>.relblk{position:static; max-height:none; overflow:visible; margin-top:38px; padding-top:20px}
  .epgback{max-width:none}
  .relsub{max-width:74ch}
  .rell a{max-width:62ch}
}