/* ═══════════════════════════════════════════════════════════════════════════
   Canonical card shape styles (.seg-* namespace)
   Shared across all segment panels on the Today page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Duration badge (shared across instruction_list, drill_table) ──────── */
.seg-duration-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--color-surface-muted);
  border-radius: var(--radius-inset);
  font-size: var(--wp-text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

/* ── Metadata text (durations, percentages, secondary info) ────────────── */
.seg-meta {
  color: var(--color-text-tertiary);
  font-size: var(--wp-text-xs);
  margin-left: 0.35rem;
}

/* ── Coaching cue (italic subtext) ─────────────────────────────────────── */
.seg-cue {
  color: var(--color-text-tertiary);
  font-size: var(--wp-text-xs);
  font-style: italic;
}

/* ── Type/category badge ───────────────────────────────────────────────── */
.seg-badge {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  background: var(--color-surface-muted);
  border-radius: var(--radius-inset);
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin-left: 0.35rem;
}

/* ── Format badges (EMOM, Superset, Straight Sets) ─────────────────────── */
.seg-format-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--wp-weight-medium);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-inset);
  vertical-align: middle;
  text-transform: uppercase;
}

.seg-format-emom {
  background: var(--wp-format-emom-bg);
  color: var(--wp-format-emom-text);
}

.seg-format-straight {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.seg-format-superset {
  background: var(--wp-format-superset-bg);
  color: var(--wp-format-superset-text);
}

.seg-format-detail {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin-left: 3px;
}

/* ── Shared input styling ──────────────────────────────────────────────── */
.seg-input {
  border: var(--border-default);
  border-radius: var(--radius-inset);
  padding: 0.2rem 0.4rem;
  font-size: var(--wp-text-sm);
  width: 5rem;
}

.seg-input:focus {
  outline: 0.5px solid var(--color-primary);
  border-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 1: instruction_list
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-instruction-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seg-instruction-group {
  padding: 0.75rem 0;
  border-top: var(--border-default);
}

.seg-instruction-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.seg-instruction-heading {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  margin: 0 0 0.5rem;
}

.seg-instruction-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.seg-instruction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.3rem 0.5rem;
  background: var(--color-surface-muted);
  border-radius: 5px; /* lint-ignore */
}

.seg-instruction-item-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.seg-instruction-item-cue {
  flex-basis: 100%;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-secondary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 2: drill_table
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-drill-heading {
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.seg-drill-heading--primary { color: var(--color-primary); }

.seg-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp-text-sm);
  margin-top: 0.5rem;
}

.seg-drill-table th {
  text-align: left;
  padding: 0.25rem 0.5rem;
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-tertiary);
  border-bottom: var(--border-default);
}

.seg-drill-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: var(--border-default);
  vertical-align: middle;
}

.seg-drill-table tr:last-child td {
  border-bottom: none;
}

.seg-drill-name {
  font-weight: var(--wp-weight-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 3: loading_grid
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-loading-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.seg-e1rm-badge {
  font-size: var(--wp-text-xs);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-inset);
}

.seg-build-note {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin: 0 0 0.5rem;
}

.seg-loading-sets {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp-text-sm);
}

.seg-loading-sets th {
  text-align: left;
  padding: 0.25rem 0.5rem;
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-tertiary);
  border-bottom: var(--border-default);
}

.seg-loading-sets td {
  padding: 0.35rem 0.5rem;
  border-bottom: var(--border-default);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 4: workout_block
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-workout-header {
  font-size: var(--wp-text-base);
  font-weight: var(--wp-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.seg-workout-text {
  font-family: inherit;
  font-size: var(--wp-text-sm);
  white-space: pre-wrap;
  background: var(--color-surface-page);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-inset);
  border-left: 3px solid var(--wp-border-default);
  margin: 0 0 0.5rem;
}

.seg-workout-movements {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wp-text-sm);
}

.seg-workout-movements li {
  padding: 0.25rem 0;
  border-bottom: var(--border-default);
}

.seg-workout-movements li:last-child {
  border-bottom: none;
}

.seg-workout-qty {
  font-weight: var(--wp-weight-semibold);
  margin-right: 0.35rem;
}

.seg-stimulus-tag {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: var(--border-default);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 5: logging_table
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-logging-table-wrap {
  overflow-x: auto;
}

.seg-logging-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp-text-sm);
}

.seg-logging-table th {
  text-align: left;
  padding: 0.3rem 0.5rem;
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-tertiary);
  border-bottom: var(--border-default);
  white-space: nowrap;
}

.seg-logging-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: var(--border-default);
  vertical-align: middle;
}

.seg-logging-name {
  font-weight: var(--wp-weight-medium);
}

.seg-logging-row.seg-row--logged {
  background: var(--wp-logged-bg);
  border-left: 3px solid var(--wp-logged-border);
}

.seg-log-row-btn {
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shape 6: cooldown_phase_card
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-cooldown-plan {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seg-cooldown-phase {
  padding: 0.75rem 0;
  border-top: var(--border-default);
}

.seg-cooldown-phase:first-of-type {
  border-top: none;
  padding-top: 0;
}

.seg-cooldown-phase-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}

.seg-cooldown-phase-name {
  font-size: var(--wp-text-sm);
  font-weight: var(--wp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
}

.seg-cooldown-phase-intent {
  font-size: var(--wp-text-xs);
  font-style: italic;
  color: var(--color-text-tertiary);
  line-height: var(--wp-leading-snug);
}

.seg-cooldown-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.seg-cooldown-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.3rem 0.5rem;
  background: var(--color-surface-muted);
  border-radius: var(--radius-inset);
  font-size: var(--wp-text-sm);
}

.seg-cooldown-item-name {
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
}

.seg-cooldown-item-cue {
  color: var(--color-text-secondary);
  font-size: var(--wp-text-xs);
}

.seg-cooldown-coaching-cue {
  width: 100%;
  font-size: var(--wp-text-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}

.seg-cooldown-item--breathwork {
  border-left: 3px solid var(--color-primary, #0d6efd); /* lint-ignore */
}

.seg-cooldown-item--mindfulness {
  border-left: 3px solid var(--wp-format-emom-bg, #6f42c1); /* lint-ignore */
}

.seg-cooldown-item--recovery {
  border-left: 3px solid var(--wp-logged-border, #20c997); /* lint-ignore */
}

.seg-cooldown-item--cue {
  border-left: 3px solid #f59e0b; /* lint-ignore */
}

/* Tone modifiers */
.seg-cooldown--restorative .seg-cooldown-phase-name {
  color: var(--color-text-tertiary);
}

.seg-cooldown--restorative .seg-cooldown-item {
  background: var(--color-surface-muted);
}

.seg-cooldown--energising .seg-cooldown-phase-name {
  color: var(--color-primary, #0d6efd); /* lint-ignore */
}

.seg-cooldown--energising .seg-cooldown-item {
  background: var(--color-surface-muted);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .seg-cooldown--restorative .seg-cooldown-item {
    background: color-mix(in srgb, var(--color-surface-muted) 80%, #6f42c1 20%); /* lint-ignore */
  }

  .seg-cooldown--energising .seg-cooldown-item {
    background: color-mix(in srgb, var(--color-surface-muted) 80%, #0d6efd 20%); /* lint-ignore */
  }
}

/* Shape 7: warmup tone intent */

.seg-warmup-tone-intent {
  font-style: italic;
  color: var(--color-text-tertiary);
  font-size: var(--wp-text-xs);
  margin-bottom: 0.5rem;
}