/* Shared stylesheet for the Game Boy Music course.
   The app's content.css owns the page chrome (navigator, header, footer). This file
   owns typography, the teaching blocks, and the widgets. Every lesson links it. */

:root {
  --paper: #faf8f2;
  --ink: #16171b;
  --muted: #64656d;
  --rule: #ddd8cb;
  --accent: #3f4bad;
  --panel: #fffefa;

  /* The DMG's screen greens. Used as data colours in the widgets, never as text. */
  --dmg-lightest: #9bbc0f;
  --dmg-light: #8bac0f;
  --dmg-dark: #306230;
  --dmg-darkest: #0f380f;
}

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.5rem); margin: 0 0 .4rem; }
h2 { font-size: 1.3rem; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.9rem 0 .4rem; }

.eyebrow {
  margin: 0 0 .6rem;
  color: var(--muted);
  font: 700 .72rem/1.3 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

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

a { color: var(--accent); text-underline-offset: .15em; }

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

kbd {
  padding: .1em .4em;
  border: 1px solid var(--rule);
  border-radius: .3em;
  background: var(--panel);
  white-space: nowrap;
}

/* ---- teaching blocks ---------------------------------------------------- */

.panel {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: .7rem;
  background: var(--panel);
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel__title {
  margin: 0 0 .55rem;
  font: 700 .72rem/1.3 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Numbers a script measured, not claims the course is asserting. */
.measured { border-left: 3px solid var(--accent); }
.measured .panel__title { color: var(--accent); }
.measured p:last-child { margin-bottom: 0; font-size: .88rem; color: var(--muted); }

/* Steps to carry out in FL Studio Mobile, away from the browser. */
.do-this { border-left: 3px solid var(--dmg-dark); background: #fbfcf6; }
.do-this .panel__title { color: var(--dmg-darkest); }
.do-this ol { margin: 0; padding-left: 1.3rem; }
.do-this li { margin: .4rem 0; }

.source { border-left: 3px solid var(--muted); font-size: .95rem; }

.ask {
  margin: 2.5rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: .7rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: .95rem;
}

.ask p { margin: 0; }

table { border-collapse: collapse; font-size: .92rem; }
th, td { padding: .38rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { font: 700 .74rem/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

figure { margin: 1.75rem 0; }
figcaption { margin-top: .55rem; color: var(--muted); font-size: .88rem; }

/* ---- widget shell ------------------------------------------------------- */

.widget {
  max-width: 40rem;
  margin: 2rem 0;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: .8rem;
  background: var(--panel);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem;
}

.widget h3 { margin: 0 0 .2rem; font-size: .95rem; }
.widget p { margin: .2rem 0 .9rem; color: var(--muted); font-size: .85rem; }

.widget button {
  padding: .5rem .85rem;
  border: 1px solid var(--rule);
  border-radius: .45rem;
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.widget button:hover { border-color: var(--accent); }

.widget button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.widget button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 650;
}

.widget button[disabled] { opacity: .45; cursor: not-allowed; }

.widget__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.widget__row + .widget__row { margin-top: .8rem; }

.widget__status {
  margin: .9rem 0 0;
  min-height: 1.4em;
  color: var(--ink);
  font-size: .88rem;
}

.widget__status b { color: var(--accent); }

/* ---- duty lab ----------------------------------------------------------- */

.duty-lab__panes {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.duty-lab__pane { margin: 0; }

.duty-lab__pane figcaption { margin-top: .35rem; font-size: .8rem; }

.duty-lab canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: .4rem;
  background: var(--dmg-lightest);
}

/* ---- quiz --------------------------------------------------------------- */

.quiz__question { margin: 0 0 .7rem; color: var(--ink); font-size: .98rem; font-weight: 600; }

.quiz__options { display: grid; gap: .45rem; margin: 0 0 .6rem; padding: 0; list-style: none; }

.quiz__options li { margin: 0; }

.quiz__options button { width: 100%; text-align: left; }

.quiz__options button[data-state="correct"] {
  border-color: var(--dmg-dark);
  background: color-mix(in srgb, var(--dmg-light) 30%, transparent);
}

.quiz__options button[data-state="wrong"] {
  border-color: #a33;
  background: color-mix(in srgb, #a33 12%, transparent);
}

.quiz__feedback { margin: .6rem 0 0; color: var(--ink); font-size: .88rem; }

.quiz__progress { color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .widget button { transition: background-color .12s ease, border-color .12s ease; }
}

/* ---- gait lab ----------------------------------------------------------- */

.gait-lab label { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.gait-lab input[type="range"] { width: min(14rem, 50vw); accent-color: var(--accent); }
.gait-lab__pane { margin: 1rem 0 0; }
.gait-lab__pane figcaption { margin-top: .35rem; font-size: .8rem; }

.gait-lab canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: .4rem;
  background: var(--dmg-lightest);
}