/* Purpose: the live stylesheet, design direction C, "Orientation". Its widths and breakpoint
   are arithmetic rather than taste: they are what lets an 80-column code line sit beside the
   contents list without scrolling. */
/* DIRECTION C — "Orientation"
 *
 * Theory: the reported failure modes of API documentation are dominated by incomplete
 * and ambiguous information and unexplained examples, and by fragmentation across
 * sources. Underneath all of those is one reader question the page never answers: am I
 * in the right place, and is the state I am in the state this page assumes?
 *
 * A reader who cannot answer that cannot tell a page that is wrong from a page that is
 * right about a situation they are not in -- and that ambiguity is what sends them to a
 * colleague instead. This direction promotes orientation to the top of the visual
 * hierarchy: where you are, what must already be true, and where you go next are
 * structural furniture rather than links buried in flow.
 */
:root {
  --ink: #17181b; --paper: #ffffff; --muted: #5a5d63; --rail: #b8bcc4;
  --rule: #e3e5e8; --control-shape: 2px;
  --accent: #12507a;
  --on-accent: #ffffff; --marker: #12507a; --measure: 40rem; --code-width: 50rem; --toc-width: 10rem;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e9eaec; --paper: #0f1113; --muted: #9aa0a8; --rail: #454a52;
          --rule: #262a2f; --accent: #7fb6e0;
  --on-accent: #0f1113; --marker: #7fb6e0; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16.5px/1.65 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* Two columns: the contents list stays put while the page moves under it. The grid is the
   layout, not a decoration, so it degrades to one column rather than to a broken one. */
.page {
  display: grid; grid-template-columns: var(--toc-width) minmax(0, var(--code-width));
  gap: 0 1.75rem; max-width: calc(var(--toc-width) + var(--code-width) + 4rem);
  margin: 0 auto; padding: 0 1.5rem;
}
/* Main is as wide as code needs. Prose is held to the measure inside it, so a long line of
   code does not drag the reading column out with it. */
main { max-width: var(--code-width); padding: 0 0 6rem; min-width: 0; }
main > *:not(pre):not(figure):not(details):not(.faded):not(.families):not(.positions) {
  max-width: var(--measure);
}

/* The contents list. Sticky rather than fixed: it scrolls with the page until it reaches the
   top, then holds, which keeps it out of the way on a short page. */
.toc {
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
  padding: 1.5rem 0 2rem; font-size: .82rem; line-height: 1.45;
}
.toc h2 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  margin: 0 0 .6rem; border: 0; padding: 0; font-weight: 700;
}
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc-list a { display: block; padding: .28rem .7rem; text-decoration: none; color: var(--muted); }
.toc-list a:hover, .toc-list a:focus { color: var(--marker); background: color-mix(in srgb, var(--marker) 6%, transparent); }
.toc-h1 > a { color: var(--ink); font-weight: 700; }
.toc-h2 > a { padding-left: 1.2rem; }

/* 52rem, down from 64. The old number reserved enough width for an 80-character line at
   every width the sidebar appeared, and 80 is the authoring limit rather than a description
   of the content: the longest line on this site is 52 characters. Reserving the worst case
   everywhere bought 28 characters of width that nothing used, and paid for it by hiding the
   contents list from anybody with a window under 1024px, which is most laptops.

   So the guarantee is now tiered and stated rather than uniform and unexamined. From about
   1020px a full 80-character line still does not scroll. Between 832 and 1020 the sidebar is
   present and a line over roughly 64 characters would scroll, which no line here is, and
   `check_code_width` is what keeps that true. Below 832 the sidebar stacks. */
@media (max-width: 52rem) {
  .page { display: block; max-width: var(--code-width); }
  /* Above the content, collapsed by nothing: it is a short list and hiding it would need
     scripting, which the clean-state rule does not allow for something a reader navigates by. */
  .toc { position: static; max-height: none; border-bottom: 1px solid var(--rule); }
  main > * { max-width: 100%; }
}
header.site, footer.site {
  max-width: calc(var(--toc-width) + var(--code-width) + 4rem); margin: 0 auto; padding: 1.25rem 1.5rem; font-size: .875rem;
}
header.site { border-bottom: 1px solid var(--rule); }
footer.site { border-top: 1px solid var(--rule); margin-top: 4rem; color: var(--muted); }
a { color: var(--accent); }
/* The body is sans-serif, so a heading cannot rely on family to separate itself from the
   text. It has to earn the distinction with size and weight, and the first version did not:
   h2 sat at 1.15rem against 16.5px body, and h3 was the same size as a paragraph. */
h1 {
  font-size: 2.15rem; line-height: 1.15; letter-spacing: -.022em;
  font-weight: 800; margin-bottom: .4rem;
}
h2 {
  font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-top: 3rem;
  padding-top: .7rem; border-top: 1px solid var(--rule); letter-spacing: -.012em;
}
h3 {
  font-size: 1.15rem; font-weight: 700; margin-top: 1.9rem; margin-bottom: .35rem;
  letter-spacing: -.005em; color: var(--ink);
}
h4 { font-size: 1rem; font-weight: 700; margin-top: 1.5rem; color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
pre { overflow-x: auto; padding: .85rem 1rem; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--rule); border-radius: 5px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: .5rem; top: .5rem; background: var(--paper); padding: .5rem; z-index: 10; }

/* Orientation strip: state before content. Where you are, how current it is, and
   whether anyone has checked -- read as one horizontal band rather than a footnote. */
.provenance {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  font-size: .95rem; color: var(--muted);
  border-top: 2px solid var(--marker); border-bottom: 1px solid var(--rule);
  padding: .55rem 0; margin: 0 0 2rem;
}
.state {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem;
  color: var(--paper); background: var(--marker); padding: .15rem .45rem; border-radius: 3px;
}
.stale { color: #8a4a00; font-weight: 700; }
@media (prefers-color-scheme: dark) { .stale { color: #e8a95e; } }

/* Prerequisites become a preflight: things to confirm, numbered, before starting.
   Next steps become an onward path. Both are furniture, not prose. */
nav.prereq {
  font-size: .95rem;
  background: color-mix(in srgb, var(--marker) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--marker) 20%, transparent);
  border-radius: 6px; padding: .9rem 1.1rem; margin: 1.75rem 0;
}
nav.prereq h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
  margin: 0 0 .5rem; border-top: none; padding-top: 0;
}
nav.prereq h2::after { content: " — confirm before starting"; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
nav.prereq ul { list-style: none; padding-left: 0; margin: 0; counter-reset: pre; }
nav.prereq li { counter-increment: pre; padding-left: 1.8rem; position: relative; margin: .3rem 0; font-size: .9rem; }
nav.prereq li::before {
  content: counter(pre); position: absolute; left: 0; top: .05rem;
  width: 1.25rem; height: 1.25rem; border: 1px solid var(--rail); border-radius: 50%;
  font-size: .7rem; display: grid; place-items: center; color: var(--muted);
}
nav.next { border-top: 2px solid var(--marker); margin-top: 3.5rem; padding-top: 1rem; font-size: .95rem; }
nav.next h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .4rem; border-top: none; padding-top: 0; }
nav.next ul { list-style: none; padding-left: 0; margin: 0; }
nav.next li::before { content: "→ "; color: var(--marker); }

/* Faded stages read as a progression with a position marker rather than three boxes. */
.faded { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.2rem; margin: 2rem 0; }
.faded h3 { margin-top: 0; }
.faded .goal { color: var(--muted); font-size: .92rem; }
details.stage { border-top: 1px solid var(--rule); padding: .65rem 0; }
details.stage summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
details.stage summary::before { content: "◆ "; color: var(--rail); }
details.stage[open] summary::before { content: "◆ "; color: var(--marker); }
details.stage summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.steps { padding-left: 1.1rem; }
.steps li { margin: .7rem 0; }
.steps code { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .15rem .35rem; border-radius: 3px; }
.steps .why { margin: .25rem 0 0; font-size: .88rem; color: var(--muted); }
.blank { font-size: .8rem; color: var(--muted); border-bottom: 1px dashed var(--rail); }
.prompt { font-size: .9rem; color: var(--muted); }
.provenance-inline { font-size: .78rem; color: var(--muted); }

figure.diagram { margin: 2rem 0; }
figure.diagram figcaption {
  font-size: .85rem; color: var(--muted); background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--rule); border-top: none; padding: .6rem .8rem; border-radius: 0 0 5px 5px;
}
figure.diagram pre { margin-bottom: 0; border-radius: 5px 5px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 1.4rem 0; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: color-mix(in srgb, var(--ink) 3%, transparent); }
tbody tr:hover { background: color-mix(in srgb, var(--marker) 4%, transparent); }
/* 15.6. Anything that moves respects the reader's system setting, including the scrolling
   this stylesheet asks for by name. For a reader with a vestibular disorder, a page moving
   under them without their hand on it is the motion that costs most. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   C — Orientation, applied to the 0007 and help markup.
   The direction's claim is that the unanswered question is "am I in the right place,
   and is this current". So every block below leads with state: which reader an
   explanation is for, which statuses a family covers, where in a sequence a position
   sits. Content follows the band that locates it.
   --------------------------------------------------------------------------- */

.note-marker {
  font-size: .7em; vertical-align: super; text-decoration: none; font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif; color: var(--marker);
  padding: 0 .15em;
}

.notes { border: 1px solid var(--rule); border-radius: 6px; margin: 2rem 0 0; padding: 0; }
.notes h4 {
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 0; padding: .5rem 1rem; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--marker) 5%, transparent);
}
.note-list { margin: 0; padding: 0; list-style: none; counter-reset: note; }
.note-list > li {
  counter-increment: note; border-bottom: 1px solid var(--rule);
  padding: .8rem 1rem .8rem 2.6rem; position: relative; margin: 0;
}
.note-list > li:last-child { border-bottom: 0; }
.note-list > li::before {
  content: counter(note); position: absolute; left: .9rem; top: .85rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; text-align: center;
  background: var(--marker); color: var(--paper);
  font: 700 .68rem/1.1rem ui-sans-serif, system-ui, sans-serif;
}
.note-list > li > p { margin: .3rem 0 0; font-size: .95rem; }
.note-anchor { display: inline-block; }
/* State first: who this is for, before the explanation itself. */
.note-audience {
  display: block; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-top: .2rem;
}

.representation { border: 1px solid var(--rule); border-radius: 6px; margin: 1.5rem 0; padding: 0; }
.representation h3 { font-size: 1rem; margin: 0; padding: .7rem 1rem .1rem; }
.register {
  order: -1; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 0; padding: .45rem 1rem; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--marker) 4%, transparent);
}
.representation > p:not(.register) { padding: 0 1rem .8rem; margin: .4rem 0 0; }
details.criteria {
  border: 1px solid var(--rule); border-radius: 6px; padding: .6rem 1rem; margin: 1.5rem 0;
}
details.criteria > summary {
  cursor: pointer; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}

.family { border: 1px solid var(--rule); border-radius: 6px; margin: 1.5rem 0; padding: 0; }
.family-title { font-size: 1rem; margin: 0; padding: .75rem 1rem .35rem; }
/* The orientation band, the same idea as the provenance strip at the top of the page:
   the facts that locate you, read as one horizontal line before any prose. */
.family-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline;
  margin: 0; padding: .45rem 1rem; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--marker) 4%, transparent);
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.statuses { font-weight: 700; color: var(--marker); }
.statuses::before { content: "HTTP "; font-weight: 400; color: var(--muted); }
.retry-no { color: var(--ink); font-weight: 700; }
.family-proves, .family-check, .family-also { padding: 0 1rem; margin: .7rem 0; }
.family-also { padding-bottom: .9rem; }
.label {
  display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .15rem;
}

/* Gaps the stylesheet contract found. Orientation puts currency in the standing band,
   so the date is set as furniture rather than prose. */
.verified { color: var(--muted); font-variant-numeric: tabular-nums; }
.families { margin: 1.75rem 0; }
.retry { font-weight: 700; }

/* ---------------------------------------------------------------------------
   The worked example: three levels of support over one block of code.
   --------------------------------------------------------------------------- */

/* Links with scripting off, tabs with it on. The static form is a real navigation list, so
   it is useful before any of this is upgraded rather than being an empty shell. */
.stage-nav {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 .25rem;
  border-bottom: 1px solid var(--rule);
}
.stage-nav a {
  padding: .45rem .85rem; text-decoration: none; font-size: .85rem; color: var(--muted);
  border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0;
}
.stage-nav a:hover, .stage-nav a:focus { color: var(--marker); background: color-mix(in srgb, var(--marker) 6%, transparent); }
.stage-nav a[aria-selected="true"] {
  color: var(--ink); font-weight: 700; background: var(--paper);
  border-color: var(--rule); margin-bottom: -1px;
}
.stage { margin: 1.25rem 0 2rem; }
.stage > h4 { font-size: 1rem; margin: 0 0 .5rem; color: var(--ink); }
.prompt { font-size: .9rem; color: var(--muted); margin: 0 0 .6rem; }

/* An ordered list wearing the clothes of a code block. The list semantics are what make a
   screen reader's "item 4" mean line 4; every visual trace of a list is removed, because a
   reader is looking at code and a bulleted list of statements is not what code looks like. */
ol.code {
  list-style: none; margin: 0; padding: .8rem 0; counter-reset: none;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--rule); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
  line-height: 1.7; overflow-x: auto;
}
.cl { display: grid; grid-template-columns: 2.5rem auto 1fr; margin: 0; padding: 0 1rem 0 0; }
.cl:target { background: color-mix(in srgb, var(--marker) 9%, transparent); }
.src { grid-column: 2; white-space: pre; }
.src.blank { color: var(--muted); font-style: italic; }

/* The line number is an anchor, so a paragraph can cite a line and a reader can link to one.
   It is quiet until pointed at, because eight numbers competing with the code is noise. */
.ln {
  grid-column: 1; text-align: right; padding-right: .9rem; text-decoration: none;
  color: color-mix(in srgb, var(--muted) 65%, transparent); user-select: none;
  font-variant-numeric: tabular-nums;
}
.ln:hover, .ln:focus { color: var(--marker); text-decoration: underline; }

/* The note symbol carries its text in `title`, which hovers natively and is read aloud. */
.sym {
  grid-column: 3; justify-self: start; text-decoration: none; color: var(--marker); font-size: .95rem;
  padding-left: .35rem;
}
.cl .why {
  grid-column: 2 / -1; margin: .15rem 0 .5rem; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem; line-height: 1.55; color: var(--muted); white-space: normal;
  border-left: 2px solid var(--rule); padding-left: .7rem;
}

/* Tokens. Contrast checked against both grounds, not chosen for looks. */
.tok-keyword { color: var(--marker); font-weight: 600; }
.tok-string { color: #1f6f4a; }
.tok-comment { color: var(--muted); font-style: italic; }
.tok-number { color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tok-string { color: #6fc79b; }
  :root:not([data-theme="light"]) .tok-number { color: #e0b25a; }
}

/* Controls the script adds. Styled here so they match the page rather than arriving unstyled
   a frame after everything else. */
.ex-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.ex-controls button:hover, .ex-controls button:focus { color: var(--marker); border-color: var(--marker); }

/* What the page is for, and who it recognizes. Both sit above the content because a reader
   deciding whether a page is theirs has not started reading yet. */
.use-cases { font-size: 1.02rem; line-height: 1.6; margin: 0 0 1rem; }
.levels { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: 0 0 1.5rem; }
.levels-label { font: 600 .7rem ui-sans-serif, system-ui, sans-serif; text-transform: uppercase;
                letter-spacing: .07em; color: var(--muted); }
/* Only once the script has made them do something do they look like they do something. */
.js .level { cursor: pointer; }
.js .level:hover, .js .level:focus { border-color: var(--marker); color: var(--marker); }
.dimmed { opacity: .45; }

/* States the script sets. Without these the buttons toggled classes that styled nothing,
   which looks exactly like a button that does not work, because it is one. */
.cl.collapsed .why { display: none; }
.cl.has-note .ln::after { content: ""; }
.js .cl.has-note .ln:hover::after, .js .cl.has-note .ln:focus::after { content: " \25BE"; }
.js .cl.has-note.collapsed .ln:hover::after,
.js .cl.has-note.collapsed .ln:focus::after { content: " \25B8"; }
.why-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.why-list > li { margin: 0 0 .6rem; font-size: .9rem; }
.why-list .why-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                      font-size: .8rem; text-decoration: none; margin-right: .5rem; }

/* Anchors landed flush against the top edge, with the line a reader had just asked to see
   pressed against the browser chrome and no context above it. A cited line needs the lines
   around it to mean anything. */
.cl, h1, h2, h3, h4, .faded, .stage { scroll-margin-top: 3.5rem; }

/* Orientation for a reader who arrived mid-page. Marked as an aside because it is furniture,
   and quiet because it is furniture a reader who started at the top never sees. */
.orientation {
  border-left: 3px solid var(--rule); padding: .6rem .9rem; margin: 0 0 1.25rem;
  font: .85rem/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--muted);
}
.orientation p { margin: 0 0 .4rem; }
.orientation-top { margin-right: .75rem; }
.orientation-dismiss {
  font: 600 .75rem ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  padding: .15rem .5rem; border-radius: 4px; border: 1px solid var(--rule);
  background: transparent; color: var(--muted);
}

/* The re-check control. A link, because it opens a request rather than performing one. */
.recheck { font-size: .8125rem; white-space: nowrap; }

/* The export control. Created by the script, so a reader without it sees no button and loses
   nothing: the markdown they would have exported is the file the site is built from. */
.export-controls { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* The reading helper. Lower corner, present from first paint, and incapable of covering the
   text: it is a button until a reader asks for more, and the panel it opens is bounded so a
   paragraph is never behind it. */
.helper {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20; max-width: min(24rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
  /* The container is as wide as the panel it may open, and most of that is empty air sitting
     over the text. Without this it swallows clicks on links underneath, which is gating
     reading with an invisible box. The children take their own clicks back. */
  pointer-events: none;
}
.helper > * { pointer-events: auto; }
.helper-toggle {
  font: 600 .8rem ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--marker);
  background: var(--paper); color: var(--marker); box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
/* Widening, not flashing. The reader is already moving fast; motion would compete with them. */
.helper-surfaced .helper-toggle { font-weight: 700; padding: .6rem 1.1rem; }
.helper-dismiss {
  font: .72rem ui-sans-serif, system-ui, sans-serif; cursor: pointer; padding: .2rem .5rem;
  border: 0; background: transparent; color: var(--muted); text-decoration: underline;
}
/* An explicit display beats the browser's [hidden] rule, so the panel has to opt back out
   by name. Without this it was 272px of open panel sitting over the page from first paint,
   with hidden="true" on it the whole time. */
.helper-panel[hidden] { display: none; }
.helper-panel {
  display: flex; flex-direction: column; gap: .5rem; width: min(24rem, calc(100vw - 2rem));
  padding: .9rem; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); box-shadow: 0 2px 12px rgba(0,0,0,.14);
  max-height: min(70vh, 34rem); overflow-y: auto;
}
.helper-input {
  font: .875rem ui-sans-serif, system-ui, sans-serif; padding: .5rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink);
  resize: vertical;
}
.helper-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.helper-chip {
  font: .72rem ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-align: left;
  padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--rule);
  background: transparent; color: var(--muted);
}
.helper-chip:hover, .helper-chip:focus { color: var(--marker); border-color: var(--marker); }
.helper-send {
  align-self: flex-start; font: 600 .8rem ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  padding: .4rem .9rem; border-radius: 4px; border: 1px solid var(--marker);
  background: transparent; color: var(--marker);
}
.helper-status { font: .75rem ui-sans-serif, system-ui, sans-serif; color: var(--muted); margin: 0; }
.helper-answer p { font-size: .875rem; line-height: 1.55; margin: 0 0 .4rem; }
.helper-provenance { font-size: .75rem; color: var(--muted); font-style: italic; }
@media (max-width: 40rem) {
  .helper { left: 1rem; right: 1rem; align-items: stretch; }
}
.helper-removed:empty { display: none; }
.helper-removed {
  font: .75rem ui-sans-serif, system-ui, sans-serif; margin: 0;
  padding: .3rem .5rem; border-radius: 4px; color: var(--ink);
  background: rgba(128,128,128,.14);
}

/* The machine's check, said after the person's and quieter than it. Two different claims, and
   a reader weighing the page is weighing the first one. */
.verified-eval { color: var(--muted); }

/* C is the structural direction, so each step is a marked block and the sequence is read from
   the markers rather than from indentation. */
.helper-steps { list-style: none; margin: 0 0 .5rem; padding: 0; counter-reset: step; }
.helper-step {
  counter-increment: step; margin: 0 0 .5rem; padding-left: .6rem;
  border-left: 2px solid var(--rail);
}
.helper-step-heading {
  font-weight: 700; font-size: .78125rem; margin: 0 0 .15rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--marker);
}
.helper-step-heading::before { content: counter(step) " / "; }
.helper-step a { font-size: .8125rem; color: var(--accent); }
.helper-step-canonical { border-left-color: var(--accent); }
.intake { margin: 1rem 0; max-width: var(--measure); }
.intake-field { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 .6rem; }
/* Browser default is a white box, which on a dark page is a hole in it. */
.intake-input {
  font: inherit;
  padding: .45rem .55rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: calc(var(--control-shape) / 4 + 2px);
}
.intake-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.intake-questions[hidden] { display: none; }
/* It is a link, so it looks like every other link on the site. Inheriting the heading's color
   made it underlined text that happened to be clickable, which is the same confusion the other
   way round: the reader was right that a status code should be a link and right again that this
   one did not look like one. */
.status-link { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.intake-out:empty { display: none; }
.intake-shown { border-left: 2px solid var(--rail); padding-left: .6rem; margin: .5rem 0; }
.intake-shown-text { white-space: pre-wrap; margin: .2rem 0; }
.intake-removed { font-size: .8125rem; color: var(--marker); }
.intake-family { border-top: 2px solid var(--accent); padding-top: .5rem; margin-top: .6rem; }

/* ---------------------------------------------------------------- controls
   One button system, applied to every control on the site.

   Before this there were three: the example controls, the export control, and whatever the
   browser does with a bare <button>, which is a white rectangle. A reader met all three on one
   page and had no way to tell which was the action and which was chrome.

   Material's structure is what fixes that, and the parts worth taking are the ones a reader
   feels rather than sees. A control announces its rank: filled for the action a page is asking
   for, outlined for the alternatives, text for the ones that undo. Hover, focus and press are a
   state layer over the same surface rather than a change of border, so nothing resizes or shifts
   under the pointer. And the touch target is larger than the drawn control, which is invisible
   on a mouse and the difference between usable and not on a phone.
*/
.md-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 1rem;
  border: none;
  border-radius: var(--control-shape);
  cursor: pointer;
  font: 500 .875rem/1.25 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .006em;
  text-align: center;
  background: transparent;
  color: var(--accent);
}

/* The drawn button is 40px because that is a comfortable size to read. The target is 48px
   because that is a fingertip, and the difference is why a small control is not a small
   problem on a phone. */
.md-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  min-height: 48px;
  height: 100%;
}

/* The state layer. currentColor means it works on every variant and in both themes without a
   second set of colors to keep in step. */
.md-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s ease;
}
.md-button:hover::before { opacity: .08; }
.md-button:focus-visible::before { opacity: .12; }
.md-button:active::before { opacity: .16; }

.md-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.md-button[disabled] { cursor: default; opacity: .38; }
.md-button[disabled]::before { opacity: 0; }

/* Filled: the one thing the page is asking for. At most one per region, or the emphasis is
   spent and none of them reads as the action. */
.md-filled { background: var(--accent); color: var(--on-accent); }
.md-filled::before { background: var(--on-accent); }

/* Outlined: a real alternative, not a lesser one. */
.md-outlined { border: 1px solid var(--rule); }

/* Text: reversible, and the ones that undo. Nothing to draw the eye. */
.md-text { padding: 0 .6rem; }

@media (prefers-reduced-motion: reduce) {
  .md-button::before { transition: none; }
}

/* Existing controls adopt the same system rather than keeping their own. */
.ex-controls button,
.export-controls button,
.helper-chip { border-radius: var(--control-shape); }

/* ------------------------------------------------- where the reader got to
   A route with a rail, drawn after looking at it rather than after reading the stylesheet.

   Three things were wrong in the version this replaces, and all three were visible in a
   screenshot and invisible in the source. The rail was cut into disconnected stubs, because
   each step carried a margin and a border cannot cross a margin. The control was a text button,
   which on a page full of links is not a control at all. And the answer kept a rule down the
   side of every paragraph, so a panel meant to feel like one thought arrived as four fenced
   ones.

   What the rail has to say is simple: you came from up there, you are here, that continues
   downward. Solid accent behind, a thick ring on the current step, and everything below at
   reduced emphasis but still legible, because "what happens next" is the question a stuck
   reader actually has.
*/
/* Flex, and not for layout. The template writes a newline between each section, and in a block
   container a whitespace-only text node becomes an anonymous line box about 30px tall. That is
   what cut the rail into stubs: a border cannot cross a gap it does not own. A flex container
   discards whitespace-only children, so the steps actually touch. */
.positions-stepped { display: flex; flex-direction: column; margin: 1.5rem 0; }

.positions-stepped .position {
  position: relative;
  /* Margin is what broke the rail: a border cannot cross the gap between two boxes. The space
     is padding now, so each segment runs the full height of its step and meets the next one. */
  margin: 0;
  padding: 0 0 1.5rem 2.25rem;
  border: none;
  border-radius: 0;
}
.positions-stepped .position:last-child { padding-bottom: 0; }
.positions-stepped .position-signal { margin-top: 0; }
/* Restored: the stripper that cleared the old position layer took this with it, and the
   style contract noticed. The signal's proof sits tight under it in this design. */
.position-means { margin: 0; }

/* The rail segment. Full height, so consecutive segments touch. */
.positions-stepped .position::before {
  content: "";
  position: absolute;
  left: calc((18px - 2px) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.positions-stepped .position:last-child::before { display: none; }

/* The marker sits on the rail and hides the line behind it. */
.position-marker {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: .38rem;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule);
  cursor: pointer;
}
/* The drawn circle is small on purpose. The target around it is not. */
.position-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
}
.position-marker:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Behind you. */
.positions-stepped .position-passed::before { background: var(--accent); }
.position-passed .position-marker { background: var(--accent); border-color: var(--accent); }
.positions-stepped .position-passed .position-signal { color: var(--muted); }

/* Here. The thick ring is the only one of its kind in the column. */
.position-chosen .position-marker {
  border-width: 5px;
  border-color: var(--accent);
  background: var(--paper);
}
.positions-stepped .position-chosen .position-signal { color: var(--accent); }

/* Ahead. Quieter, and still readable, because what happens next is the question. */
.positions-stepped .position-ahead { opacity: .68; }

/* A control, not a link. Tonal by default so it reads as pressable on a page of blue text, and
   filled once chosen, which is how a selection shows itself without the label changing. */
.position-report {
  min-height: 36px;
  margin-top: .3rem;
  padding: 0 .9rem;
  font-size: .8125rem;
  font-weight: 500;
  border-radius: var(--control-shape);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.position-report:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.position-report[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* One surface, no rules. The previous version fenced each paragraph off from the next. */
.position-answer {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border: none;
  border-radius: calc(var(--control-shape) / 2 + 4px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.position-answer p {
  margin: 0 0 .7rem;
  padding-left: 0;
  border-left: none;
}
.position-answer p:last-child { margin-bottom: 0; }
.position-answer .label {
  display: block;
  margin-bottom: .1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Only the label is quiet. Dimming the sentence too made the answer read as
   three captions with no prose under them. */
.position-answer p { color: var(--ink); }
.answer-next { font-weight: 600; }

/* The preview of one field, matched to the answer panel: a surface rather than a rule, because
   the same reader met the same pattern forty lines up. */
.intake-shown {
  border-left: none;
  padding: .7rem .85rem;
  margin: .6rem 0;
  border-radius: calc(var(--control-shape) / 4 + 2px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.intake-shown-text { margin: .25rem 0 .4rem; white-space: pre-wrap; }
.intake-shown-label, .intake-removed { color: var(--muted); }

/* The delete control sits at the end of the line it removes, so a reader who wants a line gone
   points at that line. Quiet until approached, because removing an answer is reversible and
   should not look like the thing to do. */
.intake-shown-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.intake-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.intake-drop:hover { color: var(--warn, var(--accent)); background: color-mix(in srgb, currentColor 12%, transparent); }
.intake-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Drawn at 30px, reachable at 44. */
.intake-drop::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%; translate: -50% -50%;
  width: 44px; height: 44px;
}
.intake-drop { position: relative; }

/* The fallback path, and the whole feature without scripting. It looks like the action it is. */
.intake-open { text-decoration: none; }

/* An aside is an aside. It answers a question a reader asks only if they are wondering. */
details.aside { margin: 1.25rem 0; }
details.aside > summary { cursor: pointer; color: var(--muted); font-size: .9375rem; }
details.aside[open] > summary { margin-bottom: .5rem; }

/* A hairline, not a rule. It separates the taxonomy note from the preview above it. */
.intake-family {
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
}
.intake-family-title { color: var(--muted); }

/* --------------------------------------- one control language, everywhere
   Found by opening a page that had only ever been read. Three treatments were living on the
   same site: the button system written today, the example controls from before it, and the
   reader-level chips, which are pressable and drawn as tags.

   A reader does not learn three vocabularies. They learn the first one they are shown and then
   miss the controls that do not speak it, which on this page are the two that let them choose
   how much of the example they see.

   Markup is unchanged. These are selection chips in Material's sense, and selection is carried
   by the container filling rather than by a border changing color, so nothing shifts when one
   is chosen. */
.levels { align-items: center; gap: .45rem; }

.level,
.ex-controls button,
.export-controls button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--control-shape);
  background: transparent;
  color: var(--muted);
  font: 500 .78rem/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.level::before,
.ex-controls button::before,
.export-controls button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s ease;
}
.level:hover::before,
.ex-controls button:hover::before,
.export-controls button:hover::before { opacity: .08; }
.level:focus-visible,
.ex-controls button:focus-visible,
.export-controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Chosen fills, rather than recolouring an edge. */

@media (prefers-reduced-motion: reduce) {
  .level::before,
  .ex-controls button::before,
  .export-controls button::before { transition: none; }
}

/* Chosen fills the container rather than recoloring an edge, so nothing shifts when one is
   selected and the state is carried by more than a one-pixel color change. */
.level[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* ------------------------------------------------- what this page would send
   Spec 3.7 asks for a panel rather than a setting. A setting is a promise about behavior; this
   is the behavior, shown. It is quiet by default and never in the way, because a privacy panel
   that demands attention is asking to be dismissed rather than read. */
.data-panel { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.data-panel-body { margin-top: .9rem; }
.data-panel-heading {
  margin: 1.1rem 0 .4rem;
  font: 600 .78rem ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.data-panel-heading:first-child { margin-top: 0; }
.data-panel-empty, .data-panel-note, .data-panel-refused { margin: 0 0 .5rem; font-size: .9375rem; }
.data-panel-refused { color: var(--warn, var(--accent)); }

.data-row {
  margin: .5rem 0;
  padding: .7rem .85rem;
  border-radius: calc(var(--control-shape) / 4 + 2px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.data-row-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  font: 600 .8125rem ui-monospace, monospace;
}
.data-row-value {
  margin: .35rem 0;
  padding: .45rem .55rem;
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: .8125rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.data-row-why { margin: .25rem 0 0; font-size: .8125rem; color: var(--muted); }

.data-drop {
  min-height: 30px;
  padding: 0 .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--control-shape);
  background: transparent;
  color: var(--muted);
  font: 500 .75rem ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.data-drop:hover { color: var(--ink); }
.data-drop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }