/* Similar workouts badge */
.similar-workouts-badge--found {
  display: inline-block;
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid var(--badge-info-border);
  text-decoration: none;
  cursor: pointer;
}

.similar-workouts-badge--found:hover {
  background: var(--badge-info-text);
  color: white;
  border-color: var(--badge-info-text);
}

.similar-workouts-badge--none {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--medium-gray-dark);
  font-style: italic;
}

/* Stimulus-focus quick-fill preset buttons, above the stimulus checkbox grid */

.stimulus-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Cycle Planner Layout */

.cycle-planner-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .cycle-planner-layout {
    grid-template-columns: 1fr 1.5fr;
  }
}

/* Focus Element Cards — preview panel rendering for each element
   selected via the focus_element autocomplete. Reuses the muscle-bar
   primitives from plan.css. */

.focus-element-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .focus-element-cards {
    grid-template-columns: 1fr;
  }
}

.focus-element-card {
  border: 1px solid var(--border, var(--medium-gray));
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--surface-white, #fff);
}

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

.focus-element-card-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.focus-element-card-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.focus-element-summary {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, var(--medium-gray));
}

.focus-element-summary-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.focus-element-summary-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mix-targets {
  margin-top: 1rem;
  border-top: 1px solid var(--border-color, #ddd);
  padding-top: 0.75rem;
}

.mix-targets-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
}

.mix-targets-note {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin: 0.5rem 0 0.75rem;
}

/* Task 8: PlanCalendarHeader, PlanHeaderActions, PlanCalendarToolbar,
   PlanGrid -- the calendar page shell around task 7's WeekRow grid. */

.plan-calendar-page {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The calendar section sits on the dark page background; every white
   surface inside it (this bar, the week summaries) resets to dark ink,
   and every quiet link outside one takes light ink. */

.plan-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--surface-white);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.plan-header-chip {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: auto;
}

.plan-header-form {
  display: inline;
}

/* Finalize, Regenerate remaining, Settings, and the More toggle share one
   quiet outlined button so the bar reads as a row of controls, not a
   line of prose. */

.plan-header-button,
.plan-header-overflow-toggle {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--surface-white);
  text-decoration: none;
  cursor: pointer;
}

.plan-header-button:hover,
.plan-header-overflow-toggle:hover {
  border-color: var(--text-muted);
  background: var(--surface-white);
  color: var(--text-primary);
}

.plan-header-overflow {
  position: relative;
}

.plan-header-overflow-toggle {
  list-style: none;
}

.plan-header-overflow-toggle::-webkit-details-marker {
  display: none;
}

.plan-header-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 3;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
  background: var(--surface-white);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.plan-header-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.plan-header-misaligned {
  color: var(--alert-warning-text, #b45309);
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
}

.plan-calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.plan-calendar-mode {
  margin-left: auto;
}