/* =========================================================================
 * components/theme-wizard-panel.css — Build a theme (#163, under #159).
 *
 * EVERY COLOUR HERE IS A --te-* TOKEN, and that is a hard rule rather than a
 * convention. This panel previews the page palette live, on the real page, so
 * a single var(--mt-*) would paint the wizard black at the exact moment
 * somebody previewed a near-black ground — and the Cancel that undoes it
 * would be the first thing to go. The seven --te-* literals are declared once,
 * in themes/default/theme.css, beside .manifold-theme-editor and
 * .msp-panel--page; .msp-panel--wizard joins that same selector so there is
 * one place to change them. tests/163-wizard-preview.test.js fails on one
 * var(--mt-*) in this file.
 *
 * The one deliberate exception is font-family, which reads the previewable
 * --m-font-* the way .manifold-theme-editor already does. A previewed typeface
 * moving the panel's own text is #157, which is knowingly NOT fixed here
 * (BUILD-DECISIONS §4) — correcting it in passing would put this panel on a
 * different footing from the page reach beside it.
 *
 * Ported from the mockup Karl walked and accepted on 2026-08-10
 * (.scratch/style-wizard/proto-159-wizard.html, the .wz-* block). Its --wz-*
 * names map onto --te-panel-*: bg, elev, fg, dim, line → border, accent. What
 * is NOT ported is the shell — .wz, .wz-grab, .wz-x — because the Style panel
 * supplies the float, the drag, the head and the close.
 * ========================================================================= */

/* ── the shell this mounts in ───────────────────────────────────────────────
 *
 * The Style panel is already a fixed, dragged, clamped flex column 300px wide
 * (.msp-panel in style-panel.css). Two things change while the wizard is the
 * reach on show, and neither is a new panel:
 *
 *   the width   382px, the mockup's. Screen one is two columns of look, and at
 *               300 the second column's name has nowhere to go. The panel
 *               measures itself for placement, so nothing else is told this.
 *   the palette The seven --te-* literals arrive from themes/default/theme.css,
 *               where .msp-panel--wizard joins the same declaration
 *               .manifold-theme-editor and .msp-panel--page already share. What
 *               is set here is the shell's own two surfaces reading them, so
 *               the head and the border stop reading --mt-* the moment the
 *               preview starts repainting those.
 * ------------------------------------------------------------------------ */

.msp-panel--wizard {
  width: 382px;
  background: var(--te-panel-bg);
  border-color: var(--te-panel-border);
}

.msp-panel--wizard .msp-header,
.msp-panel--wizard .msp-scope-note {
  color: var(--te-panel-dim);
}

.msp-panel--wizard .msp-header {
  border-bottom-color: var(--te-panel-border);
}

.mwz {
  display: flex;
  flex-direction: column;
  /* Fills what the panel's inline max-height leaves under the head, so the
     screen scrolls inside .mwz-body and the foot stays put. min-height:0 is the
     half that makes an overflowing flex child actually scroll instead of
     growing the panel past its cap. */
  flex: 1 1 auto;
  min-height: 0;
  font-family: var(--m-font-sans);
  font-size: 13px;
  color: var(--te-panel-fg);
}

/* ── the spine ─────────────────────────────────────────────────────────────
 *
 * Fourteen dashes read as "this is long". Six named runs read as "this is six
 * subjects and I am in the second", and the count is the same. The names are
 * the rail AND the way back to an earlier one.
 * ------------------------------------------------------------------------ */

.mwz-spine {
  padding: 10px 13px 0;
  flex: 0 0 auto;
}

.mwz-runs {
  display: flex;
  gap: 5px;
}

.mwz-run {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

/* A run ahead of the one you are in cannot be jumped to — the screens after a
   question are worked out from its answer — so it is not a target and does not
   pretend to be one. */
.mwz-run:disabled {
  cursor: default;
}

.mwz-run-bar {
  display: flex;
  gap: 2px;
}

.mwz-run-bar i {
  display: block;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--te-panel-border);
}

.mwz-run-bar i.is-done {
  background: color-mix(in srgb, var(--te-panel-accent) 50%, transparent);
}

.mwz-run-bar i.is-now {
  background: var(--te-panel-accent);
}

.mwz-run-name {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--te-panel-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mwz-run.is-now .mwz-run-name { color: var(--te-panel-accent); }
.mwz-run.is-past .mwz-run-name { color: var(--te-panel-dim); }

.mwz-run:not(:disabled):hover .mwz-run-name,
.mwz-run:not(:disabled):focus-visible .mwz-run-name {
  color: var(--te-panel-fg);
}

.mwz-step {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--te-panel-dim);
}

/* ── the screen ─────────────────────────────────────────────────────────── */

.mwz-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 3px 13px 8px;
}

.mwz-h {
  margin: 6px 0 5px;
  font-family: var(--m-font-display);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--te-panel-fg);
}

.mwz-p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--te-panel-dim);
}

.mwz-note {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--te-panel-dim);
}

.mwz-missing {
  padding: 14px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--te-panel-dim);
}

/* ── screen one: what to start from ─────────────────────────────────────────
 *
 * Two columns of colour, because the thing being chosen is a look. The name is
 * there to confirm the choice, not to make it.
 * ------------------------------------------------------------------------ */

.mwz-looks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mwz-look {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--te-panel-border);
  border-radius: 5px;
  background: var(--te-panel-bg-elev);
  color: var(--te-panel-fg);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.mwz-look:hover { border-color: var(--te-panel-dim); }
.mwz-look.is-on { border-color: var(--te-panel-accent); }

.mwz-look-bars {
  display: flex;
  flex: none;
  gap: 2px;
}

/* --mwz-bar is set inline per bar (the row's own ground, surface, accent and
   text). It is data, not chrome — the one thing in this panel that is SUPPOSED
   to be a previewable colour — so it arrives through a custom property rather
   than an inline `background`, the way --te-chip does in the theme editor. */
.mwz-look-bars i {
  display: block;
  width: 7px;
  height: 18px;
  border-radius: 2px;
  background: var(--mwz-bar, var(--te-panel-border));
}

.mwz-look-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mwz-look-mine {
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--te-panel-accent);
}

/* ── screens two and three: a ground, and an accent (#167) ──────────────────
 *
 * The mockup's four controls (.choices, .swatches, .adv and .nitem in
 * proto-159-wizard.html), ported onto the fixed palette. One departure from it,
 * and it is deliberate: the mockup lays the named colours out in two columns,
 * which had no advisory to place. The row here is the SHIPPED THEME EDITOR's
 * shape instead — one per line, swatch then name, with the warning beneath —
 * because a person may meet both in one session and a warning that looks
 * different in the two places reads as two different problems.
 * ------------------------------------------------------------------------ */

.mwz-lbl {
  display: block;
  margin: 13px 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--te-panel-dim);
}

/* One question, two or more answers, side by side. */
.mwz-choices {
  display: flex;
  gap: 6px;
}

.mwz-ch {
  flex: 1;
  padding: 8px 4px;
  border: 1px solid var(--te-panel-border);
  border-radius: 5px;
  background: var(--te-panel-bg-elev);
  color: var(--te-panel-fg);
  font: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.mwz-ch:hover { border-color: var(--te-panel-dim); }

.mwz-ch.is-on {
  border-color: var(--te-panel-accent);
  color: var(--te-panel-accent);
  background: color-mix(in srgb, var(--te-panel-accent) 12%, transparent);
}

/* A small set of good options, and the native picker that is the way out of
   it. The ring around the chosen one is drawn OUTSIDE the swatch so that the
   colour itself is never covered — the swatch is the answer, and a marker over
   the top of it changes what you are judging. */
.mwz-sw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mwz-sw {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  /* --mwz-sw is set inline per swatch. It is data — the swatch IS the colour —
     so it arrives through a custom property, the same way --mwz-bar does on
     screen one. */
  background: var(--mwz-sw, var(--te-panel-border));
  cursor: pointer;
}

.mwz-sw.is-on { border-color: var(--te-panel-fg); }

.mwz-sw.is-on::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--te-panel-fg) 35%, transparent);
}

/* Dashed, because it is the escape hatch rather than one of the six. */
.mwz-sw-any {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px dashed var(--te-panel-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.mwz-sw-any:hover { border-color: var(--te-panel-dim); }

/* ── Advanced ─────────────────────────────────────────────────────────────
 *
 * Shut by default: a worked-out value is right often enough that fifteen hex
 * boxes on screen would be answering a question nobody asked. The count on the
 * button is what keeps a shut disclosure from being a silent one.
 * ------------------------------------------------------------------------ */

.mwz-adv {
  margin: 15px 0 4px;
  padding-top: 11px;
  border-top: 1px solid var(--te-panel-border);
}

.mwz-adv-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--te-panel-accent);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.mwz-adv-caret {
  display: inline-block;
  transition: transform 0.12s ease-out;
}

.mwz-adv.is-open .mwz-adv-caret { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .mwz-adv-caret { transition: none; }
}

.mwz-adv-count {
  margin-left: auto;
  color: var(--te-warn);
  font-size: 11px;
}

.mwz-adv-body { margin-top: 10px; }

/* One worked-out colour and the way to disagree with it. The name wraps to its
   own line under the swatch only when the advisory is there to explain why. */
.mwz-nrow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  padding: 4px 0;
  font-size: 12px;
}

.mwz-nrow-pick {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--te-panel-border);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

.mwz-nrow-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mwz-nrow.is-warned .mwz-nrow-name { color: var(--te-warn); }

/* The theme editor's own advisory, in the theme editor's own colour and words
   (.manifold-theme-editor-slot-advisory in themes/default/theme.css). */
.mwz-advisory {
  grid-column: 2 / -1;
  font-size: 10px;
  line-height: 1.4;
  color: var(--te-warn);
}

/* ── the table of card parts (#168) ────────────────────────────────────────
 *
 * The mockup's .map / .mrow / .names block, ported onto --te-*. Two lists, one
 * under the other, and the split is the whole idea: the table says WHICH NAME
 * each part uses, and nothing in it is a colour. The colours live in the block
 * underneath, one copy, shared by everything pointing at them.
 *
 * The row is a three-column grid rather than the mockup's flex line, because
 * the panel is 382px and the part's example sits under its name: a flex row
 * with a wrapping first child pushes the select around as the text reflows,
 * and ten selects that do not line up read as ten different controls.
 * ------------------------------------------------------------------------ */

.mwz-map {
  border: 1px solid var(--te-panel-border);
  border-radius: 6px;
  overflow: hidden;
}

.mwz-map-h {
  display: grid;
  grid-template-columns: 1fr 132px;
  padding: 6px 9px;
  background: var(--te-panel-bg-elev);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--te-panel-dim);
}

.mwz-mrow {
  display: grid;
  grid-template-columns: 1fr auto 17px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-top: 1px solid color-mix(in srgb, var(--te-panel-border) 55%, transparent);
  font-size: 12px;
}

.mwz-mrow:hover { background: color-mix(in srgb, var(--te-panel-accent) 9%, transparent); }

.mwz-pn { min-width: 0; }

/* The example is the thing that makes a part recognisable without hunting for
   it on your own dashboard, so it sits under the name rather than beside it —
   quieter, and it never competes for the row's width. */
.mwz-pn em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--te-panel-dim);
}

.mwz-sel {
  width: 108px;
  padding: 3px 4px;
  border: 1px solid var(--te-panel-border);
  border-radius: 4px;
  background: var(--te-panel-bg);
  color: var(--te-panel-fg);
  font: inherit;
  font-size: 11.5px;
}

/* Not a control — the answer to "what colour is that, then", which the name
   alone cannot give. */
.mwz-puck {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--te-panel-fg) 22%, transparent);
  background: var(--mwz-puck, transparent);
}

.mwz-names {
  margin-top: 12px;
  padding: 9px;
  border: 1px solid var(--te-panel-border);
  border-radius: 6px;
}

.mwz-names-h {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--te-panel-dim);
}

.mwz-ngrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 9px;
}

.mwz-nitem {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}

/* A role or a state opens a picker. A plain colour and one of your own show the
   colour and nothing else — the first is the palette build's and no screen may
   move it, the second is edited by the control mounted directly below. The two
   are deliberately different on sight: a square you cannot press is what says
   "this one is not yours to change here". */
.mwz-nitem-pick {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--te-panel-border);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

.mwz-nitem-fixed {
  width: 22px;
  height: 20px;
  border: 1px dashed var(--te-panel-border);
  border-radius: 3px;
  background: var(--mwz-nm, transparent);
}

.mwz-nn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* How far a change to this name reaches — how many of the ten parts point at
   it. Monospaced so the column of numbers scans as a column. */
.mwz-used {
  font-family: var(--m-font-mono);
  font-size: 10px;
  color: var(--te-panel-dim);
}

/* The shipped own-colours control, mounted. It brings its own words and its own
   rows; what is set here is the seam it sits in, so it reads as the last row of
   this block rather than as a second panel dropped inside one. */
.mwz-own {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--te-panel-border) 55%, transparent);
}

/* ── the Type run: three screens, one typeface each (#169) ─────────────────
 *
 * The mockup's .fontrow, ported onto --te-*. Two lines per row: the family's
 * name, quietly, and under it the preview — set in that family, at a size you
 * can judge a typeface at, in the kind of text that slot actually paints.
 *
 * THE SAMPLE CARRIES THE FACE THROUGH A CUSTOM PROPERTY, --mwz-face, the same
 * way the swatches and the pucks carry a colour. The value is data (it IS the
 * typeface being offered) and the inline-aesthetics gate rejects a direct
 * font-family key in JSX.
 *
 * A row is a button because pressing it is the answer, like every other choice
 * in this panel.
 * ------------------------------------------------------------------------ */

.mwz-fonts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mwz-font {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--te-panel-border);
  border-radius: 5px;
  background: var(--te-panel-bg-elev);
  color: var(--te-panel-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mwz-font:hover { border-color: var(--te-panel-dim); }

.mwz-font.is-on { border-color: var(--te-panel-accent); }

.mwz-font-name {
  display: block;
  font-size: 11px;
  color: var(--te-panel-dim);
}

/* The one place in this panel where the page's own typography is allowed in.
   Everything else here is deliberately fixed (see the head of this file), but a
   list of typefaces that did not show the typefaces would be a list of names. */
.mwz-font-sample {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font-family: var(--mwz-face, inherit);
  font-size: 17px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One coarse notch family under Advanced: what it is called, and the notches
   it has as the same segmented row every other choice in this panel uses. */
.mwz-notch { margin-bottom: 10px; }

.mwz-notch-name {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  color: var(--te-panel-dim);
}

/* ── screens eight to eleven: the Cards run (#170) ──────────────────────────
 *
 * One new control on these four screens and no new vocabulary anywhere else:
 * the two colour names are the parts table's row, class for class, because a
 * name is picked the same way wherever it is asked for.
 * ------------------------------------------------------------------------ */

/* A number with a range, and the number said beside it.
 *
 * THE READOUT IS A FIXED COLUMN AND ITS DIGITS ARE ONE WIDTH. It changes under
 * the thumb the whole time you are dragging, so a proportional readout drags
 * the track sideways as `off` becomes `65%` — which is the same twitch the
 * Numbers screen's own sentence is about, in the one place a person is looking
 * straight at it. */
.mwz-slide {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mwz-slide-num {
  flex: 0 0 44px;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--te-panel-dim);
}

/* The Room screen's size readout says a word AND a percentage — "Expanded ·
   140%" — so it needs a wider column than a card slider's "65%". Still a FIXED
   one, and for the same reason: it changes under the thumb the whole time you
   are dragging, and a column that grew with it would drag the track sideways
   between "86%" and "Expanded · 140%". */
.mwz-slide-num.is-wide { flex: 0 0 118px; }

/* The track and the thumb are drawn rather than left to the browser, because
   the panel's palette is fixed (--te-*) and a stock range control paints
   itself from the page — the one thing every control in this file is written
   not to do while the page is being previewed. */
.mwz-slide-in {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.mwz-slide-in::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--te-panel-border);
}

.mwz-slide-in::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--te-panel-border);
}

/* The thumb picks up the accent the chosen swatch and the chosen choice
   already wear, so "this is the one you are moving" reads the same everywhere
   in the run. */
.mwz-slide-in::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 0;
  border-radius: 3px;
  background: var(--te-panel-accent);
  appearance: none;
  -webkit-appearance: none;
}

.mwz-slide-in::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 3px;
  background: var(--te-panel-accent);
}

/* What the theme never changes.
 *
 * DELIBERATELY NOT THE ADVISORY'S AMBER (BUILD-DECISIONS §3). Nothing here is
 * wrong — it is the answer to "am I about to lose my pictures", which is the
 * question a person is actually asking on this screen, and a warning colour
 * would answer it the wrong way round. So: the panel's own quiet surface, a
 * rule down the side in the border colour rather than the warning one, and the
 * heading at the weight of every other label in the run. */
.mwz-keeps {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--te-panel-border);
  border-radius: 0 5px 5px 0;
  background: color-mix(in srgb, var(--te-panel-bg-elev) 70%, transparent);
}

.mwz-keeps-h {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--te-panel-fg);
}

.mwz-keeps p {
  margin: 0 0 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--te-panel-dim);
}

.mwz-keeps p:last-child { margin-bottom: 0; }

/* ── screen twelve: the chart ramp (#172) ──────────────────────────────────
 *
 * THE ONE NEW SHAPE IN THIS TICKET, and the gap is the whole of it. A series
 * ramp is six unrelated things that a person has to be able to tell apart, so
 * its cells are separated; the heatmap is ONE SCALE running cool to hot, so its
 * cells are butted into a single band. That is the same distinction the copy
 * under the screen makes, drawn instead of said twice.
 *
 * SIX TO A ROW, FIXED. Left to wrap on its own the twelve came out as eight
 * and then four, which throws away the one relationship this screen is about:
 * these are the six you were just shown, and six more behind them. A six-column
 * grid puts the second rank directly under the first and makes the cells the
 * same size in both places, so the two ramps read as one list.
 * ------------------------------------------------------------------------ */

.mwz-ramp-wrap { margin-bottom: 4px; }

.mwz-ramp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

/* Joined: no gaps, five equal cells, and the rounding moves to the ENDS of the
   band so the steps read as one continuous scale rather than five choices. The
   six-column grid is wrong for it in both ways — five into six leaves a hole,
   and a scale has no rank to line up with. */
.mwz-ramp.is-joined {
  display: flex;
  gap: 0;
  border-radius: 5px;
  overflow: hidden;
}

.mwz-ramp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.mwz-ramp.is-joined .mwz-ramp-cell { flex: 1 1 0; }

/* The colour IS the control here, so the input carries no chrome of its own
   beyond a hairline to separate it from the panel behind it. Native
   `<input type="color">` needs both the outer border and the inner swatch
   padding zeroed or the browser draws its own frame inside ours. */
.mwz-ramp-in {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 1px solid var(--te-panel-border);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

.mwz-ramp-in::-webkit-color-swatch-wrapper { padding: 0; }
.mwz-ramp-in::-webkit-color-swatch { border: none; border-radius: 4px; }
.mwz-ramp-in::-moz-color-swatch { border: none; border-radius: 4px; }

.mwz-ramp-in:hover { border-color: var(--te-panel-dim); }

/* In the band the cells have no edges of their own — an outline between two
   steps of one scale is a seam that says they are separate things. */
.mwz-ramp.is-joined .mwz-ramp-in {
  height: 26px;
  border: none;
  border-radius: 0;
}

.mwz-ramp.is-joined .mwz-ramp-in::-webkit-color-swatch { border-radius: 0; }
.mwz-ramp.is-joined .mwz-ramp-in::-moz-color-swatch { border-radius: 0; }

/* Which line on a chart this is. Information, not ornament: line four really is
   --mt-series-4, and without the ordinal there is no way to know which cell you
   are about to move. */
.mwz-ramp-n {
  margin-top: 3px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--te-panel-dim);
}

/* NOTHING WAS ADOPTED FOR THIS SLOT, and it says so. A native colour input
   shows the stand-in grey for a value it cannot take, which on a control whose
   whole job is to show you a colour reads as "your colour is grey". Dashed, the
   same way the escape-hatch picker is dashed and for the same reason: this cell
   is not reporting an answer. */
.mwz-ramp-cell.is-empty .mwz-ramp-in {
  border-style: dashed;
  opacity: 0.55;
}

/* …EXCEPT INSIDE THE BAND, WHERE THERE IS NO BORDER TO DASH. The joined rule
   above says `border: none`, which resets the WIDTH to `medium` — so dashing
   the style alone drew a ~3px frame around a step of a scale whose whole point
   is that it has no seams. The dimming carries it on its own there. */
.mwz-ramp.is-joined .mwz-ramp-cell.is-empty .mwz-ramp-in {
  border-style: none;
}

/* ── the foot ───────────────────────────────────────────────────────────── */

.mwz-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid var(--te-panel-border);
}

.mwz-foot .mwz-sp { flex: 1 1 auto; }

.mwz-btn {
  padding: 7px 15px;
  border: 1px solid var(--te-panel-border);
  border-radius: 4px;
  background: var(--te-panel-bg-elev);
  color: var(--te-panel-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.mwz-btn:hover:not(:disabled) { border-color: var(--te-panel-accent); }

.mwz-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.mwz-btn.mwz-primary {
  background: var(--te-panel-accent);
  border-color: var(--te-panel-accent);
  color: var(--te-panel-bg);
  font-weight: 600;
}

.mwz-btn.mwz-ghost {
  background: none;
  border-color: transparent;
  color: var(--te-panel-dim);
}

.mwz-btn.mwz-ghost:hover { color: var(--te-panel-fg); }

/* Keyboard focus stays visible on every control, including the ghost Cancel
   the put-back depends on. */
.mwz-run:focus-visible,
.mwz-look:focus-visible,
.mwz-btn:focus-visible,
.mwz-ch:focus-visible,
.mwz-sw:focus-visible,
.mwz-sw-any:focus-visible,
.mwz-adv-btn:focus-visible,
.mwz-font:focus-visible,
.mwz-nrow-pick:focus-visible,
.mwz-sel:focus-visible,
.mwz-nitem-pick:focus-visible,
.mwz-ramp-in:focus-visible,
.mwz-slide-in:focus-visible,
.mwz-name:focus-visible,
.mwz-recap-edit:focus-visible {
  outline: 2px solid var(--te-panel-accent);
  outline-offset: 2px;
}

/* Inside the joined band the offset would put the ring UNDER the neighbouring
   cell, because the strip clips its overflow. Drawn inside instead, so the
   focused step is still the one you can see. */
.mwz-ramp.is-joined .mwz-ramp-in:focus-visible { outline-offset: -2px; }

/* ── screen fourteen: what finishing changes (#173) ────────────────────────
 *
 * THE ONE BLOCK IN THIS RUN THAT IS ALLOWED TO BE THE WARNING. Everything else
 * the wizard draws is a control or a quiet note, and the advisory under an
 * Advanced row is the only other coloured thing in the panel. This block sits
 * above a button that rewrites every card on the dashboard, so it wears the
 * panel accent — and .mwz-keeps directly underneath it deliberately does not,
 * which is the pairing BUILD-DECISIONS §3 fixes and the mockup's own CSS
 * comment names from the other side.
 *
 * NO BULLET. The count is the marker: it is the thing a person came to this
 * screen to read, and a disc in front of it would be a second one. Nothing
 * else in this panel draws a list marker either. */
.mwz-spec {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--te-panel-accent) 40%, var(--te-panel-border));
  background: color-mix(in srgb, var(--te-panel-accent) 7%, transparent);
}

.mwz-spec-h {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--te-panel-accent);
}

.mwz-spec-p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--te-panel-fg);
}

.mwz-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.55;
  color: var(--te-panel-dim);
}

.mwz-spec-list li + li { margin-top: 3px; }

/* The count, and only the count. Set in the reading colour so the eye lands on
   the number rather than on the sentence carrying it. */
.mwz-spec-list b {
  font-weight: 600;
  color: var(--te-panel-fg);
}

.mwz-spec-undo {
  margin: 9px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--te-panel-dim);
}

/* ── screen fourteen: name it, and check it (#174) ─────────────────────────
 *
 * TWO CONTROLS AND NO NEW COLOUR. The accent on this screen belongs to the
 * block below — the one saying every card is about to be rewritten — and a
 * recap drawn in a colour of its own would take the eye off it. So the list is
 * hairlines and the panel's own two text colours, which is the quietest thing
 * this panel can draw and the right weight for something a person scans rather
 * than reads.
 *
 * A FIXED KEY COLUMN. Six labels down the left at one width is what makes it a
 * table you can run an eye down; let them size to their text and the values
 * start in six different places. */
.mwz-name {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--te-panel-border);
  border-radius: 5px;
  background: var(--te-panel-bg);
  color: var(--te-panel-fg);
  font: inherit;
  font-size: 12.5px;
}

.mwz-name::placeholder { color: var(--te-panel-dim); }

.mwz-recap {
  border: 1px solid var(--te-panel-border);
  border-radius: 6px;
  padding: 2px 9px;
}

.mwz-recap-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--te-panel-border) 60%, transparent);
  font-size: 11.5px;
}

.mwz-recap-row:last-child { border-bottom: 0; }

.mwz-recap-k {
  flex: none;
  width: 58px;
  color: var(--te-panel-dim);
}

/* The answer, and it may be a sentence or a strip of colours. Wrapping rather
   than truncating: a Type line is three family names and an ellipsis through
   the third one hides the answer this line exists to give. */
.mwz-recap-v {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: var(--te-panel-fg);
}

/* Smaller than the Parts screen's puck, because six of them sit on one line
   here and one sits beside a dropdown there. */
.mwz-recap-chip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* A word, not a pencil — see the component's own note. Ghost weight, because
   the primary at the foot of the panel is the action this screen is for. */
.mwz-recap-edit {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--te-panel-accent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.mwz-recap-edit:hover { text-decoration: underline; }