/* Airframe Lab — styles for the interactive 3D chapters (17–19).
 *
 * The rest of the course carries its styling inline; the lab is a small app of
 * its own (tabs, a WebGL stage, live read-outs), so it gets real classes here.
 * Every colour comes from the Nocturne tokens in ds/styles.css.
 */

.ac-lab [hidden] { display: none !important; }

/* ── Chapter prose ─────────────────────────────────────────────────────── */
/* Chapters 17–19 carry the class "ac-ch" and use these rules, which match the
   inline styles of chapters 1–16. Direct-child selectors keep them out of the
   lab, cards and tables. Quiz and completion buttons stay inline, because
   app.js restyles them through their inline style. */
.ac-ch > p, .ac-ch > blockquote > p { font-size: 15.5px; line-height: 1.75; color: #e9e9ed; margin: 12px 0; max-width: 76ch; text-wrap: pretty; }
.ac-ch > h2 { font-family: var(--font-heading); font-size: 21px; font-weight: 500; color: #f3f5fe; margin: 36px 0 12px; letter-spacing: -.015em; }
.ac-ch > ul, .ac-ch > ol { padding-left: 22px; margin: 12px 0; max-width: 76ch; }
.ac-ch > ul > li, .ac-ch > ol > li { font-size: 15px; line-height: 1.7; color: #e9e9ed; margin: 7px 0; text-wrap: pretty; }
.ac-ch > p strong, .ac-ch > ul strong, .ac-ch > ol strong, .ac-ch > blockquote strong, .ac-table strong { color: #f3f5fe; font-weight: 600; }
.ac-ch > blockquote { background: var(--color-surface); border: 1px solid #3f424d; border-radius: 8px; padding: 6px 18px; margin: 18px 0; max-width: 76ch; }
.ac-formula {
  margin: 16px 0; padding: 14px 18px; max-width: 76ch; border-radius: 10px;
  background: #1c1e2b; border: 1px solid #3f424d; color: var(--color-accent-200);
  font: 500 16px/1.5 var(--font-heading); text-align: center; letter-spacing: .01em;
}
.ac-formula small { display: block; font: 12.5px/1.5 var(--font-body); color: var(--color-neutral-500); margin-top: 4px; }

/* ── Lab shell ─────────────────────────────────────────────────────────── */
.ac-lab {
  container-type: inline-size;
  margin: 26px 0 30px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: 14px;
  overflow: hidden;
}
.ac-lab-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--color-neutral-800);
}
.ac-kicker { display: flex; align-items: center; gap: 8px; }
.ac-kicker span:first-child { width: 18px; height: 2px; background: var(--color-accent); flex: none; }
.ac-kicker span:last-child {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-accent-300); font-weight: 500;
}

.ac-tabs {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-800);
  border-radius: 9px;
}
.ac-tabs button {
  font: 500 12.5px/1 var(--font-body); color: var(--color-neutral-400);
  background: transparent; border: 0; border-radius: 6px; padding: 8px 13px; cursor: pointer;
  transition: background .15s, color .15s;
}
.ac-tabs button:hover { color: var(--color-neutral-100); }
.ac-tabs button[aria-selected="true"] {
  background: var(--color-accent-900); color: var(--color-accent-200);
  box-shadow: inset 0 0 0 1px var(--color-accent-700);
}

.ac-lab-body { display: grid; grid-template-columns: minmax(0, 1fr) 268px; }

/* ── Stage (the WebGL viewport) ────────────────────────────────────────── */
.ac-stage {
  position: relative; min-height: 440px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 38%, #2a2d4a 0%, #1f2133 48%, #181a27 100%);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.ac-canvas { position: absolute; inset: 0; cursor: grab; }
.ac-canvas:active { cursor: grabbing; }
.ac-canvas.is-pick { cursor: pointer; }
.ac-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.ac-canvas:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.ac-toolbar {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none;
}
.ac-toolbar button {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--font-body); color: var(--color-neutral-300);
  background: rgba(22, 24, 38, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-neutral-800); border-radius: 7px;
  padding: 7px 10px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ac-toolbar button svg { width: 13px; height: 13px; flex: none; }
.ac-toolbar button:hover { border-color: var(--color-accent-700); color: var(--color-neutral-100); }
.ac-toolbar button[aria-pressed="true"] {
  background: rgba(43, 39, 65, .88); border-color: var(--color-accent-600); color: var(--color-accent-200);
}
.ac-toolbar .ac-sp { flex: 1; }

.ac-hint {
  position: absolute; left: 14px; bottom: 12px; pointer-events: none;
  font-size: 11px; letter-spacing: .03em; color: var(--color-neutral-500);
  transition: opacity .4s;
}
.ac-legend {
  position: absolute; right: 14px; bottom: 12px; pointer-events: none;
  display: flex; gap: 12px; font-size: 11px; color: var(--color-neutral-400);
}
.ac-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

.ac-loading {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 13px; color: var(--color-neutral-400); padding: 24px;
}
.ac-loading::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2px solid var(--color-neutral-800); border-top-color: var(--color-accent);
  border-radius: 50%; animation: kf-spin .9s linear infinite;
}
.ac-loading.is-error::before { display: none; }

/* Numbered pins that track their part as the model turns. */
.ac-pins { position: absolute; inset: 0; pointer-events: none; }
.ac-pin {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0;
  display: grid; place-items: center;
  font: 600 10.5px/1 var(--font-body); color: var(--color-accent-200);
  background: rgba(35, 32, 58, .9); border: 1px solid var(--color-accent-600);
  border-radius: 50%; cursor: pointer; will-change: transform;
  transition: background .15s, color .15s, border-color .15s, opacity .2s;
}
.ac-pin:hover, .ac-pin.is-on { background: var(--color-accent); color: #161826; border-color: var(--color-accent-200); }

.ac-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2;
  font-size: 12px; font-weight: 500; color: var(--color-neutral-100);
  background: rgba(22, 24, 38, .92); border: 1px solid var(--color-neutral-700);
  border-radius: 6px; padding: 5px 9px; white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.ac-tip.is-on { opacity: 1; }

/* Status overlay (VTOL phase) */
.ac-phase {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; pointer-events: none;
  background: rgba(22, 24, 38, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-neutral-800); border-radius: 9px;
}
.ac-phase span {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-neutral-500); padding: 6px 9px; border-radius: 6px; transition: background .2s, color .2s;
}
.ac-phase span.is-on { background: var(--color-accent-900); color: var(--color-accent-200); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.ac-phase { max-width: calc(100% - 24px); }
/* The phase strip and the colour legend share the bottom edge; the strip wins. */
.ac-phase:not([hidden]) ~ .ac-legend { display: none; }

/* ── Side panel ────────────────────────────────────────────────────────── */
.ac-panel {
  border-left: 1px solid var(--color-neutral-800);
  display: flex; flex-direction: column; min-height: 0; max-height: 440px;
}
.ac-pane { position: relative; padding: 14px; overflow-y: auto; flex: 1; min-height: 0; }
.ac-pane::-webkit-scrollbar { width: 8px; }
.ac-pane::-webkit-scrollbar-thumb { background: #3f424d; border-radius: 6px; border: 2px solid var(--color-surface); }
.ac-pane-title {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-500);
  font-weight: 500; margin: 2px 2px 10px;
}
.ac-pane-title + .ac-pane-title, * + .ac-pane-title { margin-top: 16px; }

.ac-parts { display: flex; flex-direction: column; gap: 3px; }
.ac-part {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: 13px/1.3 var(--font-body); color: var(--color-neutral-300);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.ac-part:hover { background: rgba(147, 151, 171, .08); color: var(--color-neutral-100); }
.ac-part.is-on { background: var(--color-accent-900); border-color: var(--color-accent-700); color: var(--color-accent-100); }
.ac-part b {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 10px; font-weight: 600; color: var(--color-accent-300);
  border: 1px solid var(--color-accent-800); background: var(--color-neutral-900);
}
.ac-part.is-on b { background: var(--color-accent); border-color: var(--color-accent); color: #161826; }
.ac-part span { flex: 1; }
.ac-part small { font-size: 10.5px; color: var(--color-neutral-600); white-space: nowrap; }

/* Option buttons (commands, configurations) */
.ac-opts { display: flex; flex-direction: column; gap: 6px; }
.ac-opts.is-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ac-opt {
  text-align: left; font: 13px/1.35 var(--font-body); color: var(--color-neutral-300);
  background: transparent; border: 1px solid var(--color-neutral-700); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.ac-opt:hover { border-color: var(--color-accent); background: rgba(145, 132, 217, .08); }
.ac-opt.is-on { background: var(--color-accent-900); border-color: var(--color-accent-600); color: var(--color-accent-200); }
.ac-opt small { display: block; font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px; }
.ac-opt.is-on small { color: var(--color-accent-2-400); }
.ac-opt kbd {
  float: right; font: 500 10px/1 var(--font-body); color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-800); border-radius: 4px; padding: 3px 5px; margin-top: 1px;
}

/* Sliders */
.ac-slider { margin: 0 2px 12px; }
.ac-slider label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--color-neutral-300); margin-bottom: 6px;
}
.ac-slider output { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--color-accent-300); }
.ac-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer;
}
.ac-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent-600) var(--fill, 50%), var(--color-neutral-800) var(--fill, 50%));
}
.ac-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--color-neutral-800); }
.ac-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-accent-600); }
.ac-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--color-accent-300); border: 3px solid #2b2741; box-shadow: 0 0 0 1px var(--color-accent-600);
}
.ac-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent-300); border: 3px solid #2b2741; box-shadow: 0 0 0 1px var(--color-accent-600);
}
.ac-range:focus-visible { outline: none; }
.ac-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-accent); }
.ac-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-neutral-600); letter-spacing: .04em; margin-top: 2px; }

.ac-seg { display: flex; border: 1px solid var(--color-neutral-700); border-radius: 8px; overflow: hidden; }
.ac-seg button {
  flex: 1; font: 12.5px/1 var(--font-body); color: var(--color-neutral-400); background: transparent;
  border: 0; padding: 8px 6px; cursor: pointer;
}
.ac-seg button + button { border-left: 1px solid var(--color-neutral-700); }
.ac-seg button:hover { color: var(--color-neutral-100); }
.ac-seg button.is-on { background: var(--color-accent-900); color: var(--color-accent-200); }

.ac-btn {
  font: 500 12.5px/1 var(--font-body); color: var(--color-accent-300);
  background: transparent; border: 1px solid var(--color-accent-600); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; transition: background .15s, border-color .15s;
}
.ac-btn:hover { background: rgba(145, 132, 217, .12); border-color: var(--color-accent); }
.ac-btn.is-primary { background: var(--color-accent-900); color: var(--color-accent-200); }
.ac-row { display: flex; gap: 6px; }
.ac-row > * { flex: 1; }

/* Motor / lift bars */
.ac-bars { display: flex; flex-direction: column; gap: 6px; }
.ac-bar { display: grid; grid-template-columns: 58px 1fr 38px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--color-neutral-400); }
.ac-bar em { font-style: normal; font-size: 10px; color: var(--color-neutral-600); margin-left: 3px; }
.ac-bar div { height: 6px; border-radius: 6px; background: var(--color-neutral-800); overflow: hidden; }
.ac-bar div i { display: block; height: 100%; width: 50%; border-radius: 6px; background: var(--color-accent-500); transition: width .35s ease, background .35s; }
.ac-bar div i.is-ccw { background: #7fc4a2; }
.ac-bar div i.is-hot { background: #c9a86b; }
.ac-bar output { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-neutral-300); }

.ac-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.ac-readout div { background: var(--color-neutral-900); border-radius: 8px; padding: 8px 10px; }
.ac-readout small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.ac-readout strong { font: 500 15px/1.35 var(--font-heading); color: var(--color-neutral-100); font-variant-numeric: tabular-nums; }

/* Mode-2 transmitter sticks */
.ac-sticks { display: flex; justify-content: center; gap: 18px; padding: 4px 0 2px; }
.ac-stick { text-align: center; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-neutral-600); }
.ac-stick svg { display: block; width: 64px; height: 64px; margin: 0 auto 4px; }
.ac-stick circle.knob { transition: cx .3s ease, cy .3s ease; }

/* ── Detail strip under the stage ──────────────────────────────────────── */
.ac-detail {
  border-top: 1px solid var(--color-neutral-800); padding: 16px 20px 18px;
  min-height: 118px; background: #20222e;
}
.ac-detail h4 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 500 16px/1.3 var(--font-heading); color: var(--color-neutral-100); letter-spacing: -.01em;
}
.ac-detail h4 b {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-accent); color: #161826; font: 600 11px/1 var(--font-body); flex: none;
}
.ac-detail p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--color-neutral-400); max-width: 80ch; text-wrap: pretty; }
.ac-detail p strong { color: var(--color-neutral-100); font-weight: 600; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ac-chips span {
  font-size: 11px; color: var(--color-accent-2-300); background: var(--color-accent-2-900);
  border: 1px solid var(--color-accent-2-800); border-radius: 6px; padding: 3px 8px;
}
.ac-check {
  display: flex; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: rgba(143, 208, 174, .07); border: 1px solid rgba(143, 208, 174, .2);
  font-size: 12.5px; line-height: 1.55; color: #bfe3cf;
}
.ac-check::before { content: "✓"; color: #8fd0ae; font-weight: 600; }

/* ── Cards, calculators and tables in the chapter body ─────────────────── */
.ac-card {
  margin: 24px 0; background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  border-radius: 14px; padding: 18px 20px; max-width: 820px;
}
.ac-card-sub { font-size: 12.5px; color: var(--color-neutral-500); margin: 6px 0 14px; }
.ac-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 26px; align-items: start; }
.ac-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-stat { background: var(--color-neutral-900); border-radius: 10px; padding: 12px 14px; }
.ac-stat small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.ac-stat strong { display: block; font: 500 24px/1.25 var(--font-heading); color: var(--color-neutral-100); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ac-stat strong sub { font-size: 12px; vertical-align: baseline; color: var(--color-neutral-500); margin-left: 3px; }
.ac-stat span { display: block; font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px; }
.ac-verdict { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; padding: 11px 14px; border-radius: 8px; background: #292b31; color: var(--color-neutral-300); }
.ac-verdict b { font-weight: 600; }

.ac-table-wrap { overflow-x: auto; margin: 18px 0; max-width: 820px; }
.ac-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ac-table th, .ac-table td { padding: 9px 12px; border: 1px solid #3f424d; text-align: left; vertical-align: top; line-height: 1.5; }
.ac-table th { background: #292b31; color: #f3f5fe; font-weight: 600; }
.ac-table td { color: #e9e9ed; }
.ac-table td:first-child { color: var(--color-neutral-400); }
.ac-table .is-col { background: rgba(145, 132, 217, .12); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.ac-table th.is-col { color: var(--color-accent-200); }

.ac-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; max-width: 820px; }
.ac-tile { background: var(--color-surface); border: 1px solid var(--color-neutral-800); border-radius: 12px; padding: 14px 16px; }
.ac-tile h5 { margin: 0 0 6px; font: 500 14.5px/1.3 var(--font-heading); color: var(--color-neutral-100); letter-spacing: -.005em; }
.ac-tile p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-400); }
.ac-tile .ac-tag { display: inline-block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-300); background: var(--color-accent-900); border-radius: 4px; padding: 2px 6px; margin-bottom: 8px; }

.ac-missions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ac-mission-out { padding: 13px 16px; background: #292b31; border-radius: 8px; font-size: 13.5px; color: #b2b6ca; line-height: 1.6; }
.ac-mission-out strong { color: #f3f5fe; font-weight: 600; }

/* ── Narrow layouts ────────────────────────────────────────────────────── */
@container (max-width: 700px) {
  .ac-lab-body { grid-template-columns: minmax(0, 1fr); }
  .ac-stage { min-height: 340px; }
  .ac-panel { border-left: 0; border-top: 1px solid var(--color-neutral-800); max-height: none; }
  .ac-parts { display: grid; grid-template-columns: 1fr 1fr; }
  .ac-hint { display: none; }
  .ac-toolbar button span { display: none; }
  .ac-phase { bottom: 12px; }
  .ac-phase span { padding: 5px 5px; font-size: 9px; letter-spacing: .02em; }
}
@media (max-width: 760px) {
  .ac-calc, .ac-grid3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-bar div i, .ac-stick circle.knob { transition: none; }
}