/* /Components/GenerationSearchPanel.razor.rz.scp.css */
/* Scoped utility styles for the shared generation-search panel. These mirror the loader/error
   utility classes the markup previously used inside PlayBoard, so the panel renders identically
   whether it is embedded in Play's loader or the Generate lab. */

.rail-field[b-wtb69b2azn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rail-field label[b-wtb69b2azn] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-label); }
.rail-field select[b-wtb69b2azn] { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-input); background: var(--input-bg); color: var(--text-primary); }

.rail-json[b-wtb69b2azn] { margin-top: 0.9rem; font-size: 0.9rem; }
.rail-json summary[b-wtb69b2azn] { cursor: pointer; font-weight: 600; color: var(--text-label); }
.rail-json textarea[b-wtb69b2azn] { min-height: 8rem; margin-top: 0.6rem; }
.rail-json .app-button[b-wtb69b2azn] { margin-top: 0.4rem; }

.coach-actions[b-wtb69b2azn] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Raw parser text kept as a secondary, collapsed detail under the friendly lead. */
.error-detail[b-wtb69b2azn] { margin-top: 0.5rem; font-size: 0.82rem; }
.error-detail summary[b-wtb69b2azn] { cursor: pointer; font-weight: 600; color: var(--error-detail-text); }
.error-detail-text[b-wtb69b2azn] {
    margin: 0.4rem 0 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem; color: var(--error-detail-text); line-height: 1.4; word-break: break-word;
}
/* /Components/HelpTooltip.razor.rz.scp.css */
.help-tooltip[b-4k88gw1kjk] { display: inline-block; position: static; vertical-align: middle; font-weight: normal; }
button[b-4k88gw1kjk] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border: 1px solid var(--border-input); border-radius: 50%;
    color: var(--text-secondary); background: var(--surface-inset); font-size: 0.85rem;
    cursor: pointer; list-style: none;
}
button:focus-visible[b-4k88gw1kjk] { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.help-tooltip-text[b-4k88gw1kjk] {
    pointer-events: none;
    display: none; position: absolute; top: calc(100% + 0.35rem); left: 0;
    width: 16rem; max-width: 100%; box-sizing: border-box; padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-input); border-radius: 8px;
    background: var(--surface-card-top); color: var(--text-primary);
    font-size: 0.85rem; line-height: 1.45; text-align: left;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); z-index: 20;
}
.help-tooltip:hover .help-tooltip-text[b-4k88gw1kjk],
.help-tooltip:focus-within .help-tooltip-text[b-4k88gw1kjk] { display: block; }
/* /Components/PlayBoard.razor.rz.scp.css */
.play-layout[b-n755obi5r9] {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) minmax(18rem, 22rem);
    /* Coach and reasoning aids stack in the left column, with the board in the
       centre and controls on the right. Keep the coach row tight to its content. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "coach main right"
        "aids  main right";
    gap: 2rem;
    align-items: start;
}

.play-rail--coach[b-n755obi5r9] { grid-area: coach; }
.play-rail--aids[b-n755obi5r9] { grid-area: aids; }
.play-rail--right[b-n755obi5r9] { grid-area: right; }

.play-main[b-n755obi5r9] {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Empty state: a simple centered column with the puzzle loader. */
.play-empty-layout[b-n755obi5r9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 40rem;
    margin: 0 auto;
}

.play-empty[b-n755obi5r9] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.play-empty h3[b-n755obi5r9] {
    margin: 0 0 0.6rem;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.play-empty p[b-n755obi5r9] {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---- grid ---- */
.play-grid-frame[b-n755obi5r9] {
    background: var(--board-frame);
    border-radius: 18px;
    padding: 0.75rem;
    box-shadow: 0 18px 40px var(--board-frame-shadow);
    width: min(80vh, 100%, 40rem);
    margin: 0 auto;
    box-sizing: border-box;
}

.play-grid[b-n755obi5r9] {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.14rem;
    width: 100%;
    outline: none;
    touch-action: none;
}

/* The ARIA row wrappers (role="row") carry no box so the 81 cells stay direct
   participants of the 9-column grid above. */
.grid-row[b-n755obi5r9] { display: contents; }

/* Keyboard focus on the grid frame: a clear ring set off from the cell-selection
   ring (which stays the strong blue inset). :focus-visible keeps it to keyboard
   entry — clicking a cell focuses the grid programmatically but shows no frame ring.
   The offset reaches out over the dark frame padding so it reads as a frame outline. */
.play-grid:focus-visible[b-n755obi5r9] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 0.5rem;
    border-radius: 10px;
}

.play-cell[b-n755obi5r9] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    border: 1px solid var(--cell-border);
    /* Cage tint composed here from the per-cage hue the razor sets inline
       (--cage-h). Saturation/lightness come from the theme (--cage-s / --cage-l):
       pale pastel in light, dark desaturated in dark. The 222 fallback covers the
       (unexpected) cageless cell so it still gets a neutral tint. */
    background: hsl(var(--cage-h, 222), var(--cage-s), var(--cage-l));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cell-text);
    overflow: hidden;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* Hover lifts the whole cage, not the one cell: a cage is the unit a sum applies to, and its
   dotted outline alone is easy to lose among nine of them. The razor puts .in-hover-cage on every
   cell of the cage under the pointer (CSS cannot select non-adjacent siblings by shared cage), and
   because each cell shifts by the same amount the group rises as one shape. Pointer devices only --
   on touch, pointerenter fires on tap and a whole cage left standing proud reads as a bug. */
@media (hover: hover) {
    .play-cell.in-hover-cage[b-n755obi5r9] {
        transform: translateY(-1px);
    }
}

.play-cell.box-border-right[b-n755obi5r9] { border-right: 3px solid var(--box-border); }
.play-cell.box-border-bottom[b-n755obi5r9] { border-bottom: 3px solid var(--box-border); }

.cage-edge[b-n755obi5r9] {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.cage-edge--top[b-n755obi5r9], .cage-edge--bottom[b-n755obi5r9] { left: 0.3rem; right: 0.3rem; height: 0; }
.cage-edge--top[b-n755obi5r9] { border-top: 2px dotted var(--cage-edge); top: 0.22rem; }
.cage-edge--bottom[b-n755obi5r9] { border-bottom: 2px dotted var(--cage-edge); bottom: 0.22rem; }
.cage-edge--left[b-n755obi5r9], .cage-edge--right[b-n755obi5r9] { top: 0.3rem; bottom: 0.3rem; width: 0; }
.cage-edge--left[b-n755obi5r9] { border-left: 2px dotted var(--cage-edge); left: 0.22rem; }
.cage-edge--right[b-n755obi5r9] { border-right: 2px dotted var(--cage-edge); right: 0.22rem; }

.cage-label[b-n755obi5r9] {
    position: absolute;
    top: 0.14rem;
    left: 0.24rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cage-label-text);
    background: var(--cage-label-bg);
    border-radius: 4px;
    padding: 0.06rem 0.22rem 0.05rem;
    box-shadow: 0 0 0 1px var(--cage-label-shadow);
    z-index: 4;
    line-height: 1;
}

.value[b-n755obi5r9] {
    font-size: clamp(1.1rem, 3.4vw, 2rem);
    line-height: 1;
    z-index: 2;
}

.value--given[b-n755obi5r9] {
    font-weight: 800;
    color: var(--value-given);
}

.value--player[b-n755obi5r9] {
    font-weight: 600;
    color: var(--value-player);
}

/* A value the coach applied, not one the player reasoned out. Violet at the same
   weight as player values, so it reads as "entered" (not an immutable given) yet is
   unmistakably distinct from the player's blue. Clears WCAG AA (≥4.5:1) over every
   cage tint in both themes — violet-700 on light, violet-300 on dark; measured, see
   the contrast block in app.css and tools/contrast-check.py. */
.value--coach[b-n755obi5r9] {
    font-weight: 600;
    color: var(--value-coach);
}

/* A lone mark left by a removal, rendered where a placed value would sit but
   italic and outlined — a "ghost value" that reads as decided-not-yet-penned.
   The fill stays a shade lighter than a penned value but no lighter than 4.5:1
   over the cage tints: it is text, so it carries the text threshold itself.
   The size/centering (inherited from .value) is the affordance: a non-promotable
   single mark keeps the small pencil-cluster rendering instead. */
.value--ghost[b-n755obi5r9] {
    font-weight: 600;
    font-style: italic;
    color: var(--value-ghost-fill);
    -webkit-text-stroke: 0.6px var(--value-ghost-stroke);
}

.pencil[b-n755obi5r9] {
    /* A compact 3x3 cluster, identical in every cell: biased just below
       center so the top row clears the cage-sum chip without labeled cells
       needing their own layout. */
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 64%;
    height: 56%;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.pencil-row[b-n755obi5r9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex: 1;
    /* Without this, flex refuses to shrink rows below the text's natural
       line box and the cluster silently overflows its container. */
    min-height: 0;
}

.pencil-cell[b-n755obi5r9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.45rem, 1.2vw, 0.72rem);
    line-height: 1;
    font-weight: 600;
    /* Solid mark colour (--mark): must clear WCAG AA against every cage tint and the
       amber hint / colour washes layered over them, in both themes — slate-800 on the
       pale light tints, a light slate on the dark desaturated tints. */
    color: var(--mark);
    font-family: 'Fira Code', 'Consolas', monospace;
}

/* A player-underlined mark (PlayState.ToggleMarkUnderline): colour-free emphasis that survives
   B&W mode and reads for anyone who cannot separate the three scratch-colour hues.
   Drawn as a positioned rule rather than text-decoration, because the cluster has no vertical
   slack to lend a text underline: the three rows are flush 1fr slices and at <=500px the row is
   *exactly* the glyph's line-height (measured 9.28px row for a 9.28px font), so a line placed
   below the baseline lands on the next row's digit -- an underlined 3 sitting over a 6 read as the
   fraction 3/6. Anchoring to the span and insetting from its bottom edge means the rule is
   geometrically incapable of leaving its own row at any board size. Width is ~one monospace
   advance so it tracks the digit rather than the flex cell, and everything scales in em. */
.pencil-cell--underlined[b-n755obi5r9] {
    position: relative;
}

.pencil-cell--underlined[b-n755obi5r9]::after {
    content: '';
    position: absolute;
    bottom: 0.04em;
    left: 50%;
    width: 0.62em;
    transform: translateX(-50%);
    height: 0.09em;
    background: currentColor;
    pointer-events: none;
}

/* B&W board (PlayState.BlackAndWhiteBoard): drop the per-cage tints for one neutral fill.
   Implemented by zeroing the cage saturation, not by overriding `background`, so every fill that
   composes with the tint (the hint context wash below) follows automatically. It is also the safe
   way to do it for contrast: app.css tunes every board foreground against the worst case over the
   hsl(*, --cage-s, --cage-l) hue family, and a grey at the same --cage-l has a luminance strictly
   inside that family's range -- so no measured ratio can worsen and tools/contrast-check.py needs
   no new case. Cages stay readable from the dotted edges and sum chips, and nothing that colours a
   *meaning* is touched. */
.play-grid--bw .play-cell[b-n755obi5r9] {
    --cage-s: 0%;
}

/* ---- states ---- */
.play-cell.in-selection[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--selection-ring-soft);
    z-index: 4;
}

/* Every selected cell gets a translucent fill on top of its cage tint, so a
   missed cell in a drag is obvious at a glance (the ring alone was too subtle
   against the pastel tints). Sits under the value/pencil text (z-index 2). */
.play-cell.in-selection[b-n755obi5r9]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--selection-fill);
    z-index: 1;
    pointer-events: none;
}

.play-cell.selected[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--selection-ring);
    z-index: 5;
}

.play-cell.conflict[b-n755obi5r9] {
    background: linear-gradient(180deg, var(--conflict-bg-top) 0%, var(--conflict-bg-bottom) 100%);
}

.play-cell.conflict .value--player[b-n755obi5r9],
.play-cell.conflict .value--coach[b-n755obi5r9],
.play-cell.conflict .value--given[b-n755obi5r9] {
    color: var(--conflict-text);
}

.play-cell.hl-set[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--hint-set), 0 0 16px var(--hint-set-glow);
    z-index: 4;
}

.play-cell.hl-elim[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--hint-elim);
    z-index: 4;
}

/* Action-neutral location ring shown before placement/elimination semantics. */
.play-cell.hl-focus[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--hint-focus);
    z-index: 4;
}

/* The supporting house/cage for a shown hint. This is intentionally a quiet
   fill rather than another competing ring: action targets stay unambiguous.
   The amber wash composes over the same hue-based cage tint as .play-cell. */
.play-cell.hl-context[b-n755obi5r9] {
    background: linear-gradient(var(--hint-context-wash), var(--hint-context-wash)), hsl(var(--cage-h, 222), var(--cage-s), var(--cage-l));
}

.play-cell.hl-conflict[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--conflict-ring);
    z-index: 4;
}

/* Solution-check flags: a warm amber ring, distinct from the red rule-conflict ring. */
.play-cell.hl-check[b-n755obi5r9] {
    box-shadow: inset 0 0 0 3px var(--check-ring), 0 0 14px var(--check-glow);
    z-index: 4;
}

/* Same-digit highlight: a blue FILL tint (not a ring) that composes with the
   selection/conflict/hint rings above and with the cage tint below, sitting under
   the value and pencil text (z-index 2). Strong tier = a cell holding the digit;
   faint tier = an empty cell noting it as a pencil mark. */
.play-cell.hl-value-match[b-n755obi5r9]::after,
.play-cell.hl-mark-match[b-n755obi5r9]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.play-cell.hl-value-match[b-n755obi5r9]::after { background: var(--match-strong); }
.play-cell.hl-mark-match[b-n755obi5r9]::after { background: var(--match-faint); }

/* ---- player scratch colours ----
   A real child element (not a pseudo — those are taken by the selection/same-digit
   fills), layered at z-index 1 with the other fills and below the value/pencil text
   (z-index 2). Two parts: a soft full-cell wash for at-a-glance grouping that composes
   with the cage tint below (theme-tuned via --colour-N-wash so light pencil marks stay
   ≥4.5:1 on top in dark), plus a solid saturated corner dot in the free top-right
   corner (the cage label owns top-left). The dot hues are kept literal — they are
   identity indicators (violet / pink / teal, clear of the semantic palette) that read
   on both themes and must stay stable so a swatch always names the same colour. */
.cell-colour[b-n755obi5r9] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.cell-colour[b-n755obi5r9]::after {
    content: "";
    position: absolute;
    top: 0.16rem;
    right: 0.16rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.cell-colour--1[b-n755obi5r9] { background: var(--colour-1-wash); }
.cell-colour--1[b-n755obi5r9]::after { background: #9333ea; }
.cell-colour--2[b-n755obi5r9] { background: var(--colour-2-wash); }
.cell-colour--2[b-n755obi5r9]::after { background: #db2777; }
.cell-colour--3[b-n755obi5r9] { background: var(--colour-3-wash); }
.cell-colour--3[b-n755obi5r9]::after { background: #0d9488; }

/* ---- solved banner ----
   Saturated celebration gradient kept literal: it reads on both themes and is a
   deliberate one-off accent, not part of the themed surface language. */
.solved-banner[b-n755obi5r9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #04211a;
    box-shadow: 0 12px 26px rgba(5, 150, 105, 0.35);
}

/* Pure inline-SVG check badge so the celebration never renders as a tofu box on
   systems without an emoji font (was an emoji glyph). */
.solved-check[b-n755obi5r9] { display: inline-flex; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; }
.solved-check svg[b-n755obi5r9] { width: 100%; height: 100%; display: block; }
.solved-check circle[b-n755obi5r9] { fill: rgba(255, 255, 255, 0.92); }
.solved-check path[b-n755obi5r9] { fill: none; stroke: #059669; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.solved-title[b-n755obi5r9] { font-size: 1.3rem; font-weight: 800; }
.solved-sub[b-n755obi5r9] { font-size: 0.9rem; opacity: 0.85; }

/* ---- selection sum readout ---- */
.selection-sum[b-n755obi5r9] {
    width: min(80vh, 100%, 40rem);
    margin: 0.25rem auto 0;
    /* Two lines' worth of height reserved permanently: the readout always renders two lines
       (a placeholder second line when there's no cage detail — see the markup), so neither
       its appearance nor a whole-cage two-line detail ever shoves the number pad below it.
       An empty selection just hides the box in place — see .selection-sum--empty. */
    min-height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--sum-bg-top) 0%, var(--sum-bg-bottom) 100%);
    border: 1px solid var(--sum-border);
    box-sizing: border-box;
}

/* No selection: keep the reserved box but render nothing (no fill, no shift). */
.selection-sum--empty[b-n755obi5r9] { visibility: hidden; }

.selection-sum-lines[b-n755obi5r9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.selection-sum-line[b-n755obi5r9] {
    font-size: 0.92rem;
    color: var(--sum-text);
    font-variant-numeric: tabular-nums;
}

.selection-sum-value[b-n755obi5r9] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sum-value);
    font-variant-numeric: tabular-nums;
}

.selection-sum-strong[b-n755obi5r9] { font-weight: 700; color: var(--sum-value); }

.selection-sum-detail[b-n755obi5r9] { font-size: 0.82rem; color: var(--sum-detail); }

/* Kept compact so it never exceeds the two-line text block's height (which would
   re-grow the reserved bar and shift the pad). */
.selection-sum-calc[b-n755obi5r9] { flex: 0 0 auto; white-space: nowrap; padding: 0.3rem 0.7rem; font-size: 0.82rem; }

/* An invisible reserved line, holding the row height steady when there's no cage detail. */
.selection-sum-placeholder[b-n755obi5r9] { visibility: hidden; }

/* ---- number pad ---- */
.number-pad[b-n755obi5r9] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    width: min(80vh, 100%, 40rem);
    margin: 0.25rem auto 0;
}

.pad-key[b-n755obi5r9] {
    position: relative;
    padding: 0.85rem 0;
    border-radius: 10px;
    border: 1px solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-bg-top) 0%, var(--chip-bg-bottom) 100%);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--chip-text);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pad-key:hover:not(:disabled)[b-n755obi5r9] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--shadow-btn);
}

/* Small remaining-count in the corner of each digit key (9 minus placed). Kept
   subordinate to the 1.3rem key digit, but legible. */
.pad-key-remaining[b-n755obi5r9] {
    position: absolute;
    top: 0.28rem;
    right: 0.38rem;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* A digit with all nine placed: greyed out, still visible, and disabled below. */
.pad-key--complete[b-n755obi5r9] {
    background: var(--surface-struck);
    color: var(--text-disabled);
    border-color: var(--border);
}

.pad-key--wide[b-n755obi5r9] {
    grid-column: span 5;
    font-size: 1rem;
    background: linear-gradient(180deg, var(--danger-bg-top) 0%, var(--danger-bg-bottom) 100%);
    border-color: var(--error-border);
    color: var(--danger-text);
}

.pad-key:disabled[b-n755obi5r9] { opacity: 0.5; cursor: not-allowed; }

/* ---- rails ---- */
.play-rail[b-n755obi5r9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1.5rem;
}

.play-rail--coach[b-n755obi5r9] { position: static; }

/* Desktop: DOM order fills the three columns — coach | board | controls.
   The stacked (single-column) ordering is applied inside the media query. */

.rail-field[b-n755obi5r9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rail-field label[b-n755obi5r9] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-label); }
.rail-field select[b-n755obi5r9] { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-input); background: var(--input-bg); color: var(--text-primary); }

.rail-json[b-n755obi5r9] { margin-top: 0.9rem; font-size: 0.9rem; }
.rail-json summary[b-n755obi5r9] { cursor: pointer; font-weight: 600; color: var(--text-label); }
.rail-json textarea[b-n755obi5r9] { min-height: 8rem; margin-top: 0.6rem; }
.rail-json .app-button[b-n755obi5r9] { margin-top: 0.4rem; }

.control-row[b-n755obi5r9] { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.control-row .app-button[b-n755obi5r9] { flex: 1; min-width: 4.5rem; }

/* ---- scratch colour palette ---- */
.colour-row[b-n755obi5r9] { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }

/* Names the swatch row so the dots don't read as mystery controls. */
.colour-caption[b-n755obi5r9] { font-size: 0.8rem; font-weight: 600; color: var(--text-label); margin-right: 0.15rem; }

.colour-swatch[b-n755obi5r9] {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.colour-swatch:hover:not(:disabled)[b-n755obi5r9] { transform: translateY(-1px); box-shadow: 0 4px 10px var(--shadow-btn); }
.colour-swatch:disabled[b-n755obi5r9] { opacity: 0.45; cursor: not-allowed; }

/* Match the in-cell corner-dot identity hues so a swatch names the colour it paints.
   Kept literal for the same identity-stability reason as the dots. */
.colour-swatch--1[b-n755obi5r9] { background: #9333ea; }
.colour-swatch--2[b-n755obi5r9] { background: #db2777; }
.colour-swatch--3[b-n755obi5r9] { background: #0d9488; }

/* Active = the whole selection already carries this colour (next click clears it):
   a page-coloured gap then a text-coloured ring, legible over any hue in both themes
   (white gap + dark ring on light; dark gap + light ring on dark). */
.colour-swatch--active[b-n755obi5r9] { box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--text-primary); }

.colour-swatch--clear[b-n755obi5r9] {
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.colour-clear-all[b-n755obi5r9] { flex: 0 0 auto; margin-left: auto; font-size: 0.8rem; padding: 0.3rem 0.6rem; }

.control-hint[b-n755obi5r9] { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
/* Chip text is explicit (--kbd-text) so the small 0.75rem glyph clears WCAG AA
   (4.5:1) on the --kbd-bg chip in both themes. */
.control-hint kbd[b-n755obi5r9] {
    background: var(--kbd-bg); color: var(--kbd-text); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.75rem; font-family: monospace;
}

/* ---- coach ---- */
.coach-card[b-n755obi5r9] { display: flex; flex-direction: column; gap: 0.75rem; }

.coach-tech[b-n755obi5r9] {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.22rem 0.5rem; border-radius: 999px; background: var(--coach-tech-bg); color: var(--coach-tech-text);
}

.coach-idle[b-n755obi5r9] { margin: 0; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.45; }

/* Transient "here's what Apply just did" flash, shown above the idle prompt for ~4s
   or until the next action. Pure-CSS check (rotated border) so it never renders tofu. */
.coach-confirm[b-n755obi5r9] {
    margin: 0; display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.9rem; font-weight: 600; color: var(--coach-confirm-text); line-height: 1.4;
    padding: 0.5rem 0.65rem; border-radius: 8px;
    background: var(--coach-confirm-bg); border: 1px solid var(--coach-confirm-border);
}
.coach-confirm[b-n755obi5r9]::before {
    content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.28rem;
    border-left: 2.5px solid var(--coach-check); border-bottom: 2.5px solid var(--coach-check);
    transform: rotate(-45deg); margin-top: -0.16rem;
}

.coach-nudge[b-n755obi5r9] { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }

/* The two search lines share one live region, so the card's own flex gap no longer separates them;
   the detail line's top margin below is what spaces them. */
.coach-search-status[b-n755obi5r9] { display: block; }

/* Subordinate to the nudge above it: this is the detail line, and it changes while the nudge stays put. */
.coach-searching-technique[b-n755obi5r9] {
    margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--text-label); line-height: 1.4; overflow-wrap: anywhere;
}

.coach-explanation[b-n755obi5r9] {
    margin: 0; font-size: 0.92rem; color: var(--text-label); line-height: 1.5;
    padding: 0.6rem 0.7rem; background: var(--surface-inset); border-radius: 8px; border: 1px solid var(--inset-border);
}

.coach-highlight-note[b-n755obi5r9] { margin: -0.15rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); }

/* Legend for the shown hint's grid highlights: one entry per highlight kind actually
   present. Swatches mirror the board's ring/wash styling (.hl-set / .hl-elim / .hl-context
   above) and are decorative (aria-hidden); the adjacent text carries the meaning. Kept to a
   single wrapping row. Colours flow through the same hint variables as the board so both
   retint from one value each. */
.coach-legend[b-n755obi5r9] {
    list-style: none; margin: 0.1rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem;
    font-size: 0.8rem; line-height: 1.3; color: var(--text-secondary);
}
.coach-legend-item[b-n755obi5r9] { display: inline-flex; align-items: center; gap: 0.35rem; }
.coach-legend-swatch[b-n755obi5r9] {
    box-sizing: border-box; flex: 0 0 auto; width: 0.75rem; height: 0.75rem;
    border-radius: 3px; background: var(--surface-page);
}
.coach-legend-swatch--set[b-n755obi5r9] { box-shadow: inset 0 0 0 2px var(--hint-set); }
.coach-legend-swatch--elim[b-n755obi5r9] { box-shadow: inset 0 0 0 2px var(--hint-elim); }
.coach-legend-swatch--context[b-n755obi5r9] {
    background: var(--hint-context-wash); border: 1px solid var(--inset-border);
}

.coach-flag[b-n755obi5r9] {
    margin: 0; font-size: 0.95rem; color: var(--text-label); line-height: 1.45;
    padding: 0.6rem 0.7rem; border-radius: 8px; background: var(--surface-inset); border: 1px solid var(--inset-border);
}

.coach-flag--conflict[b-n755obi5r9] {
    color: var(--danger-text); background: var(--danger-bg); border-color: var(--error-border); font-weight: 600;
}

/* Indeterminate progress: the search has no deadline, so there is no fraction to show. The bar says
   "still working" and the sweep counter beside it says how far it has got. */
.coach-progress[b-n755obi5r9] {
    height: 4px; border-radius: 2px; overflow: hidden;
    background: var(--surface-inset); border: 1px solid var(--inset-border);
}

.coach-progress-bar[b-n755obi5r9] {
    width: 40%; height: 100%; border-radius: 2px; background: var(--accent-strong, currentColor);
    animation: coach-progress-slide-b-n755obi5r9 1.4s ease-in-out infinite;
}

@keyframes coach-progress-slide-b-n755obi5r9 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .coach-progress-bar[b-n755obi5r9] { animation: none; width: 100%; opacity: 0.5; }
}

/* The check's own progress line. Matches the coach's wording and rhythm deliberately: both are
   worker-hosted searches with no knowable extent, and a player should not have to learn two
   vocabularies for "this is running and you may stop it". */
.check-progress-line[b-n755obi5r9] {
    margin: 0.4rem 0 0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.check-summary[b-n755obi5r9] {
    margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.4; font-weight: 600;
    padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid transparent;
}
.check-summary--ok[b-n755obi5r9] {
    color: var(--success-text); background: var(--success-bg); border-color: var(--success-border);
}
.check-summary--flagged[b-n755obi5r9] {
    color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border);
}

.coach-steps[b-n755obi5r9] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 12rem; overflow-y: auto; flex-shrink: 0; }

.coach-step[b-n755obi5r9] {
    font-size: 0.88rem; padding: 0.4rem 0.6rem; border-radius: 7px; border: 1px solid var(--inset-border);
    background: var(--surface-inset);
}

.coach-step--set[b-n755obi5r9] { border-color: var(--success-border); color: var(--success-text); }
.coach-step--elim[b-n755obi5r9] { border-color: var(--error-border); color: var(--danger-text); }

.coach-actions[b-n755obi5r9] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.engine-details[b-n755obi5r9] { margin-top: 0.25rem; font-size: 0.82rem; color: var(--text-secondary); }
.engine-details summary[b-n755obi5r9] { cursor: pointer; font-weight: 600; }
.engine-grid[b-n755obi5r9] {
    display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin-top: 0.5rem;
}
.engine-grid span:nth-child(odd)[b-n755obi5r9] { font-weight: 600; color: var(--text-label); }

/* ---- cage combinations ---- */
.cage-combo-card[b-n755obi5r9] { display: flex; flex-direction: column; gap: 0.6rem; }
.cage-combo-card .panel-header[b-n755obi5r9] { position: relative; }

.combo-list[b-n755obi5r9] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.combo-chip[b-n755obi5r9] {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-bg-top) 0%, var(--chip-bg-bottom) 100%);
    color: var(--chip-text);
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.combo-chip:hover[b-n755obi5r9] { box-shadow: 0 4px 10px var(--shadow-btn); }

.combo-chip--struck[b-n755obi5r9] {
    text-decoration: line-through;
    text-decoration-color: var(--strike);
    text-decoration-thickness: 2px;
    color: var(--text-disabled);
    background: var(--surface-struck);
    opacity: 0.7;
}

.combo-calc-inputs[b-n755obi5r9] { display: flex; gap: 0.6rem; }

.combo-calc-field[b-n755obi5r9] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-label); flex: 1; }

.combo-calc-field input[b-n755obi5r9] {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* ---- collapsed puzzle loader (while playing) ---- */
.loader-collapsed > summary[b-n755obi5r9] {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-label);
    list-style: revert;
}

.loader-collapsed[open] > summary[b-n755obi5r9] { margin-bottom: 0.85rem; }

.loader-body[b-n755obi5r9] { display: flex; flex-direction: column; gap: 0.6rem; }

/* Raw parser text kept as a secondary, collapsed detail under the friendly lead. */
.error-detail[b-n755obi5r9] { margin-top: 0.5rem; font-size: 0.82rem; }
.error-detail summary[b-n755obi5r9] { cursor: pointer; font-weight: 600; color: var(--error-detail-text); }
.error-detail-text[b-n755obi5r9] {
    margin: 0.4rem 0 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem; color: var(--error-detail-text); line-height: 1.4; word-break: break-word;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    /* Single column: board → coach → reasoning aids → controls/loader. Drop the
       desktop area template so the items flow in one column by their order. */
    .play-layout[b-n755obi5r9] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
    }
    /* Drop the named-area placement too: with the area template gone, a leftover
       grid-area name spawns implicit tracks and the items collapse. Reset to auto so
       they flow down the single column purely by `order`. */
    .play-main[b-n755obi5r9], .play-rail--coach[b-n755obi5r9], .play-rail--aids[b-n755obi5r9], .play-rail--right[b-n755obi5r9] { grid-area: auto; }
    .play-main[b-n755obi5r9] { order: 0; }
    .play-rail--coach[b-n755obi5r9] { order: 1; }
    .play-rail--aids[b-n755obi5r9] { order: 2; }
    .play-rail--right[b-n755obi5r9] { order: 3; }
    .play-rail[b-n755obi5r9] { position: static; }
    .play-grid[b-n755obi5r9] { width: 100%; }
}

/* A phone has roughly 40px cells; the desktop cage badge then takes over the
   square and leaves too little room for pencil marks. Keep only the useful sum
   at this size and tuck it tighter into its corner. */
@media (max-width: 500px) {
    .play-layout[b-n755obi5r9] { gap: 1rem; }
    .play-grid-frame[b-n755obi5r9] { padding: 0.42rem; border-radius: 13px; }
    .play-grid[b-n755obi5r9] { gap: 0.08rem; }
    .play-cell[b-n755obi5r9] { border-radius: 4px; }
    .cage-label[b-n755obi5r9] { top: 0.08rem; left: 0.1rem; font-size: 0.49rem; padding: 0.03rem 0.1rem; border-radius: 3px; }
    .cage-edge--top[b-n755obi5r9], .cage-edge--bottom[b-n755obi5r9] { left: 0.16rem; right: 0.16rem; }
    .cage-edge--left[b-n755obi5r9], .cage-edge--right[b-n755obi5r9] { top: 0.16rem; bottom: 0.16rem; }
    .cage-edge--top[b-n755obi5r9] { top: 0.1rem; } .cage-edge--bottom[b-n755obi5r9] { bottom: 0.1rem; }
    .cage-edge--left[b-n755obi5r9] { left: 0.1rem; } .cage-edge--right[b-n755obi5r9] { right: 0.1rem; }
    .pencil[b-n755obi5r9] { top: 58%; width: 60%; height: 50%; }
    .pencil-cell[b-n755obi5r9] { font-size: clamp(0.38rem, 2.5vw, 0.58rem); }
    .value[b-n755obi5r9] { font-size: clamp(1rem, 8vw, 1.55rem); }
    .selection-sum[b-n755obi5r9], .number-pad[b-n755obi5r9] { width: 100%; }
    .selection-sum[b-n755obi5r9] { min-height: 3.25rem; padding: 0.42rem 0.6rem; }
    .number-pad[b-n755obi5r9] { gap: 0.35rem; }
    .pad-key[b-n755obi5r9] { padding: 0.7rem 0; }

}
/* /Components/PlayOptions.razor.rz.scp.css */
summary[b-ccfrc5lwki] { cursor: pointer; font-weight: 600; color: var(--text-label); }
.options-body[b-ccfrc5lwki] { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.9rem; }
.options-field[b-ccfrc5lwki] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-label); }
select[b-ccfrc5lwki] { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-input); background: var(--input-bg); color: var(--text-primary); }
.options-toggle[b-ccfrc5lwki] { display: flex; align-items: start; gap: 0.5rem; font-size: 0.9rem; color: var(--text-label); cursor: pointer; }
input[b-ccfrc5lwki] { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.15rem; cursor: pointer; accent-color: var(--btn-accent-border); }
.options-help[b-ccfrc5lwki] { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary); }

.options-help kbd[b-ccfrc5lwki] { background: var(--kbd-bg); color: var(--kbd-text); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.75rem; font-family: monospace; }

fieldset[b-ccfrc5lwki] { position: relative; display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; margin: 0; padding: 0.7rem; border: 1px solid var(--inset-border); border-radius: 8px; }
legend[b-ccfrc5lwki] { float: none; width: auto; margin: 0; padding: 0 0.25rem; font-size: 0.9rem; font-weight: 600; color: var(--text-label); }
.options-toggle--disabled[b-ccfrc5lwki] { opacity: 0.6; cursor: default; }
/* /Components/PuzzleEditor.razor.rz.scp.css */
.editor-root[b-c9rypr6ucx] {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(15rem, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin: 0 0 1.75rem;
    box-sizing: border-box;
}

.editor-main[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editor-toolbar[b-c9rypr6ucx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.editor-toolbar button[b-c9rypr6ucx] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #b9c3d0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.editor-toolbar button:hover:not(:disabled)[b-c9rypr6ucx] {
    box-shadow: 0 4px 10px rgba(25, 46, 91, 0.12);
}

.editor-toolbar button.active[b-c9rypr6ucx] {
    background: #2d8cff;
    color: #fff;
    border-color: #2d8cff;
    box-shadow: 0 6px 16px rgba(45, 140, 255, 0.35);
}

.editor-toolbar button:disabled[b-c9rypr6ucx] {
    cursor: not-allowed;
    opacity: 0.55;
}

.editor-grid[b-c9rypr6ucx] {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    background: #0f172a;
    padding: 0.4rem;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    gap: 0.12rem;
    touch-action: none;
}

/* The ARIA grid needs a row between the grid and its cells; display:contents keeps the 9-column
   layout exactly as it was while leaving role="row" in the accessibility tree. */
.grid-row[b-c9rypr6ucx] {
    display: contents;
}

.editor-grid:focus[b-c9rypr6ucx] {
    outline: 3px solid #1152a3;
    outline-offset: 2px;
}

.editor-cell[b-c9rypr6ucx] {
    position: relative;
    background: #ffffff;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1px solid #d7dee8;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: box-shadow 0.1s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.editor-cell.nonet-right[b-c9rypr6ucx] {
    border-right: 3px solid #1c1f23;
}

.editor-cell.nonet-bottom[b-c9rypr6ucx] {
    border-bottom: 3px solid #1c1f23;
}


.editor-cell:hover[b-c9rypr6ucx] {
    transform: translateY(-1px);
}

.editor-cell.selected[b-c9rypr6ucx] {
    box-shadow: inset 0 0 0 3px rgba(46, 204, 113, 0.8);
}

.editor-cell.dragging[b-c9rypr6ucx] {
    box-shadow: inset 0 0 0 3px rgba(46, 204, 113, 0.45);
}

.editor-cell.active[b-c9rypr6ucx] {
    box-shadow: inset 0 0 0 3px rgba(45, 140, 255, 0.65);
}

/* Keyboard focus indicator. #10243d is near-black, so it clears the 3:1 non-text bar against every
   cell background this grid uses (white and the pastel cage palette, lightest #fdf2d5 at ~14:1),
   and the white inset keeps it legible where a cell also carries the green selection ring. */
.editor-cell.focused[b-c9rypr6ucx] {
    box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #10243d;
}

.editor-cell.focused.selected[b-c9rypr6ucx] {
    box-shadow: inset 0 0 0 2px rgba(46, 204, 113, 0.9), inset 0 0 0 4px #10243d;
}

.cage-badge--pending .cage-sum[b-c9rypr6ucx] {
    padding: 0 0.18rem;
    border-radius: 4px;
    background: #10243d;
    color: #ffffff;
    text-shadow: none;
}

.editor-cell .given[b-c9rypr6ucx] {
    font-size: 1.7rem;
    font-weight: 600;
    color: #2f3c4c;
}

.editor-cell .given.placeholder[b-c9rypr6ucx] {
    color: transparent;
}

.cage-badge[b-c9rypr6ucx] {
    position: absolute;
    top: 0.22rem;
    left: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.05;
    color: #1c1f23;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.cage-badge .cage-sum[b-c9rypr6ucx] {
    font-size: 0.85rem;
    font-weight: 700;
}

.cage-badge .cage-label[b-c9rypr6ucx] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}


.editor-side[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
}


.cage-form[b-c9rypr6ucx], .value-form[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cage-form h4[b-c9rypr6ucx], .value-form h4[b-c9rypr6ucx], .cage-list-wrapper h4[b-c9rypr6ucx] {
    margin: 0 0 0.65rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2933;
}


.cage-form label[b-c9rypr6ucx], .value-form label[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.cage-form input[b-c9rypr6ucx], .value-form input[b-c9rypr6ucx] {
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #c7d0de;
    background: #fff;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cage-form-actions[b-c9rypr6ucx] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
}

.cage-form-actions .link[b-c9rypr6ucx] {
    background: none;
    border: none;
    padding: 0;
    color: #1152a3;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.cage-form-actions .primary[b-c9rypr6ucx] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #2d8cff;
    background: linear-gradient(180deg, #4da6ff 0%, #2d8cff 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(45, 140, 255, 0.35);
}

.value-target[b-c9rypr6ucx] {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.value-pad[b-c9rypr6ucx] {
    display: grid;
    grid-template-columns: repeat(5, minmax(2.5rem, 1fr));
    gap: 0.5rem;
}


.value-pad button[b-c9rypr6ucx] {
    padding: 0.55rem;
    border-radius: 6px;
    border: 1px solid #c3ccda;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.value-pad button:hover[b-c9rypr6ucx] {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.value-pad button.primary[b-c9rypr6ucx] {
    background: #2d8cff;
    border-color: #2d8cff;
    color: #fff;
    box-shadow: 0 8px 18px rgba(45, 140, 255, 0.4);
}


.cage-list-wrapper[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cage-list[b-c9rypr6ucx] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}


.cage-list-item[b-c9rypr6ucx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d9e1ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}


.cage-bubble[b-c9rypr6ucx] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}


.cage-color-dot[b-c9rypr6ucx] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

.cage-count[b-c9rypr6ucx] {
    font-size: 0.8rem;
    color: #5f6c7b;
}


.cage-label-tag[b-c9rypr6ucx] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1c2d48;
}


.cage-list-item .link[b-c9rypr6ucx] {
    background: none;
    border: none;
    color: #e55353;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cage-list-item .link:hover[b-c9rypr6ucx] {
    color: #c23030;
}


/* Every "Discarded the total N." message lands here, so it is the one panel element that must not
   be hard to read. It now uses the shared feedback tokens rather than a hard-coded light palette,
   which also gives it the dark scheme the rest of the app has. */
.error-text[b-c9rypr6ucx] {
    color: var(--error-text);
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    font-size: 0.92rem;
}

/* Visually hidden, still announced: selection size, commits and refusals go through here so a
   screen-reader user hears them without the visible panel repeating itself. */
.editor-live[b-c9rypr6ucx] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The panel card's own background is themed (--surface-card-*), so a single literal grey cannot
   clear 4.5:1 on both a near-white and a near-black card — the #4a5766 these three rules started
   with measured 2.35:1 on the dark card (2.73:1 against the page behind it). They take the themed
   text token instead: 5.25:1 light, 6.76:1 dark, both worst-case over the card's gradient. */
.cage-hint[b-c9rypr6ucx] {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.cage-bounds[b-c9rypr6ucx] {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cage-notice[b-c9rypr6ucx] {
    margin: 0;
    font-size: 0.88rem;
    color: #1f5132;
    background: #e7f6ec;
    border: 1px solid #b7dfc5;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
}

.cage-keys[b-c9rypr6ucx] {
    margin: 0.35rem 0 0;
    padding-left: 1.05rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cage-keys kbd[b-c9rypr6ucx] {
    font-family: inherit;
    font-size: 0.78rem;
    /* Bootstrap's kbd is white-on-dark; this one is dark-on-light, so restate the colour. */
    color: #1f2933;
    border: 1px solid #c7d0de;
    border-radius: 4px;
    padding: 0 0.25rem;
    background: #f4f6fb;
}

.cage-form .cage-form-row[b-c9rypr6ucx] {
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}


.cage-list-wrapper .empty[b-c9rypr6ucx] {
    margin: 0;
    font-size: 0.9rem;
    color: #607083;
}

@media (max-width: 920px) {
    .editor-root[b-c9rypr6ucx] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 100%;
    }

    .editor-grid[b-c9rypr6ucx] {
        width: min(90vw, 32rem);
    }

    .editor-side[b-c9rypr6ucx] {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.solver-status[b-itmdacz0o1] {
    margin: 0 16px 12px;
}

.status-badge[b-itmdacz0o1] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge--success[b-itmdacz0o1] {
    color: var(--badge-success-text);
    background: var(--badge-success-bg);
    border: 1px solid var(--badge-success-border);
}

.status-badge--warn[b-itmdacz0o1] {
    color: var(--badge-warn-text);
    background: var(--badge-warn-bg);
    border: 1px solid var(--badge-warn-border);
}
.page[b-itmdacz0o1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-itmdacz0o1] {
    flex: 1;
}

.sidebar[b-itmdacz0o1] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-itmdacz0o1] {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-itmdacz0o1]  a, .top-row[b-itmdacz0o1]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-itmdacz0o1]  a:hover, .top-row[b-itmdacz0o1]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-itmdacz0o1]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-itmdacz0o1] {
        justify-content: space-between;
    }

    .top-row[b-itmdacz0o1]  a, .top-row[b-itmdacz0o1]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-itmdacz0o1] {
        flex-direction: row;
    }

    .sidebar[b-itmdacz0o1] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-itmdacz0o1] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-itmdacz0o1]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-itmdacz0o1], article[b-itmdacz0o1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}