/* The guided pre-check (js/precheck.js). The designers' layout, ported, with the mockup's own
   variable names mapped to the review-ui theme tokens so it sits in the app's dark chrome and the
   three verdict tones read the same as the rest of the UI (pass = keep-green, warn = flag-amber,
   fail = vlm-red). The modal shell (.review-modal / .review-card / .review-modal-x) is the app's. */

#precheck-modal {
  --panel: var(--ink-1);
  --panel-2: var(--ink-2);
  --rule: var(--hair-strong);
  --rule-2: var(--hair);
  --ink: var(--txt-0);
  --ink-2: var(--txt-1);
  --ink-3: var(--txt-2);
  --bg: var(--ink-0);
  --accent: var(--electric);
  --accent-2: rgba(47, 128, 255, 0.14);
  --accent-3: rgba(47, 128, 255, 0.4);
  --pass: var(--keep);  --pass-bg: rgba(63, 223, 159, 0.09);
  --warn: var(--flag);  --warn-bg: rgba(255, 176, 32, 0.09);
  --fail: var(--vlm);   --fail-bg: rgba(255, 94, 58, 0.09);
}

/* a wider card than the upload modal — the questionnaire needs room */
#precheck-modal .review-card.card-lg { max-width: 900px; width: calc(100vw - 48px); }

#precheck-modal .stagehead { display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--rule-2); }
#precheck-modal .stagehead h2 { margin: 0; }
#precheck-modal .stagehead p { margin: 4px 0 0; color: var(--ink-2); max-width: 74ch; }
#precheck-modal .tiny { font-size: 12px; color: var(--ink-3); }

#precheck-modal .precheck { margin: 14px 20px 10px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; }
#precheck-modal .precheck h3 { margin: 0 0 2px; font-size: 15px; }
#precheck-modal .pchead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; }

#precheck-modal .vq { display: grid; grid-template-columns: 34px 220px minmax(0, 1fr); gap: 10px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
#precheck-modal .vq:last-child { border-bottom: 0; }
#precheck-modal .vqn { width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
  color: var(--bg); display: grid; place-items: center; font-weight: 600; }
#precheck-modal .vqt b { display: block; font-size: 14px; }
#precheck-modal .vqt .tiny { display: block; }

#precheck-modal .vopts { display: flex; flex-wrap: wrap; gap: 8px; }
#precheck-modal .vopt { display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 122px; padding: 8px 6px; border: 2px solid var(--rule); border-radius: 10px;
  background: var(--panel); font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink);
  cursor: pointer; font-family: inherit; }
#precheck-modal .vopt:hover { border-color: var(--ink-3); }
#precheck-modal .vopt.on { border-color: var(--accent); background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-3); }

#precheck-modal .vpic { position: relative; display: block; width: 100px; height: 70px; }
#precheck-modal .vpic img { width: 100px; height: 70px; object-fit: cover;
  border: 1px solid var(--rule-2); border-radius: 4px; background: #fff; display: block; }
#precheck-modal .vico { display: inline-block; width: 72px; height: 54px; color: var(--accent); }
#precheck-modal .vico svg { width: 100%; height: 100%; display: block; }
#precheck-modal .vico.big { width: 56px; height: 42px; flex-shrink: 0; }
#precheck-modal .vico.sm { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 26px;
  background: var(--panel); border-radius: 4px; padding: 1px; }
/* the icon SVGs read their stroke/fill from these, set per the mockup */
#precheck-modal { --ico: var(--accent); --ico-fill: var(--accent-2); }

/* the verdict band */
#precheck-modal .kit { margin: 0 20px 18px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--rule); }
/* an OPAQUE dark panel under a tone tint — the 0.09 tint alone sat see-through over the near-black
   page and the band's text barely read. The base is var(--panel) (= --ink-1, dark): NOT --panel-2,
   which the modal's own `--ink-2: var(--txt-1)` override resolves to the light-grey TEXT colour. */
#precheck-modal .kit.pass { background: linear-gradient(rgba(63, 223, 159, 0.16), rgba(63, 223, 159, 0.16)), var(--panel); border-color: rgba(63, 223, 159, 0.45); }
#precheck-modal .kit.warn { background: linear-gradient(rgba(255, 176, 32, 0.16), rgba(255, 176, 32, 0.16)), var(--panel); border-color: rgba(255, 176, 32, 0.45); }
#precheck-modal .kit.fail { background: linear-gradient(rgba(255, 94, 58, 0.16), rgba(255, 94, 58, 0.16)), var(--panel); border-color: rgba(255, 94, 58, 0.45); }
/* the verdict icon takes the band's tone (the icons read --ico / --ico-fill, not currentColor) */
#precheck-modal .kit.pass .vico.big { --ico: var(--pass); --ico-fill: var(--pass-bg); }
#precheck-modal .kit.warn .vico.big { --ico: var(--warn); --ico-fill: var(--warn-bg); }
#precheck-modal .kit.fail .vico.big { --ico: var(--fail); --ico-fill: var(--fail-bg); }
#precheck-modal .kith { display: flex; align-items: center; gap: 12px; }
#precheck-modal .kith > div { flex: 1; }
#precheck-modal .kith b { font-size: 15px; }
#precheck-modal .pc-go { flex-shrink: 0; }
#precheck-modal .pc-what { margin: 10px 0 0; color: var(--ink-2); max-width: 80ch; }
#precheck-modal .pc-note { margin: 10px 0 0; }
#precheck-modal .pc-await { margin: 0 20px 18px; }

/* the Standard / Beta end-to-end flow */
#precheck-modal .flow { display: flex; align-items: stretch; gap: 8px; margin: 12px 0 0;
  flex-wrap: wrap; }
#precheck-modal .fstep { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--panel); }
#precheck-modal .fstep .vico { width: 30px; height: 30px; }
#precheck-modal .fstep b { font-size: 13px; }
#precheck-modal .farrow { align-self: center; color: var(--ink-3); }

/* the Not-supported alternatives */
#precheck-modal .pc-instead { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
#precheck-modal .pc-instead li { margin: 2px 0; }

@media (max-width: 680px) {
  #precheck-modal .vq { grid-template-columns: 30px 1fr; }
  #precheck-modal .vqt { grid-column: 2; }
  #precheck-modal .vopts { grid-column: 1 / -1; }
}