/* ============================================================
   Day Timeline — Visual Proportional Session Timeline
   Single source of truth for ::Components::DayTimeline
   Used in builder, calendar/week (dark), and plan (light).
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */

.day-timeline {
  display: flex;
  flex-direction: column;
  height: 480px;
}

/*
 * Single-column layout: blocks occupy the full width.
 * The start time is rendered inline as a small header on each block.
 */
.timing-track {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Inline time header (shown at top of each block) ────── */

.timing-block-time {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.day-timeline--light .timing-block-time {
  opacity: 0.75;
}

/* Workout block header: start time (left) + estimated duration (right). */
.timing-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.timing-block-header .timing-block-time {
  margin-bottom: 0;
}

/* ── Blocks column ───────────────────────────────────────── */

.timing-track-blocks {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 0.375rem;
  overflow: hidden;
  gap: 1px; /* 1px hairline between sections */
  background-color: var(--medium-gray-dark); /* shows through gap */
}

/*
 * Each block gets `flex: N` via inline style.
 * All blocks get a minimum height so labels remain readable.
 */
.timing-block {
  display: flex;
  flex-direction: row;
  /* Pin the time marker + label to the top of the block so it labels the
     start of the span it covers, rather than floating in the middle of a
     tall (long-duration) block. */
  align-items: flex-start;
  padding: 0.25rem 0.75rem;
  gap: 0.5rem;
  min-height: 1.25rem;
  overflow: hidden;
}

/* Workout blocks need column layout to hold the occurrence card.
   Blocks are sized proportionally to their duration (flex: N) inside a fixed
   480px column, so a detail-heavy workout (name + several element chips +
   actions) can be taller than its time slice. Scroll that overflow inside the
   block rather than clipping it, keeping the proportional layout intact. */
.timing-block--workout {
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem 0.625rem;
  gap: 0.375rem;
  min-height: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.timing-block--workout::-webkit-scrollbar {
  width: 6px;
}

.timing-block--workout::-webkit-scrollbar-thumb {
  background-color: oklch(100% 0 0 / 0.25);
  border-radius: 3px;
}

.day-timeline--light .timing-block--workout::-webkit-scrollbar-thumb {
  background-color: oklch(0% 0 0 / 0.2);
}

.timing-block-label {
  font-size: 0.8125rem;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.timing-block-duration {
  font-size: 0.6875rem;
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* A workout that ends on a written rest: the block stops at the work, the
   rest overlaps Cleanup. Same quiet treatment as the duration figure. */
.timing-block-trailing-rest {
  font-size: 0.6875rem;
  opacity: 0.7;
  white-space: nowrap;
  line-height: 1;
  flex: none;
}

/* Inside the column-layout workout/planned blocks, a bare label must keep
   its natural height: the row-layout `flex: 1` becomes a zero height basis
   there, and with `overflow: hidden` the text vanishes entirely. (Labels
   inside .timing-block-header sit in a row again, where flex: 1 is right.) */
.timing-block--workout > .timing-block-label {
  flex: none;
}

/* ── Block colour variants (dark theme — default) ────────── */

.timing-block--gathering,
.timing-block--cleanup {
  background-color: var(--medium-gray-dark);
  color: var(--light-gray);
}

.timing-block--warmup {
  background-color: color-mix(in oklch, var(--primary-color) 22%, var(--dark-gray));
  color: var(--primary-color-light);
}

.timing-block--workout {
  background-color: color-mix(in oklch, var(--success-color) 22%, var(--dark-gray));
  color: var(--success-color);
}

.timing-block--transition {
  background-color: var(--dark-gray);
  color: var(--medium-gray);
}

/* Movement-specific build-up window carved out of the general warmup.
   Same hue as the warmup but dashed on top to distinguish it as the
   dedicated lead-in for the workout immediately below. The negative
   margin consumes the 1px hairline gap from .timing-track-blocks so
   the dashed border isn't doubled by the track-background line. */
.timing-block--prep {
  background-color: color-mix(in oklch, var(--primary-color) 16%, var(--dark-gray));
  color: var(--primary-color-light);
  border-top: 2px dashed color-mix(in oklch, var(--primary-color-light) 60%, transparent);
  margin-top: -1px;
  font-style: italic;
}

/* Fallback for browsers without color-mix support */
@supports not (background-color: color-mix(in oklch, red, blue)) {
  .timing-block--warmup {
    background-color: #1a2e4a;
    color: var(--primary-color-light);
  }

  .timing-block--workout {
    background-color: #1a3326;
    color: var(--success-color);
  }
}

/* ── Unfulfilled blocks (planned but not yet programmed) ──
   Inherits .timing-block--workout's overflow-y scroll: a short block's
   proportional height can't fit the action buttons, and letting them
   overflow painted them over the following sections. (An earlier
   `overflow: visible` here served the day-plan-assign dropdown, which no
   longer renders in the timeline.) */

.timing-block--unfulfilled {
  background-color: color-mix(in oklch, var(--dark-gray) 90%, transparent);
  border: 2px dashed var(--medium-gray);
  opacity: 0.7;
}

.day-timeline--light .timing-block--unfulfilled {
  background-color: var(--surface-raised);
  border: 2px dashed var(--border-emphasis);
  opacity: 1;
  color: var(--text-muted);
}

/* ── Unfulfilled block warning ──────────────────────────── */

.timeline-unfulfilled-warning {
  font-size: 0.65rem;
  font-style: italic;
  color: oklch(70% 0.15 55);
}

.day-timeline--light .timeline-unfulfilled-warning {
  color: oklch(55% 0.15 55);
}

/* ── Occurrence cards (inside workout blocks) ────────────── */

.timeline-occurrence { display: flex; flex-direction: column; gap: 0.25rem; }
.timeline-occurrence-name { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--success-color); text-decoration: none; }
.timeline-occurrence-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.timeline-occurrence-stimulus { font-size: 0.625rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background-color: oklch(100% 0 0 / 0.18); color: white; white-space: nowrap; font-weight: 600; }
.timeline-occurrence-element { font-size: 0.625rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background-color: oklch(100% 0 0 / 0.12); color: var(--success-color); white-space: nowrap; }
.timeline-occurrence-cap { font-size: 0.625rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background-color: oklch(100% 0 0 / 0.18); color: white; white-space: nowrap; font-weight: 600; }
.timeline-stimulus-tips {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: oklch(100% 0 0 / 0.72);
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
  text-align: left;
}
.day-timeline--light .timeline-stimulus-tips {
  color: oklch(35% 0.02 250);
}
/* Both action rows use the shared action-links vocabulary (buttons.css);
   these containers only add their in-card spacing. Kept in normal flow
   directly after the element chips. An earlier version anchored this
   bottom-right with position:absolute on the assumption that "the block's
   bottom edge is reliably empty", but wrapped element chips flow down to
   that edge and the overlay hid them. In flow the row reserves its own
   space and scrolls into view with the rest of the card when the block
   overflows. */
.timeline-occurrence-actions {
  margin-top: 0.125rem;
  padding-top: 0.25rem;
}

/* Quiet links need lighter ink over the dark timeline washes. */
.day-timeline .action-link {
  color: var(--light-gray);
}
.day-timeline .action-link--primary {
  color: var(--success-color);
}
.timeline-unmatched { border-top: 1px solid var(--medium-gray-dark); padding: 0.5rem 0.625rem; }
.timeline-unmatched-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--medium-gray); margin-bottom: 0.375rem; }

/* ── Dark theme (builder / calendar) ─────────────────────── */

/* In modal context, let DayTimeline fill the flex container */
.timing-modal-content .day-timeline {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* ── Light theme (plan view) — colors only ───────────────── */

.day-timeline--light .timing-track-blocks {
  background-color: var(--border);
}

.day-timeline--light .timing-block--gathering,
.day-timeline--light .timing-block--cleanup {
  background-color: var(--timeline-light-neutral);
  color: var(--timeline-light-neutral-text);
}

.day-timeline--light .timing-block--warmup {
  background-color: var(--timeline-light-warmup);
  color: var(--timeline-light-warmup-text);
}

.day-timeline--light .timing-block--workout {
  background-color: var(--timeline-light-workout);
  color: var(--timeline-light-workout-text);
}

.day-timeline--light .timing-block--transition {
  background-color: var(--surface-subtle);
  color: var(--border-emphasis);
}

.day-timeline--light .timing-block--prep {
  background-color: color-mix(in oklch, var(--timeline-light-warmup) 75%, white);
  color: var(--timeline-light-warmup-text);
  border-top: 2px dashed color-mix(in oklch, var(--timeline-light-warmup-text) 60%, transparent);
  margin-top: -1px;
}

/* Light theme: occurrence name inherits block color */
.day-timeline--light .timeline-occurrence-name {
  color: var(--timeline-light-workout-text);
}

.day-timeline--light .timeline-occurrence-element {
  background-color: oklch(50% 0 0 / 0.08);
  color: var(--text-secondary);
}

/* Stimulus chip in light theme: dark fill on a light card so the type
   stays legible. The dark theme rule uses translucent white over the
   block's dark wash, which inverts to white-on-white here. */
.day-timeline--light .timeline-occurrence-stimulus {
  background-color: var(--timeline-light-workout-text);
  color: white;
}

.day-timeline--light .timeline-occurrence-cap {
  background-color: var(--timeline-light-workout-text);
  color: white;
}

.day-timeline--light .action-link {
  color: var(--text-secondary);
}

.day-timeline--light .action-link--primary {
  color: var(--timeline-light-workout-text);
}

.timeline-occurrence-missing-equipment {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--badge-warning);
  cursor: help;
}

/* Attached workout-template name on an unfulfilled planned block */
.timing-block-template {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--medium-gray-dark);
  margin-left: 0.5rem;
}