/* PixelQR — dark, monospace-ish, one accent. */
:root {
  --bg: #0e0e13;
  --panel: #16161d;
  --panel-2: #1b1b24;
  --line: #2b2b38;
  --ink: #e8e8ef;
  --dim: #9a9aab;
  --accent: #7cffb2;
  --accent-dim: #2f5c45;
  --bad: #ff7c7c;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.top { padding: 34px 0 10px; }
.top h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.06em;
}
.top h1 span { color: var(--accent); }
.top h1 .home { color: inherit; text-decoration: none; }
.top h1 .home:hover { color: var(--accent); }
.tagline { margin: 6px 0 0; color: var(--dim); }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  align-items: start;
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.panel-head h2 { margin: 0; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.hint { color: var(--dim); font-size: 12px; }
.head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* the zoom: bigger cells for finer detail, and a frame that scrolls when the
   grid outgrows it */
.zoom { display: flex; align-items: center; gap: 4px; }
.zoom-btn { padding: 3px 10px; font-size: 14px; line-height: 1.2; }
.zoom-level {
  min-width: 34px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.canvas-frame {
  background: #0a0a0f;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.editor-frame { overflow: auto; max-height: 82vh; justify-content: flex-start; }
#editor { cursor: crosshair; touch-action: none; max-width: none; height: auto; image-rendering: pixelated; margin: auto; }
.preview-frame { background: #fff; }
#preview { max-width: 100%; height: auto; image-rendering: pixelated; }

/* ---------- tools ---------- */
.tools {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 20px;
  align-items: start;
}
.group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.group-label {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chip {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--dim); }
.chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124, 255, 178, 0.08);
}

.legend { color: var(--dim); font-size: 12.5px; margin: 14px 0 0; }
.legend.dim { margin-top: 8px; opacity: 0.8; font-style: italic; }
.hidden { display: none !important; }

/* ---------- preview panel ---------- */
.badge {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 14px;
}
.badge.ok { border-color: var(--accent-dim); color: var(--accent); }
.badge.bad { border-color: #5c2f2f; color: var(--bad); }
.detail { color: var(--dim); font-size: 12.5px; margin-top: 8px; min-height: 1.4em; }
.stats { color: var(--dim); font-size: 12.5px; margin-top: 4px; }

/* ---------- settings ---------- */
.settings { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.field span b { color: var(--accent); font-weight: normal; }
.field input[type="url"], .field select {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.field input[type="url"]:focus, .field select:focus, .chip:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 1px;
}
.row { display: flex; gap: 10px; align-items: flex-end; }
.row .field.small { flex: 1; }
.row #shuffle-mask { margin-bottom: 2px; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---------- downloads ---------- */
.downloads { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip.dl { border-radius: 8px; }

/* ---------- how-to ---------- */
.howto {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 6px;
}
.howto summary { cursor: pointer; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }
.howto-body { margin-top: 12px; color: var(--ink); }
.howto-body p { max-width: 72ch; }
.howto-body ul { padding-left: 20px; }
.howto-body li { margin: 6px 0; max-width: 80ch; }
.fine { color: var(--dim); font-size: 13px; }

/* ---------- footer ---------- */
.foot { padding: 26px 20px 40px; color: var(--dim); font-size: 13px; }
.foot .dim { opacity: 0.75; }

/* ============ CRT theme ============
   When PixelQR runs inside the portfolio (or with ?crt=1) it wears the site's
   glass: same phosphor palette, same terminal faces, square edges. On its own
   it keeps the neutral look above — the theme is additive, not a rewrite. */
@font-face { font-family: 'vt323'; src: url('assets/fonts/vt323-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'silkscreen'; src: url('assets/fonts/silkscreen-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

html.crt {
  --bg: #0b0d0b;
  --panel: #0e130d;
  --panel-2: #101711;
  --line: #223026;
  --ink: #e4ebdf;
  --dim: #93a38f;
  --accent: #5df08a;
  --accent-dim: #2f9e5b;
  --bad: #ff9c7c;
  --display: 'vt323', var(--mono);
  --label: 'silkscreen', var(--mono);
}
html.crt body { font-family: var(--mono); }
html.crt .top { padding: 8px 0 0; }
html.crt .top h1 {
  font-family: var(--label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
html.crt .top h1 .home { text-decoration: none; }
html.crt .top h1 .home::after { content: ' ↗'; color: var(--accent-dim); }
html.crt .top h1 .home:hover::after { color: var(--accent); }
html.crt .tagline { display: none; }       /* the frame already carries the line */
html.crt .wrap { max-width: none; padding: 0 12px; }
/* Editor and preview stay side by side: this app is framed at ~500px wide, so
   the usual 880px collapse would stack them and make the frame scroll. It only
   stacks when the frame itself is genuinely too narrow for two columns. The
   drawing takes the wider column — it is the thing you work in. */
html.crt .layout {
  padding: 10px 0 12px; gap: 12px;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
}
@media (max-width: 400px) { html.crt .layout { grid-template-columns: 1fr; } }
html.crt .panel { padding: 10px; }
html.crt .panel-head { margin-bottom: 8px; }
html.crt .canvas-frame { margin-bottom: 10px; }
/* The preview scales to its panel; the editor does not — it is drawn at its
   own cell size so the zoom stays crisp, and the frame scrolls when the grid
   outgrows it. */
html.crt .preview-frame canvas { max-width: 100%; height: auto; }
html.crt .panel, html.crt .layout, html.crt .panel-head { min-width: 0; }
html.crt .tools { margin-top: 10px; gap: 9px 16px; }
html.crt .settings { margin-top: 10px; }
html.crt .panel { border-radius: 0; }
html.crt .panel-head h2 { font-family: var(--label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
html.crt .panel-head .hint { font-family: var(--label); font-size: 9px; }
html.crt .chip { border-radius: 0; font-family: var(--label); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
html.crt .section-title, html.crt h3 { font-family: var(--display); }
html.crt .canvas-frame { border-radius: 0; }
html.crt canvas { image-rendering: pixelated; }
html.crt .tools .group-label { font-family: var(--label); text-transform: uppercase; }