/* =========================================================
   PITOT-STATIC LAB, page-only styles. Load AFTER style.css + kb.css.
   Uses the shared design tokens (--navy, --cyan, --amber, --ink ...).
   Pitot (total pressure) is amber, static is cyan, everywhere.
   ========================================================= */

.ps-hero-blob{ width:380px; height:380px; top:-80px; left:8%; }
.ps-main{ padding-top:3rem; }

/* ---------- Quick start ---------- */
.ps-quickstart{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.75rem; }
.ps-qs-step{
  display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  font-size:.86rem; color:var(--sub); line-height:1.5; box-shadow:var(--shadow-sm);
}
.ps-qs-step strong{ color:var(--ink); }
.ps-qs-num{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center;
  font-family:'Space Mono',monospace; font-size:.75rem; font-weight:700; background:var(--navy); color:#fff;
}
@media (max-width:1100px){ .ps-quickstart{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ps-quickstart{ grid-template-columns:1fr; } }

.ps-panel-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.ps-panel-head h2{ margin:0 auto 0 0; }

/* ---------- Help popovers ---------- */
.ps-help{ position:relative; }
.ps-help > summary{
  list-style:none; cursor:pointer; width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center; font-family:'Space Mono',monospace; font-weight:700; font-size:.85rem;
  color:var(--cyan-deep); background:var(--bg-alt); border:1.5px solid var(--line);
}
.ps-help > summary::-webkit-details-marker{ display:none; }
.ps-help > summary:hover, .ps-help[open] > summary{ border-color:var(--cyan); color:var(--navy); }
.ps-help > summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.ps-help-body{
  position:absolute; right:0; top:calc(100% + .6rem); z-index:30; width:min(380px, 80vw);
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--cyan);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; box-shadow:var(--shadow-md);
  font-size:.85rem; color:var(--sub); line-height:1.6;
}
.ps-help-body p + p{ margin-top:.6rem; }
.ps-help-body strong{ color:var(--navy); }
.ps-key{ display:inline-block; width:18px; height:4px; border-radius:2px; vertical-align:middle; margin-right:.2rem; }
.ps-key-pitot{ background:var(--amber); }
.ps-key-static{ background:var(--cyan); }

/* ---------- Buttons ---------- */
.ps-btn{
  padding:.55rem .9rem; background:var(--bg-alt); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  color:var(--sub); font-family:'Inter',sans-serif; font-weight:700; font-size:.8rem; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease; line-height:1.2;
}
.ps-btn:hover{ border-color:var(--navy); color:var(--navy); }
.ps-btn:focus-visible, .ps-tab:focus-visible, .ps-scn:focus-visible, .ps-diag-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.ps-btn:disabled{ opacity:.45; cursor:not-allowed; }
.ps-btn-strong{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ps-btn-strong:hover{ background:var(--navy-dark); color:#fff; }
.ps-btn-wide{ width:100%; margin-top:1rem; }
.ps-btn-pause.is-paused{ background:var(--amber); border-color:var(--amber); color:#fff; }

.ps-sim-ctrl{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.ps-inline-select{ display:flex; align-items:center; gap:.5rem; margin:0; font-size:.78rem; font-weight:600; color:var(--sub); }
.ps-inline-select select{ width:auto; padding:.45rem .7rem; font-size:.8rem; }

/* ---------- Instrument panel ---------- */
.ps-gauges{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
  background:linear-gradient(160deg,#0f1b2a,#071019); border-radius:var(--radius-md);
  padding:1.3rem; border:1px solid #1d2c3d;
}
@media (max-width:640px){ .ps-gauges{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }
.ps-gauge-fig{ margin:0; text-align:center; }
canvas.ps-gauge{ display:block; width:100%; max-width:300px; margin:0 auto; aspect-ratio:1/1; height:auto; background:transparent; border:none; border-radius:0; }
.ps-gauge-fig figcaption{ font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7fa3bd; margin-top:.5rem; }
.ps-truth{
  display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-top:.45rem;
  font-family:'Space Mono',monospace; font-size:.72rem; color:#9fb6c8;
}
.ps-truth b{ color:#fff; font-weight:700; }
.ps-err{ padding:0 .45rem; border-radius:5px; background:rgba(16,185,129,.15); color:#6ee7b7; }
.ps-err.is-bad{ background:rgba(220,38,38,.2); color:#fca5a5; }
.ps-hide-truth .ps-truth{ visibility:hidden; }

/* ---------- Layout: schematic + controls ---------- */
.ps-layout{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:1.75rem; align-items:start; }
@media (max-width:1180px){ .ps-layout{ grid-template-columns:1fr; } }
.ps-layout .tool-panel, .ps-panel-instr{ padding:1.6rem; }

/* ---------- Schematic (SVG) ---------- */
.ps-schem-wrap{ border:1.5px solid var(--line); border-radius:var(--radius-md); background:#f4f8fb; overflow:hidden; }
.ps-schem{ display:block; width:100%; height:auto; font-family:'Space Mono',monospace; }
.ps-airframe{ fill:rgba(0,61,122,.05); stroke:rgba(0,61,122,.25); stroke-width:1.5; }
.ps-wing{ fill:rgba(0,61,122,.07); stroke:rgba(0,61,122,.2); stroke-width:1.2; }
.ps-zone-label{ font-size:11px; fill:rgba(0,61,122,.45); letter-spacing:.12em; font-weight:700; }
.ps-part-label{ font-size:11px; fill:var(--sub); font-weight:700; }
.ps-probe{ fill:#c9d4df; stroke:#6b7c8f; stroke-width:1.2; }
.ps-port{ fill:#0b1420; }

.ps-line{ fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; transition:opacity .3s ease; }
.ps-line-pitot{ stroke:var(--amber); }
.ps-line-static{ stroke:var(--cyan); }
.ps-line.is-flow{ stroke-dasharray:14 8; animation:ps-flow .6s linear infinite; }
.ps-line.is-flow.is-reverse{ animation-direction:reverse; }
.ps-line.is-trapped{ stroke-dasharray:3 6; opacity:.9; }
.ps-line.is-dead{ opacity:.18; }
@keyframes ps-flow{ to{ stroke-dashoffset:-22; } }
.ps-line-label{ font-size:11px; font-weight:700; letter-spacing:.08em; }
.ps-line-label-pitot{ fill:#c2410c; }
.ps-line-label-static{ fill:var(--cyan-deep); }
.ps-line-label.is-trapped{ fill:var(--danger); }

.ps-press{ font-size:11.5px; font-weight:700; fill:var(--navy); paint-order:stroke; stroke:#f4f8fb; stroke-width:4px; }
.ps-press-amb{ fill:var(--sub); }

.ps-hotspot{ cursor:pointer; outline:none; }
.ps-hot-ring{ fill:rgba(255,255,255,.7); stroke:var(--navy); stroke-width:2; stroke-dasharray:4 3; transition:fill .2s ease, stroke .2s ease; }
.ps-hotspot:hover .ps-hot-ring, .ps-hotspot:focus-visible .ps-hot-ring{ fill:#fff; stroke:var(--cyan-deep); stroke-width:3; }
.ps-ice{ opacity:0; transition:opacity .25s ease; }
.ps-ice path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; }
.ps-hotspot.is-blocked .ps-hot-ring{ fill:#3b82c4; stroke:#1e3a5f; stroke-dasharray:none; }
.ps-hotspot.is-blocked .ps-ice{ opacity:1; }
.ps-hotspot.is-quiz{ pointer-events:none; }
.ps-hotspot.is-quiz .ps-hot-ring{ fill:rgba(255,255,255,.7); stroke:var(--line); }
.ps-hotspot.is-quiz .ps-ice{ opacity:0; }

.ps-valve-body{ fill:#fff; stroke:var(--navy); stroke-width:2.5; }
.ps-valve-arrow{ fill:none; stroke:var(--navy); stroke-width:4; stroke-linecap:round; transition:transform .3s var(--ease); transform-origin:345px 330px; }
.ps-hotspot.is-on .ps-valve-body{ fill:#fff7ed; stroke:var(--amber); }
.ps-hotspot.is-on .ps-valve-arrow{ transform:rotate(90deg); stroke:var(--amber); }
.ps-hotspot:focus-visible .ps-valve-body{ stroke:var(--cyan-deep); stroke-width:3.5; }
.ps-cabin-src{ fill:#fff; stroke:var(--cyan-deep); stroke-width:1.5; stroke-dasharray:4 3; }

.ps-icebar-bg{ fill:rgba(0,61,122,.1); }
.ps-icebar{ fill:#3b82c4; transition:width .2s linear; }

.ps-inst-box rect{ fill:#0b1420; stroke:#1d2c3d; stroke-width:1.5; }
.ps-inst-name{ font-size:14px; font-weight:700; fill:#fff; letter-spacing:.1em; }
.ps-inst-sub{ font-size:9.5px; fill:#7fa3bd; }
.ps-inst-val{ font-size:13px; font-weight:700; fill:var(--cyan); }

.ps-schem-note{ font-size:.78rem; color:var(--sub-soft); margin-top:.7rem; }
.ps-quiz-hidden .ps-press, .ps-quiz-hidden .ps-line-label, .ps-quiz-hidden .ps-icebar, .ps-quiz-hidden .ps-icebar-bg{ visibility:hidden; }
.ps-quiz-hidden .ps-line{ animation:none; stroke-dasharray:none; opacity:.5; }

/* ---------- Controls ---------- */
.ps-controls h3{ font-size:1rem; margin-bottom:1rem; }
.ps-controls h3 + .ps-switches{ margin-top:0; }
.ps-controls .control-group{ margin-bottom:1.3rem; }
.ps-stepper{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-top:.7rem; }
.ps-stepper-3{ grid-template-columns:1fr 1fr 1fr; }

.ps-switches{ display:flex; flex-direction:column; gap:.4rem; }
.ps-switch{
  display:flex; align-items:center; gap:.7rem; margin:0; padding:.55rem .75rem; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--ink); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.ps-switch-sep{ margin-top:.5rem; }
.ps-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.ps-switch-ui{ flex:none; width:34px; height:19px; border-radius:10px; background:#c8d2dc; position:relative; transition:background .2s ease; }
.ps-switch-ui::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease); }
.ps-switch input:checked + .ps-switch-ui{ background:var(--navy); }
.ps-switch input:checked + .ps-switch-ui::after{ transform:translateX(15px); }
.ps-switch input:focus-visible + .ps-switch-ui{ outline:2px solid var(--cyan); outline-offset:2px; }
.ps-switch input:disabled + .ps-switch-ui{ opacity:.4; }
.ps-switch:has(input:disabled){ cursor:not-allowed; color:var(--sub-soft); }

.ps-ice-status{
  margin-top:.8rem; padding:.7rem .9rem; border-radius:var(--radius-sm); font-size:.82rem;
  background:#eff6ff; border-left:4px solid #3b82c4; color:#1e3a5f;
}

/* ---------- Training ---------- */
.ps-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.4rem; }
.ps-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-align:left;
  padding:.8rem 1rem; background:var(--bg-alt); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:.88rem; font-weight:700; color:var(--sub); cursor:pointer;
}
.ps-tab:hover{ border-color:var(--navy); color:var(--navy); }
.ps-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ps-tab-num{ font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.1em; opacity:.7; }
.ps-mode-intro{ color:var(--sub); font-size:.92rem; margin-bottom:1.1rem; max-width:780px; }
.ps-mode-intro strong{ color:var(--ink); }

.ps-scenarios{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1.1rem; }
@media (max-width:1100px){ .ps-scenarios{ grid-template-columns:1fr 1fr; } }
.ps-scn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; text-align:left;
  padding:.75rem .9rem; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:.83rem; font-weight:600; color:var(--sub); cursor:pointer;
}
.ps-scn:hover{ border-color:var(--cyan); }
.ps-scn.active{ border-color:var(--navy); background:var(--bg-alt); color:var(--ink); }
.ps-scn-n{ font-family:'Space Mono',monospace; font-size:.7rem; font-weight:700; color:var(--navy); }

.ps-scn-brief{
  background:#0b1420; color:#8ee9f7; font-family:'Space Mono',monospace; font-size:.82rem; line-height:1.75;
  padding:1rem 1.2rem; border-radius:var(--radius-sm); border:1px solid rgba(32,196,227,.3); margin-bottom:1rem;
}
.ps-scn-brief .ps-brief-tag{ color:var(--cyan); font-weight:700; }

.ps-analysis{ display:grid; gap:.6rem; }
.ps-an-line{
  display:flex; gap:.8rem; align-items:flex-start; padding:.75rem 1rem;
  background:var(--bg-alt); border-radius:var(--radius-sm); border-left:4px solid var(--success);
  font-size:.9rem; color:var(--sub); line-height:1.55;
}
.ps-an-line.is-bad{ border-left-color:var(--danger); background:var(--danger-bg); }
.ps-an-line.is-warn{ border-left-color:var(--amber); background:#fff7ed; }
.ps-an-line.is-info{ border-left-color:var(--cyan); }
.ps-an-tag{ flex:none; font-family:'Space Mono',monospace; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); min-width:4.4rem; padding-top:.15rem; }

.ps-quiz-bar{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.ps-cta{ padding:.8rem 1.4rem; font-size:.85rem; }
.ps-score{ margin-left:auto; font-family:'Space Mono',monospace; font-size:.8rem; color:var(--sub); }
.ps-score strong{ color:var(--navy); font-size:1rem; margin-left:.35rem; }
.ps-diag{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-bottom:1rem; }
@media (max-width:1100px){ .ps-diag{ grid-template-columns:1fr 1fr; } }
.ps-diag-btn{
  padding:.8rem .9rem; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:.83rem; font-weight:700; color:var(--sub); cursor:pointer; text-align:left;
}
.ps-diag-btn:hover:not(:disabled){ border-color:var(--navy); color:var(--navy); }
.ps-diag-btn:disabled{ opacity:.5; cursor:not-allowed; }
.ps-diag-btn.is-correct{ border-color:var(--success); background:#ecfdf5; color:var(--success); opacity:1; }
.ps-diag-btn.is-wrong{ border-color:var(--danger); background:var(--danger-bg); color:var(--danger); opacity:1; }

.ps-feedback:empty{ display:none; }
.ps-feedback{ padding:1rem 1.2rem; border-radius:var(--radius-sm); border-left:4px solid var(--cyan); background:var(--bg-alt); font-size:.9rem; color:var(--sub); line-height:1.6; }
.ps-feedback p + p{ margin-top:.45rem; }
.ps-feedback .ps-fb-title{ font-weight:800; color:var(--ink); }
.ps-feedback.is-good{ border-left-color:var(--success); background:#ecfdf5; }
.ps-feedback.is-good .ps-fb-title{ color:var(--success); }
.ps-feedback.is-bad{ border-left-color:var(--danger); background:var(--danger-bg); }
.ps-feedback.is-bad .ps-fb-title{ color:var(--danger); }

/* ---------- Ground school ---------- */
.ps-guide h2{ font-size:1.5rem; margin-bottom:1.3rem; }
.ps-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
.ps-matrix{ width:100%; border-collapse:collapse; font-size:.87rem; }
@media (max-width:640px){
  /* narrow screens: every row becomes a small card */
  .ps-table-wrap{ border:none; }
  .ps-matrix, .ps-matrix tbody, .ps-matrix tr, .ps-matrix th, .ps-matrix td{ display:block; width:100%; }
  .ps-matrix thead{ display:none; }
  .ps-matrix tr{ border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.6rem; overflow:hidden; }
  .ps-table-wrap .ps-matrix tbody th{ width:100%; }
  .ps-matrix td{ display:flex; gap:.8rem; padding:.55rem 1rem; }
  .ps-matrix td::before{ content:attr(data-label); flex:none; width:6.5rem; font-family:'Space Mono',monospace; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--sub-soft); padding-top:.15rem; }
}
.ps-matrix th, .ps-matrix td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--sub); }
.ps-matrix thead th{ background:var(--navy); color:#fff; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.ps-matrix tbody th{ color:var(--ink); font-weight:700; background:var(--bg-alt); width:26%; }
.ps-matrix tbody tr:last-child th, .ps-matrix tbody tr:last-child td{ border-bottom:none; }
.ps-matrix td.ps-ok{ color:var(--success); font-weight:600; }

.ps-guide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:800px){ .ps-guide-grid{ grid-template-columns:1fr; } }
.ps-acc{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }
.ps-acc > summary{
  cursor:pointer; padding:.9rem 1.1rem; font-weight:700; color:var(--navy); font-size:.95rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.ps-acc > summary::-webkit-details-marker{ display:none; }
.ps-acc > summary::after{ content:"+"; font-family:'Space Mono',monospace; color:var(--cyan-deep); font-size:1.1rem; }
.ps-acc[open] > summary::after{ content:"−"; }
.ps-acc > summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.ps-acc-body{ padding:0 1.1rem 1rem; font-size:.88rem; color:var(--sub); line-height:1.65; }
.ps-acc-body p + p{ margin-top:.55rem; }
.ps-acc-body strong{ color:var(--ink); }

@media (max-width:700px){
  .ps-layout .tool-panel, .ps-panel-instr, .ps-train, .ps-guide{ padding:1.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .ps-line.is-flow{ animation:none; }
}
@media print{
  .ps-controls, .ps-train, .ps-quickstart, .ps-sim-ctrl{ display:none !important; }
  .ps-acc-body{ display:block !important; }
}