/* Weekly Planner Styles - Mobile First Approach */

/* Main Container */
.weekly-planner-container {
  width: 100%;
}

/* Content Layout - Two Columns */
.weekly-planner-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .weekly-planner-content {
    flex-direction: row;
    gap: 1rem;
  }
}

/* --- Day card occurrences --- */
.day-card-occurrences {
  border-top: 1px solid var(--border, #d1d5db);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.day-card-occurrence {
  font-size: 0.75rem;
  color: var(--dark-gray, #374151);
}

/* Expanded body of a scheduled occurrence — mirrors the indented look of
   .block-item-tips so scheduled and planned items read the same. */
.occurrence-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.25rem 0 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border, #e5e7eb);
}

.occurrence-description {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
}

.occurrence-item-actions {
  display: flex;
  justify-content: flex-end;
}

.occurrence-name-link {
  text-decoration: none;
  color: inherit;
}

.occurrence-name-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.occurrence-stimulus {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.occurrence-elements {
  font-size: 0.65rem;
  width: 100%;
}

.occurrence-cues {
  font-size: 0.65rem;
  width: 100%;
}

.occurrence-cues-summary {
  cursor: pointer;
}

.occurrence-cues-list {
  margin: 0.25rem 0 0 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.occurrence-cues-element {
  font-weight: 600;
  color: var(--dark-gray, #374151);
}

.deviation-warning {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  background: oklch(95% 0.05 55);
  border-radius: 4px;
  font-size: 0.75rem;
}

.deviation-icon {
  font-size: 0.875rem;
}

/* Day Cards */
/* Day card uses a three-tone vertical hierarchy: darkest at the header
   (day info + template picker + Builder), medium in the top row (session
   details / occurrences / stimulus chips), lightest in the bottom row
   (drop zone + muscle impact). overflow: hidden clips the tinted
   backgrounds to the rounded corners so the cascade reads cleanly. */
.day-card {
  /* The opened day's panel (.day-detail-expanded) draws the border; the
     card and its elements drawer are two parts inside it. */
  background-color: white;
  transition: all 0.2s ease;
  overflow: hidden;
}

.day-card-today {
  border-color: var(--primary-color);
  border-width: 3px;
  box-shadow: 0 0 0 1px var(--primary-color);
}

.day-card-past {
  opacity: 0.7;
}

.day-card-pinned {
  background-color: color-mix(in oklch, var(--success-color) 4%, white);
}

.day-card-pinned .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--success-color) 30%, transparent);
}

.day-card-suggested {
  opacity: 0.8;
}

.day-card-suggested .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--primary-color-light) 30%, transparent);
}

.day-card-finished {
  background-color: color-mix(in oklch, var(--success-color) 4%, white);
}

.day-card-finished .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--success-color) 30%, transparent);
}

/* Cycle-owned days are locked for planning; tint them with the cycle accent to
 * mirror the finished-day treatment. A tint, never a side stripe. */
.day-card-cycle-locked {
  background-color: color-mix(in oklch, var(--energy-skill, oklch(58% 0.13 300)) 4%, white);
}

.day-card-cycle-locked .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--energy-skill, oklch(58% 0.13 300)) 30%, transparent);
}

/* Released is finished and locked: blue replaces the finished green (and a
   cycle's tint) so the two read apart, as the status pill's tones do. */
.day-card-released {
  background-color: color-mix(in oklch, var(--primary-color) 5%, white);
}

/* The header's Components::DayStatus control, pinned to the right. */
.day-card-status {
  margin-left: auto;
}

/* Header layout: left = day info, middle = template selector, right = actions.
   Middle region flexes to consume remaining space and centers its contents.
   Darkest of the three day-card tones so it clearly frames the metadata. */
.day-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(88% 0.004 255);
}

/* Badges (intent, cycle, weather, suggested) grouped so they wrap as one unit.
   On desktop this sits inline between the day name and the finished toggle,
   matching the prior loose-badge spacing. */
.day-card-header-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}

.day-card-header-badges:empty {
  display: none;
}

.day-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.day-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark-gray);
  white-space: nowrap;
}

/* Layout wrapper for the two tinted rows — no padding or margin of its own,
   each row handles its own padding against the card edges so the backgrounds
   extend cleanly to the left and right. */
.day-card-body {
  display: flex;
  flex-direction: column;
}

/* Rest day badge lives inside .day-card-body without a tinted wrapper row.
   Add padding so it doesn't hug the card edges now that .day-card is
   unpadded. */
.rest-day-badge {
  padding: 0.75rem 1rem;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.session-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--dark-gray);
}

.session-duration {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.budget-line {
  font-size: 0.8125rem;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.budget-line-used {
  font-weight: 600;
}

.budget-line-sep {
  color: var(--medium-gray-dark);
  margin: 0 0.125rem;
}

.budget-line-remaining {
  color: var(--medium-gray-dark);
}

.budget-line-over .budget-line-used,
.budget-line-over .budget-line-remaining {
  color: var(--color-warning, #b45309);
  font-weight: 600;
}

.budget-line-full .budget-line-remaining {
  color: var(--dark-gray);
  font-weight: 600;
}

.block-breakdown {
  font-size: 0.8125rem;
  color: var(--medium-gray-dark);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.block-item {
  white-space: normal;
}

/* Tint the summary row itself with the row's energy-system color so a
   glance reveals push/pull/skill/etc. distribution without reading the
   names. The saturated hue + white text mirror Components::Stimulus::Badge
   so a planned summary and its matching pill read as the same family.
   Each rule pairs background + color so a missing/empty data attribute
   (e.g. an occurrence with no intended_stimulus cached) doesn't end up
   white-on-white. */
.block-item[data-energy-system="phosphagen"] > .block-item-summary,
.block-item-summary.block-item[data-energy-system="phosphagen"] {
  background: var(--energy-phosphagen);
  color: white;
}

.block-item[data-energy-system="glycolytic"] > .block-item-summary,
.block-item-summary.block-item[data-energy-system="glycolytic"] {
  background: var(--energy-glycolytic);
  color: white;
}

.block-item[data-energy-system="oxidative"] > .block-item-summary,
.block-item-summary.block-item[data-energy-system="oxidative"] {
  background: var(--energy-oxidative);
  color: white;
}

.block-item[data-energy-system="skill"] > .block-item-summary,
.block-item-summary.block-item[data-energy-system="skill"] {
  background: var(--energy-skill);
  color: white;
}

/* Flex row summary: name on the left, duration pinned right via
   margin-left: auto on the duration element. Summary spans the full
   block-breakdown width so long stimulus names and durations don't
   cram together. Rounded and padded so the tinted marker reads as a
   pill, with its text off the edges, in both Planned and Scheduled Work. */
.block-item-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
}

.block-item-summary::-webkit-details-marker {
  display: none;
}

.block-item-summary::marker {
  display: none;
}

.block-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-item-duration {
  flex-shrink: 0;
}

.block-item-tips {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0.25rem 0 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border, #e5e7eb);
  list-style: disc;
}

/* --- Day card internal grid (redesign 2026-04-08) --- */

/* Top row of the day card body: three columns — Planned Work (with the
   stimulus drag palette beneath the block list), Scheduled Work, and Muscle
   Impact. Middle tone of the three-tier hierarchy so the session context
   visually groups with the metadata header but reads as a step lighter and
   less dense. */
.day-card-top-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(200px, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(94% 0.003 255);
}

.day-card-top-row > * {
  min-width: 0;
}

.day-card-session-col,
.day-card-occurrences-col,
.day-card-muscle-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Reusable drop-target affordance: dashed outline + min-height so empty
   panes still read as "drop something here." Apply alongside any pane
   that should accept a drag-drop. The active highlight (`day-card-drop-
   target` class, toggled by Stimulus controllers on dragover) layers on
   top — see rule below. */
.drop-target {
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px dashed oklch(80% 0.005 255);
  border-radius: 0.375rem;
  background: transparent;
  transition: border-color 0.1s, background-color 0.1s;
}

.drop-target.day-card-drop-target {
  border-color: var(--primary-color, #3b82f6);
  background-color: oklch(97% 0.02 255);
}

/* Wraps just the planned-blocks list (session header + budget + blocks or
   empty-state). The stimulus drag palette below sits OUTSIDE this pane so
   users can't accidentally drop a pill onto itself. */
.day-card-planned-blocks-pane {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-height: 4rem;
}

/* Action area pinned to the bottom of a day-card column (e.g. Use template
   in the Planned Work column, Build Session in the Scheduled Work column).
   margin-top: auto absorbs the remaining flex space so the action sits
   flush at the bottom of the column regardless of content length above. */
.day-card-col-action {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Bottom row of the day card body: two columns — planned-elements drop
   target (with the Suggest chip beneath it) aligned under the Planned Work
   column, and the read-only scheduled-elements list aligned under the
   Scheduled Work column. Muscle Impact has moved to the top row, so the
   slot under it is intentionally empty. Lightest tone (white, inherited
   from the card) so the primary action area reads as the focal point. */
.day-card-bottom-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(200px, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.day-card-bottom-row > * {
  min-width: 0;
}

.day-card-drop-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.day-card-scheduled-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.day-card-planned-elements-pane {
  min-width: 0;
}

/* Read-only list of elements from workout_occurrences scheduled on this day.
   Same geometry as the planned-elements pane so the two boxes read as a
   matched pair, but with a solid border and no drop-target data-action to
   signal that it's informational, not editable. */
.day-card-scheduled-elements-pane {
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid oklch(80% 0.005 255);
  border-radius: 0.375rem;
  background: transparent;
}

/* A finished day's planned elements: the same box as the scheduled pane
   beside it, since nothing can be dropped on a finished day. */
.day-card-planned-elements-readonly {
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid oklch(80% 0.005 255);
  border-radius: 0.375rem;
}

/* Suggest chip lives under the drop zone, flush-left and self-sized so the
   drop target can remain wide. */
.day-card-drop-col .suggest-chip {
  align-self: flex-start;
}

.day-card-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.day-card-auto-plan-form,
.day-card-auto-plan-stimulus-form {
  margin: 0;
}

/* Hover-target wrapper for the disabled Auto-plan Elements button so the
   tooltip surfaces — disabled buttons swallow pointer events themselves. */
.auto-plan-chip-wrap {
  display: inline-block;
  cursor: not-allowed;
}

.auto-plan-chip-wrap > .auto-plan-chip[disabled] {
  pointer-events: none;
}

.day-card-stimulus-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
}

.day-card-stimulus-actions > .stimulus-type-selector {
  flex: 1 1 auto;
  min-width: 0;
}

/* Day-info expands to take all remaining flex space in the header row so
   any trailing element (the Suggested chip) is pushed
   flush to the right edge. Single-class rule — no compound selectors. */
.day-info {
  flex: 1;
}

/* Mobile: stack the three columns in each content row below 900px. */
@media (max-width: 899px) {
  .day-card-top-row,
  .day-card-bottom-row {
    grid-template-columns: 1fr;
  }

  /* Header reflows to two rows: day name + finished toggle on top, badges
     wrapped onto their own row below (keeps the toggle visible and tappable). */
  .day-card-header {
    flex-wrap: wrap;
  }

  .day-info {
    flex: 0 1 auto;
  }

  .day-card-header-badges {
    flex: 1 1 100%;
    order: 1;
  }
}

/* Template Selector */
.template-select {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--medium-gray);
  background-color: white;
  color: var(--dark-gray);
  font-size: 0.8125rem;
  cursor: pointer;
}

.template-select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

/* Utility Classes */
.text-muted {
  color: var(--medium-gray-dark);
}

/* --- Element catalog (inside a day's Select Elements panel) --- */
.element-catalog {
  display: flex;
  flex-direction: column;
}

/* Catalog sections flow their chips in columns; the tab body they sit in
   is the one scroll region (see .day-card-suggestions .tab-pane). */
.element-catalog .section-elements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.25rem;
}

/* The panel's three tabs (Suggested / Ready / Not used). Each tab pane is
   capped and scrolls on its own so the day card above, with its drop
   target and planned elements, stays in reach however long the list. */
.day-card-suggestions .tab-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 24rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.drawer-element-chip.usage-type-hidden {
  display: none;
}

/* Stale buckets: one collapsible row each on the Not used tab */
.drawer-bucket-empty {
  opacity: 0.5;
}

.drawer-bucket-empty .section-title {
  cursor: default;
}

/* Collapsible catalog section (cycles, recovery ready, recently used, Closes) */
.drawer-section {
  margin-bottom: 0.75rem;
}

.day-card-suggestions .section-title {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.35rem 0;
  color: var(--dark-gray, #1f2937);
  background: none;
  list-style: none;
}

.day-card-suggestions .section-title::-webkit-details-marker {
  display: none;
}

/* A rotating disclosure caret so a collapsed row reads as expandable. */
.day-card-suggestions .section-title::before {
  content: "\25B8";
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  transition: transform 0.15s;
}

.day-card-suggestions details[open] > .section-title::before {
  transform: rotate(90deg);
}

.day-card-suggestions .drawer-bucket-empty .section-title::before {
  visibility: hidden;
}

.day-card-suggestions .drawer-section {
  margin-bottom: 0.25rem;
}

.day-card-suggestions .section-count {
  font-size: 0.8rem;
}

.section-elements {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
}

.drawer-element-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--surface-raised, #f9fafb);
  cursor: grab;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.drawer-element-chip:hover {
  background: var(--surface-hover, #f3f4f6);
}

.drawer-element-chip.dragging {
  opacity: 0.5;
}

/* Reset the global .element-name background inside drawer chips so the
   tile color shows through cleanly. Dark text is readable on every
   usage_type tile background. */
.drawer-element-chip .element-name {
  background: transparent;
  margin: 0;
  color: var(--dark-gray);
}

/* Element chip backgrounds by usage_type — tile color identifies type at a glance.
   Color tokens live in base.css under :root. */
.drawer-element-chip-workout-partner {
  background: var(--chip-partner-bg);
}
.drawer-element-chip-workout-partner:hover {
  background: var(--chip-partner-bg-hover);
}

.drawer-element-chip-activation {
  background: var(--chip-activation-bg);
}
.drawer-element-chip-activation:hover {
  background: var(--chip-activation-bg-hover);
}

.drawer-element-chip-stretching {
  background: var(--chip-stretching-bg);
}
.drawer-element-chip-stretching:hover {
  background: var(--chip-stretching-bg-hover);
}

.drawer-element-chip-accessory {
  background: var(--chip-accessory-bg);
}
.drawer-element-chip-accessory:hover {
  background: var(--chip-accessory-bg-hover);
}

/* Recovery baseline tint on element chips. Replaces the former recovery-dot
   indicator — the chip's own background now carries the recovery status,
   which saves horizontal space and is readable at a glance. Softened with
   white so the default dark element-name text stays legible.
   The fatigue-load classes in planner_chip.css, linked after this file,
   override these when a candidate would land on muscles that are heavily
   loaded already. */
.drawer-element-chip--recovery-ready {
  background-color: color-mix(in oklch, var(--load-rest) 25%, white);
}

.drawer-element-chip--recovery-partial {
  background-color: color-mix(in oklch, var(--load-light) 55%, white);
}

.drawer-element-chip--recovery-fatigued {
  background-color: color-mix(in oklch, var(--load-heavy) 40%, white);
}

/* --- Element Chips on Day Cards --- */
.planned-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.planned-elements-label {
  display: block;
  width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--medium-gray);
  margin-bottom: 0.125rem;
}

.element-chip-cycle {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.element-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}

.element-chip-remove:hover {
  opacity: 1;
}

.chip-badge {
  font-size: 0.6rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}

.chip-badge-cycle {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.chip-badge-workout-partner {
  background: oklch(82% 0.1 280);
  color: oklch(30% 0.12 280);
}

.chip-badge-activation {
  background: var(--chip-activation-bg);
  color: oklch(35% 0.12 220);
}

.chip-badge-stretching {
  background: oklch(85% 0.08 200);
  color: oklch(32% 0.1 200);
}

.chip-badge-accessory {
  background: var(--chip-accessory-bg);
  color: oklch(35% 0.12 60);
}

/* --- Stimulus Type Selector --- */
.stimulus-type-selector {
  padding: 0.5rem 0;
}

.stimulus-palette-label {
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
  list-style: revert;
}

/* Color preview dots inside the "Select stimulus" summary — one dot per
   energy system, in the same order as the rows the user will see when
   they expand. */
.stimulus-palette-dots {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.stimulus-palette-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

.stimulus-palette-dot--phosphagen { background-color: var(--energy-phosphagen); }
.stimulus-palette-dot--glycolytic { background-color: var(--energy-glycolytic); }
.stimulus-palette-dot--oxidative  { background-color: var(--energy-oxidative); }
.stimulus-palette-dot--skill      { background-color: var(--energy-skill); }

.stimulus-palette-hint {
  font-size: 0.7rem;
  margin: 0.25rem 0;
}

.stimulus-chips {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* One row per energy system so chips of the same color cluster together,
   reducing color-bouncing when scanning the palette. */
.stimulus-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Drag-state modifiers layered on the stimulus chip (rendered by
   Components::Stimulus::Badge). The chip handles padding, colour and
   shape; these only change cursor, opacity and outline. */
.stimulus-chip-draggable {
  cursor: grab;
  user-select: none;
}

.stimulus-chip-draggable:active,
.stimulus-chip-dragging {
  cursor: grabbing;
  opacity: 0.6;
}

/* A pill auto-adopts a dark outline when its stimulus type appears in any
   block of the day's plan. The pill stays draggable in this state — drop
   to add another block of the same type. */
.stimulus-chip-in-plan {
  outline: 2px solid var(--dark-gray, #1f2937);
  outline-offset: 1px;
}

/* × button on each planned block. Always visible so the affordance is
   discoverable; energy-system-tinted summaries make the contrast tight,
   so the button uses a translucent white pill against the saturated
   background and stays white (not red) on hover so the icon remains
   legible. */
.block-item-remove {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.1s, background-color 0.1s;
}

.block-item:hover .block-item-remove,
.block-item-summary:hover .block-item-remove,
.block-item-remove:focus,
.block-item-remove:focus-visible {
  opacity: 1;
}

.block-item-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Fallback for any block-item-summary that does not carry an energy
   system data-attribute and therefore renders with the default light
   surface. Use the danger color directly so the × is visible on white. */
.block-item-summary:not([data-energy-system]) .block-item-remove,
.block-item:not([data-energy-system]) > .block-item-summary .block-item-remove {
  background: transparent;
  color: var(--medium-gray-dark, #4b5563);
}

.block-item-summary:not([data-energy-system]) .block-item-remove:hover,
.block-item:not([data-energy-system]) > .block-item-summary .block-item-remove:hover {
  background: var(--danger-color, #dc2626);
  color: #fff;
}

.block-duration-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--medium-gray, #9ca3af);
  padding: 0 0.1rem;
  flex-shrink: 0;
}

.block-duration-editable:hover {
  border-bottom-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}

.block-duration-input {
  width: 3rem;
  font-size: inherit;
  padding: 0 0.2rem;
  border: 1px solid var(--primary-color, #3b82f6);
  border-radius: 0.25rem;
  text-align: center;
  outline: none;
}

.template-shortcut {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Heads-up rendered when the user opens the "Use template..." dropdown.
   Reminds them that picking a template wipes any stimulus chips / block
   times they've already configured for this day. */
.template-shortcut-warning {
  margin: 0.375rem 0;
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 0.375rem 0.5rem;
  background-color: oklch(95% 0.02 85);
  border-radius: 0.25rem;
}

/* --- Drop Target Highlight --- */
.day-card-drop-target {
  outline: 2px dashed var(--primary-color);
  outline-offset: -2px;
  background: color-mix(in oklch, var(--primary-color) 8%, white);
}

/* --- Search Results (replace the panel body while a query is typed) --- */
.drawer-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 24rem;
  overflow-y: auto;
}

.drawer-search-results.hidden {
  display: none;
}

.hidden {
  display: none;
}

/* --- Builder Plan Context Panel --- */
.plan-context-panel {
  position: relative;
  background: var(--surface-raised, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--dark-gray, #374151);
}

/* --- Occurrence rows --- */
.plan-occ-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}

.plan-occ-row:last-child {
  border-bottom: none;
}

.plan-occ-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.plan-occ-stimulus {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.plan-occ-stimulus-matched {
  color: var(--accent-cycle);
}

.plan-occ-stimulus-unplanned {
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.plan-occ-stimulus-missing {
  color: oklch(55% 0.15 55);
}

.plan-occ-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.plan-occ-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 180px;
  width: 180px;
  overflow: hidden;
}

.plan-occ-right {
  flex: 1 1 auto;
  border-left: 2px solid var(--border, #e5e7eb);
  padding-left: 0.75rem;
}

.plan-occ-explanation {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0;
}

.plan-block-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-element-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
}

.plan-element-planned {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.plan-element-extra {
  background: oklch(92% 0.02 200);
  color: oklch(50% 0.02 200);
}

.plan-element-pending {
  background: oklch(88% 0.06 250);
  color: oklch(30% 0.08 250);
  font-weight: 500;
}

/* Planned-but-unprogrammed rows woven between occurrence rows */
.plan-occ-row--planned {
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

/* --- Unfulfilled section --- */
.plan-unfulfilled {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border, #d1d5db);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.plan-unfulfilled-elements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.plan-unfulfilled-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: oklch(55% 0.12 55);
  white-space: nowrap;
}

/* Suggestions panel sits flush beneath the day card as a sibling so it persists
   through day-card re-renders (drop → Turbo Stream replace of the card only).
   Visually tied to the card above: no top margin, no top border, only bottom
   corners rounded. Left border stripe marks it as day-specific. */
.day-card-suggestions {
  /* The elements drawer opens inside the day's panel, under its card,
     set apart by a hairline rather than as a box of its own. */
  padding: 0.75rem 1rem;
  background: var(--surface-raised, #f9fafb);
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-card-suggestions--collapsed {
  display: none;
}

.suggestion-tier {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.suggestion-tier-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, oklch(55% 0 0));
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Suggestion chip variant of the shared drawer chip. Only tweaks the size
   and adds a subtle border — no background override, so the recovery and
   fatigue tints set on the chip root flow through unmolested. */
.suggestion-chip {
  border: 1px solid var(--border, #e5e7eb);
  font-size: 0.75rem;
  padding: 0.3125rem 0.5rem;
}

/* Tap-to-add affordance: a small +/✓ pill on the right of an addable chip.
   The glyph and fill flip on the --added state class (toggled optimistically
   in JS) so the feedback is instant, no re-render needed. */
.suggestion-chip-toggle {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--accent-cycle, #007bff);
  color: var(--accent-cycle, #007bff);
  font-size: 0.95rem;
  line-height: 1;
}

.suggestion-chip-toggle::before {
  content: "+";
}

.drawer-element-chip--added .suggestion-chip-toggle {
  color: white;
  background: var(--accent-cycle, #007bff);
  border-color: var(--accent-cycle, #007bff);
}

.drawer-element-chip--added .suggestion-chip-toggle::before {
  content: "✓";
}

/* Added chips read as committed to the plan. */
.suggestion-chip.drawer-element-chip--added {
  outline: 2px solid var(--accent-cycle, #007bff);
  outline-offset: -2px;
}

/* Mobile: stack suggestion chips one per row, single-line with the name
   truncating, so tap-to-add replaces drag-and-drop. The reasons sit behind
   each chip's "i" popover at every width (planner_chip.css). */
@media (max-width: 899px) {
  .suggestion-chips {
    flex-direction: column;
  }

  .suggestion-chip {
    width: 100%;
    padding: 0.5rem;
  }

  .suggestion-chip .element-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Desktop: one-line pills at their own width, flowing in rows, the
   reasons behind each chip's "i" popover rather than a second line.
   Scoped to the main tier list so the narrow sidebar chips are untouched. */
@media (min-width: 900px) {
  .day-card-suggestions-main .suggestion-chip {
    flex: 0 1 auto;
    max-width: 24rem;
  }
}


.suggestion-empty {
  font-size: 0.75rem;
  margin: 0;
  color: var(--text-muted, oklch(55% 0 0));
}

/* Two-column layout inside the suggestions panel: main tiers on the left,
   narrow "Already in this week" sidebar on the right. Stacks on mobile. */
.day-card-suggestions-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .day-card-suggestions-layout {
    grid-template-columns: 1fr minmax(200px, 28%);
  }
}

.day-card-suggestions-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-card-suggestions-sidebar {
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.04);
  border-left: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.already-in-week-header h4 {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, oklch(55% 0 0));
}

.already-in-week-hint {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  line-height: 1.35;
}

/* Sidebar list flexes to fill the remaining space in its grid cell, which
   is sized by the taller main-tiers column. When many elements are scheduled
   across the week the list scrolls instead of pushing the panel taller. */
.already-in-week-elements {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Loading state shown while the suggestion panel is fetching from the server. */
.suggestion-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--text-muted, oklch(55% 0 0));
}

.suggestion-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-top-color: var(--primary, #3b82f6);
  border-radius: 50%;
  animation: suggestion-spin 0.9s linear infinite;
}

@keyframes suggestion-spin {
  to {
    transform: rotate(360deg);
  }
}

.suggestion-loading-text {
  font-variant-numeric: tabular-nums;
}

.suggest-chip {
  cursor: pointer;
}

/* --- Prior Week Summary --- */
/* 7-column recap strip at the top of the weekly planner. Each card links to
   the builder for that day so programmers can drill into a prior workout. */
.prior-week-summary {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(97% 0.003 255);
  border: 1px solid oklch(90% 0.005 255);
  border-radius: 0.375rem;
}

.prior-week-summary-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.prior-week-summary-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--medium-gray-dark, #4b5563);
  margin: 0;
}

.prior-week-summary-range {
  font-size: 0.75rem;
}

.prior-week-summary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.prior-week-day-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;
  min-height: 5.5rem;
  background: white;
  border: 1px solid oklch(90% 0.005 255);
  border-radius: 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s, box-shadow 0.1s;
}

.prior-week-day-card:hover {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 1px 3px oklch(90% 0.05 255);
}

/* Empty days aren't clickable — drop the hover affordance and dim the bg. */
.prior-week-day-card--empty {
  background: oklch(98% 0.002 255);
  cursor: default;
}

.prior-week-day-card--empty:hover {
  border-color: oklch(90% 0.005 255);
  box-shadow: none;
}

/* Day-occurrences modal: clickable row wrapping an AthleteWorkoutCard for
   each occurrence on the selected date. Each row drills into the
   per-occurrence modal via the workout-modal Stimulus controller. */
.day-occurrences-modal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-occ-row {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.1s, box-shadow 0.1s;
}

.day-occ-row:hover {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 1px 3px oklch(90% 0.05 255);
}

.prior-week-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.7rem;
}

.prior-week-day-name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dark-gray, #1f2937);
}

.prior-week-day-date {
  color: var(--medium-gray, #9ca3af);
}

.prior-week-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-height: 1.4rem;
}

.prior-week-day-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-top: 1px solid oklch(90% 0.005 255);
  padding-top: 0.25rem;
}

/* On narrow viewports, stack two rows of 4/3 days so cards don't get squished. */
@media (max-width: 899px) {
  .prior-week-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .prior-week-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Recommendation chip affordances: inline checkbox + reveal-on-select multiplier */
.drawer-element-chip .chip-checkbox {
  margin-right: 0.4rem;
}
.drawer-element-chip .chip-multiplier {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.drawer-element-chip:has(input[type="checkbox"]:checked) .chip-multiplier {
  display: inline-flex;
}
.drawer-element-chip--used-today {
  opacity: 0.6;
}

/* In the recommendation/template modal, chips sit in a fixed-width grid
   (.element-list). Keep the revealed multiplier inside the cell: let the name
   truncate, pin the control, and drop the redundant "Multiplier:" label (the
   options already read "1.0x"). Scoped to .element-list so the day panel's
   catalog (which uses .drawer-bucket) is unaffected. */
.element-list .drawer-element-chip {
  overflow: hidden;
}
.element-list .drawer-element-chip .element-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.element-list .chip-multiplier {
  flex: 0 0 auto;
}
.element-list .chip-multiplier .multiplier-label {
  display: none;
}
.element-list .chip-multiplier select {
  width: auto;
  min-width: 3.25rem;
  padding-block: 0.1rem;
}

/* Workout template picker modal (block-level WorkoutTemplate attachment).
   Rows: expandable details (name + badges as the summary, description and
   template text in the body) with the attach button outside the toggle. */
.template-picker-detach {
  margin-bottom: 0.75rem;
}

.template-picker-list {
  display: flex;
  flex-direction: column;
}

.template-picker-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid oklch(92% 0 0);
}

.template-picker-row:last-child {
  border-bottom: none;
}

.template-picker-info {
  min-width: 0;
  flex: 1 1 auto;
}

/* Neutralize the legacy global summary/summary:hover rules from
   utilities.css (white pill + dark-gray invert), which turn the row into
   an unreadable dark slab on hover. */
.template-picker-summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Each line starts at the left in this column layout. */
  align-items: flex-start;
  text-align: left;
  gap: 0.25rem;
  background-color: transparent;
  padding: 0;
  border-radius: 0.375rem;
}

.template-picker-summary:hover {
  background-color: oklch(96% 0 0);
  color: inherit;
}

.template-picker-summary:hover .template-picker-name {
  color: var(--dark-gray);
}

.template-picker-summary:hover .template-picker-detail {
  color: var(--medium-gray-dark);
}

.template-picker-name {
  font-weight: 600;
  color: var(--dark-gray);
}

.template-picker-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--medium-gray-dark);
}

.template-picker-fit {
  font-weight: 600;
}

.template-picker-duration {
  font-variant-numeric: tabular-nums;
}

.template-picker-duration-fit {
  font-weight: 600;
}

.template-picker-duration-fit--over {
  color: var(--color-warning, #b45309);
}

.template-picker-duration-fit--under {
  color: var(--medium-gray-dark);
}

.template-picker-duration-fit--fit {
  color: var(--dark-gray);
}

.template-picker-body {
  margin-top: 0.5rem;
}

.template-picker-description {
  font-size: 0.8rem;
  color: var(--medium-gray-dark);
  margin-bottom: 0.375rem;
}

.template-picker-text {
  font-size: 0.75rem;
  white-space: pre-wrap;
  background-color: oklch(97% 0 0);
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin: 0;
  color: var(--dark-gray);
}

/* Attached workout-template name inside the planned-intent banner block chip */
.planned-intent-workout-template {
  font-size: 0.7rem;
  font-weight: 600;
}

/* Programming mix guidance: what the block is short on, above the gap bar. */

.mix-pane-loading {
  padding: 1rem;
  color: var(--color-text-muted);
}

/* How to read the mix panes, above the window tabs. */
.mix-modal-intro {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Week brief -- the weekly planner's top strip: where the week sits, the
   three spend bars, and the ranked headline chips. Its layout is
   `.planner-brief` in day.css. */
.week-brief {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  background: var(--surface-white);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.week-brief-where {
  display: flex;
  gap: 0.875rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.week-brief-title {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.week-brief-cycle {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.week-brief-next {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  border-left: 1px solid var(--border);
  padding-left: 0.875rem;
}

.week-brief-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.week-brief-chips-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.week-brief-chips-label:hover {
  text-decoration: underline;
}

.week-brief-clear {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-style: italic;
}

.brief-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  /* A headline naming many patterns is wider than a phone; it wraps inside
     its row rather than push the page sideways. Short chips never reach it. */
  max-width: 100%;
}

.brief-chip-verb {
  font-weight: 600;
}

.brief-chip-under {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.brief-chip-over {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.brief-chip-critical {
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

.brief-chip-more {
  background: var(--surface-white);
  border-color: var(--border);
  color: var(--text-muted);
}

/* An inline <details>: opening it must not knock the "+N more" chip and the
   hidden chips it reveals onto their own line, so the disclosure itself
   flexes and wraps like the chip row around it. */
.week-brief-more {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

/* The browser's own `details:not([open]) > *:not(summary) { display: none }`
   rule is a real, overridable CSS rule (not a hard "hidden" mechanism) --
   `.brief-chip` (a class selector) beats its specificity, so every closed
   headline chip kept computing display: inline-flex and generating a real,
   positioned box that could push scrollWidth past the viewport (confirmed
   via getComputedStyle/getBoundingClientRect on the live page). This rule
   is specific enough to win back the closed state regardless of what
   display the hidden content's own class sets. Open state is untouched:
   the chips fall back to .brief-chip's inline-flex and wrap into the same
   row as the summary, since .week-brief-more is already flex-wrap: wrap. */
details.week-brief-more:not([open]) > *:not(summary) {
  display: none;
}

.week-brief-more summary {
  list-style: none;
  cursor: pointer;
}

.week-brief-more summary::-webkit-details-marker {
  display: none;
}

/* Week spend -- the three compact StackedBars (energy, stimulus minutes,
   equipment) rendered inside #week-spend. */
.week-spend {
  display: flex;
  gap: 1.125rem;
  flex-wrap: wrap;
}

.stacked-bar {
  /* 150px where there is room (the week brief's spend bars); never wider
     than its box, so a narrow planner column's muscle bar fits inside it. */
  min-width: min(150px, 100%);
}

.stacked-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.1875rem;
}

.stacked-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-muted);
  display: flex;
  overflow: hidden;
}

.stacked-bar-segment {
  display: block;
  height: 100%;
}

/* Energy-system tones (energy bar): the same blue-to-purple fills as the
   energy chips, kept clear of the red-to-green readiness ladder. */
.stacked-bar-segment-phosphagen { background-color: var(--energy-phosphagen); }
.stacked-bar-segment-glycolytic { background-color: var(--energy-glycolytic); }
.stacked-bar-segment-oxidative { background-color: var(--energy-oxidative); }
.stacked-bar-segment-skill { background-color: var(--energy-skill); }

/* Stimulus-type tones (stimulus-minutes bar): same colors
   Components::Stimulus::Badge uses, grouped by each type's energy system. */
.stacked-bar-segment-strength,
.stacked-bar-segment-power_output,
.stacked-bar-segment-barbell_technique,
.stacked-bar-segment-hypertrophy,
.stacked-bar-segment-accessory_work {
  background-color: var(--energy-phosphagen);
}

.stacked-bar-segment-anaerobic_capacity,
.stacked-bar-segment-lactate_threshold,
.stacked-bar-segment-mixed_modal,
.stacked-bar-segment-muscular_endurance,
.stacked-bar-segment-aerobic_power {
  background-color: var(--energy-glycolytic);
}

.stacked-bar-segment-aerobic_capacity,
.stacked-bar-segment-endurance,
.stacked-bar-segment-recovery,
.stacked-bar-segment-warmup {
  background-color: var(--energy-oxidative);
}

.stacked-bar-segment-skill_practice,
.stacked-bar-segment-gymnastics {
  background-color: var(--energy-skill);
}

/* Neutral grey ramp (equipment bar): most-used equipment reads darkest,
   the "everything else" segment fades into the track. */
.stacked-bar-segment-equipment-1 { background-color: var(--blueish-gray); }
.stacked-bar-segment-equipment-2 { background-color: var(--medium-gray); }
.stacked-bar-segment-equipment-3 { background-color: var(--medium-gray-light); }
.stacked-bar-segment-equipment-more { background-color: var(--border); }

/* Day board: seven compact columns plus one expanded detail below.
   DayColumn/DayDetail/DayBoard (see app/views/weekly_planners); the
   layout of the days themselves is .planner-days in day.css. */
.day-board {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

/* Seven columns in the 768-1023 band get about 130px each: tighten the
   gutters and padding rather than letting names and dates wrap. */
@media (min-width: 768px) and (max-width: 1023px) {
  .day-column {
    --day-column-pad-y: 0.375rem;
    --day-column-pad-x: 0.5rem;
  }
}

.day-column {
  --day-column-pad-y: 0.5rem;
  --day-column-pad-x: 0.75rem;
  --day-column-radius: 0.375rem;

  box-sizing: border-box;
  max-width: 100%;
  background-color: var(--surface-white);
  color: var(--text-primary);
  border: 2px solid transparent;
  border-radius: var(--day-column-radius);
  padding: var(--day-column-pad-y) var(--day-column-pad-x);
  /* The head bar and the day's strata (Components::DayStrata) meet with no
     gap; the strata space themselves, and their bands bleed by the padding. */
  --day-band-bleed: var(--day-column-pad-x);
  /* The weekly planner's board lays its columns on shared rows instead
     (day.css sets --day-column-display). */
  display: var(--day-column-display, flex);
  flex-direction: column;
  min-height: 150px;
  min-width: 0;
}

.day-column-expanded {
  border-color: var(--primary-color);
  /* The opened day reaches down through the board's gap and over its plan's
     top border, open at the foot, so the column and the plan below read as
     one tab and its panel. */
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * (var(--planner-days-gap, 0px) + 2px));
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.day-column-bar-today {
  box-shadow: inset 0 3px 0 var(--primary-color);
}

.day-column-today .day-column-name {
  color: var(--primary-color);
}

.day-column-rest {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}

.day-column-past {
  opacity: 0.7;
}

/* The day's head bar (Components::DayColumnHead): the head -- the
   planner's expand button, the week's or the month's link -- and the day's
   weather beside it. The bar carries the tint and bleeds to the column's
   edges; the head fills it and tints on hover. */
.day-column-bar {
  display: flex;
  /* In a narrow column the weather drops to its own line in the bar
     rather than running into the name, date and status. */
  flex-wrap: wrap;
  align-items: stretch;
  /* Full bleed: cancel the column's padding so the tint reaches its edges. */
  margin: calc(-1 * var(--day-column-pad-y)) calc(-1 * var(--day-column-pad-x)) 0;
  border-radius: calc(var(--day-column-radius) - 2px) calc(var(--day-column-radius) - 2px) 0 0;
  /* The darkest of a day's strata (Components::DayStrata), on every day
     head: the planner, the calendar week and the month. */
  background-color: var(--stratum-head);
}

.day-column-bar-expanded {
  background-color: color-mix(in oklab, var(--primary-color) 18%, var(--surface-white));
}

.day-column-head {
  /* Sized by its contents first, so the bar knows when to wrap. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  /* Name, date and status read together from the left; the weather sits
     at the bar's far end, beside the head. */
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.375rem;
  cursor: pointer;
  padding: var(--day-column-pad-y) var(--day-column-pad-x);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.day-column-head:hover {
  background-color: color-mix(in oklab, var(--text-primary) 5%, transparent);
}

.day-column-head:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.day-column-head-expanded:hover {
  background-color: color-mix(in oklab, var(--primary-color) 8%, transparent);
}

/* The weather beside the head: its own link to the hourly forecast. */
.day-column-weather {
  /* A narrow month cell sets --day-column-weather-display to hide it. */
  display: var(--day-column-weather-display, flex);
  align-items: center;
  padding: 0 var(--day-column-pad-x) 0 0.25rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.day-column-weather:hover {
  background-color: color-mix(in oklab, var(--text-primary) 5%, transparent);
}

.day-column-name {
  font-weight: 600;
}

.day-column-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.day-column-stimuli {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.day-column-stimulus {
  font-size: 0.625rem;
}

.day-column-rest-label {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.day-column-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.day-column-muscles {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-column-muscle-names {
  font-size: 0.625rem;
  color: var(--text-muted);
}

.day-column-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.day-column-primary {
  flex: 1;
  /* The kit button keeps its label on one line; in a column narrower than
     "Scheduled · Open" it wraps, centred, instead of pushing the column
     wider. */
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.day-detail {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
}

.day-detail[hidden] {
  display: none;
}

.day-detail-expanded {
  display: block;
  /* Flush under the board, edge to edge, so the opened column meets it:
     one panel in the column's accent holding the day's card and, when
     open, its elements drawer. */
  padding: 0;
  border: 2px solid var(--primary-color);
  border-radius: 0.25rem;
  background-color: white;
  overflow: hidden;
}

/* Last week -- one-line recap under the board, replacing the always-open
   PriorWeekSummary that used to sit at the page's top. The seven-day recap
   still renders unchanged; it just opens behind this toggle now. */
.last-week-line {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  background-color: var(--surface-white);
  color: var(--text-primary);
  margin-top: 6px;
  padding: 0.5rem 0.75rem;
}

/* app/assets/stylesheets/utilities.css defines a bare `summary { background;
   padding; border-radius }` rule for the site's other disclosures; it wins
   here because nothing on this class overrode those three properties, which
   is what painted a boxed pill around this row instead of a quiet line. */
.last-week-line-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: transparent;
  padding: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}

.last-week-line-summary::-webkit-details-marker {
  display: none;
}

.last-week-line-stimulus {
  opacity: 0.8;
  white-space: nowrap;
}

.last-week-line-fact {
  white-space: nowrap;
}

.last-week-line-toggle {
  margin-left: auto;
}