/* ============================================================
   ProjectTelemetry — Quality control (three-phase)
   assets/quality.css

   Layout comes from the shared .co-* / .cd-* families, and the tab strip,
   guide shelf, alert strip and disclaimer are shared with Safety
   (safety.css) — the two departments read the same way on purpose.
   Only what a three-phase programme needs lives here.
   ============================================================ */

/* ── The three phases, explained ─────────────────────────── */
.qc-phases { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.qc-phase { flex:1 1 0; min-width:210px; border:1px solid var(--bd); border-radius:11px; padding:12px 14px;
  background:var(--bg2); display:flex; flex-direction:column; gap:5px; }
.qc-phase.preparatory { border-top:3px solid #6366F1; }
.qc-phase.initial     { border-top:3px solid #0EA5E9; }
.qc-phase.follow_up   { border-top:3px solid #16A34A; }
.qc-phase-hd { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.qc-phase-n { font-size:13.5px; font-weight:700; color:var(--ink); }
.qc-phase-c { font-size:19px; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.qc-phase-of { font-size:12px; font-weight:600; color:var(--ink-faint); }
.qc-phase-w { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); }
.qc-phase-p { font-size:12px; color:var(--ink-soft); line-height:1.5; flex:1; }
.qc-phase-f { font-size:11px; color:var(--ink-faint); line-height:1.45; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.qc-phase-fail { flex:0 0 auto; color:#B91C1C; font-weight:700; }

.qc-phase-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.qc-phase-pill.preparatory { background:rgba(99,102,241,.12); color:#4F46E5; }
.qc-phase-pill.initial     { background:rgba(14,165,233,.12); color:#0284C7; }
.qc-phase-pill.follow_up   { background:rgba(22,163,74,.12); color:#15803D; }

/* ── What keeps failing ──────────────────────────────────── */
.qc-fails { display:flex; flex-direction:column; gap:7px; }
.qc-fail { display:grid; grid-template-columns:1fr 74px 30px; align-items:center; gap:10px; }
.qc-fail-d { font-size:12px; color:var(--ink-soft); line-height:1.4; }
.qc-fail-t { height:7px; border-radius:4px; background:var(--bg2); overflow:hidden; }
.qc-fail-b { display:block; height:100%; border-radius:4px; background:#DC2626; }
.qc-fail-c { text-align:right; font-size:12px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ── Where the features are ──────────────────────────────── */
.qc-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--bg2); }
.qc-seg.planned     { background:var(--ink-faint); opacity:.35; }
.qc-seg.preparatory { background:#6366F1; }
.qc-seg.initial     { background:#0EA5E9; }
.qc-seg.follow_up   { background:#F59E0B; }
.qc-seg.complete    { background:#16A34A; }
.qc-seg.on_hold     { background:var(--ink-faint); }
.qc-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.qc-leg { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; cursor:pointer;
  font-size:11.5px; color:var(--ink-soft); padding:2px 0; }
.qc-leg:hover { color:var(--accent); }
.qc-leg b { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; }
.qc-sw { width:9px; height:9px; border-radius:2px; display:inline-block; }
.qc-sw.planned     { background:var(--ink-faint); opacity:.35; }
.qc-sw.preparatory { background:#6366F1; }
.qc-sw.initial     { background:#0EA5E9; }
.qc-sw.follow_up   { background:#F59E0B; }
.qc-sw.complete    { background:#16A34A; }
.qc-sw.on_hold     { background:var(--ink-faint); }

/* ── Feature rows ────────────────────────────────────────── */
.qc-dots { white-space:nowrap; }
.qc-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px;
  background:transparent; border:1.5px solid var(--bd); }
.qc-dot.preparatory.on { background:#6366F1; border-color:#6366F1; }
.qc-dot.initial.on     { background:#0EA5E9; border-color:#0EA5E9; }
.qc-dot.follow_up.on   { background:#16A34A; border-color:#16A34A; }

.co-pill.qc-planned     { background:var(--bg2); color:var(--ink-faint); border-color:var(--bd); }
.co-pill.qc-preparatory { background:rgba(99,102,241,.12); color:#4F46E5; }
.co-pill.qc-initial     { background:rgba(14,165,233,.12); color:#0284C7; }
.co-pill.qc-follow_up   { background:rgba(245,158,11,.16); color:#B45309; }
.co-pill.qc-complete    { background:#16A34A; color:#fff; }
.co-pill.qc-on_hold     { background:var(--bg2); color:var(--ink-faint); border-color:var(--bd); }

.co-pill.qci-open   { background:rgba(217,119,6,.12); color:#B45309; }
.co-pill.qci-pass   { background:#16A34A; color:#fff; }
.co-pill.qci-fail   { background:rgba(220,38,38,.10); color:#B91C1C; }
.co-pill.qci-closed { background:var(--bg2); color:var(--ink-soft); border-color:var(--bd); }

.qc-deflink { border:none; background:rgba(220,38,38,.10); color:#B91C1C; font-weight:700; font-size:12px;
  border-radius:999px; padding:2px 9px; cursor:pointer; font-variant-numeric:tabular-nums; }
.qc-deflink:hover { background:rgba(220,38,38,.18); }
.qc-prog { min-width:130px; }
.qc-signed { color:#16A34A; font-size:13px; vertical-align:middle; }
.qc-signed-by { font-size:11.5px; color:#15803D; display:inline-flex; align-items:center; gap:4px; margin-left:6px; }

/* ── The checklist ───────────────────────────────────────── */
.qc-check-hd { padding-bottom:12px; border-bottom:1px solid var(--bd); }
.qc-check-sub { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:8px; }
.qc-att { font-size:11.5px; color:var(--ink-faint); margin-top:6px; display:flex; align-items:center; gap:5px; }

.qc-items { width:100%; border-collapse:collapse; font-size:13px; }
.qc-items th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--bd); }
.qc-items td { padding:7px 8px; border-bottom:1px solid var(--bd); vertical-align:middle; }
.qc-items tbody tr:last-child td { border-bottom:none; }
.qc-item.fail td { background:rgba(220,38,38,.05); }
.qc-item.pass .qc-idesc { color:var(--ink-soft); }
.qc-item.na td { opacity:.55; }
.qc-req { width:22px; color:#DC2626; font-size:9px; vertical-align:top; padding-top:12px; }
.qc-idesc { line-height:1.5; color:var(--ink); }
.qc-iresp select, .qc-note { width:100%; padding:5px 7px; border:1px solid var(--bd); border-radius:7px;
  background:var(--white); color:var(--ink); font-size:12.5px; font-family:inherit; }
.qc-note[readonly] { background:var(--bg2); color:var(--ink-soft); }
.qc-resp-ro { font-size:12px; font-weight:650; }
.qc-resp-ro.pass { color:#15803D; }
.qc-resp-ro.fail { color:#B91C1C; }
.qc-resp-ro.na, .qc-resp-ro.pending { color:var(--ink-faint); }
.qc-deficiency { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 7px; border-radius:5px;
  background:rgba(220,38,38,.08); color:#B91C1C; font-size:10.5px; font-weight:700; white-space:nowrap; }
.qc-raise { margin-left:8px; }

.qc-phase-intro { padding:12px 14px; border:1px solid var(--bd); border-radius:10px; background:var(--bg2); margin-bottom:14px; }
.qc-phase-intro b { font-size:13.5px; color:var(--ink); }
.qc-phase-intro > div { font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:5px; }
.qc-phase-who { font-size:11.5px; color:var(--ink-faint); display:flex; align-items:center; gap:5px; }

/* ── Seeding the feature list ────────────────────────────── */
.qc-seed-note { font-size:12px; color:var(--ink-soft); line-height:1.55; margin:12px 0 10px; }
.qc-seed-note b { color:var(--ink); }
.qc-seed { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:6px; max-height:44vh; overflow-y:auto; padding-right:4px; }
.qc-seed-i { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--bd); border-radius:9px;
  cursor:pointer; background:var(--white); font-size:12.5px; }
.qc-seed-i:hover { border-color:var(--accent); }
.qc-seed-i input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; }
.qc-seed-i b { font-weight:600; color:var(--ink); display:block; }
.qc-seed-s { font-size:10.5px; color:var(--ink-faint); }

@media (max-width:900px) {
  .qc-phases { display:grid; grid-template-columns:1fr; }
  .qc-fail { grid-template-columns:1fr 52px 26px; }
}