/* seis-eis-tax-relief-calculator/index.html's own CSS, extracted from its
 * inline <style> (Task 11): the self-styled calculator layout (.container,
 * .hero, .calc-grid, .panel, .results-*), the marker-wash .highlight variant
 * this page shares only with tools/dividend-tax and tools/working-from-home,
 * and this page's own footer (a third footer pattern, distinct from both
 * assets/chrome.css's shared one and tools/_shared/flow.css's own).
 *
 * This page does NOT link tools/_shared/flow.css. It was tried, to dedupe
 * :root{--font-mono}, *{box-sizing:border-box}, body, .skip-link and the
 * tool-top:css:start/end block, all byte-identical to flow.css's own
 * copies. It repeatedly leaked: flow.css's own .highlight, .panel,
 * .footer-top and .footer-copy each share a selector with this page's own,
 * and several rounds of per-property overrides still left a small,
 * unexplained pixel diff (3236px, 0.11%) that this file's own comparison
 * against flow.css's selector list could not account for. Reverted to keep
 * this page's own full copy of the shared bits, verified pixel-identical,
 * rather than a smaller file that is only mostly right. See
 * tools/salary-dividend-pension/salary-dividend-pension.css for the fuller
 * account of the same decision on a page where the leaks were large enough
 * to pin down exactly (a squeezed <main>, an overridden token exemption, a
 * bordered input losing its border); here they never fully resolved to a
 * named cause, which is itself the reason not to keep the link.
 */
:root{
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.6;padding-top:4.5rem}

.skip-link{position:absolute;left:-999px;top:0;background:var(--orange);color:var(--paper);padding:.6rem 1rem;z-index:100;font-family:var(--font-sans);font-weight:600;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}

/* Nav rules moved to /assets/chrome.css on 2026-09-01. */

/* Marker wash (HighlightText) - ported from index.html, 2026-05-19 -------- */
.highlight{position:relative;display:inline-block;background:transparent;padding:0 .12em;white-space:nowrap;z-index:0;color:var(--ink)}
.highlight::before,.highlight::after{content:"";position:absolute;background:var(--orange-soft);z-index:-1;pointer-events:none;opacity:.7}
.highlight::before{left:-.08em;right:.06em;top:-.12em;bottom:.2em;filter:url(#marker-rough)}
.highlight::after{left:.06em;right:-.08em;top:.15em;bottom:-.08em;filter:url(#marker-rough-2)}

/* Layout ----------------------------------------------------------------- */
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
@media (min-width:768px){.container{padding:0 3rem}}

.hero{max-width:640px;padding:3rem 0 1rem}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:.9rem}
h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;font-size:clamp(1.9rem,4.2vw,2.75rem);line-height:1.15;margin:0 0 .9rem;color:var(--ink)}
.lede{color:var(--ink-2);font-size:1.1rem;margin:0;max-width:38rem}

.calculator{padding:1.5rem 0 3rem}
.calc-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){.calc-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:3rem;align-items:start}}
.results-col{position:static}
@media (min-width:768px){.results-col{position:sticky;top:5.75rem}}

.panel{background:var(--paper-card);border:1px solid var(--rule);border-radius:0;padding:1.75rem 1.5rem}

/* Scheme toggle ------------------------------------------------------------ */
.scheme-toggle{display:flex;margin-bottom:1.75rem;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.scheme-toggle button{flex:1;padding:.7rem;border:none;background:var(--paper-card);color:var(--ink);font-family:var(--font-sans);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.scheme-toggle button + button{border-left:1px solid var(--rule)}
.scheme-toggle button.active{background:var(--orange-wash);color:var(--ink);box-shadow:inset 0 0 0 2px var(--orange)}
.scheme-toggle button:hover:not(.active){background:var(--paper-2)}

/* Fields ------------------------------------------------------------------ */
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:.85rem;color:var(--ink-muted);margin-bottom:.4rem}
.field input[type=number],.field input[type=email],.field select{width:100%;padding:.7rem .8rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);font-family:var(--font-sans);font-size:1rem;color:var(--ink)}
.field input[type=range]{width:100%;accent-color:var(--orange)}
.mono{font-family:var(--font-mono)}
input:focus,select:focus,button:focus{outline:none}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.field input:focus,.field select:focus{border-color:var(--orange)}

.disclosure{background:none;border:none;color:var(--orange-deep);font-family:var(--font-sans);font-weight:600;font-size:.9rem;cursor:pointer;padding:0;margin-bottom:1rem}
.fold{display:none;border-left:2px solid var(--rule);padding-left:1rem;margin-bottom:1rem}
.fold.open{display:block}

/* Results panel ------------------------------------------------------------ */
.results-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.4rem}
.results-hero{font-family:var(--font-mono);font-weight:600;font-size:clamp(2rem,5vw,2.6rem);color:var(--orange-deep);line-height:1.05;margin-bottom:1.4rem}
.results-rows .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule-soft);font-size:.95rem}
.results-rows .row:last-child{border-bottom:none}
.results-rows .row .val{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.caveat{font-size:.8rem;color:var(--ink-muted);margin-top:.9rem;line-height:1.55}

.badge{display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;border:1px solid;margin-left:.5rem;vertical-align:middle;white-space:nowrap}
.badge-ok{color:var(--status-ok);border-color:var(--status-ok)}
.badge-muted{color:var(--ink-muted);border-color:var(--ink-muted)}

.table-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:2rem 0 .6rem}
.compare{width:100%;border-collapse:collapse;font-size:.9rem}
.compare th{text-align:left;padding:.6rem .5rem;border-bottom:2px solid var(--rule);color:var(--ink-muted);font-weight:600;font-family:var(--font-sans)}
.compare td{padding:.6rem .5rem;border-bottom:1px solid var(--rule-soft);font-family:var(--font-mono)}
.compare td:first-child{font-family:var(--font-sans)}

#email-copy-mount{margin-top:2rem}

/* CTA ----------------------------------------------------------------- */
.cta{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2rem 0;margin-top:1rem}
.cta p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:44rem}
/* .btn-primary is a .btn-drawn in the markup */ .btn-primary{margin-top:1.1rem;text-decoration:none}

/* .send-btn is a .btn-drawn in the markup */ .send-btn{white-space:nowrap}


/* Footer ---------------------------------------------------------------- */
footer{max-width:1100px;margin:3rem auto 0;padding:2.5rem 1.5rem 2rem;border-top:1px solid var(--rule);color:var(--ink-muted);font-size:.9rem}
@media (min-width:768px){footer{padding:2.5rem 3rem 2rem}}
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
@media (min-width:640px){.footer-top{flex-direction:row;align-items:center;justify-content:space-between}}
.footer-wordmark{height:20px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:1.1rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--orange)}
.footer-copy{margin:0 0 1rem;line-height:1.6}
.footer-legal{font-size:.7rem;letter-spacing:.04em;color:var(--ink-muted);padding-top:1rem;border-top:1px solid var(--rule-soft)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}

/* tool-top:css:start */
/* Every tool is entered from the toolbox, so every tool owes the visitor one
   obvious way back to it and one line saying what they came here for. */
.tool-top{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.15rem;
  margin:0 0 1.9rem;padding:0 0 1.15rem;border-bottom:1px solid var(--rule-soft,#B3A887)}
.tool-back{display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--font-sans,"Plus Jakarta Sans",-apple-system,system-ui,sans-serif);
  font-size:.95rem;font-weight:600;text-decoration:none;line-height:1;min-height:48px;
  color:var(--orange-deep,#B8431A);background:transparent;
  border:2px solid var(--orange,#DF5911);padding:.75rem 1.35rem;border-radius:5px;
  transition:background .15s,color .15s,transform .15s}
.tool-back i{font-style:normal;font-size:1.05em;line-height:1}
.tool-back:hover,.tool-back:focus-visible{background:var(--orange-wash,rgba(223,89,17,0.18));color:var(--ink,#141414);transform:translateX(-2px)}
.tool-back:focus-visible{outline:2px solid var(--orange,#DF5911);outline-offset:3px}
.tool-what{margin:0;flex:1 1 21rem;min-width:0;
  font-family:var(--font-display,Newsreader,Georgia,serif);
  font-size:1.02rem;line-height:1.4;color:var(--ink-2,#2A2724)}
@media (max-width:34rem){
  .tool-what{flex-basis:100%;font-size:.95rem}
  .tool-back{width:100%;justify-content:center;min-height:54px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.tool-back{transition:background .15s,color .15s}
  .tool-back:hover,.tool-back:focus-visible{transform:none}}
/* tool-top:css:end */