/* Weekly Planner Styles - Mobile First Approach */

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

/* Header Bar */
.weekly-planner-header {
  background-color: var(--dark-gray);
  color: white;
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.header-navigation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.week-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.week-nav .btn {
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 0.25rem;
  transition: all 0.15s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.week-nav .btn-ghost {
  background-color: var(--medium-gray-dark);
  color: white;
}

.week-nav .btn-ghost:hover {
  background-color: var(--primary-color);
}

.week-nav .btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.week-display {
  text-align: center;
}

.week-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--light-gray);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Desktop: Single row header */
@media (min-width: 768px) {
  .header-navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .week-display {
    flex: 1;
    text-align: left;
    margin-left: 1rem;
  }

  .header-actions {
    justify-content: flex-end;
  }
}

/* Gap Summary Bar */
/* Native <details> element. Collapsed by default — only the <summary>
   (gap-summary-header) is visible. Expanding shows the groups below.
   Rendered as a subtle inset panel against the dark planner background
   so it reads as secondary information, not a primary content block. */
.gap-summary-bar {
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  color: var(--medium-gray);
}

.gap-summary-bar[open] {
  padding-bottom: 0.75rem;
  background-color: rgba(0, 0, 0, 0.35);
}

details.gap-summary-bar[open] .gap-summary-groups {
  margin-top: 0.5rem;
}

/* Hide the default disclosure triangle; our own hint/rotation replaces it. */
.gap-summary-header::-webkit-details-marker {
  display: none;
}

.gap-summary-header::marker {
  content: "";
}

/* Override the global `summary { ... }` rule in utilities.css that otherwise
   paints every <summary> element with a light background, padding, and
   rounded corners. For this component we want the summary to blend into
   the details container so it reads as a single recessed panel. */
.gap-summary-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.gap-summary-header:hover {
  background-color: transparent;
  color: inherit;
}

.gap-summary-chevron {
  color: var(--medium-gray);
  font-size: 0.75rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.15s ease;
}

.gap-summary-bar[open] .gap-summary-chevron {
  transform: rotate(90deg);
}

.gap-summary-title {
  color: var(--medium-gray-dark);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gap-summary-subtitle {
  color: var(--medium-gray-dark);
  font-size: 0.625rem;
}

.gap-summary-count {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.625rem;
  line-height: 1.4;
}

.gap-count-critical {
  background-color: var(--load-max);
  color: white;
}

.gap-count-moderate {
  background-color: var(--load-heavy);
  color: white;
}

.gap-count-minor {
  background-color: var(--medium-gray-dark);
  color: var(--light-gray);
}

.gap-summary-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  flex: 1;
  min-width: 0;
}

.gap-group {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.gap-group-label {
  color: var(--medium-gray);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.gap-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gap-item {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.1875rem;
  white-space: nowrap;
  cursor: default;
}

.gap-item-critical {
  background-color: var(--load-max);
  color: white;
}

.gap-item-moderate {
  background-color: var(--load-heavy);
  color: white;
}

.gap-item-minor {
  background-color: var(--medium-gray-dark);
  color: var(--light-gray);
}

@media (max-width: 767px) {
  .gap-summary-groups {
    gap: 0.375rem 0.75rem;
  }
}

/* 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;
  }
}

/* Column Headers */
.column-header {
  background-color: var(--medium-gray);
  padding: 0.75rem 1rem;
  border-radius: 0.25rem 0.25rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

.week-range {
  font-size: 0.875rem;
  color: var(--light-gray);
}

.column-body {
  background-color: var(--lightest-gray);
  padding: 0.5rem 0;
  border-radius: 0 0 0.25rem 0.25rem;
}

/* --- 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-explanation 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-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

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

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

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

.occurrence-duration {
  font-size: 0.75rem;
  white-space: nowrap;
}

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

.occurrence-stimulus-label {
  font-size: 0.75rem;
}

/* Energy-badge core styling lives in badges.css. */

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

.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;
}

/* Plan Column (This Week) */
.plan-column {
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .plan-column {
    flex: 1;
  }
}

/* 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 {
  background-color: white;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
  border: 2px solid var(--medium-gray-light);
  transition: all 0.2s ease;
  overflow: hidden;
}

.day-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.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 {
  border-left: 4px solid var(--success-color);
}

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

.day-card-suggested {
  border-left: 4px solid var(--primary-color-light);
  opacity: 0.8;
}

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

.day-status-badge {
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.day-status-pinned {
  background-color: var(--success-color);
  color: white;
}

.day-status-suggested {
  background-color: var(--primary-color-light);
  color: var(--dark-gray);
}

.day-card-finished {
  border-left: 4px solid var(--success-color);
  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);
}

.day-card-finished-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  margin-left: auto;
}

.day-card-finished-toggle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--medium-gray);
  cursor: pointer;
}

/* 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);
}

.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. */
.block-item-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.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-explanation {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0.25rem 0 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border, #e5e7eb);
}

.no-plan {
  font-size: 0.875rem;
  color: var(--medium-gray-dark);
  font-style: italic;
}

.day-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- 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;
}

/* 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-card-muscle-impact .muscle-bar-row {
  /* tighter columns in the narrower day-card cell */
  grid-template-columns: 90px 1fr 60px;
}

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

.day-status-badge {
  align-self: flex-start;
}

/* 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;
  }
}

/* Day Edit Modal */
.current-selection-section {
  display: flex;
  flex-direction: column;
}

.alternative-option {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.alternative-option.border-affirm {
  border-color: var(--success-color) !important;
  border-width: 2px;
}

.alternative-option.bg-affirm-light {
  background-color: color-mix(in oklch, var(--success-color) 10%, white) !important;
}

/* 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;
}

/* Energy-badge core styling lives in badges.css. */

/* Footer with Energy Budget */
.weekly-planner-footer {
  background-color: var(--dark-gray);
  padding: 1.5rem;
  border-radius: 0.25rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.energy-budget-container,
.stimulus-spend-container {
  min-width: 0;
}

.stimulus-spend-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stimulus-spend-empty {
  text-align: center;
  margin: 0;
}

.budget-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.budget-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.budget-total {
  color: var(--light-gray);
  font-size: 0.9375rem;
  font-weight: 500;
}

.budget-minutes {
  font-size: 0.8125rem;
  font-weight: 400;
}

.budget-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.budget-bar-container {
  background-color: var(--medium-gray-dark);
  padding: 0.75rem;
  border-radius: 0.25rem;
}

.budget-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.budget-label {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
}

.budget-values {
  font-size: 0.875rem;
}

.budget-values .text-muted {
  color: var(--light-gray);
}

.budget-bar-track {
  background-color: var(--medium-gray);
  height: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

.budget-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Recovery Group Indicators */
.recovery-indicators {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.recovery-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--lightest-gray);
  border: 1px solid var(--medium-gray-light);
}

.recovery-pill.ready {
  background-color: oklch(90% 0.1 145);
  border-color: oklch(70% 0.15 145);
  color: oklch(30% 0.1 145);
}

.recovery-pill.fatigued {
  background-color: oklch(90% 0.1 25);
  border-color: oklch(70% 0.15 25);
  color: oklch(30% 0.1 25);
}

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

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Badge General Styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Training Days Configuration */
.training-days-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: var(--lightest-gray);
  border-radius: 0.25rem;
}

.training-days-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.training-day-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal;
}

.training-day-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.training-day-checkbox span {
  font-size: 1rem;
}

.training-days-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.program-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.program-selector label {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
  margin: 0;
}

.program-select {
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--medium-gray-light);
  background-color: white;
  color: var(--dark-gray);
  font-size: 0.875rem;
  cursor: pointer;
}

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

@media (min-width: 768px) {
  .training-days-checkboxes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .training-day-checkbox {
    flex: 0 0 auto;
  }
}

/* --- Element Drawer (bottom sheet) --- */
.element-drawer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: height 0.25s ease;

  /* Default snap: peek (header only) */
  height: 48px;
}

.element-drawer[data-snap="half"] {
  height: 50vh;
}

.element-drawer[data-snap="full"] {
  height: 90vh;
}

/* Desktop default open: lower third */
@media (min-width: 768px) {
  .element-drawer[data-snap="half"] {
    height: 33vh;
  }
}

.drawer-peek-bar {
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-raised, #f9fafb);
}

.drawer-handle-grip {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--medium-gray, #d1d5db);
  margin: 3px auto 0;
}

/* Use baseline alignment so text in h3 and input share the same
   baseline. The close button is sized to match the input's visual
   height so it centers naturally on the same row. */
.drawer-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 1rem 0.45rem;
  min-height: 0;
}

.drawer-header h3 {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--dark-gray, #1f2937);
}

.drawer-total-count {
  font-weight: 400;
}

.drawer-search {
  flex: 1;
  max-width: 320px;
}

.drawer-search .form-input {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  line-height: 1.4;
}

/* Close button — purpose-built to avoid basecoat .btn sizing conflicts.
   Baseline-aligned with the header's text so the ⌄ glyph sits on the
   same baseline as "Elements" and the search input text. */
.drawer-close-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.1rem 0.35rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--medium-gray-dark, #5a5c5d);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.15s, color 0.15s;
}

.drawer-close-btn:hover {
  background: var(--light-gray);
  color: var(--dark-gray);
}

/* Panes — single column on mobile, two-pane on desktop */
.drawer-panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  min-height: 0;
}

@media (min-width: 768px) {
  .drawer-panes {
    grid-template-columns: minmax(280px, 33%) 1fr;
  }
}

.drawer-pane {
  overflow-y: auto;
  padding: 0.75rem 1rem;
  min-height: 0;
}

.drawer-pane-left {
  border-right: 1px solid var(--border, #e5e7eb);
}

/* Stale buckets — column layout on desktop */
.drawer-stale-header h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray, #1f2937);
}

.drawer-stale-buckets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  height: calc(100% - 2rem);
}

@media (min-width: 768px) {
  .drawer-stale-buckets {
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    grid-template-columns: none;
    gap: 0.5rem;
  }

  .drawer-bucket-empty {
    grid-column: span 1;
    max-width: 60px;
  }
}

/* Mobile stale buckets — stacked accordion-like layout */
@media (max-width: 767px) {
  .drawer-stale-buckets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: auto;
  }

  .drawer-bucket {
    border-radius: 0.25rem;
  }

  .drawer-bucket-elements {
    flex-direction: column;
    overflow-y: visible;
  }

  .drawer-bucket-empty {
    display: none;  /* hide empty buckets entirely on mobile to save space */
  }
}

.drawer-bucket {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.5rem;
  background: var(--surface, #fff);
}

.drawer-bucket-empty {
  opacity: 0.5;
}

.drawer-bucket-header {
  display: flex;
  align-items: baseline;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--dark-gray, #1f2937);
}

.drawer-bucket-elements {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

/* Drawer section (left pane) */
.drawer-section {
  margin-bottom: 0.75rem;
}

.element-drawer .section-title {
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem 0;
  color: var(--dark-gray, #1f2937);
  background: none;
}

.element-drawer .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;
}

.drawer-element-chip--used-this-week {
  border: 2px solid var(--dark-gray);
}

/* 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.
   Fatigue-load classes (see below) 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);
}

/* Recency badges */
.recency-badge {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  margin-left: auto;
}

.recency-stale {
  color: oklch(55% 0.22 25);
  font-weight: 600;
}

.recency-in-use {
  color: oklch(55% 0.15 85);
  font-weight: 600;
}

.frequency-badge {
  font-size: 0.65rem;
}

/* --- 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 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  line-height: 1.4;
}

.element-chip-manual {
  background: oklch(90% 0.03 250);
  color: oklch(30% 0.05 250);
}

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

.element-chip-occurrence {
  background: oklch(93% 0.005 250);
  color: oklch(45% 0.02 250);
  cursor: default;
}

.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 top of `.badge.energy-badge` (rendered by
   Components::Stimulus::Badge). The base badge handles padding, color, and
   shape; these only change cursor/opacity/border state. */
.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-left: 2px solid oklch(70% 0.12 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 --- */
.drawer-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem;
}

.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);
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

/* --- 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;
}

/* --- 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-stimulus,
.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;
}

/* --- Day card suggestions panel --- */
/* Wrapper that holds the day card and the persistent suggestions panel.
   Flex column so the suggestions sit directly under the card with no gap.
   Reset the day card's own bottom margin here — the wrapper owns day spacing. */
.plan-day {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.plan-day > .day-card {
  margin-bottom: 0;
}

/* 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 {
  margin: 0 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-raised, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-top: none;
  border-left: 3px solid var(--primary, #3b82f6);
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  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;
}

.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;
}

.already-in-week-empty {
  font-size: 0.7rem;
  margin: 0;
}

/* 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;
}

/* Compact sidebar chip variant. The shared ElementChip component renders
   here too; this just shrinks it to fit the narrow sidebar column. */
.suggestion-chip-in-use {
  font-size: 0.7rem;
  padding: 0.1875rem 0.375rem;
}

/* 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;
}

/* Cumulative fatigue tint on an element chip. Applied to the chip root when
   the candidate would land on muscles already heavily loaded by prior-day
   work. Uses the project's rank color tokens (base.css --badge-*) softened
   with white via color-mix so the default dark element-name text stays
   clearly readable on top. Severity is still unmistakable because the hue
   stays dominant even after the mix. */
.drawer-element-chip--load-moderate {
  background-color: color-mix(in oklch, var(--load-light) 75%, white);
}

.drawer-element-chip--load-high {
  background-color: color-mix(in oklch, var(--load-moderate) 65%, white);
}

.drawer-element-chip--load-very-high {
  background-color: color-mix(in oklch, var(--load-heavy) 60%, white);
}

/* --- 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-empty {
  font-size: 0.7rem;
  font-style: italic;
}

.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;
}

/* Compact overrides so Components::Stimulus::Badge and Components::Badge fit
   inside the narrow 7-col grid. Targets the rendered base classes rather
   than introducing a new chip class. */
.prior-week-summary .badge.energy-badge {
  font-size: 0.55rem;
  padding: 0.05rem 0.35rem;
  letter-spacing: 0.02em;
}

.prior-week-summary .badge {
  font-size: 0.65rem;
  padding: 0.05rem 0.3rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 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));
  }
}