/* sitekits puzzle kit. One board (.pz-board) per page; the print stylesheet prints only .pz-print (the puzzle, its number and
   link, and the solution on a second page when asked). .pz-large (site/page setting or the visitor's checkbox) enlarges cells and type. */
.pz-app{margin:1rem 0 2rem}
.pz-top{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:flex-end;margin-bottom:.8rem}
.pz-levels,.pz-nav,.pz-bar,.pz-pad{display:flex;flex-wrap:wrap;gap:.45rem;align-items:flex-end}
.pz-level[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pz-numbox label{font-size:.8rem;margin:0}
.pz-numbox input{width:5.5rem}
.pz-print{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem}
.pz-done .pz-print{border-color:var(--accent);box-shadow:0 0 0 2px var(--tint)}
.pz-name{margin:0;font-size:1.25rem}
.pz-when{margin:.2rem 0 .9rem}
.print-only{display:none}
.pz-pad{justify-content:center;margin:.9rem 0 .2rem}
.pz-pad[hidden]{display:none}
.pz-key{min-width:44px;padding:.4rem .7rem;font-size:1.1rem}
.pz-bar{margin:.8rem 0 .3rem}
.pz-status{min-height:1.6em;font-weight:600;margin:.4rem 0}
.pz-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;align-items:center;margin:0}
.pz-toggle{display:inline-flex;gap:.45rem;align-items:center;font-weight:500;min-height:44px;margin:0}
.pz-time{font-variant-numeric:tabular-nums;font-weight:700}
.pz-checks dt{font-weight:700;margin-top:.8rem}
.pz-checks dd{margin:.2rem 0 0}

/* grids: sudoku, binary, word search */
.pz-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:100%;max-width:min(100%,calc(var(--n)*3rem));margin:0 auto;
  border:2px solid var(--text);background:var(--surface)}
.pz-c{aspect-ratio:1;min-width:0;margin:0;padding:0;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;
  background:var(--surface);color:var(--accent);font:inherit;font-weight:650;font-size:min(1.5rem,calc(55vw/var(--n)));line-height:1;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pz-c:focus-visible{outline-offset:-3px;position:relative;z-index:1;border-radius:0}
.pz-g{color:var(--text);font-weight:800;background:var(--tint)}
.pz-br{border-right:2px solid var(--text)}
.pz-bb{border-bottom:2px solid var(--text)}
.pz-sel{box-shadow:inset 0 0 0 3px var(--focus)}
.pz-bad{background:color-mix(in srgb,var(--error) 16%,var(--surface));color:var(--error)}
.pz-rev{text-decoration:underline dotted;text-underline-offset:.15em}
.pz-ws .pz-c{color:var(--text);border-color:var(--rule)}
.pz-ws .pz-f{background:var(--accent);color:var(--on-accent)}
.pz-ws .pz-f.pz-rev{background:var(--muted)}
.pz-theme{text-align:center;margin:0 0 .6rem}
.pz-words{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem;padding:0;margin:.9rem 0 0;font-weight:650;letter-spacing:.04em}
.pz-found{text-decoration:line-through;color:var(--muted)}

/* futoshiki: cells with a gap for the signs */
.pz-futoshiki{grid-template-columns:repeat(var(--m),minmax(0,1fr) minmax(0,.5fr)) minmax(0,1fr);border:0;background:none;max-width:min(100%,calc(var(--n)*4.3rem))}
.pz-futoshiki .pz-c{border:2px solid var(--text);border-radius:8px}
.pz-s{display:grid;place-items:center;font-weight:800;color:var(--text);font-size:min(1.3rem,calc(42vw/var(--n)));line-height:1}
.pz-sv{min-height:1.5rem}

/* nonogram: clue column and clue row around the cells */
.pz-nono{display:grid;grid-template-columns:max-content repeat(var(--n),minmax(0,1fr));width:100%;max-width:min(100%,calc(var(--n)*2.6rem + 5rem));margin:0 auto}
.pz-nc,.pz-nr{display:flex;font-size:min(.9rem,calc(40vw/var(--n)));line-height:1.15;color:var(--text)}
.pz-nc b,.pz-nr b{font-weight:650}
.pz-nc{flex-direction:column;justify-content:flex-end;align-items:center;padding:.25rem 0;border-bottom:2px solid var(--text)}
.pz-nr{justify-content:flex-end;align-items:center;gap:.35em;padding:0 .4em;border-right:2px solid var(--text)}
.pz-nono .pz-c{border-color:var(--muted);color:var(--muted)}
.pz-nono .pz-br{border-right:2px solid var(--text)}
.pz-nono .pz-bb{border-bottom:2px solid var(--text)}
.pz-nono .pz-on{background:var(--text)}

/* word scramble */
.pz-scr{max-width:36rem;margin:0 auto;padding-left:1.6rem}
.pz-scr li{margin:.55rem 0}
.pz-letters{display:inline-block;min-width:13.5rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:1.1rem;margin-right:.6rem}
.pz-scr .pz-in{width:12.5rem;max-width:100%;text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em}
.pz-ok .pz-in{border-color:var(--accent);background:var(--tint);font-weight:700}
.pz-scr .pz-bad{background:none}
.pz-scr .pz-bad .pz-in{border-color:var(--error)}

/* number target */
.pz-target{text-align:center;font-size:1.15rem;margin:0}
.pz-target b{font-size:2.2rem;color:var(--accent);margin-left:.3rem;font-variant-numeric:tabular-nums}
.pz-tiles,.pz-ops{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.7rem 0}
.pz-tile,.pz-op{min-width:56px;min-height:48px;padding:.3rem .6rem;font:inherit;font-weight:750;font-size:1.25rem;border:2px solid var(--text);border-radius:10px;
  background:var(--surface);color:var(--text);cursor:pointer}
.pz-op{min-width:48px;border-radius:999px;border-color:var(--accent);color:var(--accent)}
.pz-tile.pz-new{border-color:var(--accent);color:var(--accent)}
.pz-tile.pz-sel,.pz-op[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pz-tile.pz-used{opacity:.4;text-decoration:line-through;cursor:default}
.pz-steps,.pz-sollist{max-width:20rem;margin:.6rem auto;font-variant-numeric:tabular-nums;font-weight:600}

/* large print */
.pz-large .pz-grid{max-width:min(100%,calc(var(--n)*4rem))}
.pz-large .pz-futoshiki{max-width:min(100%,calc(var(--n)*5.4rem))}
.pz-large .pz-nono{max-width:min(100%,calc(var(--n)*3.4rem + 6rem))}
.pz-large .pz-c{font-size:min(2.1rem,calc(68vw/var(--n)));font-weight:800}
.pz-large .pz-s{font-size:min(1.7rem,calc(50vw/var(--n)))}
.pz-large .pz-nc,.pz-large .pz-nr{font-size:min(1.15rem,calc(50vw/var(--n)))}
.pz-large .pz-nc b,.pz-large .pz-nr b{font-weight:800}
.pz-large .pz-words,.pz-large .pz-theme,.pz-large .pz-steps{font-size:1.3rem}
.pz-large .pz-letters,.pz-large .pz-scr .pz-in{font-size:1.4rem}
.pz-large .pz-tile,.pz-large .pz-op{font-size:1.6rem;min-width:66px;min-height:58px}
.pz-large .pz-target b{font-size:2.8rem}
.pz-large .pz-name{font-size:1.5rem}

@media (max-width:480px){
  .pz-print{padding:.75rem .5rem}
  .pz-letters{min-width:0;display:block;margin:0 0 .25rem}
}

@media print{
  @page{margin:12mm}
  .pz-app{margin:0}
  .pz-print{border:0;border-radius:0;padding:0;background:#fff;box-shadow:none!important}
  .print-only{display:block}
  .pz-solution[hidden]{display:none!important}
  .pz-solution{break-before:page;page-break-before:always}
  .pz-name{font-size:16pt}
  .pz-when{color:#333}
  .pz-url{margin-top:5mm;color:#333}
  .pz-grid,.pz-nono{max-width:none!important;width:140mm;-webkit-print-color-adjust:exact;print-color-adjust:exact;border-color:#000}
  .pz-nono{width:150mm}
  .pz-futoshiki{width:130mm}
  .pz-c{color:#000!important;background:#fff!important;border-color:#777;box-shadow:none!important;font-size:calc(80mm/var(--n))!important}
  .pz-futoshiki .pz-c{border-color:#000!important}
  .pz-br,.pz-nr{border-right-color:#000!important}
  .pz-bb,.pz-nc{border-bottom-color:#000!important}
  .pz-c.pz-u{font-weight:400}
  .pz-nono .pz-on{background:#000!important}
  .pz-ws .pz-f{background:#d5d5d5!important}
  .pz-s{font-size:calc(52mm/var(--n))!important;color:#000}
  .pz-nc,.pz-nr{font-size:calc(52mm/var(--n))!important;color:#000}
  .pz-words{font-size:12pt;justify-content:flex-start;color:#000}
  .pz-found{color:#000}
  .pz-ops{display:none}
  .pz-tile,.pz-op{border-color:#000;color:#000!important;background:#fff!important}
  .pz-scr .pz-in{border:0;border-bottom:1px solid #000;border-radius:0;background:#fff}
  .pz-large .pz-grid{width:170mm}
  .pz-large .pz-nono{width:172mm}
  .pz-large .pz-futoshiki{width:160mm}
  .pz-large .pz-c{font-size:calc(112mm/var(--n))!important}
  .pz-large .pz-s,.pz-large .pz-nc,.pz-large .pz-nr{font-size:calc(70mm/var(--n))!important}
  .pz-large .pz-words{font-size:16pt}
  .pz-large .pz-name{font-size:20pt}
}