/* =============================================================================
   home.css — THE DOMAIN DESK (the homepage only)
   -----------------------------------------------------------------------------
   Binding doc: tests/home/DESIGN-FINAL.md §9. Loaded after whois.css (and, on
   the dark page, after dark.css — tools/mkdark.py asserts that order), so the
   receiver, the report and the three instruments' tokens are whois.css's and
   everything here only arranges them.

   Every selector is scoped to .dx-home or to a .dx- class (the dx- prefix was
   free across site/ when this was written), so no other page changes.

   TOKENS ONLY. House tokens for the page (--paper --ink --ink-77 --ink-55
   --line --line-soft --accent --free --taken --unsure …); whois.css tokens for
   everything instrument-like (--wx-body --wx-face --wx-ink --wx-ink-2
   --wx-label --wx-mark --wx-ring --wx-warn --wx-bad --wx-r --wx-h …). This
   sheet defines no palette of its own: the six variety × edition palettes are
   whois.css's, and each readout below carries data-variety so they apply.

   BRAUN, which on this estate means FLAT: a 4px corner (var(--wx-r)) on every
   control, a chosen control differs by a SOLID INK FILL, labels in tracked
   capitals, one control height per row (var(--wx-h): 34px, 40px coarse). No
   999px anywhere in this file; the generator's four pill rules in site.css are
   squared in block 7. The house .mode-pill is the one pill left on the page.

   Blocks: 0 scope · 1 the desk and THEN ASK · 2 the idle catalogue · 3 the band
   scale · 4 the rack and its readout windows · 5 the Buy LCD · 6 the rules
   legend · 7 the generator, squared · 8 the reference folds · 9 responsive ·
   10 reduced motion · 11 print · 12 html[data-dark] answers.
   ========================================================================== */

/* ------------------------------------------------------------ 0. scope --- */
/* The band scale's plate title is an <h2> (a real heading for the section);
   it keeps the nameplate's type, not the house h2's. */
.dx-home h2.wx-plate__model { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; }

/* ------------------------------------------- 1. the desk and THEN ASK ---- */
.dx-home .dx-desk { padding-block: clamp(26px, 4vw, 52px) clamp(14px, 2vw, 24px); }
.dx-home .dx-desk .wx-hero__head .lede { font-size: .98rem; }

/* The plate key where /whois/ keeps its TOAST switch: the way to the
   receiver's own page. Hidden under 520px, where the VIP key covers it. */
.dx-own { height: 26px; padding: 0 .55rem; font-size: .625rem; letter-spacing: .14em; flex: 0 0 auto; }
.dx-own i { font-style: normal; }
.dx-own:hover, .dx-own:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* THEN ASK — the held name on a small display in the instrument's colours
   (T3 white, ET66 green-grey, AB1 black: --wx-face inside the console, which
   carries data-variety), then eight keys in four groups. */
.dx-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.dx-route > .wx-lbl--inline { flex: 0 0 auto; }
.dx-lcd-name {
    display: inline-flex; align-items: center; flex: 1 1 7rem; min-width: 7rem; max-width: 16rem;
    height: var(--wx-h); padding: 0 .65rem;
    background: var(--wx-face); color: var(--wx-ink);
    border: 3px solid var(--wx-body); border-radius: var(--wx-r); box-shadow: 0 0 0 1px var(--wx-ring);
    font-family: var(--wx-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0;
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-route:not([data-held="1"]) .dx-lcd-name { color: var(--wx-ink-2); font-weight: 500; }
.dx-route__grp { display: inline-flex; flex-wrap: nowrap; gap: 3px; padding-left: 8px; border-left: 1px solid var(--line); }
.dx-key {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: var(--wx-h); padding: 0 .5rem; min-width: 0;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
    white-space: nowrap; text-decoration: none;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--wx-r);
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.dx-key:hover, .dx-key:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dx-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-key[hidden] { display: none; }

/* ------------------------------------------- 2. the idle catalogue ------- */
/* /whois/'s "What a report holds" is twelve described cells. Here the same
   element (#wx-idle, still toggled by whois-ui.js) is the report's table of
   contents: one strip of twelve titles, so the band scale is in view at 1280.
   The descriptions stay on /whois/, which this block does not touch. */
.dx-home .wx-report { padding-bottom: clamp(18px, 2.6vw, 32px); }
.dx-home .wx-idle { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dx-home .wx-idle__head { padding: .6rem .9rem; }
.dx-home .wx-idle__head p { font-size: .8rem; }
.dx-home .wx-idle__item { padding: .55rem .9rem .6rem; }
.dx-home .wx-idle__item h3 { font-size: .84rem; margin: .1rem 0 0; }
.dx-home .wx-idle__item p { display: none; }
/* Twelve across only where "Registration" and "Nameservers" fit whole (a
   word is never split: at 1101-1259 they broke mid-word); below, 6 × 2. */
@media (min-width: 1260px) {
    .dx-home .wx-idle { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .dx-home .wx-idle__item { padding: .5rem .45rem .55rem; }
    .dx-home .wx-idle__item h3 { font-size: .76rem; line-height: 1.3; overflow-wrap: normal; }
}
@media (max-width: 900px) { .dx-home .wx-idle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dx-home .wx-idle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ 3. the band scale ------ */
.dx-home .dx-family { padding-block: 0 clamp(18px, 2.6vw, 30px); }
.dx-scale { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); overflow: hidden; }
/* .wx-panel (the carrier of the instrument tokens) also sets whois.css's
   panel padding; the scale and the rack units are boxes, not bands. */
.dx-scale, .dx-unit { padding-block: 0; }
.dx-scale .wx-plate { border-bottom: 1px solid var(--line); }
.dx-scale #dx-you { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A band: its id cell, then the stations and meters on a hairline ground
   (the 1px gap is the rule between cells, as in the idle catalogue). */
.dx-band { display: grid; grid-template-columns: 12.5rem repeat(4, minmax(0, 1fr)); gap: 0 1px; background: var(--line); border-top: 1px solid var(--line); }
.dx-scale .wx-plate + .dx-band { border-top: 0; }
.dx-band > * { background: var(--paper); min-width: 0; }
.dx-band__id { padding: .85rem .95rem; display: flex; flex-direction: column; gap: .3rem; }
.dx-band__n { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.dx-band__n i { font-style: normal; color: var(--wx-label); }
.dx-band__t { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.dx-band__q { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--ink-55); }
.dx-band__go {
    margin-top: auto; align-self: flex-start; font-size: .625rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.dx-band__go:hover { border-bottom-color: var(--ink); }
.dx-band__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* A station. The tuning scale runs across the top of every station at the
   same height, so each band reads as one continuous scale with 12px ticks. */
.dx-st {
    position: relative; display: flex; flex-direction: column; gap: .35rem;
    padding: 1.35rem .9rem .85rem; color: var(--ink-77); text-decoration: none;
    background-image: linear-gradient(var(--ink-55), var(--ink-55)),
                      repeating-linear-gradient(90deg, var(--ink-55) 0 1px, transparent 1px 12px);
    background-size: 100% 1px, 100% 5px;
    background-position: 0 .7rem, 0 calc(.7rem - 5px);
    background-repeat: no-repeat;
}
/* The needle: 2px of the variety's mark colour, through the scale. It rests on
   the tuned station (01) and moves to the one under the pointer or focus. */
.dx-st::before {
    content: ''; position: absolute; left: 1.55rem; top: .1rem; height: 1.05rem; width: 2px;
    background: var(--wx-mark); box-shadow: 0 0 0 1px var(--wx-ring);
    opacity: 0; transform: translateX(-6px);
    transition: opacity .2s var(--ease), transform .28s var(--ease);
}
.dx-st.is-tuned::before, .dx-st:hover::before, .dx-st:focus-visible::before { opacity: 1; transform: none; }
.dx-scale:has(.dx-st:hover, .dx-st:focus-visible) .dx-st.is-tuned:not(:hover):not(:focus-visible)::before { opacity: 0; }
.dx-st:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--wx-r); }
.dx-st__top { display: flex; align-items: center; gap: .45rem; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.dx-st__top em { font-style: normal; color: var(--wx-label); }
.dx-st__code { color: var(--ink); letter-spacing: .1em; }
/* The lamp: hollow until the receiver holds a name, then lit in the
   instrument's signal colour on every station at once. */
.dx-lamp { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--ink-55); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
#tools[data-held="1"] .dx-lamp { background: var(--wx-mark); box-shadow: 0 0 0 1px var(--wx-ring); }
/* The mark window: a small instrument face that takes the ink fill on hover. */
.dx-st__mark {
    display: flex; align-items: center; justify-content: center; height: 46px;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--wx-well); color: var(--ink);
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.dx-st__mark svg { display: block; width: 76px; height: 40px; overflow: visible; }
.dx-st:hover .dx-st__mark, .dx-st:focus-visible .dx-st__mark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dx-st b { display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.dx-st__p { font-size: .76rem; line-height: 1.42; color: var(--ink-55); }
.dx-st__src { margin-top: auto; padding-top: .15rem; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--ink-55); }

/* The marks' vocabulary: currentColor is the ink (it inverts with the hover
   fill), .m-sig the variety's signal, .m-q quiet, .m-warn/.m-bad lamps. */
.dx-st__mark .m-l  { stroke: currentColor; stroke-width: 1; fill: none; }
.dx-st__mark .m-q  { stroke: currentColor; stroke-width: 1; fill: none; opacity: .38; }
.dx-st__mark .m-f  { fill: currentColor; }
.dx-st__mark .m-fq { fill: currentColor; opacity: .3; }
.dx-st__mark .m-sig  { stroke: var(--wx-mark); stroke-width: 2; fill: none; }
.dx-st__mark .m-sigf { fill: var(--wx-mark); }
.dx-st__mark .m-warn { fill: var(--unsure); }
.dx-st__mark .m-bad  { fill: var(--taken); }
.dx-st__mark text { font-family: inherit; fill: currentColor; }
.dx-st__mark text.m-sigf { fill: var(--wx-mark); }

/* A meter: what this browser keeps, read from localStorage with no request. */
.dx-meter { padding: .85rem .95rem; display: flex; flex-direction: column; gap: .35rem; background-image: linear-gradient(var(--wx-well), var(--wx-well)); }
.dx-meter--2 { grid-column: span 2; }
.dx-meter__l { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.dx-meter__v { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.dx-meter__v div { min-width: 0; }
.dx-meter__v b { display: block; font-size: 1.55rem; font-weight: 200; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.dx-meter__v span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.dx-meter__s { margin: auto 0 0; font-size: .76rem; line-height: 1.45; color: var(--ink-55); }
.dx-meter__s b { color: var(--ink); font-weight: 600; }
.dx-glyphs { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .4rem 1.1rem; }
.dx-glyphs span { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.dx-glyphs i { font-style: normal; font-size: 2.1rem; font-weight: 300; line-height: 1; color: var(--ink); }
.dx-glyphs i.is-imp { color: var(--wx-label); }
.dx-glyphs small { font-size: .625rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* ---------------------------------- 4. the rack and its readout windows -- */
.dx-home .dx-rackband { padding-block: 0 clamp(36px, 5vw, 64px); }
.dx-rack { display: grid; gap: 10px; }
.dx-unit { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); }
.dx-unit__row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1.2fr) minmax(0, 1fr); }
.dx-unit__row > * { padding: .95rem 1rem; min-width: 0; }
.dx-unit__row > * + * { border-left: 1px solid var(--line); }
.dx-unit__h { margin: 0 0 .4rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 300; letter-spacing: -.028em; line-height: 1.2; color: var(--ink); }
.dx-unit__d { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); }
.dx-unit__ctl { display: flex; flex-direction: column; gap: .55rem; }
.dx-unit__ctl > .wx-lbl { margin: 0; }
.dx-unit__ctl > .wx-field { width: 100%; }
.dx-unit__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.dx-unit__line > .wx-lbl--inline { margin-right: .2rem; }
.dx-unit__links { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.dx-unit__note { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--ink-55); }
.dx-unit__note b { color: var(--ink); font-weight: 600; }
.dx-unit__note kbd { font-size: .66rem; border-radius: var(--wx-r); }
.dx-home .dx-unit__area { min-height: 5.2rem; }
.dx-glyph b { color: var(--ink); font-weight: 600; font-family: inherit; }
.dx-unit__out { display: flex; flex-direction: column; gap: .45rem; container-type: inline-size; }

/* The window — rack's graft: every readout is drawn in the receiver's chosen
   instrument. The casing is a frame of --wx-body, the glass --wx-face, the
   figures --wx-ink: T3's grey radio and white scale, ET66's umber and its
   green-grey LCD, AB1's black face. Its label sits on the page above it in
   --wx-label, the one variety colour that is text-safe on the page. */
.dx-win__l { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-label); }
.dx-win {
    display: flex; flex-direction: column; gap: .55rem; min-height: 6.2rem; padding: .7rem .8rem;
    background: var(--wx-face); color: var(--wx-ink);
    border: 5px solid var(--wx-body); border-radius: var(--wx-r); box-shadow: 0 0 0 1px var(--wx-ring);
}
/* Idle: the lamps dim; words and figures never fade (they stay >= 4.5:1). */
.dx-win[data-state="idle"] .dx-lamps { opacity: .55; }
.dx-win[data-state="idle"] .dx-read b { color: var(--wx-ink-2); }
.dx-read__msg { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--wx-ink); overflow-wrap: anywhere; }
.dx-read__msg b { font-weight: 700; }
/* A tone is a lamp beside the words, never coloured type: amber type on the
   ET66's green-grey glass would not be read. */
.dx-read__msg[data-tone]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 .45rem .08rem 0; border-radius: 1px; vertical-align: middle; background: var(--wx-warn); box-shadow: 0 0 0 1px var(--wx-ring); }
.dx-read__msg[data-tone="bad"]::before { background: var(--wx-bad); }
.dx-read__msg--page { color: var(--ink-77); }
.dx-read__src { margin: 0; font-size: .7rem; line-height: 1.45; color: var(--ink-55); }
.dx-read__src b { color: var(--ink-77); font-weight: 600; }
.dx-read__note { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--ink-77); }
.dx-read__note b { color: var(--ink); }
.dx-read { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.dx-read div { min-width: 0; }
.dx-read b { display: block; font-family: var(--wx-mono); font-size: 1.45rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--wx-ink); font-variant-numeric: tabular-nums; }
.dx-read span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-ink-2); }
/* One lamp per resolver: solid ink = agrees with the authority, half-lit
   amber in an ink ring = differs, hollow = no answer — three shapes, so no
   state rests on hue alone. Each is titled with the resolver's name and place. */
.dx-lamps { display: flex; flex-wrap: wrap; gap: 5px; }
.dx-lamps i { width: 12px; height: 12px; border-radius: 2px; background: var(--wx-line); }
.dx-lamps i[data-a="yes"] { background: var(--wx-ink); }
.dx-lamps i[data-a="no"] { background: linear-gradient(135deg, var(--wx-warn) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--wx-ink); }
.dx-lamps i[data-a="none"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wx-ink-2); }
.dx-grade { display: flex; align-items: center; gap: .8rem; min-height: 0; }
.dx-grade:empty { display: none; }
.dx-grade svg { width: 92px; flex: 0 0 auto; }
.dx-grade__l { font-size: 2rem; font-weight: 600; color: var(--wx-ink); }

/* ------------------------------------------------------ 5. the Buy LCD --- */
/* Always the ET66's display: umber casing, green-grey glass, dark figures.
   The trap is marked the way the calculator marks a key — a lit red cell —
   because red type on green-grey glass would not hold its contrast. */
.dx-lcd {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .8rem;
    padding: .55rem .7rem .5rem;
    background: var(--wx-face); color: var(--wx-ink);
    border: 6px solid var(--wx-body); border-radius: var(--wx-r); box-shadow: 0 0 0 1px var(--wx-ring);
}
.dx-lcd div { min-width: 0; }
.dx-lcd b { display: inline-block; max-width: 100%; font-family: var(--wx-mono); font-size: clamp(.8rem, 5.4cqi, 1.02rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--wx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-lcd span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-ink-2); }
.dx-lcd .is-trap b { padding: 0 .22rem; border-radius: 2px; background: var(--wx-bad); color: var(--wx-ink); }
.dx-lcd[data-state="idle"] b { color: var(--wx-ink-2); }
/* Sized by the readout column (.dx-unit__out is the container), not the
   viewport: the column is a third of the unit at 1001px+, half at 641-1000.
   Four across needs ~380px for 7-character figures ("$494.32"); home-desk
   marks data-wide when a figure is longer ("$25,751.80"), which needs ~480. */
@container (min-width: 380px) { .dx-lcd:not([data-wide]) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 480px) { .dx-lcd { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------- 6. the rules ------- */
.dx-rules .three { gap: 1.8rem 2.4rem; margin-top: 2.2rem; }
.dx-rules .pos h3 { font-size: 1.12rem; }
.dx-rules .pos p { font-size: .88rem; }
.dx-rules .pos em { font-style: normal; font-weight: 600; color: #fff; }
.dx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.dx-legend__l { margin-right: .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }

/* ------------------------------------------ 7. the generator, squared ---- */
.dx-facts { margin: .4rem 0 1.8rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.8; color: var(--ink-55); }
.dx-facts b { color: var(--ink); }
/* Every radius in the console to the estate's 4px. #generator in the selector
   out-ranks every house rule it replaces (site.css .seg__b / .seg--wide .seg__b
   / .sw / .st / .tbtn at 999px, .console 14px, .field 9px, .btn 8px …). */
.dx-home #generator .console,
.dx-home #generator .field,
.dx-home #generator .btn,
.dx-home #generator .seg__b,
.dx-home #generator .seg--wide .seg__b,
.dx-home #generator .sw,
.dx-home #generator .tbtn,
.dx-home #generator .st,
.dx-home #generator .dom,
.dx-home #generator .rec,
.dx-home #generator .ib,
.dx-home #generator .buy,
.dx-home #generator .social,
.dx-home #generator kbd { border-radius: var(--wx-r); }
/* The ending sets, the counts, the four switches and TOAST: 34px keys with
   tracked capitals — the WHOIS page's keys, arriving on this one. */
.dx-home #generator .seg__b,
.dx-home #generator .sw,
.dx-home #generator .tbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: var(--wx-h); padding: 0 .8rem; line-height: 1;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.dx-home #generator .sw { padding-left: .65rem; }
/* Chosen = a solid ink fill, hovered or not (dark.css's hover rules would
   otherwise paint ink type on the ink fill). */
.dx-home #generator .seg__b[aria-pressed="true"],
.dx-home #generator .seg__b[aria-pressed="true"]:hover,
.dx-home #generator .sw:has(input:checked),
.dx-home #generator .sw:has(input:checked):hover,
.dx-home #generator .tbtn[aria-pressed="true"],
.dx-home #generator .tbtn[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dx-home #generator .sw:has(input:checked) input { accent-color: var(--paper); }
.dx-home #generator .tbtn:focus-visible,
.dx-home #generator .seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A checked switch is an ink key, and the checkbox's own ring inside it fell
   below 3:1; the ring goes round the key, on the console ground, instead. */
.dx-home #generator .sw:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-home #generator .sw input:focus-visible { outline: none; }
/* The ending sets' counts (3 / 18 / 22 / 6 / 110): 10px, full strength. */
.dx-home #generator .seg__b small { font-size: .625rem; opacity: 1; color: var(--ink-77); }
.dx-home #generator .seg__b[aria-pressed="true"] small { color: inherit; }

/* ---------------------------------------- 8. the reference folds --------- */
.dx-home .dx-ref { padding-block: clamp(32px, 4.4vw, 56px); }
.dx-ref__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.dx-fold { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); min-width: 0; }
.dx-fold > summary {
    display: flex; align-items: center; gap: .8rem; min-height: var(--wx-h); padding: .3rem .4rem .3rem .9rem;
    list-style: none; cursor: pointer; user-select: none;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.dx-fold > summary::-webkit-details-marker { display: none; }
.dx-fold > summary::after {
    content: '+'; margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 1px solid var(--line); border-radius: var(--wx-r);
    font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--ink);
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.dx-fold[open] > summary::after { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dx-fold > summary:hover::after { border-color: var(--ink); }
.dx-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--wx-r); }
.dx-fold__b { padding: .2rem .9rem .95rem; }
.dx-fold__lede { margin: 0 0 .9rem; font-size: .86rem; line-height: 1.55; color: var(--ink-77); max-width: 62ch; }
.dx-fold .reg__row { grid-template-columns: 6.5rem minmax(0, 1fr); }
.dx-fold .reg__n { grid-column: 2; }
/* The five answers folded inside #welcome: the same fold, set in the console. */
.dx-fold--in { margin: .4rem 0 .9rem; }
.dx-fold--in > ul, .dx-fold--in > p { margin-inline: .9rem; }
.dx-fold--in > p:last-child { margin-bottom: .9rem; }

/* ------------------------------------------------------ 9. responsive ---- */
@media (max-width: 1100px) {
    .dx-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dx-band__id { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding: .7rem .9rem; }
    .dx-band__go { margin: 0 0 0 auto; }
}
@media (max-width: 1023px) {
    /* The label and the display on the first line, the keys wrapping below. */
    .dx-lcd-name { flex: 1 1 calc(100% - 8rem); max-width: none; }
    /* Wrapped groups start lines of their own, so the hairline between
       groups would stand at a line's start: here the gap alone divides them. */
    .dx-route { column-gap: 14px; }
    .dx-route__grp { padding-left: 0; border-left: 0; }
}
@media (max-width: 1000px) {
    .dx-unit__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-unit__row > :first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
    .dx-unit__row > :nth-child(2) { border-left: 0; }
}
@media (max-width: 760px) {
    .dx-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-meter--2 { grid-column: 1 / -1; }
    .dx-ref__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    /* The display beside its label, the eight keys a 4 × 2 bank below. */
    .dx-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .dx-route > .wx-lbl--inline { grid-column: 1; }
    .dx-lcd-name { grid-column: 2 / -1; max-width: none; min-width: 0; }
    .dx-route__grp { display: contents; }
    .dx-key { padding: 0 .3rem; letter-spacing: .06em; }
}
@media (max-width: 640px) {
    .dx-unit__row { grid-template-columns: minmax(0, 1fr); }
    .dx-unit__row > * + * { border-left: 0; border-top: 1px solid var(--line); }
    .dx-unit__row > :first-child { border-bottom: 0; }
}
@media (max-width: 520px) { .dx-own { display: none; } }
@media (max-width: 400px) {
    /* "DC-1000 Band scale · ten instruments" is 281px of nameplate: at 320
       it clipped. The heading wraps; the plate grows a line. */
    .dx-scale h2.wx-plate__model { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}
@media (max-width: 420px) {
    .dx-st { padding: 1.3rem .7rem .75rem; }
    .dx-st__p { display: none; }
    .dx-st__mark svg { width: 64px; height: 34px; }
    .dx-band__q { flex-basis: 100%; }
}
@media (max-width: 419px) {
    /* Two columns × four rows: at 320 a 4 × 2 bank clipped LOOK-ALIKES. */
    .dx-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-route > .wx-lbl--inline { grid-column: 1; }
    .dx-lcd-name { grid-column: 2; }
    .dx-fold .reg__row { grid-template-columns: minmax(0, 1fr); }
    .dx-fold .reg__n { grid-column: 1; }
}
@media (pointer: coarse) { .dx-own { height: 32px; } }

/* -------------------------------------------------- 10. reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .dx-key, .dx-own, .dx-st::before, .dx-st__mark, .dx-lamp, .dx-fold > summary::after { transition: none !important; }
}

/* ------------------------------------------------------------ 11. print -- */
/* whois.css already prints only the report and hides .wx-hero, every
   .wx-panel (the band scale, the rack) and the footer. With a report on
   screen, only the report prints; without one, the generator's list prints
   as it always has. html.wx-printing (the export bar's PDF / PNG) is the
   report alone, as on /whois/. */
@media print {
    .dx-family, .dx-rackband, .dx-route { display: none !important; }
    /* The rules band and the closed folds are page furniture, never print. */
    body.dx-home :is(.dx-rules, .dx-ref) { display: none !important; }
    body.dx-home:has(#wx-stage:not([hidden])) #generator { display: none !important; }
    /* whois.css prints the report's colours exactly (on body, inherited). The
       generator's list prints as it did before the desk: the reader's
       "background graphics" setting decides, and without it the browser
       drops the grounds and darkens light type (the moon edition included). */
    body.dx-home #generator { -webkit-print-color-adjust: economy; print-color-adjust: economy; }
    .dx-fold { border: 0; }
}
html.wx-printing .dx-family, html.wx-printing .dx-rackband, html.wx-printing .dx-rules,
html.wx-printing #generator, html.wx-printing .dx-ref { display: none !important; }

/* ----------------------------------------- 12. html[data-dark] answers --- */
/* Everything above reads a token, so the moon side is already answered by
   dark.css (the house tokens) and whois.css (the six instrument palettes).
   What is left is the rules band's emphasis, which is written as #fff there
   (the band is the deep ground on both editions), and one ring: on the moon
   the ET66 casing and the AB1 face sit close to the ground, so the LCD, the
   windows and the name display take the lighter ring whois.css gives the
   moon varieties, made a step stronger. */
html[data-dark] .dx-home .dx-lcd,
html[data-dark] .dx-home .dx-win,
html[data-dark] .dx-home .dx-lcd-name { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-dark] .dx-home .dx-rules .pos em { color: #fff; }