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

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

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

/* Plan grid header meta strip — sits below ResourceHeader, holds the
   day count, pending count, and primary plan-management actions. */
.plan-grid-meta {
  margin: 0.75rem 0 1.25rem;
}

.plan-grid-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, var(--medium-gray));
  border-radius: 0.5rem;
  background: var(--surface-subtle, color-mix(in oklch, var(--surface-white, #fff) 80%, var(--medium-gray, #e5e7eb)));
}

.plan-grid-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary, var(--dark-gray));
}

.plan-grid-stats-count {
  font-weight: 600;
  color: var(--text-primary, var(--dark-gray));
}

.plan-grid-stats-pending {
  color: var(--text-secondary, #6b7280);
}

.plan-grid-stats-pending::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--medium-gray, #9ca3af);
}

.plan-grid-buttons {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

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

.plan-grid-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}