/* NewsLive Calculators: shared styles.
   Look: navy masthead, dark hero, quiet grey directory, white input panel beside a navy result panel.
   Tokens first; every colour pair below is checked with tastemaker check_contrast (text >= 4.5:1, UI >= 3:1). */
:root{
  /* page */
  --bg:#f5f6f8; --paper:#ffffff; --wash:#eef1f5; --ink:#172338; --muted:#5d6a7e;
  --line:#dce0e6; --line-strong:#203754; --field-line:#8693a6;
  --action:#234976; --action-hover:#173654; --action-ink:#ffffff; --link:#244b80;
  --flag:#b4232a; --ok:#1f6b52; --focus:#668bc5; --eyebrow:#4f6585;
  --chart-a:#234976; --chart-b:#5b7db3; --chart-c:#2e7d6f;
  /* night surfaces: masthead, hero, result panel, footer (same in both themes) */
  --night:#080f1c; --night-nav:#111f35; --night-foot:#0b1423;
  --hero:linear-gradient(112deg,#14263f,#111d31 65%,#080e19);
  --panel:linear-gradient(145deg,#1d3352,#101c30);
  --on-night:#ffffff; --on-night-2:#c9d3e3; --on-night-3:#9fb2cf; --night-line:rgba(255,255,255,.14);
  --on-night-flag:#ff9b94; --on-night-ok:#7fd8b4;
  --radius:2px; --radius-panel:3px;
  --font:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:68ch; --max:1256px; --gutter:36px;
  /* motion (Emil Kowalski): strong ease-out for UI, drawer curve for the phone result bar */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:160ms; --t-small:180ms; --t-panel:220ms;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1423; --paper:#111c2e; --wash:#16233a; --ink:#e6ebf3; --muted:#a3b0c4;
    --line:#26344c; --line-strong:#8fa6c8; --field-line:#6b7f9e;
    --action:#3d69a8; --action-hover:#4a78b9; --action-ink:#ffffff; --link:#9dbbe8;
    --flag:#ff8a80; --ok:#6fd1ad; --focus:#8fb0e3; --eyebrow:#a3b0c4;
    --chart-a:#8fb0e3; --chart-b:#5b7db3; --chart-c:#4fb39d; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1423; --paper:#111c2e; --wash:#16233a; --ink:#e6ebf3; --muted:#a3b0c4;
  --line:#26344c; --line-strong:#8fa6c8; --field-line:#6b7f9e;
  --action:#3d69a8; --action-hover:#4a78b9; --action-ink:#ffffff; --link:#9dbbe8;
  --flag:#ff8a80; --ok:#6fd1ad; --focus:#8fb0e3; --eyebrow:#a3b0c4;
  --chart-a:#8fb0e3; --chart-b:#5b7db3; --chart-c:#4fb39d; color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font);font-synthesis:none}
button,a,summary,input,select,[role="button"],.seg label{touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
[id]{scroll-margin-top:16px}
[hidden]{display:none!important}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:from-font}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:30;background:var(--paper);color:var(--ink);padding:10px 14px}
.skip:focus{top:10px}
.page,.text-page{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 56px}
.text-page{max-width:900px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* icons (Phosphor, inlined) */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}
.ic-star-fill,[aria-pressed="true"]>.ic-star{display:none}
[aria-pressed="true"]>.ic-star-fill{display:inline-block}

/* ---------- masthead + category nav ---------- */
.masthead{background:var(--night);color:var(--on-night)}
.mh{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);min-height:84px;display:flex;align-items:center;gap:30px}
.wordmark{color:var(--on-night);text-decoration:none;font-size:1.75rem;font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.wordmark span{font-weight:400;color:#97abc9}
.mh-note{color:#a5afbf;font-size:.8125rem;border-left:1px solid #3b4453;padding-left:28px}
.mh-links{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:.875rem}
.mh-links a{color:#c9d0dc;text-decoration:none;white-space:nowrap}
.saved-link{display:inline-flex;align-items:center;gap:2px}
.saved-link .ic{font-size:1.25rem;margin-left:10px}
html:not(.js) .saved-link{display:none}
@media (hover: hover) and (pointer: fine){.mh-links a:hover{color:#fff;text-decoration:underline}}
.nav-wrap{background:var(--night-nav);border-bottom:1px solid rgba(255,255,255,.08)}
.catnav{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;gap:34px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.catnav::-webkit-scrollbar{display:none}
.catnav a{color:#d1d9e7;text-decoration:none;font-size:.875rem;padding:16px 0 14px;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t-small) ease,border-color var(--t-small) ease}
.catnav a[aria-current]{color:#fff;border-color:#b3c4e1}
@media (hover: hover) and (pointer: fine){.catnav a:hover{color:#fff;border-color:#b3c4e1}}

/* ---------- hub hero ---------- */
.hero{background:var(--hero);color:var(--on-night);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:80px;padding:56px max(var(--gutter),calc((100vw - 1184px)/2)) 60px}
.hero h1{font-size:3rem;line-height:1.08;letter-spacing:-.04em;font-weight:600;margin:0 0 18px}
.hero-lede{color:#bcc6d6;font-size:1rem;line-height:1.7;margin:0 0 28px;max-width:52ch}
.hero-search{display:flex;max-width:580px;background:#fff;padding:5px;border-radius:var(--radius-panel)}
.hero-search input{flex:1;min-width:0;border:0;outline:none;background:#fff;color:#15233a;padding:10px 14px;font-size:1rem;border-radius:var(--radius)}
.hero-search input::placeholder{color:#5d6a7e}
.hero-search:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.hero-search button{border:0;border-radius:var(--radius);background:#244b80;color:#fff;padding:10px 20px;font-size:.875rem;font-weight:500;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) ease}
.hero-search button{display:inline-flex;align-items:center;gap:12px}
.hero-search button:active{transform:scale(.97)}
@media (hover: hover) and (pointer: fine){.hero-search button:hover{background:#1d3e6b}}
.popular{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;font-size:.8125rem;color:#c2ccdc}
.popular>span{color:#9fb0c9}
.popular a{color:#c2ccdc;text-decoration:underline;text-decoration-color:rgba(194,204,220,.4);text-underline-offset:4px}
@media (hover: hover) and (pointer: fine){.popular a:hover{color:#fff;text-decoration-color:#fff}}
.featured{border-left:1px solid rgba(101,117,141,.45);padding-left:34px;align-self:center}
.featured .label{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a7b7d0;margin:0}
.featured h2{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;margin:12px 0 4px}
.feat-sub{font-size:.875rem;color:#a9b7cc;margin:0 0 20px}
.feat-ex{font-size:.8125rem;color:#c1cad9;margin:0}
.feat-value{font-size:2.5rem;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:4px 0 6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.feat-cap{font-size:.8125rem;line-height:1.6;color:#9fb0c9;margin:0 0 18px}
.feat-link{display:inline-flex;align-items:center;gap:36px;color:#fff;text-decoration:none;font-size:.875rem;border-bottom:1px solid #6b7f9c;padding-bottom:5px;transition:border-color var(--t-small) ease}
@media (hover: hover) and (pointer: fine){.feat-link:hover{border-color:#fff}}

/* ---------- directory ---------- */
.directory{max-width:var(--max);margin:0 auto;padding:40px var(--gutter) 46px}
.dir-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.dir-head h2{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;margin:0}
.dir-head>span{font-size:.8125rem;color:var(--muted);text-align:right}
.filter-bar{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:34px;overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
html:not(.js) .filter-bar{display:none}
.filter-bar button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:.875rem;padding:10px 0 12px;white-space:nowrap;transition:color var(--t-small) ease,border-color var(--t-small) ease}
.filter-bar button[aria-pressed="true"]{border-color:var(--line-strong);color:var(--ink);font-weight:600}
@media (hover: hover) and (pointer: fine){.filter-bar button:hover{color:var(--ink)}}
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 44px;align-items:start}
.cat-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--line-strong);padding-bottom:10px}
.cat-head h2,.cat-head h3{font-size:1.0625rem;font-weight:600;margin:0;letter-spacing:-.01em}
.cat-head a{color:var(--ink);text-decoration:none}
@media (hover: hover) and (pointer: fine){.cat-head a:hover{text-decoration:underline}}
.cat-count{margin-left:auto;font-size:.8125rem;color:var(--muted);white-space:nowrap}
.tool-row{position:relative;border-bottom:1px solid var(--line)}
.tool-link{display:grid;gap:4px;padding:18px 84px 18px 0;color:var(--ink);text-decoration:none;min-height:88px;align-content:center}
.tool-name{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.tool-desc{font-size:.875rem;line-height:1.55;color:var(--muted)}
.row-arrow{position:absolute;right:46px;top:50%;transform:translateY(-50%);display:flex;color:#6c7c95;font-size:1.125rem;transition:transform var(--t-small) var(--ease-out)}
@media (hover: hover) and (pointer: fine){
  .tool-link:hover .tool-name{color:var(--link);text-decoration:underline;text-underline-offset:4px}
  .tool-link:hover .row-arrow{transform:translate(3px,-50%)}
}
.new{display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--ok);color:var(--ok);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius);vertical-align:2px}
.save-tool{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:1px solid transparent;background:none;color:#687c99;font-size:1.25rem;border-radius:var(--radius-panel);transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) ease,border-color var(--t-press) ease}
.save-tool:active{transform:translateY(-50%) scale(.9)}
.save-tool[aria-pressed="true"]{color:var(--link);background:var(--wash)}
html:not(.js) .save-tool,html:not(.js) .save-page{display:none}
@media (hover: hover) and (pointer: fine){.save-tool:hover{background:var(--wash);border-color:var(--line)}}
.dir-empty{padding:28px 0}
.dir-empty h3{font-size:1.25rem;font-weight:500;margin:0 0 6px}
.dir-empty p{color:var(--muted);margin:0 0 16px}
.dir-none{color:var(--muted)}
.site-note{max-width:1184px;margin:0 auto 48px;border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:60px}
.site-note h2{font-size:1rem;font-weight:600;margin:0}
.site-note p{font-size:.9375rem;color:var(--muted);line-height:1.75;max-width:64ch;margin:0}
.cat-page{margin-top:6px;max-width:860px}
.back-link{margin:26px 0 0;font-size:.9375rem}
.back-link a{text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* ---------- page heading ---------- */
.crumbs{font-size:.8125rem;color:var(--muted);margin:24px 0 28px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.crumbs li+li::before{content:"/";margin:0 12px;color:#9aa5b6}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs li[aria-current]{color:var(--ink)}
@media (hover: hover) and (pointer: fine){.crumbs a:hover{text-decoration:underline}}
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:28px}
.ph-text{min-width:0;max-width:820px}
.page-category{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--eyebrow);text-decoration:none}
@media (hover: hover) and (pointer: fine){.page-category:hover{text-decoration:underline}}
h1{font-size:2.3125rem;font-weight:600;letter-spacing:-.035em;line-height:1.15;margin:8px 0 12px}
.page-sub{color:var(--muted);font-size:1rem;margin:0;max-width:var(--measure)}
.answer{font-size:1.0625rem;line-height:1.6;color:var(--ink);margin:0 0 10px;max-width:var(--measure)}
.answer strong{font-weight:600}
.stamp{font-size:.8125rem;color:var(--muted);margin:0}
.stamp strong{color:var(--ink);font-weight:600}
.save-page{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--paper);color:var(--muted);font-size:.8125rem;white-space:nowrap;margin-top:22px;transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) ease,border-color var(--t-press) ease}
.save-page .ic{font-size:1.125rem;color:#687c99}
.save-page:active{transform:scale(.97)}
.save-page[aria-pressed="true"]{color:var(--link);border-color:var(--link)}
.save-page[aria-pressed="true"] .ic{color:var(--link)}
@media (hover: hover) and (pointer: fine){.save-page:hover{border-color:var(--field-line)}}

/* ---------- calculator layout ---------- */
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:44px;align-items:start}
.calc-main{min-width:0}
.calc-side{position:sticky;top:20px}
.related{border-top:2px solid var(--line-strong)}
.related h2{font-size:.875rem;font-weight:600;margin:14px 0 8px}
.related>a{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:12px 0;font-size:.875rem;color:var(--ink);text-decoration:none;transition:color var(--t-small) ease}
.related>a .ic{color:#6c7c95;margin-top:3px;transition:transform var(--t-small) var(--ease-out)}
@media (hover: hover) and (pointer: fine){.related>a:hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}.related>a:hover .ic{transform:translateX(3px)}}
.related .back-directory{border:0;color:var(--muted);font-size:.8125rem;padding-top:16px}

/* ---------- the calculator: white inputs beside the navy result ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius-panel);overflow:hidden;background:var(--paper)}
@media (min-width:860px){.calc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.panel-title{font-size:.9375rem;font-weight:600;margin:0 0 4px;letter-spacing:-.005em}
.calc-form{padding:28px;background:var(--paper);display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;min-width:0}
.field,.adv,.adv .grid{min-width:0}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.field>label,.field>.label{font-size:.875rem;font-weight:500;color:var(--ink)}
.field .help{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0}
.inp{display:flex;min-width:0;align-items:stretch;border:1px solid var(--field-line);border-radius:var(--radius);background:var(--paper);min-height:46px;transition:border-color var(--t-small) ease}
.inp:focus-within{border-color:var(--action);outline:3px solid var(--focus);outline-offset:1px}
.inp input,.inp select{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--ink);font-size:1rem;padding:0 12px;font-variant-numeric:tabular-nums}
.inp input:focus,.inp select:focus{outline:none}
.inp .affix{display:flex;align-items:center;padding:0 11px;color:var(--muted);font-size:.9375rem;background:var(--wash);border-right:1px solid var(--line)}
.inp .affix.after{border-right:0;border-left:1px solid var(--line)}
.field.invalid .inp{border-color:var(--flag)}
.field .err{color:var(--flag);font-size:.8125rem;margin:0}
.seg{display:flex;flex-wrap:wrap;gap:0}
.seg label{position:relative}
.seg label+label span{margin-left:-1px}
.seg input{position:absolute;opacity:0;inset:0;margin:0}
.seg span{display:inline-block;padding:10px 15px;border:1px solid var(--field-line);background:var(--paper);font-size:.875rem;cursor:pointer;transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) ease,color var(--t-press) ease}
.seg label:first-child span{border-radius:var(--radius) 0 0 var(--radius)}
.seg label:last-child span{border-radius:0 var(--radius) var(--radius) 0}
.seg label:active span{transform:scale(.97)}
.seg input:checked+span{background:var(--action);color:var(--action-ink);border-color:var(--action);position:relative;z-index:1}
.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px;position:relative;z-index:2}
.adv{border-top:1px solid var(--line);padding-top:14px}
.adv summary{cursor:pointer;font-size:.875rem;font-weight:500;color:var(--link)}
.adv[open] summary{margin-bottom:16px}
.adv .grid{display:grid;gap:18px;transition:opacity var(--t-panel) var(--ease-out),transform var(--t-panel) var(--ease-out)}
@starting-style{.adv[open] .grid{opacity:0;transform:translateY(-4px)}}
.calc-actions{display:flex;gap:18px;align-items:center;margin-top:6px}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--action);background:var(--action);color:var(--action-ink);font-size:.9375rem;font-weight:500;padding:11px 16px;border-radius:var(--radius);min-height:46px;transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) ease}
.btn:active{transform:scale(.97)}
@media (hover: hover) and (pointer: fine){.btn:hover{background:var(--action-hover);border-color:var(--action-hover)}}
.btn.calculate{flex:1;justify-content:space-between}
.btn-text{border:0;background:none;color:var(--muted);font-size:.875rem;padding:10px 4px;min-height:44px}
@media (hover: hover) and (pointer: fine){.btn-text:hover{color:var(--ink);text-decoration:underline}}

/* rows input (time card) */
.rows{width:100%;border-collapse:collapse;font-size:.9375rem}
.rows th{text-align:left;font-weight:500;font-size:.8125rem;color:var(--muted);padding:4px}
.rows td{padding:3px 4px}
.rows td:first-child{font-weight:500;white-space:nowrap}
.rows input{width:100%;min-height:42px;border:1px solid var(--field-line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:1rem;padding:0 6px;font-variant-numeric:tabular-nums}
.rows .x{border:0;background:none;color:var(--muted);font-size:1.125rem;min-height:42px;min-width:28px;border-radius:var(--radius);transition:transform var(--t-press) var(--ease-out)}
.rows .x:active{transform:scale(.9)}
.rows input::placeholder{color:var(--muted);opacity:.6}
.rows .d-short{display:none}
.btn-line-light,.calc-form .btn.ghost{background:none;color:var(--link);border:1px solid var(--field-line);min-height:38px;font-size:.875rem;padding:7px 12px}
@media (max-width:520px){.rows{font-size:.875rem}.rows .d-long{display:none}.rows .d-short{display:inline}.rows td,.rows th{padding:3px 2px}.rows input{padding:0 4px;letter-spacing:-.01em}.rows td:nth-child(4){width:52px}.rows .x{padding:0;min-width:24px}}
@media (max-width:360px){.rows th:last-child,.rows td:last-child{display:none}.rows td:nth-child(4){width:46px}}

/* result panel */
.calc-out{background:var(--panel);color:var(--on-night);padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.calc-out .panel-title{color:var(--on-night-2)}
.calc-out a{color:#cfe0fb}
.receipt .head-label{font-size:.875rem;color:var(--on-night-2);margin:4px 0 0}
.receipt .headline{font-size:2.5rem;font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:6px 0 16px;color:var(--on-night);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.receipt dl{margin:0}
.receipt .line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:9px 0;border-top:1px solid var(--night-line);font-size:.875rem}
.receipt .line dt{flex:1 1 auto;min-width:0;color:var(--on-night-2);overflow-wrap:anywhere}
.receipt .line .dots{display:none}
.receipt .line dd{margin:0 0 0 auto;white-space:nowrap;color:var(--on-night);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.receipt .line.strong dt,.receipt .line.strong dd{color:var(--on-night);font-weight:600}
.receipt .line.minus dd{color:var(--on-night-flag)}
.interpret{font-size:.875rem;line-height:1.7;color:var(--on-night-2);border-top:1px solid var(--night-line);padding-top:14px}
.interpret p{margin:0 0 8px}.interpret p:last-child{margin:0}
.interpret strong{color:var(--on-night);font-weight:600}
.warn{margin:0;padding:10px 12px;border-left:3px solid var(--on-night-flag);background:rgba(255,155,148,.08);font-size:.875rem;color:var(--on-night)}
.out-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-line{border:1px solid rgba(255,255,255,.28);background:none;color:var(--on-night-2);font-size:.8125rem;padding:7px 11px;min-height:36px;border-radius:var(--radius);transition:transform var(--t-press) var(--ease-out),border-color var(--t-press) ease,color var(--t-press) ease}
.btn-line:active{transform:scale(.97)}
@media (hover: hover) and (pointer: fine){.btn-line:hover{border-color:rgba(255,255,255,.6);color:#fff}}
.copied{font-size:.8125rem;color:var(--on-night-ok);transition:opacity var(--t-small) var(--ease-out),transform var(--t-small) var(--ease-out)}
@starting-style{.copied{opacity:0;transform:scale(.97)}}
.result-note{margin:auto 0 0;padding-top:8px;color:var(--on-night-3);font-size:.75rem}

/* phone: keep the answer in view while editing inputs */
.sticky-res{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;transform:translateY(100%);visibility:hidden;transition:transform 150ms var(--ease-out),visibility 0s linear 150ms;align-items:center;gap:12px;justify-content:space-between;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#101c30;color:var(--on-night-2);font-size:.875rem;box-shadow:0 -4px 16px rgba(8,15,28,.25)}
.sticky-res.show{transform:translateY(0);visibility:visible;transition:transform 260ms var(--ease-drawer),visibility 0s}
.sticky-res span{min-width:0;overflow-wrap:anywhere}
.sticky-res strong{color:#fff;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sticky-res a{color:#fff;font-weight:500;white-space:nowrap}
@media (min-width:860px){.sticky-res{display:none!important}}

/* ---------- chart + table ---------- */
.figure{margin:24px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-panel);padding:20px}
.figure figcaption{font-size:.9375rem;font-weight:600;margin-bottom:10px}
.chart svg{display:block;width:100%;height:auto}
.chart .ax{stroke:var(--line)}.chart .tick{fill:var(--muted);font:.75rem var(--font)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.8125rem;margin-top:8px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:1px;margin-right:6px;vertical-align:-1px}
.tbl-wrap{margin-top:14px}
.tbl-wrap summary{cursor:pointer;font-size:.9375rem;font-weight:500;color:var(--link)}
.tbl-scroll{overflow-x:auto;margin-top:10px;max-height:420px;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-panel);transition:opacity var(--t-panel) var(--ease-out),transform var(--t-panel) var(--ease-out)}
@starting-style{.tbl-wrap[open] .tbl-scroll{opacity:0;transform:translateY(-4px)}}
table.data{border-collapse:collapse;width:100%;font-size:.875rem;font-variant-numeric:tabular-nums}
table.data caption{text-align:left;font-size:.8125rem;color:var(--muted);padding:8px 12px;caption-side:bottom}
table.data th,table.data td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data thead th{position:sticky;top:0;background:var(--wash);font-weight:600}

/* ad slots: never inside the calculator card */
.ad{margin:32px 0;text-align:center}
.ad .ad-label{font-size:.75rem;color:var(--muted);display:block;margin-bottom:4px}

/* ---------- article ---------- */
.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:40px 0 0;max-width:var(--measure);font-size:.9375rem}
.toc strong{display:block;font-size:.875rem;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px;columns:2 240px;column-gap:32px}
.toc li{margin:3px 0;break-inside:avoid}
.prose{max-width:var(--measure);font-size:1.0625rem;line-height:1.75}
.prose h2,.faq h2,.sources h2,.cite h2{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:48px 0 14px}
.prose h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;margin:30px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose li{margin:5px 0}
.prose table{border-collapse:collapse;width:100%;font-size:.9375rem;line-height:1.5;margin:8px 0 24px;font-variant-numeric:tabular-nums;background:var(--paper)}
.prose table caption{text-align:left;font-size:.8125rem;color:var(--muted);padding:8px 0;caption-side:bottom}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose thead th{background:var(--wash);font-weight:600}
.prose td.num,.prose th.num{text-align:right}
.tblx{overflow-x:auto;overscroll-behavior-x:contain}
.formula{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--line-strong);padding:16px 18px;margin:0 0 18px;font-size:1rem}
.formula code{font:600 1.0625rem/1.5 var(--mono);display:block;overflow-x:auto;white-space:pre-wrap}
.formula dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.9375rem}
.formula dt{font-weight:700;font-family:var(--mono)}
.formula dd{margin:0}
.note{border-left:3px solid var(--link);background:var(--paper);padding:12px 16px;margin:0 0 18px}
.example{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-panel);padding:4px 20px 8px;margin:0 0 22px}
.example h3{margin-top:16px}
figure.art{margin:8px 0 26px}
figure.art figcaption{font-size:.8125rem;color:var(--muted);margin-top:6px}

/* faq, sources, cite */
.faq,.sources,.cite{max-width:var(--measure)}
.faq h3{font-size:1.0625rem;font-weight:600;margin:24px 0 6px}
.faq p{margin:0 0 8px;line-height:1.7}
.sources{font-size:.9375rem;line-height:1.7}
.sources ul{padding-left:20px}
.byline{display:grid;gap:4px;font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.byline strong{color:var(--ink);font-weight:600}
.cite p,.sources li,.prose a,.byline{overflow-wrap:anywhere}
.cite p{font-size:.9375rem}
.cite textarea{width:100%;min-height:96px;font:.8125rem/1.45 var(--mono);border:1px solid var(--field-line);border-radius:var(--radius);padding:10px;background:var(--paper);color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{margin-top:24px;background:var(--night-foot);color:#8fa0b8;font-size:.8125rem}
.foot-in{max-width:var(--max);margin:0 auto;padding:30px var(--gutter) 14px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.foot-in .wordmark{font-size:1.4375rem;color:#e6ebf3}
.foot-note{margin:0;flex:1;min-width:220px}
.site-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.site-foot a{color:#a9b6ca;text-decoration:none}
@media (hover: hover) and (pointer: fine){.site-foot nav a:hover{color:#fff;text-decoration:underline}}
.foot-legal{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 30px;color:#8796ae;font-size:.75rem}

/* draft banner + embed */
.draft-bar{background:var(--flag);color:#fff;padding:10px 16px;font-weight:600;text-align:center}
body.embed{background:var(--paper);font-size:1rem}
body.embed .calc{border:0;border-radius:0}
.embed-foot{font-size:.8125rem;padding:10px 14px;color:var(--muted);border-top:1px solid var(--line);margin:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .calc-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .calc-side{position:static;max-width:var(--measure)}
  .hero{gap:40px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .hero h1{font-size:2.5rem}
  .site-note{margin-left:var(--gutter);margin-right:var(--gutter);gap:36px;grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:860px){
  .mh-note{display:none}
}
@media (max-width:700px){
  :root{--gutter:20px}
  .mh{min-height:66px;gap:16px}
  .wordmark{font-size:1.5rem}
  .mh-links{gap:16px;font-size:.8125rem}
  .mh-links a:first-child{display:none}
  .catnav{gap:24px}
  .catnav a{font-size:.8125rem;padding:14px 0 12px}
  .hero{grid-template-columns:minmax(0,1fr);padding:34px var(--gutter) 36px;gap:28px}
  .hero h1{font-size:2.125rem;letter-spacing:-.035em}
  .hero-lede{font-size:.9375rem;margin-bottom:22px}
  .hero-search button{padding:10px 14px}
  .featured{border-left:0;border-top:1px solid rgba(101,117,141,.45);padding:24px 0 0}
  .feat-value{font-size:2.125rem}
  .directory{padding:30px var(--gutter)}
  .dir-head{flex-direction:column;align-items:flex-start;gap:4px}
  .dir-head h2{font-size:1.3125rem}
  .dir-head>span{text-align:left}
  .filter-bar{gap:22px;margin-bottom:26px}
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .tool-link{min-height:80px;padding:16px 80px 16px 0}
  .site-note{display:block;margin:8px var(--gutter) 32px}
  .site-note h2{margin-bottom:10px}
  .crumbs{margin:18px 0 20px}
  .page-heading{display:block;padding-bottom:20px;margin-bottom:22px}
  h1{font-size:1.875rem;letter-spacing:-.03em}
  .answer{font-size:1rem}
  .save-page{margin-top:16px}
  .calc-form,.calc-out{padding:22px}
  .receipt .headline{font-size:2.25rem}
  .prose{font-size:1rem}
  .prose h2,.faq h2,.sources h2,.cite h2{font-size:1.3125rem;margin-top:40px}
  .foot-in{gap:16px;padding-top:24px}
}
@media (max-width:400px){
  :root{--gutter:16px}
  .mh{gap:10px}
  .wordmark{font-size:1.3125rem}
  .saved-link .ic{margin-left:6px}
  .calc-form,.calc-out{padding:18px 16px}
  .tool-link{padding-right:76px}
  .row-arrow{right:42px}
}

@media print{
  .masthead,.nav-wrap,.site-foot,.out-tools,.ad,.cite,.calc-side,.calc-actions,.adv summary,.save-page,.result-note,.sticky-res{display:none!important}
  body{background:#fff;font-size:12pt}
  .calc{border:0}.calc-layout{display:block}
  .calc-out{background:#fff;color:#000}
  .calc-out *{color:#000!important}
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.seg label:active span,.rows .x:active,.hero-search button:active,.save-page:active,.btn-line:active{transform:none}
  .save-tool:active{transform:translateY(-50%)}
  .tool-link:hover .row-arrow{transform:translateY(-50%)}
  .related>a:hover .ic{transform:none}
  .sticky-res,.sticky-res.show{transform:none;opacity:0;transition:opacity 150ms ease,visibility 0s linear 150ms}
  .sticky-res.show{opacity:1;transition:opacity 150ms ease,visibility 0s}
  @starting-style{.adv[open] .grid,.tbl-wrap[open] .tbl-scroll,.copied{transform:none}}
}