/* Warfighter Genetics · pages.css · content pages: specification, pipelines, questions, aar-001, privacy, terms,
   404, specimen. Loaded per page through front-matter head_extra, after wfg.css. Uses wfg.css tokens and
   components; adds only what those pages need. No color outside the tokens; red only on plotted ticks. */

/* ---------------------------------------------------------------- page head */
main>.sec:first-child>.wrap{border-top:0}
main>.sec:first-child>.wrap::before,main>.sec:first-child>.wrap::after{display:none}
.phead>.wrap{padding-block:40px 56px}
.phead h1{max-width:12.5em;margin-bottom:22px}
.docline{margin:0 0 18px;max-width:none;font:400 12.5px/1.5 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--fg-mid)}
.phead .lede{margin-bottom:16px}
.phead .lede:last-child{margin-bottom:0}
.phead h2.label{margin:36px 0 8px}
@media(min-width:900px){.phead>.wrap{padding-block:64px 80px}}

/* section text rhythm */
.sec h2+p,.sec h2+.lede{margin-top:4px}
.sec .h4,.sec h3.h3{margin-top:40px}
.sec .h4:first-child,.sec h2+.h4{margin-top:0}
.sec h3:not(.h4):not(.locus-gene){margin-top:40px}
.sec .qa-row h3{margin-top:0}
.statements{margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.stmt{margin-top:16px;max-width:64ch}
.statements p{margin:0 0 6px;font-size:14px;line-height:22px;color:var(--fg-mid)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin:28px 0 0}
.actions .tlink{margin-right:4px}
.src{font-size:12.5px}
.tbd{text-decoration:underline dotted 1px;text-underline-offset:3px;text-decoration-color:currentColor}
.cl-approval{margin-top:28px}
.aar-illustration{margin:0 0 24px;max-width:64ch}

/* ---------------------------------------------------------------- jump links */
.jump ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.jump li{border-bottom:1px solid var(--line)}
.jump a{display:flex;align-items:center;min-height:44px;font:500 13px/1.2 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg-mid)}
.jump a:hover{color:var(--fg);text-decoration:underline 1px;text-underline-offset:6px}
@media(min-width:760px){.jump ul{display:flex;flex-wrap:wrap;column-gap:32px;border-bottom:1px solid var(--line)}.jump li{border-bottom:0}}

/* ---------------------------------------------------------------- lists */
.rules{margin:20px 0 0;padding:0;list-style:none}
.rules li{position:relative;max-width:64ch;padding:12px 0 12px 30px;border-top:1px solid var(--line)}
.rules li::before{content:"";position:absolute;left:0;top:24px;width:14px;height:1px;background:var(--fg-mid)}
/* Plain lists from the copy decks use the same hairline dash, never the browser's disc bullet. */
.sec ul:not([class]){padding-left:0;list-style:none}
.sec ul:not([class])>li{position:relative;padding-left:28px}
.sec ul:not([class])>li::before{content:"";position:absolute;left:0;top:.82em;width:14px;height:1px;background:var(--fg-mid)}

/* ---------------------------------------------------------------- specification */
/* Datasheet head: key/value rows in mono, sentence case (brand names keep their own case), no cells. */
.strip{display:grid;column-gap:48px;margin:0;border-top:1px solid var(--fg)}
.strip>div{display:flex;align-items:baseline;gap:16px;min-width:0;padding:9px 0 10px;border-bottom:1px solid var(--line)}
.strip dt{flex:none;font:400 13px/1.5 var(--f-mono);color:var(--fg-mid)}
.strip dd{flex:1 1 auto;min-width:0;margin:0;text-align:right;font:500 14px/1.5 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
@media(min-width:760px){.strip{grid-template-columns:1fr 1fr}}

.defs{display:grid;margin:24px 0 0}
.defs>div{display:grid;gap:4px 24px;padding:14px 0;border-top:1px solid var(--line)}
.defs dt{padding-top:2px;font:500 13px/1.4 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.defs dd{margin:0;max-width:64ch}
@media(min-width:760px){.defs>div{grid-template-columns:200px minmax(0,1fr)}}

/* marker datasheet: one row per position, printed in full. Its rail sits above the full-width paper, so it
   must not stick (a sticky rail would slide over the paper while scrolling). */
.sec-datasheet .rail{position:static;margin-bottom:16px}
.mk-sheet{padding-inline:18px}
.mk caption{padding-bottom:18px;color:var(--fg)}
.mk tbody tr{border-top:1px solid var(--fg)}
.mk tbody tr:last-child{border-bottom:1px solid var(--fg)}
.mk .grade{width:28px;height:28px;font-size:16px}
.gts{margin:0}
.gts>div{padding:10px 0 12px}
.gts>div+div{border-top:1px dotted var(--ctl-c)}
.gts>div:first-child{padding-top:0}
.gts>div:last-child{padding-bottom:0}
.gts dt{font:500 14px/22px var(--f-body)}
.gts dt .mono{font-size:14px;font-weight:500;letter-spacing:.04em}
.gts dd{margin:3px 0 0;font-size:15px;line-height:23px;max-width:66ch}
.cites{margin:0;padding:0;list-style:none}
.cites li{margin:0 0 6px;font-size:14px;line-height:21px}
.cites li:last-child{margin-bottom:0}
.doi{font-family:var(--f-mono);font-size:.88em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mk-cov .mono{font-size:13px;line-height:20px}
.mk-wont,.mk-letters{font-size:14.5px;line-height:22px}
/* long cells: label above value instead of beside it (beats wfg.css .kv rules below 1100px) */
@media(max-width:1099px){
.mk-sheet .mk td.mk-say[data-label],.mk-sheet .mk td.mk-wont[data-label],.mk-sheet .mk td.mk-letters[data-label],.mk-sheet .mk td.mk-src[data-label],.mk-sheet .mk td.mk-cov[data-label]{display:block;padding:10px 0 4px}
.mk-sheet .mk td.mk-say[data-label]::before,.mk-sheet .mk td.mk-wont[data-label]::before,.mk-sheet .mk td.mk-letters[data-label]::before,.mk-sheet .mk td.mk-src[data-label]::before,.mk-sheet .mk td.mk-cov[data-label]::before{display:block;width:auto;margin-bottom:6px}
.mk-sheet .mk tr{padding:18px 0 16px;border-bottom:0}
.mk-sheet .mk tbody th{font-size:22px;line-height:1}
}
@media(min-width:760px){.mk-sheet{padding-inline:36px}}
@media(min-width:1100px){
.mk-sheet{padding:40px 44px 44px}
.mk,.mk caption,.mk tbody{display:block}
.mk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mk tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto auto auto 1fr;column-gap:24px;row-gap:16px;padding:22px 0 26px}
.mk th,.mk td{padding:0;border:0}
.mk td[data-label]::before{content:attr(data-label);display:block;margin-bottom:6px;font:500 11.5px/1.3 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mid)}
.mk .mk-gene{grid-column:1/3;grid-row:1;align-self:end;font-size:28px;line-height:1;letter-spacing:.02em;overflow-wrap:anywhere}
.mk .mk-rsid{grid-column:3/5;grid-row:1}
.mk .mk-var{grid-column:5/8;grid-row:1}
.mk .mk-grade{grid-column:8/9;grid-row:1}
.mk .mk-map{grid-column:9/13;grid-row:1}
.mk .mk-say{grid-column:1/8;grid-row:2/7;padding-top:14px;border-top:1px solid var(--line)}
.mk .mk-cov{grid-column:8/13;grid-row:2;padding-top:14px;border-top:1px solid var(--line)}
.mk .mk-wont{grid-column:8/13;grid-row:3}
.mk .mk-letters{grid-column:8/13;grid-row:4}
.mk .mk-src{grid-column:8/13;grid-row:5}
.mk-rsid,.mk-var,.mk-map{font-size:15px;line-height:22px}
}

.grades-tbl th:first-child{width:72px}
/* Fixed count column on wide screens only: on phones the row is a label | value pair (wfg.css .kv), and a fixed
   150px cell squeezed the "In rev. 1.0" label into its value ("IN REV. 1.0None"). */
@media(min-width:760px){.grades-tbl td:last-child{width:150px;white-space:nowrap}}
.grades-tbl .grade{vertical-align:middle}

.cl-entry{margin-top:28px;padding-top:18px;border-top:1px solid var(--fg)}
.cl-entry .docline{margin-bottom:10px}
.cl-entry h3{margin-top:0}
.cl-group h4{margin:36px 0 12px}
.cl-group ul{margin:0;padding-left:1.15em}
.cl-group li{max-width:64ch;margin:0 0 12px}

.refs{margin:12px 0 0;padding:0;list-style:none}
.refs li{padding:9px 0 10px;border-top:1px solid var(--line);font-size:15px;line-height:23px}
.refs .doi{margin-right:6px}
.ref-loci{font:400 12.5px/1.6 var(--f-mono);color:var(--fg-mid)}
.ref-loci a{color:inherit;white-space:nowrap}

/* ---------------------------------------------------------------- pipelines */
.pipe .lede{margin-bottom:12px}
.facts{margin:0 0 6px;max-width:none;font:400 13.5px/1.55 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.facts+.hint{margin-bottom:0}
.produces{margin-top:20px}
.tbl-wrap{margin:20px 0 28px}
.phases .ph-label{display:block;font:500 13px/1.4 var(--f-mono);letter-spacing:0;text-transform:none}
.phases .ph-name{display:block;margin-top:4px}
.phases td.mono{white-space:nowrap}
@media(min-width:1100px){
.phases th:first-child{width:21%}
.phases td:nth-child(2){width:8%}
.phases:has(thead th:nth-child(5)) td:nth-child(3){width:33%}
.phases:has(thead th:nth-child(5)) td:nth-child(4){width:19%}
.phases:not(:has(thead th:nth-child(5))) td:nth-child(4){width:24%}
}
.loci{position:relative;padding-left:26px}
.loci::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1px;background:var(--signal)}
.srcs{margin:12px 0 0;padding:0;list-style:none}
.srcs li{padding:8px 0 9px;border-top:1px solid var(--line);font-size:15px;line-height:23px}
.src-host{margin-left:4px;font:400 12px/1 var(--f-mono);color:var(--fg-mid);white-space:nowrap}
.pipe .actions{margin-top:32px}
.pipe ul:not(.srcs){max-width:64ch}

/* ---------------------------------------------------------------- AAR-001, specimen facts */
.kvbox{margin-top:28px}
/* AAR record sheet: Planned / Happened and Sustain / Improve as ruled rows, not a section each */
.aar-sheet{border-top:1px solid var(--fg)}
.aar-row{display:grid;gap:8px 32px;padding:22px 0 24px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav) + 16px)}
.sec .aar-row .aar-k{margin:0;font:600 22px/1.1 var(--f-cond);letter-spacing:.02em;text-transform:uppercase}
.aar-v>:last-child{margin-bottom:0}
.sec .aar-v .h4{margin:22px 0 10px}
.sec .aar-v .h4:first-child{margin-top:2px}
@media(min-width:760px){.aar-row{grid-template-columns:150px minmax(0,1fr)}.sec .aar-row .aar-k{padding-top:3px}}
.kvbox .rows>div{display:grid;grid-template-columns:minmax(8.5em,36%) minmax(0,1fr);gap:12px;padding:6px 0}
.kvbox .rows dt{display:block}
.kvbox .rows dt::after{display:none}
.kvbox .rows dd{text-align:left}
.col-aside .kvbox{margin-top:0}
@media(min-width:900px){.col-aside .kvbox .rows>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:6px 0 8px}}
/* column widths only while it is a table; below 760px wfg.css turns .kv rows into key/value blocks */
@media(min-width:760px){.aar-tbl th:first-child{width:24%}.aar-tbl td:nth-child(2){width:28%}}
.aar-tbl tbody th{font:500 13.5px/21px var(--f-mono);letter-spacing:0;text-transform:none}
.close-line{font-size:clamp(20px,1.8vw,24px);line-height:1.45}

/* ---------------------------------------------------------------- legal */
.legal-page .paper{margin-top:8px}
.legal-summary{margin:24px 0 12px;padding:20px 22px 22px;border:1px solid var(--fg);border-radius:var(--r)}
.legal-summary .label{margin:0 0 10px;color:var(--fg)}
.legal-summary ul{margin:0;padding-left:1.15em}
.legal-summary li{margin:0 0 8px;max-width:66ch}
.legal-summary li:last-child{margin-bottom:0}
/* phones: no box inside the paper (it left a 240px text column); a rule under the summary instead */
@media(max-width:759px){.legal-summary{padding:0 0 18px;border:0;border-bottom:1px solid var(--fg);border-radius:0}}
.legal ul,.legal ol{max-width:68ch}
.legal li{margin-bottom:8px}
.legal .tbl{margin:12px 0 22px;font-size:14.5px;line-height:22px}
.legal .tbl tbody th{font:500 15px/22px var(--f-body);letter-spacing:0;text-transform:none}
@media(max-width:759px){.legal .kv tbody th{font-size:16px;line-height:23px}}
.legal .addr{line-height:26px}
.legal-sec,.legal-h3{scroll-margin-top:calc(var(--nav) + 16px)}
.legal .legal-h3{margin:32px 0 12px}
.legal-index{display:none}
@media(min-width:900px){
.legal-index{display:block;position:sticky;top:calc(var(--nav) + 28px);align-self:start;margin-top:4px}
.legal-index ol{margin:0;padding:0;list-style:none;counter-reset:li}
.legal-index li{counter-increment:li;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:baseline}
.legal-index li::before{content:counter(li);font:400 11.5px/1 var(--f-mono);color:var(--text-mid)}
.legal-index a{display:block;padding:4px 0;font-size:14px;line-height:20px;color:var(--text-mid);text-decoration:none}
.legal-index a:hover{color:var(--text-hi);text-decoration:underline 1px}
}
@media(min-width:900px) and (max-height:760px){.legal-index{position:static}}

/* ---------------------------------------------------------------- 404 */
/* One red button per screen: the 404's own "Start pre-flight check" is always in its first screen on wide
   viewports, so the identical nav button is drawn as an outline there from the first paint (site.js does the
   same on every page while a primary is on screen). The nav keeps its shape. */
@media(min-width:1120px){.page-404 .nav .nav-menu .btn,.page-404 .nav .nav-menu .btn:hover{background:transparent;border-color:var(--ctl);color:var(--text-hi)}}
.nf-links{display:grid;margin:28px 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.nf-links li{border-bottom:1px solid var(--line)}
.nf-links a{display:flex;align-items:center;min-height:48px;font:600 20px/1.1 var(--f-cond);letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
.nf-links a:hover{text-decoration:underline 1px;text-underline-offset:6px}
@media(min-width:760px){.nf-links{grid-template-columns:1fr 1fr;column-gap:24px}}

/* ---------------------------------------------------------------- specimen */
.steps{margin:20px 0 24px;padding:0;list-style:none}
/* The order of a locus block, drawn with the hairline dash: numbered badges are kept for the homepage figure's
   callouts, so one number never means two things on the site. */
.steps li{position:relative;max-width:68ch;padding:12px 0 12px 30px;border-top:1px solid var(--line)}
.steps li::before{content:"";position:absolute;left:0;top:24px;width:14px;height:1px;background:var(--fg-mid)}
.print-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 28px}
.print-bar .hint{max-width:60ch}
.specimen-pages{display:grid;gap:32px;justify-items:start}
.specimen-pages>*{width:100%;max-width:816px}
/* page count in the doc line, from the renderer's sheets (no script) */
body:has(.specimen-pages .sheet:nth-child(1 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 1 page"}
body:has(.specimen-pages .sheet:nth-child(2 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 2 pages"}
body:has(.specimen-pages .sheet:nth-child(3 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 3 pages"}
body:has(.specimen-pages .sheet:nth-child(4 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 4 pages"}
body:has(.specimen-pages .sheet:nth-child(5 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 5 pages"}
body:has(.specimen-pages .sheet:nth-child(6 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 6 pages"}
body:has(.specimen-pages .sheet:nth-child(7 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 7 pages"}
body:has(.specimen-pages .sheet:nth-child(8 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 8 pages"}
body:has(.specimen-pages .sheet:nth-child(9 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 9 pages"}
body:has(.specimen-pages .sheet:nth-child(10 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 10 pages"}
body:has(.specimen-pages .sheet:nth-child(11 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 11 pages"}
body:has(.specimen-pages .sheet:nth-child(12 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 12 pages"}
body:has(.specimen-pages .sheet:nth-child(13 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 13 pages"}
body:has(.specimen-pages .sheet:nth-child(14 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 14 pages"}
body:has(.specimen-pages .sheet:nth-child(15 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 15 pages"}
body:has(.specimen-pages .sheet:nth-child(16 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 16 pages"}
body:has(.specimen-pages .sheet:nth-child(17 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 17 pages"}
body:has(.specimen-pages .sheet:nth-child(18 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 18 pages"}
body:has(.specimen-pages .sheet:nth-child(19 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 19 pages"}
body:has(.specimen-pages .sheet:nth-child(20 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 20 pages"}
body:has(.specimen-pages .sheet:nth-child(21 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 21 pages"}
body:has(.specimen-pages .sheet:nth-child(22 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 22 pages"}
body:has(.specimen-pages .sheet:nth-child(23 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 23 pages"}
body:has(.specimen-pages .sheet:nth-child(24 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 24 pages"}
body:has(.specimen-pages .sheet:nth-child(25 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 25 pages"}
body:has(.specimen-pages .sheet:nth-child(26 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 26 pages"}
body:has(.specimen-pages .sheet:nth-child(27 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 27 pages"}
body:has(.specimen-pages .sheet:nth-child(28 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 28 pages"}
body:has(.specimen-pages .sheet:nth-child(29 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 29 pages"}
body:has(.specimen-pages .sheet:nth-child(30 of .sheet):nth-last-child(1 of .sheet)) .pcount::after{content:" · 30 pages"}

/* ---------------------------------------------------------------- print */
@media print{
.jump,.legal-index,.actions,.print-bar,.no-print{display:none!important}
.phead>.wrap{padding:0 0 12pt}
.strip{border-color:#aaa;background:#aaa}
.mk tbody tr{border-top:1px solid #000;break-inside:auto}
.mk tbody th{break-after:avoid}
.gts>div,.cites li,.mk td.mk-wont,.mk td.mk-letters,.mk td.mk-cov{break-inside:avoid}
.loci::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.legal-summary{border-color:#000}
/* the specimen prints as the readout pages only: running heads and signature, no site frame */
.page-specimen main>.sec:not(.sec-pages),.page-specimen .foot,.page-specimen .sec-pages .rail{display:none!important}
.page-specimen .specimen-pages{display:block}
.page-specimen .sec-pages>.wrap{padding:0}
.page-specimen .specimen-pages>*{max-width:none}
}