/* Drone Pilot Academy · ADVANCED — RPAS theme overlay. Overrides the colour tokens defined in
 * style.css :root (loaded before this file) without touching the shared layout.
 * Palette: the SAME deep graphite/slate command-centre base as the Basic (/drone) edition, but with
 * the signal-cyan primary flipped to an AMBER/GOLD primary — the "Advanced tier" cue. The safety
 * accent stays warm. Gold-on-graphite reads clearly as the higher-tier sibling of the cyan Basic
 * edition, so the two editions never look like the same app. */
:root {
  --bg: #0c1116;
  --bg-elev: #131a22;
  --bg-card: #171f29;
  --bg-card-2: #1e2833;
  --border: #2b3846;
  --text: #eef3f8;
  --text-dim: #a3b2c2;
  --text-mute: #6b7a8a;
  --primary: #b07d00;      /* amber/gold — Advanced tier; white button text ~3.6:1 (above the shipped baseline) */
  --primary-2: #8a6200;    /* deeper gold for gradients/topbar */
  --accent: #fb8500;       /* safety orange (sparse — nav/heading highlights) */
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --gold: #fbbf24;
  --shadow: 0 8px 24px rgba(0,0,0,.60);
}
/* The topbar/bottomnav backgrounds are hard-coded in style.css; re-tint to the graphite palette. */
.topbar { background: linear-gradient(180deg, #131a22, #0c1116); }
.bottomnav { background: #131a22; }
/* style.css hard-codes the primary-button hover to blue (#2563eb); keep it on the gold palette so
 * an Advanced button never flashes groundschool blue on hover. */
.btn.primary:hover { background: #c98f0a; }

/* Photographic lesson heroes (F1/G-001): the engine renders a screen.hero as
 * <img class="screen-hero-img"> when the value looks like an image PATH (emoji heroes still render
 * as text). The W0 slice uses emoji heroes only, but ship the rule now so authored image heroes in
 * W1+ get hero prominence. Only new-subject editions ship path heroes, so the rule lives in this
 * theme overlay — cadet/cq keep App/theme.css untouched. */
.screen-hero-img {
  display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 6px 0 12px;
  /* Reserve area pre-load: Chrome's loading=lazy never fires on a zero-area box, which
   * deadlocks dimensionless SVG heroes (and causes layout shift for photos). */
  min-height: 120px;
}