/* Pre-flight shell — the one-button page frame (header help, picker, progress,
 * error, Data health). The run's own cards are styled by preflight.css. */

/* `hidden` must win over any display rule (the step list is flex in preflight.css). */
#pf-wrap [hidden] { display: none !important; }

/* ── header: three short bullets, small secondary clocks ───────────────── */
.pf-help {
  margin: 4px 0 0;
  padding-left: 18px;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}
.pf-help b { color: var(--text); }

.pf-clocks-small { gap: 8px; opacity: 0.8; }
.pf-clocks-small .pf-clock { min-width: 0; padding: 6px 10px; gap: 1px; }
.pf-clocks-small .pf-clock-time { font-size: 15px; font-weight: 600; }
.pf-clocks-small .pf-clock-date,
.pf-clocks-small .pf-clock-label { font-size: 10.5px; }

/* ── picker: one choice, one big button ────────────────────────────────── */
.pf-more {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline dotted;
}
.pf-more:hover { color: var(--selected); }

.pf-actions { display: flex; gap: 10px; flex-basis: 100%; align-items: center; }
#pf-run.pf-run-big { padding: 14px 26px; font-size: 16px; }

/* ── progress: one bar + one plain line ────────────────────────────────── */
#pf-progress { margin-top: 16px; max-width: 640px; }
.pf-bar {
  height: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#pf-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--selected);
  transition: width 0.6s ease;
}
#pf-bar-fill.pf-bar-done { background: var(--up, var(--selected)); }
#pf-bar-fill.pf-bar-fail { background: var(--down); }
#pf-progress #pf-status { margin: 8px 0 0; font-size: 14px; color: var(--text); }
#pf-progress #pf-status.pf-fail { color: var(--down); }

/* ── a failed run: one sentence, Try again, the log folded ─────────────── */
#pf-error {
  margin-top: 12px;
  max-width: 640px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--down) 45%, transparent);
  background: color-mix(in srgb, var(--down) 7%, transparent);
  border-radius: 4px;
  font-size: 13px;
}
#pf-error-msg { margin: 0 0 8px; color: var(--text); }
#pf-retry {
  background: var(--selected);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
}
#pf-error-tech { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
#pf-error-log { max-height: 300px; overflow: auto; white-space: pre-wrap; }

/* ── Data health, folded at the bottom ─────────────────────────────────── */
#pf-health {
  margin-top: 28px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
#pf-health summary { cursor: pointer; color: var(--text-dim); }
#pf-health #pf-probe { padding: 6px 14px; font-size: 13px; }