/* Pixelator. One stylesheet — the previous version had eight for a three-step
   tool, which meant nobody could answer "where is this rule?" without grep.

   Layout targets 320px up to a wide desktop window (R68/R69): games here are
   correctly phone-only, an app is not. Touch targets are >= 44px (R67). */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` is a low-specificity rule, so ANY
   class here that sets `display` beats it and the element stays visible. That
   shipped the help sheet open on first load and would have done the same to
   the restored banner. If an element can be hidden by attribute, this has to
   outrank its own layout rule. */
[hidden] { display: none !important; }

:root {
  --bg: #12151c;
  --bg2: #1a1f29;
  --line: #2a3240;
  --ink: #e9edf4;
  --dim: #9aa8bd;
  --accent: #f0a12e;
  --accentInk: #17202c;
  --danger: #f2685f;
  --radius: 14px;
  --pad: 14px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fa; --bg2: #ffffff; --line: #d8dfea;
    --ink: #17202c; --dim: #5b6779; --accentInk: #17202c;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
}

/* ---------- header ---------- */
#hdr {
  display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 0 10px;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
#hdr h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
#hdrSpace { flex: 1; }

.pill {
  min-width: 44px; min-height: 44px;
  border-radius: 999px; border: 2px solid var(--line);
  background: var(--bg2); color: inherit; font: inherit; font-size: 18px;
  cursor: pointer;
}
.pill:focus-visible, .btn:focus-visible, .board:focus-visible,
.swatch:focus-visible, summary:focus-visible, input:focus-visible,
.legend li:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---------- steps ---------- */
.step {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-top: 14px;
}
.step h2 {
  font-size: 17px; font-weight: 800;
  display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
.step h3 { font-size: 15px; font-weight: 800; margin: 16px 0 8px; }
.step h2 .n {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent); color: var(--accentInk);
  font-size: 14px; display: grid; place-items: center;
}
.hint { color: var(--dim); font-size: 13.5px; margin: 6px 0 10px; }
.hint.smallprint { font-size: 12.5px; margin-top: 10px; }

/* ---------- board picker ---------- */
.boards { display: flex; flex-wrap: wrap; gap: 8px; }
.board {
  flex: 1 1 140px; min-width: 132px;
  display: flex; align-items: center; gap: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left;
  border: 2px solid var(--line); border-radius: 12px;
  padding: 9px 11px; min-height: 56px; cursor: pointer;
}
.board[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.board .glyph { display: grid; gap: 2px; flex: 0 0 auto; }
.board .glyph .r { display: flex; gap: 2px; }
.board .glyph i {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--dim); display: block;
}
.board[aria-checked="true"] .glyph i { background: var(--accent); }
.board b { font-size: 14px; display: block; }
.board small { color: var(--dim); font-size: 11.5px; display: block; }

/* ---------- photo ---------- */
.drop {
  width: 100%; min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: inherit; font: inherit;
  border: 2px dashed var(--line); border-radius: 12px; cursor: pointer;
}
.drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dropIcon { font-size: 30px; }
.dropSub { color: var(--dim); font-size: 12.5px; }

.cropStage {
  position: relative; touch-action: none;
  background: #000; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
}
.cropStage canvas { display: block; max-width: 100%; }
.cropBox {
  position: absolute; border: 2px solid #fff; cursor: move;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.grip {
  position: absolute; width: 44px; height: 44px;
  display: block; touch-action: none;
}
.grip::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  background: #fff; border-radius: 3px;
}
.grip.nw { left: -22px; top: -22px; cursor: nwse-resize; }
.grip.nw::after { right: 6px; bottom: 6px; }
.grip.ne { right: -22px; top: -22px; cursor: nesw-resize; }
.grip.ne::after { left: 6px; bottom: 6px; }
.grip.sw { left: -22px; bottom: -22px; cursor: nesw-resize; }
.grip.sw::after { right: 6px; top: 6px; }
.grip.se { right: -22px; bottom: -22px; cursor: nwse-resize; }
.grip.se::after { left: 6px; top: 6px; }

/* ---------- controls ---------- */
.row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

.btn {
  min-height: 44px; padding: 0 15px;
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--bg); color: inherit; font: inherit; font-weight: 700;
  font-size: 14.5px; cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accentInk); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.btn[disabled] { opacity: 0.45; cursor: default; }

.fieldLabel { font-weight: 700; font-size: 14.5px; display: flex; justify-content: space-between; }
.fieldLabel output { color: var(--accent); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); }

.chk { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14.5px; font-weight: 700; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }

details summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 700; font-size: 14.5px;
}
.badge {
  background: var(--line); color: var(--ink);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700;
}

.swatchGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px; margin: 8px 0;
}
.swatch {
  aspect-ratio: 1; min-height: 44px; border-radius: 9px; cursor: pointer;
  border: 2px solid var(--line); position: relative; padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--accent); }
.swatch[aria-pressed="true"]::after {
  content: '✓'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 900;
  color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000;
}

/* ---------- pattern ---------- */
.patternStage {
  margin-top: 10px; overflow: auto; background: #0b0d12;
  border: 1px solid var(--line); border-radius: 10px;
  max-height: 70vh; -webkit-overflow-scrolling: touch;
  max-height: 70dvh;
  /* Without this the canvas's intrinsic width becomes the flex/grid minimum
     and pushes the whole page sideways instead of scrolling inside here. */
  min-width: 0;
}
#pattern { display: block; image-rendering: pixelated; }

/* ---------- legend ---------- */
.legend { list-style: none; display: grid; gap: 5px; }
.legend li {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 8px;
  border: 2px solid transparent; border-radius: 10px;
  background: var(--bg); cursor: pointer;
}
.legend li[aria-pressed="true"] { border-color: var(--accent); }
.legend .sw {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
}
.legend .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .code { color: var(--dim); font-size: 12px; font-weight: 700; }
.legend .ct { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; }

/* ---------- restored banner ---------- */
.restored {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg2));
  border: 1px solid var(--accent); border-radius: 12px; font-size: 14px;
}
.restored span { flex: 1; min-width: 180px; }

/* ---------- help sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 7, 12, 0.72); padding: 16px;
}
.sheetCard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; max-width: 480px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  max-height: 86dvh;
}
.sheetCard h2 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.sheetCard p { font-size: 14.5px; margin-bottom: 10px; }
.sheetCard .btn { width: 100%; margin-top: 6px; }

/* ---------- toast ---------- */
.toastHost {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-align: center;
  opacity: 0; transition: opacity 0.18s;
}
.toast.in { opacity: 1; }
.toast.bad { background: var(--danger); color: #fff; }

/* ---------- desktop: two columns, because an app is not a phone game ------ */
@media (min-width: 900px) {
  /* minmax(0, 1fr), NOT 1fr: a bare `1fr` is `minmax(auto, 1fr)`, and the auto
     minimum is the column's min-content width — so a 638px canvas widened the
     column and pushed 254px of horizontal scroll onto the whole page instead
     of scrolling inside .patternStage. */
  #app { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; }
  #hdr, #startedNote { grid-column: 1 / -1; }
  #step-result { grid-column: 2; grid-row: 2 / span 3; margin-top: 14px; min-width: 0; }
  .patternStage { max-height: calc(100vh - 340px); max-height: calc(100dvh - 340px); }
}

/* ---------- the printed sheet (R49-R52) ----------------------------------
   NOT a screenshot of the app. buildPrintSheet() assembles a real document
   into #printOut — an overview page, one page per pegboard, then the legend —
   and the app UI is hidden entirely. */
#printOut { display: none; }

@media print {
  #app { display: none !important; }
  #printOut { display: block !important; }
  body { background: #fff; color: #000; }

  .printPage { break-inside: avoid; page-break-inside: avoid; }
  .printPage.brk { break-before: page; page-break-before: always; }
  .printPage h2 { font-size: 18pt; margin-bottom: 4pt; }
  .printPage h3 { font-size: 14pt; margin-bottom: 6pt; }
  .printMeta { font-size: 10pt; margin-bottom: 8pt; }
  .printNote { font-size: 8.5pt; margin-top: 8pt; max-width: 60em; }
  .printPage canvas { max-width: 100%; height: auto; image-rendering: pixelated; }

  .printLegend { border-collapse: collapse; font-size: 10pt; width: 100%; max-width: 34em; }
  .printLegend th, .printLegend td { border: 1px solid #000; padding: 2pt 6pt; text-align: left; }
  .printLegend .sym { font-family: ui-monospace, monospace; font-weight: 700; text-align: center; }
  .printLegend .num { text-align: right; font-variant-numeric: tabular-nums; }
  .printLegend tr.tot td { font-weight: 700; }
  /* R52: the chip is decoration. The letter and the code carry the meaning, so
     the sheet still works from a printer that is out of cyan. */
  .printLegend .chip {
    display: inline-block; width: 10pt; height: 10pt; margin-right: 6pt;
    border: 1px solid #000; vertical-align: -1pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .printPage canvas { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* While assembling, keep the sheet off-screen rather than reflowing the app. */
body.printing #printOut { display: block; position: absolute; left: -10000px; top: 0; }

/* R-C6. Everything about the footer except these two facts comes from
   version.js, so an app needs no layout code of its own for it. */
#footer { max-width: 1100px; margin: 0 auto; padding-top: 10px;
  border-top: 1px solid var(--line, rgba(128,128,128,.25)); }