/* North Aero ground school — site chrome and components.
   All color/type/spacing values come from tokens.css. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* ── Chrome ─────────────────────────────────────────────── */
.utility-bar {
  height: 32px;
  background: var(--hangar-900);
  color: var(--fg-inverse);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.site-nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border-rule);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--fg); }
/* .wordmark, .eyebrow, .h1, .h2, .mono come from tokens.css — only layout deltas here. */
.site-nav .wordmark { font-size: var(--text-xl); }
.site-footer .wordmark { font-size: var(--text-lg); }
.site-nav nav { display: flex; gap: var(--space-5); }
.site-nav nav a { color: var(--fg-1); text-decoration: none; font-size: var(--text-sm); }
.site-nav nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.page { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); }

.site-footer {
  border-top: 1px solid var(--border-rule);
  background: var(--bg-canvas);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* ── Typography ─────────────────────────────────────────── */
.page .h1 { font-size: var(--text-4xl); margin: 0 0 var(--space-5); }
.page .h2 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-4); }
.eyebrow { margin: 0 0 var(--space-2); }
.page p { margin: 0 0 var(--space-4); }
.page hr { border: 0; border-top: 1px solid var(--border-rule); margin: var(--space-7) 0; }

/* ── Citation pop-outs (REQUIREMENTS 3.4) ───────────────── */
.cite-ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  cursor: pointer;
}
.cite-ref:hover { background: var(--parchment-dark); }
.cite-ref--drift { border-color: var(--caution-500); }
.cite-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cite-popout {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  background: var(--surface);
  color: var(--fg);
  max-width: 560px;
  width: calc(100vw - 32px);
  padding: 0;
}
.cite-popout::backdrop { background: rgba(26,27,29,0.45); }
.cite-popout-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-rule);
  padding: var(--space-4) var(--space-5);
}
.cite-popout-head .doc { font-weight: 600; }
.cite-popout-head .edition { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
.cite-popout-body { padding: var(--space-4) var(--space-5); }
.cite-popout-body blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 4px solid var(--hangar-700);
  color: var(--fg-1);
}
.cite-drift-band {
  background: var(--caution-100);
  border-bottom: 1px solid var(--caution-500);
  color: var(--caution-700);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
}
.finding-path { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--fg-2); }
.finding-path li { margin-bottom: var(--space-1); }
.cite-close {
  background: none;
  border: 0;
  font: inherit;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Quiz engine ────────────────────────────────────────── */
.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hairline);
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.quiz-card .slot-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-bottom: var(--space-2);
}
.quiz-question { font-size: var(--text-lg); font-weight: 500; margin: 0 0 var(--space-5); }
.quiz-stem {
  border-left: 4px solid var(--hangar-700);
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
}
.quiz-choices { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.quiz-choices button, .quiz-actions button, .email-gate button {
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-needle);
}
.quiz-choices button:hover { background: var(--parchment-dark); }
.quiz-choices button:active { transform: translateY(1px); }
.quiz-choices button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-choices button.correct { border-color: var(--beacon-500); background: var(--success-soft); }
.quiz-choices button.wrong { border-color: var(--warning-500); background: var(--danger-soft); }
.quiz-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.quiz-actions .primary, .email-gate .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.quiz-actions .primary:hover, .email-gate .primary:hover { background: var(--accent-hover); }
.quiz-written textarea {
  width: 100%;
  min-height: 120px;
  font: inherit;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--surface);
  margin-bottom: var(--space-4);
}
.model-answer {
  border-left: 4px solid var(--hangar-700);
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.email-gate label { display: block; font-weight: 500; margin-bottom: var(--space-2); }
.email-gate input {
  width: 100%;
  font: inherit;
  font-family: var(--font-mono);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface);
}
.email-confirm { font-family: var(--font-mono); font-size: var(--text-lg); margin: var(--space-4) 0; }
.quiz-note { font-size: var(--text-sm); color: var(--fg-3); }
.quiz-summary table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.quiz-summary td, .quiz-summary th {
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.result-pip { font-family: var(--font-mono); font-weight: 700; }
.result-pip.ok { color: var(--beacon-700); }
.result-pip.miss { color: var(--warning-700); }

/* ── Reading block (ADR 0017) ───────────────────────────── */
.reading-block {
  border: 1px solid var(--border);
  border-left: 4px solid var(--hangar-700);
  background: var(--surface-alt);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}
.reading-block .h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.reading-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.reading-item + .reading-item { border-top: 1px solid var(--border); }
.reading-assignment { color: var(--fg-1); }

.study-guide-link {
  color: var(--fg-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.study-guide-link:hover { color: var(--accent-press); }

/* ── Review document (REQUIREMENTS 4.1) ─────────────────── */
/* Print-oriented; deliberately linked from no nav. */
/* Card chrome comes from .quiz-card — only spacing and print-break deltas. */
.review-item {
  padding: var(--space-5);
  margin-top: var(--space-5);
  page-break-inside: avoid;
  break-inside: avoid;
}
.review-item-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.review-num { color: var(--fg-3); }
.layer-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}
.review-pool-tag { color: var(--runway-700); }
.review-choices {
  list-style-type: upper-alpha;
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.review-correct { color: var(--beacon-700); font-weight: 700; }
.model-answer .label-caps { display: block; margin-bottom: var(--space-1); }
.review-markup-rules {
  height: 96px;
  margin-top: var(--space-2);
  border: 1px dashed var(--border-strong);
  background: repeating-linear-gradient(
    to bottom, transparent, transparent 23px, var(--border) 23px, var(--border) 24px);
}
@media print {
  .review-item { box-shadow: none; }
  .review-markup-rules { border-color: var(--hangar-400); }
}

/* Video embeds (e.g. the ASI accident case study): stamp border, 16:9. */
.video-embed { margin: var(--space-6) 0; }
.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong);
  background: var(--hangar-900);
}
.video-embed figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Content tables (markdown-authored, e.g. the hazardous attitudes table).
   Direct children of .page only — quiz-summary tables style themselves. */
.page > table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
}
.page > table th,
.page > table td {
  border: 1px solid var(--border-rule);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.page > table th {
  background: var(--bg-canvas);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.page > table tbody tr:nth-child(even) td { background: var(--surface); }

/* Decision Tree (Anchor Accident) — the chain walked step by step, each step
   marked with the PAVE bucket that failed and where it could have been broken. */
.decision-tree {
  margin: var(--space-6) 0;
  border-left: 2px solid var(--border-strong);
  padding-left: 0;
}
.dt-step {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
}
.dt-step + .dt-step { border-top: 1px solid var(--border); }
.dt-pave {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-left: calc(-1rem - var(--space-5) - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg);
  color: var(--hangar-700);
}
.dt-pave[data-pave="P"] { border-color: var(--sky-dusk); color: var(--sky-deep); }
.dt-pave[data-pave="A"] { border-color: var(--caution-500); color: var(--caution-700); }
.dt-pave[data-pave="V"] { border-color: var(--runway-500); color: var(--runway-700); }
.dt-pave[data-pave="E"] { border-color: var(--warning-500); color: var(--warning-700); }
.dt-pave[data-pave="X"] { border-color: var(--hangar-800); background: var(--hangar-800); color: var(--parchment-light); }
.dt-body p { margin: 0 0 var(--space-2); }
.dt-break {
  color: var(--fg-2);
  font-size: var(--text-sm);
  border-left: 3px solid var(--beacon-500);
  padding-left: var(--space-3);
}
.dt-step--end .dt-break { border-left-color: var(--hangar-400); }