/* Warfighter Genetics · home.css · homepage only (src/pages/index.html). Adds only what wfg.css lacks.
   Tokens and components come from wfg.css. Red stays on the hero button and focus rings; nothing here adds red. */

/* ---------------------------------------------------------------- 0 · Hero */
.home-hero{--hero-x:58%;--hero-y:40%;--hero-x-m:64%}
.home-hero .hero-sub{max-width:54ch;color:var(--text-hi)}
.hero-foot{align-items:flex-end}
.hero-foot-l{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero-foot-l .hero-pause{margin-left:-1px}
/* site.js un-hides the control after load; reserve its box so the hero text never shifts (CLS) */
.hero-foot-l .hero-pause[hidden]{display:inline-block;visibility:hidden}
@media(max-width:759px){
.home-hero .hero-body{padding-block:32px 28px}
.home-hero h1{margin-bottom:20px}
.home-hero .hero-sub{font-size:17px;line-height:26px}
.home-hero .hero-actions{gap:4px 28px;margin-top:28px}
}

/* ---------------------------------------------------------------- shared */
.page-home main p,.page-home main li,.page-home main dd{text-wrap:pretty}
/* Journal names on the homepage are set upright, as on a datasheet: the page then never fetches the italic face
   while the first screen is loading (it is the only use of it here). */
.page-home main i{font-style:normal}

/* ---------------------------------------------------------------- 1 · Fig. 1 · Instrument (dial.js mounts here) */
.fig1{margin-top:44px}
.fig1:not(.wfg-dial){min-height:min(980px,calc(100vw - 2*var(--m) + 420px))}
@media(min-width:900px){.fig1{margin-top:56px}}

/* ---------------------------------------------------------------- 2 · Fig. 2 · One page of a readout
   The page is renderer output (its own scoped .ro styles travel with it). Here: reduced scale and callouts 1-5,
   drawn on the renderer's hooks for the first locus on the page. Callout badges are the site's one annotation mark
   (filled squares), so they never read as the outlined grade stamps. The figure ends where the page's content ends,
   and its notes sit under it as a legend. */
.fig2{margin:40px 0 0}
.fig2-grid{display:grid;gap:28px}
.fig2-page{min-width:0}
.fig2-ro{--z:1;max-width:816px;zoom:var(--z)}
.fig2-ro .sheet{margin:0}
.fig2-ro .ro-sheet{min-height:0}
/* zoom scales outlines too: keep the focus ring at the site's 2px / 3px */
.fig2-ro :focus-visible{outline-width:calc(2px / var(--z));outline-offset:calc(3px / var(--z))}
.fig2-ro .sheet-head p:first-child::before,
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=genotype])::after,
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) .locus-head::after,
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=matters])::after,
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=wont])::after,
.fig2-notes .callouts li::before{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:var(--r);background:var(--fg);color:var(--bg);font:500 11px/1 var(--f-mono);letter-spacing:0;text-transform:none;vertical-align:middle;border:0}
.fig2-ro .sheet-head p:first-child::before{content:"1";content:"1" / "";margin-right:8px}
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=genotype])::after{content:"2";content:"2" / "";margin-left:8px}
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) .locus-head::after{content:"3";content:"3" / "";flex:none;align-self:center;margin-left:10px}
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=matters])::after{content:"4";content:"4" / "";margin-left:8px}
.fig2-ro .ro-locus:nth-child(1 of .ro-locus) dt:has(+ dd[data-callout=wont])::after{content:"5";content:"5" / "";margin-left:8px}
.fig2-notes{--fg:var(--text-hi);--bg:var(--ink-0)}
.fig2-notes .callouts li{font-size:15px;line-height:23px}
.fig2-notes .callouts li::before{margin-top:2px}
.fig2-notes .callouts b{font-weight:500;color:var(--text-hi)}
.fig2-notes .callouts li span{color:var(--text-mid)}
.fig2-notes .callouts li:last-child{border-bottom:1px solid var(--line)}
.fig2-cap{margin:18px 0 6px;font-size:12px;line-height:20px;color:var(--text-mid)}
/* reduced scale: the page keeps its own proportions (816px letter width), drawn as large as the column allows */
@media(min-width:760px){.fig2-ro{--z:.83}.fig2-notes .callouts{columns:2;column-gap:calc(var(--gut) * 2)}.fig2-notes .callouts li{break-inside:avoid}}
@media(min-width:1000px){.fig2-ro{--z:.9}}
@media(min-width:1100px){.fig2-ro{--z:.94}}
@media(min-width:1200px){.fig2-ro{--z:.96}}
@media(min-width:1300px){.fig2{margin-top:56px}.fig2-notes{max-width:816px}}

/* ---------------------------------------------------------------- 3 · Fig. 3 · Pre-flight (mount) */
.fig3{margin-top:40px}
.fig3:not(:has(.pf, [class*="pf-"])){min-height:420px}
@media(min-width:900px){.fig3{margin-top:56px}}

/* ---------------------------------------------------------------- 4 · Fig. 4 · The selection equation */
.eq{margin:40px 0 0}
.eq-bars{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.eq-row{display:grid;gap:10px 0;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.eq-k{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:0}
.eq-term{font:600 26px/1 var(--f-cond);letter-spacing:.01em;text-transform:uppercase;color:var(--text-hi)}
.eq-role{font:400 13px/20px var(--f-mono);color:var(--text-mid)}
.eq-bar{display:block;width:100%;height:22px;overflow:visible}
.eq-bar *{vector-effect:non-scaling-stroke}
.eq-fill{fill:var(--rule);stroke:var(--text-mid);stroke-width:1}
.eq-open{fill:none;stroke:var(--text-mid);stroke-width:1;stroke-dasharray:3 4}
.eq-base{fill:none;stroke:var(--text-hi);stroke-width:1}
.eq-grad{fill:none;stroke:var(--text-hi);stroke-width:1}
.eq-line{margin:0;font-size:15px;line-height:23px;color:var(--text-mid)}
.eq-cap{margin:16px 0 0;font-size:12px;line-height:20px;color:var(--text-mid)}
.eq-body{margin-top:40px}
.eq-body .lede{color:var(--text-hi)}
@media(min-width:900px){
.eq{margin-top:56px}
.eq-row{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--gut);row-gap:12px;padding:26px 0 26px}
.eq-k{grid-column:1/4;grid-row:1/3;flex-direction:column;align-items:flex-start;gap:8px}
.eq-bar{grid-column:4/11;grid-row:1;margin-top:3px}
.eq-line{grid-column:4/11;grid-row:2}
.eq-term{font-size:30px}
.eq-cap{margin-left:calc((100% - 9*var(--gut))*.3 + 3*var(--gut))}
.eq-body{margin-top:56px}
}

/* ---------------------------------------------------------------- 5 · Specification and limits */
.ds{margin-top:40px}
.ds-tbl caption{font:500 12px/1.5 var(--f-mono);letter-spacing:.02em;text-transform:none;color:var(--fg)}
@media(min-width:760px){.ds-tbl tbody th{width:22%}.ds-tbl td.mono{width:30%}}
/* phones: no repeated Value / Note labels; the value in mono, its note beneath it */
@media(max-width:759px){
.ds-tbl td[data-label]{display:block}
.ds-tbl td[data-label]::before{display:none}
.ds-tbl td.mono{font-size:16px;line-height:24px}
.ds-tbl td:not(.mono){margin-top:2px;font-size:14px;line-height:21px;color:var(--fg-mid)}
}
.ds-notes{display:grid;gap:0 40px;margin-top:36px}
.ds-note{padding:18px 0 6px;border-top:1px solid var(--fg)}
.ds-note p{font-size:15px;line-height:24px}
.ds-note a{overflow-wrap:anywhere}
.ds-k{margin:0 0 10px;font:600 15px/1.1 var(--f-cond);letter-spacing:.08em}
.ds-not{display:grid;margin:0 0 16px;padding:0;list-style:none;font-size:15px;line-height:22px}
.ds-not li{padding:7px 0 8px;border-bottom:1px solid var(--line)}
.ds-not li:first-child{padding-top:0}
.ds-link{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;color:var(--text-mid)}
@media(min-width:900px){
.ds{margin-top:56px}
.ds-notes{grid-template-columns:1fr 1fr;grid-template-areas:"lim not" "src not" "src ind";align-items:start}
.ds-note:nth-child(1){grid-area:lim}.ds-note:nth-child(2){grid-area:not}.ds-note:nth-child(3){grid-area:src}.ds-note:nth-child(4){grid-area:ind}
}

/* ---------------------------------------------------------------- 6 · Intake */
.intake{display:grid;gap:8px var(--gut);margin-top:40px}
.intake-fields{min-width:0}
.intake .field{margin-bottom:28px}
.intake-pipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 20px}
.intake .hint{max-width:56ch}
.intake select[aria-invalid=true]{border-color:var(--text-hi)}
.field-err{margin:2px 0 0;padding-left:12px;border-left:2px solid var(--text-hi);font-size:15px;line-height:22px;font-weight:500;color:var(--text-hi)}
.intake-out{min-width:0;padding-top:22px;border-top:1px solid var(--line)}
.intake-status:not(:empty){margin-bottom:0}
.intake-weeks{margin:0 0 20px;font-size:17px;line-height:26px}
.intake-weeks .mono{font-size:17px;font-weight:500;color:var(--text-hi)}
.intake-letter{margin:0 0 20px}
.intake-letter p,.intake-out .notice p{margin:0 0 6px}
.intake-letter p:last-child,.intake-out .notice p:last-child{margin-bottom:0}
.intake-out .notice{margin:0 0 20px}
.intake-lines{margin:28px 0 0;padding:0;list-style:none;font-size:14px;line-height:22px;color:var(--text-mid)}
.intake-lines li{padding:9px 0 10px;border-top:1px solid var(--line)}
.intake-lines a{color:var(--text-hi)}
@media(min-width:900px){
.intake{grid-template-columns:repeat(10,minmax(0,1fr));margin-top:56px}
.intake-fields{grid-column:1/6}
.intake-out{grid-column:6/11;padding-top:0;border-top:0;padding-left:var(--gut);border-left:1px solid var(--line)}
}

/* ---------------------------------------------------------------- 7 · Questions */
.qa{margin-top:28px}
.qa .qa-row:last-of-type{border-bottom:1px solid var(--line)}
.qa-row{scroll-margin-top:calc(var(--nav) + 16px)}
.qa-row p{color:var(--text-mid)}
.qa-all{margin:16px 0 0}

/* ---------------------------------------------------------------- print: keep the documents, drop the instruments */
@media print{
.fig1,.fig3,#intake,.home-hero{display:none!important}
.fig2-ro{--z:1}
}