/* ──────────────────────────────────────────────────────────────────────
   Calendar feature — month view, day cells, drag-to-move, week summary.
   Theme variables (--bg0..3, --amber, --green, --red, --blue, --txt, --dim..3)
   come from style.css. Colours unique to workout types are local hex.
   ────────────────────────────────────────────────────────────────────── */
#calendar-panel { display: none; flex: 1; min-height: 0; overflow: hidden; flex-direction: column; }
#calendar-panel.visible { display: flex; }

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg1);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.cal-toolbar h2 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 1px;
  min-width: 180px;
  text-align: center;
}
.cal-toolbar button {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  color: var(--txt);
  border-radius: 4px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.cal-toolbar button:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.cal-toolbar button.ghost { background: transparent; }
.cal-weeks-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  overflow: hidden;
}
.cal-wk-btn {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--bdr) !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.5px !important;
  color: var(--dim) !important;
  cursor: pointer;
  transition: all 120ms;
}
.cal-wk-btn:last-child { border-right: none !important; }
.cal-wk-btn:hover { color: var(--txt) !important; background: var(--bg3) !important; }
.cal-wk-btn.active {
  background: var(--amber) !important;
  color: var(--on-amber) !important;
  font-weight: 700;
}
.cal-toolbar .spacer { flex: 1; }
.cal-toolbar .cal-hint { color: var(--dim3); font-size: var(--fs-sm); letter-spacing: 0.5px; }
.cal-toolbar .cal-hint kbd {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 1px 5px;
  font: inherit;
  font-size: var(--fs-xs);
  margin: 0 1px;
  color: var(--dim);
}

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 110px;
  gap: 1px;
  padding: 8px 16px 0;
  background: var(--bg0);
  color: var(--dim);
  font-size: var(--fs-micro);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cal-dow > div { padding: 4px 6px; }
.cal-dow-week { text-align: right; color: var(--dim3); }

.cal-grid {
  display: grid;
  /* minmax(0, 1fr) keeps every day-of-week column the same width even when
     one day has more workouts than its siblings. Without it, the wider
     intrinsic content of a busy day would push that column wider. */
  grid-template-columns: repeat(7, minmax(0, 1fr)) 110px;
  gap: 1px;
  background: var(--bdr);
  padding: 0 16px 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cal-day {
  background: var(--bg1);
  min-height: 80px;
  padding: 6px 8px;
  cursor: pointer;
  /* Click-dragging a day range must not smear a text selection across the
     day numbers and totals. */
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background .12s;
}
.cal-day:hover { background: var(--bg2); }
.cal-day.other-month { background: var(--bg0); }
.cal-day.other-month .cal-daynum { color: var(--dim3); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--amber); }
.cal-day.selected { background: var(--bg2); box-shadow: inset 0 0 0 2px var(--blue); }
.cal-day.drop-target { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }

.cal-daynum {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0.5px;
}
.cal-daytotal {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--txt);
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* The tile's KIND — zone, rest, note, route — is the .tk-swatch-style square
   drawn at the head of the title (::before below), coloured by --kind. The
   classes here set --kind; a workout with a zone gets it inline from the
   library palette (calendar.js zoneColorFor) so it matches wherever that
   workout shows up. Until TKF-310 this was a 6px coloured left edge, plus a
   tint, plus a coloured title — three carriers for one fact. */
.cal-entry {
  --kind: var(--dim3);
  background: var(--bg3);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  cursor: grab;
  user-select: none;
  display: flex; flex-direction: column; gap: 5px;
  /* Fill the day-cell width so tiles are visually identical across all days. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  /* iPad: let our pointer handlers own the touch — no native scroll/zoom
     fighting us, and no iOS text-selection callout on long-press. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.cal-entry:active { cursor: grabbing; }
.cal-entry .e-title {
  font-weight: 600; color: var(--txt);
  font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same geometry as core/kind.css .tk-swatch, drawn from CSS so the six
   places calendar.js writes an .e-title need no markup change. */
.cal-entry .e-title::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--kind);
  margin-right: 6px;
  vertical-align: 0;
}
/* Stamped from a plan: the square wears an amber frame. Amber is the plan's
   colour everywhere else (the start banner, the plan chip), and a frame keeps
   the zone colour visible inside it. */
.cal-entry.from-plan .e-title::before { box-shadow: 0 0 0 1.5px var(--amber); }
/* Marked completed without a ride record behind it: hollow, like a ticked box. */
.cal-entry.done .e-title::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kind); }
.cal-entry.from-plan.done .e-title::before { box-shadow: inset 0 0 0 1.5px var(--kind), 0 0 0 1.5px var(--amber); }
.cal-entry .e-meta  { color: var(--dim); font-size: var(--fs-xs); }

/* Stat columns — same shape as the plan-builder grid cells. */
.cal-entry .e-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 8px; margin-top: 2px;
}
.cal-entry .e-cs-lbl {
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--dim); line-height: 1;
}
.cal-entry .e-cs-val {
  font-size: var(--fs-sm); font-weight: 700;
  font-family: var(--font-data); font-variant-numeric: tabular-nums; line-height: 1.1;
  margin-top: 2px;
}
.cal-entry .e-cs-val.amber { color: var(--amber-ink); }
.cal-entry .e-cs-val.blue  { color: var(--blue); }
.cal-entry .e-cs-val.green { color: var(--green); }
.cal-entry .e-cs-val.kj    { color: var(--pink); }
.cal-entry.rest       { --kind: var(--dim3); background: var(--bg2); }
.cal-entry.note-only  { --kind: var(--amber-ink); }
.cal-entry.test       { --kind: var(--dim2); }
/* Planned route ride, scheduled from the Route Manager. Blue to read as
   "outdoors on a route", distinct from .ride (green = completed activity). */
.cal-entry.route      { --kind: var(--blue); }
.cal-entry.route .e-title { color: color-mix(in srgb, var(--blue) 80%, var(--txt)); }
.cal-entry.route.done, .cal-entry.route.completed-ride { opacity: .75; }
.cal-entry.done       { opacity: 0.6; }
.cal-entry.ride       {
  --kind: var(--green);
  cursor: pointer;
}
.cal-entry.ride:hover { filter: brightness(1.15); }
.cal-entry.ride .e-title { color: var(--green); }
.cal-entry.completed-ride { --kind: var(--green); }
.cal-entry.completed-ride .e-title { color: var(--green); }
/* Matched to a ride: the day is a record now, so the tile does not offer the
   grab cursor it cannot honour (TKB-239). Same treatment as .ride above. */
.cal-entry.pinned { cursor: pointer; }
.cal-entry .e-ride-actual {
  margin-top: 2px;
  color: var(--green);
  font-size: var(--fs-xs);
  letter-spacing: 0.3px;
}
.cal-entry.endurance  { --kind: var(--blue); }
.cal-entry.sweet_spot { --kind: var(--orange); }
.cal-entry.threshold  { --kind: var(--red); }
.cal-entry.vo2        { --kind: var(--purple); }
.cal-entry.tempo      { --kind: var(--orange); }
.cal-entry.recovery   { --kind: var(--green); }
.cal-entry.ramp_test  { --kind: var(--dim2); }
/* On the clipboard. */
.cal-entry.clip-copy  { outline: 1px dashed var(--blue);  outline-offset: 1px; }
.cal-entry.clip-cut   { outline: 1px dashed var(--amber); outline-offset: 1px; opacity: 0.5; }
.cal-entry .e-plan-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: rgba(var(--amber-wash), 0.12);
  border: 1px solid rgba(var(--amber-wash), 0.4);
  border-radius: 3px;
}

/* Plan start banner */
.cal-plan-banner {
  background: rgba(var(--amber-wash), 0.15);
  border: 1px solid rgba(var(--amber-wash), 0.5);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amber-ink);
  cursor: context-menu;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms;
}
.cal-plan-banner:hover {
  background: rgba(var(--amber-wash), 0.25);
}

.cal-week-summary {
  background: var(--bg0);
  padding: 8px 10px;
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--dim);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  letter-spacing: 0.5px;
}
.cal-week-summary .wk-label { color: var(--dim3); font-weight: 600; margin-bottom: 2px; }
.cal-week-summary .wk-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
.cal-week-summary .wk-val  { font-size: var(--fs-base); font-weight: 700; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.cal-week-summary .wk-unit { font-size: var(--fs-xs); color: var(--dim3); }
.cal-week-summary .wk-tss  { color: var(--amber-ink); }
/* Planned half of the completed/planned pair — smaller + dimmer so the
   completed figure stays the headline. Same treatment in the day header. */
.cal-week-summary .wk-plan { font-size: var(--fs-xs); font-weight: 600; color: var(--dim); }
.cal-daytotal .dt-plan     { font-weight: 600; color: var(--dim); }
.cal-week-summary .wk-time { color: var(--txt); }
.cal-week-summary .wk-kj   { color: var(--blue); }

/* ── Multi-day span bars (time off / notes) ──────────────────
   One bar per group per week row, placed as a grid item spanning the
   group's columns and overlapping the day cells it covers. --cal-span-top
   clears the day number; covered cells get a .cal-span-spacer of the same
   rhythm (26px per lane, mirrored as SPAN_LANE_H in calendar.js) so their
   own tiles start below the bar. Keep the two in step if either changes. */
.cal-grid { --cal-span-top: 25px; }
.cal-span-bar {
  z-index: 3;
  align-self: start;
  height: 22px;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  /* iPad: our pointer shim owns the gesture — no native scroll/selection. */
  touch-action: none;
  -webkit-touch-callout: none;
}
.cal-span-bar:active { cursor: grabbing; }
.cal-span-bar.dragging { opacity: 0.5; }
.cal-span-bar.rest { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber-ink); box-shadow: inset 2px 0 0 var(--amber); }
.cal-span-bar.note { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber-ink); box-shadow: inset 2px 0 0 var(--amber-ink); }
.cal-span-bar .sb-label { overflow: hidden; text-overflow: ellipsis; }
.cal-span-bar .sb-days  { margin-left: auto; font-weight: 500; opacity: 0.7; font-size: var(--fs-xs); }
.cal-span-bar .sb-cont  { opacity: 0.7; }
.cal-span-spacer { flex: none; }

/* Multi-day selection (shift/cmd-click) — right-click any selected day for
   the bulk actions menu. Distinct from .selected (single focused day). */
.cal-day.multi-selected {
  background: rgba(96, 165, 250, 0.14);
  box-shadow: inset 0 0 0 2px var(--blue);
}

/* ── Paste-armed mode ────────────────────────────────────────
   While an entry is on the copy/cut clipboard, day cells advertise
   themselves as paste targets: copy cursor + hover highlight. A plain
   click then pastes (calendar.js day click handler). */
.cal-grid.paste-armed .cal-day { cursor: copy; }
.cal-grid.paste-armed .cal-day:hover {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
  background: rgba(96, 165, 250, 0.08);
}

/* ── Day modal ───────────────────────────────────────────── */
#cal-modal[hidden] { display: none; }
#cal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}

.cal-modal-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  width: 680px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.cal-modal-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bdr);
}
.cal-modal-card h3 {
  margin: 0 0 10px;
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber-ink);
}
.cal-modal-card h4 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber-ink);
}
.cal-modal-card button {
  background: var(--bg2);
  color: var(--txt);
  border: 1px solid var(--bg3);
  border-radius: 6px;
  padding: 8px 16px;
  font: inherit;
  font-size: var(--fs-base);
  min-width: 80px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.cal-modal-card button:hover { background: var(--bg3); border-color: var(--dim2); color: var(--txt); }
.cal-modal-card button.ghost {
  background: transparent;
  border-color: var(--bdr);
  color: var(--dim);
  min-width: 0;
}
.cal-modal-card button.ghost:hover { background: transparent; border-color: var(--dim); color: var(--txt); }
.cal-modal-card button.primary {
  background: var(--amber);
  color: var(--on-amber);
  border-color: var(--amber);
  font-weight: 600;
}
.cal-modal-card button.primary:hover { background: var(--amber-ink); border-color: var(--amber-ink); color: var(--bg0); }
.cal-modal-card button.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
}
.cal-modal-card button.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.cal-modal-card button.ghost.danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
  font-weight: 400;
}
.cal-modal-card button.ghost.danger:hover { background: color-mix(in srgb, var(--red) 8%, transparent); border-color: var(--red); color: var(--red); }
/* Icon-style buttons inside the header row (back "←") stay compact
   so they don't dominate the title line. Close "×" uses .btn-close-x. */
.cal-modal-card header button { min-width: 0; padding: 6px 12px; font-size: var(--fs-sm); }

#cal-modal-entries { padding: 14px 18px; border-bottom: 1px solid var(--bdr); }
#cal-modal-entries .empty { color: var(--dim3); font-style: italic; font-size: var(--fs-sm); }
#cal-modal-entries .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bdr);
}
#cal-modal-entries .row:last-child { border-bottom: none; }
#cal-modal-entries .row .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cal-modal-entries .row .pill {
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  color: var(--dim);
  letter-spacing: 0.5px;
}

.cal-modal-add { padding: 14px 18px; }
.cal-modal-add .add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cal-modal-add .add-row input,
.cal-modal-add .add-row select,
.cal-modal-add .add-row textarea {
  background: var(--bg0);
  border: 1px solid var(--bdr);
  color: var(--txt);
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit;
  font-size: var(--fs-xs);
  flex: 1;
  min-width: 0;
}
.cal-modal-add .add-row .tiny { flex: 0 0 60px; }
.cal-modal-add .add-row textarea {
  flex: 1 1 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
}
#cal-modal-entries .row { padding: 10px 0; font-size: var(--fs-base); }

/* ── Main flex row + library drawer ────────────────────────────────────── */
.cal-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.cal-main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.cal-main-col > .cal-grid { flex: 1; }

/* ── Pills sidebar (right side, like #lib-sidebar) ──────────────────── */
.cal-library-sidebar {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  background: var(--bg1);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cal-library-sidebar[hidden] { display: none; }
.cal-library-sidebar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 42px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.cal-library-sidebar header h4 {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
}

.cal-sidebar-pills {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Drawer search box — same shape as the library's #lib-search-wrap, and the
   tag typeahead inside it is the shared .tag-suggest from library.css. The
   drawer had no text search at all before TKF-071. */
#cal-drawer-search-wrap { position: relative; }
#cal-drawer-search {
  width: 100%; box-sizing: border-box;
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px;
  padding: 5px 28px 5px 28px;
  font-size: var(--fs-xs); font-family: inherit; color: var(--txt);
  outline: none; transition: border-color .2s;
}
#cal-drawer-search:focus { border-color: var(--amber-ink); }
#cal-drawer-search::placeholder { color: var(--dim2); }
#cal-drawer-search-wrap .search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--dim2); font-size: var(--fs-sm); pointer-events: none;
}
#cal-drawer-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: var(--fs-base); padding: 1px 4px; display: none; transition: color .15s;
}
#cal-drawer-search-clear:hover { color: var(--txt); }
#cal-drawer-search-clear.visible { display: block; }
/* The sidebar scrolls, so the floating suggestion strip is clipped by its
   overflow — sized to the sidebar rather than allowed to overhang it. */
#cal-drawer-search-wrap .tag-suggest { max-width: 100%; width: 100%; }

/* Source-filter pills (Favs / Custom) — mirrors the library's sort-bar pills. */
.cal-drawer-source-pills {
  display: flex;
  gap: 6px;
}
.cdw-src-pill {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  color: var(--dim);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.cdw-src-pill:hover { filter: brightness(1.2); }
.cdw-src-pill.active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
}

/* ── Results panel (left of sidebar, shows filtered workouts) ────────── */
.cal-drawer-results {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg1);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.cal-drawer-results[hidden] { display: none; }
.cal-drawer-results header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 42px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.cal-drawer-results header h4 {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
}

.cal-drawer-hint {
  padding: 8px 14px;
  font-size: var(--fs-xs);
  color: var(--dim3);
  border-bottom: 1px solid var(--bdr);
}
.cal-drawer-hint #cal-drawer-date { color: var(--amber-ink); font-weight: 600; }

.cal-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}
.cal-drawer-list .empty {
  padding: 12px;
  color: var(--dim3);
  font-size: var(--fs-sm);
  text-align: center;
}
.cal-drawer-item {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 4px 0;
  cursor: grab;
  transition: all .12s;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.cal-drawer-item:hover { border-color: var(--amber-ink); background: var(--bg3); }
.cal-drawer-item:active { cursor: grabbing; }
.cdw-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cdw-title {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--txt);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdw-zone {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 2px;
}
.cdw-meta {
  font-size: var(--fs-xs);
  color: var(--dim3);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.cal-drawer-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg1);
}
.cdw-sort-lbl {
  font-size: var(--fs-micro);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 2px;
}
.cdw-sort-btn {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  color: var(--dim);
  border-radius: 3px;
  padding: 3px 4px;
  font-size: var(--fs-micro);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all .12s;
}
.cdw-sort-btn:hover { filter: brightness(1.2); }
.cdw-sort-btn.active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
}
.cdw-sort-arrow { font-size: var(--fs-xs); opacity: .9; }
.cal-drawer-item .cal-thumb {
  display: block;
  width: 100%;
  height: 72px;
  margin: 6px 0 4px;
  background: var(--bg0);
  border-radius: 2px;
}
.cal-drawer-item .cal-thumb.empty {
  height: 72px;
  background:
    repeating-linear-gradient(45deg, var(--bg0) 0 4px, var(--bg1) 4px 8px);
  border-radius: 2px;
}

/* Power-profile thumbnail on a scheduled calendar entry tile. */
.cal-entry .cal-thumb {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 3px;
  background: var(--bg0);
  border-radius: 2px;
  opacity: 0.9;
}
.cal-entry { white-space: normal; }

/* Drop-to-remove visual when dragging a scheduled entry back onto the results panel. */
.cal-drawer-results.drop-to-remove,
.cal-library-sidebar.drop-to-remove {
  box-shadow: inset 0 0 0 3px var(--red, var(--red));
  background: color-mix(in srgb, var(--red) 15%, transparent);
}
.cal-drawer-results.drop-to-remove::before,
.cal-library-sidebar.drop-to-remove::before {
  content: "Drop to remove from calendar";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red, var(--red));
  pointer-events: none;
  z-index: 10;
}

/* ── Calendar workout preview panel ─────────────────────────────────── */
.cal-preview {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg1);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cal-preview[hidden] { display: none; }
.cal-preview header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.cal-preview-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--txt);
  word-break: break-word;
}
.cal-preview-badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 4px;
}
.cal-preview-desc {
  font-size: var(--fs-base);
  color: var(--dim);
  line-height: 1.5;
  margin: 0 0 14px;
}
.cal-preview-desc:empty { display: none; }
.cal-preview-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.cal-preview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.cpv-stat { }
.cpv-lbl {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2px;
}
.cpv-val {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--txt);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
/* Planned vs actual on a matched entry (TKF-219). A three-column grid rather
   than two more stat cards: the point is the COMPARISON, and side-by-side
   columns are the only layout that lets the eye run down it. */
.cal-preview-actual {
  margin: -6px 0 16px;
  padding: 10px 12px;
  background: var(--bg0);
  border-radius: 6px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.cpv-ahead,
.cpv-arow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
}
.cpv-arow { padding: 3px 0; }
.cpv-ahead {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  margin-bottom: 4px;
}
.cpv-albl {
  font-size: var(--fs-xs);
  color: var(--dim);
}
.cpv-aplan,
.cpv-aact {
  min-width: 74px;
  text-align: right;
  font-size: var(--fs-base);
}
.cpv-aplan { color: var(--dim); }
.cpv-aact  { color: var(--txt); font-weight: 600; }
.cpv-delta {
  margin-left: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--dim);
}
.cal-preview-section-lbl {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.cal-preview-profile svg {
  width: 100%;
  height: 120px;
  background: var(--bg0);
  border-radius: 6px;
}
.cal-preview-actions {
  margin-top: 16px;
}
.cal-preview-load-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--amber);
  color: var(--on-amber);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms;
}
.cal-preview-load-btn:hover {
  background: var(--amber-ink);
}
/* .cal-preview-edit-btn / .cal-preview-push-garmin-btn styles removed with
   their buttons — editor is out of the launch package, Connect IQ pulls
   workouts to the device. Same removal as the library detail panel. */
.cal-preview-openlib-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  background: transparent;
  color: var(--txt);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 120ms;
}
.cal-preview-openlib-btn:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.cal-preview-openlib-btn[hidden] { display: none; }
/* Hover info bar below SVG */
.cpv-hover-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  margin-top: 4px;
  background: var(--bg2);
  border-radius: 4px;
  font-size: var(--fs-base);
  font-family: var(--font-data);
}
.cpv-hover-bar[hidden] { display: none; }
.cpv-hb-time { color: var(--dim); }
.cpv-hb-pwr  { color: var(--txt); font-weight: 700; }
.cpv-hb-zone { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.cpv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--dim);
  margin: 6px 8px 0 0;
}
.cpv-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* PR / comeback pips on calendar days — from pr-events.php (app/lib/pr_query.php). */
.cal-daynum .cal-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.cal-pip-pr       { background: var(--amber, var(--amber)); }
.cal-pip-comeback { background: var(--blue, var(--blue)); }