/* A320 Study — mobile-first, no dependencies. */

:root {
  --bg: #0b0f14; --panel: #131a23; --panel2: #1a2430;
  --ink: #e8eef6; --muted: #8ea0b5; --line: #24303e;
  --accent: #4ea3ff; --ok: #3ecf8e; --bad: #ff6b6b; --warn: #ffb454;
  --radius: 12px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb; --panel: #fff; --panel2: #eef2f7;
    --ink: #10161d; --muted: #5b6b7f; --line: #d8e0ea;
    --accent: #0b64c8; --ok: #12855a; --bad: #c62828; --warn: #a35c00;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.pad { padding: 1rem; }
.center { text-align: center; }

/* ---------- chrome ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem .9rem;
  position: sticky; top: 0; z-index: 10;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-top)) .8rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
}
/* Identity, not a tool bar. The nav pills that used to live here made the whole
   app read as a quiz launcher; the syllabus is the product, so the header says
   what this IS and the tools sit below the material on the home page. */
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); }
.brand .mark {
  flex: none; font-weight: 800; letter-spacing: .01em; font-size: 1rem;
  background: var(--accent); color: #fff; padding: .3rem .5rem; border-radius: .45rem;
}
.brand .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand .who strong { font-size: .95rem; font-weight: 650; }
.brand .who em {
  font-style: normal; font-size: .74rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- home sections ---------- */
h2.sect {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 1.6rem 0 .6rem; font-weight: 700;
}
.bignum { font-size: 1.6rem; font-weight: 700; }
.progresscard { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.typerow { display: flex; gap: .5rem; margin-bottom: .8rem; }
.typerow > * { flex: 1; margin-bottom: 0; }
.resume .s { color: var(--accent); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }

.tools { display: grid; gap: .5rem; }
.tool {
  display: flex; align-items: center; gap: .8rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .75rem .9rem;
}
.tool .ic {
  flex: none; width: 2rem; height: 2rem; border-radius: .5rem;
  display: grid; place-items: center; font-size: .95rem;
  background: var(--panel2); color: var(--accent);
}
.tool .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tool strong { font-size: .93rem; font-weight: 600; }
.tool em { font-style: normal; font-size: .78rem; color: var(--muted); }
footer { padding: 1.5rem 1rem 2rem; border-top: 1px solid var(--line); margin-top: 2rem; }
footer p { font-size: .78rem; margin: 0; }

main { max-width: 46rem; margin: 0 auto; padding: 1rem .8rem 0; }
h1 { font-size: 1.35rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }

/* ---------- cards / lists ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .7rem;
}
.topic { display: flex; align-items: center; gap: .8rem; }
.topic .grow { flex: 1; min-width: 0; }
.topic .t { font-weight: 600; }
.topic .s { font-size: .82rem; color: var(--muted); }
.pill {
  font-size: .72rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--panel2); color: var(--muted); white-space: nowrap;
}
.pill.ok { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.pill.bad { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }

/* ---------- buttons ---------- */
button, .btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel2); color: var(--ink);
  padding: .7rem 1rem; border-radius: var(--radius); width: 100%;
  text-align: center; margin-bottom: .5rem; display: block;
}
button:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.row { display: flex; gap: .5rem; }
.row > * { flex: 1; margin-bottom: .5rem; }
select, input[type=text] {
  font: inherit; width: 100%; padding: .7rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  margin-bottom: .5rem;
}

/* ---------- quiz ---------- */
.progress { height: 4px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.q { font-size: 1.08rem; font-weight: 600; margin: 0 0 1rem; }
.opt {
  text-align: left; display: flex; gap: .6rem; align-items: flex-start;
}
.opt .k {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: .8rem; color: var(--muted);
}
.opt.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.opt.correct .k { border-color: var(--ok); color: var(--ok); }
.opt.wrong .k { border-color: var(--bad); color: var(--bad); }
.feedback { border-left: 3px solid var(--line); padding: .1rem 0 .1rem .8rem; margin: .8rem 0; }
.feedback.ok { border-color: var(--ok); }
.feedback.bad { border-color: var(--bad); }
.verdict { font-weight: 700; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.src { font-size: .78rem; color: var(--muted); margin-top: .4rem; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- flashcards ---------- */
.fc {
  min-height: 12rem; display: grid; place-items: center; text-align: center;
  padding: 1.5rem 1.2rem; cursor: pointer; user-select: none;
}
.fc .side { font-size: 1.15rem; }
.fc .hint { font-size: .78rem; color: var(--muted); margin-top: 1rem; }
.box { font-size: .72rem; color: var(--muted); }

/* ---------- lesson content ---------- */
.lesson { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.lesson h1 { font-size: 1.3rem; }
.lesson h2 { font-size: 1.08rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.lesson h3 { font-size: .98rem; }
.lesson table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .9rem; display: block; overflow-x: auto; }
.lesson th, .lesson td { border: 1px solid var(--line); padding: .4rem .55rem; text-align: left; }
.lesson th { background: var(--panel2); }
.lesson code { background: var(--panel2); padding: .1rem .3rem; border-radius: 4px; font-size: .88em; }
.lesson pre { background: var(--panel2); padding: .8rem; border-radius: var(--radius); overflow-x: auto; }
.lesson img { max-width: 100%; height: auto; }
.lesson blockquote { border-left: 3px solid var(--accent); margin: .8rem 0; padding-left: .8rem; color: var(--muted); }
.lesson .notes {
  background: var(--panel2); border-radius: var(--radius);
  padding: .7rem .9rem; margin: .8rem 0; font-size: .9rem; color: var(--muted);
}
.lesson .notes::before { content: "Notes"; display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }

/* ---------- citations ---------- */
/* A citation used to be an invisible HTML comment. Now it's a tappable chip
   that opens a render of the actual manual page — a claim can be checked in
   one tap instead of taken on trust. */
.cite {
  display: inline-block; font-size: .72rem; line-height: 1.5;
  padding: .05rem .45rem; margin: 0 .15rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap;
  text-decoration: none; vertical-align: baseline;
}
.cite.nolink { background: var(--panel2); color: var(--muted); border-color: var(--line); }

/* page viewer */
#pageview {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 0;
}
#pageview .pv-bar {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  color: #fff; font-size: .85rem;
}
#pageview .pv-bar .grow { flex: 1; }
#pageview button {
  width: auto; margin: 0; padding: .35rem .8rem; font-size: .85rem;
  background: rgba(255,255,255,.15); color: #fff; border-color: transparent;
}
#pageview .pv-img { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; text-align: center; }
#pageview img { max-width: 100%; height: auto; background: #fff; }

/* ---------- Airbus semantic colours ----------
   On the aircraft colour carries meaning, so the material mirrors it: the
   green system really is green, an ECAM warning really is red. Never the ONLY
   carrier of meaning — each pairs with a word or a border. */
:root {
  --sys-green: #1f9d55; --sys-blue: #2f6fd0; --sys-yellow: #b8860b;
  --ecam-red: #d92b2b; --ecam-amber: #b26a00; --ecam-cyan: #0b7fa8; --ecam-green: #1f9d55;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sys-green: #3ecf8e; --sys-blue: #6aa9ff; --sys-yellow: #e0b341;
    --ecam-red: #ff6b6b; --ecam-amber: #ffb454; --ecam-cyan: #4fd0f0; --ecam-green: #3ecf8e;
  }
}
.sys-green, .sys-blue, .sys-yellow { font-weight: 600; }
.sys-green { color: var(--sys-green); }
.sys-blue { color: var(--sys-blue); }
.sys-yellow { color: var(--sys-yellow); }

.ecam { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.ecam-warning { color: var(--ecam-red); }
.ecam-caution { color: var(--ecam-amber); }
.ecam-action { color: var(--ecam-cyan); }
.ecam-normal { color: var(--ecam-green); }

.memory-item {
  border-left: 4px solid var(--ecam-red); background: color-mix(in srgb, var(--ecam-red) 10%, transparent);
  padding: .6rem .9rem; margin: .9rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.memory-item::before {
  content: "MEMORY ITEM"; display: block; font-size: .66rem; letter-spacing: .1em;
  color: var(--ecam-red); font-weight: 700; margin-bottom: .25rem;
}
.limitation {
  border-left: 4px solid var(--ecam-amber); background: color-mix(in srgb, var(--ecam-amber) 10%, transparent);
  padding: .6rem .9rem; margin: .9rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.limitation::before {
  content: "LIMITATION"; display: block; font-size: .66rem; letter-spacing: .1em;
  color: var(--ecam-amber); font-weight: 700; margin-bottom: .25rem;
}

/* ---------- chapters ---------- */
.chap { padding: 0; overflow: hidden; }
.chaphead {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: none; margin: 0; padding: .9rem 1rem; text-align: left;
  border-radius: var(--radius);
}
.chaphead .t { font-weight: 600; }
.chaphead .s { font-size: .8rem; color: var(--muted); }
.chev { color: var(--muted); font-size: 1.3rem; transition: transform .18s; flex: none; }
.chapbody { padding: 0 1rem .6rem; }
.tick {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 600;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line);
}
.tick.done { background: var(--ok); color: #fff; border-color: var(--ok); font-size: 1rem; }
.tick.part { color: var(--warn); border-color: var(--warn); }

.topicrow {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .2rem; border-top: 1px solid var(--line);
  color: var(--ink); font-size: .93rem;
}
.topicrow .s { color: var(--muted); font-size: .78rem; }
.dot {
  flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--line);
}
.dot.on { background: var(--ok); }

/* Marker beside a heading that carries an examinable question. */
.qmark {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  margin-left: .45rem; padding: 0; border-radius: 50%; vertical-align: middle;
  background: var(--accent); color: #fff; border: none;
  font-size: .72rem; font-weight: 700; line-height: 1; cursor: pointer;
}
/* Marker while its questions are open — tap again to dismiss. */
.qmark.open { background: var(--muted); }
.qmark.open::after { content: ""; }

button.mark {
  width: auto; margin: 0; padding: .35rem .7rem; font-size: .82rem; border-radius: 999px;
}
button.mark.on { background: color-mix(in srgb, var(--ok) 22%, transparent); border-color: var(--ok); color: var(--ok); }
#inlineq .iq { padding-bottom: .5rem; }
#inlineq .iq + .iq { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
#inlineq .fb { border-left: 3px solid var(--accent); padding-left: .7rem; margin-top: .6rem; font-size: .9rem; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.bar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.bar .grow { flex: 1; }
.bar a { font-size: .9rem; }

/* ---------- interactive schematics ---------- */
.widget { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin: 1.2rem 0; }
.wtitle { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin-bottom: .6rem; }
.schem { width: 100%; height: auto; display: block; }
.schem rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.schem rect#p-green, .schem rect#p-yellow { fill: var(--panel); }
.schem rect.on-green { fill: color-mix(in srgb, var(--sys-green) 35%, transparent); stroke: var(--sys-green); }
.schem rect.on-yellow { fill: color-mix(in srgb, var(--sys-yellow) 35%, transparent); stroke: var(--sys-yellow); }
.schem .lbl { font: 700 12px ui-monospace, Menlo, monospace; fill: var(--ink); letter-spacing: .06em; }
.schem .psi { font: 600 12px ui-monospace, Menlo, monospace; fill: var(--muted); }
.schem .bl { font: 700 12px ui-monospace, Menlo, monospace; fill: var(--ink); text-anchor: middle; }
.schem .bl2 { font: 400 10px ui-monospace, Menlo, monospace; fill: var(--muted); text-anchor: middle; }
.schem .pipe { stroke: var(--line); stroke-width: 3; }
.schem .pipe.live { stroke: var(--accent); stroke-width: 4; }
.schem g.off rect { opacity: .45; stroke-dasharray: 4 3; }
.schem g.off text { opacity: .45; }
.schem g.running rect.ptu { stroke: var(--accent); stroke-width: 2.5; fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.schem g.inhib rect.ptu { stroke: var(--warn); stroke-width: 2.5; fill: color-mix(in srgb, var(--warn) 18%, transparent); }
.schem .arrow { fill: var(--accent); }
.ctl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.ctl button {
  width: auto; flex: 1 1 auto; margin: 0; padding: .45rem .6rem; font-size: .76rem;
  font-family: ui-monospace, Menlo, monospace; border-radius: 999px;
  background: var(--panel); color: var(--muted);
}
.ctl button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.wstate { margin-top: .8rem; font-size: .88rem; line-height: 1.5; }
.wstate strong { color: var(--accent); }
.wstate .src { display: block; margin-top: .3rem; font-size: .72rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.wnote { font-size: .74rem; color: var(--muted); margin: .7rem 0 0; }

/* electrical widget: bus boxes, live vs unpowered */
.schem rect.bus { fill: color-mix(in srgb, var(--ok) 16%, transparent); stroke: var(--ok); stroke-width: 1.6; }
.schem g.dead rect.bus { fill: none; stroke: var(--line); stroke-dasharray: 4 3; }
.schem g.dead text { opacity: .5; }

/* ---------- Airbus-style pushbuttons ---------- */
.pbrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .4rem; margin-top: .8rem; }
.apb {
  width: 100%; margin: 0; padding: 0; border-radius: 4px;
  background: #2a2f36; border: 1px solid #11151a; color: #cfd6de;
  display: grid; grid-template-rows: 1fr 1fr auto; min-width: 4.6rem;
  font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden;
}

.apb .pbf, .apb .pbo {
  font-size: .58rem; letter-spacing: .06em; padding: .2rem 0; text-align: center;
  color: #4a5058; border-bottom: 1px solid #11151a; min-height: 1.05rem;
}
.apb .pbo { border-bottom: none; }
.apb.lit-fault .pbf { background: #d9a400; color: #191919; font-weight: 700; }
.apb.lit-off .pbo { background: #e6e6e6; color: #191919; font-weight: 700; }
/* Not dark-cockpit: a schematic needs to show positively that an engine
   is turning, so ENG pbs light a green ON. */
.apb.lit-on .pbf { background: #2ea043; color: #fff; font-weight: 700; }
.apb .pbl {
  font-size: .6rem; letter-spacing: .05em; padding: .22rem .35rem;
  background: var(--panel2); color: var(--muted); border-top: 1px solid #11151a;
}
.failrow { margin-top: .7rem; }
.faillbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.failrow .ctl { margin-top: .35rem; }
.failrow .ctl button.on { background: var(--warn); border-color: var(--warn); color: #191919; }

/* ---------- schematic wires & nodes ---------- */
.schem .w { stroke: var(--line); stroke-width: 2.5; fill: none; }
.schem .w.live { stroke: var(--ok); stroke-width: 3.5; }
.schem g.nd rect { fill: color-mix(in srgb, var(--ok) 14%, transparent); stroke: var(--ok); stroke-width: 1.5; }
.schem g.nd.dead rect { fill: none; stroke: var(--line); stroke-dasharray: 4 3; }
.schem g.nd.dead text { opacity: .5; }
.schem .rat circle { fill: color-mix(in srgb, var(--ok) 14%, transparent); stroke: var(--ok); stroke-width: 1.5; }
.schem .rat path { fill: var(--ok); }
.schem .rat.dead circle { fill: none; stroke: var(--warn); stroke-dasharray: 4 3; }
.schem .rat.dead path { fill: var(--warn); }
/* transform-origin on a nested SVG group resolves against the viewBox, not the
   group's own coords, so an explicit x/y drifts when the parent is translated.
   fill-box + center pins it to the blades' own bounding box, which is now
   symmetric about the hub — so it spins in place wherever the group sits. */
.schem .rat.spin #e-ratblade,
.schem .rat.spin #h-ratblade {
  transform-box: fill-box; transform-origin: center;
  animation: ratspin 1.1s linear infinite;
}
@keyframes ratspin { to { transform: rotate(360deg); } }
.schem .shed { fill: var(--warn); font-weight: 700; }

/* ---------- ECAM panel ---------- */
.pv-img.panel { background: var(--bg); color: var(--ink); padding: 1rem; text-align: left; }
.ecamwin { max-width: 34rem; margin: 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ecamhead { font-size: .68rem; letter-spacing: .12em; color: var(--muted); margin: .9rem 0 .35rem; }
.ecamline { padding: .3rem .5rem; border-left: 3px solid var(--line); margin-bottom: .25rem; font-size: .9rem; }
.ecamline.warning { border-color: var(--ecam-red); color: var(--ecam-red); font-weight: 700; }
.ecamline.caution { border-color: var(--ecam-amber); color: var(--ecam-amber); font-weight: 700; }
.ecamline.inop { border-color: var(--muted); color: var(--muted); }
.ecamline.none { border-color: transparent; color: var(--muted); font-style: italic; }
.ecamline .csrc { display: block; font-size: .66rem; color: var(--muted); font-weight: 400; }

.ecamline.act { border-color: var(--ecam-cyan); color: var(--ecam-cyan); }
.ecamline.stat { border-color: var(--ecam-green); color: var(--ecam-green); }
.ecamline.gap { border-color: var(--muted); color: var(--muted); font-size: .8rem; font-style: italic; }
.landasap { background: var(--ecam-amber); color: #191919; font-size: .66rem;
  padding: .05rem .35rem; border-radius: 3px; margin-left: .4rem; letter-spacing: .06em; }

/* `hidden` is not honoured on SVG elements; use display instead. */
.schem .gone { display: none; }

.whint {
  font-size: .82rem; margin: .5rem 0 0; padding: .45rem .7rem;
  border-left: 3px solid var(--accent); color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Navigation restored after it was stripped with the quiz-app styling — but
   deliberately quiet: small text links, not pills, so the identity still leads
   and the syllabus stays the product. */
.topnav { display: flex; gap: .15rem; flex-wrap: wrap; }
.topnav a {
  font-size: .82rem; color: var(--muted); padding: .28rem .55rem;
  border-radius: 999px; white-space: nowrap;
}
.topnav a.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
@media (max-width: 30rem) {
  .brand .who em { display: none; }        /* fleet line makes it too tall on a phone */
  .topnav { width: 100%; justify-content: space-between; }
  .topnav a { padding: .28rem .35rem; }
}

/* ---------- MCDU ---------- */
.mcduwarn { border-left: 3px solid var(--warn); padding: .5rem 0 .5rem .8rem;
  margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }
.mcduwarn strong { color: var(--warn); }
/* The display is 14 lines of 24 characters (FCOM p509): a title, six
   label+value pairs, and the scratchpad. Laying it out as 14 FIXED rows does
   two jobs at once — the screen can no longer change size as text comes and
   goes in the scratchpad, and the LSK column can use the same 14 rows so each
   key sits exactly beside the pair it acts on. --mline is deliberately an
   absolute length, not an em: the two columns have different font sizes and
   would otherwise disagree about how tall a row is. */
.mcdu {
  display: grid; grid-template-columns: auto 1fr auto; gap: .3rem;
  align-items: stretch;
  --mfs: 13px; --mline: calc(var(--mfs) * 1.45); --mpad: .4rem; --mborder: 2px;
}
.m-screen {
  display: grid; grid-template-rows: repeat(14, var(--mline));
  background: #0a0f0a; border: var(--mborder) solid #2a2f36; border-radius: 6px;
  padding: var(--mpad); box-sizing: border-box;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--mfs); line-height: 1; overflow: hidden;
}
.m-line { display: flex; align-items: center; justify-content: space-between;
  white-space: pre; min-width: 0; }
.m-title { color: #fff; justify-content: center; letter-spacing: .12em;
  overflow: hidden; }
.m-label { color: #cfd6de; font-size: .82em; opacity: .85; }
.m-scratch { color: #fff; border-top: 1px solid #2a2f36; }
.m-scratch.m-msg { color: #d9a400; }
.c-white { color: #e8eef6; } .c-green { color: #3ecf8e; } .c-blue { color: #6aa9ff; }
.c-amber { color: #d9a400; } .c-magenta { color: #e07ae0; } .c-yellow { color: #e0c341; }
/* Same 14-row grid as the screen, and the same padding/border box, so the
   rows line up. Each key spans its own label+value pair. */
.m-lsks {
  display: grid; grid-template-rows: repeat(14, var(--mline)); gap: 0;
  padding: var(--mpad) 0; box-sizing: border-box;
  border: var(--mborder) solid transparent;
}
/* Each key sits on its DATA line — the small label line above it is an
   annotation, the value is what the key acts on. The button is taller than one
   row and overflows evenly either side, as the real key does. */
.m-lsks .m-lsk:nth-child(1) { grid-row: 3; }
.m-lsks .m-lsk:nth-child(2) { grid-row: 5; }
.m-lsks .m-lsk:nth-child(3) { grid-row: 7; }
.m-lsks .m-lsk:nth-child(4) { grid-row: 9; }
.m-lsks .m-lsk:nth-child(5) { grid-row: 11; }
.m-lsks .m-lsk:nth-child(6) { grid-row: 13; }
.m-lsks .m-lsk { align-self: center; height: calc(var(--mline) * 1.7); }
.m-lsk {
  width: auto; margin: 0; padding: 0 .35rem; min-width: 2.1rem; font-size: .62rem;
  background: #2a2f36; color: #cfd6de; border: 1px solid #11151a; border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace;
}
.m-funcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin-top: .5rem; }
.m-func {
  width: auto; margin: 0; padding: .35rem .2rem; font-size: .58rem; letter-spacing: .03em;
  background: #2a2f36; color: #cfd6de; border: 1px solid #11151a; border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace;
}
.m-pad { margin-top: .4rem; display: grid; gap: .25rem; }
.m-padrow { display: flex; gap: .25rem; }
.m-key {
  width: auto; flex: 1; margin: 0; padding: .4rem .1rem; font-size: .68rem;
  background: #343a42; color: #e8eef6; border: 1px solid #11151a; border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace;
}
.m-drill {
  display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem;
  padding: .5rem .7rem; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: .85rem;
}
.m-drill.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.m-drill span { color: var(--muted); font-size: .8rem; }

.m-startdrill { width: auto; margin: .35rem .35rem 0 0; padding: .35rem .7rem; font-size: .8rem; }
.m-drill.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.m-drill .wrongmsg { color: var(--bad); font-weight: 600; }
.m-drill .fmt { color: var(--accent); font-family: ui-monospace, Menlo, monospace; font-size: .76rem; }
.m-drill .src { font-size: .72rem; opacity: .8; }

/* ---------- mcdu responsive ----------
   Desktop: a real MCDU is portrait, so don't let it stretch across the lesson
   column — constrain and centre, and size keys for a mouse.
   Phone: full width, and every key at least 44px so it is actually tappable. */
.mcduwrap .mcdu,
.mcduwrap .m-funcs,
.mcduwrap .m-pad { max-width: 30rem; margin-left: auto; margin-right: auto; }
.m-key { min-height: 2rem; }
.m-func { min-height: 2rem; }
.mcdu { --mfs: 13px; }

@media (max-width: 30rem) {
  .mcduwrap .mcdu,
  .mcduwrap .m-funcs,
  .mcduwrap .m-pad { max-width: none; }
  .m-key { min-height: 44px; font-size: .82rem; padding: .5rem .1rem; }
  .m-func { min-height: 40px; font-size: .56rem; padding: .3rem .15rem; }
  .m-lsk { min-width: 2.4rem; font-size: .66rem; }
  .mcdu { --mfs: 12px; --mpad: .3rem; }
  .m-funcs { grid-template-columns: repeat(3, 1fr); }
  .widget { padding: .6rem; }
}

/* Pointer devices get a hover state; touch devices should not keep it stuck. */
@media (hover: hover) {
  .m-key:hover, .m-func:hover, .m-lsk:hover { background: #3d444d; }
}

/* ---------- MCDU unit: bezel, lamps, key relief ---------- */
.mcdu-unit {
  background: linear-gradient(#3a3f47, #23272d 12%, #1e2228 88%, #14171b);
  border: 1px solid #0c0e11; border-radius: 14px;
  padding: .8rem .7rem 1rem; max-width: 30rem; margin: 0 auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.mcdu-unit .mcdu, .mcdu-unit .m-funcs, .mcdu-unit .m-pad { max-width: none; }
.mcdu-unit .m-screen {
  background: radial-gradient(120% 90% at 50% 0%, #0d160d, #060a06 70%);
  border: 1px solid #050705; border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(0,255,120,.05), inset 0 2px 6px rgba(0,0,0,.8);
}
.mcdu-unit.dimmed .m-screen { filter: brightness(.45); }

.m-annun { display: flex; gap: .3rem; justify-content: center; margin: .5rem 0 .45rem; flex-wrap: wrap; }
.lamp {
  font: 700 .5rem/1 ui-monospace, Menlo, monospace; letter-spacing: .06em;
  padding: .22rem .3rem; border-radius: 2px; min-width: 2.1rem; text-align: center;
  background: #14171b; border: 1px solid #0b0d10; color: #2f353c;   /* unlit */
}
.lamp.lit.green { background: #1f7a4d; color: #d8ffe8; box-shadow: 0 0 6px rgba(62,207,142,.5); }
.lamp.lit.amber { background: #a87c00; color: #fff2cf; box-shadow: 0 0 6px rgba(217,164,0,.5); }
.lamp.lit.white { background: #b9c2cc; color: #10161d; }

.mcdu-unit .m-lsk {
  background: linear-gradient(#3c434c, #262b32); border: 1px solid #0b0d10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.5);
  color: #aeb7c2;
}
.mcdu-unit .m-func, .mcdu-unit .m-key {
  background: linear-gradient(#40474f, #282d34); border: 1px solid #0b0d10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.5);
  color: #dfe5ec;
}
.mcdu-unit .m-key:active, .mcdu-unit .m-func:active, .mcdu-unit .m-lsk:active {
  background: linear-gradient(#22262c, #2f353d); box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  transform: none;
}
.m-slew { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; margin-top: .35rem; }
.m-arrow { font-size: .7rem; }
.m-brt { font-size: .58rem; letter-spacing: .04em; }
.m-badge {
  text-align: center; margin-top: .6rem; font: 700 .55rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .3em; color: #59616b;
}

.m-drill .freebtn { border-color: var(--accent, #3ecf8e); }
.m-drill.free .fmt { display: block; margin-top: .35rem; }
.m-drill .m-reset { margin-left: .4rem; }

/* Free-play field guide — "what would I actually type here, and who gives me
   the number". Ground entries are the drillable ones, so they lead. */
.m-guide { width: 100%; border-collapse: collapse; margin: .5rem 0 .4rem; font-size: .72rem; }
.m-guide th { text-align: left; font-weight: 600; color: var(--muted, #8b95a1);
  border-bottom: 1px solid var(--line, #2a3038); padding: .25rem .4rem .25rem 0; }
.m-guide td { padding: .25rem .4rem .25rem 0; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.04); }
.m-guide td:first-child { font: 600 .7rem ui-monospace, Menlo, monospace; white-space: nowrap; }
.m-guide tr.e-ground td:first-child { color: #3ecf8e; }
.m-guide tr.e-other td:first-child { color: #8b95a1; }
.m-guide tr.e-other { opacity: .72; }
.m-drill .pnote { display: block; margin-top: .35rem; font-style: italic; }
@media (max-width: 30rem) {
  .m-guide { font-size: .68rem; display: block; overflow-x: auto; }
}

/* Phase selector — most of the MCDU's gating hangs off the active phase, so it
   has to be visible and switchable for any of it to be learnable. */
.m-phase { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: .5rem 0 .3rem; }
.m-phase > span { font-size: .72rem; color: var(--muted, #8b95a1); margin-right: .2rem; }
.m-phbtn {
  font: 600 .62rem/1 ui-monospace, Menlo, monospace; letter-spacing: .04em;
  padding: .4rem .45rem; border-radius: 3px; cursor: pointer;
  background: #22262c; color: #8b95a1; border: 1px solid #11151a;
  /* the panel's buttons are full-width by default; these are chips */
  width: auto; flex: 0 0 auto; min-height: 28px;
}
.m-phbtn.on { background: #1f7a4d; color: #d8ffe8; border-color: #2f9e68; }
.m-explain {
  margin: .5rem auto 0; max-width: 30rem; font-size: .76rem; line-height: 1.45;
  color: #e8eef6; background: rgba(62,207,142,.08);
  border-left: 3px solid #3ecf8e; padding: .45rem .6rem; border-radius: 0 4px 4px 0;
}

/* ---------- display grammar (FCOM p511 fonts, p512 colours) ----------
   Small font = defaulted or computed and not modifiable; large = a crew entry
   or data the crew may modify. That contrast is the fastest read on the whole
   screen, so it has to be visible rather than nominal. */
.m-value .m-sm { font-size: .82em; opacity: .9; }
.m-value .st-box { letter-spacing: .04em; }
.m-value .st-dash { opacity: .75; }
.g-sel { color: #e8eef6; opacity: .9; }         /* < and > line-select prompts */
.g-act { color: #d9a400; font-weight: 700; }    /* amber * — action required   */
.m-title { position: relative; }
.g-turn { position: absolute; right: 0; color: #e8eef6; opacity: .65; letter-spacing: -.05em; }

/* Legend — what the states mean, with a live sample of each. */
.m-legend { margin: .5rem 0 .2rem; font-size: .74rem; }
.m-legend table { width: 100%; border-collapse: collapse; }
.m-legend td { padding: .2rem .4rem .2rem 0; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.04); }
.m-legend td:first-child { width: 4.5rem; white-space: nowrap;
  font-family: ui-monospace, Menlo, monospace; }
.m-legend .lg-src { color: var(--muted); font-size: .7rem; }

/* Mandatory box: drawn, exactly one character column wide, so a boxed field
   occupies the same space as the value that will replace it. */
.m-value .bx {
  display: inline-block; width: 1ch; height: .92em; vertical-align: -.1em;
  border: 1px solid currentColor; box-sizing: border-box; border-radius: 1px;
}
.m-legend .bx { display: inline-block; width: 1ch; height: .9em; vertical-align: -.1em;
  border: 1px solid currentColor; box-sizing: border-box; }

/* Slew indicator: bottom right, deliberately a different corner from the
   page-turn arrows at top right — the FCOM treats the position as meaningful. */
.g-slew { color: #e8eef6; opacity: .65; letter-spacing: -.05em; }
.m-scratch { justify-content: space-between; }
.m-legend + .m-legend { margin-top: .2rem; }
.m-legend summary { cursor: pointer; color: var(--accent, #3ecf8e); font-weight: 600; }
.m-legend td:first-child { color: #e8eef6; }

/* Fleet selector and the differences table. The split changes what the box
   accepts, so it sits above the phase chips rather than in a footnote. */
.m-fleet .fl-sub { font-size: .68rem; color: var(--muted); margin-left: .3rem; }
.m-legend th { text-align: left; font-weight: 600; color: var(--muted);
  font-size: .7rem; padding: .2rem .4rem .2rem 0;
  border-bottom: 1px solid var(--line, #2a3038); }
.m-legend tr.fd-note td { border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--muted); font-size: .7rem; padding-top: 0; padding-bottom: .35rem; }
.m-legend tr.fd-message td:first-child,
.m-legend tr.fd-name td:first-child { color: #e8eef6; }
.m-legend tr.fd-entry td:first-child { color: #d9a400; }   /* changes what you type */
.m-legend tr.fd-fit td:first-child { color: #8b95a1; font-style: italic; }
@media (max-width: 30rem) { .m-legend table { font-size: .68rem; } }

.m-drillbar { display: flex; gap: .4rem; margin-top: .45rem; }
.m-drillbar button { width: auto; flex: 0 0 auto; font-size: .72rem; padding: .3rem .5rem; }

.m-abnbtn {
  font: 600 .62rem/1 ui-monospace, Menlo, monospace; letter-spacing: .04em;
  padding: .4rem .45rem; border-radius: 3px; cursor: pointer;
  background: #22262c; color: #8b95a1; border: 1px solid #11151a;
  width: auto; flex: 0 0 auto; min-height: 28px;
}
.m-abnbtn.on { background: #a87c00; color: #fff2cf; border-color: #d9a400; }

/* Phone: kill the double-tap zoom delay and the grey tap flash, and stop the
   browser trying to scroll a tapped key into view. */
.mcdu-unit, .m-lsk, .m-func, .m-key, .m-phbtn, .m-abnbtn {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mcdu-unit { overflow-anchor: none; }

/* Keep the drill panel a constant height so the MCDU below it never moves as
   the instruction text changes length or an error line appears. */
.m-drill .say { display: block; min-height: 5em; }
.m-drill .fmt, .m-drill .wrongmsg { display: block; min-height: 1.15em; }

/* A leaking duct is a state of its own: air is still arriving, it is just going
   overboard. Reading it as "unpowered" would hide the point of the leak trap. */
.nd.leaking rect { stroke: var(--warn, #d9a400); stroke-width: 2; }
.nd.leaking .bl, .nd.leaking .bl2 { fill: var(--warn, #d9a400); }
.apb.xsel .apbtop { color: #6aa9ff; font-weight: 700; }

/* ---------- FMA: five columns, three lines ----------
   Blue = armed, which IS sourced. Engaged deliberately carries no colour —
   green-for-engaged is not stated anywhere in the corpus this course is built
   from, so the trainer does not invent it. */
.fma { background: #0a0f0a; border: 2px solid #2a2f36; border-radius: 6px;
  padding: .35rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow-x: auto; }
.fmarow { display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; }
.fmacell { font-size: .68rem; text-align: center; padding: .22rem .1rem;
  color: #e8eef6; white-space: nowrap; min-height: 1.5em; }
.fmahead .fmacell { font-size: .54rem; color: var(--muted, #8b95a1);
  border-bottom: 1px solid #2a2f36; letter-spacing: .04em; }
.fmacell.armed { color: #6aa9ff; }          /* blue = armed, per the FCOM */
.fmacell.engaged { color: #3ecf8e; }        /* green = engaged, per Kenny */
.fmacell.boxed { outline: 1px solid #e8eef6; outline-offset: -1px; }
.fmacell.flashing { outline: 1px solid #d9a400; outline-offset: -1px; color: #d9a400;
  animation: fmablink 1s steps(2, start) infinite; }
@keyframes fmablink { to { opacity: .35; } }
@media (max-width: 30rem) { .fmacell { font-size: .58rem; } .fmahead .fmacell { font-size: .48rem; } }

/* Thrust lever quadrant. Column 1 of the FMA is almost entirely a function of
   which detent the most advanced lever sits in, so the two are shown together. */
.fmawrap { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.fmawrap > div:first-child { flex: 1 1 16rem; min-width: 0; }
.quad { width: 9rem; height: auto; }
.quadbg { fill: #14171b; stroke: #2a3038; }
.detent { stroke: #3a424c; stroke-width: 1.5; }
.detlbl { fill: #8b95a1; font-size: 9px; text-anchor: middle;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.levershaft { stroke: #59616b; stroke-width: 3; }
.leverknob { fill: #40474f; stroke: #0b0d10; }
.leverlbl { fill: #e8eef6; font-size: 9px; text-anchor: middle; font-weight: 700;
  font-family: ui-monospace, Menlo, monospace; }
.fmacell.boxed.amberbox { outline-color: #d9a400; color: #d9a400; }
@media (max-width: 30rem) { .quad { width: 7.5rem; } .fmawrap { gap: .4rem; } }

/* ---------- signed-in notice ----------
   Shown once to anyone studying on a personal link. They are told plainly that
   their results go to whoever sent them the link, rather than finding out from
   someone quoting their quiz score back at them. */
.synced {
  position: fixed; left: .7rem; right: .7rem; z-index: 60;
  bottom: calc(.7rem + env(safe-area-inset-bottom));
  display: flex; gap: .7rem; align-items: center;
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .7rem .85rem;
  font-size: .85rem; color: var(--muted);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.synced strong { color: var(--ink); font-weight: 600; }
.synced button { flex: none; }
@media (min-width: 42rem) { .synced { left: auto; max-width: 30rem; } }

/* ===========================================================================
 * Autoflight trainer (app/autoflight.js) — FMA + FCU + thrust quadrant.
 * Appended block, new classes only — nothing above this line is touched.
 * Reuses .fma/.fmarow/.fmahead/.fmacell/.armed/.boxed/.flashing/.amberbox
 * (defined above, under "FMA: five columns, three lines") and .row/.ctl/
 * .quad/.leverknob/.leverlbl/.detent/.detlbl/.quadbg/.levershaft as-is.
 * ======================================================================== */

/* `main` above is capped at 46rem, but this trainer wants ~1180px of
   landscape width. .afbleed breaks its child out to the full viewport width
   regardless of main's own width (the maths cancels out because main is
   centred with margin:0 auto — see AUTOFLIGHT-NOTES.md); .aftrainer then
   re-centres a normal 1180px column inside that full-width strip. */
.afbleed { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.aftrainer { max-width: 1180px; margin: 0 auto; padding: 0 .6rem; box-sizing: border-box; }

.afsmall { display: none; text-align: center; padding: 2.4rem 1rem; }
.afwide {
  display: grid; gap: .6rem;
  grid-template-columns: 11.5rem 1fr;
  grid-template-areas:
    "fma    fma"
    "quad   strip"
    "quad   fcu"
    "quad   log"
    "quad   transport";
}
/* "Below 900px wide, show a short message saying it needs a landscape
   tablet or a desktop" — checked against the viewport, since .afbleed has
   already broken this trainer out of main's own (irrelevant) width. */
@media (max-width: 900px) {
  .afwide { display: none; }
  .afsmall { display: block; }
}

.afarea-fma { grid-area: fma; }
.afarea-quad {
  grid-area: quad; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem;
}
.afarea-strip {
  grid-area: strip; display: flex; flex-wrap: wrap; gap: .6rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .8rem;
}
.afarea-fcu {
  grid-area: fcu; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .7rem;
}
.afarea-log {
  grid-area: log; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem;
}
.afarea-transport {
  grid-area: transport; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .7rem;
}
@media (max-width: 1050px) { .afwide { grid-template-columns: 9.5rem 1fr; } }

.afstripitem {
  display: flex; flex-direction: column; min-width: 4.4rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.afstriplbl { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* FCU knobs — window, PUSH/PULL, and a +/- stepper for the dialled value.
   Increments on the stepper are an arbitrary UI granularity, not a sourced
   FCU click value — see AUTOFLIGHT-NOTES.md. */
.afknob { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.afknoblbl {
  flex: 0 0 auto; min-width: 6.5rem; font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.afwindow {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem;
  background: #0a0f0a; color: #3ecf8e; border: 1px solid #2a2f36; border-radius: 4px;
  padding: .2rem .5rem; min-width: 4.6rem; text-align: center;
  display: inline-flex; align-items: center; gap: .35rem; justify-content: center;
}
.afdash { opacity: .8; letter-spacing: .12em; }
.afdot { width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid #3a4048; display: inline-block; }
.afdot.on { background: #e8eef6; border-color: #e8eef6; }
/* The build spec says: where a managed dot is not independently confirmed,
   do not draw one (fcu-panel.md GAPS). This label says so instead of a dot. */
.afnodot {
  font-size: .58rem; color: var(--muted); font-style: italic;
  text-transform: none; letter-spacing: 0; margin-left: .3rem; display: block;
}
.afflex {
  display: flex; align-items: center; gap: .4rem; margin-top: .4rem;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem;
}

/* Pushbutton row: AP1/AP2/A-THR/LOC/APPR/EXPD/TRK-FPA. Deliberately its own
   small square-button look (not the pill-shaped .ctl button) — closer to a
   real FCU pushbutton, and distinct "armed" (blue) vs "on" (green) states. */
.afpbrow { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.afpb {
  width: auto; margin: 0; padding: .42rem .55rem; font-size: .68rem;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em;
  background: #22262c; color: #8b95a1; border: 1px solid #11151a; border-radius: 4px;
}
.afpb.on { background: #2ea043; color: #fff; font-weight: 700; }
.afpb.armed { background: none; color: #6aa9ff; border-color: #6aa9ff; font-weight: 700; }
.afpb:disabled { opacity: .5; }

.afchimewrap { min-height: 1.1rem; margin-top: .35rem; }
.afchime { font-size: .66rem; color: var(--warn); animation: afchimepulse 1s steps(2, start) infinite; }
@keyframes afchimepulse { to { opacity: .25; } }

.afloghead { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .4rem; font-weight: 700; }
.aflognew { font-size: .95rem; line-height: 1.45; margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.aflognew .afsrc { display: block; margin-top: .3rem; }
.aflogold { max-height: 9rem; overflow-y: auto; font-size: .78rem; color: var(--muted); }
.aflogitem { display: flex; flex-direction: column; gap: .1rem; padding: .3rem 0; border-top: 1px solid var(--line); }
.aflogitem:first-child { border-top: none; padding-top: 0; }
.afsrc { font-size: .68rem; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.aftriple { color: var(--warn); }

.afseq {
  font-size: .85rem; padding: .5rem .7rem; margin-bottom: .5rem;
  border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.afseq.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.afclock { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--muted); align-self: center; margin-left: .3rem; }

/* The honesty panel — required by the build spec, not optional. */
.afhonesty { font-size: .78rem; color: var(--warn); font-weight: 600; margin: .9rem 0 .3rem; text-align: center; }
.afcaveats { font-size: .8rem; margin: .3rem 0 1rem; }
.afcaveats summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.afcaveat { border-left: 3px solid var(--line); padding: .3rem 0 .3rem .7rem; margin-top: .6rem; }
.afcaveat strong { display: block; margin-bottom: .15rem; }
.afcaveat p { margin: 0 0 .2rem; color: var(--muted); }

/* ===========================================================================
 * Question refs (bin/assign_qrefs.py) and "report a problem" (Part 3).
 * Appended block, new classes only.
 * ======================================================================== */

/* A reference number, not a citation — sits beside .src but must not compete
   with it for attention. */
.ref {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--muted); opacity: .7;
}

/* Quiet by design: available once a question is answered, but not a call to
   action like the primary buttons around it. */
.reportlink {
  width: auto; background: none; border: none; color: var(--muted);
  text-decoration: underline; padding: .3rem 0; margin: .3rem 0 0;
  font-size: .8rem; display: block; text-align: left;
}
.reportlink:hover { color: var(--accent); }

/* One tap on .reportlink reveals this, right under the question — never a
   modal. `:not([hidden])` rather than a bare `.flagrow{display:flex}` so the
   `hidden` attribute still wins the cascade at equal specificity. */
.flagrow:not([hidden]) { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0 0; }
.chip {
  width: auto; flex: 0 0 auto; margin: 0; padding: .35rem .65rem;
  font-size: .78rem; border-radius: 999px;
}
.chip:active { border-color: var(--accent); }
input.flagnote {
  /* input[type=text] outranks a bare class on specificity, so this must be
     qualified with the element to actually override its width:100%. */
  flex: 1 1 9rem; min-width: 8rem; width: auto; margin: 0;
  padding: .35rem .6rem; font-size: .78rem; border-radius: 999px;
}

/* ===========================================================================
 * FLIGHT DECK UI — 2026 visual system
 *
 * An aviation-specific layer over the original component rules. The light
 * surface is a daylight flight-deck palette; trainers always enter a dark
 * instrument bay so system state and controls keep the same visual contract.
 * No external fonts or assets: the PWA remains fast and offline-friendly.
 * ======================================================================== */

:root {
  color-scheme: dark;
  --bg: #071018;
  --panel: #0d1822;
  --panel2: #132431;
  --elevated: #172b39;
  --ink: #edf7fb;
  --muted: #91a7b5;
  --line: #294050;
  --accent: #46c7ff;
  --accent-strong: #138ac5;
  --ok: #62d897;
  --bad: #ff7373;
  --warn: #ffc15b;
  --radius: 8px;
  --display: "Bahnschrift SemiCondensed", "Arial Narrow", "Segoe UI", sans-serif;
  --body: "Aptos", "Segoe UI", system-ui, sans-serif;
  --utility: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  --shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #e9eff3;
    --panel: #f9fbfc;
    --panel2: #e4ebef;
    --elevated: #ffffff;
    --ink: #0b1a24;
    --muted: #4e6472;
    --line: #bdcdd6;
    --accent: #006b9f;
    --accent-strong: #00567f;
    --ok: #087a46;
    --bad: #bd2f37;
    --warn: #986000;
    --shadow: 0 15px 34px rgba(25, 48, 62, .09);
  }
}

* { scrollbar-color: var(--line) transparent; }
html { scroll-behavior: smooth; background: #071018; }
body {
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: .005em;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

button, input, select { font-family: var(--body); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 1000;
  transform: translateY(-180%); padding: .7rem 1rem;
  color: #071018; background: #edf7fb; border-radius: 4px; font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.ui-icon, .topnav svg {
  width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* App chrome: an identity bar followed by a compact FMA-like status strip. */
header, .appbar {
  min-height: 4.1rem; flex-wrap: nowrap; gap: 1.5rem;
  color: #edf7fb; background: #071018;
  border-bottom: 1px solid #243947;
  padding: max(.7rem, env(safe-area-inset-top)) clamp(.8rem, 2vw, 1.6rem) .7rem;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .22);
}
.brand { min-width: 0; color: #edf7fb; }
.brand .mark {
  width: 3.7rem; height: 2.25rem; padding: 0;
  display: grid; place-items: center;
  background: #0c7fba; color: #fff; border: 1px solid #4ac8ff;
  border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(7, 16, 24, .28);
  font: 700 .94rem/1 var(--utility); letter-spacing: -.04em;
}
.brand .mark b { font-size: 1.08em; color: #bdeaff; }
.brand .who { gap: .15rem; line-height: 1.1; }
.brand .who strong {
  font: 650 1.02rem/1.1 var(--display); letter-spacing: .035em;
  text-transform: uppercase;
}
.brand .who em {
  color: #92a8b7; font: 500 .69rem/1.2 var(--utility);
  letter-spacing: .025em;
}

.topnav { margin-left: auto; gap: .2rem; align-items: center; flex-wrap: nowrap; }
.topnav a {
  min-height: 44px; display: inline-flex; align-items: center; gap: .4rem;
  color: #9eb1bd; padding: .55rem .62rem; border: 1px solid transparent;
  border-radius: 4px; font: 650 .75rem/1 var(--display);
  text-transform: uppercase; letter-spacing: .04em;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.topnav a:hover { color: #edf7fb; background: #122330; border-color: #294050; }
.topnav a.on {
  color: #65d4ff; background: #102735; border-color: #245c77;
  box-shadow: inset 0 -2px 0 #46c7ff;
}
.topnav svg { width: 1rem; height: 1rem; }

.status-ribbon {
  position: sticky; top: 4.1rem; z-index: 9;
  display: grid; grid-template-columns: 1.15fr 1fr .7fr .8fr 1.35fr;
  max-width: 100%; color: #d6e7ef; background: #09131a;
  border-bottom: 1px solid #263e4d; box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  font: 600 .67rem/1.1 var(--utility); letter-spacing: .035em;
}
.status-ribbon span {
  min-width: 0; padding: .42rem clamp(.55rem, 1.8vw, 1.2rem);
  border-right: 1px solid #263e4d; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.status-ribbon span:last-child { border-right: 0; }
.status-ribbon b {
  display: block; margin-bottom: .16rem; color: #718a99;
  font-size: .52rem; letter-spacing: .12em; font-weight: 600;
}
.status-ribbon .status-live { color: #68dc9d; }
.status-ribbon .status-live::after {
  content: ""; display: inline-block; width: .42rem; height: .42rem;
  margin-left: .45rem; border-radius: 50%; background: #62d897;
  box-shadow: 0 0 0 3px rgba(98, 216, 151, .13);
}

main {
  width: min(100%, 68rem); max-width: none;
  min-height: calc(100vh - 12rem); margin: 0 auto;
  padding: clamp(1.25rem, 3.2vw, 2.7rem) clamp(.85rem, 2.6vw, 1.8rem) 1rem;
}
main:focus, main[tabindex]:focus-visible { outline: none; }
main:has(.trainer-page) { width: min(100%, 78rem); }
h1, h2, h3, .t, strong { text-wrap: balance; }
h1 {
  font: 650 clamp(1.65rem, 3vw, 2.35rem)/1.08 var(--display);
  letter-spacing: .01em; margin: 0 0 1rem;
}
h2 { font: 650 1.3rem/1.2 var(--display); letter-spacing: .015em; }
h3 { font: 650 1.05rem/1.25 var(--display); }
.eyebrow, .tool-kicker {
  display: block; color: var(--accent);
  font: 700 .64rem/1.2 var(--utility); letter-spacing: .12em;
  text-transform: uppercase;
}
.screen-heading { max-width: 48rem; margin-bottom: 1.45rem; }
.screen-heading h1 { margin: .35rem 0 .55rem; }
.screen-heading p { margin: 0; color: var(--muted); font-size: .96rem; }

h2.sect {
  display: flex; align-items: center; gap: .75rem;
  margin: 2.15rem 0 .75rem; color: var(--muted);
  font: 700 .67rem/1 var(--utility); letter-spacing: .14em;
}
h2.sect::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* Cards and course overview. */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.035);
}
.progresscard {
  position: relative; overflow: hidden; padding: 1.15rem 1.25rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
  border-top: 3px solid var(--accent); box-shadow: var(--shadow);
}
.progresscard .eyebrow { margin-bottom: .8rem; }
.progresscard .t { font: 650 1.15rem/1.2 var(--display); letter-spacing: .015em; }
.progresscard .s { display: inline-block; margin-top: .25rem; }
.progresscard .bignum {
  color: var(--accent); font: 700 clamp(2rem, 6vw, 3rem)/1 var(--utility);
  letter-spacing: -.07em;
}
.progress { height: 6px; background: var(--panel2); border: 1px solid var(--line); }
.progress i { background: var(--accent); }
.resume { border-left: 3px solid var(--accent); transition: transform .2s ease, border-color .2s ease; }
.resume:hover { transform: translateX(3px); border-color: var(--accent); }

.chap { position: relative; padding: 0; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.chap:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); transform: translateY(-1px); }
.chap::before {
  content: attr(data-seq); position: absolute; top: 1rem; left: 1rem; z-index: 1;
  color: var(--accent); font: 700 .64rem/1 var(--utility); letter-spacing: .08em;
}
.chaphead {
  position: relative; min-height: 5.05rem; gap: .85rem;
  padding: .9rem 2.5rem .9rem 3.65rem; border-radius: 0;
}
.chaphead:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.chaphead .t { font: 650 1rem/1.25 var(--display); letter-spacing: .01em; }
.chaphead .s { display: inline-block; margin-top: .25rem; font-size: .76rem; }
.chaphead .chev, .chev {
  position: absolute; right: 1.1rem; color: var(--accent); font-size: 1.5rem;
}
.tick {
  width: 2.1rem; height: 2.1rem; border-radius: 4px;
  background: var(--panel2); font-family: var(--utility); font-size: .65rem;
}
.tick.done { border-radius: 4px; }
.chapbody { padding: 0 1rem .8rem 3.65rem; }
.topicrow { min-height: 44px; padding: .65rem .15rem; }

/* Tool and trainer cards. */
.tools { gap: .65rem; }
.tool {
  position: relative; min-height: 4.7rem; gap: .9rem; overflow: hidden;
  background: var(--panel); border-color: var(--line); border-radius: var(--radius);
  padding: .9rem 2.8rem .9rem .9rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.tool:hover {
  transform: translateY(-2px); background: var(--elevated);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  box-shadow: var(--shadow);
}
.tool .ic {
  width: 2.65rem; height: 2.65rem; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.tool .ic .ui-icon { width: 1.25rem; height: 1.25rem; }
.tool strong { font: 650 .98rem/1.2 var(--display); letter-spacing: .01em; }
.tool em { margin-top: .22rem; line-height: 1.4; }
.tool-kicker { margin-bottom: .28rem; font-size: .55rem; }
.tool-arrow { position: absolute; right: 1rem; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.tool:hover .tool-arrow { transform: translateX(3px); color: var(--accent); }
.trainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trainer-card { min-height: 6.4rem; padding-left: 1.05rem; }
.trainer-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--trainer-accent, var(--accent));
}
[data-trainer="elec"] { --trainer-accent: #f2c94c; }
[data-trainer="mcdu"] { --trainer-accent: #55d890; }
[data-trainer="fuel"] { --trainer-accent: #78d6a3; }
[data-trainer="fma"] { --trainer-accent: #67b7ff; }
[data-trainer="fire"] { --trainer-accent: #ff7777; }
[data-trainer="pneu"] { --trainer-accent: #69d8e8; }
[data-trainer="ptu"] { --trainer-accent: #65a8ff; }
[data-trainer="autoflight"] { --trainer-accent: #61d2ff; }

/* Buttons, forms, quiz and flashcards. */
button, .btn {
  min-height: 44px; padding: .7rem 1rem; border-radius: 5px;
  border-color: var(--line); font-weight: 600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
button:hover, .btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
button:active, .btn:active { transform: translateY(1px) scale(.99); }
button:disabled, .btn[aria-disabled="true"] {
  opacity: .46; cursor: not-allowed; transform: none; box-shadow: none;
}
button.btn-primary:disabled {
  color: var(--muted); background: var(--panel2); border-color: var(--line);
}
.btn-primary {
  color: #04131c; background: #57ccfa; border-color: #75d8ff;
  box-shadow: inset 0 -2px 0 rgba(0, 55, 85, .25);
}
.btn-primary:hover { background: #77d9ff; border-color: #a2e6ff; }
select, input[type=text] {
  min-height: 44px; background: var(--panel2); border-color: var(--line);
  border-radius: 5px;
}
.q { font: 650 1.2rem/1.45 var(--display); }
.opt { min-height: 3.25rem; align-items: center; padding: .8rem; }
.opt .k { border-radius: 4px; font-family: var(--utility); }
.feedback { padding: .8rem 1rem; background: var(--panel); border-radius: 0 5px 5px 0; }
.fc {
  min-height: 18rem; border-top: 3px solid var(--accent); cursor: pointer;
  box-shadow: var(--shadow);
}
.fc .side { max-width: 36rem; font: 650 1.35rem/1.5 var(--display); }
.fc .hint { font-family: var(--utility); text-transform: uppercase; letter-spacing: .08em; }

/* Long-form technical material. */
.lesson {
  max-width: 52rem; margin: 0 auto; padding: clamp(1.1rem, 3vw, 2rem);
  background: var(--panel); border-color: var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lesson h1 { font-size: clamp(1.65rem, 4vw, 2.25rem); }
.lesson h2 {
  margin-top: 2.2rem; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line); font-size: 1.35rem;
}
.lesson h2::before { content: "// "; color: var(--accent); font-family: var(--utility); }
.lesson h3 { margin-top: 1.65rem; font-size: 1.08rem; }
.lesson p, .lesson li { max-width: 72ch; }
.lesson table { border-radius: 5px; }
.lesson th {
  background: var(--panel2); color: var(--accent);
  font: 700 .72rem/1.25 var(--utility); letter-spacing: .06em;
  text-transform: uppercase;
}
.lesson th, .lesson td { padding: .55rem .65rem; }
.lesson blockquote {
  margin: 1rem 0; padding: .75rem 1rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left-width: 4px; border-radius: 0 5px 5px 0;
}
.lesson .notes { border: 1px solid var(--line); }
.cite { min-height: 24px; padding: .12rem .45rem; font-family: var(--utility); }
.memory-item, .limitation { padding: .85rem 1rem; }

/* The trainer index opens into a dedicated dark instrument environment. */
.trainer-index { max-width: 64rem; margin: 0 auto; }
.trainer-page {
  --bg: #071018; --panel: #0c1821; --panel2: #111f2b; --elevated: #172a37;
  --ink: #edf7fb; --muted: #91a7b5; --line: #294050;
  --accent: var(--trainer-accent, #46c7ff); --ok: #62d897;
  --bad: #ff7373; --warn: #ffc15b;
  max-width: 74rem; margin: 0 auto; color: var(--ink);
  padding: clamp(.8rem, 2.5vw, 1.5rem); background: #071018;
  border: 1px solid #213542; border-top: 3px solid var(--trainer-accent, #46c7ff);
  border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.trainer-page .afbleed { width: auto; left: auto; margin-left: 0; }
.trainer-page .aftrainer { padding-inline: 0; }
.trainer-back { margin-bottom: 1.2rem; }
.trainer-back a {
  min-height: 44px; display: inline-flex; align-items: center; gap: .45rem;
  color: #9bb1be; font: 650 .75rem/1 var(--display); text-transform: uppercase;
  letter-spacing: .05em;
}
.trainer-back a:hover { color: var(--accent); }
.trainer-head {
  position: relative; padding: 1rem 1.1rem 1.1rem;
  background: #0c1821; border: 1px solid #294050; border-left: 4px solid var(--trainer-accent, #46c7ff);
  border-radius: 5px; margin-bottom: 1rem;
}
.trainer-head h1 { margin: .35rem 0 .35rem; color: #edf7fb; }
.trainer-head > p { margin: 0; color: #9bb1be; }
.trainer-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.trainer-legend span {
  padding: .26rem .48rem; color: #a9bdc8; background: #111f2b; border: 1px solid #294050;
  border-radius: 3px; font: 600 .58rem/1 var(--utility); letter-spacing: .06em;
  text-transform: uppercase;
}
.trainer-legend i {
  display: inline-block; width: .42rem; height: .42rem; margin-right: .35rem;
  border-radius: 50%; background: #62d897; box-shadow: 0 0 0 3px rgba(98,216,151,.12);
}
.trainer-page .widget {
  margin: 1rem 0; padding: clamp(.75rem, 2vw, 1.25rem);
  background: #0c1821; border-color: #294050; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}
.trainer-page .wtitle {
  display: flex; align-items: center; gap: .55rem; color: #9bb1be;
  font-family: var(--utility); font-size: .63rem;
}
.trainer-page .wtitle::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--trainer-accent, #46c7ff);
}
.trainer-page .schem {
  padding: .45rem; background: #091219; border: 1px solid #203543; border-radius: 4px;
}
.trainer-page .schem rect { fill: #0e1c26; stroke: #37505f; }
.trainer-page .schem .lbl, .trainer-page .schem .bl { fill: #edf7fb; }
.trainer-page .schem .psi, .trainer-page .schem .bl2 { fill: #8fa5b3; }
.trainer-page .schem .pipe, .trainer-page .schem .w { stroke: #37505f; }
.trainer-page .schem .pipe.live { stroke: var(--trainer-accent, #46c7ff); }
.trainer-page .pbrow { gap: .55rem; }
.trainer-page .apb { min-height: 4.35rem; border-color: #05090c; box-shadow: 0 3px 0 #05090c; }
.trainer-page .apb .pbl { color: #c6d5dd; background: #152631; font-size: .66rem; }
.trainer-page .ctl { gap: .5rem; }
.trainer-page .ctl button {
  min-height: 44px; padding: .58rem .75rem; border-radius: 4px;
  background: #132431; border-color: #37505f; color: #b1c4ce;
  font: 650 .69rem/1.1 var(--utility); letter-spacing: .035em;
}
.trainer-page .ctl button:hover { color: #edf7fb; border-color: var(--trainer-accent, #46c7ff); }
.trainer-page .ctl button.on {
  color: #06131a; background: var(--trainer-accent, #46c7ff);
  border-color: var(--trainer-accent, #46c7ff); box-shadow: inset 0 -2px rgba(0,0,0,.2);
}
.trainer-page .failrow {
  margin-top: 1rem; padding: .75rem; background: #0a141c; border: 1px solid #2b3f4c;
  border-left: 3px solid #ffc15b; border-radius: 4px;
}
.trainer-page .faillbl { color: #ffc15b; font-family: var(--utility); }
.trainer-page .wstate {
  padding: .8rem .9rem; background: #0a141c; border: 1px solid #294050;
  border-left: 3px solid var(--trainer-accent, #46c7ff); border-radius: 0 4px 4px 0;
}
.trainer-page .wnote, .trainer-page .whint { color: #9db0bb; }
.trainer-page .mcdu-unit { border: 1px solid #304857; border-radius: 8px; box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.trainer-page .fma { border-color: #3a5260; box-shadow: inset 0 0 20px rgba(63, 225, 138, .025); }
.trainer-page .afpanel, .trainer-page .afstrip, .trainer-page .afscenario {
  border-color: #294050; background: #0c1821;
}
.trainer-page .trainer-lesson {
  width: auto; margin: 1.2rem 0 .25rem auto; display: flex; align-items: center;
  justify-content: center; gap: .5rem; color: #edf7fb; background: #132431;
}
.trainer-page .trainer-lesson .ui-icon { width: 1rem; height: 1rem; }

footer {
  display: flex; align-items: flex-start; gap: .8rem; max-width: 68rem;
  margin: 2.5rem auto 0; padding: 1.2rem 1rem calc(2rem + env(safe-area-inset-bottom));
  border-color: var(--line); color: var(--muted);
}
footer p { font-size: .75rem; }
.footer-flag {
  flex: none; padding: .25rem .42rem; color: var(--warn); border: 1px solid var(--warn);
  border-radius: 3px; font: 700 .54rem/1 var(--utility); letter-spacing: .08em;
}

/* Responsive contracts: two trainer columns on tablet/desktop, five primary
   destinations in a thumb-reachable bottom bar on phones. ECAM remains in the
   home Tools section, so it is accessible without overloading mobile nav. */
@media (max-width: 52rem) {
  header, .appbar { min-height: 3.8rem; }
  header, .appbar { gap: .65rem; }
  .brand .who strong { font-size: .86rem; }
  .brand .who em { display: none; }
  .topnav a { gap: .28rem; padding-inline: .42rem; font-size: .66rem; }
  .status-ribbon { top: 3.8rem; grid-template-columns: 1fr .7fr 1.2fr; }
  .status-ribbon span:nth-child(2), .status-ribbon span:nth-child(3) { display: none; }
  .trainer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 38rem) {
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  header, .appbar {
    position: sticky; min-height: 3.65rem; padding: max(.55rem, env(safe-area-inset-top)) .7rem .55rem;
  }
  .brand .mark { width: 3.2rem; height: 2rem; font-size: .82rem; }
  .brand .who strong { font-size: .84rem; }
  .brand .who em { display: none; }
  .status-ribbon { top: 3.65rem; grid-template-columns: 1fr .75fr 1.15fr; }
  .status-ribbon span { padding: .36rem .55rem; font-size: .58rem; }
  .status-ribbon b { font-size: .47rem; }

  .topnav {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    width: 100%; height: calc(4.15rem + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    padding: .3rem .35rem env(safe-area-inset-bottom);
    color: #edf7fb; background: #071018; border-top: 1px solid #294050;
    box-shadow: 0 -8px 24px rgba(0,0,0,.24);
  }
  .topnav a {
    min-width: 0; min-height: 3.45rem; padding: .35rem .1rem;
    flex-direction: column; justify-content: center; gap: .25rem;
    border: 0; border-radius: 3px; font-size: .56rem;
  }
  .topnav a[data-nav="ecam"] { display: none; }
  .topnav a.on { border: 0; box-shadow: inset 0 2px 0 #46c7ff; }
  .topnav svg { width: 1.15rem; height: 1.15rem; }

  main { min-height: calc(100vh - 11rem); padding: 1.1rem .72rem .5rem; }
  h1 { font-size: 1.7rem; }
  .progresscard { padding: 1rem; }
  .progresscard .topic { align-items: flex-end; }
  .progresscard .bignum { font-size: 2.1rem; }
  .chaphead { padding-left: 3.25rem; padding-right: 2.1rem; }
  .chap::before { left: .8rem; }
  .chapbody { padding-left: 1rem; }
  .tick { width: 1.9rem; height: 1.9rem; }
  .tool { min-height: 4.85rem; }
  .trainer-card { min-height: 6rem; }
  .row { gap: .55rem; }
  .row > * { min-width: 0; }
  .lesson { padding: 1rem; border-left: 0; border-right: 0; border-radius: 4px; }
  .lesson table { margin-inline: -.2rem; width: calc(100% + .4rem); }
  .trainer-page { margin-inline: -.15rem; padding: .65rem; border-left: 0; border-right: 0; }
  .trainer-head { padding: .85rem; }
  .trainer-legend { gap: .35rem; }
  .trainer-page .widget { padding: .6rem; }
  .trainer-page .pbrow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  footer { margin-bottom: 0; padding-inline: .8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  #view > * { animation: interface-enter .28s cubic-bezier(.2,.75,.25,1) both; }
}
@keyframes interface-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.flagthanks { font-size: .8rem; color: var(--ok); }

/* ===========================================================================
 * Autoflight trainer, PHASE 2 (app/autoflight.js) — takeoff speeds panel,
 * flap lever/VFE/retraction, airport plan view + ILS. Appended block, new
 * classes only. The two rules below intentionally re-declare `.afwide` and
 * its 1050px media query from the block above — later same-specificity CSS
 * wins by cascade order, so this changes the grid layout (3 content columns
 * instead of 2, to fit the plan view) without editing either existing rule's
 * own text, per the build spec ("APPEND ... edit no existing rule").
 * ======================================================================== */

.afwide {
  grid-template-columns: 11rem 15rem 1fr 13rem;
  grid-template-areas:
    "fma   fma    fma   fma"
    "quad  strip  plan  log"
    "quad  fcu    plan  log"
    "quad  speeds plan  transport"
    "quad  flaps  plan  transport";
}
@media (max-width: 1050px) {
  .afwide { grid-template-columns: 9rem 12.5rem 1fr 11rem; }
}

.afarea-speeds, .afarea-flaps {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .55rem .7rem; font-size: .82rem;
}
.afarea-speeds { grid-area: speeds; }
.afarea-flaps { grid-area: flaps; }
.afarea-plan {
  grid-area: plan; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .7rem;
}

.afpanelhead {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: .35rem; font-weight: 700;
}

/* Small number inputs for V1/VR/V2/weight/F/S/THR RED/ACC ALT — entering
   them is itself the drill, per the build spec. */
.afspeedrow {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; flex-wrap: wrap;
}
.afspeedrow label { flex: 0 0 auto; min-width: 4.6rem; color: var(--muted); font-size: .76rem; }
.afspeedrow input[type=number] {
  width: 4.4rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #0a0f0a; color: #3ecf8e; border: 1px solid #2a2f36; border-radius: 4px;
  padding: .2rem .4rem; font-size: .88rem;
}
.afreadout { margin: .3rem 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.afformula { font-size: .74rem; color: var(--muted); margin-bottom: .4rem; }
.afnote { font-size: .76rem; color: var(--muted); margin: .35rem 0; }
.afnote-inline { font-size: .68rem; color: var(--muted); font-style: italic; }

/* Provenance tags — the trainer's four-way honesty distinction, made visible
   on every new number: sourced / computed / entered / illustrative/invented. */
.afprov {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .05rem .35rem; border-radius: 3px; margin-left: .2rem;
  border: 1px solid currentColor;
}
.afprov.entered { color: #6aa9ff; }
.afprov.computed { color: #3ecf8e; }
.afprov.sourced { color: #e8eef6; }
.afprov.invented, .afprov.illustrative { color: var(--warn); }

/* A busted limitation is a fact, not a colour — the words say so too. */
.afvfebust {
  color: var(--warn); font-weight: 700; margin-top: .2rem;
  border-left: 3px solid var(--warn); padding-left: .5rem;
}

.afflaplever { width: 6.5rem; }

/* Plan view — top-down SVG in nm, origin at the ILS runway threshold. */
.afplan { width: 100%; height: auto; max-height: 22rem; background: #0a0f0a;
  border: 1px solid #2a2f36; border-radius: 6px; }
.afring { fill: none; stroke: #2a3038; stroke-width: .04; stroke-dasharray: .3 .3; }
.afcenterline { stroke: #3a424c; stroke-width: .03; stroke-dasharray: .5 .3; }
.afrwy { stroke: #8b95a1; stroke-width: .25; stroke-linecap: butt; }
.afacsym { fill: #3ecf8e; stroke: #0b0d10; stroke-width: .04; }
.afplancaption { font-size: .7rem; color: var(--muted); margin: .4rem 0; }

.afilstune { margin-top: .4rem; }
.aftunerow { font-size: .82rem; margin: .15rem 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.afilsind { margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.afilsrow { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; margin: .15rem 0; }

@media (max-width: 30rem) { .afplan { max-height: 14rem; } }

/* ---------- electrical: AC buses in yellow ----------
   AC and DC read apart at a glance, which is the whole point of a schematic.
   A deliberately DISTINCT yellow, not the palette's --warn: amber is what the
   fuel, hydraulic and fire widgets use for .leaking, and a healthy AC bus drawn
   in fault-amber would read as a fault to anyone arriving from those.
   This is a legibility choice in a simplified schematic, NOT a claim about the
   ECAM ELEC page's own colour convention. */
:root { --acbus: #e8c547; }
@media (prefers-color-scheme: light) { :root { --acbus: #8a6a00; } }

/* :not(.dead) so an unpowered bus keeps the dashed-grey treatment — losing a
   bus must still look like losing it. */
.schem g.nd#e-ac1:not(.dead) rect,
.schem g.nd#e-ac2:not(.dead) rect,
.schem g.nd#e-acess:not(.dead) rect {
  fill: color-mix(in srgb, var(--acbus) 16%, transparent);
  stroke: var(--acbus);
}
.schem g.nd#e-ac1:not(.dead) .bl,
.schem g.nd#e-ac2:not(.dead) .bl,
.schem g.nd#e-acess:not(.dead) .bl { fill: var(--acbus); }

/* ================= HYDRAULICS FULL-SCREEN TRAINER =========================
   Three columns in flight-deck order: what you touch, what happens, what it
   tells you. Designed for 1920x1080; below 1100px it says so rather than
   folding into an unusable stack — the phone keeps the compact widget.
   The panel greys are drawn to match the 40VU panel at FCOM p1903. */
:root {
  --hyd-green: #35d68a; --hyd-blue: #4ea3ff; --hyd-yellow: #e8c547;
  --hyd-amber: #e8a33d; --hyd-deck: #0b1016; --hyd-bay: #0f151d;
  --hyd-edge: #1d2733; --hyd-face: #575b57;
}
.hydtrainer {
  background: var(--hyd-deck); border: 1px solid var(--hyd-edge); border-radius: 10px;
  overflow: hidden; color: #e6ecf4;
  font: 400 15px/1.5 "IBM Plex Sans", system-ui, sans-serif;
}
.htop {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem .9rem; background: #111822; border-bottom: 1px solid #223041;
}
.htop .hsys { font: 700 1rem/1 "Barlow Semi Condensed", sans-serif;
  letter-spacing: .09em; text-transform: uppercase; }
.htop .hcrumb { font: 500 .72rem/1 ui-monospace, Menlo, monospace; color: #8b9aac; }
.htop .hsp { margin-left: auto; display: flex; gap: .4rem; }
.hchip {
  font: 500 .74rem/1 ui-monospace, Menlo, monospace; color: #8b9aac;
  border: 1px solid #2b3a4c; background: #0d141c; padding: .36rem .62rem;
  border-radius: 5px; cursor: pointer;
}
.hchip:hover { border-color: var(--hyd-blue); color: #dfe7ef; }

.hcols { display: grid; grid-template-columns: 340px minmax(0, 1fr) 340px; }
.hbay { padding: .8rem; border-right: 1px solid var(--hyd-edge); min-width: 0; }
.hbay:last-child { border-right: none; }
.hlabel {
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem;
  font: 600 .66rem/1 ui-monospace, Menlo, monospace; letter-spacing: .13em;
  text-transform: uppercase; color: #8b9aac;
}
.hlabel em { font-style: normal; color: #5b6b7e; letter-spacing: .02em;
  text-transform: none; font-size: .72rem; }

/* ---- the 40VU panel ---- */
.ohpanel {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  background: linear-gradient(180deg, #62665f, #4d514b);
  border: 1px solid #3a3e38; border-radius: 6px; padding: .6rem 1.5rem .6rem .6rem;
}
.ohtop { display: flex; gap: .5rem; align-items: baseline; }
.ohsys {
  flex: 1; text-align: center; font: 700 .68rem/1 "Barlow Semi Condensed", sans-serif;
  letter-spacing: .16em; color: #1a1c18;
}
.ohcode { font: 600 .58rem/1 ui-monospace, monospace; color: #2a2d26; }
.ohside {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font: 700 .68rem/1 "Barlow Semi Condensed", sans-serif;
  letter-spacing: .22em; color: #1a1c18;
}
.ohrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.hpb {
  position: relative; background: linear-gradient(180deg, #3e413c, #303330);
  border: 1px solid #22251f; border-radius: 4px; padding: .38rem .25rem .3rem;
  text-align: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.hpb:hover { border-color: #6b7a52; }
.hpb:focus-visible { outline: 2px solid var(--hyd-blue); outline-offset: 2px; }
.hpb .pblegend {
  display: block; font: 600 .58rem/1.25 "Barlow Semi Condensed", sans-serif;
  letter-spacing: .07em; color: #cdd0c9; min-height: 2.4em;
}
.hpb .lamp {
  display: block; margin-top: .22rem; border-radius: 2px;
  font: 700 .55rem/1.6 "Barlow Semi Condensed", sans-serif; letter-spacing: .12em;
  background: #1a1c19; color: #40443e;
}
.hpb .lamp.fault.lit { background: #4a3310; color: #ffb43c; box-shadow: 0 0 7px rgba(255,180,60,.45); }
.hpb .lamp.lower.lit { background: #d8d8cc; color: #16180f; }
.hpb .vert {
  position: absolute; right: -.62rem; top: 50%; transform: translateY(-50%);
  font: 700 .44rem/1.05 "Barlow Semi Condensed", sans-serif; color: #2a2d26; letter-spacing: .04em;
}
.hpb.guarded .guard {
  position: absolute; inset: -2px -2px auto -2px; height: 7px;
  border: 1px solid #23261f; border-bottom: none;
  background: repeating-linear-gradient(90deg, #6d7166 0 3px, #55594f 3px 6px);
  border-radius: 4px 4px 0 0;
}
.psrc { margin: .5rem 0 0; font-size: .74rem; color: #6d7d8e; line-height: 1.45; }
.psrc strong { color: #9fb0c2; font-weight: 500; }

/* ---- aircraft state + failures ---- */
.hstates { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.hstate {
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
  background: #0d141c; border: 1px solid #22303f; border-radius: 5px;
  padding: .34rem .5rem; cursor: pointer; font: inherit;
}
.hstate:hover { border-color: var(--hyd-blue); }
.hstate .k { font: 600 .56rem/1 ui-monospace, monospace; letter-spacing: .1em; color: #5b6b7e; }
.hstate .v { font: 500 .76rem/1.3 "IBM Plex Sans", sans-serif; color: #c2ceda; }
.hfails { display: flex; flex-wrap: wrap; gap: .3rem; }
.hfail {
  font: 500 .7rem/1 "IBM Plex Sans", sans-serif; color: #8b9aac;
  background: #0d141c; border: 1px solid #22303f; border-radius: 4px;
  padding: .3rem .48rem; cursor: pointer;
}
.hfail:hover { border-color: var(--hyd-amber); color: #dfe7ef; }
.hfail.on { background: #3a2a10; border-color: var(--hyd-amber); color: #ffc36b; }

/* ---- schematic ---- */
.hschemwrap { background: #080d13; border: 1px solid var(--hyd-edge); border-radius: 6px; padding: .5rem; }
.hschem { display: block; width: 100%; height: auto; }

/* ---- ECAM ---- */
.ecampage { background: #04070a; border: 1px solid var(--hyd-edge); border-radius: 6px;
  padding: .7rem; font-family: ui-monospace, Menlo, monospace; }
.etitle { text-align: center; color: #dfe7ef; font-size: .74rem; letter-spacing: .2em;
  font-weight: 600; padding-bottom: .5rem; border-bottom: 1px solid #16202b; margin-bottom: .6rem; }
.ecols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: center; }
.ecol .enm { font-size: .6rem; letter-spacing: .1em; font-weight: 600; color: #19d45f; }
.ecol .epsi { font-size: 1.05rem; font-weight: 600; color: #19d45f;
  font-variant-numeric: tabular-nums; margin-top: .15rem; }
.ecol.lo .epsi, .ecol.lo .enm { color: var(--hyd-amber); }
.ersvr { margin: .35rem auto 0; width: 22px; height: 34px; border: 1.5px solid #19d45f;
  border-radius: 2px; position: relative; }
.ersvr.bad { border-color: var(--hyd-amber); }
.ersvr i { position: absolute; left: 2px; right: 2px; bottom: 2px; background: #19d45f;
  opacity: .5; display: block; }
.ersvr.bad i { background: var(--hyd-amber); }
.eflag { font-size: .56rem; letter-spacing: .06em; color: var(--hyd-amber); margin-top: .2rem; }
.eptu { text-align: center; font-size: .7rem; color: #9fb0c2; margin-top: .55rem;
  padding-top: .5rem; border-top: 1px solid #16202b; letter-spacing: .08em; }
.esec { margin-top: .6rem; border-top: 1px solid #16202b; padding-top: .5rem; }
.ehd { font-size: .58rem; letter-spacing: .15em; color: #5d6b78; margin-bottom: .3rem; }
.eal { font-size: .72rem; line-height: 1.7; color: var(--hyd-amber); }
.ememo { font-size: .72rem; line-height: 1.7; color: #19d45f; }
.enone { font-size: .72rem; line-height: 1.7; color: #4d5c6c; }

/* ---- why strip ---- */
.hwhy {
  border-top: 1px solid var(--hyd-edge); background: #0d141c;
  padding: .8rem 1rem; display: flex; gap: 1rem; align-items: flex-start;
}
.hwhy .tag {
  flex: none; font: 600 .62rem/1.6 ui-monospace, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hyd-green); border: 1px solid var(--hyd-green);
  border-radius: 3px; padding: 0 .4rem;
}
.hwhy .tag.idle { color: #5d6b78; border-color: #2b3a4c; }
.hwhy p { margin: 0; font-size: .88rem; color: #c2ceda; flex: 1; }
.hwhy .cite { color: #6d7d8e; font: 500 .74rem/1.6 ui-monospace, monospace; white-space: nowrap; }
.hhist { margin: 0; padding: .5rem 1rem .8rem 2.4rem; background: #0d141c;
  border-top: 1px solid #141d27; list-style: decimal; }
.hhist li { font-size: .78rem; color: #7f8fa0; line-height: 1.75; }
.hhist .cite { color: #4d5c6c; font-family: ui-monospace, monospace; font-size: .72rem; }

/* ---- too narrow ---- */
.hydnarrow { display: none; }
@media (max-width: 1100px) {
  .hydtrainer { display: none; }
  .hydnarrow {
    display: block; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem;
  }
}

/* Full-bleed shell for a fullscreen trainer route. */
.trainerfull { max-width: none; margin: 0 -1rem; }
@media (max-width: 40rem) { .trainerfull { margin: 0 -.7rem; } }

/* RAT MAN ON is drawn larger than its neighbours — that much the p1903 diagram
   does show. It is NOT drawn guarded: the FCOM text never calls it guarded and
   the note's GAPS section is explicit that reading a guard off the line art is
   an observation, not a fact. */
.hpb.big { grid-column: span 1; background: linear-gradient(180deg, #45483f, #35382f); }
.hpb.big .pblegend { font-size: .63rem; }

/* ---- 40VU panel drawn as a mimic, full width ----
   The real panel is a wide horizontal strip with the hydraulic schematic
   engraved on its face and the switches sitting inside it. It cannot live in a
   340px column without the switches becoming unreadable, so it gets its own
   band across the top — which is also where it sits in the aircraft. */
.hpanelbar { padding: .8rem .8rem .2rem; border-bottom: 1px solid var(--hyd-edge); }
.ohsvg { display: block; width: 100%; height: auto; max-height: 300px; }
.ohsvg .panelface { fill: #5d615b; stroke: #3a3e38; stroke-width: 1.5; }
.ohsvg .edge { stroke: #43473f; stroke-width: 2.5; fill: none; }
.ohsvg .bus, .ohsvg .riser { stroke: #14160f; stroke-width: 7; fill: none; stroke-linecap: butt; }
.ohsvg .riser.hop { stroke-width: 7; }
.ohsvg .flow { fill: #14160f; }
.ohsvg .ptubox { fill: none; stroke: #14160f; stroke-width: 3.5; }
.ohsvg .ptutxt { fill: #14160f; font: 700 19px "Barlow Semi Condensed", sans-serif;
  text-anchor: middle; letter-spacing: 1px; }
.ohsvg .rlabel { fill: #14160f; font: 700 19px "Barlow Semi Condensed", sans-serif; letter-spacing: 1.5px; }
.ohsvg .vu { fill: #2b2e26; font: 600 15px ui-monospace, monospace; text-anchor: middle; }
.ohsvg .hydlbl { fill: #14160f; font: 700 20px "Barlow Semi Condensed", sans-serif; text-anchor: middle; }
.ohsvg .pbcap { fill: #14160f; font: 700 15px "Barlow Semi Condensed", sans-serif;
  text-anchor: middle; letter-spacing: .5px; }
.ohsvg .pbbody { fill: #3c3f39; stroke: #14160f; stroke-width: 3; }
.ohsvg .pbwin { fill: #1c1e1a; stroke: #0d0f0b; stroke-width: 1.5; }
.ohsvg .pbwin.lit { fill: #d9dbcf; }
.ohsvg .pbwin.lit.fault { fill: #4a3310; }
.ohsvg .pbtxt { fill: #4a4d46; font: 700 14px "Barlow Semi Condensed", sans-serif;
  text-anchor: middle; letter-spacing: 1px; }
.ohsvg .pbtxt.lit { fill: #14160f; }
.ohsvg .pbtxt.lit.fault { fill: #ffb43c; }
.ohsvg .pbauto { fill: #14160f; font: 700 12px "Barlow Semi Condensed", sans-serif; text-anchor: middle; }
.ohsvg .ratouter { fill: #4a4d45; stroke: #14160f; stroke-width: 3.5; }
.ohsvg .ratfix { fill: none; stroke: #14160f; stroke-width: 2.5; }
.ohsvg .rattab { fill: #3c3f39; stroke: #14160f; stroke-width: 2.5; }
.ohsvg .ratout { fill: #ffb43c; font: 700 20px "Barlow Semi Condensed", sans-serif;
  text-anchor: middle; letter-spacing: 1px; }
.ohsvg .pbg { cursor: pointer; }
.ohsvg .pbg:hover .pbbody, .ohsvg .pbg:hover .ratouter { stroke: #8fa06a; }
.ohsvg .pbg:focus-visible { outline: 2px solid var(--hyd-blue); }

.ohsvg .captab { fill: none; stroke: #14160f; stroke-width: 2.5; }

/* ---- a fullscreen trainer gets the whole window ----
   The reading layout caps width three times over — main at 68rem, main:has()
   at 78rem, .trainer-page at 74rem — which is right for prose and wrong for a
   trainer that has an overhead panel, a schematic and an ECAM page to show at
   once. On a 1600px screen those caps threw away 200px a side. Only pages
   carrying a .fullbleed trainer opt out; every other trainer keeps the
   comfortable reading measure. */
main:has(.trainer-page.fullbleed) {
  width: 100%; max-width: none;
  padding-inline: clamp(.5rem, 1.2vw, 1.1rem);
}
.trainer-page.fullbleed { max-width: none; }
/* Beyond about 2200px the panel art stops gaining anything and the eye has too
   far to travel between the three columns, so stop there rather than at the
   window edge. */
.trainer-page.fullbleed > .hydtrainer,
.trainer-page.fullbleed > *:not(.trainer-back) { max-width: 2200px; margin-inline: auto; }