/* ═══════════════════════════════════════════════════════════════════════════
   THE WALK'S OWN CHROME — and ONLY the walk's own chrome.
   ═══════════════════════════════════════════════════════════════════════════

   THE DRAWN APP IS NOT STYLED HERE. Every screen loads the SHIPPED stylesheet
   public/b-os/client-portals/portal-demo/portal.css first — the same sheet the
   fifteen already-public screens use — and this file adds only what that sheet
   has no reason to carry: the walk's masthead, the honest-state vocabulary, the
   persona switch, the falsification notes and the way back. Nothing in
   portal.css is restated, overridden or transcribed here. If a drawn control
   looks wrong, the fix is in the shipped sheet, and it fixes both surfaces.

   TOKENS ARE INHERITED, NEVER REDECLARED. --g0..--g3, --ink, --mid, --dim,
   --line, --soft, --gilt, --giltline, --acc, --sans, --serif, --mono and the
   two themes all come from portal.css.

   COLOUR CARRIES NOTHING ON ITS OWN. FOUNDER is red/green colourblind. Every
   state below is told FOUR ways at once — a glyph, a word, a border style, and
   a step in lightness. Read the whole walk in greyscale and nothing is lost.
   No red/green pair appears anywhere in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

.wk-skip{position:absolute;left:-9999px}
.wk-skip:focus{left:14px;top:14px;z-index:99;background:var(--g1);border:1px solid var(--line);
  padding:12px 16px;border-radius:10px;text-decoration:none;color:var(--ink);min-height:44px;
  display:inline-flex;align-items:center}

/* ── the walk's masthead — says what this is, on every screen, permanently ─
   Not a banner that scrolls away and not a page anyone has to arrive through. */
/* NOT sticky any more. Two pinned bars on a 375px phone is how a fold
   disappears, and of the two the one that has to stay is the one that says who
   you are — so the masthead scrolls and .wk-band pins. */
.wk-chrome{position:relative;z-index:60;background:var(--g1);border-bottom:1px solid var(--line)}
.wk-chrome-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:9px 12px;
  padding:9px 14px;flex-wrap:wrap}
.wk-home{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.wk-home b{font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:-.005em}
.wk-mark{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:999px;
  padding:4px 11px;font-size:11.5px;color:var(--dim);line-height:1.35}
.wk-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin-left:auto}
.wk-theme{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--g1);color:var(--ink);font:inherit;
  font-size:13px;cursor:pointer}
.wk-theme:hover{border-color:var(--ink)}

/* ══ THE IDENTITY BAND ═════════════════════════════════════════════════════
   FOUNDER, 2026-08-12: "theres no persistent label of who i am and what im
   walking." Same spot, every screen, no exceptions — directly below the
   masthead and above the screen title, and it is the ONE pinned thing on the
   page. A strip, not a panel: two facts and, where there is a choice to make,
   the control that changes them.

   IT IS A BORDER, A LABEL WORD AND BOLD TEXT. No hue carries any of it —
   FOUNDER is red/green colourblind and the whole walk reads in greyscale.
   NO TRANSITION anywhere in this block: changing who you are is announced by
   aria-live, not animated, which is reduced-motion-safe by having no motion to
   reduce. Height budget: ≤56px at 1280, ≤72px at 375 with the control. */
/* WHAT PINS IS A STRIP. Below 900px only the identity line is sticky and the
   control scrolls just under it; from 900px up the whole band pins and the two
   sit on one row, inside the 56px budget. Pinning the whole instrument on a
   phone cost 392px of an 812px screen — the fold-eating failure this band
   exists to prevent, committed by the band itself.

   ── AND FOR ONE PASS IT DID NOT PIN AT ALL ON A PHONE ────────────────────────
   Measured live at 375 by the Walker, 2026-08-12: on c8 mid-scroll there was NO
   identity label anywhere on the screen. The rule above was written and was
   correct, and the sentence it describes was still false, because a sticky
   element is confined to its PARENT'S box. `.wk-band` is 320px tall on a phone —
   the strip plus the five kind chips — so `.wk-band-who` pinned for about 250px
   of scroll and then left with its parent, on every one of the 49 pages. Forty-
   four screens with nothing saying who you were is the complaint this whole band
   was built to answer, and it came back on the surface the standard calls
   mobile-first, with a source-reading check green over the top of it because
   that check tested markup rather than behaviour.

   THE FIX IS THE CONTAINING BLOCK, NOT THE POSITIONING. Below 900px the wrapper
   is `display:contents`: its box disappears, its two children become children of
   <main>, and the identity strip's sticky containing block becomes the whole
   page instead of a 320px band. The control still sits directly under it and
   still scrolls, which is what the paragraph above always said. The wrapper's
   own ground and rule move onto the children, since there is no wrapper box left
   to carry them. From 900px up the wrapper comes back as a flex row and nothing
   about that width changes.

   Proved by measurement, not by reading: check/pinned-proof.mjs scrolls every
   page to the bottom in viewport steps at 375 and 1280 and asserts an identity
   label is on screen, and under the height budget, at every step — and its
   `--red` mode restores this containment on purpose and asserts the proof fails. */
.wk-band{position:relative;z-index:70;background:var(--g2);border-bottom:1.5px solid var(--ink)}
.wk-band-who{position:sticky;top:0;z-index:71;background:var(--g2);margin:0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;padding:8px 14px;
  font-size:14px;line-height:1.35;color:var(--mid)}
.wk-band-who .lb{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.wk-band-who b{font-weight:700;color:var(--ink)}
/* THERE IS NO "·" BETWEEN THE TWO FACTS ANY MORE, and the reason is the
   measurement rather than a preference: the strip is a wrapping flex row and
   the walkers' own names for themselves are 30–50 characters, so who-I-am and
   what-I-am-in are on separate lines at 375 AND at 1280. The dot was a flex
   item after the bold identity, so it wrapped with the identity and stranded
   itself at the end of that line — "…swimsuit in a shop ·" — with the thing it
   separated underneath. Grouping it with what follows moved the fault rather
   than fixing it: at 1280 it then led the second line as "·Atlantica's trade
   portal". Weight, colour and position already tell the two facts apart. */
/* The control lives IN the band and nowhere else, so you can never change who
   you are without the line that says who you now are sitting against your hand. */
.wk-band .wk-switch{margin:0;border:0;border-top:1px dashed var(--dim);border-radius:0;
  background:transparent;padding:7px 14px 9px;gap:6px}
/* THE PHONE, AND THE WHOLE OF F0. The wrapper stops being a box so the strip
   above pins against the page rather than against the wrapper's own 320px. Its
   ground and its rule move onto the two children, which is all the wrapper was
   drawing. Nothing here changes at 900px and up. */
@media (max-width:899.98px){
  .wk-band{display:contents}
  .wk-band-who{border-bottom:1.5px solid var(--ink)}
  .wk-band .wk-switch{background:var(--g2);border-top:0;border-bottom:1.5px solid var(--ink)}
}
/* the statement the instrument produces: a paragraph, under the band, unpinned */
.wk-band + .chg{max-width:1180px;margin:9px auto 0;padding:0 14px;font-size:13px;line-height:1.5;
  color:var(--ink)}
.wk-band + .chg b{font-weight:700}
.wk-band + .chg.refused{border-left:4px solid var(--ink);padding-left:11px;margin-left:14px}
@media (min-width:900px){
  .wk-band{position:sticky;top:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 18px;
    padding:0 14px;max-width:100%}
  /* Two lines is the budget — the identity, and under it the rest of it. The
     control sits beside, not below, so the strip stays ≤56px. */
  .wk-band-who{position:static;padding:5px 0;flex:1 1 20rem;min-width:0;font-size:13.5px;
    line-height:1.3;align-items:center;align-content:center}
  .wk-band .wk-switch{border-top:0;border-left:1px dashed var(--dim);padding:5px 0 5px 14px;
    flex:0 1 auto;display:flex;align-items:center;gap:9px}
  .wk-band .wk-switch .opts{flex-wrap:nowrap;overflow-x:auto;max-width:34vw}
  /* One row of pills, each on one line. Left to wrap, the walker's own long
     names for themselves ("a shop that buys from Atlantica") turned the pinned
     strip into a 115px panel. */
  .wk-band .wk-opt{white-space:nowrap;min-height:32px;padding:4px 10px;font-size:12px}
  .wk-band .wk-switch .lb{white-space:nowrap}
}
/* THE PHONE. The label gets its own tight line, the identity gets the rest, and
   the whole pinned strip stays a strip. The five kinds' own names for
   themselves are 30–50 characters — "someone who bought an Atlantica swimsuit
   in a shop" is the longest — so the identity genuinely needs two lines at
   375px, and truncating the one thing FOUNDER asked to be persistent would be
   the wrong economy. */
@media (max-width:620px){
  .wk-band-who{padding:6px 12px 7px;font-size:13px;line-height:1.28;gap:0 6px}
  .wk-band-who .lb{flex:0 0 100%;font-size:9px;line-height:1.5}
  .wk-band .wk-switch{padding:6px 12px 8px}
}

/* THE ROWS A QUEUE COUNTS BUT DOES NOT DRAW. Set in the dim voice the group
   heading's own count uses, so it reads as the list continuing rather than as
   another message. The emitter refuses to build if this number and the number
   in the heading do not add up to what is drawn. */
.grp-more{margin:6px 0 0;padding-left:2px;font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ── the three status words, and nothing else ──────────────────────────────
   real  ● solid ink border, lifted ground   — the thing drawn exists and runs
   part  ◐ solid mid border, half-step ground — some of it is built; the row says which
   not   ○ dashed border, no ground           — a drawing of something that does not exist
   Glyph + word + border STYLE + lightness step, all four at once. */
.wk-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:5px 10px;border-radius:999px;line-height:1.3;
  white-space:nowrap;vertical-align:middle}
/* Specificity is load-bearing here, not cosmetic. On the front page these
   chips also carry portal.css's .pin inside .grid, which is (0,2,0) — so a
   bare .wst-not at (0,1,0) LOSES, and the dashed border that tells not-built
   apart silently becomes a solid one. The rendered greyscale proof caught it
   while the source-reading check was still green, which is the whole argument
   for measuring the computed style rather than the stylesheet. */
.wk-chip.wst-real{background:var(--g3);border:1.5px solid var(--ink);color:var(--ink)}
.wk-chip.wst-part{background:var(--g2);border:1.5px solid var(--mid);color:var(--ink)}
.wk-chip.wst-not{background:transparent;border:1.5px dashed var(--dim);color:var(--dim)}
@media (max-width:520px){.wk-chip{white-space:normal}.wk-id{margin-left:0}}

/* ── the head of each screen ──────────────────────────────────────────────── */
.wk-head{max-width:1180px;margin:0 auto;padding:20px 14px 0}
.wk-kick{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gilt);
  margin:0 0 5px}
.wk-title{font-family:var(--serif);font-size:clamp(23px,4.6vw,33px);line-height:1.1;margin:0 0 8px;
  text-wrap:balance;font-weight:700}
.wk-title.wk-big{font-size:clamp(26px,5.4vw,42px)}
.wk-purpose{color:var(--mid);font-size:16px;margin:0 0 8px;max-width:64ch}
.wk-purpose.wk-lede{font-size:16.5px;max-width:68ch}
.wk-which{font-size:14.5px;color:var(--mid);margin:0 0 8px;max-width:74ch;border-left:3px solid var(--giltline);
  padding-left:12px}
.wk-which b{color:var(--ink)}
.wk-invented{display:inline-flex;align-items:flex-start;gap:6px;border:1px dashed var(--line);border-radius:12px;
  padding:7px 12px;font-size:12.5px;color:var(--dim);margin:0 0 4px;line-height:1.5;max-width:74ch}
.wk-invented b{color:var(--ink);font-weight:600}

.wk-stage{max-width:1180px;margin:16px auto 0;padding:0 14px}

/* ── the prototype's own instrument ───────────────────────────────────────
   Visibly not the product: dashed edge, its own label, the word prototype in
   it. Nobody should leave the walk thinking a firm gets a kind-switcher. */
.wk-switch{border:1.5px dashed var(--dim);border-radius:14px;background:var(--g2);padding:11px 12px;
  display:grid;gap:9px;margin:0 0 14px}
.wk-switch .lb{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.wk-switch .opts{display:flex;gap:6px;flex-wrap:wrap}
.wk-opt{min-height:40px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--g1);
  color:var(--mid);font:inherit;font-size:13px;line-height:1.3;cursor:pointer}
.wk-opt:hover{border-color:var(--ink);color:var(--ink)}
.wk-opt.on{border-color:var(--ink);border-width:1.5px;color:var(--ink);font-weight:700;background:var(--g3);
  box-shadow:inset 0 -2px 0 var(--ink)}

/* the refusal: a different SHAPE of block, not a different colour of one */
.wk-switch.refusing{border-style:solid;border-width:2px;border-color:var(--ink);background:var(--g3)}
.wk-switch .chg.refused{border-left:4px solid var(--ink);padding-left:11px}

/* ── the commentary, folded behind one line ────────────────────────────────
   Closed in the markup; walk.js opens it from 900px up. Same disclosure idiom
   as .wk-aside, deliberately — one shape for "the argument is under here". */
.wk-why{border:1px dashed var(--line);border-radius:12px;background:var(--g1);margin:12px 0 0}
.wk-why > summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);list-style:none}
.wk-why > summary::-webkit-details-marker{display:none}
.wk-why > summary::before{content:"+";font-family:var(--mono);font-size:15px;color:var(--dim)}
.wk-why[open] > summary::before{content:"\2013"}
.wk-why > summary:hover{color:var(--ink)}
.wk-why-in{padding:2px 14px 14px}
.wk-why-in > .fence,.wk-why-in > .soon{margin-top:0}

/* ── a crossing: you are about to be somebody else ─────────────────────────
   Never the Next arrow, never a primary button. Told by a solid rule down the
   side and a label word, so it reads with the colour taken away. */
.wk-cross{max-width:820px;border-left:4px solid var(--ink);background:var(--g2);border-radius:0 13px 13px 0;
  padding:12px 15px;margin:14px 0 0;display:grid;gap:7px}
.wk-cross .lb{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.wk-cross .btn{justify-self:start}

/* ── the proof: one screen, two kinds, side by side ────────────────────────
   What four hand-drawn duplicate screens used to do, rendered from the same
   objects the screen itself renders. */
.wk-sbs{display:grid;gap:9px}
.wk-sbs .lb{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.wk-sbs > b{font-family:var(--serif);font-size:17px}

/* the refusal's own way in — a real link, never a dead-lit button */
.wk-wayin{margin-top:8px}

/* ── the flow line: what this portal is FOR, before any of how it works ──── */
.wk-flow{font-size:16.5px;line-height:1.5;color:var(--ink);margin:0 0 10px;max-width:64ch;
  border-left:3px solid var(--giltline);padding-left:12px}
.wk-flow-door{margin-top:6px}

/* ── the findings, written down where they happen ─────────────────────────── */
.wk-diverge,.wk-close,.wk-twin,.wk-ends{max-width:820px;border-radius:13px;padding:13px 15px;margin:14px 0 0;
  font-size:14px;line-height:1.55;color:var(--mid)}
.wk-diverge{border:2px solid var(--ink);background:var(--g2)}
.wk-close{border:1px solid var(--line);border-left:4px solid var(--giltline);background:var(--g1)}
.wk-twin{border:1px dashed var(--line);background:var(--g1)}
.wk-ends{border:1px solid var(--line);background:var(--g2)}
.wk-diverge b,.wk-close b,.wk-twin b,.wk-ends b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.wk-diverge p,.wk-close p,.wk-twin p,.wk-ends p{margin:0 0 9px}
.wk-diverge p:last-child,.wk-close p:last-child,.wk-twin p:last-child,.wk-ends p:last-child{margin:0}
.wk-diverge .lb,.wk-close .lb,.wk-twin .lb{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  margin-bottom:7px;color:var(--ink)}
.wk-twin a,.wk-diverge a:not(.btn),.wk-ends a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--giltline)}

/* ── the way back, and the one next thing ─────────────────────────────────
   The way back is a fixed word that matches the heading of the page it lands
   on, so it never changes depending on where the reader came from. */
.wk-move{max-width:1180px;margin:20px auto 0;padding:0 14px;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center}
.wk-back,.wk-next{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 15px;
  border:1px solid var(--line);border-radius:11px;background:var(--g1);color:var(--ink);text-decoration:none;
  font-size:14px;line-height:1.3}
.wk-back:hover,.wk-next:hover{border-color:var(--ink)}
.wk-next{margin-left:auto;border-width:1.5px;border-color:var(--ink);font-weight:600}
@media (max-width:560px){.wk-next{margin-left:0;width:100%;justify-content:space-between}
  .wk-back{width:100%}}

/* ── small additions the drawn screens need ───────────────────────────────── */
.wk-field{display:grid;gap:4px}
.wk-field .l{margin:0}
.wk-ext{margin-top:-4px}
.wk-tag-off{border-style:dashed;color:var(--dim)}
.wk-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--line);
  background:var(--g1)}
.wk-tscroll .params{margin:0;min-width:680px}
.wk-tscroll .params th{padding:9px 10px}
@media (max-width:620px){.wk-tscroll{border:0;background:none}.wk-tscroll .params{min-width:0}}

/* ── the counters on the front page ───────────────────────────────────────── */
.wk-count{border:1px solid var(--line);border-radius:14px;background:var(--g1);padding:15px 16px;margin:0 0 14px}
.wk-count h2{font-family:var(--serif);font-size:19px;margin:0 0 7px;font-weight:700}
.wk-count .l{color:var(--mid);font-size:14.5px;line-height:1.55;margin:0 0 11px;max-width:78ch}
.wk-count .l b{color:var(--ink)}
.wk-count .l a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--giltline)}
.wk-nums{display:grid;gap:9px;margin:0 0 4px}
@media (min-width:760px){.wk-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wk-num{border:1px solid var(--line);border-radius:12px;background:var(--g2);padding:11px 13px;font-size:13px;
  line-height:1.5;color:var(--mid);display:block}
.wk-num b{display:block;font-family:var(--serif);font-size:30px;line-height:1.05;color:var(--ink);
  margin-bottom:3px;font-weight:700}
/* the refusal count is told apart by a border STYLE, never a hue */
.wk-num-alt{border-style:dashed;border-width:1.5px;border-color:var(--dim)}

.wk-walks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wk-walks li{border:1px solid var(--line);border-radius:11px;background:var(--g2);padding:10px 12px;font-size:13px}
.wk-walks b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.wk-walks span{color:var(--dim);line-height:2}
.wk-walks a{display:inline-block;min-height:32px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--g1);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:11px}
.wk-walks a:hover{border-color:var(--ink)}

.grid .pin.wk-chip{margin-top:7px}

.wk-foot{max-width:1180px;margin:26px auto 0;padding:20px 14px 56px;color:var(--dim);font-size:13.5px;
  line-height:1.6;border-top:1px solid var(--line)}
.wk-foot p{max-width:78ch;margin:0 0 8px}
.wk-foot b{color:var(--ink)}
.wk-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--giltline)}
.wk-foot .mono{font-family:var(--mono);font-size:12.5px}

/* ── an edge, reached from the screen that produces it ─────────────────────
   Never a menu of edges. One link, in context, where the thing goes wrong. */
.wk-edge{border:1px dashed var(--line);border-radius:12px;background:var(--g2);padding:11px 12px;
  display:grid;gap:7px;justify-items:start}
.wk-edge .lb{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink)}
.wk-edge .l{margin:0}
.wk-slots{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--dim)}

/* A footer link that is alone in its paragraph is a CONTROL, not prose, so it
   gets a real target. Links that sit inside a sentence deliberately do not —
   forcing 44px on those breaks the line box, and WCAG 2.5.8 exempts them. */
.wk-foot p > a:only-child{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;
  border:1px solid var(--line);border-radius:10px;text-decoration:none}
.wk-foot p > a:only-child:hover{border-color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FRONT DOOR — two questions, and nothing a stranger has to be taught.
   ═══════════════════════════════════════════════════════════════════════════
   FOUNDER, 2026-08-12: "I asked for a user friendly prototype, have a prototype
   onboarding flow, ask user questionss about who they are and what theyre there
   to see and YOU put them in the corresponding flow" — and, of the page this
   replaces, "I was confused by the first line and it only got more confusing as
   i went along… IT NEEDS TO BE EASAY EVEYYHTING NEEDS TO BE EASY!!!"

   So the answers are the biggest thing on the page and nothing competes with
   them: no counters, no status chips, no switch. ONE COLUMN at every width — a
   two-up grid of choices reads as a comparison, and these are not alternatives
   to weigh against each other, they are five sentences to find yourself in.

   NO ANSWER IS TOLD APART BY ITS GROUND. The first draft gave the first choice
   a lighter ground, and rendered it read as "this one is already picked" — and
   it broke this file's own law twice over: a ground on its own carries nothing,
   and a distinction a reader has to infer is not EASY. The one choice worth
   pointing at now says so in words, in a label anybody can read. */
.wk-q{border:1px solid var(--line);border-radius:14px;background:var(--g1);padding:15px 16px;margin:0 0 14px}
.wk-qn{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);margin:0 0 6px}
.wk-q h2{font-family:var(--serif);font-size:clamp(20px,3.4vw,25px);margin:0 0 13px;font-weight:700;
  color:var(--ink);line-height:1.25}

.wk-picks{display:grid;gap:10px}
.wk-choice{display:flex;align-items:center;gap:12px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;background:var(--g2);padding:14px 15px;
  min-height:64px;color:var(--ink)}
.wk-choice:hover,.wk-choice:focus-visible{border-color:var(--ink);background:var(--g0)}
.wk-ct{display:grid;gap:3px;flex:1 1 auto;min-width:0}
.wk-ct b{font-size:16.5px;line-height:1.3;font-weight:650;color:var(--ink)}
.wk-ct i{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--mid)}
/* The pointer, said in words. Inline with the sentence rather than floated off
   to a corner, so it is read in the order it matters. */
.wk-hint{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 7px;
  color:var(--mid);margin-top:3px;justify-self:start}
.wk-go{flex:0 0 auto;font-size:17px;color:var(--dim)}
.wk-choice:hover .wk-go{color:var(--ink)}

/* The gap, stated BEFORE the choices rather than under them. Dashed, because
   dashed is this walk's shape for "not built", and this is a not-built note. */
.wk-gapnote{border:1px dashed var(--line);border-radius:12px;background:var(--g2);
  padding:12px 13px;margin:0 0 12px}
.wk-gapnote b{display:block;font-size:14px;color:var(--ink);margin-bottom:5px}
.wk-gapnote p{margin:0;font-size:14px;line-height:1.55;color:var(--mid);max-width:74ch}

/* ── the mark, and the way home ───────────────────────────────────────────
   Blind-walk F-8: no brand and no route home on any of the 44. The pair is
   swapped by the walk's own data-theme, the same way the shipped surface does
   it with .l/.d. */
.wk-lock{display:inline-flex;align-items:center;min-height:44px;padding:2px 4px;
  border-radius:8px;text-decoration:none}
.wk-lock:hover{background:var(--g2)}
.wk-lock img{display:block}
:root[data-theme="light"] .wk-lock .d,
:root[data-theme="dark"] .wk-lock .l{display:none}

/* ── the commentary, folded ───────────────────────────────────────────────
   Blind-walk F-4/F-9: the drawing goes first; the apparatus is one press away
   and loses nothing. Native <details>, so it works with scripting off. */
.wk-aside{border:1px solid var(--line);border-radius:12px;background:var(--g1);margin:12px 0 0}
.wk-aside > summary{display:flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;
  font-size:14px;color:var(--mid);list-style:none;gap:8px}
.wk-aside > summary::-webkit-details-marker{display:none}
.wk-aside > summary::before{content:"+";font-family:var(--mono);font-size:15px;color:var(--dim)}
.wk-aside[open] > summary::before{content:"–"}
.wk-aside > summary:hover{color:var(--ink)}
.wk-aside-in{padding:2px 14px 14px;display:grid;gap:11px}

/* A kind that cannot fill still has to ACKNOWLEDGE the press. Blind-walk F-5b:
   the button you pressed stayed unlit and the screen did not move, so it read
   as broken. Dashed is this walk's shape for "does not exist", which is exactly
   what is being said — and it is a SHAPE, so it survives greyscale. */
.wk-opt.tried{border-style:dashed;border-width:1.5px}

.wk-also{margin:12px 0 0}
.wk-also a{display:inline-flex;align-items:center;min-height:44px;padding:6px 13px;
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--mid);font-size:14px}
.wk-also a:hover{border-color:var(--ink);color:var(--ink)}