/* ════════════════════════════════════════════════════════════════
   uni — COMPONENTS (the shared grammar · extracted 2026-07-07)
   ────────────────────────────────────────────────────────────────
   The kit's pieces, reading ONLY /tokens.css: the --gko-* roles every
   page resolves (the --s-* slots re-dress only under [data-skin], which
   the rooms do not set; the note below), the radii and the layers.
   Pages keep LAYOUT-ONLY style blocks; any colour, radius, shadow or
   font value in a page block is a lint hit.
   Canonical markup per component lives at /design/kit.html — copy
   FROM there, re-sync against it. (BIG_GINKO_SYSTEM · DECISIONS.md)
   ════════════════════════════════════════════════════════════════ */

/* ══ THE RESKIN (2026-09-17, his word at 12:55: Flat Design 2.0 at the core, Bauhaus as the
   argument; RESKIN_BRIEF.md; the tokens 904eaa52a). Every piece below reads tokens.css and nothing
   else: --gko-paper for a surface, --gko-ink / --gko-ink2, --gko-act for the act (the room's light
   under [data-light], one accent per screen), --gko-ink-on-fill, --gko-line for the one hairline,
   --r-*, and --gko-shadow for the one lifted thing. The values are RESKIN_CONTROLS.md's nine rules
   (VALE, 13:30); the names are the ones every page resolves: --s-* re-dress only under
   [data-skin="ginko"], which zero of the twelve surfaces set (measured 13:36). What went, once for
   the whole file:
     · the hard offset shadow (6px 6px 0, 4px 4px 0, 3px 3px 0, the comic pop) on every control:
       a block drawn beside the thing, not the thing sitting above the ground. Depth is the surface
       step (paper on the ground, RESKIN_CONTROLS rule 3; DESIGN_JITSU trap 3) and a shadow only on
       the one thing lifted over the page (the sheet, rule 2). A filled accent control carries
       none: it is already the brightest thing on the screen. Pressed steps the colour; nothing moves.
     · the ink border on every filled thing: a border was doing a shadow's job (rule 1). Nothing
       filled carries a border; the hairline, 1px --gko-line, only where two surfaces of one value
       meet (the sheet's fold, the cassette's ribbon). The ghost is text now (rule 4).
     · the hard press (translate(2px,2px), translateY(2px)): pressed steps the colour one step
       and nothing moves (rule 5).
     · the tilt on .press, the gradient in the seal, the hex in .face .say: ornament that could
       not say what it was for, and a colour written by hand where the brief's own fault line is
       "a hand-written colour anywhere".
     · .tile, .vessel, .fillbar, .stamp, .flapline, .flap, .pips: zero consumers on the tree
       (grep over every page and script), so they went rather than being redressed.
   The findings written above the pieces (the mic-denial law, the door's ground, the disc's light,
   the quiet exit's hit area) all stand; only the paint changed. Before: formwork-hunter/reskin/
   before/ and CONTROLS_BEFORE.md, on 8cabe9dcb. The director's uncommitted pass on this file
   (13:12) was read once and reached the same shape; this is one hand's file, VALE 13:15. ══ */

/* ── .pill — the small brand/context marker (top-left, never critical) ── */
.pill{display:inline-flex;align-items:center;gap:5px;
  font:700 12px/1 var(--s-body);color:var(--gko-ink);
  padding:7px 12px;border:0;border-radius:var(--r-pill);
  background:var(--gko-paper)}   /* a tier, no shadow: a marker does not float (DESIGN_JITSU trap 3) */
.pill b{color:var(--gko-act)}
/* ── .home — the venue's mark on a room that carries no shell bar (keynote, bid, true, say-back; shows and
   tapes declare it too and the bar covers them). Six pages declared the same rule privately, two without the
   tap height, and all six wore the marker's pill. One class now, in the shell brand's own shape (the display
   face at the reading size, the mark in the room's act), on the kit's smallest radius and its surface, because
   the mark sits over a photograph in three of the four rooms that draw it: measured behind it, bid a sky at
   192,225,244, true 255,246,223, say-back 240,235,252, keynote a dark 21,20,19. Queue row 80. ── */
.home{ position:fixed; left:var(--sp-3); top:var(--sp-2); z-index:9; display:inline-flex; align-items:center;
  gap:var(--sp-1); min-height:var(--tap); padding:var(--sp-1) var(--sp-2); text-decoration:none;
  font:800 var(--t-read)/1 var(--gko-disp); color:var(--gko-ink);
  background:var(--gko-paper); border-radius:var(--r-sm); }
.home .lf{ color:var(--gko-act); }   /* the mark takes the room's act (MARKS.md: the mark takes the
   room's colour). A graphic, so the 3:1 shape floor applies, not the 4.5 text floor. The six pages
   wrap the bare ◡ in this span so CSS can reach it; queue row 105. */
.home b{ color:var(--gko-ink); }   /* the name is text and reads in ink; the act fill is ~3.05:1,
   not a text grade. One reading now, the shell's own: mark in act, name in ink. */

/* ── .cta — THE button. Full-width, bottom-center, one grammar (kills the 3 forks) ── */
.cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  font:600 17px/1 var(--s-body);color:var(--gko-ink-on-fill);
  background:var(--gko-act);
  border:0;border-radius:var(--r-md);padding:14px 16px;
  box-shadow:none;cursor:pointer;
  transition:background var(--dur) var(--ease)}
.cta:hover,.cta:active{background:color-mix(in srgb, var(--gko-act) 86%, white)}
.cta:disabled,.cta[aria-disabled="true"]{background:var(--gko-paper);color:var(--gko-ink2);opacity:1}
.cta[aria-busy="true"]{background:var(--gko-act);color:var(--gko-ink-on-fill);opacity:1;cursor:progress}
.cta--paper{color:var(--gko-ink);background:var(--gko-paper)}
.cta svg{flex:none}

/* ── .chip — a small labelled act (repair move, context offer) ── */
.chip{display:inline-flex;align-items:center;gap:7px;
  font:600 12.5px/1 var(--s-body);color:var(--gko-ink);
  padding:9px 12px;border:0;border-radius:var(--r-pill);
  background:var(--gko-paper);cursor:pointer}
.chip img{width:22px;height:22px;border-radius:6px;object-fit:cover}
.chip--hot{background:color-mix(in srgb, var(--gko-act) 16%, var(--gko-paper))}

/* ── .face — the speaking card (the character IS the status display) ── */
.face{border:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--gko-paper);position:relative}
.face img{width:100%;display:block;object-fit:cover}
.face .say{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;
  background:var(--gko-paper);border:0;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 3px;
  padding:7px 10px;font:700 12.5px/1 var(--s-disp);color:var(--gko-ink)}
.face .say .spk{color:var(--gko-act);display:flex}

/* ── .bar — session progress. Fills forward only; never moves backward ── */
.bar{height:6px;border:0;border-radius:var(--r-pill);
  background:var(--gko-paper);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gko-act);border-radius:var(--r-pill)}

/* ── .door — a room's entrance on a composed field (never a nav tab).
   ONE grammar (2026-08-06, K-P1): the walk's door replaced the old slot-based block; dark
   old-arc consumers adopt this physics at their pipeline refit (ledger escort). ── */
/* THE DOOR'S GROUND IS ITS ROOM'S LIGHT, AND THAT PAINT LIVES HERE (2026-09-05). catalog.html
   was declaring `.door{ background; border-color }` of its own, which is a second paint definition
   of a kit block and exactly what kit-gate G5 forbids. It passed for weeks only because G5 reads
   the FIRST `.door {` line in a page and an earlier `.door{ --lit: }` line was standing in front
   of it; the moment that line changed shape the paint underneath became visible. The gate was
   right and had been blind, so the fix is to move the paint rather than to restore the screen.
   THE LIGHT'S MIX WENT WITH THE RESKIN (2026-09-17): `--lit` was read here with a fallback and set
   by no page on the tree (measured: zero setters outside this file), so the mix was paper into
   paper everywhere, and the seven lights are one accent now. The door is a card: a surface tier
   on the ground, the low shadow, no line. */
.door{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-decoration:none;
  color:var(--gko-ink); background:var(--gko-paper); border:0;
  border-radius:var(--r-md); padding:14px 14px 12px;
  transition:background var(--dur) var(--ease); }
.door:hover, .door:active{ background:color-mix(in srgb, var(--gko-ink) 6%, var(--gko-paper)); }
.door .g{ font-size:26px; line-height:1; color:var(--gko-ink2); }
.door .t{ font-family:var(--gko-disp); font-weight:700; font-size:15.5px; line-height:1.15; }
/* THE FINEPRINT REGISTER, AND IT IS ACTUALLY FINEPRINT: a fact about the room, never a warning
   and never an apology. It sits beside the name because that is where a person decides. */
.door .ear{ margin-left:-3px; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--gko-ink2); vertical-align:1px; }
.door .s{ font-size:12.5px; color:var(--gko-ink2); font-weight:500; line-height:1.3; }
.door.wide{ flex-direction:row; align-items:center; gap:12px; }
.door.wide .t{ font-size:17px; }
.door--big .dt{font:700 13.5px/1.2 var(--s-disp);color:var(--gko-ink);margin-top:7px}

/* ── .sndpill — the sound contract (2026-07-22): any room that MAKES sound wears it.
   Plain variant = "this plays sound" (so nobody gets surprised on a quiet bus);
   .need variant = the ear rooms — the training itself needs ears, said honestly.
   Rooms that only play on tap wear nothing (tapping play is consent). ── */
/* the notice is a plate, not a badge: the kit's smallest radius and the label rung, and it keeps its ground
   because on three of the four rooms that wear it the thing behind is a photograph (queue row 80) */
.sndpill{position:fixed;right:var(--sp-3);top:var(--sp-2);z-index:9;display:inline-flex;align-items:center;gap:var(--sp-1);
  border:0;border-radius:var(--r-sm);background:var(--gko-paper);padding:var(--sp-1) var(--sp-2);
  font:600 var(--t-label)/1 var(--gko-body);color:var(--gko-ink2)}
.sndpill svg{width:13px;height:13px;color:var(--gko-ink2)}
.sndpill.need{color:var(--gko-ink)}
.sndpill.need svg{color:var(--gko-act)}

/* ── keyboard focus — one visible grammar everywhere ── */
/* THE RING IS THE ROOM'S ACT (2026-09-17, Tungsten 3, measured 14:05: on 16 of 26 focused controls the
   ring painted uni's --red at 1.9:1 on the ground, under WCAG 1.4.11's 3:1, because --focus is set at
   :root for the uni livery and re-set only under [data-skin="ginko"], which no Ginko page carries).
   A Ginko body sets --focus to its act, which every light carries at 4.4:1 or better on the ground
   (Tungsten 1), and tokens.css's shared rule paints it. The rule below is the same ring for anything
   the shared rule's selector misses (an input, a contenteditable); it was 3px of the stop colour. */
body[data-light], body[data-shell="bare"], body.gko, [data-skin="ginko"]{ --focus:var(--gko-act); }   /* sign in carries a light and neither shell hook; the skinned pages (keynote, bid, sayback, true, shows) set --focus to the gold in tokens.css and read the face here instead, queue row 35 */
/* IN THE LIGHT FACE THE RING IS THE INK (2026-09-17 15:08, tungsten_states in UNI_MODE=light on cf43a4349): the
   light lamps' acts are pale by design and a ring in them read 2.0 to 2.8:1 on the light ground on the round,
   voices, level, the ticket, the catalog (WCAG 1.4.11 asks 3:1; 2.4.13 asks 3:1 against the unfocused state,
   and on the act itself the ring in the act's colour is 1:1). The ink is 16:1 on the light ground and 8:1 on
   any act. In the dark face the act stays the ring, 4.4:1 or better on the ground (Tungsten 1). */
:root[data-mode="light"] body[data-light], :root[data-mode="light"] body[data-shell="bare"], :root[data-mode="light"] body.gko, :root[data-mode="light"][data-skin="ginko"]{ --focus:var(--gko-ink); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* ── THE FAULT ON A FIELD (2026-09-17, queue item 2; Tungsten 3): the one error state, drawn once.
   Measured before this existed: no input on any page had a rendered error state, and the ticket
   answered a wrong card under the button. The field's hairline turns the stop colour and one line
   of words sits under the field it concerns, in the stop colour at the reading size (#E1533A on
   the ground 4.5:1); nothing moves and nothing shakes. aria-invalid IS the state, so a screen
   reader and this sheet read the same fact; the page sets it and clears it on the next keystroke. */
body input[aria-invalid="true"], body textarea[aria-invalid="true"]{ border-color:var(--gko-red); }   /* `body` so the state outranks a page's own `.find input` hairline (measured: without it the ticket's field stayed grey) */
body input[aria-invalid="true"]:focus-visible, body textarea[aria-invalid="true"]:focus-visible{ outline-color:var(--gko-red); }
.fault{ font:500 var(--t-read)/1.4 var(--gko-body); color:var(--gko-red); margin-top:var(--sp-1); text-align:left; }
.fault:empty{ display:none; }

/* ══ THE GINKO WALK KIT (WORLDBUILDING_JITSU 2026-07-31) — every block defined ONCE.
   Pages compose these; a page redefining any of them is a broken world-fact. ══ */
.kick{ font:600 12px var(--gko-body);
  color:var(--v-room-mark, var(--gko-ink2)); }   /* the room's mark: the quiet ink in dark, the room's act at text grade in light (queue row 25) */
/* the kicker carries NO bullet (GD01: red means something is alive NOW; a dot that marks
   nothing is a lie about the shape). A room that IS live wears .kick.live, and only then. */
.kick.live::before{ content:""; display:inline-block; width:.5em; height:.5em; border-radius:50%;
  background:var(--gko-red); margin-right:.5em; vertical-align:.05em; }
/* THE ACT IS THE ONE COLOURED THING ON ITS SCREEN (RESKIN_BRIEF: "one accent, used for the act;
   everything else is ground and type"), and the screen's accent is its room's light (GD01 7, the
   seven data-light rules at the foot of this file; tokens.css reads --accent from --gko-act). The
   button is a filled pill with no line, one step above the ground; hover rises to --accent-hi and
   one shadow up; pressed goes to --shadow-0 and nothing moves. */
/* RESKIN_CONTROLS rule 5, to the value: full width inside the gutters, 52px, --r-md, the act's
   fill, its ink at 17px/600, no border, no shadow (it is already the brightest thing on the
   screen, rule 2). Pressed steps the colour and nothing moves. Disabled is 40%, no colour change. */
[data-mode="light"] .go{ box-shadow:var(--gko-shadow-sm); }   /* in daylight the act stands off the wall by its shadow, not by its value (Tungsten 1, his word 16:40) */
.go{ font:600 17px/1 var(--gko-body); color:var(--gko-ink-on-fill); background:var(--gko-act);
  border:0; border-radius:var(--r-md); padding:14px 24px; min-height:52px; width:100%;
  cursor:pointer; box-shadow:none; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; box-sizing:border-box;
  transition:background var(--dur) var(--ease); }
.go:hover, .go:active{ background:color-mix(in srgb, var(--gko-act) 86%, white); }
/* DISABLED AND LOADING ARE TWO STATES (VALE's ruling 16:12 on queue row 32; RESKIN_CONTROLS rule 5's named
   case). Disabled, "you cannot do this": the surface step with the second ink, no act colour, opacity 1.
   It was 40% opacity, which with the opacity composited read 1.47:1 in the dark face and 2.4:1 in the
   light (tungsten_states, 15:03 and 15:20): exempt under WCAG 1.4.3 and gone from the screen all the
   same, on the buying page where the disabled act is the thing a person waits on. Loading, "you did it
   and we are working": the control is still the live thing, so it keeps the act's fill and shape,
   changes its label and carries aria-busy. A page that dresses a wait as disabled tells a buyer the
   press did not take. */
/* the next room's name inside the act ("One more → Echo alley", the round's close and every room's
   end since GKO.offer): the act's own ink, quieter, at the label size */
.go .keep{ color:inherit; opacity:.72; font-size:13px; }
.go:disabled, .go[aria-disabled="true"]{ background:var(--gko-paper); color:var(--gko-ink2); opacity:1; cursor:default; }
.go[aria-busy="true"]{ background:var(--gko-act); color:var(--gko-ink-on-fill); opacity:1; cursor:progress; }
/* every other action is text (rule 4): the ground's ink at 16px, no box, no line, no shadow */
.go.ghost{ background:none; color:var(--gko-ink); box-shadow:none; border:0; font-size:16px; width:auto; }
.go.ghost:active{ background:color-mix(in srgb, var(--gko-ink) 8%, transparent); }
/* the hover wash only where a pointer can hover (the outside eye's HOLD on a2bfc489a: a touch screen's sticky :hover left
   the consent's yes washed under the finger that had just pressed the round's act, so the yes read heavier than the no) */
@media (hover:hover){ .go.ghost:hover{ background:color-mix(in srgb, var(--gko-ink) 8%, transparent); } }
/* A CHOICE OF THREE IS NOT THREE TEXT LINKS (queue row 114, ruled 2026-09-18 by this seat under
   RESKIN_CONTROLS rules 3 and 4; the finder was Myosin Torque, off the step-off row 111 shipped).
   Rule 4 says every action that is not THE act is text, and the step-off's three obeyed it to the
   letter: no edge, no fill, at the weight of a heading and alone on the stage, which a stranger
   reads as a list of names rather than as three doors. Rule 3 is the way out and it is already how
   the catalogue draws a door: ELEVATION IS THE SURFACE STEP, not a border and not a second accent.
   So these sit on the surface the way a card does, the one accent on the screen stays on the act,
   and nothing new is invented. The name in the ink, the move under it in the quiet ink. */
.go.stack{ background:var(--gko-paper); color:var(--gko-ink); border-radius:var(--r-md); width:100%; box-shadow:none; }
.go.stack span{ font-weight:500; font-size:var(--t-label); color:var(--gko-ink2); }
.go.stack:hover, .go.stack:active{ background:color-mix(in srgb, var(--gko-ink) 8%, var(--gko-paper)); }
/* in daylight a card stands off the wall by its shadow, not by its value (Tungsten 1), the same way
   the act does one rule above; the two light grounds are a step apart and the step is quiet */
[data-mode="light"] .go.stack{ box-shadow:var(--gko-shadow-sm); }
/* EVERY CONTROL ANSWERS A POINTER (queue row 115, 2026-09-18, measured at 1280 in both faces: the act
   and the scene's card answered and ten controls did not, among them the record disc, the play chip,
   the quiet ways and the way out). A desk has a pointer and a phone does not, so this is the desk's
   half of "a control says it can be pressed"; it is the same 8% ink wash the ghost takes, and the
   filled circles take the act's own step, so nothing new is invented and no control moves. */
.quietlink:hover, .floor:hover, .press:hover{ background:color-mix(in srgb, var(--gko-ink) 8%, transparent); }
.playdot:hover, :hover > .playdot{ background:color-mix(in srgb, var(--gko-ink) 16%, var(--gko-paper)); }
.playdot.lit:hover, :hover > .playdot.lit, .rec:hover{ background:color-mix(in srgb, var(--gko-act) 86%, white); }
/* a chip inside a pressed panel answers for the panel, the way :active > .playdot already does (the round's
   hear row: the chip carries pointer-events:none and the panel is the control) */
.go.big{ font-size:17px; }
.go.sm{ font-size:15px; padding:9px 16px; min-height:48px; width:auto; }
/* A QUIET EXIT IS QUIET IN COLOUR, NEVER IN HIT AREA (2026-09-03). Measured at 390x844 from
   computed styles, every escape in the product was 17 to 20 CSS pixels tall while every primary
   action cleared 44: "type it instead" 83x17, "See what is on" 358x17, "straight to the doors"
   136x17, the club's recovery link 354x17. WCAG 2.2 SC 2.5.8 puts the floor at 24 and this
   house's own token comment holds 44.

   THE WAY OUT WAS THE SMALLEST TARGET ON EVERY SCREEN, and the worst instance is the one that
   matters most: "type it instead" is the door handed to somebody whose microphone has just
   failed — the one control that still works when the room does not — and it was the hardest
   thing on the page to hit. The spec's inline exception does not cover any of them: not one sits
   inside a sentence.

   Nothing changes in colour, weight or wording. The text stays exactly where it is; the box
   around it becomes a button's. inline-flex rather than inline so the height is real — an inline
   box ignores min-height, which is why these were 17px while carrying padding. */
/* EVERY OTHER ACTION IS TEXT (RESKIN_CONTROLS rule 4, 2026-09-17): the ink at 16px, no box, no
   underline. It was 13px ink-2 underlined, a link's costume on a control; the hit area above stays. */
.quietlink{ font:500 16px var(--gko-body); color:var(--gko-ink); text-decoration:none;
  cursor:pointer; background:none; border:0; border-radius:var(--r-sm);
  transition:background var(--dur) var(--ease);
  display:inline-flex; align-items:center; min-height:var(--tap, 44px);
  padding-left:6px; padding-right:6px; }
/* THE MIRROR (ginko/ear.js, 2026-09-15): what the room heard, one line, and the prompt to say it
   once more, which is the kit's own .quietlink. Ink, never a colour that could read as a mark. */
.mirror{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }   /* sits the way its room sits */
.mirror-line{ font:500 17px/1.35 var(--gko-body); color:var(--gko-ink); max-width:32ch; text-align:inherit; }
.mirror .quietlink{ align-self:inherit; justify-content:inherit; }
/* THE LINE SAID BACK (ginko/ear.js Ear.back, 2026-09-15): the cast's line once more, then the mic.
   One row, the play chip beside the record button, in the rooms that only listened. */
.back-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }
.back-row .playdot{ width:56px; height:56px; font-size:24px; }
/* the way out is an action too (rule 4): 16px ink, the arrow kept because it says where */
/* the wash is drawn on the words, so the plate under a pointer is the word's own box and not a tall one
   with the words low in it (Keratin's grade, debt 2: 112x48 with 26 of top padding and none at the foot,
   the words 69x21). The 26 that pushed the way out off the block above is a margin now, which is what it
   was doing, and the padding is the word's own on all four sides. */
.floor{ margin-top:auto; margin-block-start:26px; padding:var(--sp-2) 12px; font:500 16px var(--gko-body);
  color:var(--gko-ink); text-decoration:none; align-self:auto; border-radius:var(--r-sm);
  transition:background var(--dur) var(--ease);   /* the way out hangs where the column hangs
  (queue row 29, rule 9): a sheet centres its column and the way out with it; a stage hangs everything on
  the left margin and the way out too. align-self:center stood here and centred it under left-hung columns. */
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }   /* and 44 wide: the keynote gate's door-mark floor measured 42x44 (tungsten, WCAG 2.5.5) */
.floor::before{ content:"\2190\00a0"; }
/* THE WAY TO THE ROOMS IS THE DOOR MARK (2026-09-23, Cochlea's ruling, the round's and first words' floor; row 16,
   2026-10-20): a mark in the floor draws the four-rooms grid without the exit arrow (`←`) that made blind graders on 3
   of 4 big rooms read the floor as "leave" rather than "all the rooms". */
.floor > svg:only-child, .floor > [data-gi]:only-child{ font-size:28px; }
.floor:has(> svg, > [data-gi])::before{ content:none; }
/* THE MICROPHONE'S ANSWER BESIDE THE WAY OUT (Axon Tempest's ruling, 2026-09-28): a room's floor and the slot mic.js
   fills share one row, so the control that changes how the room hears you sits where a person already looks to leave.
   The row takes the floor's grounding (margin-top:auto) and the floor inside it gives its own up. */
.floorrow{ margin-top:auto; margin-block-start:26px; display:flex; align-items:center; gap:var(--sp-3); }   /* the next step up from the door's own 8.5 (the grader's debt 3) */
.floorrow > .floor{ margin:0; }
.micanswer{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 var(--sp-2);
  border:0; background:none; color:var(--gko-ink2); border-radius:var(--r-sm); cursor:pointer; transition:background var(--dur) var(--ease); }
.micanswer{ gap:10px; font-family:inherit; }   /* a button does not inherit the page's face on its own */
.micword{ font-size:15px; font-weight:600; }
.micswitch{ position:relative; flex:none; width:52px; height:30px; box-sizing:border-box; border:2px solid currentColor; border-radius:var(--r-pill); }
/* the knob is ink when off and the page when on; it carries no mark, so it never sets its own colour (86780dd42 set it
   to the page for the mic it held, and off, background:currentColor then drew the knob in the page's colour: gone) */
.micknob{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:currentColor;
  transition:transform var(--dur) var(--ease); }
.micanswer[data-on="1"]{ color:var(--gko-ink); }
.micanswer[data-on="1"] .micswitch{ background:currentColor; }
.micanswer[data-on="1"] .micknob{ transform:translateX(22px); background:var(--gko-bg); }
@media (hover:hover){ .micanswer:hover{ background:color-mix(in srgb, var(--gko-ink) 8%, transparent); } }
.micanswer:focus-visible{ outline:2px solid var(--gko-ink); outline-offset:2px; }
/* the play chip is a CIRCLE (GD01: the gathering, the thing that goes round), a surface tier
   with the ink mark on it. It is NOT lit: the accent marks the ONE act a screen is asking for,
   and on most screens that act is the .go, not the offer to hear something again. A room where
   playing IS the single act adds .lit, and then nothing else on that screen may carry the accent. */
.playdot{ display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--gko-ink) 10%, var(--gko-paper));
  border:0; box-shadow:none; cursor:pointer; color:var(--gko-ink);
  transition:background var(--dur) var(--ease); }
/* and the same step when the chip is the mark inside a wider pressed control (the round's .hear
   panel: the whole cue is the button and the chip has no pointer events of its own) */
.playdot:active, :active > .playdot{ background:color-mix(in srgb, var(--gko-ink) 16%, var(--gko-paper)); }
.playdot.lit{ background:var(--gko-act); color:var(--gko-ink-on-fill); }
.playdot.lit:active, :active > .playdot.lit{ background:color-mix(in srgb, var(--gko-act) 86%, white); }
.sheet{ width:100%; max-width:420px; background:var(--gko-paper); border:0;
  border-radius:var(--r-md); box-shadow:var(--gko-shadow); padding:26px 24px 20px; display:flex;
  flex-direction:column; gap:16px; align-items:center; }
.sheet i{ display:block; width:100%; height:0; border-bottom:1px solid var(--gko-line); }

/* ══ THE DRAWING-BOARD SPECIES (2026-08-06) — graduated from the pure-prompt UI concepts
   (steal notes: /design/paint/uigen-sheet.html; tax per element: design/KIT_LEDGER.md).
   The concepts' layouts are the steal; their register never ships — a stamp carries OUR
   words (Kept, laughed, warm, brave), never scores, rewards, or purchase language. ══ */

/* .press — a state word (Kept, laughed, warm, brave). State, never a counter. It was a rubber
   stamp, tilted; the tilt said nothing about the state and went (RESKIN 2026-09-17). Off: the
   hairline and the second ink. On: the accent as a tint, the ink. */
/* A CONTROL IS NOT A BADGE (queue row 80, RESKIN_CONTROLS rule 9: a shape is on a screen because it means
   something, never because the screen looked empty). .press is a choice among two or three and it wore the
   marker's pill radius with a 12px label; it takes the kit's control radius and the reading size, and keeps
   its 44 target and its chosen state. */
.press{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:600 var(--t-read) var(--gko-body);
  color:var(--gko-ink2); background:var(--gko-paper); border:0;
  border-radius:var(--r-md); padding:9px 14px; min-height:44px; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.press svg{ width:14px; height:14px; }
.press:active{ background:color-mix(in srgb, var(--gko-ink) 8%, var(--gko-paper)); }
.press.on{ color:var(--gko-ink);
  background:color-mix(in srgb, var(--gko-act) 22%, var(--gko-paper)); }
/* and the set one answers too: its own tint one step on, since .press.on and .press:hover are the same
   specificity and the state would otherwise win by source order and say nothing back (queue row 115) */
.press.on:hover{ background:color-mix(in srgb, var(--gko-act) 34%, var(--gko-paper)); }

/* .cassette — a tape drawn as the object it is: the reel window (two hubs, one ribbon)
   above the label. .kept = the chosen one, gold-washed. */
.cassette{ border:0; border-radius:var(--r-md);
  background:var(--gko-paper); padding:12px; }
.cassette.kept{ background:color-mix(in srgb, var(--gko-act) 14%, var(--gko-paper)); }
.cassette .win{ display:flex; align-items:center; gap:12px;
  border:0; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--gko-ink) 7%, var(--gko-paper)); padding:7px 14px; }
.cassette .win i{ flex:none; width:22px; height:22px; border-radius:50%;
  border:0; background:var(--gko-ink2); position:relative; }
.cassette .win i::after{ content:""; position:absolute; inset:7px; border-radius:50%;
  background:color-mix(in srgb, var(--gko-ink) 7%, var(--gko-paper)); }
.cassette .win u{ flex:1; height:0; border-bottom:1px solid var(--gko-ink2);
  text-decoration:none; }

/* flat, one colour: the wax was a radial gradient pretending to be a material (RESKIN 2026-09-17) */
.seal{ display:inline-block; width:26px; height:26px; border-radius:50%; position:relative;
  background:var(--gko-act); border:0; }
.seal::after{ content:""; position:absolute; inset:7px; border-radius:50%;
  background:color-mix(in srgb, var(--gko-ink-on-fill) 55%, transparent); }

/* THE RECORD DISC (promoted 2026-08-19 — the two-use tax passed at FOUR consumers:
   audition, yesterday, drift, echo). THE one recording control of the walk: gold at rest,
   crossing-guard red while live; .on lands visible by law (an .on animation swap must never
   cancel the entrance fill — the bug that hid the button mid-record). */
/* THE RECORD DISC TAKES THE ROOM'S LIGHT, NOT THE HOUSE GOLD (2026-09-09). `.go` has read
   --gko-act all along, which is why 24 of the 33 rooms already carried their place colour without
   naming the token anywhere. This one was hardcoded to --gko-gold, so SEVEN rooms — echo, drift,
   audition, join, pitch, sayback, yesterday — showed the house colour on the single control that
   matters most in them. Found by rendering echo and seeing an amber mic in a room whose light is
   alley; no count would have shown it, because a shared class is a consumption that names nothing.
   `.rec.on` below stays on --gko-red: red there is the RECORDING STATE, not the room, and a state
   that changes colour from room to room is a state nobody can learn. */
/* the disc reads the one accent now (RESKIN 2026-09-17), the largest filled thing in the kit and
   the one with no line at all; live stays red, the recording state, the same in every room */
.rec{ width:84px; height:84px; border-radius:50%; background:var(--gko-act);
  border:0; display:grid; place-items:center;
  cursor:pointer; box-shadow:none; color:var(--gko-ink-on-fill); font-size:34px;
  transition:background var(--dur) var(--ease); }
.rec:active{ background:color-mix(in srgb, var(--gko-act) 86%, white); }
.rec svg{ width:34px; height:34px; }
/* after a no the disc is drawn off (mic.js marks the root): ink outline, no act fill, still a press that asks again */
html[data-mic="no"] button.rec:not(.on), html[data-mic="no"] button.rec:not(.on):hover, html[data-mic="no"] button.rec:not(.on):active{
  background:none; color:var(--gko-ink); box-shadow:inset 0 0 0 3px currentColor; }
.rec.on{ background:var(--gko-red); color:var(--gko-paper); animation:recpulse 1.2s ease-in-out infinite;
  opacity:1; transform:none; }
@keyframes recpulse{ 50%{ transform:scale(1.06) } }

/* THE MIC-DENIAL LAW (one line, one home — TIC_JITSU: two rooms typing the same sentence is a
   tic unless it is a declared law). A denied microphone never blocks a door: the room says this,
   in these words, and the player carries on out loud. */
.nomic{ font-size:13px; font-weight:500; color:var(--gko-ink2); max-width:30ch; line-height:1.5; }

/* THE ARRIVAL (consolidated 2026-08-20 — it was retyped in 19 rooms, which made it a tic and not
   a system: TIC_JITSU trap 2, fix it where the reflex lives). A room ARRIVES: a few elements come
   up in sequence, and that sequence says "this is the order to read me in". It is NOT a coat of
   motion for every node on the page. GD01's rule: if everything arrives, nothing arrives — cap the
   arrival at the elements that actually constitute the room's first breath. */
.enter{ opacity:0; transform:translateY(10px);
  animation:rise .5s var(--ease,cubic-bezier(.2,.7,.2,1)) forwards; }
.d1{ animation-delay:.12s } .d2{ animation-delay:.26s } .d3{ animation-delay:.42s }
@keyframes rise{ to{ opacity:1; transform:none } }

/* THE WORLD GROUND (consolidated 2026-08-20). Every room stood on the same dusk gradient and the
   same desktop framing, retyped in 21 of 21 pages — the same decision made once and typed twenty
   one times, which is a tic with twenty one chances to drift (TIC_JITSU). It is one world, so it
   is one declaration: the walk's ground is here, and a room only says what makes IT different. */
body[data-shell="bare"], body.gko{
  /* the room's whole air carries its light, not a rumour of it at the top: the ground itself is
     tinted, and the lamp falls from above over half the room (GD01 §6 — "we need range") */
  /* the mix is computed HERE, on the body, not at :root — a custom property substitutes at the
     element where it is DECLARED, so a --gko-dusk defined on :root would resolve the light to
     its default before a room ever gets to override it (measured 2026-08-20) */
  /* THE LAMP DIMS, IT DOES NOT GO OUT (2026-09-03). He has rejected this ground four times —
     the last time as "ginko is either bland or yellow, not something you want to see daily".
     Both halves of that sentence matter: deleting the light would answer "yellow" by delivering
     "bland", which is the other thing he named.

     The amount was the fault, and it is arithmetic. Rendered ground was R−B +38, against Babbel
     at +7 and LinkedIn at +3 — and Babbel is a genuinely WARM ground, which is his own ruling
     that "it is never pure white". The model: rendered = mix% x peach(+105) + (1-mix) x bg. At
     16% and the old bg that predicts +37.8 and the screen measured +38, so the arithmetic is the
     ground rather than a theory about it.

     52% -> 18% and 16% -> 4%. The light still falls from above over half the room, which is the
     device GD01 asked for; it stops being the loudest thing in every room. */
  /* THE LAMP GOES BACK UP (2026-09-04). Yesterday I read "too much yellow" and turned the mix
     from 52/16 to 18/4 — which dimmed ALL SEVEN lights, including the six that were not yellow.
     Measured, the spread across the seven collapsed from 25.1 to 6.3: every room became the same
     room. That is the blandness, and it was my hand.
     The complaint was never the lamp's strength. 20 of the 33 rooms declare no light at all and
     fall to the default peach, so "all yellow" was the RANGE never being applied — and I answered
     it by flattening the thirteen rooms that had one. GINKO_DICTIONARY §6: "i am not okay with it
     being all yellow. we need range." Range, not restraint. */
  /* AND THE SAME RULING HERE, WHICH IS THE ONE A PHONE MEETS (2026-09-09). The wash was written
     twice: this base rule and a second inside @media (min-width:900px) below. Migrating only the
     second turned the desktop white and left every phone tinted, which is the width most people
     hold. Caught by rendering pocket at 390 and 1280 and finding one white and one still green.
     The comment above stays because its finding stands and is now history rather than mechanism:
     dimming the mix flattened all seven lights and made every room the same room. The range that
     paragraph is defending does not live in the ground any more, it lives in the room's ACTION,
     which is the one saturated thing on a white page. Same range, carried by a different object. */
  background:var(--v-ground);
  color:var(--v-on-ground); font-family:var(--gko-body);
  min-height:100dvh; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
@media (min-width:900px){
  /* ══ THE GROUND IS WHITE, AND IT WAS ONE LINE FOR 21 OF 33 ROOMS (2026-09-09, his ruling) ══
     This painted a per-room wash: --gko-light is SEVEN tints, not one, so the rooms were colour
     coded by place, and this rule carried that coding for two thirds of the product. Migrating it
     was a one-way door: one edit turns twenty-one rooms white at once and it is not reversible
     room by room, so it waited for him rather than happening as a side effect of whoever did the
     next room.
     WHAT WAS ACTUALLY LOST, sampled off rendered pixels rather than read off the tokens: 4 to 8
     points of chroma and 4 to 6 of lightness at the top of the page, fading to nothing by the
     middle. He was first shown the TINT TOKENS, L* 80-85 and chroma 15-23, which is about three
     times the real figure; the paint mixes them at 38% at the top and 11% flat. The correction did
     not change his ruling and it changed what the replacement had to beat.
     ROOM IDENTITY DID NOT GO WITH IT. --gko-act, set by the same data-light rules below, gives
     every room a per-place ACTION colour, and his ruling does not touch it. On a white ground the
     one saturated thing is the action, so the coding survives in the design's own vocabulary and
     nothing had to be invented. Those seven now emit rather than being paper colours; see
     tokens.css. */
  body[data-shell="bare"], body.gko{ background:var(--v-ground); }
}

/* WHO IS REFUSING (2026-09-03). Only the stranger's refusal wears this: everyone else is already
   inside and does not need telling where they are. */
.whois{ display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-3,16px);
  font-family:var(--gko-body); }
.whois b{ font-family:var(--gko-disp); font-weight:700; }
.whois span{ color:var(--gko-ink2); font-size:var(--t-fine,13px); }
.whysub{ color:var(--gko-ink2); max-width:30ch; margin-bottom:var(--sp-3,16px); }

/* a room declares its light on the body; the world ground (above) does the rest */
/* THE SEVEN LIGHTS STAND UNDER THE RESKIN (2026-09-17, Axon's 904eaa52a on the 08-20 and 09-09
   rulings, Keratin's read): one accent PER SCREEN, and the screen's accent is its room's act.
   tokens.css reads --accent from --gko-act, so every control below that reads --accent is lit by
   the room it stands in, and these seven lines are where the room says which. */
/* STAGE IS DECLARED, NOT ASSUMED (2026-09-04). It is the default, so it needed no rule, which
   meant any UNKNOWN value fell to it silently. band.html carried data-light="gold",
   undictionaried, and rendered as the default while reading as though it had a light of its
   own. A default nothing declares is a default that hides every typo pointing at it. */
body[data-light="stage"]{ --gko-light:var(--gko-l-stage,var(--gko-bg)); }
body[data-light="alley"] { --gko-light:var(--gko-l-alley); --gko-act:var(--gko-a-alley); }
body[data-light="garden"]{ --gko-light:var(--gko-l-garden); --gko-act:var(--gko-a-garden); }
body[data-light="sky"]   { --gko-light:var(--gko-l-sky); --gko-act:var(--gko-a-sky); }
body[data-light="grape"] { --gko-light:var(--gko-l-grape); --gko-act:var(--gko-a-grape); }
body[data-light="teal"]  { --gko-light:var(--gko-l-teal); --gko-act:var(--gko-a-teal); }
body[data-light="ember"] { --gko-light:var(--gko-l-ember); --gko-act:var(--gko-a-ember); }