/*
Theme Name: Part-66 Trainer
Theme URI: https://training.u123.co.uk/
Author: Citytalk Group
Description: Landing theme for the UK CAA Part-66 module trainer. Self-contained - no external fonts, scripts or trackers, so nothing about a visitor leaves the server. Built to pair with the part66-trainer plugin.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: p66-training
*/

/* ==========================================================================
   Tokens. Dark is the default; light is a deliberate switch, as in the
   trainer itself. Colours are lifted from the trainer's Instrument theme so
   the landing page and the app read as one product.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}
/* Plus Jakarta Sans - the Signature theme's reading face. OFL 1.1
   (Tokotype) v2.071, latin, one variable file 200-800, 27 KB, self-hosted.
   See the long note in the plugin's trainer.css for why it was chosen and
   what it does NOT contain. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans-var.woff2") format("woff2");
}

:root {
  --ground:  #0b0f14;
  --panel:   #121820;
  --panel2:  #1a222c;
  --ink:     #e7eef4;
  --ink2:    #a3b4c2;
  --ink3:    #6f8496;
  --rule:    #22303d;
  --ruleH:   #34485a;

  --lime:    #c3d24a;
  --amber:   #ffb020;
  --cyan:    #5cc8ff;
  --green:   #3ddc84;
  --coral:   #ff5c4d;
  --violet:  #b48cff;

  --accInk:  #0b0f14;
  --limeBg:  rgba(195,210,74,.12);
  --amberBg: rgba(255,176,32,.12);
  --cyanBg:  rgba(92,200,255,.12);
  --greenBg: rgba(61,220,132,.12);
  --coralBg: rgba(255,92,77,.12);

  /* ⛔ SHAPE IS A TOKEN HERE TOO. The plugin's trainer.css learned this on
     13 Sep 2026; this file had the same fault - 12 hard-coded radii that no
     theme could reach, so Technical Order squared off the application and
     left the chrome around it rounded. --radiusPill is the badge/chip. */
  --radius:  14px;
  --radiusSm:8px;
  --radiusPill:999px;
  --shadow:  0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.45);
  --maxw:    1140px;

  /* ⭐ The chrome and the app must be set in the same face. Until 13 Sep 2026
     this theme loaded NO webfont at all - system stack throughout - while the
     plugin asked Google for Barlow and IBM Plex Mono. So the header and the
     application it wraps were in different typefaces whenever that request
     succeeded, and identical generic ones whenever it did not.
     ⛔ IBM Plex Mono is now self-hosted here, matching the plugin's copy. The
     "no external requests of any kind" claim in this theme's description is
     true again. Do not add a stylesheet link. */
  /* Self-hosted, and it is what the whole site reads in - see the --fS note
     in the plugin's trainer.css for why shipping only the mono was not enough.
     The chrome and the application must be set in the same face. */
  --fSans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fMono: "IBM Plex Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;

  /* ⛔ HOW A LABEL IS SET IS A TOKEN. See the long note in trainer.css - the
     fault and the fix are the same in both files, and doing only one of them
     leaves labels set two different ways on one screen, which is how the
     radius fix nearly shipped broken on 13 Sep.
     Defaults reproduce every pre-existing theme exactly. */
  --fLabel: var(--fMono);
  --fNum:   var(--fMono);
  --labelCase:   uppercase;
  --labelTrack:  .13em;
  --labelWeight: 700;
}

/* ------------------------------------------------------------------ *
 * TECHNICAL ORDER - the site's default since 13 September 2026.
 *
 * The chrome half of the design set in the plugin's trainer.css. Both must
 * move together: the header is on every page the app renders inside, so a
 * paper application under a near-black header reads as two products.
 * ------------------------------------------------------------------ */
/* ==================================================================== *
 * SIGNATURE - the premium look, default since 13 Sep 2026.
 *
 * The chrome half of the theme whose reasoning lives in trainer.css. ⛔ BOTH
 * FILES OR NEITHER: on 13 Sep the radius fix was nearly shipped in the
 * plugin alone, which would have put a squared-off app inside rounded
 * chrome. The same is true of the reading face and the label treatment, and
 * it is more obvious, not less - a heading set two ways on one screen.
 * ==================================================================== */
:root[data-theme="signature"] {
  --ground:  #f6f7fa;
  --panel:   #ffffff;
  --panel2:  #f2f3f7;
  --ink:     #14161c;
  --ink2:    #4b5060;
  --ink3:    #767c8c;
  --rule:    #e8eaf0;
  --ruleH:   #d2d6e0;
  --lime:    #4a5510;
  --amber:   #8a5200;
  --cyan:    #4338ca;            /* the one saturated hue */
  --green:   #12694a;
  --coral:   #b3261e;
  --violet:  #6d28d9;
  --accInk:  #ffffff;
  --limeBg:  rgba(74,85,16,.10);
  --amberBg: rgba(138,82,0,.10);
  --cyanBg:  rgba(67,56,202,.09);
  --greenBg: rgba(18,105,74,.10);
  --coralBg: rgba(179,38,30,.10);
  --radius:  18px; --radiusSm: 13px; --radiusPill: 999px;
  --shadow:  0 1px 2px rgba(20,22,28,.04), 0 8px 24px -8px rgba(20,22,28,.10);

  /* The reading face, and labels set in it rather than in a typewriter. */
  --fSans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fLabel: var(--fSans);
  --fNum:   var(--fSans);
  --labelCase:   none;
  --labelTrack:  .01em;
  --labelWeight: 600;
}
:root[data-theme="signature"] body { background: var(--ground); font-variant-numeric: tabular-nums; }
:root[data-theme="signature"] h1,
:root[data-theme="signature"] h2,
:root[data-theme="signature"] h3 { font-weight: 800; letter-spacing: -.022em; }
:root[data-theme="signature"] .site-head {
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
}
/* The document control strip stays - every field in it is true and it is the
   one claim no competitor can match. It just stops shouting. */
:root[data-theme="signature"] .doc-strip {
  background: var(--panel2); border-bottom: 1px solid var(--rule); color: var(--ink3);
}
/* ⛔ THE DECORATIVE GRADIENTS COME OFF, AND ONE OF THEM WAS A RULE BREACH.
 *
 * The primary button was `linear-gradient(135deg, var(--lime), var(--green))`
 * and the brand mark lime-to-cyan. Two things wrong, and only the first is
 * taste:
 *
 *   1. ⛔ IT SPENDS --green, WHICH IS RESERVED. Green, amber and coral mean
 *      readiness state on this platform and nothing else - that rule is why
 *      the identity had to be carried by SHAPE when four discipline hues were
 *      tested and failed the colour-vision floors. A green Sign in button
 *      sitting above a green "Ready" verdict makes the verdict ambiguous.
 *   2. A three-stop gradient on every prominent surface is the single most
 *      recognisable thing in the default app kit, and it is item one of the
 *      original "looks like the Spanna app" diagnosis. Technical Order
 *      removed the card strips and left these.
 *
 * So Signature spends ONE hue, flat. ⚠️ The semantic tints stay: .mod.live
 * keeps its green wash and .vs-card.uk its lime, because those two DO carry
 * meaning.
 */
:root[data-theme="signature"] .brand .mark { background: var(--cyan); }
:root[data-theme="signature"] a.btn.btn-primary,
:root[data-theme="signature"] button.btn.btn-primary,
:root[data-theme="signature"] .btn.btn-primary {
  background: var(--cyan); color: #fff; border-color: var(--cyan);
}
:root[data-theme="signature"] a.btn.btn-primary:hover,
:root[data-theme="signature"] .btn.btn-primary:hover {
  filter: brightness(1.1); color: #fff;
}
/* The hero headline keeps its emphasis, in the accent rather than a three-stop
   sweep through the reserved colours. */
:root[data-theme="signature"] .hero h1 .hl {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--cyan);
}
:root[data-theme="signature"] .spec::after { display: none; }

:root[data-theme="signature"] .card,
:root[data-theme="signature"] .mod {
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(20,22,28,.04), 0 2px 8px -4px rgba(20,22,28,.06);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
:root[data-theme="signature"] .mod:hover,
:root[data-theme="signature"] .card:hover {
  transform: translateY(-2px); border-color: var(--ruleH);
  box-shadow: 0 2px 4px rgba(20,22,28,.05), 0 14px 30px -10px rgba(20,22,28,.16);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="signature"] {
    --ground:  #0b0c11;
    --panel:   #16181f;
    --panel2:  #1e212a;
    --ink:     #eceef4;
    --ink2:    #a6abbb;
    --ink3:    #787f90;
    --rule:    #252936;
    --ruleH:   #39404f;
    --cyan:    #a5b4fc;
    --lime:    #c3d24a;
    --amber:   #ffb020;
    --green:   #3ddc84;
    --coral:   #ff6a53;
    --violet:  #c4b5fd;
    --accInk:  #0e0f14;
    --limeBg:  rgba(195,210,74,.12);
    --amberBg: rgba(255,176,32,.12);
    --cyanBg:  rgba(165,180,252,.12);
    --greenBg: rgba(61,220,132,.12);
    --coralBg: rgba(255,106,83,.12);
    --shadow:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  }
  :root[data-theme="signature"] .site-head { background: rgba(22,24,31,.82); }
  :root[data-theme="signature"] .card,
  :root[data-theme="signature"] .mod {
    box-shadow: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px -6px rgba(0,0,0,.42);
  }
}

:root[data-theme="technical"] {
  --ground:  #f4f4f1;
  --panel:   #fcfcfa;
  --panel2:  #eeeeea;
  --ink:     #14171a;
  --ink2:    #4a5158;
  --ink3:    #787f86;
  --rule:    #c8ccc5;
  --ruleH:   #9aa096;
  --lime:    #4a5510;
  --amber:   #7d5100;
  --cyan:    #155e73;
  --green:   #1c6238;
  --coral:   #a8330f;
  --violet:  #5b3fa8;
  --accInk:  #fcfcfa;
  --limeBg:  rgba(74,85,16,.10);
  --amberBg: rgba(125,81,0,.10);
  --cyanBg:  rgba(21,94,115,.10);
  --greenBg: rgba(28,98,56,.10);
  --coralBg: rgba(168,51,15,.10);
  --radius:  0px; --radiusSm: 0px; --radiusPill: 0px;
  --shadow:  none;
}
/* Ruled, not floated. */
:root[data-theme="technical"] body { background: var(--ground); }
:root[data-theme="technical"] .site-head { border-bottom: 2px solid var(--ink); }
:root[data-theme="technical"] .mod:hover,
:root[data-theme="technical"] .card:hover { transform: none; }
:root[data-theme="technical"] .mod.live {
  background: var(--panel); border-color: var(--ink);
  border-top: 2px solid var(--green);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="technical"] {
    --ground:  #101315;
    --panel:   #1b1f23;
    --panel2:  #242a2f;
    --ink:     #e8eae7;
    --ink2:    #a7b0b5;
    --ink3:    #78838a;
    --rule:    #333a3f;
    --ruleH:   #4c565c;
    --lime:    #b9c95a;
    --amber:   #ffb020;
    --cyan:    #5cc8ff;
    --green:   #3ddc84;
    --coral:   #ff6a53;
    --violet:  #b48cff;
    --accInk:  #14171a;
    --limeBg:  rgba(185,201,90,.12);
    --amberBg: rgba(255,176,32,.12);
    --cyanBg:  rgba(92,200,255,.12);
    --greenBg: rgba(61,220,132,.12);
    --coralBg: rgba(255,106,83,.12);
  }
  :root[data-theme="technical"] .site-head { border-bottom-color: var(--ruleH); }
}

:root[data-theme="daylight"], :root[data-theme="light"] {
  --ground:  #eef1f6;
  --panel:   #ffffff;
  --panel2:  #e6ebf2;
  --ink:     #101720;
  --ink2:    #43535f;
  --ink3:    #6b7c8a;
  --rule:    #d3dbe4;
  --ruleH:   #adbbc8;

  --lime:    #5c6b12;
  --amber:   #9a6100;
  --cyan:    #10607f;
  --green:   #1c6b3c;
  --coral:   #b03323;
  --violet:  #5b3fa8;

  --accInk:  #ffffff;
  --limeBg:  rgba(92,107,18,.10);
  --amberBg: rgba(154,97,0,.10);
  --cyanBg:  rgba(16,96,127,.10);
  --greenBg: rgba(28,107,60,.10);
  --coralBg: rgba(176,51,35,.10);

  --shadow:  0 1px 2px rgba(16,23,32,.06), 0 12px 32px rgba(16,23,32,.10);
}


/* ==========================================================================
   Themes.
   The offline trainer carries five, and people genuinely use them - the dark
   ones at night, Blueprint for reading, Workshop for printing. Same names and
   the same intent here, so someone moving between the two is not relearning.
   ========================================================================== */

/* --- Workshop. The printed-manual look. Square, quiet, high contrast. --- */
:root[data-theme="workshop"] {
  --ground:  #edefea; --panel: #fbfcf8; --panel2:#e2e6da;
  --ink:     #191d17; --ink2:  #474e44; --ink3:  #6e766a;
  --rule:    #cfd4c6; --ruleH: #a9b09e;
  --lime:    #4a5610; --amber: #8a5a12; --cyan:  #2d4d5c;
  --green:   #2f6b3a; --coral: #8a3a22; --violet:#4a3f7a;
  --accInk:  #ffffff;
  --limeBg:  rgba(74,86,16,.10);  --amberBg: rgba(138,90,18,.10);
  --cyanBg:  rgba(45,77,92,.10);  --greenBg: rgba(47,107,58,.10);
  --coralBg: rgba(138,58,34,.10);
  --radius:  2px; --radiusSm: 2px; --radiusPill: 2px;
  --shadow:  0 1px 2px rgba(25,29,23,.08);
}

/* --- Instrument. Cockpit panel at night. True black, so OLED pixels are
       actually off rather than dark grey. --- */
:root[data-theme="instrument"] {
  --ground:  #000000; --panel: #12171c; --panel2:#1c232a;
  --ink:     #dfe6ea; --ink2:  #9fb0ba; --ink3:  #71838e;
  --rule:    #28313a; --ruleH: #3c4954;
  --lime:    #ffb020; --amber: #ffb020; --cyan:  #5cc8ff;
  --green:   #3ddc84; --coral: #ff5c4d; --violet:#b48cff;
  --accInk:  #0d1013;
  --limeBg:  rgba(255,176,32,.14); --amberBg: rgba(255,176,32,.14);
  --cyanBg:  rgba(92,200,255,.12); --greenBg: rgba(61,220,132,.12);
  --coralBg: rgba(255,92,77,.12);
  --radius:  4px; --radiusSm: 3px; --radiusPill: 3px;
  --shadow:  0 1px 0 rgba(255,255,255,.05) inset, 0 2px 12px rgba(0,0,0,.6);
}

/* --- Blueprint. Technical drawing on faintly gridded paper. --- */
:root[data-theme="blueprint"] {
  --ground:  #e8eef5; --panel: #f7fafd; --panel2:#d7e3ef;
  --ink:     #12283d; --ink2:  #3c5871; --ink3:  #6b829a;
  --rule:    #b9cddf; --ruleH: #8fa9c2;
  --lime:    #0f5c8c; --amber: #9a5b00; --cyan:  #0f5c8c;
  --green:   #16694a; --coral: #a8362a; --violet:#4a3f8c;
  --accInk:  #ffffff;
  --limeBg:  rgba(15,92,140,.10); --amberBg: rgba(154,91,0,.10);
  --cyanBg:  rgba(15,92,140,.10); --greenBg: rgba(22,105,74,.10);
  --coralBg: rgba(168,54,42,.10);
  --radius:  2px; --radiusSm: 2px; --radiusPill: 2px;
  --shadow:  0 1px 2px rgba(18,40,61,.10);
}
:root[data-theme="blueprint"] body {
  background-image:
    linear-gradient(rgba(15,92,140,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,92,140,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* --- Midnight. The build default: deep navy with lime and cyan. --- */
:root[data-theme="midnight"] {
  --ground:  #0b0f14; --panel: #121820; --panel2:#1a222c;
  --ink:     #e7eef4; --ink2:  #a3b4c2; --ink3:  #6f8496;
  --rule:    #22303d; --ruleH: #34485a;
  --lime:    #c3d24a; --amber: #ffb020; --cyan:  #5cc8ff;
  --green:   #3ddc84; --coral: #ff5c4d; --violet:#b48cff;
  --accInk:  #0b0f14;
  --limeBg:  rgba(195,210,74,.12); --amberBg: rgba(255,176,32,.12);
  --cyanBg:  rgba(92,200,255,.12); --greenBg: rgba(61,220,132,.12);
  --coralBg: rgba(255,92,77,.12);
  --radius:  14px; --radiusSm: 8px; --radiusPill: 999px;
}

/* Auto follows the machine: Midnight after dark, Daylight in the day. */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --ground:  #eef1f6; --panel: #ffffff; --panel2:#e6ebf2;
    --ink:     #101720; --ink2:  #43535f; --ink3:  #6b7c8a;
    --rule:    #d3dbe4; --ruleH: #adbbc8;
    --lime:    #5c6b12; --amber: #9a6100; --cyan:  #10607f;
    --green:   #1c6b3c; --coral: #b03323; --violet:#5b3fa8;
    --accInk:  #ffffff;
    --limeBg:  rgba(92,107,18,.10);  --amberBg: rgba(154,97,0,.10);
    --cyanBg:  rgba(16,96,127,.10);  --greenBg: rgba(28,107,60,.10);
    --coralBg: rgba(176,51,35,.10);
    --shadow:  0 1px 2px rgba(16,23,32,.06), 0 12px 32px rgba(16,23,32,.10);
  }
}

/* ---- the picker itself ---- */
.themepick {
  appearance: none; -webkit-appearance: none;
  background: var(--panel); color: var(--ink2);
  border: 1px solid var(--rule); border-radius: var(--radiusSm);
  font: inherit; font-size: .84rem; font-weight: 600;
  padding: 8px 30px 8px 12px; cursor: pointer; height: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.themepick:hover { border-color: var(--ruleH); color: var(--ink); }
@media (max-width: 700px) { .themepick { display: none; } }

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The header is sticky, so an anchor would otherwise land underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fSans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
a  { color: var(--cyan); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--fNum); }
.muted { color: var(--ink2); }
.small { font-size: .875rem; }

section { padding: clamp(56px, 9vw, 110px) 0; position: relative; }

.eyebrow {
  font-family: var(--fLabel); font-size: .75rem; font-weight: var(--labelWeight);
  letter-spacing: var(--labelTrack); text-transform: var(--labelCase);
  color: var(--amber); margin: 0 0 14px;
}

.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink2); max-width: 62ch; }

/* Focus visibility - keyboard users must never lose their place */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 3px; border-radius: var(--radiusSm);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-head {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }

.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 34px; height: 34px; border-radius: var(--radiusSm); flex: none;
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  display: grid; place-items: center;
  color: var(--accInk); font-family: var(--fLabel); font-weight: 700; font-size: 13px;
}
.brand small { display: block; font-weight: 500; font-size: .68rem; color: var(--ink3); letter-spacing: var(--labelTrack); text-transform: var(--labelCase); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a { color: var(--ink2); text-decoration: none; font-size: .9rem; font-weight: 600; padding: 8px 12px; border-radius: var(--radiusSm); }
.nav a:hover { color: var(--ink); background: var(--panel2); }
@media (max-width: 860px) { .nav .hide-sm { display: none; } }

.iconbtn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--radiusSm);
  background: var(--panel); color: var(--ink2); cursor: pointer; font-size: 15px;
}
.iconbtn:hover { border-color: var(--ruleH); color: var(--ink); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--radiusSm);
  font-weight: 700; font-size: .96rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Specificity is deliberate. WordPress emits global styles that colour links
   via :root :where(a:not(.wp-element-button)) - specificity 0,1,0, the same as
   a bare .btn-primary - and it is printed AFTER the theme stylesheet, so a tie
   goes to WordPress and the button text takes the link colour. a.btn.btn-primary
   is 0,2,1 and settles it. */
a.btn.btn-primary,
button.btn.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--lime), var(--green));
  color: var(--accInk);
}
a.btn.btn-primary:hover,
.btn.btn-primary:hover { filter: brightness(1.08); color: var(--accInk); }

a.btn.btn-ghost,
button.btn.btn-ghost,
.btn.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--rule); }
a.btn.btn-ghost:hover,
.btn.btn-ghost:hover { border-color: var(--ruleH); color: var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-top: clamp(48px, 8vw, 92px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 640px; z-index: -1;
  background:
    radial-gradient(48% 60% at 22% 30%, var(--limeBg), transparent 70%),
    radial-gradient(46% 58% at 78% 22%, var(--cyanBg), transparent 70%),
    radial-gradient(40% 50% at 55% 70%, var(--amberBg), transparent 70%);
  filter: blur(18px);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 .hl {
  background: linear-gradient(120deg, var(--lime), var(--cyan) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: var(--radiusPill);
  border: 1px solid var(--rule); background: var(--panel);
  font-family: var(--fLabel); font-size: .74rem; font-weight: var(--labelWeight);
  letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink2);
  margin-bottom: 20px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--greenBg); }

/* Spec card - the paper at a glance */
.spec {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px; position: relative; overflow: hidden;
}
.spec::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--lime), var(--cyan), var(--violet));
}
.spec-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.spec-cell { background: var(--panel2); border-radius: var(--radiusSm); padding: 14px 16px; }
.spec-cell .k { font-family: var(--fLabel); font-size: .66rem; letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3); }
.spec-cell .v { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.spec-cell .v span { font-size: .8rem; font-weight: 600; color: var(--ink3); letter-spacing: 0; }

/* ==========================================================================
   Cards, grids
   ========================================================================== */

.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px;
}
.grid { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .g3, .g2 { grid-template-columns: 1fr; } }

.mode { position: relative; overflow: hidden; }
.mode .ico {
  width: 44px; height: 44px; border-radius: var(--radiusSm); display: grid; place-items: center;
  font-size: 20px; margin-bottom: 16px;
}
.mode.a .ico { background: var(--limeBg);  color: var(--lime); }
.mode.b .ico { background: var(--cyanBg);  color: var(--cyan); }
.mode.c .ico { background: var(--coralBg); color: var(--coral); }
.mode p:last-child { margin-bottom: 0; }

/* ==========================================================================
   UK vs EASA comparison
   ========================================================================== */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .vs { grid-template-columns: 1fr; } }
.vs-card { border-radius: var(--radius); padding: 24px; border: 1px solid var(--rule); background: var(--panel); }
.vs-card.uk { border-color: color-mix(in srgb, var(--lime) 45%, var(--rule)); background: linear-gradient(180deg, var(--limeBg), transparent 60%), var(--panel); }
.vs-card h3 { display: flex; align-items: center; gap: 10px; }
.tag { font-family: var(--fLabel); font-size: .64rem; font-weight: var(--labelWeight); letter-spacing: var(--labelTrack); text-transform: var(--labelCase); padding: 4px 9px; border-radius: var(--radiusPill); }
.tag.yes { background: var(--limeBg); color: var(--lime); }
.tag.no  { background: var(--coralBg); color: var(--coral); }
.vs-list { list-style: none; margin: 16px 0 0; padding: 0; }
.vs-list li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: .94rem; }
.vs-list li b { font-family: var(--fNum); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Try a question
   ========================================================================== */

.q-shell { max-width: 820px; margin: 0 auto; }
.q-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.q-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--rule); background: var(--panel2); flex-wrap: wrap; }
.q-ref { font-family: var(--fLabel); font-size: .72rem; letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3); }
.q-topic { font-family: var(--fLabel); font-size: .72rem; font-weight: var(--labelWeight); letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--cyan); background: var(--cyanBg); padding: 4px 10px; border-radius: var(--radiusPill); }
.q-lvl { margin-left: auto; font-family: var(--fLabel); font-size: .7rem; color: var(--ink3); }
.q-body { padding: 26px 22px; }
.q-stem { font-size: 1.2rem; font-weight: 700; line-height: 1.4; margin: 0 0 20px; }

.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; border-radius: var(--radiusSm);
  border: 1.5px solid var(--rule); background: var(--ground);
  color: var(--ink); font: inherit; font-size: .98rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opt:hover:not(:disabled) { border-color: var(--ruleH); transform: translateX(3px); }
.opt:disabled { cursor: default; }
.opt .letter {
  flex: none; width: 27px; height: 27px; border-radius: var(--radiusSm);
  display: grid; place-items: center; font-family: var(--fLabel); font-weight: 700; font-size: .82rem;
  background: var(--panel2); color: var(--ink2);
}
.opt.right { border-color: var(--green); background: var(--greenBg); }
.opt.right .letter { background: var(--green); color: var(--accInk); }
.opt.wrong { border-color: var(--coral); background: var(--coralBg); }
.opt.wrong .letter { background: var(--coral); color: #fff; }

.fb { margin-top: 20px; display: grid; gap: 12px; }
.fb-item { border-left: 3px solid var(--rule); padding: 4px 0 4px 15px; }
.fb-item .k { font-family: var(--fLabel); font-size: .66rem; font-weight: var(--labelWeight); letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3); display: block; margin-bottom: 3px; }
.fb-item.why  { border-color: var(--cyan); }
.fb-item.tip  { border-color: var(--lime); }
.fb-item.trap { border-color: var(--amber); }
.fb-item p { margin: 0; font-size: .95rem; color: var(--ink2); }

.q-foot { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--rule); background: var(--panel2); }
.q-count { font-family: var(--fNum); font-size: .78rem; color: var(--ink3); }

.hidden { display: none !important; }

/* ==========================================================================
   Readiness simulator
   ========================================================================== */

.sim { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: start; }
@media (max-width: 940px) { .sim { grid-template-columns: 1fr; } }

.dial-wrap { display: grid; place-items: center; gap: 14px; text-align: center; }
.dial { position: relative; width: min(260px, 68vw); aspect-ratio: 1; }
.dial svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.dial .track { fill: none; stroke: var(--rule); stroke-width: 13; }
.dial .fill  { fill: none; stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.22,1,.36,1), stroke .3s ease; }
.dial .num {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 2px;
}
.dial .num b { font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.dial .num span { font-family: var(--fLabel); font-size: .66rem; letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3); }

.verdict { font-family: var(--fLabel); font-weight: var(--labelWeight); font-size: .8rem; letter-spacing: var(--labelTrack); text-transform: var(--labelCase); padding: 8px 16px; border-radius: var(--radiusPill); }
.verdict.not    { background: var(--coralBg); color: var(--coral); }
.verdict.almost { background: var(--amberBg); color: var(--amber); }
.verdict.ready  { background: var(--greenBg); color: var(--green); }

.slider { margin-bottom: 22px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; font-weight: 600; margin-bottom: 9px; }
.slider label b { font-family: var(--fNum); font-variant-numeric: tabular-nums; font-size: 1rem; }
.slider input[type=range] { width: 100%; accent-color: var(--cyan); height: 22px; cursor: pointer; }
.slider .hint { font-size: .8rem; color: var(--ink3); margin-top: 4px; }

.blockers { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.blockers li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--radiusSm);
  background: var(--coralBg); border-left: 3px solid var(--coral);
  font-size: .9rem;
}
.blockers li.ok { background: var(--greenBg); border-left-color: var(--green); }

/* ==========================================================================
   Module coverage
   ========================================================================== */

/* ⛔ 158px WAS TOO NARROW AND IT IS WHY THIS SECTION READ AS "BASIC TEXT".
   At that width "Live - 768 questions" broke across two lines mid-phrase and
   every two-word module title wrapped - "Electrical / fundamentals",
   "Materials and / hardware". Nothing about the typeface could fix that; a
   grid that chops its own content looks unconsidered whatever it is set in.
   200px holds the longest spec line on one line at every breakpoint. */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* ⛔ THE TILE IS A COLUMN, SO THE SPEC CAN SIT ON THE FLOOR.
   Sixteen titles of one, two and three lines meant the QUESTIONS/MINUTES/BANK
   row landed at a different height in every tile and the grid read as ragged.
   flex + margin-top:auto on the spec pins it to the bottom of whatever height
   the row settles at, so the figures line up straight across. */
.mod {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radiusSm);
  padding: 15px; text-align: left; cursor: default; position: relative;
  transition: border-color .12s ease, transform .12s ease;
  display: flex; flex-direction: column;
}
.mod:hover { border-color: var(--ruleH); transform: translateY(-3px); }
/* The module code is the part number - the thing an engineer scans for - so it
   reads as one, in the mono, rather than as a caption above the real title. */
.mod .n { font-family: var(--fLabel); font-size: .72rem; font-weight: var(--labelWeight); letter-spacing: var(--labelTrack);
          text-transform: var(--labelCase); color: var(--ink2); }
/* ⚠️ min-height reserves two lines whether the title needs them or not.
   Without it "Mathematics" makes a short tile and "Turbine aeroplane systems"
   a tall one, and the rows step up and down the page. Two lines covers every
   title in the set at every breakpoint; a third would only ever be empty.
   text-wrap:balance stops a two-line title breaking after one short word. */
.mod .t { font-weight: 700; font-size: 1.02rem; letter-spacing: -.014em; margin: 4px 0 12px;
          line-height: 1.22; text-wrap: balance; min-height: 2.44em; }
.mod .s { font-family: var(--fNum); font-size: .76rem; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ⭐ The spec, as a data block rather than a sentence.
   "32 q · 40 min / Live - 768 questions" was prose describing four quantities
   a learner compares ACROSS tiles. Labelled columns let the eye run down the
   grid; prose makes you re-read every tile. Figures are tabular so the columns
   line up whatever the numbers are - 32 next to 140 next to 1,201. */
.mod .mspec {
  display: grid;
  /* ⛔ 1fr, NOT auto. With auto the three columns took their width from the
     figures in that one tile, so "32 40 768" and "128 160 1,024" put their
     labels in different places and nothing lined up down the grid. Equal
     fractions give every tile the same three column positions. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0 12px;
  margin: auto 0 0;               /* the floor - see the note on .mod */
  padding-top: 11px; border-top: 1px solid var(--rule);
}
.mod .mspec div { min-width: 0; }
.mod .mspec dt {
  font-family: var(--fLabel); font-size: .55rem; font-weight: var(--labelWeight);
  letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3);
  white-space: nowrap;
}
.mod .mspec dd {
  margin: 2px 0 0; font-family: var(--fNum); font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink);
  line-height: 1.15;
}
/* A planned module has no bank yet and shows an em dash. It should read as
   "nothing here", not as a figure. */
.mod:not(.live) .spec dd { color: var(--ink2); }
/* ⛔ THE STATUS IS A WORD, NOT A DOT - IN EVERY THEME.
   This was an 8px coloured circle, and it was the ONLY status signal left once
   the prose line ("Live - 768 questions" / "Planned") became a BANK figure.
   A grey dot versus a green dot is colour carrying meaning alone, which this
   project does not do anywhere else - see the note above composition_states()
   in the plugin. It costs one word and it is the word people were reading
   before. */
.mod .badge {
  position: absolute; top: 13px; right: 14px;
  font-family: var(--fLabel); font-size: .56rem; font-weight: var(--labelWeight);
  letter-spacing: var(--labelTrack); text-transform: var(--labelCase); color: var(--ink3);
}
.mod .badge::after { content: "Planned"; }
.mod.live .badge { color: var(--green); }
.mod.live .badge::after { content: "Live"; }
.mod.live { border-color: color-mix(in srgb, var(--green) 50%, var(--rule)); background: linear-gradient(180deg, var(--greenBg), transparent 65%), var(--panel); }
/* ⛔ REMOVED, not edited: this painted a green PILL behind the badge, from
   when the badge was an 8px dot. With the badge now a word in green ink it
   made green-on-green - a solid block with the word invisible inside it.
   A leftover rule for a shape that no longer exists, three lines below the
   rule that replaced it. */

/* ==========================================================================
   Document control strip
   ========================================================================== */

/* Manual furniture. Quiet by design - it is control data, not a banner, and
   the moment it shouts it stops reading as documentation. */
.doc-strip {
  border-bottom: 1px solid var(--rule);
  background: var(--panel2);
  font-family: var(--fLabel);
  font-size: .66rem;
  letter-spacing: var(--labelTrack);
  text-transform: var(--labelCase);
  color: var(--ink3);
}
.doc-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center;
  padding: 7px 24px;
}
.doc-strip span { padding: 0 14px; border-right: 1px solid var(--rule); line-height: 1.5; }
.doc-strip span:first-child { padding-left: 0; color: var(--ink2); }
.doc-strip span:last-child  { border-right: 0; }
.doc-strip .rev { margin-left: auto; border-right: 0; padding-right: 0; }

/* ⚠️ On a phone the strip would take four lines and push the page down. The
   two fields that matter to somebody deciding whether this is the right
   product are the first and the third; the references survive on a wider
   screen, where there is room to check them. */
@media (max-width: 720px) {
  .doc-strip span:nth-child(2),
  .doc-strip span:nth-child(4),
  .doc-strip .rev { display: none; }
  .doc-strip span { border-right: 0; padding-left: 0; }
}

/* ==========================================================================
   Type scale
   ========================================================================== */

/* ⚠️ IBM Plex Sans is not Segoe UI, and inherited tracking does not transfer.
   Plex sets wider than the system stack it replaced, so the display sizes need
   pulling in or the headings look loose; the small uppercase labels need
   pushing out or they set too tight to read as placards. Both numbers were
   arrived at by looking, not by rule. */
h1, .h1 { letter-spacing: -.033em; }
h2 { letter-spacing: -.022em; }
h3 { letter-spacing: -.012em; }

/* Every figure on this site is a quantity someone compares - question counts,
   paper lengths, pass marks, scores. They line up or they are harder to read
   than they need to be. */
.mono, .eyebrow, .tag, .q-count, .spec-cell .v, .mod .s {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * The module marks.
 *
 * ⭐ These are the answer to a complaint made four times: the grid "is still
 * basic text". It was - four stacked lines per tile and nothing else, sixteen
 * times over. A typeface cannot fix a tile that contains only words.
 *
 * Each mark is that module's own subject drawn in line: a radical for
 * Mathematics, a resistor for Electrical, a piston and con-rod for Piston
 * Engine. They inherit currentColor so they follow every theme, and they are
 * inline SVG so they cost no requests.
 * ------------------------------------------------------------------ */

.mod .mk {
  width: 30px; height: 30px; display: block; margin-bottom: 11px; flex: 0 0 auto;
  /* clears the status word pinned top-right */
  max-width: calc(100% - 58px);
  color: var(--ink3);
  transition: color .14s ease;
}
.mod .mk * {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mod .mk .f { fill: currentColor; stroke: none; }   /* the few solid dots */
.mod .mk .d { stroke-dasharray: 2.5 2.5; opacity: .55; }

/* A live module's mark carries the accent; a planned one stays grey. The
   status is still said in words underneath - this is reinforcement. */
.mod.live .mk { color: var(--green); }
.mod:hover .mk { color: var(--ink); }

/* ------------------------------------------------------------------ *
 * Module tiles, Technical Order.
 *
 * A card with a rounded corner, a soft tint and a coloured dot is the generic
 * shape. Here the tile is a spec block: one rule across the top, the part
 * number under it, and the status said in a WORD rather than signalled by an
 * 8px dot that means nothing on its own.
 * ------------------------------------------------------------------ */

:root[data-theme="technical"] .mod {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: 14px 16px 16px;
}
:root[data-theme="technical"] .mod.live {
  background: var(--panel);
  border-top-color: var(--green);
}
:root[data-theme="technical"] .mod .n { color: var(--ink3); }
:root[data-theme="technical"] .mod .t { color: var(--ink); }

/* The status word is defined once in the base rules now - it belongs in every
   theme, not just this one. Technical only darkens the spec rule. */
:root[data-theme="technical"] .mod .mspec { border-top-color: var(--ink); }
:root[data-theme="technical"] .mod .mspec dd { color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot { border-top: 1px solid var(--rule); padding: 44px 0; color: var(--ink3); font-size: .88rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }

/* ==========================================================================
   Motion
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .mod:hover, .opt:hover { transform: none; }
}

/* ── Sub-category picker ─────────────────────────────────────────────
   The learner chooses their B1 line and the module grid follows.
   Without JS every card stays visible, which is the honest fallback. */
.p66-lines{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.p66-line{
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
  padding:10px 14px;border-radius: var(--radiusPill);
  border:1px solid var(--line,#2a2f3a);
  background:transparent;color:var(--ink2,#9aa3b2);
  transition:background .15s,color .15s,border-color .15s;
}
.p66-line:hover{color:var(--ink,#e8ecf2);border-color:var(--ink3,#5b6474)}
.p66-line.is-on{
  background:var(--accent,#4f8cff);border-color:var(--accent,#4f8cff);
  color:#fff;font-weight:600;
}
.p66-line:focus-visible{outline:2px solid var(--accent,#4f8cff);outline-offset:2px}
.mods .mod[hidden]{display:none}