/* Deck styles. Light and dark, phone-safe. No framework. */

:root {
  --bg: #fbfaf8;
  --panel: #ffffff;
  --ink: #1c1a18;
  --ink-soft: #55504a;
  --ink-faint: #8a837a;
  --rule: #e2ddd5;
  --accent: #7a4a1e;
  --accent-soft: #f0e6da;
  --link: #8a4b12;
  --diagram-bg: #ffffff;
  --mark: #b8ae9f;
}

/* The dark palette appears TWICE and the two blocks must stay byte-identical: CSS cannot name
   a token set, so the system-preference route and the explicit-choice route each need a copy.
   The toggle (scripts/nav.py) sets data-theme on <html>; no attribute means follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16151a;
    --panel: #1e1d23;
    --ink: #e9e5df;
    --ink-soft: #b3aca2;
    --ink-faint: #7d766c;
    --rule: #33313a;
    --accent: #e0a86a;
    --accent-soft: #2b2620;
    --link: #e0a86a;
    --diagram-bg: #f7f5f2;
    --mark: #5a5450;
  }
}
:root[data-theme="dark"] {
  --bg: #16151a;
  --panel: #1e1d23;
  --ink: #e9e5df;
  --ink-soft: #b3aca2;
  --ink-faint: #7d766c;
  --rule: #33313a;
  --accent: #e0a86a;
  --accent-soft: #2b2620;
  --link: #e0a86a;
  --diagram-bg: #f7f5f2;
  --mark: #5a5450;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 18px;
  line-height: 1.62;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.2rem 1.15rem 5rem;
}

/* ---- card head ---- */

.card-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 .2rem;
  letter-spacing: -0.01em;
}

.card-kicker {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .72rem;
  letter-spacing: .13em;
  /* uppercase moved into the build: the CSS transform mangled the superscript d of R^d */
  color: var(--ink-faint);
  margin: 0 0 1.6rem;
}

/* ---- prose ---- */

h2 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.9rem 0 .9rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

p { margin: 0 0 1.15rem; }

.lede {
  font-size: 1.16rem;
  line-height: 1.55;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Cross-links to other cards. Deliberately quiet: a card is read straight through, and a
   link is an exit the reader may take later, not a signpost competing with the prose. */
.xref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.xref:hover { color: var(--accent); }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
li { margin-bottom: .5rem; }

strong { font-weight: 600; }

code, .sym {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}

/* ---- the diagram ---- */

figure.diagram {
  margin: 2rem 0 2.2rem;
  padding: 1.3rem 1rem 1rem;
  /* A scrolling figure was tried here on 2026-08-15 and reverted the same day: the next cold
     reader found the drawings "severed", with running prose cut mid-sentence and no scroll cue,
     and read it as breakage rather than as an invitation. A complete but small drawing beats a
     legible fragment. The real fix is upstream — a drawing composed narrow enough that its own
     type survives a phone — and `captions.mjs` now reports the number that decides it. */
  background: var(--diagram-bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

figure.diagram svg {
  display: block;
  /* The build sets --dw per card so a label renders at the same size on every card; see
     scale_diagrams in scripts/build.py. It is applied only on a wide screen: on a phone the
     column is already narrower than every drawing, so matching scales there would only make
     the small ones unreadable. Consistency is worth having where there is room for it. */
  margin-inline: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

figure.diagram figcaption {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid #e6e1d9;
  font-size: .88rem;
  line-height: 1.5;
  color: #55504a;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- statement block (definitions, axioms, precise statements) ---- */

.statement {
  margin: 1.6rem 0;
  padding: 1.05rem 1.2rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

.statement > *:last-child { margin-bottom: 0; }

.statement .label {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .55rem;
  font-weight: 600;
}

/* ---- paragraph anchors: tap to copy a reference ---- */

.pblock { position: relative; }

.pmark {
  position: absolute;
  left: -2.2rem;
  top: .28em;
  width: 1.9rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .68rem;
  color: var(--mark);
  cursor: pointer;
  user-select: none;
  text-align: right;
  border: 0;
  background: none;
  padding: 0;
  opacity: 0;
  transition: opacity .12s;
}

@media (min-width: 56rem) {
  figure.diagram svg { width: var(--dw, 100%); }
}

.pblock:hover .pmark, .pmark:focus { opacity: 1; }
.pmark.copied { color: var(--accent); opacity: 1; }

@media (max-width: 56rem) {
  .pmark {
    position: static;
    display: inline-block;
    width: auto;
    opacity: .55;
    margin-right: .4rem;
    text-align: left;
  }
}

/* ---- footer / feedback ---- */


/* ---- index ---- */

.deck-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.deck-list li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: .8rem;
}

.deck-list a { font-size: 1.12rem; text-decoration: none; }
.deck-list a:hover { text-decoration: underline; }

.deck-list .gloss {
  color: var(--ink-faint);
  font-size: .88rem;
  margin-left: auto;
  text-align: right;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.tag {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16rem .42rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
}

.note {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  font-size: .93rem;
  color: var(--ink-soft);
}

.katex { font-size: 1.03em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .3rem 0; max-width: 100%; }
/* A display equation wider than a phone was clipped mid-formula rather than scrolling: the
   overflow rule was there, the width bound was not, so the line pushed its own container.
   Owner's standard: the site may be small on a phone, never broken. */
.statement .katex-display, .card .katex-display { max-width: 100%; }
/* On a phone a long display line still READ as cut, even though it scrolled: the reader sees a
   severed formula, not an invitation. Shrinking the display type at narrow widths lets the
   whole line land on screen, which is what he actually needs from it. */
@media (max-width: 30rem) {
  .katex-display > .katex { font-size: .8em; }
}

/* Getting back to the index. The footer already carried a link, but it sits under the whole
   card, so on a long page the only way back was editing the URL. */
.topnav {
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.topnav a {
  color: var(--ink-faint);
  text-decoration: none;
}
.topnav a:hover { color: var(--accent); text-decoration: underline; }

/* A character in a diagram is not a picture, it is a request for whatever font the reading
   machine happens to have, and the machines disagree. U+2717 came out a neat mathematical
   cross in the browser used for review and an ugly serif X in the owner's, from identical
   bytes. Hosting the font settles it: the page carries the glyph it means, so every reader
   sees the one that was approved. Subset to the marks the diagrams use, 2 kB.

   The family must be named FIRST wherever it is used. Font fallback walks the list and stops
   at the first family that has the character, so a system face that happens to carry an ugly
   ✗ would win from anywhere ahead of it. */
@font-face {
  font-family: "DeckGlyphs";
  src: url("fonts/deck-glyphs.woff2") format("woff2");
  font-display: block;   /* never show a substitute: a swapped-in mark is the whole bug */
  unicode-range: U+2713, U+2717;
}

/* The definitions page. Every card's formal block, gathered by the build rather than kept
   beside the cards, so one edit to a card is one edit everywhere.

   The first attempt set the entries as a two-column list separated by hairlines, with the card
   title floating under the term as a second link. Owner, 2026-08-09: "the little fig leaf link
   is SO confusing. It's just floating there"; "Everything is just floating in empty space. It
   looks like an error, rather than a boxed definition." So each entry is now the same bordered
   block the card itself uses, and the term is the link. */
.index-lede { margin: .4rem 0 0; font-size: .95rem; }

.defs-heading {
  margin: 2.8rem 0 -.4rem;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.def {
  margin: 1.15rem 0;
  padding: 1.05rem 1.2rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
.def > *:last-child { margin-bottom: 0; }
.def p { margin: .55rem 0; }
.def p:last-child { margin-bottom: 0; }

/* The term is a heading, not a UI label. Set in the body serif so the box reads as one object
   rather than a tag stapled to a paragraph, and kept in the accent so the terms stripe down the
   page for someone scanning for one. Title case is applied by the build, since CSS capitalize
   would also raise "and" and "on" and would reach into the maths. */
.def-term {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: .5rem;
}
.def-term:hover { text-decoration: underline; }

/* Display math cannot shrink below its own width, so it scrolls inside the block rather than
   widening the page. */
.def .katex-display { overflow-x: auto; overflow-y: hidden; margin: .6rem 0; }
.index-lede .sep { color: var(--rule); }

/* Site header. Emitted by scripts/nav.py into every page the build produces, and by
   companion.py into every converted chapter, so one bar spans the whole site. */
.sitenav { background: var(--bg); border-bottom: 1px solid var(--rule); }
.sitenav nav { max-width: 46rem; margin: 0 auto; padding: 0 1.6rem; display: flex; gap: 1.4rem;
               font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
               font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
/* Tokens, never literals: the active tab was #22201c hardcoded, which in dark mode was
   near-black on near-black. Owner, 2026-08-15: "The active tab is basically black on black
   and becomes invisible." Every colour here must survive both palettes. */
.sitenav a { color: var(--ink-faint); border-bottom: 2px solid transparent;
             padding: .9rem 0 .6rem; text-decoration: none; }
.sitenav a:hover { color: var(--ink); }
.sitenav a.on { color: var(--ink); border-bottom-color: var(--accent); }
#theme-toggle { margin-left: auto; align-self: center; background: none; border: 1px solid var(--rule);
                border-radius: 4px; color: var(--ink-faint); font: inherit; font-size: .72rem;
                letter-spacing: .05em; text-transform: uppercase; padding: .2rem .55rem;
                cursor: pointer; }
#theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   The reading companion. Same tokens as the cards: one palette, one type scale,
   one dark mode across the whole site. The two halves looked like two products
   when the companion carried its own :root, which is what the owner bounced off.
   --------------------------------------------------------------------------- */

.notes .sans { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.notes .eyebrow { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12px;
           letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.notes h1 { font-size:28px; line-height:1.2; margin:6px 0 24px; font-weight:700; }
.notes main h2 { font-size:1.15rem; margin:2.2rem 0 .7rem; font-weight:600;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  border: none; padding: 0; }
.notes h2 .secnum { color:var(--ink-faint); font-weight:400; margin-right:.4em; }
.notes h3 { font-size:16px; margin:26px 0 10px; font-weight:600; }
.notes p { margin:0 0 14px; }
.notes ol, .notes ul { padding-left:26px; margin:0 0 14px; }
.notes li { margin:4px 0; }
.notes ol.roman { list-style:lower-roman; }
.notes ol.alpha { list-style:lower-alpha; }
.notes nav.bar { display:flex; justify-content:space-between; align-items:baseline; gap:16px;
          font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:13px; }
.notes nav.bar.top { margin-bottom:20px; }
.notes nav.bar.bottom { margin-top:48px; padding-top:20px; border-top:1px solid var(--rule); }
.notes .stmt { border:1px solid var(--rule); background:var(--panel); border-left:3px solid var(--accent);
        padding:14px 18px; margin:18px 0; }
.notes .stmt-head { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12px; font-weight:600;
             text-transform:uppercase; letter-spacing:.05em; color:var(--accent);
             margin-bottom:6px; }
.notes .stmt-exercise { border-left-color:#7a4a1e; }
.notes .stmt-exercise .stmt-head { color:#7a4a1e; }
.stmt p:last-child, .note-block p:last-child, .stmt ol:last-child, .stmt ul:last-child
 { margin-bottom:0; }
.notes .note-block { margin:14px 0; }
.notes .note-head { color:var(--ink-faint); }
.notes .figure-note { border:1px dashed var(--rule); background:rgba(0,0,0,0.015); padding:12px 16px;
               margin:18px 0; font-size:14px; color:var(--ink-faint); }
.notes .figure-note-tag { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:11px;
                   font-weight:600; text-transform:uppercase; letter-spacing:.06em;
                   margin-right:10px; }
.notes .fn { color:var(--ink-faint); font-size:14px; }
.notes figure.tikz { margin:24px 0; text-align:center; }
.notes .tikz-svg { display:block; overflow-x:auto; }
/* Natural size, capped by the column: the picture is drawn at the size it was drawn at. */
.notes .tikz-svg svg { max-width:100%; height:auto; }
.notes figure.tikz .tikz-svg + .tikz-svg { margin-top:14px; }
.notes figure.tikz figcaption { margin-top:10px; font-size:14px; color:var(--ink-faint); text-align:left; }
               font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:13px;
               letter-spacing:.04em; text-transform:uppercase; }
.notes sup.fnref { font-size:11px; line-height:0; }
.notes sup.fnref .footnotes { margin-top:44px; padding-top:18px; border-top:1px solid var(--rule);
             font-size:14px; color:var(--ink-faint); }
.notes .footnotes h2 { font-size:13px; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
                text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.notes .footnotes ol { padding-left:22px; }
.notes .footnotes li { margin:6px 0; }
.notes .fnback { border-bottom:none; margin-right:4px; }
.notes .xref-tex { color:var(--ink-faint); }
.notes .toc { list-style:none; margin:0; padding:0; }
.notes .toc li { padding:6px 0; border-bottom:1px solid var(--rule); margin:0; }
.notes .part { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12px; letter-spacing:.06em;
        text-transform:uppercase; color:var(--ink-faint); margin:26px 0 6px; }
.notes .part:first-of-type { margin-top:14px; }
.notes .toc .n { color:var(--ink-faint); font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:13px;
          margin-right:10px; }
.notes table { border-collapse:collapse; margin:18px 0; width:100%; font-size:15px; }
.notes th, .notes td { text-align:left; vertical-align:top; padding:8px 12px;
         border-bottom:1px solid var(--rule); }
.notes th { font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12px; font-weight:600;
     text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
     border-bottom:1px solid var(--rule); }
.notes .stmt-callout { border-left-color:var(--ink-faint); }
mjx-container[display] { overflow-x:auto; overflow-y:hidden; max-width:100%; }
/* Long inline maths (a set-builder in one line of prose) scrolls in place too, rather than
   dragging the whole page sideways on a phone. */
mjx-container:not([display]) { display:inline-block; overflow-x:auto; overflow-y:hidden;
     max-width:100%; vertical-align:middle; }
@media (max-width:520px) { .wrap { padding:28px 18px 80px; } h1 { font-size:24px; } }

/* --- search box: one control, every page ------------------------------------ */
.searchbox { position: relative; margin: 0 0 1.6rem; }
#search-input { width: 100%; box-sizing: border-box; padding: .7rem .9rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 4px; outline: none; }
#search-input:focus { border-color: var(--accent); }
#search-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 0; list-style: none; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 4px; max-height: 22rem; overflow-y: auto;
  z-index: 5; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
#search-results li { margin: 0; border-bottom: 1px solid var(--rule); }
#search-results li:last-child { border-bottom: none; }
#search-results a { display: block; padding: .55rem .9rem; border-bottom: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9rem; }
#search-results a:hover, #search-results li.on a { background: var(--accent-soft); }
#search-results .kind { color: var(--ink-faint); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; margin-right: .6rem; }
#search-results .where { color: var(--ink-faint); font-size: .78rem; }

/* The card title links back to the statement in the notes that generated it. Quiet by
   request: it looks exactly like the title until the pointer is on it, and then it gets the
   faintest underline and a small outbound mark. Nothing is added to the layout either way. */
.card-title a.to-notes { color: inherit; text-decoration: none; border-bottom: none; }
.card-title a.to-notes:hover,
.card-title a.to-notes:focus-visible {
  border-bottom: 1px solid var(--rule); }
.card-title a.to-notes::after {
  content: "\2197"; font-size: .5em; margin-left: .3em; vertical-align: super;
  color: var(--ink-faint); opacity: 0; transition: opacity .12s ease; }
.card-title a.to-notes:hover::after,
.card-title a.to-notes:focus-visible::after { opacity: 1; }
@media (hover: none) { .card-title a.to-notes::after { opacity: .45; } }

/* Tutorial sheets, shown as rendered pages. Full column width, one under the next, with the
   page edge marked so a reader can see where one ends and the following begins. */
.notes .sheet { margin: 1.6rem 0 1.2rem; }
.notes .sheet img { display: block; width: 100%; height: auto; margin: 0 0 1rem;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notes .sheet img { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .notes .sheet img { filter: invert(1) hue-rotate(180deg); }

/* --- the pick sheet (scripts/picksheet.py), one working page, not part of the deck ---------- */
.picks { padding: 1.6rem 1.2rem 4rem; }
.picks .sheet { max-width: 78rem; margin: 0 auto; }
.picks h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.picks h2 { font-size: 1.1rem; margin: 2.4rem 0 .2rem; font-family: inherit; color: var(--ink);
  letter-spacing: normal; text-transform: none; border-bottom: none; padding: 0; }
.picks .why { color: var(--ink-soft); font-size: .92rem; margin: .2rem 0 1rem; max-width: 46rem; }
.picks .grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
/* --diagram-bg, not --panel: the drawings are dark ink with no background of their own, and the
   deck's own figure.diagram keeps a light surface under them in BOTH themes for exactly this
   reason. On --panel they were black on near-black in dark mode. */
.picks .cand { display: block; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--diagram-bg); padding: .7rem .8rem 1rem; cursor: pointer; color: #55504a; }
.picks .cand svg { display: block; margin: .5rem auto 0; max-width: 100%; height: auto; }
.picks .pick { display: flex; align-items: center; gap: .45rem; color: #8a837a;
  font: 600 .74rem ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; }
.picks .cand input { accent-color: #7a4a1e; width: 1.05rem; height: 1.05rem; margin: 0; }
/* Selection has to read at a glance on a page of near-identical drawings, so it is a ring and a
   fill, not a tinted border that vanishes next to the next card's border. */
.picks .cand:has(input:checked) { outline: 3px solid var(--accent); outline-offset: -1px;
  box-shadow: 0 2px 10px rgba(0,0,0,.13); }
.picks .cand:has(input:checked) .pick { color: #7a4a1e; }
.picks .cand input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.picks .says { margin: .9rem 0 0; }
.picks .says label { display: block; font-size: .84rem; color: var(--ink-faint);
  margin-bottom: .25rem; }
.picks textarea { width: 100%; font: inherit; font-size: .92rem; line-height: 1.45;
  padding: .5rem .6rem; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 5px; resize: vertical; }
.picks .says textarea { min-height: 3.2rem; }
/* The block lives inside the sticky bar, so pressing the button never leaves what you are meant
   to copy below the fold. */
.picks .bar { position: sticky; bottom: 0; margin: 2.6rem -1.2rem 0; padding: .8rem 1.2rem;
  background: var(--bg); border-top: 1px solid var(--rule); }
.picks .bar .row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.picks .bar button { font: 600 .95rem ui-sans-serif, system-ui, sans-serif; padding: .5rem 1rem;
  border-radius: 5px; border: 1px solid var(--accent); cursor: pointer;
  background: var(--accent); color: var(--bg); }
.picks .bar button.ghost { background: transparent; color: var(--ink-soft);
  border-color: var(--rule); font-weight: 400; }
.picks .state { color: var(--ink-faint); font-size: .88rem; }
.picks #out { display: block; height: 8.5rem; margin-top: .6rem;
  font: .86rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.picks #out[hidden] { display: none; }
.picks .note { color: var(--ink-faint); font-size: .84rem; margin-top: 2.6rem; }
@media (max-width: 32rem) { .picks .grid { grid-template-columns: 1fr; } }