/* FlightDesk Aero question bank. Loaded after home.css and article.css. */

.q { margin-top: 2.2em; padding: 22px clamp(16px, 3vw, 26px); background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.q-num { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.prose .q-title { font-size: clamp(21px, 2.3vw, 25px); margin: 0.5em 0 0; }
.prose .q-title a { color: var(--ink); text-decoration: none; }
.prose .q-title a:hover { color: var(--magenta); }
.prose .q-stem { font-weight: 500; margin-top: 0.8em; }
.prose .q-opts { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: 10px; }
.prose .q-opts li + li { margin-top: 0; }
.q-opt { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; font: 500 17px/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.q-opt:hover:not(:disabled) { border-color: var(--blue); }
.q-opt:disabled { cursor: default; }
.q-letter { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); font: 600 14px var(--mono); }
.q-opt.is-right { border-color: #2f8f5b; background: rgba(47, 143, 91, 0.1); }
.q-opt.is-right .q-letter { background: #2f8f5b; border-color: #2f8f5b; color: #fff; }
.q-opt.is-wrong { border-color: var(--magenta); background: rgba(176, 40, 122, 0.08); }
.q-opt.is-wrong .q-letter { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.q.answered .q-opt:not(.is-right):not(.is-wrong) { opacity: 0.6; }
.prose .q-result { font-weight: 600; margin-top: 1em; }
.q-result.ok { color: #2f8f5b; }
.q-result.no { color: var(--magenta); }
.q-again, .q-reset { font: 500 14px var(--body); color: var(--blue); background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.q-expl { margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid var(--rule); }
.q-expl > * + * { margin-top: 0.9em; }
.prose .q-expl h3 { margin-top: 0; font-size: 21px; }
.prose .q-expl h4 { margin-top: 1.4em; font: 600 13px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.q-formula { overflow-x: auto; padding: 4px 0; font-size: 1.05em; }
.q-formula .katex-display { margin: 0.4em 0; }
.q-fig { margin: 1em 0 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }
.q-fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.q-figq { margin: 1em 0 0; }
.q-figq svg { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.q-figq img { display: block; width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
/* A real chart: full card width, opens full size on a tap (quiz.js). */
.q-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.q-zoom-hint { margin: 0.3em 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.q-zoomer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; }
.q-zoomer::backdrop { background: rgba(5, 12, 20, 0.7); }
.q-zoomer .q-zoomer-pane { width: 100%; height: 100%; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.q-zoomer img { display: block; max-width: none; width: auto; height: auto; }
.q-zoomer .q-zoomer-close { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 1; }
/* Real weather messages (METAR, TAF, SIGMET) exactly as issued, and the credit line for real material. */
.q-wx { margin: 1em 0 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; font: 500 14px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: normal; word-break: normal; hyphens: none; }
.q-wx span { white-space: nowrap; }
.prose .q-source { margin: 0.4em 0 0; font-size: 13px; color: var(--ink-soft); }
.prose .q-tip { background: var(--paper); border-left: 4px solid var(--blue); border-radius: 8px; padding: 12px 16px; font-size: 17px; }
.q-related { display: flex; flex-wrap: wrap; gap: 10px; }
.prose .q-related a.btn { color: var(--ink); text-decoration: none; }
.prose .q-changed { margin: 0.6em 0 0; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); }

/* Diagrams drawn for the questions. */
.qd-line { stroke: var(--ink); stroke-width: 2; fill: none; }
.qd-soft { stroke: var(--ink-soft); stroke-width: 1.3; stroke-dasharray: 5 5; fill: none; }
.qd-acc { stroke: var(--magenta); stroke-width: 3; fill: none; stroke-linecap: round; }
.qd-vec { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; }
.qd-dot { fill: var(--ink); }
.qd-head { fill: var(--ink); }
.qd-box { fill: var(--card); stroke: var(--ink-soft); stroke-width: 1.3; }
.qd-boxacc { stroke: var(--magenta); stroke-width: 2.5; }
.qd-txt { font: 500 14px var(--mono); fill: var(--ink); }
.qd-big { font: 700 16px var(--mono); fill: var(--magenta); }
.qd-small { font: 500 12px var(--mono); fill: var(--ink-soft); }
.qd-thin { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.qd-sun { fill: #e0a526; }
.qd-shade { fill: var(--ink); fill-opacity: 0.14; }
.qd-tint { fill: var(--blue); fill-opacity: 0.15; }
.qd-tintacc { fill: var(--magenta); fill-opacity: 0.14; }
.qd-mid { text-anchor: middle; }

/* Subject and hub pages. */
.q-score { position: sticky; top: 72px; z-index: 5; display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); font: 500 14px var(--mono); }
.q-score b { font-size: 18px; color: var(--magenta); }
.prose .q-chapters { list-style: none; padding: 0; }
.q-chap-code { font: 600 13px var(--mono); color: var(--magenta); margin-right: 6px; }
.q-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prose .q-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; }
.prose a.q-card:hover { border-color: var(--magenta); }
.q-card.soon { opacity: 0.6; }
.q-card-code { font: 600 13px var(--mono); color: var(--magenta); }
.q-card-name { font: 700 18px/1.25 var(--display); }
.q-card-meta { font-size: 14px; color: var(--ink-soft); }
.q-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 1.6em; font-size: 16px; }
.q-cta { margin-top: 2.4em; padding: 22px 24px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.prose .q-cta h2 { margin: 0; font-size: 24px; color: var(--paper); }
.prose .q-cta p { color: var(--paper); }
.prose .q-cta a.btn { background: var(--paper); color: var(--ink); border-color: var(--paper); text-decoration: none; }
.prose .q-cta a.btn:hover { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.prose .q-disclaimer { font-size: 14px; color: var(--ink-soft); margin-top: 2em; }


/* Legal pages share this stylesheet. */
.prose.legal h2 { font-size: clamp(21px, 2.3vw, 25px); margin-top: 1.8em; }
/* Review of a past session: corrected, read-only */
.q-review { margin: 0 0 1.4em; padding: 14px 18px; border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: 12px; background: var(--card); }
.q-review.no { border-left-color: var(--magenta); }
.prose .q-review p { margin: 0.2em 0; }
.prose .q-review .q-review-title { font: 600 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.prose .q-review-links { font-weight: 600; }
.q.reviewed .q-opt { cursor: default; }
.q-yours { margin-left: auto; padding-left: 10px; font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.q-opt.is-right .q-yours { color: #2f8f5b; }
.q-opt.is-wrong .q-yours { color: var(--magenta); }

/* Picking an option, then saying how sure you are. */
.q-opt.is-picked { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--paper)); }
.q-opt.is-picked .q-letter { background: var(--blue); border-color: var(--blue); color: #fff; }
.q-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px dashed var(--blue); }
.q-conf-ask { font-weight: 600; margin-right: 4px; }
.q-conf-btn { font: 600 15px var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.q-conf-btn:hover, .q-conf-btn:focus-visible { border-color: var(--blue); }
.q-conf-skip { margin-left: auto; font: 500 14px var(--body); color: var(--ink-soft); background: none; border: 0; padding: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* After the answer: the confusion behind a wrong option, and a note on confidence. */
.prose .q-mis { margin-top: 0.8em; padding: 10px 14px; border-radius: 10px; background: rgba(176, 40, 122, 0.07); border-left: 4px solid var(--magenta); font-size: 16px; }
.q-mis-label { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.prose .q-note { margin-top: 0.6em; font-size: 15px; font-weight: 500; }
.q-note.ok { color: #2f8f5b; }
.q-note.no { color: var(--magenta); }

/* "Report an error". */
.prose .q-meta { margin-top: 1.4em; font: 500 13px var(--mono); color: var(--ink-soft); }
.q-report { font: 500 13px var(--mono); color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.q-report:hover { color: var(--magenta); }
.q-report-form { margin-top: 0.8em; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); display: grid; gap: 10px; }
.prose .q-report-form p { margin: 0; }
.q-report-title { font-weight: 600; }
.q-report-form label { display: grid; gap: 4px; font-size: 15px; }
.q-report-form select, .q-report-form textarea, .q-report-form input { font: 16px var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; }
.q-report-status { font-size: 14px; color: var(--magenta); }
.q-report-status:empty { display: none; }
.prose .q-report-done { color: #2f8f5b; font-weight: 500; }

/* The navigation computer opened over the question. */
.q-tool-dlg { width: min(1100px, 96vw); height: min(860px, 92vh); padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink); overflow: hidden; }
.q-tool-dlg[open] { display: flex; flex-direction: column; }
.q-tool-dlg::backdrop { background: rgba(15, 42, 74, 0.55); }
.q-tool-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-family: var(--display); }
.q-tool-dlg iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.q-conf[hidden] { display: none; }

/* Step by step: one input per step, each checked with the student's own earlier values. */
.q-work-open { display: inline-block; margin-top: 10px; font: 600 15px var(--body); color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.q-work { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.q-work[hidden] { display: none; }
.q-work-hint { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-soft); }
.prose .q-work-steps { margin: 0; padding-left: 1.4em; }
.q-work-step { margin: 0 0 10px; }
.q-work-step label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.q-work-label { flex: 1 1 14em; }
.q-work-field { display: inline-flex; align-items: center; gap: 6px; }
.q-work-field input { width: 6.5em; font: 500 16px var(--body); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); text-align: right; }
.q-work-step.ok input { border-color: #2f8f5b; }
.q-work-step.no input { border-color: var(--magenta); }
.q-work-unit { color: var(--ink-soft); min-width: 1.5em; }
.q-work-mark { display: block; font-size: 15px; margin-top: 2px; }
.q-work-step.ok .q-work-mark { color: #2f8f5b; }
.q-work-step.no .q-work-mark { color: var(--magenta); }
.prose .q-work-sum { margin: 8px 0 0; font-weight: 600; }
.q-work-sum.ok { color: #2f8f5b; }

/* "Submit" at the end of a page of questions, and the score window it opens. */
.prose .q-submit-row { margin-top: 2em; text-align: center; }
.q-score-dlg { width: min(360px, 92vw); padding: 24px 22px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink); text-align: center; }
.q-score-dlg::backdrop { background: rgba(15, 42, 74, 0.55); }
.q-score-dlg p { margin: 0; }
.q-score-title { font: 600 13px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.q-score-pct { margin-top: 6px !important; font: 700 56px/1.1 var(--display); }
.q-score-pct.ok, .q-score-of .ok { color: #2f8f5b; }
.q-score-pct.no { color: #c62828; }
.q-score-of { font-size: 20px; font-weight: 500; }
.q-score-open { margin-top: 6px !important; font-size: 15px; color: var(--ink-soft); }
.q-score-pass { margin-top: 14px !important; font-size: 14px; color: var(--ink-soft); }
.q-score-dlg .btn { margin-top: 18px; }

/* Full bank: chapter pages filled in for accounts that hold the bank. */
.q-sec { margin: 2.2em 0 0; }
.q-bank-msg { margin: 1.4em 0; padding: 14px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }
.q-bank-msg.no { border-color: var(--magenta); }
.q-bank-msg .btn { margin-left: 0.4em; }
.q-bank-note { font-size: 14px; }
.q-bank-link { margin-top: 2em; }

/* Diagram kit (qbank tools/diagramkit.py, house style in diagrams/STYLE.md).
   Colours carry meaning: blue heading and air, magenta track and the answer,
   teal wind, navy fixed references, purple radio aids. */
.q-fig svg.dk { max-width: 540px; }
.q-figq svg.dk { max-width: 300px; }
.q-figq.wide svg.dk { max-width: 540px; }
/* Keep ":" after a capital in its normal place (contextual alternates off), e.g. "cP: cold". */
.q { font-feature-settings: "calt" 0; }
svg.dk {
  --dk-hdg: var(--blue); --dk-trk: var(--magenta); --dk-acc: var(--magenta); --dk-wind: #0f7d77;
  --dk-nav: #4b3f93; --dk-ndb: #8a3f86; --dk-ac: var(--ink); --dk-warn: #c23b22; --dk-sun: #e0a526;
  --dk-moon: #b9b39b; --dk-gnd: #7d6b45; --dk-grid: rgba(15, 42, 74, 0.10);
  --dk-sky1: #d8e6f3; --dk-sky2: #f2efe6; --dk-gnd1: #ddd2b2; --dk-gnd2: #cbbd96;
  --dk-ter1: #c4b089; --dk-ter2: #9c8760; --dk-water: #cfe1ef; --dk-watl: #7fa6c9;
  --dk-cloud: #ffffff; --dk-cloud-edge: #95a5b7; --dk-cb: #8a96a6; --dk-cb-edge: #5d6b7c;
  --dk-zone-acc: rgba(176, 40, 122, 0.13); --dk-zone-hdg: rgba(43, 108, 176, 0.15);
  --dk-zone-ink: rgba(15, 42, 74, 0.13); --dk-night: rgba(10, 26, 46, 0.32); --dk-zone-warn: rgba(194, 59, 34, 0.14); --dk-zone-wind: rgba(15, 125, 119, 0.14);
  font-family: var(--body);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) svg.dk {
    --dk-wind: #3fc1b8; --dk-nav: #a99cf0; --dk-ndb: #d68ad0; --dk-warn: #f07a5e; --dk-moon: #e8e2c6;
    --dk-gnd: #b9a679; --dk-grid: rgba(231, 236, 242, 0.09);
    --dk-sky1: #18314d; --dk-sky2: #0c1622; --dk-gnd1: #3a3324; --dk-gnd2: #2b261a;
    --dk-ter1: #5a4c33; --dk-ter2: #3f3423; --dk-water: #15324d; --dk-watl: #4f7fa8;
    --dk-cloud: #dfe6ee; --dk-cloud-edge: #8ea0b3; --dk-cb: #5b6878; --dk-cb-edge: #9aa9ba;
    --dk-zone-acc: rgba(228, 90, 169, 0.20); --dk-zone-hdg: rgba(110, 168, 234, 0.20);
    --dk-zone-ink: rgba(231, 236, 242, 0.14); --dk-night: rgba(0, 0, 0, 0.45); --dk-zone-warn: rgba(240, 122, 94, 0.2); --dk-zone-wind: rgba(63, 193, 184, 0.2);
  }
}
:root[data-theme="dark"] svg.dk {
  --dk-wind: #3fc1b8; --dk-nav: #a99cf0; --dk-ndb: #d68ad0; --dk-warn: #f07a5e; --dk-moon: #e8e2c6;
  --dk-gnd: #b9a679; --dk-grid: rgba(231, 236, 242, 0.09);
  --dk-sky1: #18314d; --dk-sky2: #0c1622; --dk-gnd1: #3a3324; --dk-gnd2: #2b261a;
  --dk-ter1: #5a4c33; --dk-ter2: #3f3423; --dk-water: #15324d; --dk-watl: #4f7fa8;
  --dk-cloud: #dfe6ee; --dk-cloud-edge: #8ea0b3; --dk-cb: #5b6878; --dk-cb-edge: #9aa9ba;
  --dk-zone-acc: rgba(228, 90, 169, 0.20); --dk-zone-hdg: rgba(110, 168, 234, 0.20);
  --dk-zone-ink: rgba(231, 236, 242, 0.14); --dk-night: rgba(0, 0, 0, 0.45); --dk-zone-warn: rgba(240, 122, 94, 0.2); --dk-zone-wind: rgba(63, 193, 184, 0.2);
}
.dk .dk-s-ink { stroke: var(--ink); } .dk .dk-f-ink { fill: var(--ink); }
.dk .dk-s-soft { stroke: var(--ink-soft); } .dk .dk-f-soft { fill: var(--ink-soft); }
.dk .dk-s-hdg { stroke: var(--dk-hdg); } .dk .dk-f-hdg { fill: var(--dk-hdg); }
.dk .dk-s-trk { stroke: var(--dk-trk); } .dk .dk-f-trk { fill: var(--dk-trk); }
.dk .dk-s-acc { stroke: var(--dk-acc); } .dk .dk-f-acc { fill: var(--dk-acc); }
.dk .dk-s-wind { stroke: var(--dk-wind); } .dk .dk-f-wind { fill: var(--dk-wind); }
.dk .dk-s-nav { stroke: var(--dk-nav); } .dk .dk-f-nav { fill: var(--dk-nav); }
.dk .dk-f-ndb { fill: var(--dk-ndb); }
.dk .dk-s-warn { stroke: var(--dk-warn); } .dk .dk-f-warn { fill: var(--dk-warn); }
.dk .dk-s-ac { stroke: var(--dk-ac); } .dk .dk-f-ac { fill: var(--dk-ac); }
.dk .dk-acedge { stroke: var(--paper); stroke-width: 0.9; paint-order: stroke; }
.dk .dk-s-gnd { stroke: var(--dk-gnd); } .dk .dk-f-gnd { fill: var(--dk-gnd); }
.dk .dk-s-grid { stroke: var(--dk-grid); }
.dk .dk-s-sun { stroke: var(--dk-sun); } .dk .dk-f-sun { fill: var(--dk-sun); }
.dk .dk-f-moon { fill: var(--dk-moon); }
.dk .dk-f-water { fill: var(--dk-water); } .dk .dk-s-watl { stroke: var(--dk-watl); }
.dk .dk-f-card { fill: var(--card); }
.dk .dk-nofill { fill: none; }
.dk .dk-cloud { fill: var(--dk-cloud); stroke: var(--dk-cloud-edge); stroke-width: 1.3; }
.dk .dk-cb { fill: var(--dk-cb); stroke: var(--dk-cb-edge); stroke-width: 1.3; }
.dk .dk-card { fill: var(--card); stroke: var(--dk-acc); stroke-width: 1.6; }
.dk .dk-note { fill: var(--card); stroke: var(--rule); stroke-width: 1; }
.dk .dk-zone-acc { fill: var(--dk-zone-acc); } .dk .dk-zone-hdg { fill: var(--dk-zone-hdg); }
.dk .dk-zone-ink { fill: var(--dk-zone-ink); } .dk .dk-zone-warn { fill: var(--dk-zone-warn); }
.dk .dk-zone-wind { fill: var(--dk-zone-wind); }
/* Night and twilight: always darker than day, in both themes. */
.dk .dk-night { fill: var(--dk-night); }
.dk stop.dk-stop-sky1 { stop-color: var(--dk-sky1); } .dk stop.dk-stop-sky2 { stop-color: var(--dk-sky2); }
.dk stop.dk-stop-gnd1 { stop-color: var(--dk-gnd1); } .dk stop.dk-stop-gnd2 { stop-color: var(--dk-gnd2); }
.dk stop.dk-stop-ter1 { stop-color: var(--dk-ter1); } .dk stop.dk-stop-ter2 { stop-color: var(--dk-ter2); }
.dk .dk-sans { font-family: var(--body); }
.dk .dk-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dk .dk-caps { letter-spacing: 0.08em; text-transform: uppercase; }
.dk .dk-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 3.6px; stroke-linejoin: round; }
.dk tspan.dk-en:not(:lang(en)), .dk tspan.dk-es:not(:lang(es)), .dk tspan.dk-ro:not(:lang(ro)) { display: none; }
.dk .dk-num { font-family: var(--body); font-variant-numeric: tabular-nums lining-nums; }