/**
 * range-builder.css — chrome unique to Practice's Range Builder mode.
 *
 * The navigator strip (#rb-pf-nav, .pf-nav-cards, .pf-solution-card,
 * .pf-pos-card, .pf-action, ...) is styled by two other sources instead of
 * this file:
 *   1. css/layout.css — the same UNSCOPED base rules Study's navigator uses
 *      (`.pf-nav-cards`, `.pf-chip-bar`, `.range-matrix*`, ...). Free reuse,
 *      no edits needed there.
 *   2. The `<style id="range-builder-nav-css">` block inside
 *      #view-range-builder in index.html — a verbatim copy of Study's own
 *      navigator polish, with five id substitutions. See
 *      docs/range-builder/00-plan.md §6 R3 for the exact procedure; don't
 *      hand-edit that block.
 *
 * Two things that copy could not carry over, compensated here instead of by
 * touching the shared base files:
 *   - `#pf-nav` in css/layout.css is an ID selector, so it does not match our
 *     renamed `#rb-pf-nav`. Its four declarations are repeated below.
 *   - `--study-hairline` / `--study-hairline-2` / `--study-ease` are custom
 *     properties set on `#view-ranges` itself — a sibling of
 *     #view-range-builder, so they don't cascade across. Redefined below with
 *     the same values Study uses.
 *
 * BODY LAYOUT (rewritten 2026-09-08). Range Builder no longer borrows Study's
 * `.ranges-body` / `.ranges-matrix-col`: those size the matrix off a fixed
 * `--range-matrix-width` inside a full-width wrapper, so the grid floated left
 * of centre and every overlay anchored to the wrapper rather than to the
 * matrix. Here `.rb-body` is a three-column grid whose visible columns are
 * chosen by `[data-phase]`, the matrix is fluid (width-driven, capped by the
 * height available), and the side rail is a full-height column, never a
 * floating card.
 *
 * Everything else here is original Range Builder UI: it must never look like
 * Study's info column, because that column shows the answer key and Range
 * Builder's whole point is not showing it before grading.
 */

/* The view is a flex column with a definite height, the same shape Study's
   #view-ranges uses. Without it `.view.active { display: block }` won for this
   view, `.rb-body { flex: 1 }` was inert, and the body sized itself from its
   tallest child instead of from the space available — which is why the matrix
   and the rail never agreed on a height. 51px is the measured header height
   (Study's own rule still says 44px and runs 7px under the fold; fixing that
   is Study's change, not this one). */
#view-range-builder.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 51px);
  overflow: hidden;
}

#view-range-builder {
  --study-hairline:   rgba(255, 255, 255, 0.06);
  --study-hairline-2:  rgba(255, 255, 255, 0.10);
  --study-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  /* Action colours for the tools panel — the same tokens the matrix and the
     nav cards use. Fold is a neutral slate so its tile reads as a colour. */
  --rb-raise: var(--color-raise);
  --rb-call:  var(--color-call);
  --rb-allin: var(--color-allin);
  --rb-fold:  #2b2f37;
  --rb-panel: #101013;
  --rb-line:  rgba(255, 255, 255, 0.07);
  --rb-score: clamp(260px, 19vw, 300px);
}

/* Compensates the #pf-nav ID rule in css/layout.css, which our renamed
   #rb-pf-nav does not match. */
#rb-pf-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px 10px;
  flex-shrink: 0;
}

/* ── Body: the phase decides the columns ──────────────────────────────────
   build   : [ matrix | tools ] — the matrix column is Study's, byte for
             byte: it hugs the matrix (auto) and the tools take the rest,
             exactly as Study's info columns do.
   results : [ yours | score | correct ] — symmetric, the score between.
   pick is the landing; see the Landing section below. */
.rb-body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rb-body[data-phase="results"] {
  grid-template-columns: minmax(0, 1fr) var(--rb-score) minmax(0, 1fr);
}
.rb-body[data-phase="results"] #rb-pane-yours  { order: 1; }
.rb-body[data-phase="results"] .rb-side        { order: 2; }
.rb-body[data-phase="results"] #rb-pane-solver { order: 3; }

/* ── Matrix panes ─────────────────────────────────────────────────────────
   Build mirrors Study's matrix column exactly (index.html "Matrix sizing
   fix" + the ≥1100px ranges-matrix-col override): same size variables, same
   padding, vertically centred, left-aligned. */
.rb-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 10px 6px 10px 8px;
  overflow: hidden;
  --range-matrix-height: min(calc(100vh - 300px), 660px);
  --range-matrix-width: calc(var(--range-matrix-height) * 1.64);
}
.rb-pane[hidden] { display: none; }
/* Study's view is calc(100vh - 44px) — 7px taller than the space under the
   51px header — and centres its matrix in that. Our view is sized to the real
   space, so the extra 7px goes on top to land the matrix on Study's pixels. */
.rb-body[data-phase="build"] .rb-pane { padding-top: 17px; }
.rb-body[data-phase="build"] .rb-pane__head { display: none; }
.rb-pane .range-matrix-wrapper { width: auto; }

/* Results: two grids and the score share the width, so each grid takes its
   height from Study's budget (less the caption row) and its width from its
   half of the screen. Same cells, same renderer, just resized to fit. */
.rb-body[data-phase="results"] .rb-pane {
  align-items: center;
  padding: 10px 12px;
  --range-matrix-height: min(calc(100vh - 336px), 640px);
  --range-matrix-width: min(calc(var(--range-matrix-height) * 1.64), calc((100vw - var(--rb-score)) / 2 - 48px));
}
.rb-body[data-phase="results"] .rb-pane__head { width: calc(var(--range-matrix-width) + 20px); }
.rb-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.rb-body[data-phase="results"] .rb-pane__head { justify-content: flex-start; }
.rb-pane__hand {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-pane__hand b { color: var(--color-accent); margin-right: 8px; }
.rb-pane__hand[data-verdict="correct"] b { color: var(--color-correct); }
.rb-pane__hand[data-verdict="partial"] b { color: var(--color-mixed); }
.rb-pane__hand[data-verdict="wrong"] b { color: var(--color-wrong); }
.rb-pane__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.rb-pane__stat {
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-pane__stat b { color: var(--text-primary); font-weight: 700; margin-right: 4px; }

.rb-tools-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
/* Undo / redo / clear: one segmented control, top-right of the tools. */
.rb-toolbar {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--rb-line);
}
.rb-tool {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.rb-tool--text { padding: 0 12px; }
.rb-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rb-tool:hover:not(:disabled) { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
.rb-tool:disabled { opacity: 0.35; cursor: default; }
.rb-tool:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Cells are Study's (.range-matrix .matrix-cell, painted by
   matrix.js#renderPreviewMatrix). These mirror Study's own #view-ranges
   #range-preview-grid hover rules, plus the builder's paint cursor and the
   results-only peer / filter states. */
#view-range-builder .range-matrix { user-select: none; -webkit-user-select: none; }
#view-range-builder .range-matrix .matrix-cell {
  transition: transform 0.12s var(--study-ease), filter 0.12s;
}
#view-range-builder .range-matrix .matrix-cell:hover {
  filter: brightness(1.2) saturate(1.1);
  z-index: 2;
}
.rb-body[data-phase="build"] #rb-grid .matrix-cell { cursor: crosshair; }
.rb-body[data-phase="results"] .range-matrix .matrix-cell { cursor: default; }
#view-range-builder .matrix-cell.is-peer {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 3;
}
#view-range-builder .matrix-cell.is-dim { filter: saturate(0.2) brightness(0.35); }

/* ── Side column: tools (build) / score (results) ─────────────────────── */
.rb-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--rb-panel);
  border-left: 1px solid var(--border);
}
.rb-body[data-phase="results"] .rb-side { border-right: 1px solid var(--border); }
.rb-side__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 16px;
  padding: 16px 18px 0;
  overflow-y: auto;
}
.rb-side__body > * { flex: 0 0 auto; }
.rb-side__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto -18px 0;
  padding: 14px 18px 16px;
  background: var(--rb-panel);
  border-top: 1px solid var(--rb-line);
}

.rb-spot { display: flex; flex-direction: column; gap: 4px; }
.rb-spot__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.rb-spot__title {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.rb-block { display: flex; flex-direction: column; gap: 10px; }
.rb-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rb-block__hint {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #6c6c72;
}

/* Strategy tiles — one per action, side by side, tinted by the action.
   Each tile: name (+ its number key), a big editable value between round
   −/+ buttons, and a segmented 0–100 preset control. */
.rb-tiles {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 10px;
}
.rb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    var(--c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -16px rgba(0, 0, 0, 0.9);
  transition: filter 160ms ease, opacity 160ms ease;
}
.rb-tile.is-zero { filter: saturate(0.45) brightness(0.5); }
.rb-tile.is-zero:hover { filter: saturate(0.65) brightness(0.68); }

.rb-tile__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.rb-tile__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-tile__name kbd {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
}

.rb-tile__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.rb-tile__step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.rb-tile__step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rb-tile__step:hover { background: rgba(0, 0, 0, 0.34); border-color: rgba(255, 255, 255, 0.4); }
.rb-tile__num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 8px;
  cursor: text;
}
.rb-tile__num:focus-within { background: rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.rb-tile__num input {
  width: 2.2em;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.rb-tile__num span { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.75); margin-left: 1px; }

.rb-tile__quick {
  display: flex;
  width: 100%;
  padding: 3px;
  gap: 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.26);
}
.rb-tile__quick button {
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.rb-tile__quick button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rb-tile__quick button.is-on { background: #fff; color: #141414; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.rb-tile button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The mix bar: segments in tile order, a handle on every boundary. */
/* Mix bar: a 26px-tall hit area around a 10px track. Segments live inside a
   clipped track so both ends stay rounded; handles sit outside it. Eased
   while settling (preset clicks, release), never while dragging. */
.rb-mixbar {
  position: relative;
  height: 26px;
  margin: 0 8px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.rb-mixbar__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 5px;
  overflow: hidden;
  background: #1a1a1d;
}
.rb-mixbar__seg { position: absolute; top: 0; bottom: 0; }
.rb-mixbar__handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  transform: translateY(-50%);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.rb-mixbar__handle::after {
  content: '';
  position: absolute;
  inset: 6px 5px;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}
.rb-mixbar__handle:hover { transform: translateY(-50%) scale(1.08); }
.rb-mixbar__handle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rb-mixbar:not(.is-dragging) .rb-mixbar__seg {
  transition: left 140ms cubic-bezier(0.16, 1, 0.3, 1), width 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-mixbar:not(.is-dragging) .rb-mixbar__handle {
  transition: left 140ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms ease, box-shadow 120ms ease;
}
.rb-mixbar.is-dragging { cursor: grabbing; }
.rb-mixbar.is-dragging .rb-mixbar__handle { cursor: grabbing; }
.rb-mixbar.is-dragging .rb-mixbar__handle:focus { transform: translateY(-50%) scale(1.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }

/* Live summary of the user's own range (build). */
.rb-summary { display: flex; flex-direction: column; gap: 8px; }
.rb-sum {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 52px;
  grid-template-areas: "dot name combos pct" "bar bar bar bar";
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rb-sum__dot { grid-area: dot; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.rb-sum__name { grid-area: name; color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-sum__combos { grid-area: combos; color: var(--text-muted); font-size: 12px; }
.rb-sum__pct { grid-area: pct; text-align: right; color: var(--text-primary); font-weight: 700; }
.rb-sum__bar { grid-area: bar; height: 4px; border-radius: 2px; background: #1c1c20; overflow: hidden; }
.rb-sum__bar i { display: block; height: 100%; background: var(--c); border-radius: 2px; transition: width 160ms ease; }

.rb-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 9px 12px;
  list-style: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rb-line);
  font-size: 11.5px;
  color: var(--text-muted);
}
.rb-keys b { color: var(--text-secondary); font-weight: 700; margin-right: 4px; }

/* Buttons */
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rb-btn--primary {
  color: #0e0a19;
  background: linear-gradient(180deg, #f7cb7f 0%, #e5a447 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -12px rgba(240, 182, 92, 0.8);
}
.rb-btn--primary:hover { filter: brightness(1.06); }
.rb-btn--primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.rb-btn--primary:hover svg { transform: translateX(3px); }
.rb-btn--ghost {
  height: 38px;
  flex: 1;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--rb-line);
  font-size: 13px;
}
.rb-btn--ghost:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.18); }
.rb-btn--link {
  height: 28px;
  color: var(--text-muted);
  background: none;
  font-size: 12.5px;
  font-weight: 600;
}
.rb-btn--link:hover { color: var(--text-secondary); }
/* Results secondary actions: each its own tone, so "Next spot" and "Study"
   read at a glance without competing with the gold "Try again" — blue and
   violet, because red/green/teal/gold already mean raise/call/correct/primary. */
.rb-btn--next,
.rb-btn--study {
  height: 40px;
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border-color: color-mix(in srgb, var(--tone) 38%, transparent);
}
.rb-btn--next { --tone: #7ea6ff; }
.rb-btn--study { --tone: #b79dff; }
.rb-btn--next:hover,
.rb-btn--study:hover {
  background: color-mix(in srgb, var(--tone) 20%, transparent);
  border-color: color-mix(in srgb, var(--tone) 60%, transparent);
}
.rb-btn--next svg,
.rb-btn--study svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-btn--next:hover svg { transform: translateX(2px); }
.rb-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rb-btn-row { display: flex; gap: 8px; }
.rb-foot-note { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.rb-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rb-foot-row .rb-btn--link { padding: 0; }
.rb-painted { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ── Results: the score column ────────────────────────────────────────── */
.rb-score {
  position: relative;
  align-self: center;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.rb-score__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.rb-score__track { fill: none; stroke: #1f1f23; stroke-width: 9; }
.rb-score__arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-score__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rb-score__pct small { font-size: 16px; font-weight: 700; margin: 6px 0 0 1px; }
.rb-verdict {
  margin-top: -6px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rb-score__meta {
  margin: -8px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* The scoring fine print, folded away behind one quiet toggle */
.rb-how { margin-top: -10px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.rb-how summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.rb-how summary::-webkit-details-marker { display: none; }
.rb-how summary::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  font-style: italic;
}
.rb-how summary:hover { color: var(--text-secondary); }
.rb-how summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.rb-how ul {
  margin: 8px 0 0;
  padding: 10px 12px;
  list-style: none;
  text-align: left;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}
.rb-how li + li { margin-top: 4px; }

.rb-total {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  grid-template-areas: "mine name theirs" "bars bars bars";
  row-gap: 5px;
  align-items: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rb-total__mine { grid-area: mine; color: var(--text-primary); font-weight: 700; }
.rb-total__theirs { grid-area: theirs; text-align: right; color: var(--text-primary); font-weight: 700; }
.rb-total__name { grid-area: name; text-align: center; color: var(--text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-total__bars { grid-area: bars; display: grid; gap: 3px; }
.rb-total__bar { display: block; height: 5px; border-radius: 3px; min-width: 2px; background: var(--c); }
.rb-total__bar--theirs { opacity: 0.45; }

.rb-buckets { display: flex; flex-direction: column; gap: 6px; }
.rb-bucket {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--rb-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.rb-bucket:hover { background: rgba(255, 255, 255, 0.05); }
.rb-bucket[aria-pressed="true"] { border-color: var(--color-accent); background: rgba(240, 182, 92, 0.08); }
.rb-bucket__glyph { font-weight: 800; text-align: center; }
.rb-bucket--correct .rb-bucket__glyph { color: var(--color-correct); }
.rb-bucket--partial .rb-bucket__glyph { color: var(--color-mixed); }
.rb-bucket--wrong .rb-bucket__glyph { color: var(--color-wrong); }
.rb-bucket__count { font-variant-numeric: tabular-nums; font-weight: 700; }

.rb-source { margin: 0; font-size: 11px; color: #66666c; text-align: center; }

/* ── Narrow viewports ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rb-body,
  .rb-body[data-phase="results"] {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    overflow-y: auto;
  }
  .rb-body[data-phase="results"] #rb-pane-solver { order: 2; }
  .rb-body[data-phase="results"] .rb-side { order: 3; }
  .rb-body .rb-pane,
  .rb-body[data-phase="results"] .rb-pane {
    align-items: center;
    --range-matrix-width: calc(100vw - 64px);
    --range-matrix-height: calc(var(--range-matrix-width) / 1.4);
  }
  .rb-side { border-left: 0; border-top: 1px solid var(--border); }
  .rb-side__body { overflow: visible; }
}

/* Short laptop screens: keep the tools and the CTA in view, drop the extras. */
@media (max-height: 820px) {
  .rb-keys,
  .rb-foot-note,
  .rb-painted { display: none; }
  .rb-tile { gap: 8px; padding: 10px 10px 9px; }
  .rb-tile__num input { font-size: 24px; }
  .rb-tile__step { width: 26px; height: 26px; }
  .rb-summary { gap: 6px; }
  .rb-side__body { gap: 12px; padding-top: 12px; }
  .rb-spot__title { font-size: 19px; }
  .rb-side__foot { padding-top: 10px; padding-bottom: 10px; }
  .rb-score { width: 84px; height: 84px; }
  .rb-score__pct { font-size: 25px; }
  .rb-body[data-phase="results"] .rb-side__body { gap: 10px; }
  .rb-total { row-gap: 3px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-tile, .rb-sum__bar i, .rb-score__arc, .rb-tool, .rb-btn, .rb-bucket, .rb-btn svg { transition: none; }
  .rb-mixbar__seg, .rb-mixbar__handle { transition: none !important; }
  .rb-mixbar__handle:hover, .rb-mixbar.is-dragging .rb-mixbar__handle:focus { transform: translateY(-50%); }
  .rb-btn--next:hover svg { transform: none; }
}

/* ── Landing (State A: pick) ─────────────────────────────────────────────
   The pick phase is the tool's front door, not a ghosted grid beside an
   empty rail: the navigator above chooses the spot, and this centred block
   names it and starts the build. Only this block is on screen in pick; the
   matrix pane and rail take over from build onwards. */
.rb-body[data-phase="pick"] { grid-template-columns: minmax(0, 1fr); }
.rb-body[data-phase="pick"] #rb-pane-yours,
.rb-body[data-phase="pick"] .rb-side { display: none; }
.rb-body:not([data-phase="pick"]) .rb-landing { display: none; }

.rb-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  padding: clamp(12px, 3vh, 28px) 24px clamp(16px, 4vh, 40px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(240, 182, 92, 0.06), transparent 70%);
  animation: rb-landing-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rb-landing-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Two range grids angled toward each other — yours and the solution —
   with the tool's mark between them. */
.rb-landing__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Scales with the viewport so the landing always fits without scrolling
     (the app keeps a single scroll container). */
  --rb-art: clamp(120px, 27vh, 208px);
  height: calc(var(--rb-art) + 20px);
  margin-bottom: clamp(14px, 3.2vh, 30px);
  perspective: 700px;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.rb-art-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  width: var(--rb-art);
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 10px;
  background: #121215;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.rb-art-grid--left  { transform: rotateY(32deg);  transform-origin: right center; }
.rb-art-grid--right { transform: rotateY(-32deg); transform-origin: left center; }
.rb-art-grid i {
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.045);
}
.rb-art-grid i.r { background: var(--color-raise); }
.rb-art-grid i.c { background: var(--color-call); }
.rb-art-grid i.a { background: #9b3b2c; }
.rb-art-grid i.m { background: var(--color-call); opacity: 0.4; }
/* "Yours" is still being drawn: its lower rows fade out. */
.rb-art-grid--left i.dim { opacity: 0.16; }

.rb-landing__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  color: var(--color-accent);
  background: linear-gradient(180deg, #1d1c20 0%, #121114 100%);
  border: 1px solid rgba(240, 182, 92, 0.35);
  box-shadow:
    0 0 0 6px rgba(10, 10, 10, 0.9),
    0 14px 40px -8px rgba(240, 182, 92, 0.35);
}
.rb-landing__badge svg { width: 34px; height: 34px; }

.rb-landing__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
}
.rb-landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(240, 182, 92, 0.08);
  border: 1px solid rgba(240, 182, 92, 0.22);
}
.rb-landing__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}
.rb-landing__eyebrow:empty { display: none; }
.rb-landing__title {
  margin: 16px 0 0;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.rb-landing__sub {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #a3a3a8;
  text-wrap: balance;
}

.rb-landing__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 3.4vh, 28px);
  padding: 14px 30px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0e0a19;
  background: linear-gradient(180deg, #f7cb7f 0%, #e5a447 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px -10px rgba(240, 182, 92, 0.7);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease, filter 160ms ease;
}
.rb-landing__cta svg { width: 16px; height: 16px; transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.rb-landing__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rb-landing__cta:hover svg { transform: translateX(3px); }
.rb-landing__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.rb-landing__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.rb-landing__hint svg { width: 14px; height: 14px; color: var(--color-accent); }

@media (max-width: 700px) {
  .rb-landing__art { --rb-art: clamp(110px, 34vw, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-landing { animation: none; }
  .rb-landing__cta,
  .rb-landing__cta svg { transition: none; }
  .rb-landing__cta:hover,
  .rb-landing__cta:hover svg { transform: none; }
}

/* Results column: tighter rhythm so score, totals, buckets and the readout
   all fit above the actions on a 900px-tall screen. */
.rb-body[data-phase="results"] .rb-side__body { gap: 10px; padding-top: 12px; }
.rb-body[data-phase="results"] .rb-side__foot { padding-top: 12px; padding-bottom: 12px; }
.rb-body[data-phase="results"] .rb-block { gap: 8px; }