/* ── Workout panel ── */
#workout-panel { display: flex; flex-direction: column; gap: 11px; flex: 1; min-height: 0; overflow-y: auto; }

#btn-instant-workout { background: color-mix(in srgb, var(--amber) 8%, transparent); border: 1px solid var(--amber-ink); color: var(--amber-ink); border-radius: 6px; padding: 10px 14px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: all .15s; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#btn-instant-workout:hover { filter: brightness(1.3); background: color-mix(in srgb, var(--amber) 12%, transparent); }

/* ── Metric tiles ── */
/* Controls collapse */
#top-controls { display: flex; flex-direction: column; gap: 8px; }
#top-controls.collapsed { display: none; }
#top-toggle { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: var(--fs-micro); letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim2); flex-shrink: 0; transition: all .15s; }
#top-toggle:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
#top-toggle .toggle-chevron { transition: transform .2s; flex-shrink: 0; }
#top-toggle.collapsed .toggle-chevron { transform: rotate(-90deg); }
#top-toggle-summary { margin-left: auto; color: var(--amber-ink); font-size: var(--fs-sm); letter-spacing: 1px; }

#metrics { display: grid; gap: 8px; flex-shrink: 0; }
#metrics[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
#metrics[data-count="6"] { grid-template-columns: repeat(6, 1fr); }
#metrics[data-count="8"] { grid-template-columns: repeat(8, 1fr); }
#metrics[data-count="4"] .tile-value { font-size: var(--fs-hero); }
#metrics[data-count="6"] .tile-value { font-size: var(--fs-xxl); }
#metrics[data-count="8"] .tile-value { font-size: var(--fs-xl); }
.tile    { background: var(--bg2); border: 1px solid var(--bdr); border-top: 2px solid var(--dim); border-radius: 6px; padding: 10px 12px; cursor: pointer; user-select: none; transition: border-color .15s; }
.tile:hover { border-top-color: var(--amber-ink); }
.tile-label { font-size: var(--fs-micro); letter-spacing: 2.5px; color: var(--dim); text-transform: uppercase; margin-bottom: 5px; transition: color .15s; }
.tile:hover .tile-label { color: var(--amber-ink); }
/* Mono on the reading and its unit, sans on the label and the sub-line — the
   same split the phone player uses (fonts.dataBold / fonts.data against
   fonts.regular). Tabular figures so a tile does not jitter as its digits
   change. Inheriting --font-text here was TKB-257. */
.tile-value { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; color: var(--dim); }
.tile-unit  { font-family: var(--font-data); font-size: var(--fs-base); color: var(--dim2); margin-left: 2px; }
.tile-sub   { font-size: var(--fs-xs); color: var(--dim2); margin-top: 3px; min-height: 13px; }

/* ── Progress bar ── */
#progress-wrap  { display: none; flex-shrink: 0; }
#progress-track { height: 3px; background: var(--bdr); border-radius: 2px; overflow: hidden; }
#progress-fill  { height: 100%; width: 0%; background: linear-gradient(to right, var(--blue), var(--blue)); transition: width .9s linear; }
#progress-labels{ display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--dim3); margin-top: 3px; }

/* ── Chart ── */
#chart-wrap { background: var(--bg1); border: 1px solid var(--bdr); border-radius: 8px; padding: 14px 10px 8px; display: none; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; position: relative; }
#chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; margin-left: 6px; margin-right: 6px; }
#chart-title{ font-size: var(--fs-micro); letter-spacing: 3px; color: var(--dim3); text-transform: uppercase; }
#chart-toggles { display: flex; gap: 12px; }
.chart-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: var(--fs-xs); color: var(--dim2); transition: color .15s; }
.chart-toggle:hover { filter: brightness(1.3); }
.chart-toggle input { display: none; }
.chart-toggle .toggle-dot { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--dim3); transition: all .15s; }
.chart-toggle input:checked + .toggle-dot { border-color: currentColor; background: currentColor; }
.chart-toggle.power { color: var(--blue); }
.chart-toggle.hr { color: var(--red); }
.chart-toggle.cadence { color: var(--amber-ink); }
.chart-toggle.target { color: var(--dim); }
.interval-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.layout-btn { background: var(--bg2); color: var(--dim2); border-color: var(--bdr); }
.layout-btn:hover { color: var(--fg); }
.overlay-btn.active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
/* Zone legend (TKB-246). The dot carries the zone's own colour, set inline from
   core/zones.js — the same fixed hexes the library and calendar legends use, so
   it is deliberately NOT a palette token and does not swap with the theme. */
#zone-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 6px 8px; font-size: var(--fs-xs); color: var(--dim2); }
.zlegend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.zlegend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

#chart-container { flex: 1; position: relative; min-height: 0; overflow: visible; }
#chart-overlay-text {
  position: absolute; top: 35%; left: 0; right: 0;
  padding: 0 24px;
  font-size: clamp(var(--fs-md), 2.6vw, var(--fs-mega)); font-weight: 600; line-height: 1.2;
  color: var(--fg); text-align: center;
  pointer-events: none; z-index: 10;
  word-wrap: break-word; overflow-wrap: break-word;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .3s ease;
}
#chart-overlay-text.visible { opacity: 1; }
#chart-overlay-text.warn { color: var(--amber-ink); }
#chart-canvas { width: 100% !important; height: 100% !important; }

/* ── Workout mode selector ── */
#mode-selector { display: flex; gap: 2px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px; padding: 2px; }
.mode-btn {
  flex: 1; background: none; border: none; border-radius: 3px;
  padding: 6px 10px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim2); cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.mode-btn:hover { color: var(--fg); background: var(--bg3); }
.mode-btn.active { background: var(--green); color: #fff; }
.mode-btn[data-mode="hr-servo"].active { background: var(--red); }
.mode-btn[data-mode="slope"].active { background: var(--blue); }
.mode-btn[data-mode="resistance"].active { background: var(--amber); }

/* ── Common slider control styles ── */
.slider-control { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 12px 14px; flex-shrink: 0; }
.slider-control.hidden { display: none; }
/* The accent goes on the control's eyebrow label, not on a 10px edge (TKF-310). */
.slider-control.accent-red    .slider-control-label { color: var(--red); }
.slider-control.accent-green  .slider-control-label { color: var(--green); }
.slider-control.accent-blue   .slider-control-label { color: var(--blue); }
.slider-control.accent-amber  .slider-control-label { color: var(--amber-ink); }
.slider-control.accent-orange .slider-control-label { color: var(--orange); }
.slider-control-input.orange { color: var(--orange); }
.slider-control-input.orange:focus { border-color: var(--orange); }
.slider-control-range.orange::-webkit-slider-thumb { background: var(--orange); }
.slider-control-range.orange::-moz-range-thumb { background: var(--orange); }
.slider-pm-btn.orange:hover { border-color: var(--orange); color: var(--orange); }
.slider-preset-btn.orange:hover { border-color: var(--orange); color: var(--orange); }
.slider-preset-btn.orange.active { background: var(--orange); color: var(--bg0); border-color: var(--orange); }
.mode-controls { display: none; }
.mode-controls.visible { display: block; }
/* Large mode sliders are replaced by the inline intensity +/- buttons. */
#slope-wrap .slider-control,
#resistance-wrap .slider-control { display: none; }
/* Empty wraps collapse to nothing so they don't leave a gap. */
#slope-wrap.visible, #resistance-wrap.visible { display: none; }
/* HR Servo unit toggle inline to the right of the intensity buttons (HR Servo mode only) */
/* Two independent classes, because they answer two questions: `visible` is "is
   this HR mode", `active` is "has the ride started". The dimming matches
   #inline-intensity beside it — switching the unit converts the target those
   ± buttons set, so the two wake at the same moment (TKB-261). */
#hr-unit-toggle-inline { display: none; align-items: center; gap: 4px; opacity: .35; pointer-events: none; transition: opacity .2s; }
#hr-unit-toggle-inline.visible { display: flex; }
#hr-unit-toggle-inline.active { opacity: 1; pointer-events: auto; }
.slider-control-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.slider-control-label { font-size: var(--fs-micro); letter-spacing: 2px; color: var(--dim2); text-transform: uppercase; }
.slider-control-value { display: flex; align-items: center; gap: 8px; }
/* The mode readings are mono, the labels around them are not (TKB-259) — the
   phone's Stepper draws its value in fonts.dataBold with the unit inside the
   string, against a sans label. Applies to the number, its unit, the preset
   chips and the bpm / %HRR toggle; the − / + buttons stay sans, as they do on
   the phone (fonts.bold), because they are controls rather than readings.
   The input goes 80px -> 92px with it: mono is wider per digit, and "-10.0"
   plus a number input's spinner had no room left at the old width. */
.slider-control-input { background: var(--bg0); border: 1px solid var(--bdr2); border-radius: 4px; padding: 4px 6px; font-size: var(--fs-lg); font-weight: 800; font-family: var(--font-data); font-variant-numeric: tabular-nums; width: 92px; outline: none; text-align: center; }
.slider-control-input:focus { border-color: var(--amber-ink); }
.slider-control-input.red { color: var(--red); }
.slider-control-input.red:focus { border-color: var(--red); }
.slider-control-input.blue { color: var(--blue); }
.slider-control-input.blue:focus { border-color: var(--blue); }
.slider-control-input.amber { color: var(--amber-ink); }
.slider-control-input.green { color: var(--green); }
.slider-control-input.green:focus { border-color: var(--green); }
.slider-control-unit { font-family: var(--font-data); font-size: var(--fs-base); color: var(--dim2); min-width: 30px; }
.slider-control-range { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: var(--bg0); border-radius: 4px; outline: none; cursor: pointer; }
.slider-control-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); cursor: pointer; border: 2px solid var(--bg0); }
.slider-control-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); cursor: pointer; border: 2px solid var(--bg0); }
.slider-control-range.red::-webkit-slider-thumb { background: var(--red); }
.slider-control-range.red::-moz-range-thumb { background: var(--red); }
.slider-control-range.blue::-webkit-slider-thumb { background: var(--blue); }
.slider-control-range.blue::-moz-range-thumb { background: var(--blue); }
.slider-control-range.green::-webkit-slider-thumb { background: var(--green); }
.slider-control-range.green::-moz-range-thumb { background: var(--green); }
.slider-control-buttons { display: flex; gap: 6px; margin-top: 10px; align-items: center; justify-content: center; }
.slider-pm-btn { background: var(--bg3); border: 1px solid var(--bdr); color: var(--dim); border-radius: 4px; width: 32px; height: 32px; font-size: var(--fs-md); cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.slider-pm-btn:hover { filter: brightness(1.3); border-color: var(--amber-ink); color: var(--amber-ink); }
.slider-pm-btn.red:hover { border-color: var(--red); color: var(--red); }
.slider-pm-btn.blue:hover { border-color: var(--blue); color: var(--blue); }
.slider-pm-btn.amber:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.slider-pm-btn.green:hover { border-color: var(--green); color: var(--green); }
.slider-preset-btn { background: var(--bg3); border: 1px solid var(--bdr); color: var(--dim); border-radius: 4px; padding: 5px 12px; font-family: var(--font-data); font-size: var(--fs-xs); cursor: pointer; transition: all .15s; }
.slider-preset-btn:hover { filter: brightness(1.3); border-color: var(--amber-ink); color: var(--amber-ink); }
.slider-preset-btn.blue:hover { border-color: var(--blue); color: var(--blue); }
.slider-preset-btn.amber:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.slider-preset-btn.green:hover { border-color: var(--green); color: var(--green); }
.slider-preset-btn.active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.slider-preset-btn.green.active { background: var(--green); border-color: var(--green); }
.slider-preset-btn.blue.active { background: var(--blue); border-color: var(--blue); }
.slider-preset-btn.amber.active { background: var(--amber); border-color: var(--amber); }
.slider-presets { display: flex; gap: 4px; }
.slider-control-range.amber::-webkit-slider-thumb { background: var(--amber); }
.slider-control-range.amber::-moz-range-thumb { background: var(--amber); }
.unit-toggle { display: flex; gap: 4px; }
.unit-toggle-btn { background: var(--bg3); border: 1px solid var(--bdr); color: var(--dim2); border-radius: 3px; padding: 4px 10px; font-family: var(--font-data); font-size: var(--fs-xs); cursor: pointer; transition: all .15s; letter-spacing: 1px; }
.unit-toggle-btn:hover { filter: brightness(1.2); }
.unit-toggle-btn.active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.unit-toggle-btn.active.red { background: var(--red); color: white; border-color: var(--red); }
.unit-toggle-btn.active.blue { background: var(--blue); color: white; border-color: var(--blue); }

/* ── HR Servo controls ── */
#hr-servo-wrap { display: none; }
#hr-servo-wrap.visible { display: flex; flex-direction: column; gap: 11px; }

/* ── Scale toggle ── */
.scale-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--dim2); }
.scale-toggle-btn { background: var(--bg3); border: 1px solid var(--bdr); color: var(--dim2); border-radius: 3px; padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; transition: all .15s; letter-spacing: 1px; }
.scale-toggle-btn:hover { filter: brightness(1.2); }
.scale-toggle-btn.active { background: var(--blue); color: white; border-color: var(--blue); }

/* ── Controls ── */
#controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; flex-shrink: 0; }
#controls .ctrl-btns-group { grid-column: 2; display: flex; gap: 10px; justify-self: center; }
#controls .ctrl-right-group { grid-column: 3; display: flex; justify-self: end; align-items: center; gap: 12px; }
.ctrl-btn { padding: 12px 36px; border-radius: 6px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; border: 1px solid var(--bdr); transition: all .15s; background: var(--bg2); color: var(--dim3); }
.ctrl-btn:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-1px); }
.ctrl-btn:active:not(:disabled) { transform: translateY(0); }
.ctrl-btn:disabled { opacity: .35; cursor: default; }
.ctrl-btn.skip-btn { padding: 12px 18px; font-size: var(--fs-lg); }

/* Inline intensity (always visible; dimmed until playback starts) */
#inline-intensity { display: flex; align-items: center; gap: 8px; opacity: .35; pointer-events: none; transition: opacity .2s; }
#inline-intensity.active { opacity: 1; pointer-events: auto; }
#inline-intensity .inline-int-btn { padding: 12px 28px; border-radius: 6px; border: 1px solid var(--bdr); background: var(--bg2); color: var(--green); font-size: var(--fs-lg); font-weight: 700; cursor: pointer; transition: all .15s; }
#inline-intensity .inline-int-btn:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); }
#inline-intensity .inline-int-btn:active { transform: translateY(0); }
#inline-intensity .inline-int-val { min-width: 60px; text-align: center; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green); font-size: var(--fs-lg); letter-spacing: 1px; }

/* ── Export panel ── */
#export-panel { display: none; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 6px; padding: 14px 16px; flex-wrap: wrap; gap: 14px; align-items: center; }
#export-stats { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.estat        { }
.estat-lbl    { font-size: var(--fs-micro); letter-spacing: 2px; color: var(--dim2); text-transform: uppercase; }
.estat-val    { font-size: var(--fs-lg); font-weight: 700; margin-top: 2px; }
#export-right { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#export-btn   { padding: 10px 18px; border-radius: 6px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border: 1px solid var(--green); display: flex; align-items: center; gap: 8px; transition: all .15s; }
#export-btn:hover { filter: brightness(1.2); }
#strava-upload-btn { padding: 10px 18px; border-radius: 6px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--orange); border: 1px solid var(--orange); display: flex; align-items: center; gap: 8px; transition: all .15s; }
#strava-upload-btn:hover { filter: brightness(1.2); }
#strava-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
#save-chart-btn { padding: 10px 18px; border-radius: 6px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; background: var(--bg1); color: var(--blue); border: 1px solid var(--blue); display: flex; align-items: center; gap: 8px; transition: all .15s; }
#save-chart-btn:hover { filter: brightness(1.2); }
#save-chart-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
#export-filename { font-size: var(--fs-xs); color: var(--dim2); letter-spacing: .5px; }

/* ── Chart split screen ── */
#chart-split { display: flex; flex: 1; gap: 0; min-height: 0; overflow: hidden; }
#chart-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Interval chart ── */
#interval-chart-wrap { margin-top: 8px; padding-top: 6px; min-width: 0; }
#interval-chart-header { display: flex; align-items: center; margin-bottom: 4px; margin-left: 6px; flex-shrink: 0; }
#interval-chart-title { font-size: var(--fs-micro); letter-spacing: 3px; color: var(--dim3); text-transform: uppercase; }
#interval-chart-container { position: relative; min-height: 0; flex: 1; }
#interval-chart-canvas { width: 100% !important; height: 100% !important; }

/* Stacked interval layout (main chart above, interval below) */
#chart-split.stacked { flex-direction: column; }
#chart-split.stacked #chart-left { flex: 2; min-height: 0; }
#chart-split.stacked #interval-chart-wrap { flex: 1; min-height: 0; border-top: 1px solid var(--bdr); border-left: none; margin-left: 0; padding-left: 0; display: flex; flex-direction: column; }
#chart-split.stacked #interval-chart-container { flex: 1; height: auto; min-height: 0; }

/* Side-by-side interval layout (default row direction, shared with map panel) */
#chart-split:not(.stacked) #interval-chart-wrap { border-top: none; border-left: 1px solid var(--bdr); margin-top: 0; padding-top: 0; padding-left: 8px; margin-left: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#chart-split:not(.stacked) #interval-chart-container { flex: 1; height: auto; min-height: 0; }

/* Stacked map layout (main chart above, map below) */

/* ── Resize dividers ── */
.chart-divider { background: transparent; flex: 0 0 6px; position: relative; z-index: 5; transition: background .15s; }
.chart-divider:hover, .chart-divider.dragging { background: var(--green); }
#chart-split.stacked .chart-divider { cursor: ns-resize; width: 100%; }
#chart-split:not(.stacked) .chart-divider { cursor: ew-resize; height: 100%; }
body.resizing-split { cursor: ns-resize; user-select: none; }
body.resizing-split.horizontal { cursor: ew-resize; }