/* Climbs module (Climbs tab, ride-detail block). Components are prefixed
   `cl-` and only use the design tokens from index.html, so they can move to
   a separate frontend together with /js/climbs/. Not layered: wins over
   the base layer, like the other area sheets. */

/* ── Shared helpers ──────────────────────────────────────────────────────── */

.cl-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cl-between.cl-center { align-items: center; }
.cl-right { text-align: right; }
.cl-left { text-align: left; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-meta { font: 400 13px/1.35 var(--font-sans); color: var(--color-text-muted); }
.cl-gap { margin-top: 12px; }
.cl-k { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-label); margin-top: 6px; }
.cl-arrow { color: var(--color-text-dim); font-size: 20px; flex-shrink: 0; }
.cl-section { margin: 6px 2px -4px; }
.cl-wide { width: 100%; }
.cl-link { background: none; border: none; color: var(--color-accent); font: 600 14px/1.3 var(--font-sans); cursor: pointer; padding: 6px 0; min-height: 44px; }
.cl-name-display { font-size: 36px; overflow-wrap: anywhere; }
.cl-btns { display: flex; gap: 8px; }
.cl-btns .btn { flex: 1; min-height: 50px; }
.cl-btns .btn-primary { border-radius: var(--radius-md); }

/* ── Segmented control ───────────────────────────────────────────────────── */

.cl-seg { display: inline-flex; background: var(--color-inset); border-radius: 10px; padding: 3px; }
.cl-seg button {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 0 12px; height: 28px; border-radius: 8px;
  font: 600 13px/28px var(--font-sans); color: var(--color-text-muted); white-space: nowrap;
}
/* 44 px touch target around the 28 px look. */
.cl-seg button::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.cl-seg button.on { background: #2A2E35; color: var(--color-text); }
.cl-seg.wide, .cl-seg.acc { display: flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 4px; }
.cl-seg.wide button, .cl-seg.acc button { flex: 1; height: 36px; line-height: 36px; border-radius: 10px; font-size: 14px; }
.cl-seg.wide button::after, .cl-seg.acc button::after { top: -4px; bottom: -4px; }
.cl-seg.acc { background: var(--color-inset); }
.cl-seg.acc button.on { background: var(--color-surface-3); }
.cl-seg button:focus-visible, .cl-pill:focus-visible, .cl-sq:focus-visible, .cl-locate:focus-visible,
.cl-star:focus-visible, .cl-row:focus-visible, .cl-ccard:focus-visible, .cl-hcard:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ── Pills ───────────────────────────────────────────────────────────────── */

.cl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-pill {
  min-height: 44px; padding: 0 16px; border-radius: 22px; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border-2);
  font: 600 13px/1 var(--font-sans); color: var(--color-text-muted);
}
.cl-pill.on { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.cl-pill:disabled { opacity: .4; cursor: default; }
.cl-sheet .cl-pill { background: var(--color-inset); }
.cl-sheet .cl-pill.on { background: var(--color-text); }

/* ── Range slider ────────────────────────────────────────────────────────── */

.cl-range { position: relative; height: 44px; display: flex; align-items: center; }
.cl-range-track { position: absolute; left: 0; right: 0; height: 8px; border-radius: 4px; background: var(--color-surface-3); }
.cl-range-fill { position: absolute; left: 0; height: 8px; border-radius: 4px; background: var(--color-accent); }
.cl-range-knob {
  position: absolute; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-text); box-shadow: 0 0 0 4px rgba(214,255,61,.25); pointer-events: none;
}
.cl-range-mark { position: absolute; top: 4px; width: 2px; height: 36px; margin-left: -1px; background: rgba(244,245,242,.35); pointer-events: none; }
.cl-range input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.cl-range:has(input:focus-visible) .cl-range-knob { box-shadow: 0 0 0 4px var(--color-accent); }
.cl-range-labels { position: relative; display: flex; justify-content: space-between; margin-top: 6px; font: 500 11px/1 var(--font-mono); color: var(--color-text-dim); min-height: 12px; }
.cl-range-marklbl { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ── Bottom sheet ────────────────────────────────────────────────────────── */

.cl-sheet-dim {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 119;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cl-sheet-dim.open { opacity: 1; pointer-events: auto; }
.cl-sheet {
  --cl-sheet-half: 56dvh;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  height: var(--cl-sheet-half); max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
  display: flex; flex-direction: column;
  background: var(--color-sheet); border-radius: 30px 30px 0 0; border-top: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.32,.72,0,1), height .32s cubic-bezier(.32,.72,0,1);
  outline: none; visibility: hidden;
}
.cl-sheet.open { transform: translateY(0); visibility: visible; }
.cl-sheet:not(.open) { transition: transform .28s ease-in, visibility 0s .3s; }
.cl-sheet.full { height: calc(100dvh - env(safe-area-inset-top) - 24px); }
.cl-sheet.dragging { transition: none; }
.cl-sheet-grab {
  flex-shrink: 0; display: flex; justify-content: center; align-items: flex-start;
  width: 100%; height: 30px; padding-top: 10px; background: none; border: none; cursor: grab; touch-action: none;
}
.cl-sheet-grab span { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.cl-sheet-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--color-text-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.cl-sheet-close::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-surface-3); z-index: -1; }
.cl-sheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.cl-sheet-body > * { flex-shrink: 0; }
.cl-sheet-foot { flex-shrink: 0; padding: 12px 20px calc(env(safe-area-inset-bottom) + 18px); border-top: 1px solid rgba(255,255,255,.06); }
.cl-sheet-foot[hidden] { display: none; }
.cl-sheet-head { display: flex; flex-direction: column; gap: 8px; padding-right: 44px; }
.cl-filter-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.cl-filter-foot .btn { min-height: 54px; border-radius: 16px; }

/* ── Toast with an action ────────────────────────────────────────────────── */

.cl-toast { white-space: normal; max-width: calc(100vw - 32px); text-align: center; }
.cl-toast.has-action { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.cl-toast-action { background: none; border: none; font: 700 14px/1 var(--font-sans); color: var(--color-bg); text-decoration: underline; cursor: pointer; min-height: 32px; }
body.cl-map-open .v3-toast { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 176px); }

/* ── Elevation profile ───────────────────────────────────────────────────── */

.cl-prof { display: block; width: 100%; height: auto; }
.cl-prof.mini { height: 100%; }
.cl-prof-line { fill: none; stroke: #F4F5F2; stroke-width: 1.4; stroke-linejoin: round; }
.cl-prof-line.mini { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cl-prof-grid { stroke: rgba(255,255,255,.06); }
.cl-prof-sep { stroke: #0A0B0D; stroke-width: .8; opacity: .55; }
.cl-prof-tick { fill: #626870; font: 500 8.5px var(--font-mono); }
.cl-prof-lbl { fill: #D4D7DB; font: 700 8px var(--font-mono); }
.cl-prof-wrap { position: relative; }
.cl-prof-wrap[role="slider"] { touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; outline: none; }
.cl-prof-wrap[role="slider"]:focus-visible { box-shadow: 0 0 0 2px var(--color-accent-line); border-radius: 8px; }
.cl-scrub-line { stroke: rgba(244,245,242,.7); stroke-width: 1; stroke-dasharray: 2 2; }
.cl-scrub-dot { fill: #F4F5F2; stroke: #0A0B0D; stroke-width: 2; }
.cl-mini-empty { height: 100%; border-radius: 6px; background: var(--color-surface-2); }

/* ── Loading, empty and error states ─────────────────────────────────────── */

.cl-skel { background: linear-gradient(90deg, var(--color-surface-2) 0%, #23272D 50%, var(--color-surface-2) 100%); background-size: 200% 100%; border-radius: 8px; animation: cl-shimmer 1.4s linear infinite; }
@keyframes cl-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cl-skel { animation: none; } }
.cl-skel-wrap { display: flex; flex-direction: column; gap: 14px; }
.cl-skel-list { display: flex; flex-direction: column; gap: 8px; }
.cl-skel-row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.cl-skel-mini { width: 74px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.cl-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cl-skel-l1 { height: 16px; width: 60%; }
.cl-skel-l2 { height: 12px; width: 40%; }
.cl-skel-title { height: 34px; width: 70%; }
.cl-skel-num { display: inline-block; height: 26px; width: 80px; vertical-align: middle; }
.cl-skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cl-skel-grid.three { grid-template-columns: repeat(3, 1fr); }
.cl-skel-stat { height: 58px; border-radius: 16px; }
.cl-skel-prof { height: 38px; margin-top: 10px; }
.cl-skel-prof.lg { height: 130px; border-radius: var(--radius-xl); }
.cl-skel-card { height: 220px; border-radius: var(--radius-xl); }
.cl-skel-card.short { height: 120px; }

.cl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 12px; }
.cl-empty-ic { color: var(--color-text-dim); margin-bottom: 4px; }
.cl-empty-t { font: 700 17px/1.25 var(--font-sans); color: var(--color-text); }
.cl-empty-t.cl-left { margin-top: 12px; }
.cl-empty-d { font: 400 14px/1.45 var(--font-sans); color: var(--color-text-muted); max-width: 34ch; }
.cl-empty-btn { margin-top: 8px; min-height: 44px; }
.cl-error .cl-empty-t { color: var(--color-warn); }
.cl-offline {
  align-self: flex-start; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-warn); background: var(--color-warn-bg); border: 1px solid var(--color-warn-line);
  padding: 8px 10px; border-radius: 10px;
}

/* ── Discover: map, header, locate, carousel ─────────────────────────────── */

body.cl-map-open { overflow: hidden; }
#page-climbs.cl-on-map { padding-top: 0; }
.cl-discover { position: fixed; inset: 0; z-index: 1; background: var(--color-bg); }
/* MapLibre's own CSS (loaded later) sets position: relative on the map. */
.cl-discover > .cl-map, .cl-discover > .cl-map.maplibregl-map { position: absolute; inset: 0; }
.cl-map-msg {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 24px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-label);
  background: var(--color-bg);
}
.cl-map-msg[hidden] { display: none; }
.cl-map-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 30px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(var(--color-bg) 70%, rgba(10,11,13,0));
  pointer-events: none;
}
.cl-map-top > * { pointer-events: auto; }
.cl-map-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.cl-map-row > * { pointer-events: auto; }
.cl-map-chip {
  font: 500 11px/1.2 var(--font-mono); letter-spacing: .06em; color: var(--color-text-soft);
  padding: 9px 10px; border-radius: 10px; background: rgba(19,21,25,.92); border: 1px solid var(--color-border);
}
.cl-map-chip b { color: var(--color-accent); font-weight: 700; }
.cl-discover.loading .cl-map-chip, .loading > .cl-discover .cl-map-chip { opacity: .7; }
.cl-sq {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-dim); border: 1px solid rgba(214,255,61,.3); color: var(--color-accent);
}
.cl-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--color-accent); color: var(--color-accent-on); font: 700 11px/19px var(--font-mono); text-align: center;
}
.cl-badge:empty { display: none; }
.cl-locate {
  position: absolute; right: 20px; z-index: 6; cursor: pointer;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 172px);
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(19,21,25,.94); border: 1px solid rgba(255,255,255,.1); color: var(--color-core);
  display: flex; align-items: center; justify-content: center;
}
.cl-locate.on { border-color: rgba(122,167,255,.5); }
.cl-locate.busy svg { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cl-locate.busy svg { animation: none; opacity: .5; } }
.cl-carousel {
  position: absolute; left: 0; right: 0; z-index: 6;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; gap: 8px; overflow-x: auto; padding: 0 20px; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.cl-carousel::-webkit-scrollbar { display: none; }
.cl-carousel > [role="listitem"] { flex: 0 0 auto; scroll-snap-align: center; display: flex; }
.cl-ccard {
  width: 236px; flex: 0 0 236px; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: rgba(19,21,25,.97); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px;
  color: var(--color-text); font-family: var(--font-sans);
}
.cl-ccard.on { border-color: var(--color-accent-line); box-shadow: 0 0 0 1px var(--color-accent-line); }
.cl-ccard-name { font: 700 16px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-ccard-dist { flex-shrink: 0; }
.cl-ccard .cl-meta { margin-top: 4px; }
.cl-ccard-prof { height: 38px; margin-top: 10px; }
.cl-ccard .cl-chips { margin-top: 10px; flex-wrap: nowrap; overflow: hidden; }
.cl-ccard-empty, .cl-ccard-skel { width: calc(100vw - 40px); max-width: 360px; flex-basis: auto; cursor: default; gap: 6px; }
.cl-ccard-empty { align-items: flex-start; }
.cl-ccard-empty .cl-empty-btn { margin-top: 4px; }
.cl-ccard-skel { width: 236px; }

/* MapLibre chrome in the house style. */
.cl-discover .maplibregl-ctrl-bottom-left { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 170px); }
.cl-on-map .maplibregl-ctrl-attrib, .cl-mapcard .maplibregl-ctrl-attrib { background: rgba(19,21,25,.8) !important; color: var(--color-text-dim); font: 400 10px/1.3 var(--font-sans); }
.maplibregl-ctrl-attrib a { color: var(--color-text-muted) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .6; }

/* ── Climb panel ─────────────────────────────────────────────────────────── */

.cl-panel .cl-sheet-body { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
.cl-panel-head, .cl-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-panel-head { padding-right: 46px; }
.cl-panel-title { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-star {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border-2); color: var(--color-text-muted);
}
.cl-star.on { color: var(--color-accent); border-color: rgba(214,255,61,.4); background: var(--color-accent-dim); }
.cl-g4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.cl-g4 > div + div { border-left: 1px solid var(--color-border-2); padding-left: 12px; }
.cl-prof-card { padding: 14px 14px 10px; }
.cl-pred .num { min-height: 30px; }

/* ── Filters ─────────────────────────────────────────────────────────────── */

.cl-fgroup { display: flex; flex-direction: column; gap: 10px; }
.cl-fhead { display: flex; justify-content: space-between; align-items: baseline; }
.cl-fval { font: 600 13px/1 var(--font-sans); color: var(--color-text); }
.cl-fnote { font: 400 13px/1.35 var(--font-sans); color: var(--color-text-dim); }
.cl-fnote[hidden] { display: none; }

/* ── My climbs ───────────────────────────────────────────────────────────── */

.cl-head { padding-top: 2px; }
.cl-searchrow { display: flex; gap: 8px; }
.cl-search {
  flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-dim);
}
.cl-search:focus-within { border-color: var(--color-accent-line); }
.cl-search input { flex: 1; min-width: 0; height: 42px; padding: 0; border: none; background: none; font: 400 16px/1 var(--font-sans); color: var(--color-text); }
.cl-search input:focus { outline: none; }
.cl-search input::-webkit-search-cancel-button { filter: invert(.6); }
.cl-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text); font-family: var(--font-sans);
}
.cl-row-mini { width: 74px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--color-inset); padding: 5px 5px 0; overflow: hidden; }
.cl-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-row-name { font: 700 17px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row .cl-chips { margin-top: 4px; }
.cl-target-name { font: 700 30px/1 var(--font-sans); font-stretch: 80%; margin-top: 14px; }
.cl-target .cl-meta { margin-top: 6px; }
.cl-target-prof { margin-top: 14px; }
.cl-target-nums { margin-top: 16px; }
.cl-target .cl-btns { margin-top: 18px; }
.cl-collection-name { font: 700 22px/1.15 var(--font-sans); margin-top: 10px; }
.cl-collection .cl-meta { margin-top: 4px; }
.cl-hscroll {
  display: flex; gap: 8px; overflow-x: auto; margin: 14px -18px 0; padding: 0 18px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.cl-hscroll::-webkit-scrollbar { display: none; }
.cl-hscroll > [role="listitem"] { display: flex; scroll-snap-align: start; }
.cl-hcard {
  flex: 0 0 132px; width: 132px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--color-inset); border: none; border-radius: 16px; padding: 12px; color: var(--color-text); font-family: var(--font-sans);
}
.cl-hcard-name { font: 700 14px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-hcard .cl-meta { font-size: 12px; }
.cl-hcard-prof { display: block; height: 44px; margin-top: 6px; }
.cl-field { display: flex; flex-direction: column; gap: 8px; }
.cl-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cl-toggle-t { font: 600 15px/1.3 var(--font-sans); }
.cl-import-msg { font: 400 14px/1.45 var(--font-sans); color: var(--color-warn); min-height: 20px; }
.cl-import-msg b { color: var(--color-text); }

/* ── Climb detail ────────────────────────────────────────────────────────── */

.cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cl-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 12px; min-width: 0; }
.cl-stat .v { font: 800 24px/1 var(--font-sans); font-stretch: 72%; font-variant-numeric: tabular-nums; color: var(--color-text); }
.cl-stat .v small { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.cl-detail-prof { margin-top: 14px; }
.cl-readout { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; min-height: 14px; font: 500 12px/1 var(--font-mono); color: var(--color-text-muted); }
.cl-readout b { color: var(--color-text); font-weight: 700; }
.cl-mapcard { padding: 0; overflow: hidden; }
.cl-detail-map, .cl-detail-map.maplibregl-map { position: relative; height: 220px; background: var(--color-inset); }
.cl-map-fail { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0 auto; }
.cl-keys { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cl-key { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cl-key-t { font: 600 15px/1.3 var(--font-sans); }
.cl-gchip { flex-shrink: 0; min-width: 52px; padding: 6px 8px; border-radius: 6px; text-align: center; font: 700 12px/1 var(--font-mono); color: #0A0B0D; }
.cl-attempt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 16px; background: var(--color-inset); border: none; color: var(--color-text); font-family: var(--font-sans);
}
.cl-attempt-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-attempt-name { font: 600 15px/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-attempt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

/* ── Prepare ─────────────────────────────────────────────────────────────── */

.cl-bigtime { font: 800 64px/.85 var(--font-sans); font-stretch: 64%; font-variant-numeric: tabular-nums; margin-top: 14px; min-height: 54px; }
.cl-plan-sub { font: 500 15px/1.4 var(--font-sans); color: var(--color-text-muted); margin-top: 8px; min-height: 21px; }
.cl-plan-sub b { color: var(--color-text); }
.cl-plan-mode { margin-top: 18px; }
.cl-plan .cl-range { margin-top: 8px; }
.cl-plan.pending .cl-bigtime { opacity: .55; transition: opacity .15s; }
.cl-gain { font: 600 13px/1 var(--font-sans); color: var(--color-accent); }
.cl-pace { margin-top: 12px; }
.cl-pace-row { display: grid; grid-template-columns: 58px 48px 1fr 52px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.cl-pace-km { font: 500 12px/1 var(--font-mono); color: var(--color-text-label); }
.cl-pace-row .cl-gchip { min-width: 0; padding: 5px 0; }
.cl-pace-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-pace-track { flex: 1; min-width: 0; }
.cl-pace-bar i { display: block; height: 8px; border-radius: 4px; background: var(--color-accent); opacity: .85; }
.cl-pace-bar b { font: 700 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-pace-t { font: 600 13px/1 var(--font-mono); color: var(--color-text-soft); text-align: right; }

/* ── Ride detail: climbs on this ride ────────────────────────────────────── */

#detail-climbs[hidden] { display: none; }
.cl-ride-climb {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 16px; background: var(--color-inset); border: none; color: var(--color-text); font-family: var(--font-sans);
}
.cl-ride-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-ride-name { font: 700 15px/1.25 var(--font-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lap { font-weight: 400; color: var(--color-text-muted); }
.cl-ride-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cl-ride-prof { width: 90px; height: 30px; flex-shrink: 0; }

/* ── Plan: Week | Core ───────────────────────────────────────────────────── */

.planSeg { margin-bottom: 2px; }

/* Wider screens (iPad): keep sheets and the carousel readable. */
@media (min-width: 700px) {
  .cl-sheet { left: 50%; right: auto; width: 560px; margin-left: -280px; }
  .cl-ccard-empty { max-width: 420px; }
}