/* pages/cycle.css */
/* ---------- Cycle page (Plan 4 phase D) ---------- */
.cycle-pipeline {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.pipeline-stage {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-12);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-6);
  min-width: 140px;
  flex: 1 1 0;
}
.pipeline-arrow {
  color: var(--text-tertiary);
  font-size: var(--fs-title);
  padding: 0 var(--space-8);
  align-self: center;
  user-select: none;
}
.pipeline-stage--warn   { border-left-color: var(--warn); }
.pipeline-stage--danger { border-left-color: var(--danger); }
/* D4 — visible pairing for the border-left tone color (WCAG 1.4.1). Only
   rendered for non-"ok" tones (see renderPipeline() in cycle.js). */
.pipeline-stage__tone {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pipeline-stage__tone--warn   { color: var(--warn); }
.pipeline-stage__tone--danger { color: var(--danger); }
.pipeline-stage__name {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}
.pipeline-stage__count {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.pipeline-stage__label {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}
.pipeline-stage__meta {
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.pipeline-stage__run {
  position: absolute; top: var(--space-6); right: var(--space-6);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  border-radius: var(--radius-6);
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  font-size: var(--fs-small);
}
.pipeline-stage:hover .pipeline-stage__run { display: inline-flex; }
.pipeline-stage__run:hover { color: var(--accent); border-color: var(--accent); }

.cycle-subtabs {
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.cycle-subtab {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  padding: var(--space-12) var(--space-16);
  cursor: pointer;
  font-size: var(--fs-secondary);
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: var(--space-6);
  white-space: nowrap;
}
.cycle-subtab:hover { color: var(--text-primary); }
.cycle-subtab.active { color: var(--accent); }
.cycle-subtab .badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
}
.cycle-subtab .badge--warn   { background: var(--warn-soft-bg, rgba(251, 191, 36, 0.15)); color: var(--warn); }
.cycle-subtab .badge--danger { background: var(--danger-soft-bg, rgba(248, 113, 113, 0.15)); color: var(--danger); }

.cycle-subtab-content { padding: var(--space-16); min-height: 240px; }

/* Cycle sub-tabs — internal layout (D.4–D.9) */
.cycle-subtab-section {
  display: grid;
  gap: var(--space-12);
}
.cycle-subtab-actions {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--bg-elevated);
  flex-wrap: wrap;
}

/* Incidents sub-tab header: explainer on the left, "clear all" on the right. */
.cycle-incidents-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.cycle-incidents-bar__hint {
  color: var(--text-tertiary);
  font-size: var(--fs-label);
  max-width: 62ch;
}
.cycle-incidents-bar .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-6); }
.cycle-subtab-actions input,
.cycle-subtab-actions select {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  padding: var(--space-6) var(--space-10);
  color: var(--text-primary);
  font-size: var(--fs-secondary);
}
.cycle-quick-chips { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cycle-quick-chip {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.cycle-quick-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cycle-truncate { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Phase D — Cycle preview + full-sync progress + recover modal */
.cycle-preview__summary {
  font-size: var(--fs-secondary);
  color: var(--text-primary);
  margin: 0 0 var(--space-8);
}
.cycle-preview__hint {
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  margin: 0;
}
.cycle-recover-preview {
  margin: var(--space-12) 0 0;
  font-size: var(--fs-secondary);
  color: var(--text-secondary);
}
.full-sync-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  margin: var(--space-12) 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
}
.full-sync-progress[hidden] { display: none; }
.full-sync-progress__label {
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.full-sync-progress__bar {
  height: 6px;
  background: var(--bg-canvas);
  border-radius: var(--radius-4);
  overflow: hidden;
}
.full-sync-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft-text));
  transition: width var(--dur-slow) var(--ease-out);
}

@media (max-width: 640px) {
  .cycle-pipeline { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
}