/* The interface is deliberately neutral gray: colored surroundings would shift how the
   variations in the preview look. The ink swatches are the only color. */
:root {
  --bg: #f3f3f2;
  --panel: #ffffff;
  --text: #1b1b1b;
  --muted: #666666;
  --line: #d6d6d3;
  --control: #ebebe9;
  --selected: #1b1b1b;
  --selected-text: #ffffff;
  --error: #b3261e;
  --radius: 10px;
  --gap: 24px;
  --sheet-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 10px 30px rgb(0 0 0 / 0.14);
  color-scheme: light dark;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --panel: #1f1f1f;
    --text: #ececec;
    --muted: #a3a3a3;
    --line: #363636;
    --control: #292929;
    --selected: #ececec;
    --selected-text: #161616;
    --error: #ff8a80;
    --sheet-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 10px 30px rgb(0 0 0 / 0.5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; }

/* Sidebar (intro, controls, help) on the left; the sheet preview fills the right and stays
   in view while the sidebar scrolls. */
.workspace {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "intro    preview"
    "controls preview"
    "help     preview";
  column-gap: 40px;
  row-gap: 22px;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--gap);
}

.intro { grid-area: intro; }
.intro h1 { margin: 0 0 4px; font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1.2; }
.intro p { margin: 0; color: var(--muted); }

/* Controls */
.controls { grid-area: controls; display: grid; gap: 22px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }

.drop-zone {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 22px 16px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
  cursor: pointer;
}
.drop-zone input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.drop-zone:hover,
.drop-zone.dragging { border-color: var(--text); }
.drop-zone:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.drop-zone.has-file { border-style: solid; }
.drop-title { font-weight: 600; }
.drop-title .link { text-decoration: underline; text-underline-offset: 3px; }
.file-name { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }

.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented label { position: relative; }
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control);
  font-size: 0.9rem;
}
.segmented input:checked + span {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--selected-text);
}
.segmented input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }

.swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.swatch[data-ink="cyan"] { background: #00a3e0; }
.swatch[data-ink="magenta"] { background: #e0007a; }
.swatch[data-ink="yellow"] { background: #ffe500; }

/* Only the selected pattern's options are shown. */
.options { display: none; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.controls[data-pattern="hexagon"] .options[data-for="hexagon"],
.controls[data-pattern="grid"] .options[data-for="grid"],
.controls[data-pattern="strip"] .options[data-for="strip"] { display: grid; }

.hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
fieldset > .hint { margin-bottom: 10px; }

.option-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.field { display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.field.step { width: 90px; }

.number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.number-grid label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); }
button.quiet { padding: 8px 10px; font-weight: 500; font-size: 0.85rem; }

/* Preset: a slider and an exact-value box per adjustment. The color tracks run from the
   complementary color (less ink) to the ink itself (more ink); the tick marks 0. */
.sliders {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 8px 12px;
}
.sliders label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.sliders input[type="number"] { padding: 5px 8px; text-align: right; }
button.reset { margin-top: 12px; }

.slider {
  --track: var(--line);
  --tick: linear-gradient(to right, transparent calc(50% - 1px), var(--muted) calc(50% - 1px), var(--muted) calc(50% + 1px), transparent calc(50% + 1px));
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.slider[data-for="cyan"] { --track: linear-gradient(to right, #d0544c, var(--control), #1f9fd4); }
.slider[data-for="magenta"] { --track: linear-gradient(to right, #3fa45f, var(--control), #d23c8e); }
.slider[data-for="yellow"] { --track: linear-gradient(to right, #3d6ad4, var(--control), #e8c400); }
.slider[data-for="brightness"] { --track: linear-gradient(to right, #2a2a2a, #d9d9d9); }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--tick), var(--track); }
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tick), var(--track); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--panel);
}
.slider::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--text); border-radius: 50%; background: var(--panel); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming in on focus */
}
input[type="number"]:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

.status p { margin: 0; }
.summary { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.message { font-size: 0.9rem; }
.message:empty { display: none; }
.message[data-kind="error"] { color: var(--error); }

/* Status and buttons stay pinned to the bottom of the window while the controls scroll. */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
button {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.primary { background: var(--selected); border-color: var(--selected); color: var(--selected-text); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Help */
.help { grid-area: help; border-top: 1px solid var(--line); padding-top: 18px; font-size: 0.9rem; }
.help h2 { margin: 0 0 6px; font-size: 0.95rem; }
.help ol { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 4px; }
.help summary { cursor: pointer; font-weight: 600; }
.help dl { margin: 10px 0 0; }
.help dt { font-weight: 600; margin-top: 8px; }
.help dd { margin: 2px 0 0; color: var(--muted); }
.help details p { color: var(--muted); }
.help .privacy { margin: 16px 0 0; color: var(--muted); font-size: 0.85rem; }
code { font-size: 0.85em; }

/* Preview */
.preview {
  grid-area: preview;
  align-self: start;
  position: sticky;
  top: var(--gap);
  display: grid;
  justify-items: center;
}
#sheet,
.placeholder {
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--gap));
}
#sheet {
  display: block;
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: var(--sheet-shadow);
  transition: opacity 0.15s;
}
#sheet[hidden] { display: none; }
#sheet.stale { opacity: 0.35; }
.preview.has-sheet #sheet:not(.stale) { cursor: pointer; } /* click a variation to make it the preset */
#print-image { display: none; } /* only used when printing, see @media print */

.placeholder {
  display: grid;
  place-items: center;
  width: min(100%, calc((100vh - 2 * var(--gap)) * 210 / 297));
  aspect-ratio: 210 / 297;
  border: 2px dashed var(--line);
  border-radius: 4px;
  color: var(--muted);
}
.preview[data-paper="letter"] .placeholder {
  width: min(100%, calc((100vh - 2 * var(--gap)) * 8.5 / 11));
  aspect-ratio: 8.5 / 11;
}
.preview.has-sheet .placeholder { display: none; }

@media (max-width: 820px) {
  :root { --gap: 16px; }
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "controls" "preview" "help";
  }
  .preview { position: static; }
  #sheet, .placeholder { max-height: none; }
  .placeholder,
  .preview[data-paper="letter"] .placeholder { width: 100%; }
}

/* Printing from the browser: only the sheet, one page. The Print button swaps in the
   exported PNG (#print-image); Cmd+P prints the canvas. The @page rule for the chosen paper
   is written into #page-rule by main.js. */
@media print {
  body { background: #fff; }
  .intro, .controls, .help, .placeholder { display: none !important; }
  .workspace { display: block; max-width: none; margin: 0; padding: 0; }
  .preview { position: static; display: block; }
  #sheet,
  #print-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: 0 auto;
    box-shadow: none;
    opacity: 1;
    break-inside: avoid;
  }
  .preview.print-image-ready #sheet { display: none; }
  .preview.print-image-ready #print-image { display: block; }
}