:root { --bg:#fff; --fg:#1a1a1a; --muted:#6b6b6b; --line:#e4e4e4; --soft:#f6f6f6; --accent:#2457d6;
  --right:#1a7f37; --wrong:#cf222e; --warn-bg:#fff1b8; --warn-fg:#9a7400; color-scheme:light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#121212; --fg:#e8e8e8; --muted:#9a9a9a; --line:#2c2c2c; --soft:#1b1b1b;
    --accent:#7aa2ff; --right:#3fb950; --wrong:#f85149; --warn-bg:#4a3c00; --warn-fg:#e3b341; color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#121212; --fg:#e8e8e8; --muted:#9a9a9a; --line:#2c2c2c; --soft:#1b1b1b;
  --accent:#7aa2ff; --right:#3fb950; --wrong:#f85149; --warn-bg:#4a3c00; --warn-fg:#e3b341; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wrap { max-width:760px; margin:0 auto; padding-inline:16px; padding-block:32px 80px; }
.wrap img, .wrap figure { max-width:100%; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.site { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 16px;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:28px; }
header.site a.home { color:var(--fg); font-weight:600; }
header.site span { color:var(--muted); font-size:14px; }
h1 { font-size:28px; line-height:1.25; margin:0 0 4px; }
h2 { font-size:21px; margin:36px 0 8px; padding-top:8px; border-top:1px solid var(--line); }
h3 { font-size:15px; color:var(--muted); font-weight:600; margin:24px 0 4px; }
ul, ol { padding-left:22px; } li { margin:3px 0; }
blockquote { margin:16px 0; padding:10px 16px; background:var(--soft);
  border-left:3px solid var(--line); border-radius:4px; }
blockquote p:first-child { margin-top:0; } blockquote p:last-child { margin-bottom:0; }
code { background:var(--soft); padding:1px 5px; border-radius:3px; font-size:14px; }
hr { border:0; border-top:2px solid var(--fg); margin:48px 0 8px; }
.check { color:var(--muted); font-style:italic; }
.meta { color:var(--muted); margin:0 0 20px; }
.toc { background:var(--soft); border-radius:6px; padding:12px 16px; margin:0 0 8px; font-size:15px; }
.toc ul { margin:4px 0 0; } .toc .l3 { margin-left:16px; font-size:14px; }
.days { list-style:none; padding:0; }
.days li { border-bottom:1px solid var(--line); padding:14px 0; margin:0; }
.days .date { font-weight:600; }
h2.day { font-size:18px; margin:28px 0 0; border-top:0; padding-top:0; }
h2.day a { color:var(--fg); } .days .sub { color:var(--muted); font-size:14px; }
details.card { margin:8px 0; padding:10px 14px; border:1px solid var(--line); border-radius:6px; }
details.card summary { color:var(--fg); font-weight:500; }
details.card div { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); }
details.raw { margin-top:40px; border-top:1px solid var(--line); padding-top:12px; }
summary { cursor:pointer; color:var(--muted); }
.transcript { font:13px/1.55 ui-monospace, Menlo, monospace; white-space:pre-wrap; color:var(--muted); }
.live { font-size:13px; color:var(--muted); }
.live::before { content:"● "; color:var(--accent); }
.empty { color:var(--muted); }
header.site a.syl-link { font-size:14px; font-weight:600; }
header.site a.home { display:inline-flex; align-items:center; gap:10px; }
img.brand { border-radius:7px; display:block; }
.bar { display:inline-block; width:120px; height:6px; background:var(--line); border-radius:3px; overflow:hidden; vertical-align:middle; }
.bar i { display:block; height:100%; background:var(--accent); }
.pct { font-weight:600; margin:0 8px 0 6px; font-variant-numeric:tabular-nums; }
.count { color:var(--muted); font-size:14px; font-weight:400; font-variant-numeric:tabular-nums; }
.syl-card { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:12px 16px; margin:4px 0 20px;
  border:1px solid var(--line); border-radius:6px; color:var(--fg); }
.syl-card:hover { border-color:var(--accent); text-decoration:none; }
.syl-title { font-weight:600; margin-right:6px; }
.overall { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
details.subject { border-bottom:1px solid var(--line); padding:10px 0; }
details.subject > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
details.subject > summary .sname { font-weight:600; min-width:0; flex:1 1 240px; }
details.subject h3 { color:var(--fg); font-size:15px; margin:18px 0 6px; }
ul.topics { list-style:none; padding:0; margin:0; }
ul.topics li { padding:4px 0 4px 26px; position:relative; }
ul.topics .tick { position:absolute; left:2px; color:var(--muted); }
ul.topics li.done .tick { color:var(--accent); font-weight:700; }
ul.topics .tid { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; margin-right:4px; }
ul.topics .where { font-size:13px; margin-top:2px; }
.ai-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:3px; padding:0 5px; line-height:17px; }
section.ai, blockquote.ai, details.ai { margin:16px 0; padding:12px 16px; background:var(--soft);
  border:0; border-radius:10px; }  /* no line at the front (asked 6 Oct) */
details.open-questions { margin:24px 0 8px; padding:10px 16px; border:1px solid var(--line); border-radius:4px; }
details.open-questions > summary { cursor:pointer; font-weight:600; }
details.open-questions[open] > summary { margin-bottom:6px; }
.app-quiz { margin:12px 0; font-size:15px; }
h2.week { margin:36px 0 4px; padding:0 0 10px; border-top:0; border-bottom:2px solid var(--fg); }
h2.week .week-no { display:block; font-size:22px; font-weight:700; color:var(--fg); }
h2.week .week-dates { display:block; font-size:15px; font-weight:400; color:var(--muted); margin-top:2px; }
details.day-fold { border-bottom:1px solid var(--line); }
details.day-fold > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:12px 0; }
details.day-fold > summary { list-style:none; }
details.day-fold > summary::-webkit-details-marker { display:none; }
details.day-fold > summary .day-name { font-weight:700; font-size:17px; flex:1 1 220px; min-width:0; color:var(--fg); }
details.day-fold > summary .day-name::before { content:"▸"; display:inline-block; width:1.1em; color:var(--muted); transition:transform .15s; }
details.day-fold[open] > summary .day-name::before { transform:rotate(90deg); }
details.class-fold > summary .class-day-date::before { content:"▸"; display:inline-block; width:1.1em; color:var(--muted); }
details.class-fold[open] > summary .class-day-date::before { content:"▾"; }
details.class-fold { border-bottom:0; }
details.class-fold > summary.class-day { cursor:pointer; }
.class-day { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:40px 0 0; padding:12px 16px;
  border:1px solid var(--line); border-left:4px solid var(--fg); border-radius:4px; background:var(--soft); }
.class-day-date { font-weight:700; font-size:17px; flex:1 1 260px; min-width:0; }
.class-day .quiz-link { margin:0; padding:4px 10px; font-size:14px; }
.toc ul ul { margin:2px 0 6px 16px; font-size:14px; }
ul.mock-topics li { padding-left:0; }
h4.mock-ch { font-size:14px; margin:16px 0 4px; color:var(--muted); }
ul.mock-syl { list-style:none; padding:0; margin:0 0 6px; }
ul.mock-syl li { display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line); }
ul.mock-syl .tid { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
ul.mock-syl .ttl { flex:1 1 200px; min-width:0; }
ul.mock-syl .mock-links { flex-basis:100%; font-size:14px; padding-left:0; }
.site-nav { display:flex; gap:4px 2px; flex-wrap:wrap; align-items:center; }  /* room to spare: one row on a computer */
.site-search { position:relative; flex:0 0 100%; max-width:100%; min-width:0; order:3; }
.site-search input { width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--fg); background:var(--soft);
  border:1px solid var(--line); border-radius:8px; padding:11px 14px; }
h2.chapter { font-size:18px; margin:34px 0 8px; }
.subj-bar { margin:4px 0 14px; max-width:360px; }
details.topic-fold { border-bottom:1px solid var(--line); }
.table-wrap { overflow-x:auto; margin:10px 0 14px; }
table.md-table { border-collapse:collapse; width:100%; font-size:15px; line-height:1.5; }
table.md-table th, table.md-table td { text-align:left; vertical-align:top; padding:7px 10px; border-bottom:1px solid var(--line); }
table.md-table th { font-size:13px; color:var(--muted); font-weight:600; border-bottom:2px solid var(--line); }
table.md-table td:first-child { font-weight:600; font-variant-numeric:tabular-nums; min-width:5.5em; }
table.md-table tr:nth-child(even) td { background:var(--soft); }
.instr-intro { background:var(--soft); border-radius:10px; padding:10px 14px; margin:10px 0 16px; font-size:14.5px; line-height:1.55; }
.instr-intro p { margin:6px 0; } .instr-intro ul { margin:4px 0; padding-left:20px; }
.psum { font-size:15px; margin:12px 0; }
details.imp-part { border-top:1px solid var(--line); padding:4px 0; }
details.imp-part > summary { cursor:pointer; font-size:19px; font-weight:700; padding:12px 0; color:var(--fg); }
details.imp { scroll-margin-top:20px; }
.pmap { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; margin:8px 0 22px; }
.ptile { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:2px 8px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); border-left:6px solid var(--line); color:var(--fg); text-decoration:none; background:var(--soft); }
.ptile:hover { text-decoration:none; filter:brightness(1.08); }
.ptile .pcode { font-size:12px; font-weight:800; color:var(--muted); }
.ptile .pname { font-size:14px; font-weight:600; line-height:1.3; }
.ptile .pval { font-size:22px; font-weight:800; grid-row:1 / span 2; grid-column:3; align-self:center; }
.ptile .pmeta { grid-column:1 / span 2; font-size:12px; color:var(--muted); }
.ptile .pbar { grid-column:1 / -1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:6px; }
.ptile .pbar i { display:block; height:100%; background:currentColor; }
.ptile.good { border-left-color:var(--right); } .ptile.good .pval, .ptile.good .pbar { color:var(--right); }
.ptile.mid { border-left-color:var(--warn-fg); } .ptile.mid .pval, .ptile.mid .pbar { color:var(--warn-fg); }
.ptile.low { border-left-color:var(--wrong); } .ptile.low .pval, .ptile.low .pbar { color:var(--wrong); }
.ptile.none .pval { color:var(--muted); }
.ichk-img { display:block; max-width:100%; max-height:260px; margin:8px 0; border:1px solid var(--line); border-radius:8px; background:#fff; }
.ichk-q { margin:8px 0; } .ichk-q summary { cursor:pointer; font-weight:600; font-size:14px; color:var(--accent); }
.ichk-q ol { margin:6px 0; padding-left:24px; } .ichk-q li { margin:3px 0; } .ichk-q li.marked { font-weight:700; }
.ichk { border-bottom:1px solid var(--line); padding:12px 0; } .ichk p { margin:0 0 4px; }
.q[id], .ai-fig[id] { scroll-margin-top:90px; }
.q-target { outline:3px solid var(--accent); outline-offset:4px; border-radius:10px; transition:outline-color 1s; }
a.go-q { font-weight:600; }
/* disputed / conflicting: calm — a thin soft frame, red only for the small markers, text in the normal colour */
.q.disputed { border:1px solid color-mix(in srgb, var(--warn-fg) 45%, transparent); border-left:6px solid var(--warn-fg);
  border-radius:10px; padding:10px 12px; background:color-mix(in srgb, var(--warn-bg) 30%, transparent); }  /* stands out while scrolling */
.disp-banner { background:var(--warn-bg); color:var(--warn-fg); font-size:13px; font-weight:600; border-radius:8px;
  padding:6px 10px; margin:0 0 10px; }
.disp-banner a { color:inherit; text-decoration:underline; }
.q.disputed > p:not(.vnote) { color:var(--warn-fg); }  /* the question text itself, in the same amber */
.disp-note::first-letter { color:var(--warn-fg); }
.disp-note { color:var(--fg); border:1px solid color-mix(in srgb, var(--warn-fg) 45%, transparent); border-left:6px solid var(--warn-fg); border-radius:8px; padding:8px 12px; }
a.disp-link { font-weight:600; }
.menu-instr .badge { font-size:12px; font-weight:700; color:var(--wrong); border:1px solid color-mix(in srgb, var(--wrong) 50%, transparent); border-radius:999px; padding:0 6px; margin-left:3px; }
.menu-instr .badge.ok { color:var(--right); border-color:color-mix(in srgb, var(--right) 50%, transparent); }
.vchks { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:10px 0 6px; }
.vchk { display:inline-flex; align-items:flex-start; gap:8px; max-width:100%; font-size:12.5px; font-weight:600; line-height:1.45;
  padding:5px 10px 5px 5px; border-radius:10px; border:1px solid; text-decoration:none; }
.vchk .vtxt { padding-top:1px; overflow-wrap:anywhere; }
.vchk.none, .vchk:not(:has(.vauth)) { padding-left:10px; }
.vauth { flex:none; font-size:11px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px;
  border:1.5px solid currentColor; }
.vauth.faa { opacity:.75; }
.vchk.ok { color:var(--right); border-color:var(--right); }
.vchk.none { color:var(--muted); border-color:var(--line); }
.vchk.ai { color:var(--muted); border-style:dashed; border-color:var(--muted); padding-left:10px; }  /* weaker than ✓: no official source */
.vchk.bad { color:var(--fg); border-color:color-mix(in srgb, var(--wrong) 40%, transparent); font-weight:500; }
.vchk.bad .vauth { color:var(--wrong); }
.vchk.disp { background:var(--warn-bg); color:var(--warn-fg); border-color:transparent; font-weight:500; }  /* needs attention */
.vchk.disp b { font-weight:800; }
.vcard { border:1px solid; border-radius:10px; padding:5px 10px 8px 5px; max-width:100%; box-sizing:border-box; }
.vcard.ok { border-color:color-mix(in srgb, var(--right) 55%, transparent); }
.vcard.bad { border-color:color-mix(in srgb, var(--wrong) 40%, transparent); }
.vcard .vchk { border:0; padding:0; }
.vchks .vcard .vnote { margin:10px 0 0 5px; font-size:13.5px; font-weight:400; line-height:1.5; color:var(--fg); overflow-wrap:anywhere; }
.vcard.bad .vnote { color:var(--fg); }
.cov { font-size:12px; font-weight:700; border-radius:999px; padding:0 8px; line-height:20px; white-space:nowrap; margin-left:auto; }
.cov.ok { color:var(--right); border:1px solid var(--right); }
.cov.no { color:var(--warn-fg); border:1px solid var(--warn-fg); }  /* same pill as covered, on the right, in yellow */
.topic-row { display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.topic-row::before { content:""; width:1em; }  /* lines up with the ▸ of covered topics */
details.topic-fold > summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; padding:11px 0; }
details.topic-fold > summary::-webkit-details-marker { display:none; }
details.topic-fold > summary::before { content:"▸"; color:var(--muted); width:1em; transition:transform .15s; }
details.topic-fold[open] > summary::before { transform:rotate(90deg); }
details.topic-fold .tid { color:var(--muted); font-variant-numeric:tabular-nums; font-size:14px; }
details.topic-fold .ttl { font-weight:600; flex:1 1 200px; min-width:0; }
.topic-row .ttl { flex:1 1 200px; min-width:0; }
.study { background:var(--soft); border-radius:10px; padding:12px 16px; margin:4px 0 14px; }
.study-label { font-size:13px; color:var(--muted); margin:6px 0 4px; }
details.from-class { margin:6px 0; border:1px solid var(--line); border-radius:6px; padding:0 12px; }
details.from-class > summary { cursor:pointer; padding:8px 0; font-weight:600; font-size:15px; }
details.from-class > summary .count { font-weight:400; margin-left:6px; }
details.from-class[open] { padding-bottom:10px; }
details.not-yet { margin:8px 0 0; color:var(--muted); font-size:14px; }
details.not-yet > summary { cursor:pointer; padding:6px 0; }
.app-btn { display:inline-flex; align-items:center; gap:9px; align-self:center; margin-left:auto; order:1;
  padding:5px 14px 5px 5px; border-radius:999px; text-decoration:none; color:var(--fg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent); transition:transform .15s, box-shadow .15s; }
.app-btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
.app-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
  border-radius:50%; background:var(--accent); color:var(--bg); }
.app-ico::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); opacity:0;
  animation:app-pulse 1.8s ease-out .6s 3; }
@keyframes app-pulse { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .app-ico::after { animation:none; } .app-btn { transition:none; } }
.app-txt { display:flex; flex-direction:column; line-height:1.15; }
header.site .app-btn span.app-ico { color:var(--bg); }
header.site .app-btn span.app-btn-text { color:var(--fg); font-size:13px; font-weight:700; }
header.site .app-btn span.app-btn-sub { color:var(--accent); font-size:11px; font-weight:500; }
.is-offline .app-btn { border-style:dashed; }
header.site .site-nav { order:2; flex-basis:100%; }
.app-btn.installed .app-ico::after { animation:none; }
.ecqb-topic:has(.ecqb-slot) { display:none; }  /* no ECQB questions for this topic (or no ECQB access) */
.update-banner { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60; max-width:calc(100vw - 32px);
  padding:10px 14px; border-radius:12px; background:var(--bg); color:var(--fg); border:1px solid var(--accent);
  box-shadow:0 6px 24px rgba(0,0,0,.25); font-size:14px; }
#sync-bar { position:fixed; top:0; left:0; right:0; height:3px; z-index:70; background:transparent; pointer-events:none; }
#sync-bar span { display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
#sync-bar[hidden] { display:none; }
#ver { color:var(--muted); }
#ver a { color:inherit; }
.update-banner .news { font-size:13px; color:var(--muted); margin-bottom:6px; }
.update-banner button { font:inherit; font-weight:600; margin-left:8px; padding:4px 12px; border-radius:999px; border:0;
  background:var(--accent); color:var(--bg); cursor:pointer; }
.theme-btn { order:1; margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:5px 12px 5px 5px; border-radius:999px; border:1px solid var(--line); background:var(--soft); color:var(--fg);
  font:inherit; text-align:left; cursor:pointer; }
.theme-btn:hover { border-color:var(--muted); }
.theme-ico { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line); font-size:16px; line-height:1; }
.theme-t { font-size:13px; font-weight:700; } .theme-sub { font-size:11px; color:var(--muted); }
@media (max-width:480px) { .theme-btn { flex-direction:column; gap:1px; padding:0; border:0; background:none; } header.site .theme-btn + .app-btn { margin-left:0; }
  .theme-btn .theme-ico { width:26px; height:26px; font-size:14px; } .theme-sub { display:none; } .theme-t { font-size:10px; font-weight:600; color:var(--muted); } }
.theme-btn + .app-btn { margin-left:8px; }
.offline-note { display:none; } .is-offline .offline-note { display:inline; color:var(--accent); }
footer.site-foot { margin:56px 0 24px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.sr-chips { display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); }
.sr-chips button { font:inherit; font-size:12px; color:var(--muted); background:var(--soft); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; cursor:pointer; }
.sr-chips button.on { color:var(--accent); border-color:var(--accent); }
.sr-head { padding:10px 14px 4px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sr-more > summary { padding:10px 14px; font-size:13px; color:var(--accent); cursor:pointer; border-top:1px solid var(--line); }
.site-search input:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.sr { position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:75vh; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); z-index:50; }
.sr-note { padding:8px 14px; font-size:13px; color:var(--muted); }
a.sr-hit { display:block; padding:10px 14px; border-top:1px solid var(--line); color:var(--fg); text-decoration:none; }
a.sr-hit:hover, a.sr-hit.on { background:var(--soft); text-decoration:none; }
.sr-t { display:block; font-weight:600; }
.sr-m { display:block; font-size:12px; color:var(--muted); margin:1px 0 3px; }
.sr-x { display:block; font-size:13px; color:var(--muted); line-height:1.45; }
.sr mark { background:none; color:var(--accent); font-weight:600; }
.sr-x, .sr-t { overflow-wrap:anywhere; }
.menu-item { padding:5px 7px; border-radius:5px; font-size:13.5px; font-weight:600; color:var(--accent); white-space:nowrap; }  /* every menu item the same link colour */
.menu-item:hover { background:var(--soft); text-decoration:none; }
.menu-item.current { background:var(--soft); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }  /* the page you are on */
header.site { flex-wrap:wrap; gap:8px; }
.mock-start { padding:6px 12px; border:1px solid var(--accent); border-radius:5px; background:none; color:var(--accent);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; margin:4px 8px 4px 0; }
.mock-bar { position:sticky; top:env(safe-area-inset-top, 0px); z-index:2; background:var(--bg); border-bottom:1px solid var(--line);
  padding:8px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.mock-bar[hidden] { display:none; }
.mock-status { font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.mock-finish { padding:6px 14px; border:0; border-radius:5px; background:var(--accent); color:var(--bg); font:inherit; font-weight:600; cursor:pointer; }
.mock-finish:disabled { background:var(--line); color:var(--muted); cursor:not-allowed; }
.mock-result { padding:12px 16px; border:1px solid var(--line); border-radius:6px; margin:12px 0; }
.mock-result .pass { color:var(--right); } .mock-result .fail { color:var(--wrong); }
.mock-pool.mocking:not(.instant) .expl { display:none !important; }
.mock-mode { display:block; margin:8px 0 4px; font-size:14px; cursor:pointer; } .mock-mode input { margin-right:6px; }
.opt.picked { border-color:var(--fg); box-shadow:inset 3px 0 0 var(--fg); }

details.ai > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
details.ai > summary::-webkit-details-marker { display:none; }
details.ai > summary::after { content:"Show"; font-size:13px; color:var(--muted); }
details.ai[open] > summary::after { content:"Hide"; }
details.ai[open] > summary { margin-bottom:8px; }
section.ai > .ai-label, blockquote.ai > .ai-label { margin-bottom:6px; }
details.more { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.more[open] > :not(summary), .more-body { line-height:1.75; }
details.more[open] { background:var(--soft); border:0; border-radius:10px; padding:12px 16px 4px; }
details.more p, .more-text p { margin:0 0 1em; } details.more li, .more-text li { margin:0 0 .55em; }
details.more ol, details.more ul { padding-left:1.3em; margin:0 0 1em; }
details.more summary { margin-bottom:6px; }
details.more summary, .more-btn { color:var(--accent); font-size:14px; font-weight:600; }
.more-btn { margin-top:10px; background:none; border:1px solid var(--accent); border-radius:4px;
  padding:4px 10px; cursor:pointer; font-family:inherit; }
.more-btn:disabled { color:var(--muted); border-color:var(--line); cursor:default; }
.quiz .where { font-size:13px; color:var(--muted); }
.q { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.q p { margin:0 0 8px; font-weight:500; }
.opt { display:block; width:100%; text-align:left; margin:5px 0; padding:7px 10px; font:inherit; font-size:15px;
  color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:5px; cursor:pointer; }
.q.done .opt { cursor:default; }
.opt.right { border-color:var(--right); box-shadow:inset 3px 0 0 var(--right); }
.opt.wrong { border-color:var(--wrong); box-shadow:inset 3px 0 0 var(--wrong); }
.expl { display:none; font-size:14px; color:var(--muted); margin-top:6px; }
.q.done .expl { display:block; }
.expl .ai-label { margin-right:4px; }
.more-text { display:none; color:var(--fg); margin:14px 0 6px; padding:14px 16px 4px; background:var(--soft);
  border-radius:10px; line-height:1.75; max-width:68ch; }
.more-text, .more-text p { font-weight:400; }
.more-text p { margin:0 0 1em; }
.more-text .mx-ans { color:var(--right); font-weight:700; }
.more-text .mx-wrong { margin:0 0 1em; } .more-text .mx-wrong p { margin:0 0 .45em; }
.more-text .mx-l { color:var(--wrong); font-weight:700; }
.more-text .mx-dispute { border:1px solid color-mix(in srgb, var(--wrong) 40%, transparent); border-radius:8px; padding:9px 12px; }
.more-text .mx-dispute::first-letter { color:var(--wrong); }
.more-text .mx-tip { background:var(--warn-bg); border-radius:8px; padding:9px 12px; }
.more-text .mx-tip strong { color:var(--warn-fg); }
.q-more { margin-top:8px; background:none; border:1px solid var(--accent); color:var(--accent); border-radius:4px;
  padding:3px 9px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; display:block; }
.q-more:disabled { color:var(--muted); border-color:var(--line); cursor:default; }
.quiz-link { display:inline-block; margin:0 0 16px; padding:7px 14px; border:1px solid var(--accent); border-radius:5px;
  font-weight:600; }
#score { position:sticky; top:env(safe-area-inset-top, 0px); background:var(--bg); padding:8px 0; border-bottom:1px solid var(--line);
  font-weight:600; z-index:1; }
.class-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:14px 0 6px; }
.class-photos figure { margin:0; }
.class-photos img, .photos img { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--soft); border-radius:6px;
  display:block; border:1px solid var(--line); cursor:zoom-in; }  /* the whole slide in a frame, never cropped */
.class-photos figure.open, .photos figure.open { grid-column:1 / -1; }  /* opened: the full width of the page, in place */
.class-photos figure.open img, .photos figure.open img { aspect-ratio:auto; max-height:85vh; object-fit:contain; cursor:zoom-out; }
.class-img { position:relative; display:block; }
.photo-label.inline { position:static; }
.photo-label { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#1a1a1a; background:rgba(255,255,255,.92); border:1px solid #1a1a1a;
  border-radius:3px; padding:0 5px; line-height:17px; pointer-events:none; }
details.ai-fold { margin:12px 0 0; } details.ai-fold summary { font-size:14px; }
.ai-fig { margin:14px 0 4px; }
.ai-fig img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:6px; background:#fff; }
figcaption { font-size:14px; color:var(--muted); margin-top:6px; }
.legend { font-size:14px; color:var(--muted); line-height:1.8; }
.upload { display:inline-block; padding:6px 12px; border:1px solid var(--accent); border-radius:5px; color:var(--accent);
  font-weight:600; font-size:14px; cursor:pointer; margin-bottom:12px; }
.upload-status { font-size:14px; color:var(--muted); }
.photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.photos figure { margin:0; } .photos img { width:100%; border-radius:6px; display:block; }
/* "Questions and clarifications" chat (REQUIREMENTS 92): always on the right on a computer, the page making room for it;
   on a phone a button at the bottom right opens it over the page */
#chat { position:fixed; z-index:51; display:flex; flex-direction:column; background:var(--bg); }
@media (min-width:1100px) {
  html.has-chat body { padding-right:380px; }
  #chat { top:0; right:0; bottom:0; width:380px; border-left:1px solid var(--line); }
  #chat-fab, .chat-hide .narrow { display:none; }
  html.chat-folded.has-chat body { padding-right:48px; }
  html.chat-folded #chat { width:48px; }
  html.chat-folded #chat > :not(.chat-tab) { display:none; }
  html.chat-folded .chat-tab { display:flex; }
}
.chat-tab { display:none; flex:1; align-items:center; justify-content:center; gap:10px; border:0; padding:16px 0; cursor:pointer;
  background:color-mix(in srgb, var(--accent) 8%, var(--bg)); color:var(--accent); font:inherit; font-weight:600; font-size:14px;
  writing-mode:vertical-rl; }
.chat-tab:hover { background:color-mix(in srgb, var(--accent) 14%, var(--bg)); }
@media (max-width:1099px) {
  #chat { inset:0; display:none; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
  html.chat-open #chat { display:flex; }
  html.chat-open #chat-fab { display:none; }
  .chat-hide .wide { display:none; }
}
#chat-fab { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:50; display:inline-flex; gap:8px;
  align-items:center; padding:11px 18px; border:0; border-radius:999px; background:var(--accent); color:#fff; font:600 15px/1 inherit;
  font-family:inherit; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.chat-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 18px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.chat-h strong { font-size:15px; }
/* the chat on its own page (chat.html), and its header buttons */
html.chat-page #chat { position:relative; inset:auto; display:flex; width:100%; height:calc(100vh - 230px); min-height:460px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; padding:0; }
html.chat-page .chat-full, html.chat-page .chat-hide, html.chat-page .chat-tab { display:none !important; }
.chat-back { display:none; font-size:14px; }
html.chat-page .chat-back { display:inline; }
html.chat-page .chat-h { justify-content:flex-start; gap:16px; }
.chat-btns { display:flex; gap:4px; align-items:center; }
.chat-full { border:0; background:none; color:var(--accent); font-size:18px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px; }
.chat-full:hover { background:color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.chat-fig { display:block; width:100%; max-width:480px; margin:8px 0 10px; padding:10px; background:#fff; border-radius:10px;
  border:1px solid var(--line); box-sizing:border-box; }
html.chat-page .chat-m { max-width:min(90%, 760px); }
.chat-hide { border:0; background:none; color:var(--accent); font:inherit; font-size:22px; line-height:1; cursor:pointer; padding:2px 8px;
  border-radius:8px; }
.chat-hide:hover { background:color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.chat-tab .chat-ico { writing-mode:horizontal-tb; font-size:22px; line-height:1; }
.chat-log { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.chat-m { max-width:90%; padding:10px 13px; border-radius:14px; font-size:15px; line-height:1.55; }
.chat-m p { margin:0 0 .6em; } .chat-m p:last-child { margin-bottom:0; }
.chat-m ul, .chat-m ol { margin:0 0 .6em; padding-left:1.2em; }
.chat-m.me { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.chat-m.bot { align-self:flex-start; background:var(--soft); border-bottom-left-radius:4px; }
.chat-m.wait { color:var(--muted); font-style:italic; }
.chat-m.err { align-self:flex-start; background:color-mix(in srgb, var(--wrong) 10%, var(--bg)); }
.chat-src { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:13px; display:flex; flex-direction:column; gap:3px; }
.chat-src span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.chat-f { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.chat-f textarea { flex:1; resize:none; font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--fg); }
.chat-send { border:0; border-radius:10px; padding:0 16px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.chat-send:disabled { opacity:.5; cursor:wait; }
.chat-foot { margin:0; padding:0 16px 12px; font-size:12px; color:var(--muted); }
.q-ask { margin:8px 0 0; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--accent);
  font:inherit; font-size:14px; cursor:pointer; }
@media print { #chat-fab, #chat { display:none !important; } html.has-chat body { padding-right:0; } }
/* "Before you fly" (REQUIREMENTS 93): one fold per lesson */
.fly-lesson { border:1px solid var(--line); border-radius:12px; margin:10px 0; background:var(--bg); }
.fly-lesson > summary { cursor:pointer; padding:12px 16px; display:flex; gap:12px; align-items:center; list-style:none; }
.fly-lesson > summary::-webkit-details-marker { display:none; }
.fly-num { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.fly-t { display:flex; flex-direction:column; gap:2px; }
.fly-t strong { font-size:16px; }
.fly-kind { font-size:13px; color:var(--accent); }
.fly-kind.fly-sim { color:var(--muted); }
.fly-key { font-size:14px; color:var(--muted); padding:10px 14px; background:var(--soft); border-radius:10px; }
/* the bold "Before you fly" button at the top, apart from the theory menu */
.fly-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--accent); color:#fff !important;
  font-weight:700; font-size:15px; text-decoration:none !important; white-space:nowrap; box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.fly-btn:hover { filter:brightness(1.08); }
.fly-btn.current { outline:2px solid var(--fg); outline-offset:2px; }
.fly-lesson[open] > summary { border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--accent) 6%, var(--bg)); border-radius:12px 12px 0 0; }
.fly-body { padding:4px 18px 12px; }
.fly-tag-unused { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:999px; margin-right:6px;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); vertical-align:2px; }
.fly-tag.fly-sim { color:var(--muted); background:var(--soft); }

/* text on the accent colour: white on the light theme's blue, dark navy on the dark theme's light blue (readable) */
:root { --on-accent:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-accent:#0d1b3d; } }
:root[data-theme="dark"] { --on-accent:#0d1b3d; }
.fly-btn, #chat-fab, .chat-send, .chat-m.me { color:var(--on-accent) !important; }
header.site .fly-btn span { color:inherit; font-size:inherit; }
.fly-btn .fly-plane { width:44px; height:17px; flex:none; }
.fly-btn { padding:8px 16px 8px 12px; }
header.site .fly-btn { order:1; align-self:center; }  /* on the right, after Theme and Install app */

.doc-list { margin:6px 0 10px; padding-left:1.2em; } .doc-list li { margin:4px 0; } .doc-list .meta { font-size:13px; margin-left:6px; }

/* the two tiles at the top of the home page (asked 25 Oct) */
.home-tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 28px; }
@media (max-width:640px) { .home-tiles { grid-template-columns:1fr; } }
.home-tile { position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--line);
  border-radius:16px; background:var(--soft); color:var(--fg) !important; text-decoration:none !important; overflow:hidden;
  transition:border-color .15s, transform .15s; }
.home-tile:hover { border-color:var(--accent); transform:translateY(-1px); }
.home-tile-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.home-tile strong { font-size:19px; line-height:1.25; }
.home-tile-text { font-size:14px; color:var(--muted); max-width:34ch; }
.home-tile-go { margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; color:var(--accent); }
.home-tile-flight { background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--soft)); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.home-tile-flight .home-tile-label { color:var(--accent); }
.home-tile-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; }
.home-tile-plane { color:var(--accent); line-height:0; }
.home-tile-plane .fly-plane { width:104px; height:38px; }
.fly-docs { margin:12px 0 4px; padding:12px 16px; border-radius:10px; background:color-mix(in srgb, var(--accent) 7%, var(--bg));
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); font-size:14px; }
.fly-docs ul { margin:6px 0 0; padding-left:1.2em; } .fly-docs li { margin:3px 0; }
.fly-body table { border-collapse:collapse; width:100%; font-size:14px; margin:8px 0 14px; }
.fly-body th, .fly-body td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.fly-phase { margin:14px 0; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.fly-phase > summary { cursor:pointer; padding:14px 18px; list-style:none; display:flex; align-items:center; gap:10px; }
.fly-phase > summary::-webkit-details-marker { display:none; }
.fly-phase > summary::before { content:"›"; font-size:20px; color:var(--accent); transition:transform .15s; }
.fly-phase[open] > summary::before { transform:rotate(90deg); }
.fly-phase > summary strong { font-size:18px; }
.fly-phase-body { padding:0 14px 10px; }
.menu-fly { display:inline-flex !important; align-items:center; gap:6px; font-weight:700; }
.menu-fly .fly-plane { width:30px; height:12px; }
/* the theory menu and search on the home page, under the tiles */
.theory-nav { display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 8px; }
.theory-nav .site-nav { flex-basis:100%; display:flex; flex-wrap:wrap; gap:4px 2px; }
.theory-nav .site-search { flex:0 0 100%; }
.fly-fig { margin:12px 0 16px; } .fly-fig img { display:block; width:100%; max-width:680px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.fly-fig.fly-svg img { max-width:520px; padding:12px; box-sizing:border-box; }
.fly-fig figcaption { font-size:13px; margin-top:6px; }
/* a reference opened in place: the cited page of the school document, with a link to the whole document */
.fly-peek { list-style:none; margin:8px 0 14px; padding:10px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius:12px; background:var(--soft); }
.fly-peek-h { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:center; font-size:14px; margin:0 2px 8px; }
.fly-peek-h span { display:flex; gap:10px; align-items:center; }
.fly-peek-h button { border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:999px; padding:3px 12px; font:inherit; font-size:13px; cursor:pointer; }
.fly-peek img { display:block; width:100%; max-width:760px; margin:0 auto 8px; border-radius:8px; background:#fff; }
/* School documents: main sections and subsections as folds (asked 25 Oct) */
.doc-fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:10px 14px; }
.doc-fold > summary::-webkit-details-marker { display:none; }
.doc-fold > summary::before { content:"›"; color:var(--accent); font-size:18px; width:10px; transition:transform .15s; }
.doc-fold[open] > summary::before { transform:rotate(90deg); }
.doc-name { flex:1; }
.doc-count { font-size:12px; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:999px; padding:1px 9px; }
.doc-l1 { margin:10px 0; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.doc-l1 > summary .doc-name { font-size:17px; font-weight:700; }
.doc-l1 > .doc-inside { padding:0 10px 10px; }
.doc-l2, .doc-l3, .doc-l4, .doc-l5 { margin:4px 0 4px 8px; border-left:2px solid var(--line); }
.doc-l2 > summary .doc-name { font-weight:600; }
.doc-inside > .doc-list { margin:4px 0 8px 28px; }
/* a reference as a fold button: ▸ closed, ▾ open (the page of the document shows under the line) */
a.fly-ref { display:inline-flex; align-items:center; gap:4px; padding:0 8px; margin:1px 0; border-radius:999px; font-size:13px;
  background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  text-decoration:none !important; white-space:normal; }
a.fly-ref::before { content:"▸"; font-size:11px; }
a.fly-ref.open::before { content:"▾"; }
a.fly-ref:hover { background:color-mix(in srgb, var(--accent) 18%, transparent); }
/* the aircraft next to the title of the Flying page */
.fly-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fly-head h1 { margin-bottom:6px; }
.fly-head-plane { color:var(--accent); line-height:0; }
.fly-head-plane .fly-plane { width:140px; height:52px; }
@media (max-width:520px) { .fly-head-plane .fly-plane { width:100px; height:37px; } }
/* radio calls: a highlighted box, English and Spanish side by side, a speaker button for the Spanish (asked 25 Oct) */
.fly-radio { margin:6px 0 16px; padding:4px 12px 2px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.fly-radio table { font-size:14px; margin:4px 0; }
.fly-radio th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 8px 6px; }
.fly-radio td { padding:8px; line-height:1.45; vertical-align:top; }
.fly-radio td:first-child { width:22%; font-size:13px; color:var(--muted); }
.fly-radio td:nth-child(2) { color:var(--fg); opacity:.75; }
.fly-radio td.es-call { font-weight:600; color:var(--fg); }
.fly-radio td.es-none { font-size:12px; font-style:italic; color:var(--muted); }
.fly-radio tbody tr + tr td { border-top:1px solid color-mix(in srgb, var(--accent) 12%, var(--line)); }
.fly-radio tbody tr { background:none !important; }
.say { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:6px; vertical-align:-6px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); background:var(--bg); color:var(--accent); cursor:pointer; padding:0; }
.say:hover { background:color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.radio-src { font-size:12px; color:var(--muted); margin:2px 0 8px; }
.radio-src a.fly-ref { font-size:12px; }
.fly-jump { margin:10px 0 0; font-size:14px; font-weight:600; }
/* AI Spanish where the school gives none: marked, the note kept */
.fly-radio td.es-ai .es-text { font-weight:600; font-style:italic; }
.ai-tag { display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.05em;
  color:#9a5b00; background:#fff1d6; border:1px solid #f0c27a; vertical-align:1px; font-style:normal; }
.es-note { display:block; margin-top:3px; font-size:11px; font-weight:400; font-style:italic; color:var(--muted); }
/* the radio phrasebook card at the top of the Flying page */
.fly-card { display:flex; align-items:center; gap:14px; margin:14px 0; padding:14px 16px; border-radius:14px; text-decoration:none !important;
  color:var(--fg) !important; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-left:4px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.fly-card:hover { background:color-mix(in srgb, var(--accent) 11%, var(--bg)); }
.fly-card-ico { font-size:26px; }
.fly-card strong { display:block; font-size:16px; }
.fly-card .meta { display:block; font-size:13px; margin-top:2px; }
.fly-card-go { margin-left:auto; font-weight:600; color:var(--accent); white-space:nowrap; }
/* one Spanish voice for the whole site */
.voice-pick { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0 14px; padding:10px 14px; border-radius:12px;
  background:var(--soft); font-size:14px; }
.voice-pick label { font-weight:600; }
.voice-pick select, .voice-pick button { font:inherit; font-size:14px; padding:4px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); cursor:pointer; }
.voice-pick .meta { font-size:12px; }
/* "Translate a call" on the Radio page */
.tr-box { margin:14px 0 18px; padding:14px 16px; border-radius:14px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.tr-box h2 { margin:0 0 4px; font-size:17px; }
.tr-box .meta { margin:0 0 10px; font-size:13px; }
#tr-form { display:flex; gap:8px; }
#tr-form textarea { flex:1; resize:vertical; font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); }
#tr-out { margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line); }
#tr-out .tr-es { font-weight:600; font-size:16px; }
#tr-out.tr-err .tr-es { font-weight:400; color:var(--wrong); }
#tr-out.tr-err .ai-tag, #tr-out.tr-err .say { display:none; }
#tr-out .tr-left { display:block; font-size:12px; margin-top:6px; }
/* the chat page: the flight-training links under the theory menu */
header.site .nav-fly { order:2; flex-basis:100%; margin-top:8px; padding-top:12px; align-items:center;
  border-top:1px solid color-mix(in srgb, var(--fg) 25%, var(--bg)); }  /* thin grey (not blue, not heavy: her choice) */  /* a thin line between the theory menu and the flight-training links */
.nav-fly-label { display:inline-flex; align-items:center; gap:6px; font-size:11px !important; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted) !important; margin:0 6px 0 8px; cursor:default; }
.nav-fly-label .fly-plane { width:30px; height:12px; color:var(--muted); }  /* a label, not a link: grey */
header.site:has(.nav-fly) { border-bottom:1px solid color-mix(in srgb, var(--fg) 25%, var(--bg)); }  /* the chat page: both lines alike (her choice) */
@media (min-width:700px) { header.site .site-nav .menu-item:first-child { margin-left:-7px; } }  /* the first link lines up with the logo */
/* the chat page: Flight training lines up with the theory menu above it */
header.site .nav-fly { gap:4px 2px; }
.nav-fly-label { margin:0 12px 0 0 !important; }
/* "Check with instructor ⚠ N" as a notice pill in the top row */
header.site .instr-pill { order:1; margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--wrong) 30%, var(--line)); background:var(--bg); color:var(--fg) !important;
  font-size:13px; font-weight:600; text-decoration:none !important; white-space:nowrap; }
header.site .instr-pill:hover { background:var(--soft); }
header.site .instr-pill.current { outline:2px solid var(--fg); outline-offset:1px; }
header.site .instr-pill + .theme-btn { margin-left:0; }
header.site .instr-pill .badge { font-size:12px; font-weight:700; color:var(--wrong); }
header.site .instr-pill .badge.ok { color:var(--right); }
/* the Flying page: each time it opens, the Tecnam takes off to the right and glides back in from the left (asked 25 Oct) */
.fly-head { overflow:hidden; }
.fly-anim { display:inline-block; }  /* the flight path is random each visit (FLY_ANIM_JS); fly-circuit is the fallback */
.fly-anim.no-js { animation:fly-circuit 4.5s ease-in-out .4s 1 both; }
/* slow and always visible (asked 25 Oct): forward (it faces left) with a gentle climb, turn, back, turn, settle */
@keyframes fly-circuit {
  0%   { transform:translate(0, 0) scaleX(1) rotate(0); }
  28%  { transform:translate(-90px, -14px) scaleX(1) rotate(4deg); }
  38%  { transform:translate(-100px, -16px) scaleX(-1) rotate(0); }
  66%  { transform:translate(24px, -6px) scaleX(-1) rotate(4deg); }
  76%  { transform:translate(30px, -4px) scaleX(1) rotate(0); }
  100% { transform:translate(0, 0) scaleX(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .fly-anim { animation:none; } }
.home-tile-plane { display:inline-block; position:relative; z-index:1; }
  text-anchor:middle; transition:opacity .25s, fill .25s; }
.home-tiles { position:relative; }
/* the Radio page: a cockpit radio next to the plane */
.fly-head-icons { display:inline-flex; align-items:center; gap:14px; }
.fly-head-radio { color:var(--accent); line-height:0; }
.fly-head-radio .radio-set { width:116px; height:46px; }
@media (max-width:520px) { .fly-head-radio .radio-set { width:80px; height:37px; } }
.fly-head-pilot { color:var(--accent); line-height:0; }
.fly-head-pilot .pilot-sing { width:58px; height:62px; }
@media (max-width:520px) { .fly-head-pilot .pilot-sing { width:50px; height:42px; } }
/* theory pages: the Flight training row sits between the menu and the search */
header.site .site-search { margin-top:4px; }
/* the Radio page: the pilot and the radio beside the title, right-aligned; under it on narrow screens (25 Oct) */
.radio-title { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin-top:24px; }
.radio-title h1 { margin:0 auto 0 0; }
.radio-title + * { margin-top:10px; }
.tr-art { display:flex; align-items:center; gap:8px; color:var(--accent); line-height:0; }
.tr-art .pilot-sing { width:38px; height:40px; }
.tr-art .radio-set { width:100px; height:40px; }
.radio-title h1 { font-size:1.7rem; }
.tr-box h2 { border-top:0 !important; padding-top:0 !important; margin-top:2px; }
/* the Radio page's COM radio: soft and light on the light theme, dark avionics on the dark theme (25 Oct) */
.radio-set .rs-face { fill:#f5f7fa; stroke:#d4dae4; }
.radio-set .rs-screen { fill:#e3e9f2; }
.radio-set .rs-digits { fill:#4a5568; font-weight:400; }
.radio-set .rs-knob { fill:#eaeef4; stroke:#c3cbd7; }
.radio-set .rs-knob-in { fill:#dce2eb; }
.radio-set .rs-mark { stroke:#8a95a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .radio-set .rs-face { fill:#1f2633; stroke:#6b7890; }
  :root:not([data-theme="light"]) .radio-set .rs-screen { fill:#0b1220; }
  :root:not([data-theme="light"]) .radio-set .rs-digits { fill:#e6efff; font-weight:600; }
  :root:not([data-theme="light"]) .radio-set .rs-knob { fill:#3d4a61; stroke:#8592ab; }
  :root:not([data-theme="light"]) .radio-set .rs-knob-in { fill:#56647e; }
  :root:not([data-theme="light"]) .radio-set .rs-mark { stroke:#e6efff; } }
:root[data-theme="dark"] .radio-set .rs-face { fill:#1f2633; stroke:#6b7890; }
:root[data-theme="dark"] .radio-set .rs-screen { fill:#0b1220; }
:root[data-theme="dark"] .radio-set .rs-digits { fill:#e6efff; font-weight:600; }
:root[data-theme="dark"] .radio-set .rs-knob { fill:#3d4a61; stroke:#8592ab; }
:root[data-theme="dark"] .radio-set .rs-knob-in { fill:#56647e; }
:root[data-theme="dark"] .radio-set .rs-mark { stroke:#e6efff; }
/* the aircraft switch on the Flying page (26 Oct): P2008 JC (Tecnam) or Cessna 172, and the C172's registration */
.ac-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0 6px; }
.ac-label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.ac-switch button { font:inherit; font-size:14px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer; }
.ac-switch button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent, #fff); }
.ac-switch button[aria-pressed="true"] .meta { color:inherit; opacity:.8; }
.ac-regs { display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%; padding-left:2px; }
.ac-regs button { font-size:13px; padding:4px 10px; }
html:not([data-aircraft="c172"]) [data-ac="c172"], html[data-aircraft="c172"] [data-ac="p2008"] { display:none !important; }
.ac-tag { display:inline-block; font-size:11px; font-weight:700; padding:1px 6px; margin-right:6px; border-radius:6px; background:var(--soft); color:var(--muted); }
.ac-line.ac-mine .ac-tag { background:var(--accent); color:var(--on-accent, #fff); }
.ac-line.ac-mine { background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:6px; }
.ac-line.ac-other { opacity:.45; }
.ac-soon { padding:10px 14px; border-radius:10px; background:color-mix(in srgb, var(--accent) 9%, transparent); border-left:3px solid var(--accent); font-size:14px; }
/* Notes by subject: the official-source notes under a topic (27 Oct) */
details.official { margin:14px 0; padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:var(--soft); }
details.official > summary { cursor:pointer; font-weight:600; }
details.official .ai-label { background:color-mix(in srgb, var(--accent) 14%, transparent); }
/* Notes by subject, easier to read (asked 27 Oct): a sticky chapter bar, clear chapter dividers, back to top, calmer labels */
.subject-page .chap-bar { position:sticky; top:0; z-index:5; display:flex; gap:6px; overflow-x:auto; padding:8px 0; margin:10px 0 6px;
  background:var(--bg); border-bottom:1px solid var(--line); scrollbar-width:none; }
.subject-page .chap-bar::-webkit-scrollbar { display:none; }
.subject-page .chap-bar a { flex:none; font-size:13px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--fg); text-decoration:none; white-space:nowrap; }
.subject-page .chap-bar a:hover { border-color:var(--accent); color:var(--accent); }
.subject-page h2.chapter { margin-top:34px; padding-top:18px; border-top:2px solid var(--line); scroll-margin-top:56px; }
.subject-page .topic-fold { scroll-margin-top:56px; }
.subject-page .ai-label { background:none !important; border:0 !important; padding:0 !important; color:var(--muted) !important;
  font-size:11px; letter-spacing:.04em; }
.subject-page .legend-fold { margin:8px 0 4px; font-size:14px; }
.subject-page .legend-fold > summary { cursor:pointer; color:var(--muted); }
.subject-page .legend-fold .ai-label { border:1px solid var(--line) !important; padding:0 5px !important; }
.to-top { position:fixed; right:18px; bottom:18px; z-index:6; padding:7px 12px; border-radius:999px; font-size:13px;
  background:var(--bg); border:1px solid var(--line); color:var(--fg); text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.08); }
html.has-chat .to-top { right:398px; } html.chat-folded.has-chat .to-top { right:66px; }
@media (max-width:900px) { html.has-chat .to-top, .to-top { right:18px; bottom:76px; } }
/* official-source notes: footnote-size source numbers, small sources list (asked 27 Oct) */
sup.fn { font-size:10px; line-height:0; margin-left:1px; }
sup.fn a { text-decoration:none; color:var(--muted); padding:0 1px; }
sup.fn a:hover { color:var(--accent); }
.fn-list { margin-top:14px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.6; }
.fn-list a { color:var(--muted); }

/* Study material from the school's documents (27 Oct): study folds, readiness checks, What's new */
.doc-study { margin:6px 0 10px; border-left:3px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-left:10px; }
.doc-study > summary { cursor:pointer; font-size:14px; color:var(--accent); font-weight:600; }
.doc-study-body h4 { margin:12px 0 4px; font-size:15px; }
.doc-study-body ul.must { margin:4px 0 10px; padding-left:1.2em; } .doc-study-body ul.must li { margin:4px 0; }
.fly-ready { margin:18px 0 6px; padding:10px 14px; border-radius:10px; background:color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.fly-ready > summary { cursor:pointer; font-weight:600; }
.whats-new { margin:16px 0 22px; padding:12px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.whats-new h2 { margin:0 0 4px; font-size:19px; }
.wn-list { list-style:none; padding:0; margin:8px 0 0; } .wn-list > li { margin:10px 0; } .wn-list ul, .wn-list p { margin:4px 0 0 0; }
.wn-tag { display:inline-block; font-size:12px; font-weight:600; padding:1px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 14%, var(--bg)); color:var(--accent); }
.wn-tag.wn-removed { background:color-mix(in srgb, var(--fg, #888) 10%, var(--bg)); color:inherit; }

/* My progress: Flying per mission (28 Oct): the same tiles as the theory subjects */
.pfly { margin:22px 0; } .pfly h2 { margin-bottom:2px; }
/* My progress: Theory | Flying tabs, compact missions (29 Oct) */
.ptabs { display:inline-flex; gap:4px; padding:4px; margin:6px 0 4px; border-radius:12px; background:var(--soft); border:1px solid var(--line); }
.ptabs button { border:0; background:none; font:inherit; font-weight:600; padding:7px 18px; border-radius:9px; cursor:pointer; color:var(--muted); }
.ptabs button.on { background:var(--bg); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ptab .pname { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pfly-later { margin:4px 0 18px; } .pfly-later > summary { cursor:pointer; font-weight:600; color:var(--muted); padding:6px 0; }
.pfly-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pchip { font-size:13px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--soft); max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pchip b { color:var(--accent); } .pchip i { font-style:normal; color:var(--muted); margin-left:6px; font-size:12px; }
.pfly-h { font-size:15px; margin:14px 0 4px; color:var(--muted); font-weight:700; }
.pfly-later .ptile { opacity:.75; }

/* Code on GitHub (29 Oct) */
.gh-go { display:inline-block; text-decoration:none !important; }
.gh-result { margin:14px 0; padding:12px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--right) 40%, transparent); }
.gh-result.bad { border-color:color-mix(in srgb, var(--wrong) 40%, transparent); }
header.site .gh-pill { order:1; align-self:center; display:inline-flex; align-items:center; padding:7px 12px; margin-left:8px;
  border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:600; text-decoration:none; color:var(--fg); }
header.site .gh-pill:hover, header.site .gh-pill.current { border-color:var(--accent); color:var(--accent); }

/* Notes by subject, one topic at a time (29 Oct) */
.wrap:has(.subj-layout) { max-width:1120px; }
.subj-layout { container-type:inline-size; position:relative; margin-top:14px; }
.subj-layout .toc-btn { position:sticky; top:8px; z-index:6; margin:0 0 10px; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); font:inherit; font-weight:600; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.subj-toc { display:none; }
.subj-layout.toc-open .subj-toc { display:block; position:sticky; top:52px; z-index:5; max-height:70vh; overflow:auto; margin-bottom:14px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); box-shadow:0 4px 16px rgba(0,0,0,.12); }
@container (min-width:860px) {
  .subj-grid { display:grid; grid-template-columns:270px minmax(0, 1fr); gap:28px; align-items:start; }
  .subj-layout .toc-btn { display:none; }
  .subj-toc, .subj-layout.toc-open .subj-toc { display:block; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto;
    padding:4px 6px 4px 0; border:0; box-shadow:none; margin:0; }
}
.toc-ch { margin:0 0 12px; }
.toc-ch-t { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:6px 0 4px; }
.toc-ch-t .count { text-transform:none; font-weight:600; letter-spacing:0; }
.toc-t { display:block; font-size:14px; line-height:1.35; padding:5px 8px 5px 10px; border-radius:8px; border-left:3px solid transparent;
  color:var(--fg); text-decoration:none !important; }
.toc-t .tid { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; margin-right:4px; }
.toc-t.ok { border-left-color:var(--right); } .toc-t.off { border-left-color:var(--warn-fg); }
.toc-t.none { color:var(--muted); opacity:.7; }
a.toc-t:hover { background:var(--soft); }
.toc-t.current { background:color-mix(in srgb, var(--accent) 12%, var(--bg)); color:var(--accent); font-weight:600; }
.subj-reader { min-width:0; }
.topic-head { position:sticky; top:0; z-index:4; background:var(--bg); padding:8px 0 10px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.subj-layout .toc-btn ~ .subj-reader .topic-head { top:52px; }
@container (min-width:860px) { .subj-layout .toc-btn ~ .subj-reader .topic-head { top:0; } }
.topic-head .crumb { font-size:12px; color:var(--muted); }
.topic-head h2 { margin:2px 0 4px; font-size:21px; line-height:1.3; } .topic-head h2 .tid { color:var(--muted); font-weight:600; font-size:16px; }
.topic-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:26px 0 8px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; }
.topic-nav a { max-width:42%; text-decoration:none; padding:7px 12px; border:1px solid var(--line); border-radius:10px; }
.topic-nav a:hover { border-color:var(--accent); } .topic-nav .next { text-align:right; } .topic-nav .pos { color:var(--muted); font-size:13px; }
.topic-practice { margin:22px 0; padding:14px 16px; border-radius:12px; background:color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.topic-practice h3 { margin:0 0 8px; font-size:17px; }
details.practice-q { margin:6px 0; } details.practice-q > summary { cursor:pointer; font-weight:600; padding:6px 0; }
.practice-mock { display:inline-block; margin-top:10px; text-decoration:none !important; }

/* My progress: Practise my weak spots (29 Oct) */
.weak-box { margin:6px 0 22px; } .weak-box .weak-go { margin-right:6px; } .weak-quiz { margin-top:10px; }

/* ---------- The flying site's design (asked 4 Nov: "can we redesign the fly app"; the rules of the approved proposal,
   https://claude.ai/artifact/NN4TXjdyGwXrjxvo4jMJXH): five text sizes 12/14/16/20/28, blue only for what can be tapped,
   green/amber/red only in small result marks, corners 6px (controls) / 12px (cards), spacing 4–48, one row style for
   every list. Phone first: on a phone the four sections are a tab bar at the bottom, like an app.
   Everything is scoped to body.site-fly, so the theory site is unchanged until its own turn. ---------- */
.site-fly { --bg:#ffffff; --fg:#1a1d23; --muted:#646b78; --line:#e3e6eb; --soft:#f4f6f9; --accent:#2457d6; --on-accent:#ffffff;
  --right:#1a7f37; --warn-fg:#9a6700; --wrong:#cf222e; --r-ctl:6px; --r-card:12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-fly { --bg:#111318; --fg:#e7e9ee; --muted:#9aa1ad;
  --line:#2a2f38; --soft:#191c22; --accent:#7aa2ff; --on-accent:#0b1220; --right:#3fb950; --warn-fg:#d29922; --wrong:#f85149; } }
:root[data-theme="dark"] .site-fly { --bg:#111318; --fg:#e7e9ee; --muted:#9aa1ad; --line:#2a2f38; --soft:#191c22; --accent:#7aa2ff;
  --on-accent:#0b1220; --right:#3fb950; --warn-fg:#d29922; --wrong:#f85149; }
.site-fly { background:var(--bg); color:var(--fg); font-size:16px; }
.site-fly .wrap { max-width:820px; padding-block:16px 48px; }
.site-fly h1 { font-size:28px; line-height:1.2; margin:8px 0 4px; letter-spacing:-.01em; text-wrap:balance; }
.site-fly h2 { font-size:20px; line-height:1.3; margin:32px 0 8px; padding-top:0; border-top:0; text-wrap:balance; }
.site-fly .lede { color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 16px; max-width:65ch; }
.site-fly .small, .site-fly .meta { font-size:14px; color:var(--muted); }
.site-fly .count { font-size:14px; font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; }
.site-fly a { color:var(--accent); }
.site-fly :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* header: one row */
.site-fly header.fhead { display:flex; align-items:center; gap:12px 24px; padding:4px 0 12px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.site-fly .fhead a.home { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--fg); text-decoration:none; flex:none; }
.site-fly .fnav { display:flex; gap:4px; flex:1; min-width:0; }
.site-fly .fnav a { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-ctl); color:var(--muted);
  font-size:14px; font-weight:600; text-decoration:none; }
.site-fly .fnav svg { width:18px; height:18px; flex:none; }
.site-fly .fnav a:hover { color:var(--fg); background:var(--soft); }
.site-fly .fnav a.current { color:var(--fg); background:var(--soft); }
.site-fly .fnav a.current svg { color:var(--accent); }
.site-fly .ftools { display:flex; gap:8px; align-items:center; margin-left:auto; flex:none; }
.site-fly .ftools .theme-btn { margin:0; order:0; width:36px; height:36px; padding:0; justify-content:center; border:1px solid var(--line);
  border-radius:var(--r-ctl); background:var(--bg); }
.site-fly .ftools .theme-btn .app-txt { display:none; }
.site-fly .ftools .theme-btn .theme-ico { width:auto; height:auto; background:none; font-size:16px; color:var(--fg); }
.site-fly .ftools .app-btn { margin:0; order:0; gap:6px; padding:0 12px; height:36px; border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--bg); box-shadow:none; }
.site-fly .ftools .app-btn .app-ico { width:auto; height:auto; background:none; color:var(--fg) !important; }
.site-fly .ftools .app-btn .app-ico::after { display:none; }
.site-fly .ftools .app-btn .app-btn-sub { display:none; }
.site-fly .ftools .app-btn .app-btn-text { font-size:14px; font-weight:600; }
@media (max-width:700px) {  /* phone: the sections as a tab bar at the bottom */
  .site-fly header.fhead { padding-top:4px; }
  .site-fly .fnav { position:fixed; left:0; right:0; bottom:0; z-index:49; justify-content:space-around; gap:0; background:var(--bg);
    border-top:1px solid var(--line); padding:6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .site-fly .fnav a { flex:1; flex-direction:column; gap:2px; padding:6px 2px; font-size:12px; background:none !important; }
  .site-fly .fnav svg { width:22px; height:22px; }
  .site-fly .fnav a.current { color:var(--accent); }
  .site-fly .wrap { padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  .site-fly #chat-fab { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .site-fly .ftools .app-btn .app-btn-text { font-size:12px; }
}
.site-fly header.site:not(.fhead) { display:none; }
.site-fly .site-foot { font-size:12px; color:var(--muted); }

/* "About ..." folds: the long explanations, out of the way */
.site-fly details.about { margin:0 0 16px; }
.site-fly details.about > summary { display:inline-flex; gap:6px; align-items:center; cursor:pointer; list-style:none; font-size:14px; font-weight:600; color:var(--accent); }
.site-fly details.about > summary::-webkit-details-marker { display:none; }
.site-fly details.about > summary::after { content:"›"; transition:transform .15s; }
.site-fly details.about[open] > summary::after { transform:rotate(90deg); }
.site-fly details.about p { font-size:14px; color:var(--muted); margin:8px 0 0; max-width:65ch; }

/* the aircraft switch as tabs */
.site-fly .ac-switch { gap:0 24px; margin:8px 0 12px; border-bottom:1px solid var(--line); }
.site-fly .ac-label { display:none; }
.site-fly .ac-switch > button { border:0; border-radius:0; background:none; color:var(--muted); font-size:14px; font-weight:600; padding:10px 0;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.site-fly .ac-switch > button[aria-pressed="true"] { background:none; color:var(--fg); border-bottom-color:var(--accent); }
.site-fly .ac-regs { flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 12px; }
.site-fly .ac-regs button { font-size:12px; padding:4px 10px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--bg); color:var(--fg); }
.site-fly .ac-regs button[aria-pressed="true"] { background:var(--soft); border-color:var(--accent); color:var(--fg); }

/* phases and the one row style (missions, radio sections) */
.site-fly .fly-phase { margin:32px 0 0; border:0; background:none; border-radius:0; }
.site-fly .fphase-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.site-fly .fphase-h h2 { margin:0; }
.site-fly .fly-phase > p.small { margin:8px 0 4px; max-width:65ch; }
.site-fly details.fly-lesson { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.site-fly details.fly-lesson > summary { display:grid; grid-template-columns:64px minmax(0, 1fr) 16px; gap:12px; align-items:center;
  padding:12px 0; cursor:pointer; list-style:none; background:none; border:0; border-radius:0; }
.site-fly details.fly-lesson > summary::-webkit-details-marker { display:none; }
.site-fly details.fly-lesson > summary::after { content:"›"; font-size:20px; line-height:1; color:var(--muted); transition:transform .15s; justify-self:end; }
.site-fly details.fly-lesson[open] > summary { background:none; border:0; }
.site-fly details.fly-lesson[open] > summary::after { transform:rotate(90deg); color:var(--accent); }
.site-fly .mcode { font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); background:var(--soft); border-radius:var(--r-ctl);
  padding:4px 0; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.site-fly .mt { min-width:0; }
.site-fly .mt strong { display:block; font-size:16px; font-weight:600; line-height:1.35; color:var(--fg); }
.site-fly .mmeta { display:block; font-size:14px; color:var(--muted); line-height:1.4; }
.site-fly details.fly-lesson:hover > summary .mt strong { color:var(--accent); }

/* inside a lesson */
.site-fly .fly-body { padding:4px 0 24px 76px; font-size:16px; line-height:1.6; }
@media (max-width:700px) { .site-fly .fly-body { padding-left:0; } }
.site-fly .fly-body h2 { font-size:16px; font-weight:700; margin:24px 0 8px; }
.site-fly .fly-body h3 { font-size:14px; font-weight:700; margin:16px 0 4px; }
.site-fly .fly-body table { font-size:14px; }
.site-fly .fly-jump { margin:8px 0; font-size:14px; font-weight:600; }
.site-fly .fly-docs { margin:8px 0 16px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:none; }
.site-fly .fly-docs > strong { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.site-fly .fly-docs ul { list-style:none; padding:0; margin:4px 0 0; }
.site-fly .fly-docs li { margin:0; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.site-fly .fly-docs li:last-child { border-bottom:0; }
.site-fly details.doc-study > summary { font-size:14px; font-weight:600; color:var(--accent); cursor:pointer; margin-top:4px; }
.site-fly details.fly-ready { margin:24px 0 0; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-card); background:none; }
.site-fly details.fly-ready > summary { padding:12px 0; font-size:16px; font-weight:600; cursor:pointer; }
.site-fly details.fly-ready > summary .count { margin-left:6px; }

/* radio tables: one table, no box around it, the AI note said once at the top */
.site-fly .fly-radio { margin:8px 0 16px; padding:0; border:0; border-radius:0; background:none; }
.site-fly .fly-radio th { font-size:12px; font-weight:600; letter-spacing:.06em; padding:8px 8px 6px 0; border-bottom:1px solid var(--line); }
.site-fly .fly-radio td { padding:10px 8px 10px 0; font-size:14px; }
.site-fly .fly-radio td:first-child { font-size:14px; }
.site-fly .fly-radio td:nth-child(2) { opacity:1; color:var(--muted); }
.site-fly .fly-radio tbody tr + tr td { border-top:1px solid var(--line); }
.site-fly .fly-radio .es-note { display:none; }
.site-fly .fly-radio td.es-none { font-size:12px; }
.site-fly .ai-tag { font-size:12px; font-weight:600; font-style:normal; letter-spacing:.02em; padding:1px 6px; border-radius:var(--r-ctl);
  background:var(--soft); color:var(--muted); border:1px solid var(--line); }
.site-fly .radio-src { font-size:12px; margin:4px 0 8px; }
.site-fly .radio-src a, .site-fly .radio-src a.fly-ref { font-size:12px; padding:0; border:0; background:none; text-transform:none; }
.site-fly .tr-box { margin:8px 0 24px; padding:16px; border:1px solid var(--line); border-radius:var(--r-card); background:none; }
.site-fly .tr-box h2 { font-size:16px; margin:0 0 4px; }
.site-fly .tr-box .meta { font-size:14px; }
.site-fly .tr-box .chat-send, .site-fly .weak-go, .site-fly .mock-start { border-radius:var(--r-ctl); }

/* school documents */
.site-fly .whats-new { margin:16px 0 0; padding:0; border:0; background:none; }
.site-fly .whats-new h2 { margin-top:16px; }
.site-fly .wn-list > li { margin:0; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.site-fly .wn-list > li > a { font-weight:600; }
.site-fly .wn-list p { font-size:14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
.site-fly .wn-list p.full { display:block; }
.site-fly .wn-tag { font-size:12px; font-weight:600; padding:1px 8px; border-radius:var(--r-ctl); }
.site-fly .docs-h { margin-top:32px; }
.site-fly details.doc-fold { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.site-fly details.doc-fold > summary { padding:12px 0; gap:12px; }
.site-fly details.doc-fold > summary::before { color:var(--muted); }
.site-fly details.doc-fold[open] > summary::before { color:var(--accent); }
.site-fly .doc-l1 > summary .doc-name { font-size:16px; font-weight:600; }
.site-fly .doc-count { margin-left:auto; padding:0; background:none; color:var(--muted); font-size:14px; font-weight:400; }
.site-fly .doc-inside { padding-left:22px; }

/* my progress: a summary card, then the missions as one list with full names */
.site-fly .psum-card { display:grid; gap:12px; padding:16px; border-radius:var(--r-card); background:var(--soft); margin:8px 0 8px; }
.site-fly .psum-card .psum { margin:0; font-size:16px; }
.site-fly .psum-card .weak-box { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0; }
.site-fly .weak-go { background:var(--accent); color:var(--on-accent); border:0; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; }
.site-fly .psum-card .weak-box .meta { font-size:14px; }
.site-fly .pfly-h { font-size:20px; }
.site-fly .pmap { display:grid; grid-template-columns:minmax(0, 1fr); gap:0; }
@media (min-width:900px) { .site-fly .pmap { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:32px; } }
.site-fly .ptile { display:grid; grid-template-columns:56px minmax(0, 1fr) auto; gap:4px 12px; align-items:center; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none;
  box-shadow:none; color:var(--fg); filter:none; opacity:1; }
.site-fly .ptile:hover { filter:none; }
.site-fly .ptile:hover .pname { color:var(--accent); }
.site-fly .ptile .pcode { grid-column:1; grid-row:1; font-size:12px; font-weight:700; color:var(--muted); background:var(--soft); border-radius:var(--r-ctl); padding:3px 0; text-align:center; }
.site-fly .ptile .pname { grid-column:2; grid-row:1; font-size:14px; font-weight:600; display:block; -webkit-line-clamp:unset; overflow:visible; white-space:normal; }
.site-fly .ptile .pval { grid-column:3; grid-row:1; align-self:center; font-size:16px; font-weight:700; color:var(--fg) !important; }
.site-fly .ptile.none .pval { color:var(--muted) !important; font-weight:400; }
.site-fly .ptile .pbar { grid-column:1 / -1; grid-row:2; height:6px; margin:4px 0 0; background:var(--soft); position:relative; overflow:visible; }
.site-fly .ptile .pbar::after { content:""; position:absolute; left:75%; top:-3px; bottom:-3px; width:2px; background:var(--muted); opacity:.5; }
.site-fly .ptile .pbar i { border-radius:3px; }
.site-fly .ptile .pmeta { grid-column:1 / -1; grid-row:3; font-size:12px; }
.site-fly .pfly-later .ptile { opacity:1; }
.site-fly .pfly-later .ptile .pbar { display:none; }

/* the phone app (mobile/): everything is on the phone, no sign-in, so no chat and nothing to install */
.native-app .q-ask, .native-app #chat, .native-app #chat-fab, .native-app .app-btn, .native-app .site-foot a[href="app.html"] { display:none !important; }
.native-app header.fhead { padding-top:calc(4px + env(safe-area-inset-top, 0px)); }

/* a mission in four tabs: Brief, In the air, Read, Check (4 Nov) */
.site-fly .mtabs { position:sticky; top:0; z-index:3; display:flex; gap:20px; margin:0 0 12px; background:var(--bg); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; }
.site-fly .mtabs button { flex:none; font:inherit; font-size:14px; font-weight:600; color:var(--muted); background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:10px 0; cursor:pointer; }
.site-fly .mtabs button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--accent); }
.site-fly .mpane > h2:first-child, .site-fly .mpane > .fly-docs:first-child { margin-top:8px; }
.site-fly .mpane .fly-docs h2 { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0; }
.site-fly .mpane .fly-jump { display:none; }
.site-fly details.ans { display:block; margin:4px 0 8px; }
.site-fly details.ans > summary { display:inline-block; font-size:14px; font-weight:600; color:var(--accent); cursor:pointer; list-style:none; }
.site-fly details.ans > summary::-webkit-details-marker { display:none; }
.site-fly details.ans[open] > summary { color:var(--muted); }
.site-fly details.ans { font-size:14px; }

.native-app .tr-box { display:none !important; }  /* "Translate a call" needs the server */

/* PPL · ATPL (4 Nov): two courses, one switch under the title */
.site-fly .prog-switch { display:inline-flex; gap:2px; padding:3px; margin:4px 0 12px; background:var(--soft); border-radius:var(--r-ctl); }
.site-fly .prog-switch a { font-size:14px; font-weight:600; color:var(--muted); padding:6px 16px; border-radius:4px; text-decoration:none; }
.site-fly .prog-switch a.on { background:var(--bg); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.site-fly .atpl-note { font-size:14px; color:var(--muted); margin:4px 0 8px; }
/* the PA28 (ATPL only) in the aircraft switch */
html[data-aircraft="pa28"] [data-ac="p2008"], html[data-aircraft="pa28"] [data-ac="c172"], html:not([data-aircraft="pa28"]) [data-ac="pa28"] { display:none !important; }