/* Changeover screen — the daily round trip (phase 1). Leans on styles.css
   (card / pill / primary / badge / warning-text / form-note); only the
   step-list and return-row layout live here. */

.co-head { margin-bottom: 16px; }
.co-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.co-status { font-size: 14px; color: var(--text-muted); margin: 0; }
.co-status strong { color: var(--text-primary); }

/* Which changeover to run — two big buttons, the due one accented. */
.co-picker { display: flex; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.co-pick-btn {
  flex: 1; min-width: 160px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font-size: 15px; font-weight: 500; cursor: pointer; text-align: left;
}
.co-pick-btn .co-pick-sub { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.co-pick-btn.active { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.co-pick-btn.due { border-color: var(--accent-text); }

/* Ordered step list. */
.co-steps { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.co-step { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.co-step.done { opacity: 0.72; }
.co-step-head { display: flex; align-items: baseline; gap: 10px; }
.co-step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--text-primary); font-size: 13px; font-weight: 600;
}
.co-step.done .co-step-num { background: var(--accent-text); color: #fff; }
.co-step-title { font-size: 16px; font-weight: 600; margin: 0; }
.co-step-tag { margin-left: auto; font-size: 12px; }
.co-step-body { margin-top: 10px; }
.co-note { font-size: 13px; color: var(--text-muted); margin: 6px 0; }
.co-physical-note { font-size: 13px; color: var(--text-muted); background: var(--surface-1); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }

/* Return rows. */
.co-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.co-row:first-child { border-top: none; }
.co-row-from { flex: 0 0 auto; min-width: 130px; }
.co-row-flav { font-weight: 500; }
.co-row-meta { font-size: 12px; color: var(--text-muted); }
.co-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; vertical-align: middle; margin-top: 4px; }
.co-bar-fill { display: block; height: 100%; }
.co-row-arrow { color: var(--text-muted); flex: 0 0 auto; }
.co-row-dest { flex: 1; min-width: 0; }
.co-row-dest-rule { color: var(--text-muted); font-weight: 400; }
.co-row-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.co-offhome { color: var(--warning-text); font-size: 11px; font-weight: 600; margin-left: 6px; }
.co-staysput { color: var(--text-muted); font-size: 11px; font-weight: 600; margin-left: 6px; }
.co-row.ok { opacity: 0.6; }
.co-row-result { font-size: 12px; }
.co-row-result.fail { color: var(--warning-text); }

.co-flash { padding: 10px 12px; border-radius: 8px; background: var(--surface-1); font-size: 14px; margin: 10px 0; }
.co-warn-box { border: 1px solid var(--warning-text); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }