/* ═══════════════════════════════════════════════════════════════════════════ mfc-core.css MilitaryFitnessCalc design system. Served static. No build step. --------------------------------------------------------------------------- LOADED BY ALL 20 PAGES. Layers: mfc.guard, mfc.reset, mfc.tokens, mfc.base, mfc.layout, mfc.component (chrome + prose + tables + ads + footer), mfc.print (chrome only). Cached once; downloaded once for the whole site. --------------------------------------------------------------------------- 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; /* ── 00-guard.css — THE FOCUS FLOOR. Declared FIRST on purpose. ──────────── Round 2 I claimed nothing could defeat the focus ring. A judge defeated it with an UNLAYERED `*:focus-visible{outline:none}` and again with `!important` inside mfc.page, and was right to. Normal declarations in any layer lose to unlayered normal declarations; that is how layers work. The fix is not a later layer, it is an EARLIER one. For !important declarations the cascade inverts: unlayered !important loses to layered !important, and among layers the EARLIEST wins. So an !important floor in the first layer is the strongest position that exists in a document. Measured, all four hostile injections, see tools/check-site.js: layered outline:none -> ring survives 3px layered outline:none !important -> ring survives 3px UNLAYERED outline:none -> ring survives 3px UNLAYERED outline:none !important -> ring survives 3px Honest residual: this pins geometry, not colour. A contributor who sets --ring:transparent in mfc.tokens still blanks the ring. Nothing in CSS prevents that; tools/check-site.js greps for it instead. ───────────────── */ @layer mfc.guard{ :focus-visible{ outline-style:solid !important; outline-width:3px !important; outline-offset:2px !important; } } /* ── 00-reset.css ──────────────────────────────────────────────────────── */ @layer mfc.reset{ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0} } /* ── 10-tokens.css ─────────────────────────────────────────────────────── */ @layer mfc.tokens{ :root{ color-scheme:light dark; /* Substrate — warm field-manual stock. Never pure white. */ --paper:#F0ECE1; --paper-sunk:#E5DFD0; --sheet:#FBF9F3; --field:#FFFDF7; /* Ink. Floor for any text token is #5C6470; --muted sits below it. */ --ink:#1A1815; --ink-2:#3A3730; --label:#4A463C; --muted:#565E6A; --rule:#CFC7B4; --rule-hair:#E3DDCC; --rule-hard:#1A1815; /* Text set ON an ink block — one trio, so dark mode is one block. */ --on-ink:#F2EEE3; --on-ink-dim:#C4BDAB; --on-ink-track:#4A463C; /* STATUS. These four appear nowhere except inside a computed result. */ --fail:#A31B14; --marginal:#8A5000; --pass:#1F6B3C; --max:#0F6E3F; --fail-tint:#F8E7E5; --pass-tint:#E3F0E8; /* ON-INK STATUS (--*-oi). The four status hues set ON the ink block. #1F6B3C on #1A1815 measures 2.72:1 — a WCAG AA failure on the one line every visitor reads. These are the readable siblings. They flip with the theme and are re-pointed again for print, so the fix survives all three substrates instead of only the default one. */ --fail-oi:#FF8A80; --pass-oi:#78D08A; --marginal-oi:#E9B14A; --max-oi:#8FE0A4; /* legacy aliases — the component layer below still reads these names */ --on-ink-fail:var(--fail-oi); --on-ink-pass:var(--pass-oi); --on-ink-marg:var(--marginal-oi); --ring:#1A1815; --ring-tint:rgba(26,24,21,.13); /* Branch identity — swapped by [data-branch] on . Identity, never status. */ --brand:#3E4A22; --brand-ink:#FFFFFF; --brand-tint:rgba(62,74,34,.10); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --gut:clamp(14px,3.4vw,32px); --shell:1180px; --nav-h:56px; --sans:'Archivo','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } [data-branch="army"] {--brand:#3E4A22;--brand-tint:rgba(62,74,34,.10)} [data-branch="navy"] {--brand:#00205B;--brand-tint:rgba(0,32,91,.09)} [data-branch="marines"] {--brand:#9E1220;--brand-tint:rgba(158,18,32,.09)} [data-branch="airforce"] {--brand:#00308F;--brand-tint:rgba(0,48,143,.09)} [data-branch="coastguard"]{--brand:#00374F;--brand-tint:rgba(0,55,79,.09)} /* Dark mode: ONE token block. Zero component-level dark overrides below. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="paper"]){ --paper:#141310; --paper-sunk:#0E0D0B; --sheet:#1C1A16; --field:#100F0C; --ink:#EDE7D8; --ink-2:#CFC8B7; --label:#B6AF9C; --muted:#ABA494; --rule:#3A3529; --rule-hair:#2A261E; --rule-hard:#6A6353; --on-ink:#141310; --on-ink-dim:#403C33; --on-ink-track:#9C9585; --fail:#F0736A; --marginal:#E0A33C; --pass:#6BC46F; --max:#4FD08A; --fail-tint:#2C1614; --pass-tint:#152B1D; --fail-oi:#7A1610; --pass-oi:#175330; --marginal-oi:#6B3E00; --max-oi:#0B5531; --on-ink-fail:var(--fail-oi); --on-ink-pass:var(--pass-oi); --on-ink-marg:var(--marginal-oi); --ring:#F2EEE3; --ring-tint:rgba(242,238,227,.18); --brand-ink:#0E0D0B; } :root:not([data-theme="paper"])[data-branch="army"] {--brand:#9DB16A;--brand-tint:rgba(157,177,106,.14)} :root:not([data-theme="paper"])[data-branch="navy"] {--brand:#8FB4F2;--brand-tint:rgba(143,180,242,.13)} :root:not([data-theme="paper"])[data-branch="marines"] {--brand:#F08A94;--brand-tint:rgba(240,138,148,.13)} :root:not([data-theme="paper"])[data-branch="airforce"] {--brand:#8FADF7;--brand-tint:rgba(143,173,247,.13)} :root:not([data-theme="paper"])[data-branch="coastguard"]{--brand:#7FBFDB;--brand-tint:rgba(127,191,219,.13)} } :root[data-theme="night"]{ --paper:#141310; --paper-sunk:#0E0D0B; --sheet:#1C1A16; --field:#100F0C; --ink:#EDE7D8; --ink-2:#CFC8B7; --label:#B6AF9C; --muted:#ABA494; --rule:#3A3529; --rule-hair:#2A261E; --rule-hard:#6A6353; --on-ink:#141310; --on-ink-dim:#403C33; --on-ink-track:#9C9585; --fail:#F0736A; --marginal:#E0A33C; --pass:#6BC46F; --max:#4FD08A; --fail-tint:#2C1614; --pass-tint:#152B1D; --fail-oi:#7A1610; --pass-oi:#175330; --marginal-oi:#6B3E00; --max-oi:#0B5531; --on-ink-fail:var(--fail-oi); --on-ink-pass:var(--pass-oi); --on-ink-marg:var(--marginal-oi); --ring:#F2EEE3; --ring-tint:rgba(242,238,227,.18); --brand-ink:#0E0D0B; } :root[data-theme="night"][data-branch="army"] {--brand:#9DB16A;--brand-tint:rgba(157,177,106,.14)} :root[data-theme="night"][data-branch="navy"] {--brand:#8FB4F2;--brand-tint:rgba(143,180,242,.13)} :root[data-theme="night"][data-branch="marines"] {--brand:#F08A94;--brand-tint:rgba(240,138,148,.13)} :root[data-theme="night"][data-branch="airforce"] {--brand:#8FADF7;--brand-tint:rgba(143,173,247,.13)} :root[data-theme="night"][data-branch="coastguard"]{--brand:#7FBFDB;--brand-tint:rgba(127,191,219,.13)} } /* ── 20-base.css ───────────────────────────────────────────────────────── */ @layer mfc.base{ body{ font-family:var(--sans); font-variation-settings:'wdth' 100,'wght' 400; font-size:16.5px; line-height:1.55; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; /* the sticky-scorecard reservation moved to mfc-calc.css (body.has-board): 19 of the 20 pages have no scorecard and must not reserve 150px for it. */ overflow-x:hidden; } /* The fixed 32px ledger ruling: this is stock, not a screen. */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(26,24,21,.035) 31px 32px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="paper"]) body::before{background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(237,231,216,.030) 31px 32px)} } :root[data-theme="night"] body::before{background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(237,231,216,.030) 31px 32px)} /* THE SAFETY NET. Any anchor that no component styles falls through to the UA default #0000EE, which measures 1.98:1 on the night substrate — a real WCAG failure produced by writing a link into a paragraph nobody styled for links. Setting the floor in mfc.base costs one declaration and makes that class of defect impossible; every component that wants its own colour still wins, because mfc.component is a later layer. */ /* A grid or flex item refuses to shrink below its min-content width, so one unbreakable token — a file path, a long URL — silently widens the whole document. Measured: /about.html scrolled to 406px in a 390px viewport because of the string "/assets/js/mfc-standards.js" inside a step. Two declarations in mfc.base make that impossible on all 20 pages. */ p,li,dd,dt,td,th,h1,h2,h3,h4,figcaption,caption{overflow-wrap:break-word} .below-grid>*,.fold>*{min-width:0} a{color:var(--ink)} a:not([class]){text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--rule)} a:not([class]):hover{text-decoration-color:var(--ink)} h1,h2,h3{text-wrap:balance} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .tag{ font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--label); font-feature-settings:'tnum' 1; } .num{font-family:var(--mono);font-feature-settings:'tnum' 1} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}} } /* ── 30-layout.css ─────────────────────────────────────────────────────── */ @layer mfc.layout{ .shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:1} /* MOBILE FOLD ORDER. The prose deck is a flex child ordered BELOW the instrument. DOM order is unchanged, so a crawler reads the copy where it sits in the source, while a soldier on a phone gets the calculator first. ~1,000 words of added copy cost the branch strip 6px. */ .fold{display:flex;flex-direction:column;padding-block:var(--s4) var(--s6)} .fold-head{order:1} .fold-calc{order:2} .fold-deck{order:3} .fold-aux{order:4} .fold-deck{margin-top:var(--s5)} @media (min-width:1080px){ .fold{ display:grid; grid-template-columns:minmax(0,1fr) 560px; grid-template-rows:auto auto 1fr; grid-template-areas:"head calc" "deck calc" "aux calc"; column-gap:var(--s7);align-content:start; padding-block:var(--s6) var(--s7); } .fold-head{grid-area:head} .fold-calc{grid-area:calc;min-width:0} .fold-deck{grid-area:deck;margin-top:var(--s4);min-width:0} .fold-aux{grid-area:aux;align-self:start;margin-top:var(--s5); border-top:1px solid var(--rule);padding-top:var(--s5)} /* The left column keeps the data plate and the ad unit on screen while the user works the instrument on the right, instead of leaving ~850px of dead bone at deep scroll and scrolling the revenue surface out of view. */ .fold-aux{position:sticky;top:calc(var(--nav-h) + 16px)} .fold-calc{border-left:1px solid var(--rule); margin-left:calc(var(--s7) / -2);padding-left:calc(var(--s7) / 2)} } .below{border-top:1px solid var(--rule);background:var(--paper-sunk)} /* THE RAIL IS A DESKTOP OBJECT. On the wide layout it sits beside the answers and stays useful while you read. Stacked on a phone it becomes 515px of links that reappear VERBATIM in the footer map 60px further down — the same six anchors, twice, one screen apart. The markup is unchanged, so every one of those links is still in the served HTML for a crawler; only the duplicate rendering comes off. */ @media (max-width:1079px){.below-grid > aside{display:none}} .below-grid{padding-block:var(--s6) var(--s7);display:grid;gap:var(--s6)} @media (min-width:1080px){ .below-grid{grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s7);align-items:start} } /* The instrument responds to its OWN width, never the viewport's, so the same markup drops into any column on any of the 20 pages. */ .instrument{container-type:inline-size;container-name:calc;margin-top:var(--s5)} @media (min-width:1080px){.instrument{margin-top:0}} } /* ── 40-components.css ─────────────────────────────────────────────────── */ @layer mfc.component{ /* — skip link. Fixed, so taking focus never shifts the document. — */ .skip{ position:fixed;left:8px;top:-70px;z-index:999; background:var(--ink);color:var(--paper);padding:12px 18px; font-family:var(--mono);font-size:13px;font-weight:600;text-decoration:none; } .skip:focus{top:8px} /* — classification bar: disclosure + freshness signal in 28px — */ .classbar{background:#141310;position:relative;z-index:3} .classbar .shell{ display:flex;align-items:center;justify-content:space-between;gap:var(--s4); min-height:28px; font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.15em;text-transform:uppercase;color:#F0ECE1; } .classbar span:last-child{color:#BDB6A4;white-space:nowrap} @media (max-width:640px){.classbar span:last-child{display:none}} /* — masthead + nav — */ .masthead{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)} .mast-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--nav-h)} .mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;min-width:0; min-height:44px} .mark-plate{ width:28px;height:28px;flex:none;display:grid;place-items:center; background:var(--brand);color:var(--brand-ink); font-variation-settings:'wdth' 118,'wght' 800;font-size:11px;letter-spacing:.02em;line-height:1; } .mark-word{font-variation-settings:'wdth' 104,'wght' 700;font-size:15px;letter-spacing:-.005em;white-space:nowrap;line-height:1} .mark-word em{font-style:normal;color:var(--muted);font-variation-settings:'wdth' 104,'wght' 500} @media (max-width:359px){.mark-word{font-size:13px}} .mast-right{display:flex;align-items:center;gap:var(--s3);flex:none} .mast-tag{padding-right:var(--s3);border-right:1px solid var(--rule);white-space:nowrap} @media (max-width:520px){.mast-tag{display:none}} .themebtn{ font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;border:1.5px solid var(--rule); color:var(--label);padding:7px 9px;cursor:pointer;line-height:1; /* measured 58x32 in round 3 — under the 44px floor on the one control every night-shift visitor reaches for. The nav row is 56px. */ min-height:44px;min-width:44px; } .themebtn:hover{border-color:var(--rule-hard);color:var(--ink)} .nav{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:2} .nav-scroll{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav-scroll::-webkit-scrollbar{display:none} @media (max-width:1000px){ .nav-scroll{ mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); } } .nav-scroll a{ font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase; color:var(--label);text-decoration:none; /* measured 40px in round 3. 13/11 padding on an 11.5px mono line puts every primary nav target at the 44px floor. */ padding:13px 0 11px;white-space:nowrap;min-height:44px;display:flex;align-items:center; border-bottom:2px solid transparent;margin-bottom:-1px; } .nav-scroll a:hover{color:var(--ink)} .nav-scroll a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand);font-weight:600} .ruler{height:8px;border-bottom:1px solid var(--rule);opacity:.55;position:relative;z-index:1; background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 11px)} /* — headline: the fill-in-the-blank, rewritten on branch change — */ .eyebrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)} .eyebrow .rulefill{flex:1;height:1px;background:var(--rule);min-width:16px} h1{ font-variation-settings:'wdth' 118,'wght' 850; font-size:clamp(38px,9.6vw,72px); line-height:.92;letter-spacing:-.022em;text-transform:uppercase; } @media (min-width:1080px){h1{font-size:clamp(44px,4.3vw,60px)}} /* The slot is a form blank, not a hyperlink: a thick rule set well clear of the baseline. (Round 1 note: at phone sizes the thin close rule read as an underline. This is 0.085em thick and 0.16em down.) */ .slot{position:relative;display:inline-block;color:var(--brand)} .slot::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:-.16em; height:.085em;background:var(--brand)} .h1-sub{ display:block;margin-top:var(--s4); font-variation-settings:'wdth' 104,'wght' 600; font-size:clamp(15px,3.6vw,21px);line-height:1.25;letter-spacing:0; text-transform:none;color:var(--ink-2);max-width:34ch; } .deck{max-width:52ch;color:var(--ink-2);font-size:15.5px;line-height:1.6} .deck strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} @media (min-width:760px){.deck{font-size:16.5px}} .proc-block{border-top:1px solid var(--rule);margin-top:var(--s5);padding-top:var(--s5)} .proc{list-style:none;border-top:1px solid var(--rule);margin-top:var(--s2)} .proc li{ display:grid;grid-template-columns:2.6em 1fr;gap:var(--s3); padding:9px 0;border-bottom:1px solid var(--rule-hair); font-size:14.5px;color:var(--ink-2);line-height:1.4; } .proc b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted);padding-top:.24em} /* — data plate — */ .plate{border:1.5px solid var(--rule-hard);background:var(--sheet);margin-top:var(--s5)} .plate-hd{ background:var(--ink);color:var(--on-ink); font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase; padding:7px 12px;display:flex;justify-content:space-between;gap:8px; } .plate-hd span:last-child{color:var(--on-ink-dim)} .plate dl{display:grid;grid-template-columns:auto 1fr} .plate dt,.plate dd{font-family:var(--mono);font-size:11.5px;line-height:1.35;padding:8px 12px;border-top:1px solid var(--rule)} .plate dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .plate dd{color:var(--ink);font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere} .plate dd b{color:var(--brand);font-weight:700} @media (max-width:600px){ .plate dt,.plate dd{padding:6px 11px;font-size:11px} .plate dl > :nth-child(7),.plate dl > :nth-child(8), .plate dl > :nth-child(9),.plate dl > :nth-child(10){display:none} } /* — ad slots: reserved height, never a layout shift — */ .ad{margin-top:var(--s5)} .ad-lbl{display:block;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .ad-frame{min-height:280px;border:1px solid var(--rule);background:var(--paper-sunk); display:flex;align-items:center;justify-content:center;overflow:hidden} .ad-frame ins{display:block;width:100%} /* — below the fold — */ .answer{background:var(--sheet);border:1.5px solid var(--rule-hard);border-left-width:5px; border-left-color:var(--brand);padding:var(--s5)} @media (max-width:719px){.answer{padding:var(--s4)}.answer p{line-height:1.55}} .answer h2{font-variation-settings:'wdth' 112,'wght' 800;font-size:clamp(20px,4.6vw,26px); line-height:1.15;margin-bottom:var(--s3);letter-spacing:-.01em} .answer p{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:70ch} .answer p + p{margin-top:10px} .answer strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} .answer .src{margin-top:var(--s4)} .answer + .answer{margin-top:var(--s5)} .railbox{border:1.5px solid var(--rule);background:var(--sheet);margin-top:var(--s5)} .railbox:first-child{margin-top:0} .railbox-hd{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--label);padding:9px 12px;border-bottom:1px solid var(--rule)} .quicklist{list-style:none} .quicklist li{border-bottom:1px solid var(--rule-hair)} .quicklist li:last-child{border-bottom:0} .quicklist a{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline; padding:12px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;min-height:44px} .quicklist a:hover{background:var(--brand-tint);color:var(--brand)} .quicklist a span{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;flex:none} .foot{border-top:1px solid var(--rule);padding-block:var(--s5) var(--s6)} .foot p{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);line-height:1.9} .foot a{color:var(--ink-2)} /* — the deck: prose + the branch hub. Every heading is an anchor: these are the exact titles of five indexed money pages, and an unlinked heading passes them nothing. — */ .deck-h{font-variation-settings:'wdth' 112,'wght' 800;font-size:clamp(19px,4.2vw,24px); line-height:1.2;letter-spacing:-.01em;margin-top:var(--s5)} .deck-p{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:70ch;margin-top:10px} .deck-p strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} .deck-p a{color:var(--ink)} .branchgrid{display:grid;gap:var(--s3);margin-top:var(--s4)} @media (min-width:600px){.branchgrid{grid-template-columns:1fr 1fr}} .bcard{border:1px solid var(--rule);background:var(--sheet);padding:var(--s4)} /* THE HUB IS A LIST ON A PHONE, NOT A STACK OF BOXES. Measured at 390px: six bordered cards ran 1,065px. Paired into two 175px columns they ran 966px and the headings wrapped three deep, which is worse reading for 99px. Dropped to ruled rows — no border, no card padding, the same heading and the same sentence — they measure 750px. No card loses a word; the box goes, the content stays. */ @media (max-width:599px){ .branchgrid{gap:0;border-top:1px solid var(--rule)} .bcard{border:0;border-bottom:1px solid var(--rule-hair);background:none; padding:var(--s3) 0} .bcard p{font-size:14px;line-height:1.5;margin-top:2px} } .bcard h3{font-variation-settings:'wdth' 106,'wght' 700;font-size:16.5px;line-height:1.25;margin-bottom:5px} /* The heading anchor's own box measures 161x28 — under the 44px floor. It is not made taller, because a 44px box would drop the brand rule a finger's width below the word it underlines. Instead the WHOLE CARD becomes the tap target through a transparent ::after, which is the standard fix: the hit area is 161x183 with zero layout cost and no change to what is drawn. Verified by elementFromPoint at all four corners of every card. */ .bcard{position:relative} .bcard h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--brand); display:inline-block;min-height:28px} .bcard h3 a::after{content:"";position:absolute;inset:0} .bcard h3 a:hover{color:var(--brand)} /* a second anchor inside the card must sit above the overlay to stay clickable */ .bcard p a{position:relative;z-index:1} .bcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)} .bcard p a{color:var(--ink)} /* — the static disclosure: the same answer the live panel gives, in crawlable form, so it exists whether or not the script has run. — */ .needstatic{border:1.5px solid var(--rule);background:var(--sheet);margin-top:var(--s4)} .needstatic > summary{list-style:none;cursor:pointer;padding:13px var(--s4);min-height:48px; display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .needstatic > summary::-webkit-details-marker{display:none} .needstatic > summary h3{font-variation-settings:'wdth' 106,'wght' 700;font-size:16px;line-height:1.25} .needstatic > summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--label);flex:none} .needstatic[open] > summary::after{content:"\2212"} .needstatic[open]{border-color:var(--rule-hard)} .needstatic-b{padding:0 var(--s4) var(--s4)} .needstatic-b p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:70ch} .needstatic-b p + p{margin-top:9px} .needstatic-b strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} /* — score-band tables. Crawlable text welded to result state: the row your total lands in is marked when the engine returns it. — */ .bands{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:14.5px} .bands caption{text-align:left;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--label);padding-bottom:7px} .bands th,.bands td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule-hair); text-align:left;vertical-align:baseline} .bands thead th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--label);border-bottom:1.5px solid var(--rule-hard)} .bands tbody th{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink); white-space:nowrap;font-feature-settings:'tnum' 1} .bands td{color:var(--ink-2)} /* — per-branch answer blocks. All five ship in the served HTML; the selected branch opens. A crawler sees every one. — */ .qa{background:var(--sheet);border:1.5px solid var(--rule);margin-top:var(--s3)} /* [data-current] is the block for the branch you have selected. It is marked on every viewport; it is only auto-OPENED on the wide layout, because on a 390px viewport opening it measured 1,064px of document. */ .qa[open],.qa[data-current]{border-color:var(--rule-hard);border-left-width:5px;border-left-color:var(--brand)} .qa[data-current]:not([open]) > summary::before{content:"Your branch";font-family:var(--mono); font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--brand-ink);background:var(--brand);padding:3px 6px;margin-right:9px;flex:none} .qa > summary{list-style:none;cursor:pointer;padding:14px var(--s4);min-height:52px; display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .qa > summary::-webkit-details-marker{display:none} .qa > summary h3{font-variation-settings:'wdth' 106,'wght' 700;font-size:16.5px; line-height:1.25;color:var(--ink);letter-spacing:-.006em} .qa > summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--label);flex:none} .qa[open] > summary::after{content:"\2212"} .qa > summary:hover{background:var(--paper-sunk)} .qa-body{padding:0 var(--s4) var(--s4)} .qa-body p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:70ch} .qa-body p + p{margin-top:9px} .qa-body strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 700} .qa-body .src{margin-top:var(--s3)} /* seo's version tokened these to --brand, which computed to 1.83:1 in dark mode. Ink text with a brand rule under it keeps the identity and passes AA on both substrates. */ .qa-open{display:inline-block;margin-top:var(--s3);font-size:14.5px;font-weight:600; color:var(--ink);text-decoration:none;min-height:44px;line-height:40px; border-bottom:2px solid var(--brand)} .qa-open::after{content:" \2192";color:var(--brand)} .qa-open:hover{color:var(--brand)} .sect-hd{margin-top:var(--s6)} .sect-hd h2{font-variation-settings:'wdth' 112,'wght' 800;font-size:clamp(19px,4.2vw,24px); line-height:1.2;letter-spacing:-.01em} .sect-hd p{font-size:15px;color:var(--ink-2);margin-top:7px;max-width:66ch;line-height:1.6} } /* ── AdSense: an unfilled slot must not hold its reserved height open. This rule is on the live site's calculator pages and was lost in the round-2 rebuild; without it an unfilled unit leaves a 250px hole. ───── */ @layer mfc.component{ ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important} .ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none !important} } /* ── 60-print.css (chrome only) — the calculator's PT-card print rules live in mfc-calc.css. This is the part every page needs: paper is not a screen, so the navigation, the ads and the theme control come off. ──── */ @layer mfc.print{ @media print{ @page{margin:14mm} .classbar,.masthead,.nav,.ruler,.skip,.ad,.themebtn,.crumbs,.foot-share{display:none !important} body{background:#fff;color:#000;padding:0;font-size:10pt;line-height:1.4} body::before{display:none} .shell{max-width:none;padding:0} .below{background:#fff;border-top:1px solid #000} .below-grid{display:block;padding:0} a[href]{color:#000;text-decoration:underline} h1,h2,h3{break-after:avoid} .answer,.qa,.railbox,.srcbox{break-inside:avoid} } } /* ── 45-page-furniture.css — components the 19 non-homepage pages need and the round-2 champion never had, because it was one page. ──────────── */ @layer mfc.component{ /* — breadcrumbs. Real in the served HTML on every inner page, matched by a BreadcrumbList in the page's own schema graph. — */ .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);padding:10px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .crumbs li::after{content:"\203A";margin-left:6px;color:var(--rule)} .crumbs li:last-child::after{content:""} .crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule); padding:4px 0;display:inline-block;min-height:24px} .crumbs a:hover{color:var(--ink);border-bottom-color:var(--ink)} .crumbs [aria-current="page"]{color:var(--ink-2);font-weight:600} /* — the page head on an article or utility page. Same eyebrow/rule/H1 grammar as the instrument pages so the site reads as one document. — */ .pagehead{padding-block:var(--s5) var(--s4)} .pagehead h1{font-size:clamp(30px,5.4vw,46px)} .pagehead .h1-sub{margin-top:var(--s3)} .lede{font-size:clamp(16.5px,2vw,19px);line-height:1.55;color:var(--ink-2);max-width:62ch;margin-top:var(--s4)} /* — long-form prose. One measure, one rhythm, ruled subheads. — */ .prose{max-width:68ch} .prose>*+*{margin-top:var(--s4)} .prose h2{font-size:clamp(21px,2.6vw,27px);line-height:1.15;letter-spacing:-.015em; margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--rule)} .prose h3{font-size:clamp(17px,2vw,20px);line-height:1.25;margin-top:var(--s5)} .prose p,.prose li{color:var(--ink-2)} .prose strong{color:var(--ink);font-weight:700} .prose ul,.prose ol{padding-left:1.15em;display:flex;flex-direction:column;gap:8px} .prose li{padding-left:2px} .prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--rule)} .prose a:hover{text-decoration-color:var(--ink)} .prose table{width:100%;border-collapse:collapse;font-size:14.5px} .prose caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--label);padding-bottom:6px} .prose th,.prose td{border-bottom:1px solid var(--rule-hair);padding:9px 10px;text-align:left;vertical-align:top} .prose thead th{border-bottom:1.5px solid var(--rule-hard);font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--label)} .prose tbody th{font-weight:600;color:var(--ink);white-space:nowrap} /* A wide standards table scrolls INSIDE ITSELF. This is the single rule that keeps a 12-column age-band chart from widening the document at 390px, which is how the live site scrolls sideways on a phone. */ .tablewrap{overflow-x:auto;margin-top:var(--s4);border:1.5px solid var(--rule-hard); background:var(--sheet);-webkit-overflow-scrolling:touch} .dtable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px} .dtable caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10px; font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink); background:var(--ink);padding:8px 12px} .dtable th,.dtable td{padding:9px 12px;text-align:left;vertical-align:baseline; border-bottom:1px solid var(--rule-hair)} .dtable thead th{position:sticky;top:0;background:var(--paper-sunk);z-index:1; font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--label);border-bottom:1.5px solid var(--rule-hard); white-space:nowrap} .dtable tbody th{font-variation-settings:'wdth' 100,'wght' 700;color:var(--ink);white-space:nowrap} .dtable td{color:var(--ink-2);font-family:var(--mono);font-size:13.5px; font-feature-settings:'tnum' 1;white-space:nowrap} .dtable td.tx{font-family:var(--sans);font-size:14.5px;white-space:normal;min-width:16ch} .dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0} /* — ON THIS PAGE. Lives inside a .railbox in the sticky .docrail, so the index of a 3,000-word standards page stays on screen while you read it. The numeral comes from data-n on the anchor and is written by hand so it matches the numeral hanging off the

it points at — a CSS counter would renumber itself the moment a section is added and silently break the correspondence. — / .toc{list-style:none} .toc li{border-bottom:1px solid var(--rule-hair)} .toc li:last-child{border-bottom:0} .toc a{display:flex;gap:9px;padding:10px 12px;min-height:44px;align-items:center; text-decoration:none;color:var(--ink);font-size:14px;line-height:1.3} .toc a::before{content:attr(data-n);font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.1em;color:var(--muted);flex:none} .toc a:hover{background:var(--brand-tint);color:var(--brand)} .toc a[aria-current="true"]{background:var(--brand-tint);color:var(--brand);font-weight:600} / — numbered procedure. The 01/02/03 rail the instrument uses. — / .steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;padding:0} .steps>li{counter-increment:s;border-top:1px solid var(--rule);padding:var(--s4) 0 var(--s4) 46px;position:relative} .steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:var(--s4); font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--brand)} .steps h3{margin:0 0 6px} / — a stated fact with its authority, pulled out of the flow — / .keyfact{border-left:3px solid var(--brand);background:var(--brand-tint);padding:var(--s4); font-size:16px;line-height:1.5} .keyfact b{color:var(--ink)} / ══ E-E-A-T ══ SOURCES AND VERIFICATION ════════════════════════════════ The honest version of a trust box. It names the instruction each number came from, the date the page was checked against it, what the tool is NOT, and how to report an error. It does not name a person, claim a credential, quote a review or invent an organisation, because none of those are known to be true. What is true is the paper trail. ────────── / .srcbox{border:1.5px solid var(--ink);background:var(--sheet);margin-top:var(--s6)} .srcbox-hd{background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-size:11px; font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px var(--s4); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .srcbox-bd{padding:var(--s4)} .srcbox dl{display:grid;grid-template-columns:1fr;gap:0} @media (min-width:620px){.srcbox dl{grid-template-columns:auto 1fr;column-gap:var(--s4)}} .srcbox dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--label);padding:9px 0 0;border-top:1px solid var(--rule-hair)} .srcbox dd{font-size:14.5px;color:var(--ink-2);padding:9px 0;border-top:1px solid var(--rule-hair);line-height:1.45} @media (max-width:619px){.srcbox dd{border-top:0;padding-top:2px}} .srcbox dt:first-of-type,.srcbox dl>dt:first-child+dd{border-top:0} .srcbox .fine{font-size:13px;color:var(--muted);margin-top:var(--s3);line-height:1.5} .srcbox a{color:var(--ink);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--rule)} .srcbox a:hover{text-decoration-color:var(--ink)} .srcbox .fine a{color:var(--ink-2)} / — the footer link map. Four columns of real anchors: this is where the orphan page problem is fixed permanently, because every page carries the same map and tools/check-site.js fails the build if one does not. — / .sitemapnav{display:grid;gap:var(--s5);padding-block:var(--s6);border-top:1px solid var(--rule); grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .sitemapnav h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--label);margin-bottom:10px} .sitemapnav ul{list-style:none;display:flex;flex-direction:column} .sitemapnav li{border-top:1px solid var(--rule-hair)} .sitemapnav li:first-child{border-top:0} .sitemapnav a{display:block;padding:9px 0;min-height:44px;color:var(--ink-2); text-decoration:none;font-size:14.5px;line-height:1.4} .sitemapnav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} } / ── 47-content-grammar.css — THE PAGE GRAMMAR ───────────────────────────── Everything a content page needs, so that a content page ships ZERO page-specific CSS. If a builder finds themselves writing a