/* jigsaw.css — page layer for /jigsaw-puzzle-maker/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this adds the cutting-mat stage with the printed sheet
   lying on it (white in both themes: it is paper on the mat), the stage buttons and the photo row. */
.jp-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.jp-head h1{margin-bottom:.25rem}
.jp-head .sub{margin-bottom:.625rem}

/* ---------- the stage ---------- */
.duo.jp-duo>.pane-result{position:static}
@media (min-width:920px){
  .duo.jp-duo{grid-template-columns:minmax(19rem,.7fr) minmax(0,1.3fr)}
  .duo.jp-duo>.pane-result{position:sticky;top:1rem}
}
.jp-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))}
.jp-sheet{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -12px rgba(0,0,0,.6)}
.jp-sheet.jp-pan{cursor:grab;touch-action:none}
.jp-sheet.jp-pan:active{cursor:grabbing}
.jp-sheet:focus-visible,.jp-tool:focus-visible,.jp-stage .btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.jp-cap{margin:.5rem 0 0;font-family:var(--mono);font-size:.6875rem;line-height:1.45;letter-spacing:.01em;color:var(--mat-muted)}
.jp-actions{display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0 0}
.jp-actions .btn{flex:1 1 3.5rem;padding:0 .5rem;white-space:nowrap}
.jp-actions .btn.jp-main{flex:3 1 9.5rem;font-size:.9375rem}
.jp-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.jp-stage .btn:disabled{opacity:.6;cursor:progress}
.jp-tools{display:flex;flex-wrap:wrap;gap:.375rem;margin:.375rem 0 0}
.jp-tool{flex:1 1 auto;white-space:nowrap;min-height:2.25rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--mat-ink);border-radius:.4375rem;font:inherit;font-weight:600;font-size:.8125rem;cursor:pointer;padding:0 .625rem}
.jp-tool:hover{border-color:rgba(255,255,255,.7)}
.jp-tool:disabled{opacity:.5;cursor:progress}
.jp-tool.jp-photo{flex-grow:1.6;background:rgba(255,255,255,.1)}
.jp-msg{margin:.5rem 0 0;font-size:.875rem;font-weight:600;line-height:1.45;color:var(--mat-ink)}
.jp-msg:empty{display:none}

/* ---------- settings ---------- */
.jp-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.jp-form .modes{margin-bottom:.25rem}
.jp-form .modes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.modes.jp-counts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.jp-counts button{padding:.5rem .125rem;white-space:nowrap}
.jp-photo-on{margin:0 0 1rem;padding:.75rem;border:1px solid var(--line);border-radius:.625rem;background:var(--surface-2)}
.jp-photo-on[hidden]{display:none}
.jp-photo-on p{margin:0 0 .5rem;font-size:.875rem;line-height:1.45;overflow-wrap:anywhere}
.jp-zoom{display:flex;align-items:center;gap:.625rem;font-size:.875rem;font-weight:600;margin-bottom:.5rem}
.jp-zoom input{flex:1;accent-color:var(--accent)}
.jp-remove{min-height:2.25rem}
.jp-hint{margin:.875rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.5}
@media (prefers-reduced-motion:reduce){.jp-tool{transition:none}}

/* ---------- play on screen (T-PAJIGSAW.2): the table sits on the same mat, under the sheet ---------- */
.duo.jp-duo.jp-playing>.pane-result{position:static}
.jp-tool.jp-playbtn{flex-grow:1.6;border-color:var(--signal);color:var(--signal)}
.jp-play{margin:.75rem 0 0;padding:.625rem 0 0;border-top:1px solid rgba(255,255,255,.18);scroll-margin-top:.5rem}
.jp-play[hidden]{display:none}
.jp-play-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;margin:0 0 .5rem}
.jp-stat{font-family:var(--mono);font-size:.75rem;color:var(--mat-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.jp-stat b{font-size:1.0625rem;font-weight:600;color:var(--mat-ink);margin-left:.25rem}
.jp-play-btns{display:flex;gap:.375rem;margin-left:auto;flex:1 0 auto;justify-content:flex-end}
.jp-play-btns .jp-tool{flex:0 1 auto}
.jp-board{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:2px;cursor:grab}
.jp-board:active{cursor:grabbing}
.jp-done{margin:0 0 .5rem;padding:.5rem .75rem;border-radius:.5rem;background:var(--signal);color:var(--signal-ink);font-weight:700;line-height:1.4}
.jp-done[hidden]{display:none}
.jp-play .jp-msg{margin:0 0 .5rem}
.jp-play .jp-msg[hidden]{display:none}