/* sudoku.css — page layer for /sudoku-maker/. The shell (header, controls, buttons, explainer,
   footer) is /assets/polyatic.css; this adds the green mat stage with the printed sheet lying on it
   (white in both themes: it is paper), the tap-to-fill board and the form details.
   Built from polyatic's tokens only. */
.sd-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.sd-head h1{margin-bottom:.25rem}
.sd-head .sub{margin-bottom:.625rem}

/* ---------- the stage ---------- */
.duo.sd-duo>.pane-result{position:static}
@media (min-width:920px){
  .duo.sd-duo{grid-template-columns:minmax(19rem,.95fr) minmax(0,1.05fr)}
  .duo.sd-duo>.pane-result{position:sticky;top:1rem}
}
.sd-stage{color:var(--mat-ink);border-radius:var(--r);padding:.75rem;box-shadow:var(--shadow);min-width:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 1.5rem),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 1.5rem),linear-gradient(180deg,var(--mat),var(--mat-2))}
.sd-views.modes{margin:0 0 .5rem;background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.18)}
.sd-views.modes button{color:var(--mat-muted);padding:.375rem .25rem;font-size:.8125rem}
.sd-views.modes button[hidden]{display:none}
.sd-views.modes button.active{background:var(--mat-ink);color:var(--mat-2)}
.sd-canvas{display:block;margin:0 auto;max-width:100%;background:#fff;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -12px rgba(0,0,0,.6)}
.sd-canvas[hidden]{display:none}
.sd-stage .btn:focus-visible,.sd-stage button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.sd-cap{margin:.5rem 0 0;font-family:var(--mono);font-size:.6875rem;line-height:1.45;letter-spacing:.01em;color:var(--mat-muted)}
.sd-actions{display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0 0}
.sd-actions .btn{flex:1 1 3.5rem;padding:0 .5rem;white-space:nowrap}
.sd-actions .btn.sd-main{flex:3 1 8.5rem;font-size:.9375rem}
.sd-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.sd-stage .btn:disabled{opacity:.6;cursor:progress}
.sd-msg{margin:.5rem 0 0;font-size:.875rem;font-weight:600;line-height:1.45;color:var(--mat-ink)}
.sd-msg:empty{display:none}

/* ---------- Solve here: tap a square, tap a symbol ---------- */
.sd-play[hidden]{display:none}
.sd-pick.modes{margin:0 0 .5rem;background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.18)}
.sd-pick.modes:empty{display:none}
.sd-pick.modes button{color:var(--mat-muted);padding:.25rem;font-size:.8125rem}
.sd-pick.modes button.active{background:var(--mat-ink);color:var(--mat-2)}
.sd-board{display:grid;width:min(100%,30rem);aspect-ratio:1;margin:0 auto;background:#fff;border:3px solid #16181a;border-radius:2px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.sd-cell{appearance:none;border:0;border-right:1px solid #9a9ea2;border-bottom:1px solid #9a9ea2;background:#fff;color:#1d6a86;padding:0;margin:0;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;font:600 clamp(1rem,5.2vw,1.75rem)/1 var(--sans,system-ui);cursor:pointer;touch-action:manipulation}
.sd-board.n9 .sd-cell{font-size:clamp(.9rem,4.6vw,1.5rem)}
.sd-cell.bx{border-right:2px solid #16181a}
.sd-cell.by{border-bottom:2px solid #16181a}
.sd-cell.lastc{border-right:0}
.sd-cell.lastr{border-bottom:0}
.sd-cell.given{color:#16181a;font-weight:800;cursor:default}
.sd-cell.sel{background:#e9f7c2}
.sd-cell.peer{background:#f4f6ef}
.sd-cell.sel.peer{background:#e9f7c2}
.sd-cell.clash{color:#c92a2a;background:#ffe3e3}
.sd-cell svg{width:72%;height:72%;display:block}
.sd-cell:focus-visible{outline:3px solid #2a6fdb;outline-offset:-3px}
.sd-board.won .sd-cell{background:#e6f6ea}
.sd-board.won{border-color:#1f9d55}
.sd-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem;width:min(100%,30rem);margin:.625rem auto 0}
.sd-pad button{min-height:2.75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:var(--mat-ink);font:700 1.125rem/1 var(--sans,system-ui);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.sd-pad button svg{width:1.6rem;height:1.6rem}
.sd-pad button.clear{font-size:.8125rem;font-weight:600}
.sd-pad button:active{background:rgba(255,255,255,.22)}
.sd-playmsg{margin:.5rem 0 0;min-height:1.25rem;text-align:center;font-size:.875rem;font-weight:600;color:var(--mat-ink)}

/* ---------- settings ---------- */
.sd-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.sd-form .modes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.sd-form .modes button{padding:.5rem .125rem}
.sd-form [hidden]{display:none}
.sd-label{display:block;font-size:.875rem;font-weight:600;color:var(--ink-2);margin:.5rem 0 .25rem}
.sd-opt{font-weight:500;color:var(--muted);font-size:.8125rem}
.sd-input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:.5rem;padding:.5rem .625rem}
.sd-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sd-input[aria-invalid="true"]{border-color:var(--bad)}
.sd-hint{margin:.375rem 0 .75rem;font-size:.8125rem;color:var(--muted);line-height:1.5}
.sd-hint:empty{display:none}
.sd-err{color:var(--bad);font-weight:600}
.sd-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.875rem;line-height:1.45;color:var(--ink-2);cursor:pointer;margin:0 0 .625rem}
.sd-check input{margin-top:.2rem;accent-color:var(--accent);width:1rem;height:1rem;flex:none}
.sd-range{display:flex;align-items:center;gap:.625rem;font-size:.875rem;font-weight:600;margin:.25rem 0 .5rem;color:var(--ink-2)}
.sd-range span{min-width:5.5rem;font-variant-numeric:tabular-nums}
.sd-range input{flex:1;accent-color:var(--accent);min-height:2rem}