/* ==== Wind tunnel HUD =====================================================
   THE SAME COLUMN AS EVERYTHING ELSE. The builder and the menu are a left
   spine of type over the app veil, bike lit on the right. This panel used
   to be a glass card docked on the opposite edge — a second brand, and a
   second column that boxed the bike in. It now occupies the same rect as
   `.panel`: flush left, same width, transparent so the ramp shows through.

   Type carries the hierarchy. Hairlines separate sections. The accent marks
   the row you are pointing at, not every bar on the chart.
   ======================================================================== */

.aero-panel {
  position: absolute;
  top: var(--topbar-h, 64px);
  left: 0;
  bottom: 0;
  width: var(--col-w, 460px);
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-1, #F4F1EC);
  z-index: 40;
}

/* ---- header -------------------------------------------------------------- */
.aero-head {
  padding: 8px var(--col-gut, 28px) 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: none;
}
.aero-title {
  font: 600 10.5px/1 var(--font);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(244, 241, 236, 0.55));
  text-shadow: 0 1px 2px rgba(6, 7, 9, 0.92), 0 0 16px rgba(6, 7, 9, 0.72);
}
.aero-close {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--line, rgba(244, 241, 236, 0.14));
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2, rgba(244, 241, 236, 0.72));
  font: 550 13px/1 var(--font);
  text-shadow: 0 1px 2px rgba(6, 7, 9, 0.92), 0 0 16px rgba(6, 7, 9, 0.72);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.aero-close:hover {
  color: var(--ink-1, #F4F1EC);
  border-color: rgba(244, 241, 236, 0.30);
  background: var(--fill-1, rgba(244, 241, 236, 0.05));
}
.aero-close:focus-visible { outline: 2px solid var(--accent, #FF6A2B); outline-offset: 2px; }

/* ---- scrollable body ------------------------------------------------------ */
.aero-body {
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.aero-body::-webkit-scrollbar { width: 6px; }
.aero-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 3px; }
.aero-body::-webkit-scrollbar-track { background: transparent; }

.aero-sec { padding: 18px var(--col-gut, 28px); background: none; }
.aero-sec + .aero-sec { border-top: 1px solid var(--line-soft, rgba(244, 241, 236, 0.08)); }

.aero-sec-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}
.aero-sec-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.aero-sec-row .aero-sec-label { margin-bottom: 0; }

/* ---- 1. CdA headline ------------------------------------------------------ */
.cda-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cda-primary { display: flex; align-items: baseline; gap: 4px; }
.cda-value {
  font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 38px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink-1, #F4F1EC);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cda-unit { font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.cda-secondary { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.cda-yaw-value {
  font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cda-yaw-unit { font-size: 11px; font-weight: 600; color: var(--ink-dim); margin-left: 2px; }
.cda-yaw-tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.cda-explainer { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); }

/* ---- 2. watts at speed ----------------------------------------------------- */
.watts-row { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.watts-value {
  font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 28px; font-weight: 500; color: var(--ink-1, #F4F1EC);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.watts-unit { font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.watts-caption { font-size: 12px; color: var(--ink-dim); margin-left: 3px; }
.watts-speed-echo { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.aero-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.slider-readout {
  flex: none; min-width: 56px; text-align: right;
  font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* one slider look, shared by speed and yaw */
.aero-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: var(--fill-2, rgba(244, 241, 236, 0.09));
  outline: none; cursor: pointer; margin: 8px 0;
}
.aero-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-1, #F4F1EC); box-shadow: 0 0 0 2px rgba(10, 11, 13, 0.8);
  cursor: pointer; transition: transform 0.12s;
}
.aero-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.aero-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: none;
  background: var(--ink-1, #F4F1EC); cursor: pointer;
}
.aero-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill-2, rgba(244, 241, 236, 0.09)); }
.aero-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgba(10, 11, 13, 0.8), 0 0 0 4px var(--accent, #FF6A2B); }

/* ---- 3. delta vs. bare bike ------------------------------------------------ */
.delta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.delta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.delta-value {
  font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 19px; font-weight: 500; color: var(--ink-1, #F4F1EC);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.delta-unit { font-size: 11px; font-weight: 600; color: var(--ink-dim); margin-left: 2px; }
.delta-label { font-size: 10.5px; color: var(--ink-faint); line-height: 1.3; }

/* ---- 4. waterfall ----------------------------------------------------------
   The feature's centrepiece — ranked, biggest offender first. Label sits on
   its own line above a full-width bar (rather than squeezed into a fixed-
   width column beside it) because the bag's name is the whole point of this
   chart — it must never lose the fight for space and get truncated. */
.wf-list { display: flex; flex-direction: column; gap: 10px; }
.wf-row {
  padding: 8px 0; border-radius: 0; cursor: default;
  border-bottom: 1px solid var(--line-soft, rgba(244, 241, 236, 0.08));
  transition: background 0.15s;
}
.wf-row:hover, .wf-row.hl { background: var(--fill-1, rgba(244, 241, 236, 0.05)); }
.wf-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.wf-label-wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wf-label {
  font-size: 11.5px; color: var(--ink); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wf-tag {
  display: none; flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.wf-row.baseline .wf-label { color: var(--ink-dim); font-weight: 500; }
.wf-row.baseline .wf-tag, .wf-row.sheltered .wf-tag { display: inline; }
.wf-value {
  flex: none; font-size: 11px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wf-row.top .wf-value { color: var(--ink-1, #F4F1EC); }
.wf-track { height: 3px; border-radius: 2px; background: var(--fill-2, rgba(244, 241, 236, 0.09)); overflow: hidden; }
.wf-fill {
  height: 100%; border-radius: 2px; background: var(--fill-3, rgba(244, 241, 236, 0.14));
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.wf-row.top .wf-fill,
.wf-row:hover .wf-fill,
.wf-row.hl .wf-fill { background: var(--accent, #FF6A2B); }
.wf-row.baseline .wf-fill { background: var(--fill-2, rgba(244, 241, 236, 0.09)); }

/* a bag hidden in another part's wake — near-zero is a real reading here,
   so it earns an explanation rather than sitting as a bare, suspicious "0 W" */
.wf-row-note {
  margin-top: 5px; font-size: 10.5px; line-height: 1.4;
  color: var(--ink-faint); font-style: italic;
}

/* the frame-bag fairing credit — genuinely good news, so it earns the
   faintest touch of accent tint (the same --accent-soft the rest of the app
   already uses for hover states), not a new colour */
.wf-fairing-note {
  margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-2, rgba(244, 241, 236, 0.72));
  padding: 0;
  border-radius: 0;
  background: none; border: 0;
}

/* ---- 5. grade --------------------------------------------------------------
   Present with confidence, not as the main event — small badge, no traffic-
   light colour coding (this app has one accent, used sparingly). */
.aero-grade { display: flex; align-items: center; gap: 14px; }
.grade-badge {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  width: auto; height: auto;
}
.grade-letter {
  font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 36px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--ink-1, #F4F1EC); line-height: 1;
}
.grade-copy { min-width: 0; }
.grade-name { font-size: 15px; font-weight: 550; color: var(--ink-1, #F4F1EC); }
.grade-blurb { font-size: 11px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }

/* ---- 6. yaw ----------------------------------------------------------------- */
.yaw-cda-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.yaw-cda-label { font-size: 11px; color: var(--ink-dim); }
.yaw-cda-value { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.yaw-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 10px; }

/* ---- 7. how this is calculated ---------------------------------------------
   Deliberately present, deliberately quiet — a disclosure, not a disclaimer. */
.aero-assum summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; color: var(--ink-dim);
  transition: color 0.15s;
}
.aero-assum summary::-webkit-details-marker { display: none; }
.aero-assum summary::marker { content: ''; }
.aero-assum summary:hover { color: var(--ink); }
.assum-chevron { color: var(--ink-faint); font-size: 12px; transition: transform 0.2s; }
.aero-assum[open] .assum-chevron { transform: rotate(180deg); }
.assum-disclaimer {
  margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--ink-2, rgba(244, 241, 236, 0.72));
  padding: 0; border-radius: 0;
  background: none; border: 0;
}
.assum-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.assum-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 11px; }
.a-label { color: var(--ink-dim); }
.a-value { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.a-note { grid-column: 1 / -1; color: var(--ink-faint); font-size: 10.5px; line-height: 1.4; }

/* ---- 8. exit ------------------------------------------------------------- */
.aero-foot { padding: 14px 18px 18px; flex: none; }
.aero-exit-btn {
  width: 100%; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s;
}
.aero-exit-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }

/* ---- mobile peek summary ---------------------------------------------------
   Built unconditionally by panel.js; hidden here by default so desktop never
   sees it. Only the phone breakpoint below turns it back on. */
.aero-peek { display: none; }

/* ---- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wf-fill { transition: none; }
  .aero-slider::-webkit-slider-thumb { transition: none; }
}

/* ---- phone / tablet: same bottom sheet as the builder column --------------
   The builder docks at 900px. A second, narrower breakpoint here used to
   keep the tunnel as a side card on iPad while the bags were already a
   sheet — two rooms again. Same edge, same 55vh cap. */
@media (max-width: 560px) {
  .aero-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 55vh;
    border-radius: 0;
    border-top: 1px solid var(--line, rgba(244, 241, 236, 0.14));
  }
  .aero-sec { padding: 16px var(--col-gut, 28px); }
  .cda-value { font-size: 32px; }
  .watts-value { font-size: 24px; }
  .delta-value { font-size: 16px; }
}

/* Peek/expand is for the short screen — phone, or a landscape thumb —
   where the smoke is the show and the numbers start as a two-line summary. */
@media (max-width: 560px), ((pointer: coarse) and (max-height: 480px)) {
  /* One header: name, close, chevron. The numbers live below it, not
     underneath two floating boxes. */
  .aero-title { display: block; }
  .aero-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 4px 8px 0 16px;
    min-height: 44px;
    width: auto;
    background: none;
  }
  .aero-title {
    margin-right: auto;
    font: 600 11px/1 var(--font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .aero-close {
    border: 0;
    background: none;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    justify-content: center;
  }
  .aero-close span { display: none; }
  .aero-min { display: inline-flex; }
  .aero-panel .nav-min .nav-min-up { display: block; }
  .aero-panel .nav-min .nav-min-dn { display: none; }
  .aero-panel.expanded .nav-min .nav-min-up { display: none; }
  .aero-panel.expanded .nav-min .nav-min-dn { display: block; }

  .cda-explainer, .grade-blurb, .yaw-hint, .aero-delta { display: none; }
  .aero-sec { padding: 12px 20px; }
  .aero-grade { gap: 10px; }
  .grade-letter { font-size: 28px; }
  .cda-value { font-size: 28px; }
  .watts-value { font-size: 22px; }

  /* Closed: two figures. Open: they are in the body, so this row goes. */
  .aero-peek {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 16px 14px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .aero-panel.expanded .aero-peek { display: none; }
  .peek-handle { display: none; }
  .peek-chevron { display: none; }
  .peek-cost-label { display: none; }
  .peek-row { display: flex; align-items: baseline; gap: 16px; }
  .peek-cost { display: flex; align-items: baseline; gap: 4px; flex: none; }
  .peek-cost-value {
    font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 28px; font-weight: 500; color: var(--ink-1, #F4F1EC);
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  .peek-cost-unit { font-size: 13px; font-weight: 600; color: var(--ink-dim); }
  .peek-offender {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    text-align: right;
  }
  .peek-offender-name {
    font-size: 12px; font-weight: 550; color: var(--ink);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .peek-offender-watts {
    font-size: 13px; font-weight: 600; color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .aero-body { display: none; }
  .aero-panel.expanded .aero-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .aero-foot { display: none; }
  .aero-panel.expanded .aero-foot { display: block; }
  .aero-head, .aero-peek, .aero-foot { flex: none; }
}

/* ---- touch: 44px minimum slider targets --------------------------------
   `(pointer: coarse)` on its own (not gated to phone width) per MOBILE.md —
   a tablet in landscape is still a thumb, not a cursor. The visible dot
   stays the same size as desktop's; only the invisible hit area grows, via
   a radial-gradient fill rather than box-shadow so the drop-shadow below
   traces the dot's own alpha instead of casting a shadow across the whole
   44px circle. */
@media (pointer: coarse) {
  .aero-slider { height: 8px; margin: 20px 0; touch-action: none; }
  .aero-slider::-webkit-slider-thumb {
    width: 44px; height: 44px;
    background: radial-gradient(circle, var(--accent) 0 7px, transparent 7px);
    box-shadow: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  }
  .aero-slider::-moz-range-thumb {
    width: 44px; height: 44px; border: none;
    background: radial-gradient(circle, var(--accent) 0 7px, transparent 7px);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  }
  .aero-slider-row { margin-top: 16px; }
}