/* cockpit.css — W7. The interactive analogue C172S control pedestal + rudder bar.

   Materiality rules (RESEARCH_R5 §4.2): matte putty-grey lacquer like the real
   172S metal panel (see blackbox_r5_ref_c172_panel.jpg), black placards with
   white engraved lettering, no plastic gloss anywhere. Aviation colours (white/
   blue flap bands, signal-red mixture) stay aviation colours; the house coral
   #FF5F3E appears only as an interaction signifier — hover rings, active-drag
   glow, keycap accents — the way a real panel rations its red. */

/* ---------------------------------------------------------------- pedestal */
.ck-pedestal {
  --putty: #8e9088;
  --putty-hi: #9da49a;
  --putty-lo: #767871;
  --engrave: #33352f;
  --placard: #111310;
  --placard-ink: #e8ebe4;
  --steel: #b9bec2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px 20px;
  padding: 10px 18px 12px;
  background:
    radial-gradient(130% 100% at 50% -40%, rgba(255, 255, 255, 0.09), transparent 62%),
    linear-gradient(180deg, var(--putty-hi), var(--putty) 42%, var(--putty-lo));
  border-top: 2px solid #5a5c54;
  border-bottom: 1px solid #43453e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -10px 22px rgba(0, 0, 0, 0.16);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* one station = one control, with its placard, its artwork, and its keycaps */
.ck-station {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 5px;
  min-width: 104px;
}
/* panel screws — two per station, matte steel */
.ck-station::before,
.ck-station::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, rgba(40, 42, 38, 0.9) 45% 55%, transparent 56%),
    radial-gradient(circle at 35% 30%, #c9cdcf, #83878b 60%, #5c6064);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 1px rgba(0, 0, 0, 0.6);
}
.ck-station::before { left: 0; }
.ck-station::after { right: 0; transform: rotate(72deg); }

.ck-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #191b17, var(--placard));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--placard-ink);
  white-space: nowrap;
}
.ck-val {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dragging ~ * .ck-val { color: var(--coral, #ff5f3e); }

.ck-keys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--engrave);
}
.ck-keys kbd,
.ck-pedal kbd,
.ck-refbtn kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2.5px 5px;
  border-radius: 3px;
  color: #f2f4f0;
  background: linear-gradient(180deg, #2b2e33, #17191d);
  border: 1px solid #43474e;
  box-shadow: 0 1.5px 0 #0b0c0e;
}

/* ------------------------------------------------------------- plungers */
.ck-plunger {
  position: relative;
  height: 96px;
  width: 66px;
  margin: 2px auto 1px;
  cursor: grab;
  touch-action: none;
  border-radius: 8px;
}
.ck-plunger.dragging { cursor: grabbing; }
.ck-plunger:focus-visible,
.ck-wheel:focus-visible,
.ck-flapslot:focus-visible,
.ck-rud-track:focus-visible {
  outline: 2px solid var(--coral, #ff5f3e);
  outline-offset: 2px;
}

/* mounting escutcheon at the panel face, friction/vernier collar below it */
.ck-collar {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 13px;
  border-radius: 4px 4px 6px 6px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #7e838a, #4e535a);
  background-size: 4px 100%, auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ck-shaft {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 8px;
  /* the shaft is what you SEE when power is off: pulled out = exposed steel */
  height: calc((1 - var(--v, 0)) * 50px + 10px);
  background: linear-gradient(90deg, #6f757b, #c7ccd0 45%, #82878d);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}
.ck-knob {
  position: absolute;
  left: 50%;
  top: calc(14px + (1 - var(--v, 0)) * 50px);
  transform: translateX(-50%);
  width: 42px; height: 30px;
  border-radius: 9px;
  transition: box-shadow 0.12s ease;
}
.ck-knob .ck-knurl {
  position: absolute;
  inset: 4px 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 2px, transparent 2px 5px);
  background-size: 5px 100%;
}
.ck-knob-blk {
  background: radial-gradient(circle at 38% 26%, #43464a, #232529 55%, #101214);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ck-knob-red {
  background: radial-gradient(circle at 38% 26%, #cc4a38, #a02c1f 55%, #6f1a10);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* the vernier lock button in the mixture knob's end face (POH) */
.ck-knob-red::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e5e8ea, #9ba0a5 65%, #6a6f74);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5);
}
.ck-plunger:hover .ck-knob { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 95, 62, 0.75); }
.ck-plunger.dragging .ck-knob { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), 0 0 0 2.5px var(--coral, #ff5f3e); }
.ck-plunger.dragging ~ .ck-keys { color: #1f211c; }

/* live value turns coral while the control is engaged */
.ck-station:has(.dragging) .ck-val { color: var(--coral, #ff5f3e); }

/* idle-cutoff warning tint — mixture full aft stops a real IO-360 */
.ck-cutoff .ck-head { background: linear-gradient(180deg, #35100a, #200a06); }
.ck-cutoff .ck-val { color: #ff8d75; }

/* ------------------------------------------------------------- trim wheel */
.ck-trim { min-width: 118px; }
.ck-trimrow {
  display: flex;
  justify-content: center;
  gap: 9px;
  height: 96px;
}
.ck-trimscale {
  position: relative;
  width: 26px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--engrave);
}
.ck-trimscale::before {
  content: '';
  position: absolute;
  right: 2px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--engrave);
  opacity: 0.55;
}
.ck-ts-dn { position: absolute; top: 1px; left: 0; }
.ck-ts-to { position: absolute; top: 46%; left: 0; }
.ck-ts-up { position: absolute; bottom: 1px; left: 0; }
.ck-trimptr {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 7px solid #f4f6f2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.ck-wheel {
  position: relative;
  width: 34px;
  border-radius: 7px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  box-shadow: inset 3px 0 5px rgba(0, 0, 0, 0.5), inset -3px 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ck-wheel.dragging { cursor: grabbing; }
.ck-wheelface {
  position: absolute;
  inset: 0;
  /* ribbed black rim, edge-on; background-position-y spins it */
  background: linear-gradient(0deg, #101214 0 4px, #2c3034 4px 8px);
  background-size: 100% 8px;
}
.ck-wheelindex {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.ck-wheel:hover { box-shadow: inset 3px 0 5px rgba(0, 0, 0, 0.5), inset -3px 0 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 95, 62, 0.75); }
.ck-wheel.dragging { box-shadow: inset 3px 0 5px rgba(0, 0, 0, 0.5), inset -3px 0 5px rgba(0, 0, 0, 0.5), 0 0 0 2.5px var(--coral, #ff5f3e); }

/* ------------------------------------------------------------- flap selector */
.ck-flap { min-width: 170px; }
.ck-flaprow {
  display: flex;
  justify-content: center;
  gap: 10px;
  height: 82px;
}
.ck-flapscale {
  position: relative;
  width: 12px;
  border-radius: 3px;
  background: #1b1d19;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ck-band {
  position: absolute;
  left: 3px;
  width: 6px;
  border-radius: 2px;
}
/* POH: flap travel scale is blue 0–10°, white 10–30° */
.ck-band-blue { top: 6%; height: 27.3%; background: #3f8fd4; }
.ck-band-white { top: 33.3%; height: 54.7%; background: #e9ece7; }
.ck-flapneedle {
  position: absolute;
  left: -7px;
  top: 6%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #f4f6f2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  transition: top 0.35s ease;   /* the pointer follows the lever, not v.v. */
}
.ck-flapslot {
  position: relative;
  width: 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, #22241f, #161814);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: grab;
  touch-action: none;
}
.ck-flapslot.dragging { cursor: grabbing; }
.ck-flapslot::before {
  content: '';
  position: absolute;
  left: 50%; top: 7%; bottom: 7%;
  width: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #0a0b09;
}
.ck-flaplever {
  position: absolute;
  left: 50%; top: 6%;
  transform: translate(-50%, -50%);
  width: 30px; height: 15px;
  border-radius: 8px 8px 5px 5px;
  /* the white airfoil-shaped flap handle every Cessna student knows */
  background: linear-gradient(180deg, #f2f3ef, #c9ccc4);
  border: 1px solid #8e918a;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
.ck-flapslot:hover .ck-flaplever { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 95, 62, 0.75); }
.ck-flapslot.dragging .ck-flaplever { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 2.5px var(--coral, #ff5f3e); }
.ck-dets {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0;
}
.ck-det {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--engrave);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
}
.ck-det:hover { border-color: rgba(255, 95, 62, 0.7); color: #1c1e19; }
.ck-det.on {
  background: var(--placard);
  color: var(--placard-ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ck-placard {
  align-self: center;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--placard);
  color: var(--placard-ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ck-placard sub { font-size: 6.5px; }

/* ------------------------------------------------------------- reference cell */
.ck-ref {
  max-width: 200px;
  justify-content: flex-start;
}
.ck-refnote {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--engrave);
  margin: 2px 1px;
}
.ck-refbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 9px;
  border-radius: 4px;
  background: linear-gradient(180deg, #191b17, var(--placard));
  color: var(--placard-ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border: 1px solid #2c2e29;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
.ck-refbtn:hover { border-color: var(--coral, #ff5f3e); }

/* ------------------------------------------------------------- rudder bar */
.ck-rudder {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
}
.ck-rud-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 252px;
  padding: 6px 9px;
  border-radius: 11px;
  background: rgba(6, 8, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ck-rud-track::before {
  content: 'RUDDER';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.66);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.ck-pedal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
  padding: 4px 0 3px;
  border-radius: 5px 5px 7px 7px;
  background:
    linear-gradient(180deg, #383c41, #33373c 30%, #1b1e22);
  border: 1px solid #3e434a;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, border-color 0.08s ease;
  pointer-events: none;   /* the whole track is the hit zone */
}
.ck-pedal span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}
.ck-pedal.pressed {
  transform: translateY(2px) scale(0.97);
  border-color: var(--coral, #ff5f3e);
}
.ck-pedal.pressed kbd { color: var(--coral, #ff5f3e); }
.ck-rud-rail {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ck-rud-c {
  position: absolute;
  left: 50%; top: -2px; bottom: -2px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.35);
}
.ck-rud-slider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f4f6f2, #b9bec2 65%, #888d92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: left 0.06s linear;
}
.ck-rud-track:hover .ck-rud-slider { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 95, 62, 0.75); }
.ck-rud-track.dragging .ck-rud-slider { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 2.5px var(--coral, #ff5f3e); }
.ck-autocoord {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 5px 8px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(6, 8, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  cursor: pointer;
  white-space: nowrap;
}
.ck-autocoord.on { color: #3ddc84; }
.ck-autocoord:hover { border-color: rgba(255, 95, 62, 0.7); }

/* ------------------------------------------------------------- small screens */
/* Phones already hide the gauge panel (app.css) and fly on the touch dock; the
   pedestal and pedal bar yield too rather than fight the fixed overlays. Real
   phone-sized cockpit controls are W8 follow-up work, noted in REPORT_W7. */
@media (pointer: coarse) and (max-width: 760px) {
  .ck-pedestal, .ck-rudder { display: none; }
}
@media (max-width: 1080px) {
  .ck-pedestal { gap: 8px 12px; padding: 8px 10px 10px; }
  .ck-ref { display: none; }
}