/* styles/project-setup.css — the PROJECT SETUP checklist (25 Sep 2026, src/ProjectSetup.jsx).
   Fixed heights everywhere (invariant #20): the Overview line, the header, the one-line message and
   every row keep their size while the checks update; the list is a fixed box that scrolls inside.
   Status colours: the fixed --status-* tokens of tokens.css (no skin overrides them): white on
   --status-ok / --status-bad (>= 4.9:1), --status-on-warn on --status-warn; a fixed grey for
   Optional / On the PC (white on it 6.4:1). */
.psu, .psu-strip, .psu-section {
  --psu-green: var(--status-ok);
  --psu-red: var(--status-bad);
  --psu-grey: #5A5F66;             /* no fixed grey status token yet; no skin touches this one */
  --psu-amber: var(--status-warn);
  --psu-on: var(--status-on);
  --psu-on-warn: var(--status-on-warn);
  --psu-row: 64px;
}

/* ── status pill (fixed width: a longer word never moves the text beside it) ── */
.psu-pill {
  flex: 0 0 auto; box-sizing: border-box; width: 84px; height: 24px; line-height: 24px;
  border-radius: 12px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--psu-on); background: var(--psu-grey);
}
.psu-pill--done { background: var(--psu-green); }
.psu-pill--missing, .psu-pill--bug { background: var(--psu-red); }   /* bug: the App check (26 Sep 2026) */
.psu-pill--checking { background: var(--psu-amber); color: var(--psu-on-warn); }
.psu-pill--optional, .psu-pill--pc { background: var(--psu-grey); }
.psu-pill--skipped { background: var(--status-off); }   /* "Not needed" (25 Sep 2026) */

/* ── buttons: the app's quiet pill button, one width so nothing shifts when a label changes ── */
.psu-btn {
  flex: 0 0 auto; box-sizing: border-box; min-width: 150px; height: 32px; padding: 0 14px;
  border-radius: 16px; border: 1px solid var(--card-border); background: var(--card-bg-light);
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.psu-btn:hover:not(:disabled) { border-color: var(--nav-active); }
.psu-btn:disabled { opacity: 0.55; cursor: default; }
a.psu-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }   /* a link action (outside page) */
.psu-btn--do { background: var(--leaf-deep); border-color: var(--leaf-deep); color: var(--ink-on-accent); }
.psu-btn--quiet { min-width: 110px; }
/* "Not needed" / "Undo": one fixed slot on every row, so the buttons line up and nothing moves */
.psu-skip-slot { flex: 0 0 104px; width: 104px; display: flex; justify-content: flex-end; }
.psu-btn--skip { min-width: 0; width: 104px; padding: 0 10px; color: var(--ink-muted); }

/* ── the list ── */
.psu { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.psu-head { display: flex; align-items: center; gap: 14px; height: 40px; flex: 0 0 auto; }
.psu-count { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; min-width: 280px; }
.psu-count-num { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.psu-count-cap { font-size: 12px; color: var(--ink-muted); }
.psu-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink-muted) 25%, transparent); overflow: hidden; }
.psu-bar-fill { display: block; height: 100%; background: var(--psu-green); transition: width 300ms ease; }
.psu-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.psu-meta-txt { width: 110px; text-align: right; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.psu-msg { height: 18px; line-height: 18px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.psu-msg--err { color: var(--danger); }
.psu-list {
  box-sizing: border-box; height: calc(var(--psu-row) * 7 + 12px); overflow-y: auto; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  background: color-mix(in srgb, var(--card-bg-light) 55%, transparent);
}
.psu--modal .psu-list { height: calc(var(--psu-row) * 8 + 12px); }
.psu-pane { display: flex; flex-direction: column; }
.psu--embedded { flex: 1 1 auto; min-height: 0; }
.psu--embedded .psu-list { height: auto; flex: 1 1 auto; min-height: 0; }
.psu-row {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: var(--psu-row);
  padding: 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.psu-row:last-child { border-bottom: 0; }
.psu-row--skipped .psu-label-main, .psu-row--skipped .psu-detail { color: var(--ink-muted); }
.psu-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psu-label { display: flex; align-items: baseline; gap: 8px; height: 18px; overflow: hidden; white-space: nowrap; }
.psu-label-main { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.psu-req { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); flex: 0 0 auto; }
.psu-detail {
  font-size: 12px; line-height: 16px; height: 32px; color: var(--ink-muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.psu-note { color: var(--ink-muted); font-style: italic; }
.psu-act { flex: 0 0 288px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.psu-empty { padding: 18px 14px; font-size: 13px; color: var(--ink-muted); }

/* ── the Overview line ── */
.psu-strip {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px 0 16px;
  border-radius: 14px; flex: 0 0 auto;
}
.psu-strip-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-muted); flex: 0 0 auto; }
.psu-strip-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the Settings card ── */
.psu-section .psu-fold { display: flex; align-items: center; gap: 12px; height: 36px; margin-bottom: 8px; }
.psu-fold-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the modal ── */
.psu-modal { display: flex; flex-direction: column; gap: 10px; }

/* ── a card the checklist sent you to: lit up for a moment ── */
.psu-flash { animation: psu-flash 2.4s ease-out 1; }
@keyframes psu-flash {
  0%, 30% { box-shadow: 0 0 0 3px var(--nav-active), 0 0 18px color-mix(in srgb, var(--nav-active) 60%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .psu-flash { animation: none; outline: 3px solid var(--nav-active); } }