/* app.css: the single source of the PPL Tester design language. base.njk links this on
   every page, so pages share one palette, type scale and component set. To add a page:
   extend base.njk and reuse these classes/tokens; never re-declare colours inline. */

:root {
  color-scheme: light dark;

  /* type + rhythm */
  --font-base: 1rem/1.5 system-ui, sans-serif;   /* rem, not px: track the html root so body and every rem-based size scale on one basis and respect the browser font-size preference */
  --measure: 42rem;        /* readable line length / page width */
  --radius: .4rem;
  --space: 1.1rem;         /* vertical rhythm between blocks */

  /* semantic palette: one set reused for answer states and pass/fail alike */
  --pass: #2e7d32;
  --pass-bg: rgba(46, 125, 50, .18);
  --fail: #c62828;
  --fail-bg: rgba(198, 40, 40, .18);
  --hover: rgba(127, 127, 127, .15);
}

/* --- base elements --- */
body {
  font: var(--font-base);
  max-width: var(--measure);
  margin: 2rem auto;
  padding: 0 1rem;
}
h1 { font-size: 1.3rem; }
a { color: inherit; }
.lesson-title { margin: 0 0 var(--space); }   /* the lesson's own title above its body; sits under the site-head with normal rhythm, size inherits the flat h1 scale */

/* --- figures: lesson imagery (cloud photos, instrument/aero diagrams, weather charts) --- */
figure { margin: var(--space) 0; }
figure img { max-width: 100%; height: auto; border-radius: var(--radius); }
figcaption { font-size: .8rem; opacity: .65; margin-top: .3rem; }   /* muted caption + attribution, matches .tag */
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space); align-items: start; }   /* recognition-photo grid (clouds): ~3 per row, whole images */
.fig-grid figure { margin: 0; }
.fig-grid img { width: 100%; height: auto; }   /* whole image, never cropped (no thumbnails) */
.fig-grid figcaption { margin-top: .2rem; }

/* --- utilities --- */
.tag { font-size: .8rem; opacity: .65; }
.hidden { display: none; }

/* --- layout chrome (shared by every page via base.njk) --- */
.site-head { margin-bottom: var(--space); }
.site-nav { font-size: .9rem; opacity: .8; }
.refs { margin-top: var(--space); }   /* references block above the lesson's practice set */

/* --- buttons: .btn is the shared interactive control; .opt is the answer variant --- */
.btn {
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: .5rem 1rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
}
.btn:hover:not(:disabled) { background: var(--hover); }

/* --- question card (study + exam pages) --- */
/* One look for both pages: study builds div.q-card, the exam builds fieldset.q. The fieldset
   needs its default chrome (border, legend inset, min-content width) reset so the two match. */
.q-card, .q {
  border: 0;
  margin: 0 0 calc(var(--space) * 1.5);
  padding: 0;
  min-inline-size: 0;
}
.q legend { padding: 0; }
.stem { font-size: 1.15rem; margin: var(--space) 0; }
.opt {
  display: block;
  width: 100%;
  text-align: left;
  margin: .4rem 0;
  padding: .6rem .8rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.opt:hover:not(:disabled) { background: var(--hover); }
.opt.correct { border-color: var(--pass); background: var(--pass-bg); }
.opt.wrong   { border-color: var(--fail); background: var(--fail-bg); }
.feedback { margin-top: var(--space); }