/* Ground School — design system.
   Cockpit-derived language: dark display surfaces, Garmin colour logic
   (magenta = active, cyan = selectable, green = normal/correct, amber = caution, red = warning).
   Brand fonts match typerating.aero: Barlow Condensed / IBM Plex Sans / IBM Plex Mono. */

/* build stamp: keep equal to BUILD in src/version.js (ensureStyles() reloads this file if they differ) */
:root { --build: b20261101b; }

/* Fonts are self-hosted (assets/fonts, SIL Open Font License, see OFL-*.txt there) so no visitor data goes to
   Google. Files and unicode-ranges are Google Fonts' latin, latin-ext and (Plex Sans) greek subsets; the
   browser downloads a subset only when the page shows a character in its range. */
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/ibm-plex-sans-400-700-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/ibm-plex-sans-400-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/ibm-plex-sans-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #eef1f5;
  --bg-2: #e3e8ee;
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --panel-3: #e9eef4;
  --ink: #0f1c2b;
  --ink-soft: #4a5868;
  --ink-faint: #7d8b9b;
  --rule: #d3dae2;
  --accent: #b5267a;
  --accent-2: #d23d90;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --cyan: #0a88ab;
  --green: #12935a;
  --green-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --amber: #b77a0e;
  --amber-soft: color-mix(in srgb, var(--amber) 16%, transparent);
  --red: #cf3434;
  --red-soft: color-mix(in srgb, var(--red) 12%, transparent);
  --shadow: 0 1px 2px rgba(15, 28, 43, .06), 0 8px 24px rgba(15, 28, 43, .08);
  --shadow-lg: 0 18px 50px rgba(15, 28, 43, .18);
  /* Display surfaces (MFD-style) stay dark in both themes */
  --mfd: #050a10;
  --mfd-2: #0b1520;
  --mfd-line: #1d2f44;
  --mfd-ink: #dfe8f1;
  --mfd-soft: #8ea3b8;
  --mfd-off: #34475c;
  --mfd-green: #3ddc84;
  --mfd-cyan: #3fd0ec;
  --mfd-magenta: #ef5ab0;
  --mfd-amber: #f5b53d;
  --mfd-red: #ff4f4f;
  --mfd-white: #f4f7fa;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;
  --r-sm: 10px;
  --gutter: 16px;
  --tabbar: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070d15; --bg-2: #0b141f; --panel: #0f1b29; --panel-2: #13223333; --panel-3: #172739;
    --ink: #e4eaf1; --ink-soft: #9fb0c2; --ink-faint: #6c8197; --rule: #1f3146;
    --accent: #e0559f; --accent-2: #f070b2; --accent-ink: #14050d;
    --cyan: #3fd0ec; --green: #3ddc84; --amber: #f2b33d; --red: #ff5a5a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070d15; --bg-2: #0b141f; --panel: #0f1b29; --panel-2: #13223333; --panel-3: #172739;
  --ink: #e4eaf1; --ink-soft: #9fb0c2; --ink-faint: #6c8197; --rule: #1f3146;
  --accent: #e0559f; --accent-2: #f070b2; --accent-ink: #14050d;
  --cyan: #3fd0ec; --green: #3ddc84; --amber: #f2b33d; --red: #ff5a5a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(30px, 6vw, 44px); }
h2 { font-size: clamp(24px, 4.6vw, 32px); }
h3 { font-size: 21px; }
p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.eyebrow { font: 500 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- App frame ---------- */
.frame { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.main { min-width: 0; padding-bottom: calc(var(--tabbar) + var(--safe-b) + 24px); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  padding-top: var(--safe-t);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-txt b { font: 700 19px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.brand-txt span { font: 500 10px/1.2 var(--mono); letter-spacing: .12em; color: var(--ink-faint); text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--rule); font: 600 13px/1 var(--mono); white-space: nowrap;
}
.stat-chip svg { width: 16px; height: 16px; }
.stat-chip.streak { color: var(--amber); }
.stat-chip.xp { color: var(--cyan); }
.stat-chip.off { color: var(--ink-faint); }
.type-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--panel); text-decoration: none; color: var(--ink); font: 600 12px/1 var(--mono); letter-spacing: .04em;
}
.type-chip:hover { border-color: var(--accent); }
.type-chip { white-space: nowrap; }
.type-chip svg { width: 16px; height: 16px; flex: none; }
/* "Switch course", next to the course name: opens the course list */
.switch-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); text-decoration: none; color: var(--accent); font: 600 12px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; flex: none;
}
.switch-chip:hover, .switch-chip[aria-current] { border-color: var(--accent); }
.switch-chip svg { width: 16px; height: 16px; flex: none; }
.next-up > svg { width: 22px; height: 22px; flex: none; color: var(--ink-faint); }

/* Tab bar (mobile) / side rail (desktop) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--ink-faint); font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"] svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)); }

@media (min-width: 980px) {
  .frame { grid-template-columns: 232px 1fr; }
  .tabbar {
    position: sticky; top: 0; bottom: auto; height: 100dvh; padding: 18px 12px; grid-template-columns: 1fr; grid-auto-rows: 52px; align-content: start; gap: 4px;
    border-top: 0; border-right: 1px solid var(--rule); background: var(--panel);
  }
  .tabbar .rail-brand { display: flex; margin: 0 6px 18px; }
  .tabbar { overflow-y: auto; }
  .tabbar .rail-admin { display: contents; }
  .rail-label {
    display: flex; align-items: flex-end; margin: 8px 6px 0; padding: 0 8px 8px; border-top: 1px solid var(--rule);
    font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  }
  .tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; border-radius: 12px; font-size: 12.5px; }
  .tab:hover { background: var(--panel-3); color: var(--ink); }
  .tab[aria-current="page"] { background: var(--accent-soft); }
  .main { padding-bottom: 48px; }
  .topbar .brand { display: none; }
}
.rail-brand, .rail-admin { display: none; }
@media (max-width: 979.98px) { .tab.via-admin { color: var(--accent); } }

/* ---------- Generic components ---------- */
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }
.card-pad { padding: 18px; }
.btn {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; font: 700 16px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 25%, transparent); background: var(--ink-faint); color: var(--bg); }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule); box-shadow: 0 3px 0 var(--rule); }
.btn.ghost:active { box-shadow: 0 0 0 var(--rule); }
.btn.green { background: var(--green); color: #04150c; box-shadow: 0 4px 0 color-mix(in srgb, var(--green) 50%, #000); }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--red) 50%, #000); }
.btn.cyan { background: var(--cyan); color: #031418; box-shadow: 0 4px 0 color-mix(in srgb, var(--cyan) 50%, #000); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 20px; height: 20px; }
.linkbtn { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--accent); font-weight: 600; }
.iconbtn { appearance: none; border: 0; background: transparent; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.iconbtn:hover { background: var(--panel-3); color: var(--ink); }
.iconbtn svg { width: 22px; height: 22px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid currentColor; }
.pill.green { color: var(--green); } .pill.amber { color: var(--amber); } .pill.red { color: var(--red); } .pill.cyan { color: var(--cyan); } .pill.magenta { color: var(--accent); } .pill.faint { color: var(--ink-faint); }
.row { display: flex; align-items: center; gap: 10px; }
.stack { display: grid; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.section { padding-top: 22px; padding-bottom: 8px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.divider { height: 1px; background: var(--rule); margin: 18px 0; }
.bar { height: 10px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar.cyan > i { background: var(--cyan); } .bar.amber > i { background: var(--amber); } .bar.magenta > i { background: var(--accent); }
kbd { font: 600 12px/1 var(--mono); padding: 3px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; }

/* Chat bubble (main.js) and the lesson player's chat button (session.js): open the assistant (src/support.js) */
.chat-fab { position: fixed; right: max(16px, calc(var(--safe-r, 0px) + 12px)); bottom: calc(var(--tabbar) + var(--safe-b) + 14px); z-index: 70;
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 15px; border: 0; border-radius: 26px 26px 8px 26px; cursor: pointer;
  background: var(--accent); color: #fff; font: 700 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(4, 12, 24, .28), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.chat-fab svg { width: 24px; height: 24px; }
.chat-fab:active { transform: translateY(1px); }
@media (min-width: 980px) { .chat-fab { bottom: 24px; right: 24px; } }
body:has(#app .player) .chat-fab, body:has(.hc) .chat-fab, body:has(.scrim) .chat-fab { display: none; }
body:has(.update-bar) .chat-fab { bottom: calc(var(--tabbar) + var(--safe-b) + 92px); }
/* sign-in and legal pages: no tab bar, so a smaller icon-only bubble in the corner */
body:not(:has(.tabbar)) .chat-fab { bottom: calc(var(--safe-b) + 14px); right: 14px; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 24px 24px 6px 24px; }
body:not(:has(.tabbar)) .chat-fab span { display: none; }
.player-top .chat-btn { margin: -6px -6px -6px 0; color: var(--accent); }

/* Pilot avatars (src/avatar.js, src/views/avatar.js) */
.me-chip { display: block; width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--rule); }
.me-chip svg { width: 36px; height: 36px; display: block; }
.me-big { position: relative; display: block; width: 84px; height: 84px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--accent-soft); }
.me-big > svg { width: 84px; height: 84px; display: block; }
.me-edit { position: absolute; right: -4px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--panel); }
.me-edit svg { width: 15px; height: 15px; }
.av-stage { display: grid; justify-items: center; gap: 12px; padding: 20px 16px 16px; }
.av-preview svg { width: 168px; height: 168px; display: block; filter: drop-shadow(0 10px 18px rgba(4, 12, 24, .22)); }
.av-sec { display: grid; gap: 8px; min-width: 0; }
.av-h { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.av-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.av-opt { flex: none; width: 82px; display: grid; justify-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 14px; border: 2px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; scroll-snap-align: start; font: 500 12px/1.2 var(--body); text-align: center; }
.av-opt svg { width: 60px; height: 60px; display: block; }
.av-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.av-swatch { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; margin: 3px; }
.av-swatch[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.av-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.av-actions .btn { min-width: 0; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-b) + 14px); transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; pointer-events: none; width: min(92vw, 440px); }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14.5px; animation: toastIn .25s ease; pointer-events: auto; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* New-release notice (src/update.js): above the tab bar, hidden while a lesson is on screen */
.update-bar { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-b) + 14px); transform: translateX(-50%); z-index: 95; width: min(92vw, 520px);
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.35; animation: toastIn .25s ease; }
.update-bar > svg { width: 20px; height: 20px; flex: none; color: var(--cyan); }
.update-bar > span { flex: 1; }
.update-bar .btn { flex: none; }
body:has(#app .player) .update-bar { display: none; }

/* Modal / sheet */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(3,8,14,.62); display: grid; place-items: end center; animation: fade .2s ease; }
@media (min-width: 640px) { .scrim { place-items: center; } }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(100%, 520px); max-height: 92dvh; overflow: auto; background: var(--panel); border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + var(--safe-b)); box-shadow: var(--shadow-lg); animation: up .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 640px) { .sheet { border-radius: 20px; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }

/* ---------- Welcome / auth ---------- */
.hero {
  position: relative; overflow: hidden; min-height: 100dvh; display: grid; align-items: center;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, #e0559f 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #3fd0ec 16%, transparent), transparent 60%),
    linear-gradient(180deg, #050a10, #0b1520);
  color: #e7edf3; padding: calc(var(--safe-t) + 28px) 0 calc(var(--safe-b) + 28px);
}
.hero .eyebrow { color: #f070b2; }
.hero h1 { font-size: clamp(40px, 9vw, 72px); line-height: .95; font-style: italic; font-weight: 800; letter-spacing: -.005em; }
.hero h1 em { font-style: italic; color: #f070b2; }
.hero p.lede { color: #a9bccf; font-size: 17px; max-width: 46ch; margin-top: 14px; }
.hero-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.hero-points { display: grid; gap: 10px; margin: 22px 0 26px; padding: 0; list-style: none; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; color: #cfdbe7; font-size: 15px; }
.hero-points svg { flex: none; width: 20px; height: 20px; color: #3ddc84; margin-top: 2px; }
.hero-intl { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 26px; padding: 12px 14px; border: 1px solid #1f3146; border-radius: 12px; background: rgba(15, 27, 41, .7); color: #cfdbe7; font-size: 14.5px; }
.hero-intl svg { flex: none; width: 20px; height: 20px; color: #3fd0ec; margin-top: 1px; }
.hero-intl b { color: #f4f7fa; }
.hero-sky { position: absolute; inset: 0; pointer-events: none; opacity: .32; }
.auth-card { background: rgba(13, 24, 37, .82); border: 1px solid #1f3146; border-radius: 20px; padding: 22px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #e4eaf1; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.auth-card h2 { font-size: 28px; }
.auth-btn {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; cursor: pointer;
  font: 600 15.5px/1 var(--body); border: 1px solid #2a3e55; background: #f4f7fa; color: #0d1722; transition: filter .15s, transform .08s;
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn svg { width: 20px; height: 20px; }
.auth-btn.apple { background: #000; color: #fff; border-color: #000; }
.auth-btn.email { background: transparent; color: #e4eaf1; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: #6c8197; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 6px 0; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: #1f3146; }
.field { display: grid; gap: 6px; }
.field label { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.auth-card .field label { color: #9fb0c2; }
.field-err { margin: 2px 0 0; font-size: 13px; color: var(--red); }
.input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink); font: 400 16px/1 var(--body);
}
.auth-card .input { background: #0a1520; border-color: #23384f; color: #e4eaf1; }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 25%, transparent); }
.demo-note { font-size: 12.5px; color: #8ea3b8; border: 1px dashed #2a3e55; border-radius: 10px; padding: 10px 12px; }
.legal { font-size: 12px; color: #6c8197; }

/* ---------- Catalog ---------- */
.type-card { position: relative; overflow: hidden; padding: 18px; display: grid; gap: 10px; text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.type-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.type-card .desig { font: 800 34px/1 var(--display); font-style: italic; letter-spacing: -.01em; }
.type-card .variant { font: 600 13px/1 var(--mono); color: var(--accent); letter-spacing: .08em; }
.type-card.soon { opacity: .62; cursor: default; }
.type-card.soon:hover { transform: none; border-color: var(--rule); }
.type-card .jet { position: absolute; right: -10px; top: 8px; width: 170px; opacity: .14; color: var(--ink); }

/* ---------- Path (flight-plan route) ---------- */
.course-head { padding: 18px 0 6px; display: grid; gap: 14px; }
.readiness { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.ring { --p: 0; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--panel-3) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.ring b { position: relative; font: 700 20px/1 var(--display); }
.ring small { display: block; font: 500 9px/1 var(--mono); color: var(--ink-faint); letter-spacing: .1em; text-align: center; margin-top: 2px; }
.next-up { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.next-up .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.next-up .ico svg { width: 26px; height: 26px; }

.phase { margin: 26px 0 6px; }
.phase-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--mfd-2); color: var(--mfd-ink); border: 1px solid var(--mfd-line); }
.phase-head .num { font: 700 12px/1 var(--mono); color: var(--mfd-magenta); letter-spacing: .12em; }
.phase-head h3 { font-size: 22px; color: var(--mfd-white); }
.phase-head p { font-size: 13px; color: var(--mfd-soft); }
.unit { margin-top: 18px; }
.unit-title { display: flex; align-items: center; gap: 10px; margin: 0 4px 2px; }
.unit-title .tag { font: 600 11px/1 var(--mono); color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; }
.unit-title h4 { font-size: 19px; }
.route { position: relative; padding: 30px 0 4px; }
.route svg.leg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wpt-row { position: relative; height: 104px; }
.wpt {
  position: absolute; top: 12px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 0; color: var(--ink);
}
.wpt-btn {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--panel); border: 3px solid var(--rule); box-shadow: 0 5px 0 var(--rule); transition: transform .1s;
}
.wpt:active .wpt-btn { transform: translateY(3px); box-shadow: 0 2px 0 var(--rule); }
.wpt-btn svg { width: 30px; height: 30px; }
.wpt-id { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; color: var(--ink-soft); white-space: nowrap; }
.wpt-name { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); }
.wpt.done .wpt-btn { border-color: var(--green); background: var(--green-soft); color: var(--green); box-shadow: 0 5px 0 color-mix(in srgb, var(--green) 45%, #000); }
.wpt.current .wpt-btn { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 50%, #000), 0 0 0 8px var(--accent-soft); animation: pulse 2.2s ease-in-out infinite; }
.wpt.locked .wpt-btn { color: var(--ink-faint); opacity: .75; }
.wpt.paywalled .wpt-btn::after { content: ""; position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23201400" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>') center/13px no-repeat; border: 2px solid var(--panel); }
@keyframes pulse { 50% { box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 50%, #000), 0 0 0 14px transparent; } }
.stars { display: flex; gap: 2px; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }
.stars i { width: 13px; height: 13px; background: var(--panel-3); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: var(--amber); }
.start-bubble { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 2px solid var(--accent); color: var(--accent); border-radius: 10px; padding: 4px 10px; font: 700 12px/1 var(--mono); letter-spacing: .1em; white-space: nowrap; animation: bob 1.8s ease-in-out infinite; z-index: 2; }
.start-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--accent); border-bottom: 0; }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }

/* ---------- Lesson player ---------- */
.player { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.player-top { position: sticky; top: 0; z-index: 10; padding: calc(var(--safe-t) + 10px) var(--gutter) 10px; display: flex; align-items: center; gap: 12px; background: var(--bg); }
.player-top .bar { flex: 1; height: 14px; }
.player-top { flex-wrap: wrap; row-gap: 6px; }
.player-note { flex: 0 0 100%; margin: 0; font-size: 11px; line-height: 1.35; color: var(--ink-faint); text-align: center; }
.player-top .bar > i { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 70%, #fff)); }
.player-body { padding: 8px var(--gutter) 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.player-foot { position: sticky; bottom: 0; z-index: 10; padding: 14px var(--gutter) calc(14px + var(--safe-b)); border-top: 1px solid var(--rule); background: var(--bg); }
.player-foot .in { max-width: 760px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }
.player-foot .in .btn { flex: 1; }
.player-foot .in .btn.nav-back { flex: 0 0 auto; padding: 0 16px 0 10px; gap: 4px; }
.player-foot .in .btn.nav-back.icon-only { padding: 0 12px; }
.player-top .pager { font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-foot.correct { background: color-mix(in srgb, var(--green) 14%, var(--bg)); border-top-color: color-mix(in srgb, var(--green) 40%, transparent); }
.player-foot.wrong { background: color-mix(in srgb, var(--red) 12%, var(--bg)); border-top-color: color-mix(in srgb, var(--red) 40%, transparent); }
.feedback { max-width: 760px; margin: 0 auto 12px; display: grid; gap: 6px; animation: up .22s ease; }
.feedback h4 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.feedback.correct h4 { color: var(--green); }
.feedback.wrong h4 { color: var(--red); }
.feedback .why { font-size: 14.5px; color: var(--ink-soft); }
.feedback .ans { font-size: 14.5px; }
.feedback .ref { font: 500 11.5px/1.3 var(--mono); color: var(--ink-faint); }
.q-kind { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 10px 0 8px; display: flex; gap: 8px; align-items: center; }
.q-text { font: 600 21px/1.3 var(--body); margin-bottom: 18px; text-wrap: pretty; }
.q-text small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-top: 6px; }
.options { display: grid; gap: 10px; }
.opt {
  appearance: none; width: 100%; text-align: left; cursor: pointer; display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; border: 2px solid var(--rule); background: var(--panel); box-shadow: 0 3px 0 var(--rule);
  font: 500 16px/1.35 var(--body); color: var(--ink); transition: border-color .12s, background .12s, transform .08s;
}
.opt:hover { border-color: color-mix(in srgb, var(--cyan) 50%, var(--rule)); }
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rule); }
.opt .k { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--rule); display: grid; place-items: center; font: 600 12.5px/1 var(--mono); color: var(--ink-faint); }
.opt.sel { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); box-shadow: 0 3px 0 color-mix(in srgb, var(--cyan) 50%, #000); }
.opt.sel .k { border-color: var(--cyan); color: var(--cyan); }
.opt.right { border-color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--green) 50%, #000); }
.opt.right .k { border-color: var(--green); color: var(--green); }
.opt.bad { border-color: var(--red); background: var(--red-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--red) 50%, #000); }
.opt[disabled] { cursor: default; }
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf .opt { justify-content: center; font: 700 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 22px; }
.num-wrap { display: flex; gap: 10px; align-items: center; }
.num-wrap .input { font: 600 26px/1 var(--mono); min-height: 64px; text-align: center; letter-spacing: .04em; }
.num-wrap .unit { font: 600 18px/1 var(--mono); color: var(--ink-soft); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.keypad button { min-height: 52px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--panel); font: 600 22px/1 var(--mono); cursor: pointer; box-shadow: 0 3px 0 var(--rule); color: var(--ink); }
.keypad button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rule); }
@media (hover: hover) and (pointer: fine) { .keypad { display: none; } }

/* Ordering */
.order-slots { display: grid; gap: 8px; margin-bottom: 16px; min-height: 60px; padding: 10px; border-radius: 14px; border: 2px dashed var(--rule); }
.order-slots:empty::before { content: "Tap or drag the steps in order"; color: var(--ink-faint); font-size: 14px; text-align: center; padding: 10px; }
.order-pool { display: grid; gap: 8px; }
.chip-step {
  appearance: none; display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; cursor: pointer;
  padding: 11px 14px; border-radius: 12px; border: 2px solid var(--rule); background: var(--panel); box-shadow: 0 3px 0 var(--rule); font: 500 15px/1.3 var(--body); color: var(--ink);
}
.chip-step .n { font: 700 12px/1 var(--mono); color: var(--accent); min-width: 18px; }
.chip-step.placed { border-color: var(--cyan); }
.chip-step.right { border-color: var(--green); background: var(--green-soft); }
.chip-step.bad { border-color: var(--red); background: var(--red-soft); }
.chip-step .resp { margin-left: auto; font: 600 12.5px/1.2 var(--mono); color: var(--ink-soft); text-align: right; }
/* Drag to order (exercises order()): the grip drags on touch, the whole step with a mouse */
.chip-step .grip { margin: -8px -8px -8px auto; padding: 8px; display: inline-flex; color: var(--ink-faint); touch-action: none; cursor: grab; flex: none; }
.chip-step .resp + .grip { margin-left: 4px; }
.chip-step .grip svg { width: 18px; height: 18px; }
.chip-step:disabled .grip { visibility: hidden; }
.chip-step.dragging { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; margin: 0; pointer-events: none; box-shadow: var(--shadow-lg); opacity: .96; cursor: grabbing; }
.order-drop { height: 4px; border-radius: 2px; background: var(--accent); margin: -2px 0; }
.answered { opacity: .92; }

/* Matching */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match .col { display: grid; gap: 10px; align-content: start; }
.match .opt { padding: 12px; font-size: 14.5px; min-height: 56px; }
.match .opt.paired { opacity: .4; pointer-events: none; }
.match .opt.flash-bad { animation: shake .35s; border-color: var(--red); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Fill (checklist line) */
.cl-line { display: flex; align-items: baseline; gap: 8px; padding: 16px; border-radius: 14px; background: var(--mfd); color: var(--mfd-ink); font: 600 16px/1.4 var(--mono); border: 1px solid var(--mfd-line); margin-bottom: 16px; }
.cl-line .dots { flex: 1; border-bottom: 2px dotted var(--mfd-off); transform: translateY(-4px); min-width: 20px; }
.cl-line .blank { min-width: 90px; padding: 2px 10px; border-radius: 6px; border: 1.5px dashed var(--mfd-cyan); color: var(--mfd-cyan); text-align: center; }
.cl-line .blank.filled { border-style: solid; }
.word-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.word-bank .chip-step { width: auto; }

/* Learn cards */
.learn h2 { margin: 6px 0 12px; }
.learn .body { font-size: 16.5px; line-height: 1.62; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.learn .body strong { color: var(--ink); }
.learn .body ul, .learn .body ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.callout { border-left: 4px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, var(--panel)); padding: 12px 14px; border-radius: 0 12px 12px 0; font-size: 15px; }
.callout.amber { border-color: var(--amber); background: var(--amber-soft); }
.callout.red { border-color: var(--red); background: var(--red-soft); }
.callout.tip { border-color: var(--accent); background: var(--accent-soft); }
.callout b.t { display: block; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.facts { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.facts .f { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.facts .f:first-child { border-top: 0; }
.facts .f b { font: 600 14px/1.3 var(--mono); color: var(--cyan); text-align: right; }

/* Lesson complete */
.complete { text-align: center; display: grid; gap: 18px; justify-items: center; padding-top: 28px; }
.complete h1 { color: var(--amber); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 480px; }
.tile { border-radius: 14px; border: 2px solid var(--rule); overflow: hidden; text-align: center; background: var(--panel); }
.tile .t { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px; color: var(--bg); }
.tile .v { font: 700 26px/1 var(--display); padding: 14px 6px; }
.tile.xp { border-color: var(--cyan); } .tile.xp .t { background: var(--cyan); }
.tile.acc { border-color: var(--green); } .tile.acc .t { background: var(--green); }
.tile.time { border-color: var(--accent); } .tile.time .t { background: var(--accent); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- MFD diagram frame ---------- */
.mfd {
  background: radial-gradient(120% 80% at 50% 0%, #0d1824, var(--mfd)); color: var(--mfd-ink); border-radius: 18px; border: 1px solid var(--mfd-line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.25); overflow: hidden; position: relative;
}
.mfd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--mfd-line); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mfd-soft); }
.mfd-head b { color: var(--mfd-cyan); font-weight: 600; }
.mfd-head .sp { flex: 1; }
.mfd svg.dg { display: block; width: 100%; height: auto; font-family: var(--mono); }
.mfd-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--mfd-line); background: #08111b; }
.ctl { display: grid; gap: 5px; }
.ctl > span { font: 600 10px/1 var(--mono); letter-spacing: .1em; color: var(--mfd-soft); text-transform: uppercase; }
.seg { display: inline-flex; border: 1px solid var(--mfd-line); border-radius: 9px; overflow: hidden; }
.seg button { appearance: none; border: 0; background: #0e1a28; color: var(--mfd-soft); font: 600 12px/1 var(--mono); padding: 9px 10px; cursor: pointer; min-width: 44px; letter-spacing: .04em; }
.seg button + button { border-left: 1px solid var(--mfd-line); }
.seg button[aria-pressed="true"] { background: #13304a; color: var(--mfd-cyan); box-shadow: inset 0 -2px 0 var(--mfd-cyan); }
.seg.warn button[aria-pressed="true"] { color: var(--mfd-red); box-shadow: inset 0 -2px 0 var(--mfd-red); background: #3a1418; }
.pushbtn { appearance: none; border: 1px solid #5a1f24; background: #2a0f12; color: var(--mfd-red); font: 700 11.5px/1.1 var(--mono); padding: 8px 10px; border-radius: 8px; cursor: pointer; letter-spacing: .04em; }
.pushbtn[aria-pressed="true"] { background: var(--mfd-red); color: #200; box-shadow: 0 0 14px rgba(255,79,79,.6); }
.pushbtn.white { border-color: #2a3e55; background: #101c2a; color: var(--mfd-white); }
.pushbtn.white[aria-pressed="true"] { background: var(--mfd-white); color: #0b1520; box-shadow: 0 0 12px rgba(255,255,255,.45); }
.mfd-cas { display: grid; gap: 2px; padding: 10px 14px; min-height: 40px; border-top: 1px solid var(--mfd-line); font: 700 13px/1.25 var(--mono); letter-spacing: .03em; background: #03070c; }
.mfd-cas .red { color: #fff; background: var(--mfd-red); padding: 1px 6px; width: max-content; }
.mfd-cas .amber { color: var(--mfd-amber); }
.mfd-cas .white { color: var(--mfd-white); }
.mfd-cas .none { color: var(--mfd-off); font-weight: 500; }
.mfd-note { padding: 10px 14px 12px; border-top: 1px solid var(--mfd-line); font: 400 13.5px/1.45 var(--body); color: var(--mfd-soft); }
.mfd-note b { color: var(--mfd-ink); }
.scen { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--mfd-line); }
.scen button { appearance: none; border: 1px solid var(--mfd-line); background: transparent; color: var(--mfd-soft); border-radius: 999px; padding: 6px 11px; font: 600 11.5px/1 var(--mono); cursor: pointer; }
.scen button:hover, .scen button[aria-pressed="true"] { color: var(--mfd-magenta); border-color: var(--mfd-magenta); }

/* SVG diagram primitives */
.dg .wire { fill: none; stroke: var(--mfd-off); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.dg .wire.on { stroke: var(--mfd-green); }
.dg .wire.flow { stroke-dasharray: 2 9; animation: flow .6s linear infinite; stroke-width: 3.5; }
.dg .wire.flow.rev { animation-direction: reverse; }
.dg .wire.fuel { stroke: #8c6a1e; } .dg .wire.fuel.on { stroke: #f5b53d; }
.dg .wire.motive.on { stroke: var(--mfd-magenta); }
.dg .wire.hyd.on { stroke: #3fd0ec; } .dg .wire.hydp.on { stroke: #3ddc84; }
.dg .wire.bleed.on { stroke: #ff8a4c; } .dg .wire.cool.on { stroke: #7fb6ff; } .dg .wire.svc.on { stroke: #c08cff; }
.dg .wire.o2.on { stroke: #58e0a8; }
@keyframes flow { to { stroke-dashoffset: -11; } }
.dg .bus { fill: #101e2d; stroke: var(--mfd-off); stroke-width: 2; transition: fill .3s, stroke .3s; }
.dg .bus.on { fill: #0f3a26; stroke: var(--mfd-green); filter: drop-shadow(0 0 5px rgba(61,220,132,.45)); }
.dg .bus.emer.on { fill: #3a1d10; stroke: var(--mfd-amber); filter: drop-shadow(0 0 5px rgba(245,181,61,.45)); }
.dg .lbl { fill: var(--mfd-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.dg .lbl.big { font-size: 13px; fill: var(--mfd-ink); }
.dg .lbl.on { fill: var(--mfd-ink); }
.dg .lbl.cy { fill: var(--mfd-cyan); }
.dg .lbl.mg { fill: var(--mfd-magenta); }
.dg .lbl.am { fill: var(--mfd-amber); }
.dg .lbl.gr { fill: var(--mfd-green); }
/* flight mode annunciator (src/diagrams/fma.js) */
.dg .fma-t { font: 700 28px/1 var(--mono); letter-spacing: .02em; }
.dg .fma-t.act { fill: var(--mfd-green); }
.dg .fma-t.arm { fill: var(--mfd-white); font-size: 25px; }
.dg .fma-t.amb { fill: var(--mfd-amber); }
.dg .fma-t.fma-ap { font-size: 26px; }
.dg .fma-t .fma-ref { font-size: 22px; }
.dg .fma-sel { fill: var(--mfd-cyan); font: 700 22px/1 var(--mono); }
.dg .fma-row { font: 700 19px/1 var(--mono); letter-spacing: .06em; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 4px; }
.dg .fma-row.act { fill: var(--mfd-green); } .dg .fma-row.arm { fill: var(--mfd-white); }
.dg .fma-lbl { fill: #fff; font: 700 19px/1 var(--mono); letter-spacing: .08em; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 4px; }
.dg .fma-hit { fill: transparent; }
@keyframes fma-up { from { transform: translateY(44px); fill: var(--mfd-white); } 60% { fill: var(--mfd-white); } }
.dg .fma-t.up { animation: fma-up 1.1s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .dg .fma-t.up { animation: none; } }
.dg .lbl.rd { fill: var(--mfd-red); }
.dg .comp { fill: #0e1a28; stroke: #3b526b; stroke-width: 2; transition: fill .3s, stroke .3s; }
.dg .comp.on { stroke: var(--mfd-green); fill: #0f2c20; }
.dg .comp.amber { stroke: var(--mfd-amber); fill: #2c2110; }
.dg .comp.red { stroke: var(--mfd-red); fill: #2f1013; }
.dg .comp.cyan { stroke: var(--mfd-cyan); fill: #0d2a33; }
.dg .valve { fill: #0e1a28; stroke: #6d849b; stroke-width: 2; }
.dg .valve.open { stroke: var(--mfd-green); }
.dg .valve.shut { stroke: var(--mfd-red); }
.dg .spin { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }
.dg .spin.slow { animation-duration: 2.4s; }
@keyframes spin { to { transform: rotate(360deg); } }
.dg [data-part] { cursor: default; }
.dg.hot [data-part] { cursor: pointer; }
.dg.hot [data-part]:hover > * { filter: brightness(1.35); }
.dg .hit-ok > * { stroke: var(--mfd-green) !important; filter: drop-shadow(0 0 8px rgba(61,220,132,.8)); }
.dg .hit-bad > * { stroke: var(--mfd-red) !important; }
.dg .focus-ring { fill: none; stroke: var(--mfd-magenta); stroke-width: 2.5; stroke-dasharray: 5 4; animation: flow 1s linear infinite; }
.dg .fluid { transition: height .6s, y .6s; }
@media (prefers-reduced-motion: reduce) {
  .dg .wire.flow, .dg .spin, .wpt.current .wpt-btn, .start-bubble { animation: none; }
  .dg .wire.flow { stroke-dasharray: none; }
}

/* ---------- Practice ---------- */
.drill { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s; }
.drill:hover { transform: translateY(-1px); border-color: var(--accent); }
.drill .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; }
.drill .ico svg { width: 28px; height: 28px; }
.drill h3 { font-size: 20px; }
.drill p { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.drill .due { font: 700 12px/1 var(--mono); color: var(--accent); }
.ico.mg { background: var(--accent-soft); color: var(--accent); }
.ico.cy { background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.ico.gr { background: var(--green-soft); color: var(--green); }
.ico.am { background: var(--amber-soft); color: var(--amber); }
.ico.rd { background: var(--red-soft); color: var(--red); }

.timer { font: 700 18px/1 var(--mono); color: var(--amber); min-width: 64px; text-align: right; }
.cas-stage { display: grid; gap: 10px; }
.pfd-mini { background: var(--mfd); border: 1px solid var(--mfd-line); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.mw-row { display: flex; gap: 10px; }
.mw { flex: 1; border-radius: 8px; padding: 10px 8px; text-align: center; font: 700 12px/1.1 var(--mono); letter-spacing: .06em; border: 1px solid #2a3e55; color: #5a6f86; background: #0b1520; }
.mw.warn.on { background: var(--mfd-red); color: #200; border-color: var(--mfd-red); animation: blink .7s steps(2) infinite; }
.mw.caut.on { background: var(--mfd-amber); color: #241600; border-color: var(--mfd-amber); }
@keyframes blink { 50% { opacity: .35; } }
.cas-box { min-height: 120px; border: 1px solid var(--mfd-line); border-radius: 10px; padding: 10px; font: 700 15px/1.5 var(--mono); background: #03070c; }
.cas-box .red { background: var(--mfd-red); color: #fff; padding: 0 6px; display: inline-block; }
.cas-box .amber { color: var(--mfd-amber); }
.cas-box .white { color: var(--mfd-white); }
.cas-box .flash { animation: blink .6s steps(2) 6; }

.oral-card { min-height: 260px; display: grid; align-content: center; text-align: center; padding: 26px; gap: 14px; perspective: 1000px; }
.oral-card .q { font: 600 21px/1.35 var(--body); }
.oral-card .a { font-size: 16px; color: var(--ink-soft); text-align: left; border-top: 1px solid var(--rule); padding-top: 14px; line-height: 1.6; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade .btn { font-size: 13px; padding: 0 6px; min-height: 52px; flex-direction: column; gap: 3px; }
.grade .btn small { font: 500 10px/1 var(--mono); opacity: .8; text-transform: none; letter-spacing: 0; }

/* Scenario (SRM) */
.scenario { display: grid; gap: 14px; }
.scen-hdr { border-radius: 16px; overflow: hidden; background: var(--mfd); color: var(--mfd-ink); border: 1px solid var(--mfd-line); }
.scen-hdr .strip { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; font: 600 12px/1.2 var(--mono); color: var(--mfd-soft); border-bottom: 1px solid var(--mfd-line); }
.scen-hdr .strip b { color: var(--mfd-cyan); font-weight: 600; }
.scen-hdr .txt { padding: 14px; font-size: 16px; line-height: 1.55; }
.debrief { border-radius: 14px; padding: 14px; background: var(--panel); border: 1px solid var(--rule); display: grid; gap: 8px; }
.debrief h4 { font-size: 18px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Progress ---------- */
.rank { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.epaulet { width: 92px; height: 54px; }
.area-row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 14px; }
.area-row b { font: 600 13px/1 var(--mono); text-align: right; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.badge { text-align: center; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.badge .medal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--ink-faint); border: 2px dashed var(--rule); }
.badge.got .medal { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--amber) 60%, #fff), var(--amber)); color: #2a1a00; border: 2px solid color-mix(in srgb, var(--amber) 60%, #000); box-shadow: 0 4px 12px color-mix(in srgb, var(--amber) 40%, transparent); }
.badge .medal svg { width: 30px; height: 30px; }
.badge b { color: var(--ink); font-size: 12.5px; }
.cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.cal i { aspect-ratio: 1; border-radius: 4px; background: var(--panel-3); }
.cal i.on { background: var(--amber); }
.cal i.today { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Settings */
.list { display: grid; }
.list .li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--rule); }
.list .li:first-child { border-top: 0; }
.list .li .grow { flex: 1; min-width: 0; }
.list .li .t { font-weight: 600; }
.list .li .s { font-size: 13px; color: var(--ink-soft); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--rule); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
select.input { appearance: none; padding-right: 36px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237d8b9b" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; min-height: 42px; width: auto; }

/* Paywall */
.paywall-head { text-align: center; display: grid; gap: 8px; justify-items: center; }
.paywall-head .lock { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); }
.paywall-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.paywall-list li { display: flex; gap: 10px; font-size: 15px; }
.paywall-list svg { flex: none; width: 20px; height: 20px; color: var(--green); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.plan { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: var(--r-sm); background: var(--panel-2); cursor: pointer; }
.plan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan input { grid-row: 1 / span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.plan-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.plan-price { font: 600 22px/1.1 var(--display); letter-spacing: .01em; }
.plan-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 4px; }
.plan-inc { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.plan-inc svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.pw-promo { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--green) 12%, transparent); font-size: 13.5px; font-weight: 600; }
.pw-promo svg { width: 18px; height: 18px; flex: none; color: var(--green); }
/* Refer a friend (#/refer) */
.ref-code { font: 700 28px/1 var(--mono); letter-spacing: .08em; color: var(--accent); }

/* System library */
.sys-card { display: grid; gap: 10px; padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s; }
.sys-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.sys-card .thumb { background: var(--mfd); aspect-ratio: 16/8; display: grid; place-items: center; color: var(--mfd-cyan); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.sys-card .thumb svg { width: 56px; height: 56px; }
.sys-card .meta { padding: 0 16px 16px; display: grid; gap: 4px; }
.sys-card .meta h3 { font-size: 20px; }
.sys-card .meta p { font-size: 13.5px; color: var(--ink-soft); }

.disclaimer { font-size: 12.5px; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 26px; }
.empty { text-align: center; padding: 40px 10px; color: var(--ink-soft); display: grid; gap: 10px; justify-items: center; }
.loading { min-height: 60dvh; display: grid; place-items: center; color: var(--ink-faint); font: 600 12px/1 var(--mono); letter-spacing: .14em; }

/* ---------- Admin console ---------- */
.adm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.adm-actions, .adm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-btns { justify-content: flex-end; flex: none; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-banners:empty { display: none; }
.kpi { padding: 14px 16px; display: grid; gap: 5px; align-content: start; }
.kpi span { font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kpi b { font: 700 28px/1 var(--display); }
.kpi small { font-size: 12.5px; color: var(--ink-soft); }
.adm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.adm-tools input[type="search"] { flex: 1 1 260px; width: auto; min-width: 0; }
.adm-tools select.input { flex: 0 1 auto; min-height: 48px; }
.adm-count-line { font: 600 12.5px/1 var(--mono); letter-spacing: .04em; margin: 0 2px -6px; }
.adm-count-line:empty { display: none; }
.adm-list { overflow: hidden; transition: opacity .15s; }
.adm-list, .adm-sec + .list { grid-template-columns: minmax(0, 1fr); } /* rows shrink to the card instead of to their no-wrap text */
.adm-list.busy { opacity: .55; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 18px/1 var(--display); }
.avatar.lg { width: 58px; height: 58px; font-size: 24px; }
a.li { text-decoration: none; color: var(--ink); transition: background .12s; }
a.li:hover { background: var(--panel-3); }
.adm-user .t, .adm-user .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-admin .s { white-space: normal; overflow-wrap: anywhere; } /* the permission list wraps instead of being cut */
.adm-side { display: grid; justify-items: end; gap: 6px; flex: none; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.adm-lessons { font: 600 12px/1 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.adm-chev { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
.adm-back { display: inline-flex; align-items: center; gap: 4px; width: max-content; text-decoration: none; font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.adm-back svg { width: 18px; height: 18px; }
.adm-who { display: flex; align-items: center; gap: 14px; }
.adm-who .grow { min-width: 0; display: grid; gap: 4px; }
.adm-who h2, .adm-who p { overflow-wrap: anywhere; }
.adm-id { font: 500 11.5px/1.35 var(--mono); color: var(--ink-faint); overflow-wrap: anywhere; }
.adm-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.adm-sec h3 { font-size: 19px; }
.adm-pad { padding: 4px 16px 16px; }
.adm-facts { border: 0; border-radius: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.adm-facts .f span { color: var(--ink-soft); }
.adm-facts .f b { color: var(--ink); }
.adm-foot { padding: 14px 16px; }
.adm-sec + .list { border-top: 1px solid var(--rule); }
.adm-access .t, .adm-purchase .t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-access > svg, .adm-purchase > svg { width: 22px; height: 22px; flex: none; color: var(--ink-faint); align-self: flex-start; margin-top: 2px; }
.adm-access, .adm-purchase { flex-wrap: wrap; }
.adm-access .grow, .adm-purchase .grow { flex: 1 1 calc(100% - 40px); }
.adm-access .adm-btns, .adm-purchase .adm-btns { width: 100%; justify-content: flex-start; padding-left: 34px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice button {
  appearance: none; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink-soft);
  font: 600 13px/1 var(--mono); letter-spacing: .02em; box-shadow: 0 2px 0 var(--rule);
}
.choice button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); box-shadow: 0 2px 0 color-mix(in srgb, var(--cyan) 50%, #000); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--red); }
.form-err { color: var(--red); font-size: 14px; }
.form-err:empty { display: none; }
@media (max-width: 560px) {
  .adm-user { flex-wrap: wrap; row-gap: 8px; }
  .adm-user .grow { flex-basis: calc(100% - 82px); }
  .adm-user .adm-side { order: 3; width: 100%; padding-left: 52px; grid-auto-flow: column; justify-content: start; align-items: center; }
  .adm-user .adm-chev { order: 2; }
}

@media (max-width: 760px) { .topbar .brand-txt { display: none; } }

/* Narrow phones: keep the top bar to icon + aircraft + stats */
@media (max-width: 560px) {
  .topbar .brand-txt { display: none; }
  .topbar-in { gap: 8px; }
  .stat-chip { padding: 6px 8px; }
  .type-chip { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .switch-chip { padding: 5px 7px; }
  .switch-chip span { display: none; }
  .mfd-controls { gap: 6px; padding: 10px; }
  .seg button { padding: 9px 8px; min-width: 38px; font-size: 11.5px; }
  .q-text { font-size: 19px; }
}

/* ---------- Book-style schematics (look like the OM / QRH figures) ---------- */
.mfd.book { background: #f4f5f6; border-color: #c9ced4; color: #111; }
.mfd.book .mfd-head { background: #d9dcdf; color: #1d2329; border-bottom: 1px solid #b9bfc5; font-family: Arial, Helvetica, sans-serif; letter-spacing: .06em; }
.mfd.book .mfd-head b { color: #111; }
.bookpage { background: #fff; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bookpage svg.dgb { display: block; width: 100%; height: auto; }
.bookpage.zoom svg.dgb { width: auto; min-width: 1150px; }
.zoomb { padding: 5px 10px; border-radius: 999px; border: 1px solid #b9bfc5; background: #fff; color: #1d2329; font: 600 12.5px/1 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.zoomb[aria-pressed="true"] { border-color: #b5267a; color: #b5267a; }
.dgb { font-family: Arial, Helvetica, sans-serif; }
/* Units are the figure's own (OM Figure 2-1 at 3x page pixels): book lines are 3 units wide. */
.dgb .bw { fill: none; stroke: #111; stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; transition: stroke .25s, stroke-width .25s; }
.dgb .bw.on { stroke: #0f9d4a; stroke-width: 6; }
.dgb .bw.flow { stroke-dasharray: 16 6; animation: flow3 .5s linear infinite; }
.dgb .bw.flow.rev { animation-direction: reverse; }
@keyframes flow3 { to { stroke-dashoffset: -22; } }
.dgb .bbus { stroke: #111; stroke-width: 3; transition: opacity .25s, stroke .25s; }
.dgb .bbus.grey { fill: #a3a3a3; }
.dgb .bbus.red { fill: #d92b2f; }
.dgb .bbus.on { stroke: #0f9d4a; stroke-width: 6; filter: drop-shadow(0 0 6px rgba(15,157,74,.55)); }
.dgb .bbus.dead { opacity: .5; }
.dgb .bt { fill: #111; font-size: 24px; font-weight: 400; }
.dgb .bt.w { fill: #fff; }
.dgb .bt.b { font-weight: 700; font-size: 28px; }
.dgb .bt.s { font-size: 21px; font-weight: 700; }
.dgb .bt.xs { font-size: 19px; }
.dgb .bt.big { font-size: 36px; font-weight: 700; }
.dgb .bt.g { fill: #0f9d4a; }
.dgb .bt.r { fill: #d0201f; }
.dgb .bt.a { fill: #c27700; }
.dgb .bsym { fill: none; stroke: #111; stroke-width: 3; }
.dgb .bsym.thin { stroke-width: 2; }
.dgb .bfill { fill: #111; }
.dgb .hit { fill: transparent; stroke: none; }
.dgb .bbar { stroke: #111; stroke-width: 3.5; transition: stroke .25s; }
.dgb .bbar.on { stroke: #0f9d4a; stroke-width: 5; }
.dgb .bmove { transition: transform .3s ease; }
.dgb .bbox { fill: #f1f1ef; stroke: #111; stroke-width: 2.5; }
.dgb .bdash { fill: #dcdcd7; stroke: #111; stroke-width: 3; stroke-dasharray: 10 7; }
.dgb .bgcu { fill: #9d9d9d; stroke: #111; stroke-width: 3; transition: stroke .25s, fill .25s; }
.dgb .bgcu.act { stroke: #d0201f; stroke-width: 5; }
.dgb .bctl { fill: none; stroke: #2b4fa8; stroke-width: 2.5; stroke-dasharray: 6 5; }
.dgb .bctl.act { stroke: #d0201f; stroke-width: 3.5; animation: flow3 .7s linear infinite; }
.dgb .ctlp.act { stroke: #d0201f; }
.dgb .bcable { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }
.dgb .meter { fill: #fff; stroke: #111; stroke-width: 2.5; }
.dgb .gen.l { fill: #f2e32b; } .dgb .gen.r { fill: #2f4a8c; }
.dgb .gen { stroke: #111; stroke-width: 3; transition: filter .25s; }
.dgb .gen.on { filter: drop-shadow(0 0 10px rgba(15,157,74,.75)); stroke: #0f9d4a; stroke-width: 6; }
.dgb .gen.start { filter: drop-shadow(0 0 10px rgba(255,176,32,.9)); stroke: #e08a00; stroke-width: 6; }
.dgb .batt { fill: #4d3b2b; stroke: #111; stroke-width: 2.5; }
.dgb .batt.on { filter: drop-shadow(0 0 8px rgba(15,157,74,.7)); }
.dgb .bknob { fill: #ece6cf; stroke: #111; stroke-width: 2.5; }
.dgb .fault { fill: #d0201f; font-weight: 800; font-size: 44px; }
.dgb [data-part] { cursor: default; }
.dgb.hot [data-part] { cursor: pointer; }
.dgb .focus-ring { stroke: #b5267a; stroke-width: 5; stroke-dasharray: 12 8; }
/* Engine start overlay: the ~1,000 A starter path */
.dgb .bw.hi { stroke: #e8590c; stroke-width: 11; }
.dgb .bw.hi.flow { stroke-dasharray: 18 7; animation: flow4 .3s linear infinite; }
.dgb .bw.hi.flow.rev { animation-direction: reverse; }
@keyframes flow4 { to { stroke-dashoffset: -25; } }
.dgb .bbus.hi { stroke: #e8590c; stroke-width: 7; filter: drop-shadow(0 0 8px rgba(232,89,12,.6)); }
.dgb .bbar.hi { stroke: #e8590c; stroke-width: 7; }
.dgb .amp rect { fill: #fff4ec; stroke: #e8590c; stroke-width: 3; }
.dgb .amp text { fill: #b43d00; font-size: 21px; font-weight: 800; }
.dgb .protect { fill: none; stroke: #e8590c; stroke-width: 3.5; stroke-dasharray: 9 6; }

/* Cockpit panel strip */
.cockpit { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; padding: 12px; background: #16191c; border-top: 1px solid #0b0d0f; }
.cp-plate { max-width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.cp-lbl { fill: #eef1f4; font: 700 10px Arial, Helvetica, sans-serif; letter-spacing: .02em; }
.cp-title { fill: #ffffff; font: 700 11px Arial, Helvetica, sans-serif; letter-spacing: .03em; }
.cp-small { font-size: 9px; }
.cp-click { cursor: pointer; }
.cp-click:hover { fill: #8fe3ff; }
.cp-hit { cursor: pointer; }
.cp-focus { outline: none; }
.cp-focus:focus-visible { stroke: #3fd0ec; stroke-width: 2; }
.cp-legend { fill: #59606a; font: 800 11px Arial, Helvetica, sans-serif; pointer-events: none; }
.cp-legend.on { fill: #170303; }
.cp-legend.hatch, .cp-legend.hatch.on { fill: #ffffff; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.cp-eis { font-family: Arial, Helvetica, sans-serif; }

/* Instructor station */
.ios { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px 14px; background: #e9e3cf; border-top: 1px solid #cfc6a8; }
.ios-t { width: 100%; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6d5d2a; }
.ios .ctl > span { color: #6d5d2a; }
.ios .seg { border-color: #c4b98f; }
.ios .seg button { background: #f6f1df; color: #5f5636; }
.ios .seg button + button { border-left-color: #c4b98f; }
.ios .seg button[aria-pressed="true"] { background: #fff; color: #0b6a8a; box-shadow: inset 0 -2px 0 #0b88ab; }
.ios .seg.warn button[aria-pressed="true"] { color: #b3261e; box-shadow: inset 0 -2px 0 #b3261e; background: #fff4f2; }
.mfd.book .mfd-note { background: #fff; color: #33404d; border-top-color: #d4d8dc; }
.mfd.book .mfd-note b { color: #111; }
.mfd.book .scen { background: #f4f5f6; border-top-color: #d4d8dc; }
.mfd.book .scen button { color: #4a5868; border-color: #c4cad0; background: #fff; }
.mfd.book .scen button:hover, .mfd.book .scen button[aria-pressed="true"] { color: #b5267a; border-color: #b5267a; }

/* Predict / operate exercises */
.task { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 12px 14px; border-radius: 0 12px 12px 0; margin-bottom: 14px; font-size: 15.5px; }
.task b.t { display: block; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.outcome { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); }
.mfd svg.dgb, .mfd svg.dgb text { font-family: Arial, Helvetica, sans-serif; }

/* ---------- Refreshers (optional background, outside the course) ---------- */
button.term { all: unset; cursor: pointer; color: inherit; font-weight: inherit; border-bottom: 1.5px dotted var(--cyan); padding-bottom: 1px; }
button.term .q { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 3px; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); font: 800 10px/1 var(--mono); vertical-align: 2px; }
button.term:hover, button.term:focus-visible { background: color-mix(in srgb, var(--cyan) 12%, transparent); border-radius: 3px; }
.rf-open { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.rf-open .q { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); color: #fff; font: 800 11px/1 var(--mono); }
.rf-open:hover { background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.mfd.book .rf-open { color: #1d2329; font-family: Arial, Helvetica, sans-serif; }
.rf-sheet { width: min(100%, 680px); }
.rf-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.rf-head h2 { margin: 4px 0 4px; }
.rf-head .soft { font-size: 14px; margin: 0; }
.rf-chips { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 10px; margin: 0 -4px; scrollbar-width: none; }
.rf-chip { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.rf-chip[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.rf-body h3 { margin: 6px 0 10px; }
.rf-text { font-size: 15.5px; line-height: 1.6; display: grid; gap: 10px; }
.rf-text p { margin: 0; }
.rf-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rf-card { text-align: left; display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.rf-card b { font-size: 15px; } .rf-card span { font-size: 13px; color: var(--ink-faint); }
.rf-card:hover { border-color: var(--cyan); }
.rf-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.rf-art { background: #fff; color: #111; border: 1px solid #d5d9dd; border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 14px; }
.rf-svg { width: 100%; height: auto; display: block; font-family: Arial, Helvetica, sans-serif; }
.rf-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rf-row .btn { flex: 1 1 auto; min-height: 38px; font-size: 13px; padding: 8px 10px; }
.rf-hint { font-size: 13px; color: #4a5560; margin: 8px 0 0; }
.rf-readout { font: 600 14px/1.3 var(--mono); color: #111; margin: 8px 0 0; }
.rf-slider { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font-size: 13px; color: #33404d; margin-top: 6px; }
.rf-slider output { display: none; }
.rf-slider input { width: 100%; accent-color: #1c7ed6; }
.rf-svg .rf-cap { font-size: 10px; font-weight: 700; fill: #8a949e; letter-spacing: .12em; }
.rf-svg .rf-lbl { font-size: 11px; fill: #222; } .rf-svg .rf-lbl.b { font-weight: 700; } .rf-svg .rf-lbl.w { fill: #fff; }
.rf-svg .rf-big { font-size: 18px; font-weight: 800; fill: #b43d00; }
.rf-svg .rf-tank { fill: #f3f6f8; stroke: #333; stroke-width: 2; }
.rf-svg .rf-water { fill: #8cc7f0; transition: y .2s, height .2s; }
.rf-svg .rf-pipe { fill: none; stroke: #6b7680; stroke-linecap: butt; }
.rf-svg .rf-floww { fill: none; stroke: #1c7ed6; stroke-dasharray: 8 8; animation: rfflow 1s linear infinite; }
.rf-svg .rf-valve { fill: #c9cfd5; stroke: #333; stroke-width: 2; }
.rf-svg .rf-wheel { fill: #fff; stroke: #333; stroke-width: 2; }
.rf-svg .rf-spoke { stroke: #333; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: rfspin 1s linear infinite; }
.rf-svg .rf-wire { fill: none; stroke: #111; stroke-width: 3; }
.rf-svg .rf-flowe { fill: none; stroke: #0f9d4a; stroke-width: 4; stroke-dasharray: 10 6; animation: rfflow 1s linear infinite; }
.rf-svg .rf-flowe.hi { stroke: #e8590c; stroke-width: 7; }
.rf-svg .rf-flowc { fill: none; stroke: #1c7ed6; stroke-width: 2.5; stroke-dasharray: 5 5; animation: rfflow 1s linear infinite; }
.rf-svg .rf-flowa { fill: none; stroke: #0f9d4a; stroke-width: 4; stroke-dasharray: 10 6; animation: rfflow 1s linear infinite; }
.rf-svg .rf-ctl { fill: none; stroke: #1c7ed6; stroke-width: 1.5; }
.rf-svg .rf-sym { fill: none; stroke: #111; stroke-width: 2.5; }
.rf-svg .rf-fill { fill: #111; }
.rf-svg .rf-bar { stroke: #111; stroke-width: 4; }
.rf-svg .rf-move, .rf-svg #dbar, .rf-svg #fbar { transition: transform .25s; }
.rf-svg .rf-coil { fill: #111; transition: fill .2s; } .rf-svg .rf-coil.on { fill: #1c7ed6; }
.rf-svg .rf-btn { fill: #2a2e33; stroke: #111; } .rf-svg .rf-btn.on { fill: #f2f5f8; } .rf-svg .rf-btn + text { fill: #fff; } .rf-svg .rf-btn.on + text { fill: #111; }
.rf-svg .rf-motor, .rf-svg .rf-gen { fill: #f2e32b; stroke: #111; stroke-width: 2.5; }
.rf-svg .rf-bus { fill: #a3a3a3; stroke: #111; stroke-width: 2; }
.rf-svg .rf-link { fill: none; stroke: #111; stroke-width: 3; transition: stroke .2s; } .rf-svg .rf-link.blown { stroke: #d0201f; stroke-dasharray: 4 6; }
.rf-svg .rf-x { fill: #d0201f; font-size: 30px; font-weight: 800; }
.rf-svg .rf-heatbg { fill: #e6e9ec; } .rf-svg .rf-heat { fill: #f59f00; transition: width .1s; } .rf-svg .rf-heat.hot { fill: #d0201f; }
.rf-svg .rf-fieldbar { fill: #1c7ed6; transition: width .2s; }
.rf-svg .rf-batt { fill: #4d3b2b; stroke: #111; stroke-width: 2; }
.rf-svg .rf-lamp { fill: #e9ecef; stroke: #111; stroke-width: 2; transition: fill .2s; } .rf-svg .rf-lamp.on { fill: #ffd43b; filter: drop-shadow(0 0 6px rgba(255,212,59,.9)); }
.rf-svg .rf-airframe { fill: #8a949e; }
.rf-svg .rf-gcu { fill: #9d9d9d; stroke: #111; stroke-width: 2.5; }
.rf-svg .rf-mot { fill: none; stroke: #8f7cf0; stroke-width: 6; } .rf-svg .rf-motf { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 6; animation: rfflow .4s linear infinite; }
.rf-svg .rf-floww.big { stroke-width: 8; }
.rf-svg .rf-gate { fill: #111; transition: transform .3s; }
.rf-svg .rf-cas { fill: #f5b53d; font-size: 13px; font-weight: 800; }
@keyframes rfflow { to { stroke-dashoffset: -16; } }
@keyframes rfspin { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .rf-slider { grid-template-columns: 1fr; gap: 2px; } .rf-svg .rf-lbl { font-size: 15px; } .rf-svg .rf-big { font-size: 22px; } .rf-svg .rf-cap { font-size: 12px; } .rf-art { padding: 8px; } }

/* ---------- Book-style fluid schematics (fuel, hydraulic, bleed): pipes drawn as in the OM figures ---------- */
.dgb .tank { fill: #fefb65; stroke: #111; stroke-width: 2.5; }
.dgb .frame { fill: none; stroke: #9a9a9a; stroke-width: 2.5; } .dgb .frame.dot { stroke-dasharray: 3 4; stroke-width: 1.5; }
.dgb .pipe-o { fill: none; stroke: #111; stroke-width: 13; stroke-linejoin: miter; }
.dgb .pipe-m { fill: none; stroke: #a291f8; stroke-width: 7; stroke-linejoin: miter; }
.dgb .pipe-f { fill: none; stroke: #f8cd53; stroke-width: 7; stroke-linejoin: miter; }
.dgb .pipe-h { fill: none; stroke: #e8231c; stroke-width: 7; }
.dgb .pflow { fill: none; stroke: #fff; stroke-width: 3.5; stroke-dasharray: 7 11; opacity: 0; transition: opacity .25s; stroke-linejoin: round; pointer-events: none; }
.dgb .pflow.on { opacity: 1; animation: pflow .7s linear infinite; }
.dgb .pflow.on.rev { animation-direction: reverse; }
.dgb .pflow.x { stroke: #1c7ed6; stroke-width: 5; }
.dgb .pflow.h { stroke: #ffe0de; }
@keyframes pflow { to { stroke-dashoffset: -18; } }
.dgb .ejector { fill: url(#fuEj); stroke: #111; stroke-width: 3; transition: filter .25s, stroke .25s; }
.dgb g.on .ejector { stroke: #0f9d4a; filter: drop-shadow(0 0 6px rgba(15,157,74,.8)); }
.dgb g.fail .ejector { stroke: #d0201f; fill: #f3c4c4; filter: none; }
.dgb .fan { fill: url(#fuFan); stroke: #111; stroke-width: 3; transition: stroke .25s; }
.dgb g.on > .fan { stroke: #0f9d4a; stroke-width: 5; }
.dgb .blade-f { fill: none; stroke: #111; stroke-width: 2.2; }
.dgb .rot { transform-box: fill-box; transform-origin: center; }
.dgb .rot.on { animation: rfspin .8s linear infinite; }
.dgb .cv { fill: #fff; stroke: #111; stroke-width: 3; }
.dgb .drain { fill: none; stroke: #111; stroke-width: 2; }
.dgb .bt.dp { font-size: 15px; font-weight: 700; }
.dgb .bt.k { font-size: 21px; }
.dgb .psq { fill: #5a5a5a; stroke: #111; stroke-width: 2; }
.dgb .pc { fill: #fff; stroke: #111; stroke-width: 2.5; transition: fill .2s, stroke .2s; }
.dgb .pc.alert { fill: #ffb3b3; stroke: #d0201f; }
.dgb .vdisc { fill: #111; }
.dgb .vpass { fill: #f8cd53; transform-box: fill-box; transform-origin: center; transition: transform .35s, fill .2s; }
.dgb .vpass.shut { fill: #d0201f; }
.dgb #xv { fill: #7a7a7a; } .dgb #xv.open { fill: #f8cd53; }
.dgb .hopper { fill: none; stroke: #111; stroke-width: 2.5; stroke-dasharray: 7 5; }
.dgb .float { fill: #fefb65; stroke: #111; stroke-width: 2; } .dgb .float.alert { fill: #f5b53d; stroke: #c27700; }
.dgb .hfcu, .dgb .sol { fill: url(#fuBox); stroke: #111; stroke-width: 2.5; }
.dgb .solband { fill: #a54d97; stroke: #111; stroke-width: 1.5; }
.dgb .hx { fill: url(#fuHx); stroke: #111; stroke-width: 2.5; }
.dgb .filt { fill: #555; stroke: #111; stroke-width: 2.5; } .dgb .filtx { stroke: #ddd; stroke-width: 1.5; fill: none; }
.dgb .lead { stroke: #111; stroke-width: 2; }

/* ---------- Engine cutaway (after OM Figure 7-1) ---------- */
.dgb .bt.k2 { font-size: 18px; }
.dgb .en-shell { fill: url(#enShell); stroke: #3f5d8a; stroke-width: 2; }
.dgb .en-cut { fill: #e9eef3; }
.dgb .en-teal { fill: #2f8f86; stroke: #1e5f59; stroke-width: 1.5; }
.dgb .en-metal { fill: url(#enMetal); stroke: #4a4f55; stroke-width: 1.5; }
.dgb .en-blade { fill: none; stroke: #5d6369; stroke-width: 1.5; }
.dgb .en-cone { fill: url(#enCone); stroke: #4a4f55; stroke-width: 1.5; }
.dgb .en-purple { fill: #5e2d87; stroke: #3d1c59; stroke-width: 1; }
.dgb .en-green { fill: #52b14f; stroke: #2f7a2d; stroke-width: 1.2; }
.dgb .en-blue { fill: #1f5fa8; stroke: #133e70; stroke-width: 1.5; }
.dgb .en-comb { fill: none; stroke: #d9434b; stroke-width: 26; stroke-linecap: round; transition: stroke .3s; }
.dgb .en-comb.lit { stroke: #ff6a3d; }
.dgb .en-flame { fill: #ffb347; opacity: 0; filter: blur(6px); transition: opacity .3s; pointer-events: none; }
.dgb .en-ign { stroke: #8a9099; stroke-width: 9; stroke-linecap: round; }
.dgb .en-bleed { stroke: #7a8088; stroke-width: 10; }
.dgb .en-orange { fill: #e8863a; stroke: #a95a1f; stroke-width: 1.2; }
.dgb .en-core { fill: #173f45; }
.dgb .en-shaft { stroke: #3d4248; stroke-width: 1; } .dgb .en-shaft.lp { fill: #b8bdc3; } .dgb .en-shaft.hp { fill: #8a9099; }
.dgb .en-agb { fill: url(#enMetal); stroke: #4a4f55; stroke-width: 2; transition: stroke .25s; } .dgb .en-agb.on { stroke: #0f9d4a; stroke-width: 4; }
.dgb .en-flow { fill: none; stroke-width: 4; stroke-dasharray: 10 14; opacity: 0; pointer-events: none; }
.dgb .en-flow.cool { stroke: #bfe4ff; } .dgb .en-flow.hot { stroke: #9fd3ff; } .dgb .en-flow.hot.lit { stroke: #ffcf6b; }
.dgb .en-flow.on { opacity: .95; animation: enflow .5s linear infinite; }
@keyframes enflow { to { stroke-dashoffset: -24; } }
.dgb .spoolfx { stroke: rgba(255,255,255,.85); stroke-width: 5; stroke-dasharray: 4 9; opacity: 0; pointer-events: none; }
.dgb .spoolfx.on { opacity: 1; animation: enspool 1s linear infinite; }
@keyframes enspool { to { stroke-dashoffset: -26; } }

/* ---------- Oil schematic (after OM Figure 7-8) ---------- */
.dgb .pipe-o.oil { stroke-width: 22; }
.dgb .pipe-y { fill: none; stroke: #f9e64f; stroke-width: 15; stroke-linejoin: miter; }
.dgb .pipe-r { fill: none; stroke: #e07b3c; stroke-width: 15; stroke-linejoin: miter; }
.dgb .pipe-y.oil, .dgb .pipe-r.oil { stroke-width: 15; }
.dgb .oil-shell { fill: #e8eef4; stroke: #a9b6c4; stroke-width: 3; }
.dgb .oil-core { fill: #d8e2ec; } .dgb .oil-fan { fill: #c9cfd5; stroke: #8a9099; stroke-width: 2; } .dgb .oil-shaft { fill: #b8bdc3; stroke: #8a9099; }
.dgb .oil-tank { fill: #e8863a; stroke: #a95a1f; stroke-width: 3; transition: fill .3s; } .dgb .oil-tank.low { fill: #f6d3b4; }
.dgb .brg { fill: #e07b3c; stroke: #111; stroke-width: 3; }
.dgb .bt.b { font-weight: 700; }
.dgb .pumpbox { fill: #2aa5d1; stroke: #111; stroke-width: 3; stroke-dasharray: 14 9; }
.dgb .gear { stroke: #111; stroke-width: 3; } .dgb .gear.p { fill: #e07b3c; } .dgb .gear.y { fill: #f9e64f; }
.dgb .hub { fill: #fff; stroke: #111; stroke-width: 2.5; }
.dgb .gearmark { stroke: #111; stroke-width: 4; }
.dgb .relief { fill: #8a8a8a; stroke: #111; stroke-width: 3; } .dgb .drive { fill: #5a5a5a; stroke: #111; stroke-width: 3; }
.dgb .cooler { fill: #1f6fb0; stroke: #111; stroke-width: 3; } .dgb .core { fill: #f2a24a; stroke: #111; stroke-width: 2; } .dgb .fins { stroke: #111; stroke-width: 3; }
.dgb .fuelpipe { stroke: #1f6fb0; stroke-width: 16; }
.dgb .pflow.f { stroke: #cfe8ff; }
.dgb .pflow.y { stroke: #8a6d00; }
.dgb .ofilt { fill: #f9e64f; stroke: #111; stroke-width: 3; transition: fill .3s; } .dgb .ofilt.clog { fill: #8d7b2a; stroke: #d0201f; stroke-width: 5; }
.dgb .ofiltx { stroke: #111; stroke-width: 3; fill: none; }
.dgb .bypass { fill: none; stroke: #9a9a9a; stroke-width: 12; transition: stroke .3s; } .dgb .bypass.open { stroke: #f9e64f; }
.dgb .caslbl { fill: #1b1b1b; stroke: #777; stroke-width: 2; } .dgb .caslbl.on { fill: #d0201f; animation: blink 1s steps(2) infinite; }
.dgb .casl { fill: #d0201f; font-size: 17px; font-weight: 700; } .dgb .casl.on { fill: #fff; }
.dgb .eisv { fill: #3ddc84; font: 700 25px Arial, sans-serif; } .dgb .eisl { fill: #f2f5f8; font: 700 19px Arial, sans-serif; }
.dgb .mwl { fill: #5a1414; stroke: #111; stroke-width: 2; transition: fill .2s; } .dgb .mwl.on { fill: #ff3b30; animation: blink .8s steps(2) infinite; } .dgb .mwl.steady { fill: #d0201f; }
.dgb .mwt { fill: #f6c2c2; font-weight: 700; }

/* ---------- Fire protection (after OM Figure 8-2) ---------- */
.dgb .frame.thin { stroke-width: 1.5; stroke: #b7b7b7; }
.dgb .nacelle-fire { fill: #ff8a3d; opacity: 0; transition: opacity .3s; } .dgb .nacelle-fire.on { opacity: .55; animation: blink 1.2s ease-in-out infinite; }
.dgb .hel-o { fill: none; stroke: #111; stroke-width: 14; stroke-linecap: round; }
.dgb .hel { fill: none; stroke: #2a3f8f; stroke-width: 9; stroke-linecap: round; transition: stroke .3s; } .dgb .hel.hot { stroke: #e53b30; }
.dgb .psens { fill: #9a9a9a; stroke: #111; stroke-width: 2.5; transition: fill .3s; } .dgb .psens.hot { fill: #e53b30; }
.dgb .dis-o { fill: none; stroke: #6b1414; stroke-width: 17; stroke-linecap: round; } .dgb .dis { fill: none; stroke: #d9443b; stroke-width: 11; stroke-linecap: round; }
.dgb .pflow.agent { stroke: #fff; stroke-width: 4; }
.dgb .dhead { fill: #9a9a9a; stroke: #111; stroke-width: 2.5; }
.dgb .squib { fill: #f5d33d; stroke: #111; stroke-width: 2.5; } .dgb .squib.fired { fill: #333; }
.dgb .bottle { fill: url(#fiBottle); stroke: #111; stroke-width: 3; transition: opacity .4s; } .dgb .bottle.empty { opacity: .6; }
.dgb .sl-case { fill: #1b1b1b; stroke: #555; stroke-width: 2.5; }
.dgb .sl-face { stroke: #000; stroke-width: 2; transition: fill .2s; } .dgb .sl-face.red { fill: #5a1414; } .dgb .sl-face.red.lit { fill: #e53b30; } .dgb .sl-face.white { fill: #242628; } .dgb .sl-face.white.lit { fill: #f2f5f8; }
.dgb .slt { fill: #f2f5f8; font: 700 16px Arial, sans-serif; } .dgb .slt.big { font-size: 44px; }
.dgb .sl-face.white.lit ~ .slt { fill: #111; }
.dgb .fxbox { fill: #f7f8f9; stroke: #c9ced4; stroke-width: 2; }
.dgb .fxdot { fill: #dfe3e7; stroke: #888; stroke-width: 2; transition: fill .2s; } .dgb .fxdot.on { fill: #d0201f; stroke: #7a0d10; }

/* ---------- Bleed air (after OM Figure 9-2) ---------- */
.dgb .bt.k3 { font-size: 15px; } .dgb .bt.dp2 { font-size: 11px; font-weight: 700; }
.dgb .bpo { fill: none; stroke: #111; stroke-width: 11; stroke-linejoin: miter; }
.dgb .bp-r { fill: none; stroke: #d2564a; stroke-width: 7; } .dgb .bp-b { fill: none; stroke: #00b8df; stroke-width: 7; }
.dgb .bp-p { fill: none; stroke: #76468a; stroke-width: 7; } .dgb .bp-k { fill: none; stroke: #dc8aad; stroke-width: 7; }
.dgb .pflow.sm { stroke-width: 2.5; stroke-dasharray: 5 8; }
.dgb .pflow.sm.on { animation: pflowsm .6s linear infinite; }
.dgb .pflow.sm.on.rev { animation-direction: reverse; }
@keyframes pflowsm { to { stroke-dashoffset: -13; } }
.dgb .pflow.cyan { stroke: #e6fbff; } .dgb .pflow.purple { stroke: #e9d6f3; }
.dgb .nac { fill: #12b2dc; stroke: #0b5f78; stroke-width: 2; } .dgb .core { fill: url(#enMetal); stroke: #4a4f55; stroke-width: 1.5; }
.dgb .frame.dash { stroke-dasharray: 8 6; stroke-width: 1.5; }
.dgb .bulkhead { fill: #6b7076; }
.dgb .precool { fill: #4a6fa5; stroke: #111; stroke-width: 2; } .dgb .pcgrid { stroke: #c33; stroke-width: 1.2; fill: none; }
.dgb .rv { stroke: #111; stroke-width: 2.5; } .dgb .rv.blue { fill: #00b8df; } .dgb .rv.red { fill: #d2564a; } .dgb .rv.pink { fill: #dc8aad; } .dgb .rv.black { fill: #222; }
.dgb .rvbar { fill: #111; transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.dgb .rv.black + .rvbar { fill: #9a9a9a; }
.dgb .vbox { fill: #a8a8a8; stroke: #111; stroke-width: 2; transition: fill .25s; } .dgb .vbox.open { fill: #8fd18f; } .dgb .vbox.fail { fill: #ff9a9a; }
.dgb .tcirc { fill: #fff; stroke: #111; stroke-width: 2; }
.dgb .hx2 { fill: url(#hxDots); stroke: #111; stroke-width: 2.5; }
.dgb .muff { fill: url(#enMetal); stroke: #111; stroke-width: 2; }
.dgb .fanbox { fill: #fff; stroke: #111; stroke-width: 2.5; }
.dgb .fcvmark { fill: #0f9d4a; opacity: .45; transition: x .3s; }

/* ---------- Ice protection (after OM Figure 10-5) ---------- */
.dgb .bt.k4 { font-size: 22px; } .dgb .bt.soft { fill: #6b737b; }
.dgb .ipo { fill: none; stroke: #111; stroke-width: 14; stroke-linejoin: miter; }
.dgb .ip-r { fill: none; stroke: #d2453a; stroke-width: 9; } .dgb .ip-s { fill: none; stroke: #dba9a3; stroke-width: 9; }
.dgb .ip-k { fill: none; stroke: #c8337a; stroke-width: 9; } .dgb .ip-p { fill: none; stroke: #6b2f8a; stroke-width: 9; }
.dgb .surf { fill: #8fcbe6; stroke: #4a90b8; stroke-width: 2; transition: fill .4s; } .dgb .surf.hot { fill: #f6a96b; stroke: #c9652a; }
.dgb .surf.boot { transition: transform .4s, fill .3s; transform-box: fill-box; transform-origin: center; } .dgb .surf.boot.inflate { fill: #b9e6ff; transform: scaleY(1.9); }
.dgb .ice { fill: #fff; stroke: #7fb6d6; stroke-width: 2; stroke-dasharray: 3 2; opacity: 0; transition: opacity .6s; pointer-events: none; }
.dgb .purge { stroke: #f2fbff; stroke-width: 2; fill: none; }
.dgb .alc { fill: none; stroke: #49b6ff; stroke-width: 4; stroke-dasharray: 4 5; opacity: 0; } .dgb .alc.on { opacity: 1; animation: pflow .6s linear infinite; }
.dgb .pitot { stroke: #333; stroke-width: 5; stroke-linecap: round; transition: stroke .3s; } .dgb .pitot.hot { stroke: #e8590c; }
.dgb .sport { fill: #fff; stroke: #333; stroke-width: 2; }
.dgb .pcool { fill: #d9534f; stroke: #111; stroke-width: 2.5; } .dgb .hxp { fill: #c8337a; stroke: #111; stroke-width: 2.5; }
.dgb .wsv { fill: #222; stroke: #111; stroke-width: 2; } .dgb .svcreg { fill: #6b2f8a; stroke: #111; stroke-width: 2; }

/* ---------- Pressurization (book style) ---------- */
.dgb .bt.k5 { font-size: 17px; } .dgb .bt.k6 { font-size: 13px; }
.dgb .vessel { fill: #dff1fb; stroke: none; transition: fill .4s; } .dgb .vessel.thin { fill: #fde3e3; }
.dgb .bulk { fill: none; stroke: #111; stroke-width: 4; }
.dgb .ofv { fill: #fff; stroke: #111; stroke-width: 2.5; } .dgb .ofvgate { fill: #111; transform-box: fill-box; transform-origin: center; transition: transform .4s; }
.dgb .pflow.out { stroke: #6b737b; } .dgb .pflow.in { stroke: #1c7ed6; } .dgb .pflow.emer { stroke: #c27700; }
.dgb .masks path { stroke: #b5267a; stroke-width: 2.5; opacity: 0; transition: opacity .3s; } .dgb .masks circle { fill: #f6c3e3; stroke: #b5267a; stroke-width: 2; opacity: 0; transition: opacity .3s, transform .4s; transform: translateY(-30px); }
.dgb .masks.down path, .dgb .masks.down circle { opacity: 1; } .dgb .masks.down circle { transform: none; }
.dgb .chart { fill: #fafbfc; stroke: #c9ced4; stroke-width: 1.5; } .dgb .grid { stroke: #e3e6ea; stroke-width: 1; }
.dgb .halo { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.dgb .barA { fill: #cfe8ff; stroke: #1c7ed6; stroke-width: 2; }
.dgb .barC { fill: #c9f1d6; stroke: #0f9d4a; stroke-width: 2; transition: fill .3s; } .dgb .barC.red { fill: #ffc9c9; stroke: #d0201f; }
/* hydraulics, after OM Figure 13-1: blue supply, green pressure, yellow return */
.dgb .sil { fill: #f1f2f3; stroke: #d5d8db; stroke-width: 2; }
.dgb .pipe-o.t { stroke-width: 9.5; }
.dgb .pipe-hg { fill: none; stroke: #5d8763; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-hy { fill: none; stroke: #f9ea70; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-hb { fill: none; stroke: #00b8df; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pflow.sm.y { stroke: #8a6d00; }
.dgb .hpump { fill: #5d8763; stroke: #111; stroke-width: 2.5; transition: fill .25s; }
.dgb g.fail > .hpump { fill: #d0201f; }
.dgb .hpump-in { fill: #eceeef; stroke: #111; stroke-width: 2; }
.dgb .vpass.hy { fill: #cfd5db; }
.dgb .hfilt { fill: url(#hyX); stroke: #111; stroke-width: 2.5; }
.dgb .hres { fill: #fff; stroke: #111; stroke-width: 2.5; } .dgb .hres-air { fill: #d9dcdf; } .dgb .hres-fl { fill: #0aa8d8; }
.dgb .relief { fill: #555; stroke: #111; stroke-width: 2; transition: fill .2s; } .dgb .relief.on { fill: #ffb020; }
.dgb .lvsol { fill: #111; } .dgb .lvpin { fill: #fff; stroke: #111; stroke-width: 2; }
.dgb .lvbody { fill: #e6e8ea; stroke: #111; stroke-width: 2.5; transition: fill .2s; } .dgb .lvbody.shut { fill: #fff3c4; }
.dgb .spool { transition: transform .3s; } .dgb .spool-r { fill: #6b737b; } .dgb .spool-p { fill: #f9ea70; stroke: #111; stroke-width: 1; }
.dgb .hsub { fill: #fff; stroke: #111; stroke-width: 2.5; transition: fill .2s; } .dgb .hsub.act { fill: #e3f3e6; stroke: #0f9d4a; stroke-width: 4; }
.dgb .svc { stroke: #111; stroke-width: 3; } .dgb .svc.g { fill: #5d8763; } .dgb .svc.y { fill: #f9ea70; }
.dgb .cart rect, .dgb .cart circle, .dgb .cart path { fill: #eceeef; stroke: #555; stroke-width: 2; } .dgb .cart .conn { fill: #111; } .dgb .cart .whl { fill: #6b737b; stroke: #111; }
.dgb .pc.on { fill: #c9f1d6; stroke: #0f9d4a; }
/* landing gear, after OM Figures 14-8 to 14-10: red pressure, yellow return, tan nitrogen */
.dgb .pipe-gr { fill: none; stroke: #d8342c; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-idle { fill: none; stroke: #8d9399; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-n2 { fill: none; stroke: #c8ad8a; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-n2c { fill: none; stroke: #6b737b; stroke-width: 6; stroke-linejoin: miter; }
.dgb .win { fill: #e2e5e8; stroke: #c9ced4; stroke-width: 1.5; }
.dgb .gsol { fill: #8d9399; stroke: #111; stroke-width: 2.5; } .dgb .gsol-band { fill: #444; transition: fill .2s; } .dgb .gsol-band.on { fill: #0f9d4a; }
.dgb .gcyl { fill: #c9ced4; stroke: #111; stroke-width: 2.2; } .dgb .gband { fill: #555; transition: fill .2s; } .dgb .gband.on { fill: #c8ad8a; }
.dgb .gcyl.on { fill: #c8ad8a; } .dgb .gdot { fill: #111; }
.dgb .hook { transition: transform .4s; } .dgb .roller { fill: #fff; stroke: #111; stroke-width: 2; } .dgb .roller.on { fill: #6b737b; }
.dgb .tyre { fill: #2b2f34; stroke: #111; stroke-width: 3; transition: opacity .3s; } .dgb .hub { fill: #c9ced4; stroke: #111; stroke-width: 2; }
.dgb .ghost .tyre { fill: none; stroke: #6b737b; stroke-dasharray: 5 5; stroke-width: 2; } .dgb .ghost .hub { display: none; }
.dgb .transit .tyre { opacity: .5; }
.dgb .thandle { fill: #d81f26; stroke: #6a080c; stroke-width: 2; transition: transform .3s; } .dgb .thandle.pulled { transform: translate(6px, 6px); }
.dgb .n2b { fill: #c8ad8a; stroke: #111; stroke-width: 2.5; transition: fill .3s; } .dgb .n2b.used { fill: #ece3d6; }
.dgb .gauge { fill: #fff; stroke: #111; stroke-width: 2.5; }
.dgb .cable { fill: none; stroke: #111; stroke-width: 2; stroke-dasharray: 10 6; transition: stroke .2s; } .dgb .cable.on { stroke: #d81f26; stroke-width: 3; }
.dgb .leg-r { fill: #d8342c; stroke: #111; stroke-width: 1.5; } .dgb .leg-y { fill: #f9ea70; stroke: #111; stroke-width: 1.5; } .dgb .leg-n { fill: #c8ad8a; stroke: #111; stroke-width: 1.5; }
/* brakes, after OM Figure 14-14: green pump pressure, red brake fluid, blue nitrogen */
.dgb .pipe-br { fill: none; stroke: #d8342c; stroke-width: 6; stroke-linejoin: miter; transition: stroke .2s; } .dgb .pipe-br.hi { stroke: #ff1f1f; stroke-width: 7; }
.dgb .pipe-bg { fill: none; stroke: #3faa4f; stroke-width: 6; stroke-linejoin: miter; }
.dgb .pipe-bn { fill: none; stroke: #1c9ad6; stroke-width: 6; stroke-linejoin: miter; } .dgb .pipe-bn.hi { stroke: #4fc3ff; stroke-width: 7; }
.dgb .pflow.sm.w { stroke: #fff; }
.dgb .pedal { fill: #fff; stroke: #111; stroke-width: 2.5; } .dgb .link { fill: none; stroke: #111; stroke-width: 3; } .dgb .lpin { fill: #fff; stroke: #111; stroke-width: 2.5; }
.dgb .dline { fill: none; stroke: #111; stroke-width: 2; stroke-dasharray: 9 6; }
.dgb .bres { fill: #fff; stroke: #111; stroke-width: 2.5; } .dgb .sight { fill: #f2f2f2; stroke: #111; stroke-width: 2.5; } .dgb .sight.r { fill: #d8342c; }
.dgb .fit { fill: #1c9ad6; stroke: #111; stroke-width: 1.5; }
.dgb .gearw { fill: #3faa4f; stroke: #111; stroke-width: 2.5; } .dgb #pump.on .gearw { fill: #6fe07f; }
.dgb .cvb { fill: #fff; stroke: #111; stroke-width: 2.2; }
.dgb .acc { fill: #fff; stroke: #111; stroke-width: 2.5; transition: fill .3s; } .dgb .acc.charged { fill: #e4f6e6; }
.dgb .garc { fill: none; stroke-width: 6; } .dgb .garc.lg { stroke: #9be3a6; } .dgb .garc.dg { stroke: #2f8f3f; }
.dgb .needle { stroke: #111; stroke-width: 3; stroke-linecap: round; transition: transform .4s; }
.dgb .servo { fill: #29a8de; stroke: #111; stroke-width: 2.5; } .dgb .servo.pulse { animation: servoPulse .25s steps(2) infinite; }
@keyframes servoPulse { 0% { fill: #29a8de; } 100% { fill: #ffd84d; } }
.dgb .acu { fill: #d8342c; stroke: #111; stroke-width: 2.5; transition: opacity .2s; } .dgb .acu.dim { opacity: .45; }
.dgb .pkv { fill: #fff; stroke: #111; stroke-width: 2.5; transition: fill .2s; } .dgb .pkv.on { fill: #ffd2cc; } .dgb .pkh { fill: #6b737b; stroke: #111; stroke-width: 2.5; }
.dgb .shv { fill: #8d9399; stroke: #111; stroke-width: 2.2; } .dgb .shv.n2 { fill: #4fc3ff; }
.dgb .btyre { fill: #2b2f34; stroke: #111; stroke-width: 2.5; } .dgb .bdisc { fill: #8d9399; stroke: #111; stroke-width: 2; transition: fill .2s; } .dgb .bdisc.on { fill: #ff7a45; }
.dgb .bcal { fill: #c9ced4; stroke: #111; stroke-width: 2; }
.dgb .eball { fill: #d81f26; stroke: #111; stroke-width: 2; transition: transform .25s; } .dgb .eball.pulled { transform: translateX(12px); }
.dgb .n2bot { fill: #3faa4f; stroke: #111; stroke-width: 2.5; }
.dgb .bitb { fill: #8d9399; stroke: #111; stroke-width: 2.5; } .dgb .bit { fill: #111; stroke: #fff; stroke-width: 1.5; } .dgb .bit.trip { fill: #fff; stroke: #111; }
.dgb #cBPL, .dgb #cASF { fill: #3a3326; } .dgb #cBPL.lit, .dgb #cASF.lit { fill: #ffb020; }
/* flaps and speed brakes, after OM Figures 15-9 and 15-12 */
.dgb .sbp { fill: #f7f7f7; stroke: #9a9a9a; stroke-width: 1.5; }
.dgb .svalve { fill: #c9ced4; stroke: #111; stroke-width: 2.2; } .dgb .svcoil { fill: #6b737b; stroke: #111; stroke-width: 2; transition: fill .2s; } .dgb .svcoil.on { fill: #0f9d4a; }
.dgb .flp path { fill: #dfe3e7; stroke: #6b737b; stroke-width: 2; } .dgb .flp { transition: transform .2s; }
.dgb .lockp { fill: none; stroke: #111; stroke-width: 3; transition: transform .3s; } .dgb .lockp.open { transform: rotate(-30deg); }
.dgb .pulley { fill: #fff; stroke: #111; stroke-width: 3; } .dgb .cablek { fill: none; stroke: #111; stroke-width: 3; }
.dgb .gcyl.on { fill: #c9f1d6; }
.dgb .ntbox { fill: #fafbfc; stroke: #c9ced4; stroke-width: 1.5; }
.dgb .sbfin rect { fill: #9a9fa5; stroke: #111; stroke-width: 1.5; } .dgb .sbfin { transform-box: fill-box; transform-origin: center bottom; transition: transform .2s; }
/* rudder bias */
.dgb .cham { fill: #d2564a; transition: opacity .4s; } .dgb .rudder { fill: #dfe3e7; stroke: #111; stroke-width: 2.5; }
.dgb .efan { fill: #cfd5db; stroke: #111; stroke-width: 2.5; transition: fill .2s; } .dgb .efan.fail { fill: #d0201f; }
/* oxygen, after OM Figure 17-1 */
.dgb .seat { fill: #d9dcdf; stroke: #b7bcc1; stroke-width: 2; }
.dgb .o2cyl { fill: #1f6b46; stroke: #111; stroke-width: 2.5; } .dgb .gbox { fill: #eef0f2; stroke: #111; stroke-width: 2.2; }
.dgb .fillp { fill: #d4b24a; stroke: #111; stroke-width: 2; } .dgb .disc { fill: #2fae5a; stroke: #111; stroke-width: 2; }
.dgb .cvalve { fill: #1d2024; stroke: #111; stroke-width: 2; } .dgb .cknob { fill: #3a3f45; stroke: #111; stroke-width: 2; }
.dgb .ewire { fill: none; stroke: #d0201f; stroke-width: 3.5; } .dgb .ewire.dash { stroke-dasharray: 8 5; opacity: .45; transition: opacity .2s; } .dgb .ewire.dash.on { opacity: 1; }
.dgb .cmask path { fill: #8d9399; stroke: #111; stroke-width: 2; } .dgb .cmask circle { fill: #3a3f45; stroke: #111; stroke-width: 2; } .dgb .cmask.on path { fill: #6fbf8a; }
.dgb .mconn { fill: #1d2024; stroke: #111; stroke-width: 2; } .dgb .mflow { fill: #d0201f; transition: fill .2s; } .dgb .mflow.on { fill: #38d27a; }
.dgb .pbox { fill: #c9ced4; stroke: #111; stroke-width: 2; }
.dgb .pmask { opacity: .22; transition: opacity .3s, transform .4s; } .dgb .pmask.down { opacity: 1; }
.dgb .pmcup { fill: #3a3f45; stroke: #111; stroke-width: 2; }
.dgb .lany { fill: #d4a017; stroke: #111; stroke-width: 1.5; transition: transform .3s; } .dgb .lany.pulled { transform: translateY(10px); fill: #ffd84d; }
/* engine cutaway refinements (OM Figure 7-1) */
.dgb .en-lip { fill: url(#enMetalV); stroke: #4a4f55; stroke-width: 1.5; } .dgb .en-lip.dark { fill: #2f5f9e; }
.dgb .en-fan { fill: url(#enFan); stroke: #3f4449; stroke-width: 1.5; }
.dgb .en-disc { fill: url(#enMetal); stroke: #4a4f55; stroke-width: 1.2; } .dgb .en-disc.w { fill: #f4f6f8; }
.dgb .en-case { fill: #8a9099; } .dgb .en-imp { fill: url(#enMetal); stroke: #3f5d8a; stroke-width: 1.5; }
.dgb .en-trans { fill: url(#enTrans); stroke: #a95a1f; stroke-width: 1; }
.dgb .oil-bg { opacity: .82; }

/* ---------- Help assistant (src/support.js) ---------- */
.help-btn { width: 36px; height: 36px; flex: none; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink-soft); }
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--panel); }
.help-btn svg { width: 20px; height: 20px; }
.hc { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--panel); color: var(--ink); padding-top: var(--safe-t); animation: up .25s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 640px) {
  .hc { inset: 12px 12px 12px auto; width: min(420px, calc(100vw - 24px)); padding-top: 0; border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
}
.hc-head { display: flex; align-items: center; gap: 2px; padding: 12px 8px 10px 16px; border-bottom: 1px solid var(--rule); }
.hc-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hc-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--mfd-2); color: var(--mfd-cyan); }
.hc-mark svg { width: 21px; height: 21px; }
.hc-head .eyebrow { font-size: 10.5px; margin-bottom: 3px; }
.hc-head h3 { font-size: 21px; }
.hc-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 16px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); background: var(--amber-soft); border-bottom: 1px solid var(--rule); }
.hc-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--amber); }
.hc-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hc-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.hc-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.hc-msg.bot { align-self: flex-start; background: var(--panel-3); border-bottom-left-radius: 4px; }
.hc-md { display: grid; gap: 8px; }
.hc-md ul, .hc-md ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.hc-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule); }
.hc-src-h { width: 100%; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hc-chip { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; max-width: 100%; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); text-decoration: none; font-size: 12.5px; line-height: 1.3; }
.hc-chip b { font: 600 11.5px/1.3 var(--mono); color: var(--cyan); overflow-wrap: anywhere; } /* long multi-document refs wrap; the title then takes its own line */
a.hc-chip:hover { border-color: var(--cyan); }
.hc-fine { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.hc-ask { padding: 6px 0 0; font-size: 13.5px; }
.hc-ticket { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); font-size: 14px; line-height: 1.4; }
.hc-ticket svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--green); }
.hc-ticket b { display: block; }
.hc-ticket span { font-size: 13px; color: var(--ink-soft); }
.hc-err { display: grid; gap: 8px; justify-items: start; padding: 10px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); font-size: 14px; line-height: 1.45; }
.hc-typing { display: inline-flex; gap: 5px; padding: 15px 14px; }
.hc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: hcDot 1s infinite ease-in-out; }
.hc-typing i:nth-child(2) { animation-delay: .15s; }
.hc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hcDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.hc-intro { display: grid; gap: 12px; }
.hc-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-sugg button { padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); color: var(--ink); font: 600 13px/1.2 var(--body); text-align: left; cursor: pointer; }
.hc-sugg button:hover { background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.hc-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 6px; border-top: 1px solid var(--rule); }
.hc-compose textarea { flex: 1; min-height: 46px; max-height: 132px; padding: 12px 13px; resize: none; font: 400 16px/1.35 var(--body); }
.hc-send { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.hc-send:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.hc-send[disabled] { opacity: .45; cursor: default; transform: none; }
.hc-send svg { width: 22px; height: 22px; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px calc(8px + var(--safe-b)); }
.hc-foot .linkbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.hc-foot .linkbtn svg { width: 16px; height: 16px; }
.hc.handoff .hc-foot .linkbtn { visibility: hidden; }
.hc-hand { padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--panel-2); }
.hc-hand-h { display: grid; gap: 2px; font-size: 14px; }
.hc-hand-h span { font-size: 13px; color: var(--ink-soft); }
.hc-hand select.input { min-height: 44px; }
.hc-hand textarea.input { min-height: 84px; padding: 10px 13px; resize: vertical; font: 400 16px/1.4 var(--body); }
.hc-hand-err { font-size: 13px; color: var(--red); }
@media (max-width: 560px) { .help-btn { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .hc, .hc-typing i { animation: none; } }
/* Terms of Use and License, acceptance checkboxes */
.legal a { color: #9fd3ff; }
.legal-page { min-height: 100dvh; background: var(--bg); color: var(--ink); }
.legal-doc { max-width: 760px; }
.legal-doc h1 { margin: 6px 0 16px; }
.legal-doc h2 { font-size: 18px; margin: 26px 0 8px; }
.legal-doc p, .legal-doc li { line-height: 1.6; }
.legal-doc p { margin: 8px 0; }
.legal-doc ul, .legal-doc ol { padding-left: 20px; margin: 8px 0; }
.legal-callout { border-left: 4px solid var(--amber, #c27700); background: color-mix(in srgb, var(--amber, #c27700) 10%, transparent); padding: 12px 14px; border-radius: 8px; line-height: 1.55; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--magenta, #b5267a); }
.legal-gate p { line-height: 1.55; }
/* Certificate of completion (#/certificate, src/certificate.js). The preview is the PDF page itself, so it stays white in dark mode. */
.cert-frame { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); background: #fff; aspect-ratio: 792 / 612; }
.cert-preview { display: block; width: 100%; height: 100%; }
.cert-frame.locked .cert-preview { opacity: .45; filter: grayscale(1); }
.cert-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.cert-card .btn { flex: none; }
.cert-card .grow, .cert-panel .grow { flex: 1; min-width: 0; }
.cert-card > svg { width: 22px; height: 22px; flex: none; color: var(--ink-faint); }
.cert-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--panel)); }
.cert-ico.off { color: var(--ink-faint); background: var(--panel-3); }
.cert-ico svg { width: 24px; height: 24px; }
.cert-attest { padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--panel-2); }
.cert-attest:has(input:checked) { border-color: var(--green); }
@media (max-width: 560px) { .cert-card { flex-wrap: wrap; } .cert-card .btn { width: 100%; } }
/* The certificate form as the window over the last lesson's finish screen: the sheet is the card */
.sheet .cert-window { background: none; border: 0; box-shadow: none; padding: 0; }