/* Shared stylesheet for the Game Boy Pixel Art course.
   Every lesson and reference page links this. The app's content.css owns the page
   chrome (navigator, header, footer); this file owns typography and the teaching
   blocks. */

:root {
  --paper: #f7f6f1;
  --ink: #14180f;
  --muted: #64695a;
  --rule: #d8d8cc;
  --accent: #3a6b2a;
  --panel: #fffffc;

  /* The four shades, named by job. Used by the widgets and the swatch blocks.
     Neutral working values: hue is applied at the end of a project, not the start. */
  --gb-paper: #eef0e8;
  --gb-light: #a8b09c;
  --gb-dark: #565f4c;
  --gb-ink: #1a1e16;
}

body {
  font: 1.05rem/1.65 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  padding-bottom: 2rem;
  -webkit-font-smoothing: antialiased;
}

.lesson-content > * { max-width: 34rem; }

h1, h2, h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 .4rem; }
h2 { font-size: 1.35rem; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.9rem 0 .4rem; }

.eyebrow {
  color: var(--muted);
  font: 600 .74rem/1.4 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.subtitle, .lede { color: var(--muted); font-size: 1.12rem; font-style: italic; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .16em; }

hr { max-width: 34rem; margin: 3rem 0; border: 0; border-top: 1px solid var(--rule); }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

code, kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
}

code { padding: .1em .3em; border-radius: .25em; background: color-mix(in srgb, var(--ink) 7%, transparent); }

table { border-collapse: collapse; font-size: .92rem; }
th, td { padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
th { font: 600 .78rem/1.3 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 1.2rem; }

/* ---- Pixel art display -------------------------------------------------- */

.pixel {
  display: block;
  background: #fff;
  image-rendering: pixelated;
}

figure { margin: 2rem 0; }

figure figcaption {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

/* A row of pixel-art panels with labels underneath. */
.plate {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate li { flex: 0 0 auto; margin: 0; text-align: center; }

.plate img {
  display: block;
  border: 1px solid var(--rule);
  background: #fff;
  image-rendering: pixelated;
}

.plate b {
  display: block;
  margin-top: .4rem;
  font: 600 .72rem/1.3 system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.plate small { display: block; color: var(--muted); font-size: .74rem; font-family: system-ui, sans-serif; }

/* ---- Swatches ----------------------------------------------------------- */

.swatches { display: flex; max-width: 34rem; margin: 1.5rem 0; border: 1px solid var(--rule); }
.swatches div { flex: 1; padding: 2.6rem .5rem .5rem; font: 600 .68rem/1.3 ui-monospace, monospace; }

/* ---- Teaching callout --------------------------------------------------- */

.rule-card {
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  border-left-width: 4px;
  border-radius: .3rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.rule-card p:first-child { margin-top: 0; }
.rule-card p:last-child { margin-bottom: 0; }
.rule-card strong { font-family: system-ui, sans-serif; }

/* ---- Widget shell (shared by every interactive component) --------------- */

.widget {
  max-width: none;
  margin: 2.5rem 0;
  padding: 1.2rem;
  border: 1px solid var(--rule);
  border-radius: .5rem;
  background: var(--panel);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .92rem;
}

.widget h3 { margin-top: 0; }

.widget button {
  padding: .45rem .8rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: .3rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.widget button:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.widget button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.widget button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

.widget .hint { color: var(--muted); font-size: .84rem; }

/* ---- shade-budget.js ---------------------------------------------------- */

.sb-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.sb-tool {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: .3rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}

.sb-tool:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.sb-tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sb-tool[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

.sb-chip { width: 1rem; height: 1rem; border: 1px solid rgba(0, 0, 0, .35); border-radius: 2px; }
.sb-tool kbd {
  padding: 0 .28rem;
  border: 1px solid var(--rule);
  border-radius: .2rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: .7rem;
}

.sb-canvas {
  display: block;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}

.sb-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.sb-readout { display: grid; gap: .3rem; margin: 1rem 0 .6rem; max-width: 26rem; }

.sb-bar { display: grid; grid-template-columns: 4rem 1fr 3.2rem; align-items: center; gap: .6rem; font-size: .82rem; }
.sb-bar-name { font-weight: 600; }
.sb-bar-track { height: .7rem; border: 1px solid var(--rule); border-radius: 2px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sb-bar-fill { display: block; height: 100%; width: 0; transition: width .12s linear; }
.sb-bar-value { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }

.sb-key,
.sb-outline { margin: .3rem 0; font-size: .84rem; color: var(--muted); }
.sb-key { font-variant-numeric: tabular-nums; }

.sb-verdict { margin: .5rem 0 .9rem; font-size: .88rem; font-weight: 600; }
.sb-verdict.is-pass { color: #216e39; }
.sb-verdict.is-fail { color: #8a4b12; }

.sb-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.sb-tint-label { font-size: .84rem; color: var(--muted); }
.sb-tint { padding: .3rem .4rem; border: 1px solid var(--rule); border-radius: .25rem; background: var(--panel); font: inherit; font-size: .84rem; }

.sb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- quiz.js ------------------------------------------------------------ */

.quiz-question { margin: 0 0 1.4rem; padding: 0; border: 0; }
.quiz-question:last-of-type { margin-bottom: .6rem; }
.quiz-question legend { padding: 0; font-weight: 600; font-size: .95rem; }
.quiz-options { display: grid; gap: .35rem; margin-top: .6rem; }

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--rule);
  border-radius: .3rem;
  cursor: pointer;
}

.quiz-option:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.quiz-option:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.quiz-option.is-right { border-color: #216e39; background: color-mix(in srgb, #216e39 10%, transparent); }
.quiz-option.is-wrong { border-color: #a33; background: color-mix(in srgb, #a33 8%, transparent); }
.quiz-feedback { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.quiz-score { margin-top: 1rem; font-weight: 600; font-size: .9rem; }

/* Figures holding pixel-art plates need more room than the prose column. */
.lesson-content > figure { max-width: 44rem; }
.lesson-content > .widget { max-width: 44rem; }

/* ---- key-shifter.js ----------------------------------------------------- */

.ks-stage { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }

.ks-panel { margin: 0; }

.ks-canvas {
  display: block;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: #fff;
  image-rendering: pixelated;
}

.ks-panel figcaption {
  margin-top: .45rem;
  color: var(--muted);
  font: 600 .76rem/1.3 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ks-controls { display: grid; gap: .35rem; margin: 1.1rem 0 .8rem; max-width: 24rem; }

.ks-row { display: grid; grid-template-columns: 1rem 1fr auto; align-items: center; gap: .55rem; font-size: .84rem; }
.ks-swatch { width: 1rem; height: 1rem; border: 1px solid rgba(0, 0, 0, .35); border-radius: 2px; }
.ks-row select { padding: .25rem .35rem; border: 1px solid var(--rule); border-radius: .25rem; background: var(--panel); font: inherit; font-size: .82rem; }
.ks-row select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.ks-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }

.ks-readout { margin: .4rem 0 .6rem; font-size: .84rem; font-variant-numeric: tabular-nums; }

/* ---- figure-ground.js --------------------------------------------------- */

.fg-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }

.fg-picker button {
  padding: .4rem .65rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: .3rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.fg-picker button:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.fg-picker button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fg-picker button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

.fg-canvas {
  display: block;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  image-rendering: pixelated;
}

.fg-invert { margin-top: .8rem; }

.fg-verdict { margin: .6rem 0 .4rem; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fg-verdict.is-pass { color: #216e39; }
.fg-verdict.is-warn { color: #8a4b12; }
.fg-verdict.is-fail { color: #a33; }

/* ---- proportion-check.js ------------------------------------------------ */

.pc-slots { display: grid; gap: .6rem; margin-bottom: 1rem; }

.pc-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .88rem; }
.pc-slot input[type="file"] { font: inherit; font-size: .82rem; }

.pc-slot button, .pc-chin button {
  padding: .3rem .6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: .3rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}

.pc-slot button:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.pc-slot button:focus-visible, .pc-chin input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pc-canvas {
  display: block;
  max-width: 100%;
  min-height: 2rem;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background:
    repeating-conic-gradient(#f2f2ee 0 25%, #e4e4de 0 50%) 0 0 / 16px 16px;
  image-rendering: pixelated;
}

.pc-chin { display: grid; gap: .3rem; max-width: 24rem; margin: .8rem 0; font-size: .88rem; }
.pc-chin output { font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-chin input[type="range"] { width: 100%; }

.pc-readout {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem 1rem;
  margin: .8rem 0;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}

.pc-readout dt { margin: 0; font: 600 .76rem/1.6 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pc-readout dd { margin: 0; }
.pc-readout dd.is-pass::after { content: " ✓"; color: #216e39; }
.pc-readout dd.is-warn { color: #8a4b12; }
.pc-readout dd.is-warn::after { content: " — outside the band"; font-size: .8em; }

.pc-live { margin: .6rem 0 0; font-size: .88rem; font-weight: 600; }