/* Holding Pattern Trainer: the prototype's behavior in the approved mockup's look.
   Tokens come from reference/design/design-tokens.css; everything below styles through them. */

:root {
  /* Page chrome */
  --page-bg: #edf1f5;
  --surface: #ffffff;
  --rule: #d2dbe5;
  --rule-soft: #e4eaf1;
  --ink: #0e2238;
  --ink-muted: #4a5c72;
  --ink-faint: #6a7b90;

  /* Title band and dark panels */
  --navy: #0e2238;
  --navy-ink: #f2f6fb;
  --navy-muted: #9fb3cc;
  --gold: #f5cf55;               /* live values on navy or blue only; never on white */

  /* Controls */
  --accent: #1d4f9c;
  --accent-hover: #163d7a;
  --ring-button: #5b95ff;
  --tab-active: #e0359f;
  --switch-on: #1f9d50;
  --switch-on-stage: #36d06a;
  --switch-off: #c3cedb;

  /* Status pills */
  --ok-ink: #17703a;   --ok-bg: #dcf3e4;
  --warn-ink: #8a5300; --warn-bg: #fbefd5;
  --bad-ink: #a3261b;  --bad-bg: #fbe2df;

  /* Diagram stage */
  --stage-gradient: linear-gradient(155deg, #1b58ac 0%, #103d82 48%, #0a2658 100%);
  --stage-texture: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, rgba(255,255,255,0) 1px 4px);
  --stage-border: #ffffff;
  --stage-ink: #ffffff;
  --stage-muted: #c9d9f1;

  /* Diagram marks */
  --dia-line: #081833;
  --sector-off: rgba(199, 210, 227, .42);
  --sector-on: rgba(54, 208, 106, .90);
  --pattern: #f3e3a0;
  --course: #ff3fd2;
  --course-label: #ff9eea;
  --bead: #ff3fd2;
  --bead-outline: #5c0050;
  --fix-fill: #ffffff;
  --airplane: #f4f7fb;
  --airplane-glass: #5f7aa3;
  --wind: #7fd3ff;
  --ghost-track: #ff9a62;
  --rollout: #f5cf55;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "B612 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-body: 15px;
  --fs-label: 11px;
  --fs-panel-head: 22px;
  --fs-stage-title: 46px;
  --fs-app-title: 50px;

  /* Shape and spacing */
  --radius-panel: 10px;
  --radius-control: 7px;
  --radius-input: 6px;
  --radius-chip: 4px;
  --gap-l: 20px;
  --gap-m: 14px;
  --page-max: 1360px;
  --gutter: 32px;
  --touch: 44px;

  /* Further values the mockup uses */
  --stage-caption: #dbe6f6;
  --strip-rule: #c6d1dd;
  --debrief-ink: #e8eef7;
  --tees-ink: #33465c;
  --triple-bg: #dbe9f6;
  --triple-mid-bg: #fbe0f3;
  --focus: #5b95ff;
  --track-pointer: #36d06a;      /* ground-track pointer on the Wind stage */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page-bg); touch-action: manipulation; } /* no double-tap zoom on quick taps; pinch zoom still works */
body {
  margin: 0; min-height: 100vh; background: var(--page-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

.wrap { max-width: var(--page-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Title band and tabs ---------- */
.band { background: var(--navy); color: var(--navy-ink); }
.band .wrap { padding-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.eyebrow { font-family: var(--font-data); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-muted); }
.title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-app-title); line-height: 1.02; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.refs span { font-family: var(--font-data); font-size: 11px; border: 1px solid rgba(242,246,251,.25); border-radius: var(--radius-chip); padding: 3px 7px; color: var(--navy-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.tab {
  border: 0; background: none; min-height: var(--touch);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy-muted); padding: 12px 14px 11px; border-bottom: 3px solid transparent;
}
.tab:hover { color: #ffffff; }
.tab[aria-selected="true"] { color: #ffffff; border-bottom-color: var(--tab-active); }
.tab small { font-family: var(--font-data); font-size: 10.5px; margin-right: 6px; opacity: .75; }
.tab:focus-visible { outline-color: #ffffff; outline-offset: -3px; }

/* ---------- Page layout ---------- */
.main { padding-top: 28px; padding-bottom: 64px; }
.view { display: flex; flex-direction: column; gap: 22px; }
.vh { display: flex; flex-direction: column; gap: 6px; max-width: 78ch; }
.vh h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; }
.vh p { margin: 0; color: var(--ink-muted); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-l); align-items: flex-start; }
.side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-l); }
.cards { display: flex; flex-wrap: wrap; gap: var(--gap-l); align-items: stretch; }
.cards > .panel { flex: 1 1 420px; }
.cards.three > .panel { flex: 1 1 300px; }

.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  padding: 20px; display: flex; flex-direction: column; gap: var(--gap-m); min-width: 0;
}
.ph { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-panel-head); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.lab, .f label, .f .lab {
  font-family: var(--font-data); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.hint { margin: 0; font-size: 13px; color: var(--ink-muted); }
.panel ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.note { margin: 0; font-size: 13px; color: var(--ink-muted); border-left: 3px solid var(--rule); padding-left: 10px; }
.note.warn { border-left-color: var(--warn-ink); color: var(--warn-ink); }

/* ---------- The blue stage ---------- */
.stage {
  flex: 999 1 600px; min-width: 0; position: relative;
  border: 2px solid var(--stage-border); border-radius: var(--radius-panel); box-shadow: 0 0 0 1px var(--navy);
  background: var(--stage-texture), var(--stage-gradient); color: var(--stage-ink);
  padding: 22px 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.stage.wide { flex-basis: 640px; }
.stage :focus-visible { outline-color: #ffffff; }
.stage-sub { font-family: var(--font-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-muted); text-align: center; }
.stage-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-stage-title); line-height: 1; text-align: center; }
.dia { display: block; width: 100%; height: auto; margin-top: 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* While the airplane is being dragged, nothing on the page can be selected. */
html.dragging, html.dragging * { -webkit-user-select: none; user-select: none; }
.dia.compass { max-width: 620px; }
.dia.compass.draggable { cursor: grab; }
.dia.compass.dragging { cursor: grabbing; }
.drag { margin: -6px 0 0; min-height: 30px; line-height: 30px; font-size: 15px; font-weight: 500; color: #ffffff; text-align: center; }
.stage > .hud { margin-top: -6px; }
.cap { margin: 0; font-size: 14px; color: var(--stage-caption); flex: 1 1 280px; }
.sbar { align-self: stretch; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 8px; }
.sbar .grp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hud { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: center; font-family: var(--font-data); font-size: 13px; color: var(--stage-muted); min-height: 30px; }
.hud b { font-size: 20px; color: var(--gold); }

/* Stage controls */
.sbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 9px 16px;
  border-radius: var(--radius-control); border: 1.5px solid #ffffff; background: rgba(7,20,48,.35); color: #ffffff;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .05em; text-transform: uppercase;
}
.sbtn.fill { background: #ffffff; color: var(--navy); }
.sbtn:hover { background: rgba(7,20,48,.55); }
.sbtn.fill:hover { background: #e6edf7; }
.sbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sseg { display: inline-flex; border: 1.5px solid rgba(255,255,255,.85); border-radius: var(--radius-control); overflow: hidden; }
.sseg button {
  border: 0; background: none; min-height: 42px; padding: 9px 14px; color: #ffffff;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
}
.sseg.data button { font-family: var(--font-data); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; padding: 9px 13px; }
.sseg button[aria-pressed="true"] { background: #ffffff; color: var(--navy); }

/* Switches: role="switch" buttons. Dual switches pick one of two options and stay green. */
.sw, .ssw {
  display: flex; align-items: center; gap: 8px; min-height: var(--touch); border: 0; background: none; padding: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
}
.ssw { gap: 10px; font-size: 17px; letter-spacing: .05em; color: var(--stage-muted); }
.ssw .nm { color: #ffffff; margin-right: 6px; }
.trk { width: 50px; height: 26px; border-radius: 13px; background: var(--switch-on); position: relative; display: block; flex: none; }
.ssw .trk { background: var(--switch-on-stage); }
.kn { position: absolute; top: 3px; left: 27px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); }
.ssw .kn { background: var(--dia-line); }
[aria-checked="false"] > .trk { background: var(--switch-off); }
.ssw[aria-checked="false"] > .trk { background: rgba(255,255,255,.35); }
[aria-checked="false"] > .trk .kn { left: 3px; background: #ffffff; }
.dual[aria-checked="false"] > .trk { background: var(--switch-on); }
.ssw.dual[aria-checked="false"] > .trk { background: var(--switch-on-stage); }
.dual[aria-checked="false"] > .trk .kn { background: var(--navy); }
.ssw.dual[aria-checked="false"] > .trk .kn { background: var(--dia-line); }
.sw[aria-checked="true"] .on-l, .sw[aria-checked="false"] .off-l { color: var(--ink); }
.ssw[aria-checked="true"] .on-l, .ssw[aria-checked="false"] .off-l, .ssw:not(.dual) > span:first-child { color: #ffffff; }
.trows { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule-soft); padding: 2px 0; }
.trow.last { border-bottom: 0; padding-top: 10px; }
.trow.top { border-bottom: 0; border-top: 1px solid var(--rule-soft); padding-top: 6px; }
.tname { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; }

/* Segmented controls on white */
.seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; border: 1px solid var(--rule); border-radius: var(--radius-control); overflow: hidden; background: var(--page-bg); }
.seg button { border: 0; background: none; min-height: 42px; padding: 9px 13px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #ffffff; }
.seg button:disabled { opacity: .5; }

/* Forms */
.fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m); }
.fg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.num {
  width: 100%; min-height: var(--touch); padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-input);
  background: var(--page-bg); font-family: var(--font-data); font-size: 16px; color: var(--ink);
}
.num:focus { border-color: var(--accent); background: #ffffff; }
.num[aria-invalid="true"] { border-color: var(--bad-ink); }
.rng { width: 100%; min-height: 32px; accent-color: var(--accent); }

/* Buttons on white */
.btn {
  align-self: flex-start; min-height: var(--touch); padding: 9px 16px; border-radius: var(--radius-control);
  border: 1.5px solid var(--accent); background: none; color: var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .05em; text-transform: uppercase;
}
.btn:hover, .btn[aria-expanded="true"] { background: var(--accent); color: #ffffff; }

/* Navy panels and readouts */
.instr {
  background: var(--navy); color: #ffffff; border: 2px solid var(--stage-border); box-shadow: 0 0 0 1px var(--navy);
  border-radius: var(--radius-panel); padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
}
.instr .ph { font-size: 27px; }
.instr :focus-visible { outline-color: #ffffff; }
.ctr { display: flex; align-items: center; gap: 16px; }
.rb {
  width: var(--touch); height: var(--touch); flex: none; border-radius: 50%; border: 2px solid var(--ring-button); background: none; color: #ffffff;
  font-family: var(--font-data); font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.rb:hover { background: rgba(91,149,255,.18); }
.gv { font-family: var(--font-data); font-weight: 700; font-size: 30px; color: var(--gold); white-space: nowrap; }
.gu { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--gold); text-transform: uppercase; margin-left: 6px; }
.irule { align-self: stretch; height: 1px; background: rgba(255,255,255,.18); }
.isub { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; font-family: var(--font-data); font-size: 12px; color: var(--navy-muted); letter-spacing: .06em; text-transform: uppercase; }
.fixin {
  width: 12ch; min-height: 32px; padding: 2px 4px; border: 0; border-bottom: 1px dashed rgba(159,179,204,.6); background: none;
  font-family: var(--font-data); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; text-align: center;
}
.fixin:focus { outline: none; border-bottom-color: #ffffff; }
.gclr { margin: 0; align-self: stretch; text-align: left; font-family: var(--font-data); font-size: 16px; line-height: 1.65; text-transform: uppercase; border: 1px dashed rgba(255,255,255,.35); border-radius: var(--radius-input); padding: 12px 14px; }
.gclr b { color: var(--gold); }

.out {
  background: var(--navy); color: #ffffff; border: 2px solid var(--stage-border); box-shadow: 0 0 0 1px var(--navy);
  border-radius: var(--radius-panel); padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;
}
.out.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.out.rband { padding: 18px 22px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ro { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ro span { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ro b { font-family: var(--font-data); font-size: 19px; }
.ro em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.out .ro span { color: var(--navy-muted); }
.out .ro b { font-size: 22px; color: var(--gold); }
.out.rband .ro b { font-size: 21px; }
.out .ro em { color: var(--stage-muted); }
.ro4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* Status pills and tables */
.st { display: inline-block; align-self: flex-start; font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-chip); white-space: nowrap; }
.st.ok { color: var(--ok-ink); background: var(--ok-bg); }
.st.warn { color: var(--warn-ink); background: var(--warn-bg); }
.st.bad { color: var(--bad-ink); background: var(--bad-bg); }
.tbox { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-family: var(--font-data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.t td { padding: 8px; border-bottom: 1px solid var(--rule-soft); }
table.t td.m { font-family: var(--font-data); white-space: nowrap; }
.gnum { display: inline-block; font-family: var(--font-data); font-weight: 700; color: var(--gold); background: var(--navy); border-radius: var(--radius-chip); padding: 1px 8px; }

/* ---------- Anatomy ---------- */
.panel .terms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.term {
  width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: var(--radius-control);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-height: var(--touch);
}
.term:hover { background: var(--page-bg); }
.term b { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.term span { font-size: 13px; color: var(--ink-muted); }
.term.on { background: var(--navy); color: #ffffff; }
.term.on span { color: var(--stage-muted); }
.term .dot { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--navy); }
.term.on .dot { display: inline-block; }

.anat .part { transition: opacity .15s; }
.anat.focus .part { opacity: .55; }
.anat.focus .part.on { opacity: 1; }
.anat .part.on .lb { fill: var(--gold); }
.anat .halo { display: none; }
.anat .part.on .halo { display: inline; }
.nh { fill: #ffffff; fill-opacity: .05; stroke: #ffffff; stroke-opacity: .35; stroke-dasharray: 5 6; }
.hs { fill: #ffffff; fill-opacity: .1; }
.reg { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .14em; fill: #ffffff; fill-opacity: .8; text-anchor: middle; }
.cext { stroke: var(--course); stroke-width: 1.6; stroke-dasharray: 7 6; }
.inb { stroke: var(--course); stroke-width: 3.6; }
.under { fill: none; stroke: var(--dia-line); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }
.pale { fill: none; stroke: var(--pattern); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.ar { fill: var(--pattern); stroke: var(--dia-line); stroke-width: 1.2; }
.ar.m { fill: var(--course); }
.lb { font-family: var(--font-data); font-size: 13px; fill: #ffffff; }
.lb.sm { font-size: 11px; fill: var(--stage-muted); }
.lb.mg { fill: var(--course-label); font-weight: 700; }
.lb.bd { font-weight: 700; }
.lb.mid { text-anchor: middle; }
.lb.end { text-anchor: end; }
.abm { stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 4 4; }
.abd { fill: var(--gold); stroke: var(--dia-line); stroke-width: 2; }
.halo { fill: none; stroke: var(--gold); stroke-width: 2; stroke-opacity: .55; }
.fix { fill: var(--fix-fill); stroke: var(--dia-line); stroke-width: 2.5; }
.fixdot { fill: var(--dia-line); }

.timing-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.tsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.tsteps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 8px; background: var(--page-bg); }
.tsteps li.key { background: var(--triple-mid-bg); outline: 2px solid var(--tab-active); }
.tsteps b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; display: block; line-height: 1.1; }
.tsteps p { margin: 4px 0 0; font-size: 14px; color: var(--tees-ink); }
.aim { margin: 0; padding: 10px 14px; background: var(--page-bg); border-left: 4px solid var(--accent); border-radius: var(--radius-input); font-size: 14.5px; }
.aim cite { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-data); font-size: 11px; letter-spacing: .06em; color: var(--ink-muted); }

/* ---------- Entries ---------- */
.s-off { fill: #c7d2e3; fill-opacity: .42; }
.s-on { fill: #36d06a; fill-opacity: .9; }
.bnd { stroke: var(--dia-line); stroke-width: 2.5; }
.ring { fill: none; stroke: var(--dia-line); stroke-width: 3; }
.tk { stroke: var(--dia-line); stroke-width: 1.4; }
.tk.mj { stroke-width: 2.4; }
.card { font-family: var(--font-data); font-weight: 700; font-size: 15px; fill: var(--dia-line); text-anchor: middle; dominant-baseline: central; }
.secl { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .08em; fill: var(--dia-line); text-anchor: middle; }
.secd { font-family: var(--font-data); font-size: 12px; fill: var(--dia-line); text-anchor: middle; }
.compass .under { stroke-width: 9; }
.compass .pale { stroke-width: 5; }
.radl { fill: none; stroke: var(--pattern); stroke-width: 4; }
.bead-o { fill: none; stroke: var(--bead-outline); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 12; }
.bead { fill: none; stroke: var(--bead); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 12; }
.flown { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.compass .fix { stroke-width: 3; }
.glab { font-family: var(--font-data); font-weight: 700; font-size: 15px; fill: var(--gold); text-anchor: middle; }
.appr { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 6 7; stroke-opacity: .9; }
.lubber { fill: var(--course); stroke: var(--dia-line); stroke-width: 1.2; }
.pl { fill: var(--airplane); stroke: var(--dia-line); stroke-width: 1; }
.plw { fill: var(--airplane-glass); }
.plp { fill: var(--dia-line); fill-opacity: .55; }

.strip { font-family: var(--font-data); font-size: 14.5px; line-height: 1.6; text-transform: uppercase; background: var(--page-bg); border: 1px dashed var(--strip-rule); border-left: 4px solid var(--tab-active); border-radius: var(--radius-input); padding: 12px 14px; }
.strip .lab { display: block; margin-bottom: 4px; }
.epill { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.sq { width: 18px; height: 18px; flex: none; border-radius: var(--radius-chip); background: var(--switch-on-stage); border: 2px solid var(--navy); display: block; }
ol.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }

/* Quiz */
.ans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab {
  min-height: 72px; border: 2px solid var(--navy); border-radius: 8px; background: #ffffff; color: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px;
}
.ab b { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.ab span { font-family: var(--font-data); font-size: 11px; color: var(--ink-muted); }
.ab:hover:not(:disabled) { background: var(--page-bg); }
.ab:disabled { opacity: .55; }
.ab.right { opacity: 1; border-color: var(--ok-ink); background: var(--ok-bg); }
.ab.wrong { opacity: 1; border-color: var(--bad-ink); background: var(--bad-bg); }
.verdict { margin: 0; font-weight: 600; }
.verdict.ok { color: var(--ok-ink); }
.verdict.bad { color: var(--bad-ink); }
.score { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.score b { font-family: var(--font-data); font-size: 22px; }

/* ---------- Wind & timing ---------- */
.ctl { flex: 1 1 320px; }
.legend { align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--stage-caption); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 26px; height: 0; border-top: 2.5px solid #ffffff; display: inline-block; }
.lg.gh { border-top: 2.5px dashed var(--ghost-track); }
.lg.id { border-top: 2px dashed var(--pattern); }
.lgc { width: 14px; height: 14px; border-radius: 50%; background: var(--rollout); border: 2px solid var(--dia-line); display: inline-block; }
.lgd { width: 9px; height: 9px; border-radius: 50%; background: var(--wind); display: inline-block; }
.lg.hp { border-top: 2px dashed #ffffff; }
.lg.tp { border-top: 2.5px solid var(--track-pointer); }
.scrub { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.scrub label { flex: none; font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-muted); }
.scrub input { flex: 1 1 240px; min-width: 0; min-height: var(--touch); accent-color: var(--gold); cursor: pointer; }
.sbar .hud { flex: 1 1 320px; justify-content: flex-start; }
.hud .crab { flex-basis: 100%; color: #ffffff; }
.hdgp { stroke: #ffffff; stroke-width: 1.8; stroke-dasharray: 6 5; }
.trkp { stroke: var(--track-pointer); stroke-width: 2.6; }
.trkh { fill: var(--track-pointer); }
.ptl { font-family: var(--font-data); font-weight: 700; font-size: 12px; fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: var(--dia-line); stroke-width: 3px; }
.ptl.tk { fill: var(--track-pointer); }
.turns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.c1 { flex: 1 1 300px !important; }
.c2 { flex: 2 1 560px !important; }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.triple div { border-radius: 5px; padding: 8px; font-size: 12.5px; line-height: 1.3; background: var(--triple-bg); }
.triple div.mid { background: var(--triple-mid-bg); outline: 2px solid var(--tab-active); }
.triple b { display: block; font-family: var(--font-data); font-size: 12.5px; }
.coach { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.coach p { margin: 0; background: var(--page-bg); border-radius: var(--radius-input); padding: 8px 10px; }
.gl { stroke: #ffffff; stroke-opacity: .09; stroke-width: 1; }
.crs { stroke: var(--course); stroke-width: 1.6; stroke-dasharray: 8 7; }
.idl { fill: none; stroke: var(--pattern); stroke-width: 1.8; stroke-dasharray: 6 6; }
.gh { fill: none; stroke: var(--ghost-track); stroke-width: 2; stroke-dasharray: 7 6; }
.trkl { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.tm { fill: var(--wind); }
.mk { fill: var(--rollout); stroke: var(--dia-line); stroke-width: 2; }
.mkl { font-family: var(--font-data); font-weight: 700; font-size: 11px; fill: var(--dia-line); text-anchor: middle; dominant-baseline: central; }
.wlb { font-family: var(--font-data); font-size: 12px; fill: #ffffff; text-anchor: middle; }
.wnd { stroke: var(--wind); stroke-width: 3; }
.wh { fill: var(--wind); }
.na { fill: #ffffff; }
.sc { stroke: #ffffff; stroke-width: 2.2; }

/* ---------- Planner ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: var(--gap-l); align-items: start; }
.pgrid .panel { padding: 22px; gap: 16px; }
.pgrid .ph { font-size: 24px; }
.msg { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.msg p { margin: 0; }
.tees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tees li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.n { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--gold); border: 2px solid #ffffff; box-shadow: 0 0 0 1px var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-data); font-weight: 700; font-size: 15px; }
.tees b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; display: block; line-height: 1.1; }
.tees p { margin: 2px 0 0; font-size: 14px; color: var(--tees-ink); }
.pgrid ul.lc { gap: 8px; font-size: 14.5px; }
.ave { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ave div { background: var(--page-bg); border-radius: var(--radius-input); padding: 8px; text-align: center; }
.ave b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--accent); }
.ave span { font-size: 12.5px; color: var(--ink-muted); }

/* ---------- Drills ---------- */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--gap-l); align-items: start; }
.dr { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tag { align-self: flex-start; font-family: var(--font-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; background: var(--navy); border-radius: var(--radius-chip); padding: 3px 8px; }
.sit { margin: 0; font-size: 15px; }
.deb { margin: 0; background: var(--navy); color: #ffffff; border: 2px solid var(--stage-border); box-shadow: 0 0 0 1px var(--navy); border-radius: var(--radius-panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.deb dt { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.deb dt:first-child { margin-top: 0; }
.deb dd { margin: 0; font-size: 14px; color: var(--debrief-ink); }
.ref { font-family: var(--font-data); font-size: 11px; color: var(--ink-muted); }

/* ---------- Phone width ---------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .title { font-size: 42px; }
  .vh h2 { font-size: 28px; }
  .stage { padding: 18px 14px 14px; }
  .stage-title { font-size: 38px; }
  .instr .ph { font-size: 24px; }
  .fg.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .out.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab b { font-size: 19px; }
  .tab { padding: 12px 10px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .anat .part { transition: none; }
}