/* Warfighter Genetics · preflight.css · the pre-flight check (home.md §3, app.md §6–7).
   Builds on wfg.css (.drop, .readout, .rows, .manifest, .notice, .btn, .tlink); tokens only, no new colors.
   Red stays on the one primary button, the manifest ticks and focus rings. Motion: a manifest tick draws as its
   locus is found (240ms); wfg.css makes it instant under prefers-reduced-motion. */

.pf{display:grid;gap:40px;min-width:0}
.pf [hidden]{display:none!important}
.pf-main,.pf-side{min-width:0}
@media(min-width:900px){
.pf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);row-gap:48px;align-items:start}
}

.pf-notice{margin:0 0 20px}
.pf-notice a{white-space:nowrap}

/* stage: drop zone · phone panel · reading · result, one at a time */
.pf-drop .pf-choose{justify-self:start;margin-top:16px;min-height:44px;pointer-events:none}
.pf-drop.is-focus{outline:2px solid var(--signal);outline-offset:3px}
.pf-drop.is-focus:not(:has(input:focus-visible)){outline:none}
.pf-drop.is-over{background:var(--ink-0)}
.pf-drop-note{max-width:52ch}
.pf-panel{display:grid;align-content:end;justify-items:start;gap:8px;min-height:168px;padding:24px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r)}
.pf-panel p{margin:0}
.pf-panel .h3{margin:0 0 4px}
.pf-reading{border-color:var(--fg)}
.pf-reading-title{font:600 24px/1.05 var(--f-cond);text-transform:uppercase}
.pf-reading-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-mid)}
@media(min-width:760px){.pf-panel{min-height:220px;padding:28px}.pf-reading-title{font-size:28px}}

.pf-textbtn{padding:0;background:none;border:0;font:inherit;font-weight:500;color:var(--fg);cursor:pointer;text-decoration:underline 1px;text-underline-offset:.3em;text-decoration-color:var(--fg-mid)}
.pf-textbtn:hover{text-decoration-color:currentColor}

.pf-result{padding-top:4px}
.pf-result p{max-width:56ch}
.pf-result-line{margin:0 0 16px}
.pf-result-line:focus,.pf-result-line:focus-visible{outline:none}   /* not a control: focus only carries the reader here */
.pf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:24px}
.pf-phone .pf-actions{gap:8px 12px;margin-top:12px}
@media(max-width:759px){.pf-actions .btn{width:100%;min-height:52px}}

.pf-error{margin:16px 0 0}
.pf-status{margin:0}
.pf-status:not(:empty){margin-top:12px}
.pf-kit{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.pf-kit p:last-child{margin-bottom:0}

/* readout panel */
.pf-readout .rows dd{min-width:0}
.pf-fp{padding:0;background:none;border:0;font:inherit;color:inherit;cursor:copy;text-decoration:underline dotted 1px;text-underline-offset:.25em;text-decoration-color:var(--fg-mid)}
.pf-fp:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.pf-manifest-head{max-width:none;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pf-manifest-idle{margin:8px 0 0}
.pf-manifest{margin-top:8px;padding-top:0;border-top:0}
.pf-manifest li{position:relative}
.pf-manifest li span:nth-of-type(3){min-width:0;overflow-wrap:anywhere}
.pf-manifest li::before{transform-origin:left center;animation:pf-tick .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes pf-tick{from{transform:scaleX(0)}}
.pf-legend{display:grid;gap:6px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:20px}
.pf-legend>div{display:grid;grid-template-columns:11ch minmax(0,1fr);gap:12px}
.pf-legend dt{font-weight:500}
.pf-legend dd{margin:0;font-family:var(--f-body);color:var(--fg-mid)}

/* app mode: the exact message */
.pf-message{min-width:0;margin-top:28px}
.pf-msg{margin:0;max-height:320px;overflow:auto;padding:16px 18px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);font:400 13px/21px var(--f-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
.pf-msg:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.pf-facts{margin-top:16px;max-width:560px;font:400 14px/22px var(--f-mono)}

@media print{.pf-main,.pf-message{display:none!important}.pf{display:block}}