/* tools/dividend-tax/index.html's own CSS, extracted from its inline
 * <style> (Task 11): the same self-styled calculator shell, marker-wash
 * .highlight and page-own footer that seis-eis-tax-relief-calculator has.
 *
 * Two narrow-viewport rules near the bottom are the ones to check first if
 * this page ever looks wrong on a phone: the @media(max-width:420px) and
 * @media(max-width:360px) blocks, the second of which restores a
 * #mainNav.chrome-nav padding override that depends on loading AFTER
 * assets/chrome.css to win its cascade tie (see its own inline comment).
 * The harness this task relies on for its "steady" verdict only renders at
 * 1280px, so this file's link position (after chrome.css, like every other
 * page-specific tools file) is what keeps that override working, not
 * anything this file itself does.
 *
 * 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 leaked: flow.css's own .highlight, .panel, .footer-top and
 * .footer-copy each share a selector with this page's own, and even after
 * per-property overrides for all of them the page still measured 494px
 * (0.016%) different from before. Reverted to keep this page's own full
 * copy of the shared bits instead, verified pixel-identical. See
 * tools/salary-dividend-pension/salary-dividend-pension.css for the fuller
 * account of the same decision, on the page where the leaks were large
 * enough to pin down by name.
 */

: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,360px) 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}

/* Fields ------------------------------------------------------------------ */
.field{margin-bottom:1.25rem}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:.85rem;color:var(--ink-muted);margin-bottom:.4rem}
.field input[type=number],.field input[type=email]{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)}
.mono{font-family:var(--font-mono)}
input:focus,button:focus{outline:none}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.field input:focus{border-color:var(--orange)}

/* 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}

/* Email capture ----------------------------------------------------------- */
.capture-form{margin-top:1.5rem;display:flex;gap:.6rem;flex-wrap:wrap}
.capture-form input[type=email]{flex:1;min-width:200px;margin-bottom:0;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)}
.capture-form input[type=email]:focus{border-color:var(--orange)}
/* drawn: .btn-drawn in the markup */ .capture-form button{flex:none;white-space:nowrap}


/* FAQ ----------------------------------------------------------------- */
.faq-section{padding:1rem 0 2.5rem}
.table-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 1.25rem}
.faq{border-top:1px solid var(--rule-soft);padding-top:1.1rem;margin-top:1.1rem}
.faq h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;margin:0 0 .4rem;color:var(--ink)}
.faq p{color:var(--ink-muted);margin:0}

/* 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}


/* 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 */

/* Snag 34. Same nav as the homepage, so the same treatment, plus the .highlight
   span, which is white-space: nowrap because its marker wash is drawn by two
   absolutely positioned pseudo-elements on a single inline-block box; letting it
   wrap would split the wash rather than fix anything, so the type scales instead.
   Qualified with body because a media query adds no specificity of its own. */
@media (max-width: 420px) {
  body .highlight { font-size: 0.95rem; }
}
@media (max-width: 360px) {
  /* Restored in Fix Round 1, having been dropped by mistake when the nav CSS
     moved to chrome.css. #mainNav.chrome-nav is needed on the selector now,
     not the bare #mainNav this page carried before Task 7: chrome.css's own
     #mainNav.chrome-nav{padding:.9rem 1.5rem} rule outranks a bare #mainNav
     on specificity regardless of source order once it carries the extra
     class, so matching it here is what lets this page's own, later <style>
     block still win on the width this narrow only. */
  #mainNav.chrome-nav { padding-left: 1rem; padding-right: 1rem; }
  body .highlight { font-size: 0.82rem; }
}