/* ==========================================================================
   FreelanceFinanceHub — theme.css
   ONE stylesheet for every page. Edit a token here, every page follows.

   Recipe: stripe-press (editorial, warm). No photographic layer — this is a
   reference tool, not a book cover. Consequences that are deliberate:
     · radius 0 everywhere (books don't round corners)
     · no box-shadow — separation is done with 1px hairlines
     · warm cream ground, never pure white
     · serif for all content, small-caps sans for labels only

   FONTS ARE SELF-HOSTED. Fetching them from fonts.googleapis.com meant that
   on a slow or blocked connection the page fell back to Times New Roman —
   measured, not hypothetical. These three files are the variable fonts, so
   ONE file per family+style covers every weight we use.
   ========================================================================== */

/* Source Serif 4 — variable, latin. Covers 400/600/700 from one file.
   font-display:optional (NOT swap) — this is the CLS fix.
   With `swap`, the browser paints a fallback metric (Times New Roman) and
   then re-lays-out the whole page when the real font arrives. Measured CLS
   was 1.107 against a budget of 0.1 — eleven times over.
   With `optional`, the browser uses the font only if it is ready almost
   immediately (from cache, typically), and otherwise keeps the fallback for
   the whole page view. No swap, no shift. The trade-off is that a first-time
   visitor on a slow connection may see the fallback — which is a far better
   outcome than a page that jumps while they are reading it. */
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 700;
  font-display:optional;
  src:url("fonts/source-serif-4-n400-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A7,U+00B7,U+00F7,U+2014,U+201C-201D,U+2192;
}
/* Source Serif 4 — variable, italic. The site leans on this for emphasis. */
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400 700;
  font-display:optional;
  src:url("fonts/source-serif-4-i400-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A7,U+00B7,U+00F7,U+2014,U+201C-201D,U+2192;
}
/* Public Sans — variable, latin. Labels and small caps only. */
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:400 600;
  font-display:optional;
  src:url("fonts/public-sans-n400-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A7,U+00B7,U+00F7,U+2014,U+201C-201D,U+2192;
}

:root{
  /* --- palette: exactly six values. Do not add a seventh. ---------------- */
  --ground:#F1ECDE;      /* warm bone — page background */
  --surface:#E6DCC4;     /* darker cream — inputs, callout panels */
  --ink:#1A1A18;         /* very warm near-black — body text */
  --secondary:#5E5848;   /* muted warm grey — labels, hints */
  --foil:#1B4B5A;        /* deep teal — accent, totals, links */
  --hairline:#C8BEA4;    /* 1px rules */
  --alert:#A04A2A;       /* burnt sienna — validation only, never decorative */

  /* --- type ------------------------------------------------------------- */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",sans-serif;

  /* --- spacing ladder --------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:96px;

  /* --- layout ----------------------------------------------------------- */
  --measure:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  text-wrap:pretty;
  padding:0 var(--s4);
}
.wrap{max-width:var(--measure);margin:0 auto}

/* ==========================================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================================== */

/* small uppercase label — the ONLY place sans-serif appears in content */
.kicker{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--foil);
}
.kicker--muted{color:var(--secondary)}

h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;font-weight:600;
   letter-spacing:-.02em;max-width:20ch}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--foil)}

h2{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}

.lede{font-size:1.3rem;line-height:1.6;color:var(--secondary);max-width:56ch}
.lede strong{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   PALETTE BUDGET — why this file uses 7 colours, not the 4 the protocol asks

     --ground / --surface   two steps of one warm neutral, needed so form
                            fields read as distinct from the page
     --ink / --secondary    two steps of one text scale. --secondary was
                            #736D5A, which measured 4.38:1 on the ground and
                            3.79:1 on the surface — below the 4.5:1 WCAG AA
                            floor. Darkened to #5E5848: 6.00:1 and 5.19:1.
     --foil                 the single accent
     --hairline             the 1px rule colour, not a surface
     --alert                validation only. Never decorative.

   That is one hue family plus one accent plus one semantic state. The count
   is 7; the DECISIONS are 3. Adding an eighth colour for anything other than
   a new semantic state is out of budget.
   -------------------------------------------------------------------------- */

a{color:inherit}
a:hover{color:var(--foil)}

/* ==========================================================================
   MASTHEAD — identical on every page
   ========================================================================== */
.masthead{
  border-bottom:1px solid var(--hairline);
  padding:var(--s4) 0;
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s4);flex-wrap:wrap;
}
.brand{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink)}
.brand em{font-style:italic;font-weight:400;color:var(--secondary)}
.masthead-meta{font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--secondary)}

/* ==========================================================================
   PAGE HEAD — used by the front page and every calculator
   ========================================================================== */
.page-head{padding:var(--s6) 0 var(--s4);border-bottom:2px solid var(--ink)}
.page-head .lede{margin-top:var(--s3)}

/* front-page hero — taller, with the verification stamp beneath */
.hero{padding:var(--s7) 0 var(--s6);border-bottom:1px solid var(--hairline)}
.hero h1{margin:var(--s3) 0 var(--s4);max-width:16ch}
.hero .lede{font-size:1.25rem}
.stamp{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;
  color:var(--secondary);line-height:1.8}
.stamp b{color:var(--ink);font-weight:600}

/* ==========================================================================
   TOOL INDEX — the front-page list. Rows, not cards.
   ========================================================================== */
.tools{list-style:none;border-bottom:1px solid var(--hairline)}
.tool{
  display:grid;grid-template-columns:56px 1fr auto;gap:var(--s4);
  /* The middle cell is a wrapper span whose font-size differs from the text
     it holds, so grid baseline-aligns the WRAPPER, not the title inside it —
     which pushes the number and arrow 9px off. Align each real text node. */
  align-items:start;
  padding:var(--s4) 0;
  border-top:1px solid var(--hairline);
  text-decoration:none;color:inherit;
  transition:background .45s ease,padding-left .45s ease;
}
.tool:hover{background:rgba(27,75,90,.045);padding-left:var(--s3)}
.tool:hover .tool-name{color:var(--foil)}
/* lift the 11px labels so their baseline meets the 1.3rem title's */
.tool-num,.tool-arrow{padding-top:.42em}
.tool-num{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--secondary)}
.tool-name{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;
  transition:color .45s ease}
.tool-desc{display:block;font-size:1rem;line-height:1.55;color:var(--secondary);
  font-weight:400;margin-top:var(--s1);max-width:54ch}
.tool-arrow{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);
  white-space:nowrap;transition:color .45s ease}
.tool:hover .tool-arrow{color:var(--foil)}
.tool--soon{cursor:default;opacity:.72}
.tool--soon:hover{background:none;padding-left:0}
.tool--soon:hover .tool-name{color:var(--ink)}
.tool--soon:hover .tool-arrow{color:var(--secondary)}

/* ==========================================================================
   CALCULATOR LAYOUT — inputs left, results right
   ========================================================================== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s6);padding:var(--s5) 0;align-items:start}

.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:1rem;font-weight:600;margin-bottom:var(--s2)}
.field .hint{font-size:.9rem;color:var(--secondary);margin-top:var(--s2);line-height:1.5}

/* money input: fixed $ prefix that never disappears */
.money{position:relative;display:block}
.money::before{
  content:"$";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--secondary);pointer-events:none;z-index:1;
}

input[type=number],select{
  width:100%;padding:14px 16px;font-family:var(--serif);font-size:1.3rem;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--hairline);border-radius:0;
  -moz-appearance:textfield;appearance:none;
}
/* NOTE: must come AFTER the rule above — same specificity, later wins.
   Putting padding-left on `.money input` alone gets overridden by the
   shorthand `padding` above, and the $ collides with the digits. */
.money input[type=number]{padding-left:34px;text-align:right;
  font-variant-numeric:tabular-nums}
input::placeholder{color:var(--secondary);opacity:.55}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

select{font-size:1.05rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--secondary) 50%),
                   linear-gradient(135deg,var(--secondary) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}

input:focus,select:focus{outline:none;border-color:var(--foil);
  box-shadow:inset 0 0 0 1px var(--foil)}

.btn{
  width:100%;padding:16px;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ground);background:var(--foil);
  border:none;border-radius:0;cursor:pointer;transition:background .35s ease;
}
.btn:hover{background:#143a46}

/* inline validation — replaces the native alert() */
.field-error{display:none;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--alert);margin-top:var(--s2)}
.field-error.show{display:block}
input.invalid{border-color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert)}

/* ==========================================================================
   RESULTS
   --------------------------------------------------------------
   The result block is display:none until .active is added — NOT opacity:0.
   It was opacity:0 before, which made the invisible block still occupy
   ~1030px of height. Before a calculation the right column was a tall empty
   space and the button sat in a 535px void. Measure, then fix.
   ========================================================================== */
.results{display:none}
.results.active{display:block;animation:fadeIn .4s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* the pre-calculation state: states what will appear, occupies little */
.placeholder-msg{padding:var(--s5) 0;color:var(--secondary);
  font-style:italic;border-bottom:1px solid var(--hairline)}

/* the button spans the full width of the left column so it doesn't orphan */
.layout > .col-inputs{display:flex;flex-direction:column}
.layout > .col-inputs .btn{margin-top:auto}
.results-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.results-head h2{font-size:1.15rem}



.rows{border-bottom:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:1fr auto;gap:var(--s4);
  padding:var(--s3) 0;border-top:1px solid var(--hairline);align-items:baseline}
.row:first-child{border-top:none}
.row-label{color:var(--secondary);font-size:1rem}
.row-label b{color:var(--ink);font-weight:600}
.row-value{font-size:1.25rem;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row--total{border-top:2px solid var(--ink);margin-top:var(--s2);padding-top:var(--s4)}
.row--total .row-label{color:var(--ink);font-size:1.05rem;font-weight:600}
.row--total .row-value{font-size:2.1rem;color:var(--foil);line-height:1}
.row-note{grid-column:1/-1;font-size:.85rem;color:var(--secondary);
  margin-top:var(--s1);line-height:1.45}

/* provenance panel — the differentiator, given real weight */
.provenance{margin-top:var(--s5);padding:var(--s4);background:var(--surface);
  border-left:2px solid var(--foil)}
.provenance h3{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--foil);margin-bottom:var(--s3)}
.provenance dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);
  font-size:.88rem}
.provenance dt{color:var(--secondary);white-space:nowrap}
.provenance dd{color:var(--ink)}

/* ==========================================================================
   BREADCRUMBS — present on calculator pages, not the index
   ========================================================================== */
.crumbs{font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--secondary);padding:var(--s4) 0 0}
.crumbs a{color:var(--secondary);text-decoration:none}
.crumbs a:hover{color:var(--foil);text-decoration:underline;
  text-underline-offset:2px}

/* ==========================================================================
   PROVISIONAL-DATA FLAG
   Shown when a figure is published but not final. The point is that the page
   says so rather than presenting an estimate as settled.
   ========================================================================== */
.state-flag{margin-top:var(--s5);padding:var(--s4);background:var(--surface);
  border-left:2px solid var(--alert);font-size:.9rem;line-height:1.6;
  color:var(--secondary)}
.state-flag b{color:var(--ink);font-weight:600}
.state-flag a{color:var(--foil)}

/* ==========================================================================
   LONG-FORM TEXT — legal and about pages.
   Measure is capped around 68 characters: past that the eye loses the line
   return. Legal pages are read, not skimmed, so the limit matters more here
   than anywhere else on the site.
   ========================================================================== */
.prose{padding:var(--s6) 0 var(--s5);max-width:68ch}
.prose h2{font-size:1.35rem;font-weight:600;letter-spacing:-.01em;
  margin:var(--s6) 0 var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--hairline)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prose p{color:var(--secondary);margin-bottom:var(--s3)}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose i,.prose em{font-style:italic}
.prose ul{list-style:none;margin:var(--s3) 0}
.prose li{position:relative;padding-left:var(--s4);margin-bottom:var(--s2);
  color:var(--secondary)}
.prose li::before{content:"—";position:absolute;left:0;color:var(--foil);
  font-family:var(--sans)}
.prose a{color:var(--foil);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{text-decoration-thickness:2px}

/* ==========================================================================
   EDITORIAL SECTIONS
   ========================================================================== */
.section{padding:var(--s6) 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s4);padding-bottom:var(--s3);border-bottom:2px solid var(--ink);
  flex-wrap:wrap}

.note{padding:var(--s6) 0;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s6)}
.note-body p{color:var(--secondary);margin-bottom:var(--s3);max-width:60ch}
.note-body p:last-child{margin-bottom:0}
.note-body strong{color:var(--ink);font-weight:600}
.rules{list-style:none;margin-top:var(--s4)}
.rules li{display:flex;gap:var(--s3);padding:var(--s2) 0;
  font-size:1rem;color:var(--secondary)}
.rules li::before{content:"—";color:var(--foil);font-family:var(--sans);flex:none}

.faq{padding:var(--s6) 0;border-top:1px solid var(--hairline)}
.faq h2{margin-bottom:var(--s5)}
.faq-item{padding:var(--s4) 0;border-top:1px solid var(--hairline);max-width:66ch}
.faq-item h3{font-size:1.12rem;font-weight:600;margin-bottom:var(--s2)}
.faq-item p{color:var(--secondary)}
.faq-item b{color:var(--ink);font-weight:600}

/* --- two-mode switcher: self-employed (deduction) vs employee (reimbursement).
   Radio 0, no shadow, 1px hairlines — same rules as the rest of the page. The
   active option is filled with the accent so the mode is unmistakable without
   relying on colour alone: it also carries aria-checked and bold weight. --- */
.switch{display:inline-flex;border:1px solid var(--ink);background:var(--ground)}
.switch-opt{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:0 16px;height:44px;
  display:inline-flex;align-items:center;
  background:transparent;border:0;color:var(--secondary);cursor:pointer;
  transition:background .3s ease,color .3s ease}
.switch-opt+.switch-opt{border-left:1px solid var(--ink)}
.switch-opt:hover{color:var(--ink)}
.switch-opt.is-on{background:var(--ink);color:var(--ground);font-weight:700}
.switch-opt:focus-visible{outline:2px solid var(--foil);outline-offset:2px}

/* --- a warning that must not be mistaken for a result. Used on the mileage
   page to state that a W-2 employee generally cannot deduct. Deliberately not
   the accent colour: this is a correction, not a figure. --- */
/* --- eligibility checkboxes. The mileage page used a switch because the choice
   was exclusive; this page needs independent yes/no gates, so these are real
   checkboxes with a large hit area. The label wraps the input so the whole row
   is clickable, and the box is sized to be tappable on a phone. --- */
.check{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  cursor:pointer;font-size:.95rem;line-height:1.5;color:var(--secondary)}
.check+.check{border-top:1px solid var(--hairline)}
.check input{appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:1px 0 0;border:1px solid var(--ink);
  background:var(--ground);cursor:pointer;position:relative;border-radius:0}
.check input:checked{background:var(--ink)}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--ground);border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.check input:focus-visible{outline:2px solid var(--foil);outline-offset:2px}
.check b{color:var(--ink);font-weight:600}

.warning{margin-top:var(--s4);padding:var(--s3) var(--s4);
  background:var(--surface);border-left:3px solid var(--ink);
  font-size:.95rem;line-height:1.55;color:var(--ink)}
.warning b{font-weight:700}

.related{padding:var(--s5) 0 var(--s6);border-top:2px solid var(--ink)}
.related h2{font-size:1.1rem;margin-bottom:var(--s4)}
.rel-list{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 var(--s5)}
.rel-list a,.rel-list .rel{display:block;padding:var(--s3) 0;
  border-bottom:1px solid var(--hairline);text-decoration:none;
  transition:color .35s ease,padding-left .35s ease}
.rel-list a:hover{color:var(--foil);padding-left:var(--s2)}
.rel-list .rel{opacity:.7;cursor:default}
.rel-list .rn{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;
  color:var(--secondary);display:block;margin-bottom:2px}
.rel-list .rt{font-size:1.05rem;font-weight:600}

/* sources table on the front page */
.sources{padding:var(--s5) 0 var(--s6);border-top:2px solid var(--ink)}
.sources h2{font-size:1.1rem;margin-bottom:var(--s3)}
.sources dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);
  font-size:.95rem}
.sources dt{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);
  padding-top:.28em;white-space:nowrap}
.sources dd{color:var(--ink)}
.sources dd span{color:var(--secondary)}

/* ==========================================================================
   AD SLOTS
   Never place one of these between a result and its provenance.
   ========================================================================== */
/* AdSense injects an inner element sized to the ad unit, which can exceed a
   narrow viewport when the slot has not yet resolved (data-ad-slot="auto"
   renders nothing but still reserves a fixed-width box). Without this, every
   page scrolls sideways on a phone: measured, a 720px child inside a 390px
   viewport. Contain it here rather than relying on the ad unit behaving. */
.ad-slot{padding:var(--s5) 0;border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);margin:var(--s6) 0;
  overflow:hidden;max-width:100%}
.ad-slot::before{content:"Advertisement";display:block;font-family:var(--sans);
  font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--secondary);opacity:.65;margin-bottom:var(--s3)}
.ad-slot ins{display:block;min-height:90px;width:100%;max-width:100%}

/* ==========================================================================
   STATUS PAGE (private, noindex)
   Deliberately plainer than the calculators: this is a diagnostic surface, read
   when something is wrong, so legibility of the verdict beats any styling.
   Same palette and rules — hairline borders, radius 0, no shadow.
   ========================================================================== */
.verdict{border:1px solid var(--ink);padding:var(--s4);margin-bottom:var(--s4)}
.verdict.is-ok{background:var(--ground)}
.verdict.is-bad{background:var(--surface);border-left:4px solid var(--ink)}
.verdict-head{display:flex;align-items:center;gap:10px}
.verdict-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ink)}
.verdict.is-ok .verdict-dot{background:var(--foil)}
.verdict.is-bad .verdict-dot{background:var(--ink);animation:none}
.verdict-text{font-size:1.25rem;font-weight:600;color:var(--ink)}
.verdict-when{font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--secondary);margin-top:6px}

.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;border:1px solid var(--hairline);margin:var(--s5) 0}
.status-card{padding:var(--s4);border-right:1px solid var(--hairline)}
.status-card:last-child{border-right:0}
.status-card-label{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);
  margin-bottom:6px}
.status-card-value{font-family:var(--serif);font-size:1.5rem;font-weight:600;
  color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.status-card-note{font-size:.85rem;color:var(--secondary);margin-top:6px;
  line-height:1.5}
.status-card--bad .status-card-value{text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px}
.status-card--warn .status-card-value{font-style:italic}

.status-h2{font-size:1.1rem;margin:var(--s5) 0 var(--s3);
  padding-top:var(--s4);border-top:2px solid var(--ink)}
.status-table{width:100%;border-collapse:collapse;font-size:.9rem}
.status-table th{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);
  text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--ink)}
.status-table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hairline);
  color:var(--ink)}
.status-table tr.is-bad td{background:var(--surface)}
.status-table .mono{font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:.85rem}
.status-table .dim{color:var(--secondary)}
.status-raw{font-family:var(--sans);font-size:11.5px;line-height:1.6;
  background:var(--surface);padding:var(--s4);overflow-x:auto;
  max-height:420px;color:var(--ink);white-space:pre}

@media (max-width:640px){
  .status-card{border-right:0;border-bottom:1px solid var(--hairline)}
  .status-card:last-child{border-bottom:0}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* --- report / correction prompt in the footer. Sits with the disclaimer
   because both are honesty surfaces: one limits what the tool claims, the other
   invites correction of it. Not styled as a button — it is an offer, not a
   call to action competing with the calculators. --- */
.report{font-size:12px;color:var(--secondary);line-height:1.7;
  max-width:52ch;padding-top:var(--s3);border-top:1px solid var(--hairline)}
.report b{color:var(--ink);font-weight:600}
.report-link{color:var(--foil);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;font-weight:600}
.report-link:hover{text-decoration-thickness:2px}
.report-addr{font-family:var(--sans);color:var(--ink);user-select:all}

footer{border-top:1px solid var(--hairline);padding:var(--s5) 0 var(--s7);
  font-family:var(--sans);font-size:12px;color:var(--secondary);line-height:1.8;
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
footer a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--foil)}
.footer-nav{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:baseline}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{text-decoration:underline;text-underline-offset:2px}
.disclaimer{max-width:52ch}
.disclaimer strong{color:var(--ink)}

/* ==========================================================================
   FOCUS + RESPONSIVE
   ========================================================================== */
a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--foil);outline-offset:3px}

@media (max-width:860px){
  body{font-size:17px;padding:0 var(--s3)}
  .layout{grid-template-columns:1fr;gap:var(--s5)}
  .page-head{padding:var(--s5) 0 var(--s4)}
  h1{max-width:none}
  .tool{grid-template-columns:36px 1fr;gap:var(--s3)}
  .tool-arrow{grid-column:2;padding-top:var(--s2)}
  .note{grid-template-columns:1fr;gap:var(--s4)}
  .provenance dl,.sources dl{grid-template-columns:1fr;gap:var(--s1)}
  .sources dt{padding-top:var(--s3)}
  .row--total .row-value{font-size:1.6rem}
  footer{padding-bottom:var(--s6)}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}