/* ═══════════════════════════════════════════════════════════════════════════ mfc-calc.css MilitaryFitnessCalc design system. Served static. No build step. --------------------------------------------------------------------------- LOADED ONLY BY PAGES THAT CARRY A CALCULATOR. Layers: mfc.component (the instrument), mfc.state (the four status hues — permitted nowhere else), mfc.print (the one-page PT card). Content pages never download it. --------------------------------------------------------------------------- THE LAYER ORDER IS DECLARED IN EVERY FILE AND IN EVERY PAGE . A @layer statement fixes precedence where it FIRST appears in the document, so repeating it costs 118 bytes and makes load order irrelevant: this file can arrive first, last, or out of order and the cascade does not move. ═══════════════════════════════════════════════════════════════════════════ */ @layer mfc.guard, mfc.reset, mfc.tokens, mfc.base, mfc.layout, mfc.component, mfc.page, mfc.state, mfc.print, mfc.focus; @layer mfc.component{ /* .has-board is now only a hook for the idle-readout rule further down. It no longer reserves a strip at the foot of the page: the board is position:sticky, sits in flow, and holds its own space. */ } /* ── 40-components.css ─────────────────────────────────────────────────── */ @layer mfc.component{ /* — branch strip: selection is INVERSION, never a hue change — */ .branch-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)} .segmented{display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--rule-hard);background:var(--sheet)} .seg{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:58px;padding:9px 2px;cursor:pointer;text-align:center;color:var(--ink-2); border-left:1px solid var(--rule); transition:background .1s linear,color .1s linear; } .seg:first-child{border-left:0} .seg-abbr{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.05em;line-height:1.1} .seg-full{display:none} .seg-test{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--label);line-height:1.1} .seg:hover{background:var(--paper-sunk);color:var(--ink)} .seg[aria-selected="true"]{background:var(--ink);color:var(--on-ink)} .seg[aria-selected="true"] .seg-test{color:var(--on-ink-dim)} .seg[aria-selected="true"] + .seg{border-left-color:var(--ink)} @container calc (min-width:440px){ .seg{padding:13px 6px} .seg-abbr{display:none} .seg-full{display:block;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;line-height:1.1} } /* — persistent scorecard: sticky at the foot of the instrument on a phone, sticky rail above the card from 1080px up — */ /* STICKY, NOT FIXED, AND THAT IS THE WHOLE POINT. Three attempts to keep a position:fixed bar behaving on iOS all failed on the device while passing every check in Chromium. A fixed element is anchored to the viewport, and iOS Safari decides on its own terms which viewport that is and when to repaint against it: the bar arrived in the middle of the screen with the page printing straight through it, whether the keyboard was open or the reader had scrolled a thousand pixels past the calculator. Sticky is not anchored to the viewport. It stays in normal flow and is offset by the scroller, so there is nothing for Safari to re-anchor. The board is now the LAST child of .instrument, which means it sticks to the bottom of the screen for exactly as long as the instrument is on screen and then scrolls away with it — which is the behaviour that was asked for anyway, and now it costs no JavaScript at all. Being in flow, it also reserves its own space. No body padding to measure, nothing to keep in step on resize, and no way for it to cover the footer. */ .board{ position:sticky;bottom:0;z-index:70; background:var(--sheet);border-top:1.5px solid var(--rule-hard); box-shadow:0 -4px 18px rgba(26,24,21,.12); padding-bottom:env(safe-area-inset-bottom); margin-top:var(--s4); } .board-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px var(--gut);background:var(--ink);color:var(--on-ink)} .board-hd b{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase} .dots{display:flex;gap:5px} .dots i{width:9px;height:9px;background:var(--on-ink-track);transition:background .15s} .dots i.on{background:var(--on-ink)} .board-body{display:flex;align-items:center;justify-content:space-between; gap:6px 12px;padding:6px var(--gut);flex-wrap:wrap} .bd-read{display:flex;align-items:baseline;gap:4px;flex:none;min-width:92px;order:1} .bd-verdict{order:2} .bd-jump{order:3} .bd-meta{order:4;flex:1 1 100%} .bd-read .n{font-family:var(--mono);font-weight:600;font-size:29px;line-height:.95;color:var(--ink);font-feature-settings:'tnum' 1;letter-spacing:-.02em} .bd-read .n.idle{font-size:20px;color:var(--muted);letter-spacing:.14em} .bd-read .d{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--muted)} .bd-meta{min-width:0} .bd-status{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.25} .bd-note{font-size:12px;color:var(--muted);margin-top:0;line-height:1.25} .bd-jump{ flex:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;padding:0 10px;border:1.5px solid var(--rule);color:var(--label); cursor:pointer;text-decoration:none;min-height:44px;display:flex;align-items:center; } .bd-jump:hover{border-color:var(--rule-hard);color:var(--ink)} .bd-jump[hidden]{display:none} .tape{border-top:1px solid var(--rule);padding:5px var(--gut) 6px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none} .tape::-webkit-scrollbar{display:none} .tape:empty{display:none} .tape span{font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap;flex:none; background:var(--paper-sunk);border:1px solid var(--rule);padding:3px 7px;color:var(--ink-2)} .tape span b{color:var(--ink);font-weight:700} @media (min-width:1080px){ /* On the wide layout the board is a rail that sits ABOVE the card, where it reads as a header for the instrument. It is now last in the source — put there so the phone can sticky-bottom it — so the column is ordered here instead. Source order stays the one that suits a phone, which is also the one a screen reader should hear: fill the form, then read the total. */ .instrument{display:flex;flex-direction:column} .instrument > section, .instrument > .segmented{order:1} .board{order:2} .instrument > .card{order:3} .instrument > .legal{order:4} .board{ position:sticky;top:var(--nav-h);bottom:auto; border:1.5px solid var(--rule-hard);box-shadow:6px 6px 0 var(--brand-tint); margin-top:0;margin-bottom:var(--s4);padding-bottom:0; } .board-hd,.board-body,.tape{padding-inline:var(--s4)} .board-body{flex-wrap:nowrap} .bd-meta{order:2;flex:1 1 0;min-width:0} .bd-verdict{order:3} .bd-jump{order:4} .tape{flex-wrap:wrap;overflow:visible} } /* — WHICH ARMY TEST — Two peers, in the same segmented grammar as the branch strip above it, so it reads as a choice rather than as an advertisement. That distinction is the whole reason this shape was chosen over a coloured promo bar: this page also serves AdSense, and a full-width brand banner in that position is the exact object a returning reader has trained themselves to skip. The AFT cell is a , not a button — it is the page you are already on, so there is nothing to press. The CFT cell is a real link, and it is marked as one. Branch pages already use inside .segmented, so a cell that navigates is established behaviour here, not a new trick. */ .testpick{margin-top:var(--s4)} .testpick[hidden]{display:none} .seg2{grid-template-columns:1fr 1fr} .seg2 .seg{cursor:default;text-decoration:none;gap:4px} .seg2 .seg-full{display:block;font-family:inherit;font-variation-settings:'wdth' 112,'wght' 800; font-size:17px;letter-spacing:.02em;line-height:1.1;text-transform:none} .seg2 .seg[aria-current="true"]{background:var(--ink);color:var(--on-ink)} .seg2 .seg[aria-current="true"] .seg-test{color:var(--on-ink-dim)} .seg--go{cursor:pointer} /* the arrow is the honesty: this cell leaves the page, the other does not */ .seg--go .seg-full::after{content:" \2192";font-weight:400} .seg--go:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)} .seg--go:hover .seg-test{color:var(--brand-ink)} /* — the card — */ .card{border:1.5px solid var(--rule-hard);background:var(--sheet);margin-top:-1.5px;box-shadow:6px 6px 0 var(--brand-tint)} .card-head{background:var(--brand);color:var(--brand-ink);display:flex;align-items:center; justify-content:space-between;gap:var(--s3);padding:10px var(--s4);flex-wrap:wrap} .card-head h2{font-variation-settings:'wdth' 112,'wght' 800;font-size:16px;letter-spacing:.02em; text-transform:uppercase;line-height:1.15;margin-right:auto} .card-head .stamp{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;border:1px solid currentColor;padding:4px 7px;line-height:1;flex:none} /* a per-branch standing note (e.g. the AF diagnostic-only window) */ .cardnote{background:var(--paper-sunk);border-bottom:1px solid var(--rule); padding:9px var(--s4);font-size:13px;line-height:1.5;color:var(--ink-2)} .cardnote b{color:var(--ink);font-weight:700} .cardnote[hidden]{display:none} .sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4) var(--s2)} .sec-hd .tag{color:var(--muted)} .profile{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);border-top:1px solid var(--rule-hair)} .pf{padding:var(--s3) var(--s4) var(--s4);border-left:1px solid var(--rule-hair);border-top:1px solid var(--rule-hair); display:flex;flex-direction:column;gap:6px;min-width:0} .pf:nth-child(1),.pf:nth-child(2){border-top:0} .pf:nth-child(odd){border-left:0} .pf--wide{grid-column:1 / -1} @container calc (min-width:700px){ .profile{grid-template-columns:repeat(3,1fr)} .pf{border-top:0} .pf:nth-child(odd){border-left:1px solid var(--rule-hair)} .pf:first-child{border-left:0} .pf--wide{grid-column:auto} } .lbl{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--label)} .lbl em{font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.06em} /* — inputs: 52px, visible border, unit in the right gutter — */ .fieldwrap{position:relative;display:flex;align-items:stretch} .fieldwrap input{ width:100%;min-height:52px; background:var(--field);border:1.5px solid var(--rule);border-radius:2px; padding:0 14px;font-family:var(--mono);font-weight:600;font-size:18px; color:var(--ink);letter-spacing:.01em; -webkit-appearance:none;appearance:none;transition:border-color .12s; font-feature-settings:'tnum' 1; } .fieldwrap input::placeholder{font-weight:400;color:var(--muted);opacity:1} .fieldwrap input:hover{border-color:var(--label)} .fieldwrap .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--label);pointer-events:none} .fieldwrap.has-unit input{padding-right:58px} .dualwrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} .dualwrap input{font-size:16px;padding-inline:10px} .pick{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--rule);border-radius:2px;background:var(--field)} .pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .pick label{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 6px; cursor:pointer;border-left:1px solid var(--rule); font-size:15.5px;font-variation-settings:'wdth' 100,'wght' 600;color:var(--ink-2); text-align:center;line-height:1.15;min-width:0;transition:background .12s,color .12s} .pick label:first-of-type{border-left:0} .pick label:hover{background:var(--paper-sunk)} .pick input:checked + label{background:var(--ink);color:var(--on-ink);font-variation-settings:'wdth' 100,'wght' 700} /* — events — */ .events{padding:0 0 var(--s2)} .ev{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--rule-hair)} .ev-hd{display:flex;align-items:baseline;gap:9px;margin-bottom:6px;flex-wrap:wrap} .ev-no{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--label);letter-spacing:.08em;flex:none} .ev-name{font-variation-settings:'wdth' 100,'wght' 700;font-size:16px;line-height:1.2;color:var(--ink);letter-spacing:-.004em} .ev-pts{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em; color:var(--muted);flex:none;font-feature-settings:'tnum' 1} .ev-hint{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:7px} .ev-hint b{color:var(--ink-2);font-weight:700} .ev-in{max-width:230px} @container calc (min-width:440px){ .ev{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:var(--s4);align-items:start} .ev-hd,.ev-hint,.optstrip,.err,.warn{grid-column:1} .ev-in{grid-column:2;grid-row:1 / span 5;max-width:none;align-self:center} } .err{display:none;align-items:center;gap:6px;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--fail)} .err svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4} .warn{display:none;margin-top:7px;font-size:13px;font-weight:600;color:var(--marginal)} .warn.on{display:block} /* — alternate / substitute events. Only rendered when a branch has them. — */ .optstrip{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--rule);margin:2px 0 9px;background:var(--field)} .optstrip button{ flex:1 1 auto;min-height:44px;padding:6px 9px;cursor:pointer; font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--label);border-left:1px solid var(--rule); white-space:normal;text-wrap:balance;transition:background .1s,color .1s; } .optstrip button:first-child{border-left:0} .optstrip button:hover{background:var(--paper-sunk);color:var(--ink)} .optstrip button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)} .optlbl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);display:block;margin-top:4px} /* — action — */ .act{padding:var(--s4);border-top:1.5px solid var(--rule-hard)} .cta{ width:100%;min-height:60px;cursor:pointer;border:1.5px solid var(--brand); background:var(--brand);color:var(--brand-ink); font-variation-settings:'wdth' 116,'wght' 800; font-size:18px;letter-spacing:.09em;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:10px;transition:filter .12s; } .cta:hover{filter:brightness(1.12)} .cta:active{filter:brightness(.92)} .cta svg{width:18px;height:14px;flex:none} .cta-note{text-align:center;font-size:13px;color:var(--muted);margin-top:10px} /* — readout: the instrument at rest, then the verdict — */ .readout{background:var(--ink);color:var(--on-ink);padding:var(--s3) var(--s4) var(--s4)} .ro-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)} .ro-top .tag{color:var(--on-ink-dim)} .ro-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .ro-total{font-family:var(--mono);font-size:38px;font-weight:600;line-height:1.05; letter-spacing:.2em;color:var(--on-ink-dim);font-feature-settings:'tnum' 1} .ro-total.has{letter-spacing:-.01em;color:var(--on-ink)} .ro-denom{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--on-ink-dim)} .ro-state{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-dim)} .ro-meter{display:grid;gap:3px;margin:var(--s2) 0 var(--s3)} .ro-meter i{height:5px;background:var(--on-ink-track);display:block} .legend{display:flex;flex-wrap:wrap;gap:var(--s3)} .legend span{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px; /* the status legend sits on --sheet, not on the ink block: --on-ink-dim measures 1.78:1 here (1.58:1 at night). --muted is the on-paper token. */ font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .legend i{width:8px;height:8px;display:block} /* the SAME .legend markup appears twice on two different substrates: once inside .readout (an ink block) and once inside .ledger (paper). One colour cannot serve both — measured 2.70:1 on ink with the paper token and 1.78:1 on paper with the ink token. Each substrate names its own. */ .readout .legend span{color:var(--on-ink-dim)} .readout .reqs{color:var(--on-ink-dim)} .readout .reqs b{color:var(--on-ink)} .legend[hidden]{display:none} .track{margin-top:var(--s4)} .track-bar{position:relative;height:10px;background:var(--on-ink-track);overflow:visible} .track-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--on-ink);transition:width .18s} .track .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--on-ink)} .track-key{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px; font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em; text-transform:uppercase;color:var(--on-ink-dim)} .track-key li{display:flex;align-items:center;gap:8px} .track-key i{flex:none;width:2px;height:11px;background:var(--on-ink-dim)} .track-key b{color:var(--on-ink);font-weight:600;min-width:32px;display:inline-block;font-feature-settings:'tnum' 1} /* ══ THE DETERMINATION ══ ═══════════════════════════════════════════════ One object, not three boxes. The header bar, the drawn rule, the stamp and the ledger ruling all exist BEFORE you compute — the form is a pre-printed blank that the engine fills in. That reserves the layout (no CLS) and it makes the result land in a shape the eye already knows. ══════════════════════════════════════════════════════════════════════ */ .sheet{scroll-margin-top:calc(var(--nav-h) + 24px);border-top:1.5px solid var(--rule-hard)} .sheet[hidden]{display:none} .det-hd{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); padding:8px var(--s4);background:var(--ink);color:var(--on-ink); } .det-hd b,.det-hd span{font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase} .det-hd span{color:var(--on-ink-dim);text-align:right} .det-hd b:focus-visible{outline-offset:4px} .verdict{ display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; padding:var(--s4);background:var(--sheet); } .verdict-main{flex:1 1 17ch;min-width:0} .verdict-say{font-size:14.5px;line-height:1.5;color:var(--ink-2)} .verdict-say b{color:var(--ink);font-weight:700} /* the pre-printed rule — it exists before the number does */ .det-rule{height:4px;background:var(--rule-hard);max-width:300px;margin-bottom:11px; transform:scaleX(1);transform-origin:0 50%} /* THE STAMP. A double rule with a paper gap between the two lines, rotated off-axis the way a hand stamp lands. Dashed and empty on a blank form. */ .dstamp{ flex:none;min-width:178px;padding:12px 16px 11px;text-align:center; border:2.5px solid var(--rule);color:var(--muted);background:transparent; box-shadow:0 0 0 3px var(--sheet),0 0 0 4.5px var(--rule); transform:rotate(-2.4deg);transform-origin:50% 50%; } .dstamp-v{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;line-height:1;display:block} .dstamp-s{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.17em; text-transform:uppercase;line-height:1.4;display:block; margin-top:8px;padding-top:7px;border-top:1px solid currentColor} .dstamp.is-idle{border-style:dashed;box-shadow:none} /* AUTOMATIC FAILURE — the fact this audience most needs, ABOVE the ledger, naming the event AND the regulation. */ .autofail{ margin:0 var(--s4) var(--s4); border-left:4px solid var(--fail);background:var(--fail-tint); padding:11px 14px;font-size:13.5px;line-height:1.5;color:var(--ink); } .autofail[hidden]{display:none} .autofail > b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--fail);margin-bottom:4px} .autofail span b{font-variation-settings:'wdth' 100,'wght' 700;color:var(--ink)} /* ── THE EVENT LEDGER — RESULT · MINIMUM · MARGIN · POINTS ───────────── The MINIMUM column is the number this audience actually lacks, and it is never transcribed: MFCSolve searches the same scoring function that produced the points and reports the first raw value that reaches the line. Under each row sits the distance bar with a hard tick at the point floor, and one sentence in the unit the soldier trains in. */ .ledger{border-top:1.5px solid var(--rule-hard)} .led-hd{display:none;padding:9px var(--s4) 8px;background:var(--paper-sunk); border-bottom:1px solid var(--rule)} .led-hd span{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--label)} .lrow{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px var(--s3); padding:12px var(--s4) 14px;border-top:1px solid var(--rule-hair); } .lrow:first-child{border-top:0} .lc-name{grid-column:1/-1;display:flex;align-items:baseline;gap:9px;min-width:0} .lno{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--label);flex:none} .lnm{font-variation-settings:'wdth' 100,'wght' 700;font-size:15px;line-height:1.2;color:var(--ink);min-width:0} .lc b{display:block;font-family:var(--mono);font-size:13.5px;font-weight:600; font-feature-settings:'tnum' 1;color:var(--ink);line-height:1.2;letter-spacing:-.01em} .lc i{display:block;font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-top:3px} .lrow-bar{grid-column:1/-1;position:relative;height:6px;background:var(--paper-sunk); border:1px solid var(--rule-hair);margin-top:2px} .brk-fill{position:absolute;left:0;top:0;bottom:0;width:0} .brk-tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)} .brk-margin{grid-column:1/-1;font-size:13.5px;line-height:1.5;color:var(--ink-2); border-left:3px solid var(--rule);padding-left:10px} .brk-margin b{font-family:var(--mono);font-weight:600;font-feature-settings:'tnum' 1;color:var(--ink)} /* On a wide container and on paper the same row becomes a four-column ledger; on a phone it stacks and the sentence carries the margin. */ @container calc (min-width:500px){ .led-hd{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px 88px 72px;gap:10px} .led-hd span:not(:first-child){text-align:right} .lrow{grid-template-columns:minmax(0,1fr) 80px 80px 88px 72px;align-items:baseline;gap:8px 10px} .lc-name{grid-column:auto} .lc i{display:none} .lc-raw,.lc-std,.lc-mar,.lc-pts{text-align:right} } .ledger .legend{display:flex;flex-wrap:wrap;gap:var(--s3);padding:10px var(--s4)} /* ── THE ANSWER, written from the engine's own output ────────────────── Structurally incapable of printing a number computeResult() did not return: every figure is read out of lastResult, and the block is hidden until lastResult exists. */ .vd{border-top:1.5px solid var(--rule-hard);padding:var(--s4);background:var(--sheet)} .vd[hidden]{display:none} .vd-eyebrow{display:block;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:7px} .vd h2{font-variation-settings:'wdth' 108,'wght' 800;font-size:clamp(18px,4.4cqi,23px); line-height:1.2;letter-spacing:-.01em;margin-bottom:9px} .vd-answer{font-size:15px;line-height:1.65;color:var(--ink-2)} .vd-answer strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} .vd-answer .yes{color:var(--pass);font-variation-settings:'wdth' 100,'wght' 800} .vd-answer .no{color:var(--fail);font-variation-settings:'wdth' 100,'wght' 800} .vd-src{margin-top:var(--s3);font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.6} /* NEXT — the intent moment. The only links on the page written from a number the visitor just produced. */ .vd-links{border-top:1.5px solid var(--rule-hard);padding:var(--s3) var(--s4) var(--s4)} .vd-links[hidden]{display:none} .vd-links b{display:block;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:2px} .vd-links ul{list-style:none} .vd-links li{border-bottom:1px solid var(--rule-hair)} .vd-links li:last-child{border-bottom:0} .vd-links a{display:block;padding:11px 0;min-height:44px;color:var(--ink); text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.35} .vd-links a::after{content:" \2192";color:var(--brand);font-weight:700} .vd-links a:hover{color:var(--brand)} .vd-links .u{display:none} /* MINIMUMS FOR YOU. Resolved from age and sex alone, live, before a single event is entered — the honest way to make the idle state useful. */ .reqp{border-top:1.5px solid var(--rule-hard);background:var(--sheet)} .reqp-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:9px var(--s4);border-bottom:1px solid var(--rule)} .reqp-hd .tag{color:var(--label)} .reqp ul{list-style:none} .reqp li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); padding:9px var(--s4);border-top:1px solid var(--rule-hair);font-size:14px;color:var(--ink-2)} .reqp li:first-child{border-top:0} .reqp li.tot{background:var(--paper-sunk);font-variation-settings:'wdth' 100,'wght' 650;color:var(--ink)} .reqp .v{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);text-align:right; font-feature-settings:'tnum' 1;white-space:nowrap} .reqp .empty{padding:12px var(--s4);font-size:14px;color:var(--muted)} .need{border-top:1.5px solid var(--rule-hard);padding:var(--s4);background:var(--paper-sunk)} .need[hidden]{display:none} .need h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--label);margin-bottom:var(--s3)} .need ul{list-style:none;display:flex;flex-direction:column;gap:9px} .need li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--ink-2)} .need li b{font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap;font-feature-settings:'tnum' 1} .need li i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--label);padding-top:.15em;white-space:nowrap} .need p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:var(--s3)} .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px; padding:var(--s4);border-top:1px solid var(--rule)} .acts .say{grid-column:1/-1} .acts[hidden]{display:none} .acts button{ min-height:48px;padding:10px 12px;cursor:pointer; border:1.5px solid var(--rule-hard);background:var(--sheet);color:var(--ink); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:7px;transition:background .12s,color .12s; } .acts button:hover{background:var(--ink);color:var(--on-ink)} .acts .say{flex-basis:100%;font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--muted);text-align:center;min-height:0;padding:0} .resultbox{border-top:1.5px solid var(--rule-hard);padding:var(--s4)} .reqs{font-size:13.5px;line-height:1.6;color:var(--ink-2)} .reqs b{color:var(--ink);font-weight:700} .src{margin-top:var(--s3);font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.05em;color:var(--muted);text-transform:uppercase;line-height:1.6} .legal{margin-top:var(--s4);padding:12px 14px;border-left:3px solid var(--rule-hard); background:var(--paper-sunk);font-size:13.5px;color:var(--muted);line-height:1.55} .legal b{color:var(--ink-2);font-weight:700} } /* ══ SAVE TO HISTORY ══ ═══════════════════════════════════════════════════ A fourth action beside Print / Copy / Retake, in the same mono plate. It is hidden while the sheet is idle — there is nothing to save until the engine has produced a card — and it is never automatic. Once written it swaps for a quiet confirmed state that is a link to the log, so the next move after saving is the one the visitor wants. ─────────────────────── */ @layer mfc.component{ .acts #actSave[hidden],.acts .hsaved[hidden]{display:none} .acts .hsaved{ min-height:48px;padding:10px 12px;text-decoration:none; border:1.5px solid var(--pass);background:var(--pass-tint);color:var(--ink); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:7px; text-align:center;line-height:1.2; } .acts .hsaved:hover{background:var(--pass);color:#fff;border-color:var(--pass)} /* the one-time persistence notice, shown on the FIRST save only */ .histnote{grid-column:1/-1;margin-top:4px;border:1.5px solid var(--rule-hard); border-left-width:5px;border-left-color:var(--brand);background:var(--sheet);padding:12px 14px} .histnote > b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:5px} .histnote p{font-size:14px;line-height:1.55;color:var(--ink-2);text-align:left} .histnote a{color:var(--ink)} .histnote-x{margin-top:10px;min-height:44px;padding:8px 14px;cursor:pointer; border:1.5px solid var(--rule-hard);background:var(--paper-sunk);color:var(--ink); font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase} .histnote-x:hover{background:var(--ink);color:var(--on-ink)} } /* ── 50-state.css — the ONLY place the four status hues are permitted ──── */ @layer mfc.state{ /* a saved card is a computed result: the same four hues, on the log row and on the trend point that stand in for it. */ .hrow-state{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:4px 7px;border:1.5px solid var(--rule);color:var(--muted);flex:none} .hrow-state.is-pass{color:var(--pass);border-color:var(--pass);background:var(--pass-tint)} .hrow-state.is-fail{color:var(--fail);border-color:var(--fail);background:var(--fail-tint)} .tsvg .t-dot.is-pass{fill:var(--pass);stroke:var(--sheet);stroke-width:1.5} .tsvg .t-dot.is-fail{fill:var(--fail);stroke:var(--sheet);stroke-width:1.5} .hbtn--del:hover{background:var(--fail);border-color:var(--fail);color:#fff} .t-fail{color:var(--fail)} .t-marginal{color:var(--marginal)} .t-pass{color:var(--pass)} .t-max{color:var(--max)} .bg-fail{background:var(--fail)} .bg-marginal{background:var(--marginal)} .bg-pass{background:var(--pass)} .bg-max{background:var(--max)} .fieldwrap input[aria-invalid="true"]{border-color:var(--fail);border-width:2px;background:var(--fail-tint)} .ev[data-err="1"] .fieldwrap input{border-color:var(--fail);border-width:2px;background:var(--fail-tint)} .ev[data-err="1"] .err{display:flex} .err.on{display:flex} /* ON THE INK BLOCK the status hues are the --*-oi siblings. This is the line every visitor reads; the champion measured 2.72:1 here. */ .ro-state.is-pass{color:var(--pass-oi)} .ro-state.is-fail{color:var(--fail-oi)} .ro-meter i.t-fail{background:var(--on-ink-fail)} .ro-meter i.t-marginal{background:var(--on-ink-marg)} .ro-meter i.t-pass,.ro-meter i.t-max{background:var(--on-ink-pass)} .sw-fail{background:var(--on-ink-fail)} .sw-marg{background:var(--on-ink-marg)} .sw-pass{background:var(--on-ink-pass)} .sw-max{background:var(--on-ink-pass)} .track-fill.is-pass{background:var(--on-ink-pass)} .track-fill.is-fail{background:var(--on-ink-fail)} /* on paper the status hues are the dark variants */ .verdict.is-pass{background:var(--pass-tint)} .verdict.is-fail{background:var(--fail-tint)} .dstamp.is-na{border-color:var(--rule-hard);color:var(--label);background:var(--paper-sunk); box-shadow:0 0 0 3px var(--sheet),0 0 0 4.5px var(--rule-hard)} .dstamp.is-pass{border-color:var(--pass);color:var(--pass);background:var(--pass-tint); box-shadow:0 0 0 3px var(--pass-tint),0 0 0 4.5px var(--pass)} .dstamp.is-fail{border-color:var(--fail);color:var(--fail);background:var(--fail-tint); box-shadow:0 0 0 3px var(--fail-tint),0 0 0 4.5px var(--fail)} .lc.t-fail b{color:var(--fail)} .lc.t-marginal b{color:var(--marginal)} .lc.t-pass b{color:var(--pass)} .lc.t-max b{color:var(--max)} .bands tr[data-hit="1"]{background:var(--brand-tint)} .bands tr[data-hit="1"] th{color:var(--brand)} .bands tr[data-hit="1"] td::after{content:" \2190 your score";font-family:var(--mono); font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:600} .brk-fill.t-fail{background:var(--fail)} .brk-fill.t-marginal{background:var(--marginal)} .brk-fill.t-pass{background:var(--pass)} .brk-fill.t-max{background:var(--max)} .brk-margin.t-fail{border-left-color:var(--fail)} .brk-margin.t-fail b{color:var(--fail)} .brk-margin.t-marginal{border-left-color:var(--marginal)} .brk-margin.t-pass,.brk-margin.t-max{border-left-color:var(--pass)} .bd-verdict{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:7px 9px;border:1.5px solid var(--rule);color:var(--muted)} .bd-verdict[hidden]{display:none} .bd-verdict.is-pass{color:var(--pass);border-color:var(--pass);background:var(--pass-tint)} .bd-verdict.is-fail{color:var(--fail);border-color:var(--fail);background:var(--fail-tint)} } /* ── 60-print.css — a soldier can hand this to a NCOIC ─────────────────── */ @layer mfc.print{ @media print{ @page{margin:12mm} .classbar,.masthead,.nav,.ruler,.board,.ad,.below,.skip,.act,.acts,.optstrip, .proc-block,.deck,.fold-deck,.legend,.ro-meter,.track,.events,.sec-hd,.profile,.plate, .segmented,.branch-head,.foot,.cardnote,.reqp,.needstatic,.legal,.fold-aux, .det-rule,.err,.warn,.ev-hint, /* Everything here repeats something the sheet already prints: .printcard restates the header line, .vd-src restates the citation .src carries in full at the foot, and .vd restates the determination sentence as a question. On screen the answer block is the crawlable asset; on paper it is 110px of duplication between a soldier and a one-sheet PT card. */ .printcard,.vd-src,.vd{display:none !important} body{background:#fff;color:#000;padding:0;font-size:9pt;line-height:1.32} body::before{display:none} .fold{display:block;padding:0} .shell{max-width:none;padding:0} h1{font-size:17pt;color:#000;margin-bottom:2mm} .h1-sub{display:none} .eyebrow{font-size:7pt} /* break-inside:avoid belongs on the pieces, never on the containers — an unbreakable .card is taller than a sheet of Letter and Chromium pushes the whole thing onto a fresh page, which is how a one-page card silently becomes three. */ .card,.sheet,.ledger{border-color:#000;background:#fff;box-shadow:none;margin:0} .verdict,.need,.resultbox,.vd,.vd-links,.lrow,.autofail{ border-color:#000;background:#fff;box-shadow:none;margin:0;break-inside:avoid} .card-head{background:#fff;color:#000;border-bottom:1.5pt solid #000;padding:2mm 0} .card-head h2{font-size:11pt} /* The ink block inverts for paper: re-point its own tokens so the status hues stay meaningful instead of collapsing to grey. */ .readout{background:#fff;color:#000;border-bottom:1pt solid #000;padding:2mm 0; --on-ink:#000;--on-ink-dim:#333;--on-ink-track:#555; --fail-oi:#A31B14;--pass-oi:#1F6B3C;--marginal-oi:#8A5000;--max-oi:#0F6E3F} .ro-total,.ro-denom{color:#000} .det-hd{background:#fff;color:#000;border-bottom:1pt solid #000;padding:1.5mm 0} .det-hd span{color:#000} .verdict{padding:1.5mm 0;gap:4mm} .dstamp{transform:rotate(-2.4deg);border-color:#000;color:#000;background:#fff; box-shadow:0 0 0 2px #fff,0 0 0 3.5px #000;margin:1mm 3mm 0 0;min-width:40mm;padding:2.5mm 4mm} .autofail{margin:0 0 1.5mm;background:#fff;border-left:3px solid #000;padding:1.5mm 2.5mm;font-size:8.5pt} .autofail b{color:#000} .ledger{border-top:1pt solid #000} .lrow{grid-template-columns:minmax(0,1fr) 18mm 18mm 23mm 18mm;gap:0 2.5mm; padding:1.1mm 0;align-items:baseline;break-inside:avoid} .lrow .lc-name{grid-column:auto} .lrow .lc i{display:none} .lc-raw,.lc-std,.lc-mar,.lc-pts{text-align:right} .lrow-bar{display:none} .brk-margin{border-left:2px solid #000;padding-left:2mm;font-size:8pt;margin-top:.6mm;line-height:1.25} .need{background:#fff;border-top:1pt solid #000;padding:1.5mm 0} .need h3{margin-bottom:1mm} .need ul{gap:1mm} .need li,.need p{font-size:8.5pt;line-height:1.3} .vd-links{border-top:1pt solid #000;padding:1.5mm 0 0} .vd-links li{border-bottom:0} .vd-links a{padding:0.6mm 0;min-height:0;font-size:8.5pt} .vd-links a::after{content:""} /* the handed-over sheet carries its own way back to the site */ .vd-links .u{display:inline;color:#000;font-family:var(--mono);font-size:7.5pt} .resultbox{border-top:1pt solid #000;padding:2mm 0 0} .reqs{font-size:8pt;line-height:1.4} .src{font-size:6.5pt;margin-top:.8mm;line-height:1.4} .instrument{margin:0} .instrument > section, .instrument > .segmented, .instrument > .card{container-type:normal} a[href]::after{content:""} } .printcard{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);padding:var(--s3) var(--s4);border-top:1px solid var(--rule)} } /* ── the LOCKED branch strip (branch pages). Identical geometry to the homepage tablist, but the four other cells are real to the sibling calculators — four contextual internal links inside the component the user is already looking at, on every branch page. ──────────────────── */ @layer mfc.component{ .segmented[data-lock] .seg{text-decoration:none} .segmented[data-lock] a.seg:hover{background:var(--paper-sunk);color:var(--ink)} .segmented[data-lock] .seg[aria-current="page"]{background:var(--ink);color:var(--on-ink)} .segmented[data-lock] .seg[aria-current="page"] .seg-test{color:var(--on-ink-dim)} .segmented[data-lock] .seg[aria-current="page"] + .seg{border-left-color:var(--ink)} } /* ══ IDLE COLLAPSE ON THE PHONE ════════════════════════════════════════════ MEASURED on a 390x844 viewport, before a single figure is entered: .ledger 561px — five placeholder rows with nothing in them .acts 145px — Print card / Copy / Share / Retake, all inert That is 706px of empty instrument standing between a soldier and the answer, on the device this audience actually uses. Both are the shape of a result, not a result; the verdict panel above already says "the ledger below fills in with your result". They come back the instant the engine writes a state onto #result, which is a plain attribute change — no measurement, no animation, no reflow trap. On the wide layout there is room for the empty ledger to teach the column grammar, so it stays. ─────────────────────────────────────────── */ @layer mfc.state{ @media (max-width:1079px){ .sheet[data-state="idle"] .ledger, .sheet[data-state="idle"] .acts{display:none} } } /* ── The provenance rail carries five dt/dd pairs of real citation. At 390px the stacked layout ran to 1,020px. Tightening the vertical rhythm and dropping the doubled rule between a term and its own definition takes it down without removing a single word or a single source. ────────── */ @layer mfc.component{ @media (max-width:619px){ .srcbox-bd{padding:var(--s3)} .srcbox dt{padding:8px 0 0;font-size:10.5px} .srcbox dd{padding:3px 0 8px;font-size:13.5px;line-height:1.4} .srcbox .fine{font-size:12.5px;margin-top:var(--s2)} } } /* ── The readout and the sticky scorecard say the SAME thing while the card is empty: a blanked total, the denominator, and how many events are in. On the wide layout they are 900px apart and the repetition reads as a header and a footer for the instrument. Stacked on a phone the scorecard is pinned to the viewport and the readout is 259px of the identical placeholder directly under the form. The readout returns the instant there is a score to put in it. ─────────────────────────────── */ @layer mfc.state{ @media (max-width:1079px){ body.has-board .card > .readout:has(+ .sheet[data-state="idle"]){display:none} } }