/* tools/salary-dividend-pension/index.html's own CSS, extracted from its
 * two inline <style> blocks (Task 11). Entirely bespoke to this one page:
 * its own header/panel/grid layout, not tools/_shared/flow.css's wizard
 * pattern.
 *
 * The :root block carrying six of the site's nine recorded token exemptions
 * (--paper, --paper-2, --paper-3, --paper-card, --rule-soft, --orange-wash)
 * stays inline in the page itself, not here: test/tokens.test.js's
 * canon-divergence check reads :root out of this file by name, and a value
 * moved into an unlisted stylesheet would silently drop out of what that
 * test can see. See the page's own inline comment for the full KNOWN DEFECT
 * explanation (a white paper ramp, confirmed drift rather than a deliberate
 * choice, held rather than corrected because fixing it drops two pairs
 * below WCAG AA on this page specifically).
 *
 * This page does NOT link tools/_shared/flow.css, unlike most of the other
 * pages Task 11 touched. It was tried: the tool-top:css:start/end block
 * below is byte-identical to flow.css's own copy, so linking flow.css and
 * dropping this page's copy looked like a safe, small win. It repeatedly
 * was not: flow.css's own main, .panel, .eyebrow, .field label and
 * .field input rules all share a selector or a higher-specificity match
 * with something this page also styles, and each one CASCADED IN, one
 * property or one selector at a time, undoing this page's white-paper
 * ramp, squeezing <main> to flow.css's own 34rem, stripping the border off
 * every number input, and adding stray margin down six stacked .panel
 * cards. Four separate fixes closed those in turn (main{max-width:none;
 * margin:0;padding:0;min-height:0}, .panel{margin:0}, .field .num{...}),
 * and the page was STILL 180px taller than before with no further leak
 * this file's own comparison against flow.css's selector list could find.
 * Reverting flow.css entirely and keeping this page's own copy of the
 * shared block, as below, is the version that is actually verified
 * pixel-identical, rather than merely believed to be after four rounds of
 * whack-a-mole. The lost byte saving is a few hundred bytes against a
 * family ceiling this task clears by a wide margin regardless.
 */



*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 72px}

.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.17em;
         text-transform:uppercase;color:var(--ink-faded)}

/* ---------- header ---------- */
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;
           padding-bottom:20px;border-bottom:1.5px solid var(--ink);margin-bottom:26px}
.wordmark{height:30px;width:auto;display:block}
.title-block h1{font-family:var(--font-display);font-weight:600;font-size:clamp(25px,3.6vw,38px);
                line-height:1.05;margin:0;letter-spacing:-.015em}
.title-block p{margin:5px 0 0;color:var(--ink-muted);font-size:13.5px}
.hl{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.hl::before{content:"";position:absolute;left:-.1em;right:-.1em;top:.14em;bottom:.06em;
            background:var(--orange-soft);opacity:.42;z-index:-1;border-radius:2px 8px 3px 7px;
            transform:rotate(-.35deg)}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:26px;align-items:start}
@media(max-width:920px){.grid{grid-template-columns:1fr}}

.panel{background:var(--paper-card);border:1px solid var(--rule-soft);border-radius:10px;padding:20px}
.panel + .panel{margin-top:18px}
.panel h2{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
          color:var(--ink-faded);margin:0 0 15px;font-weight:500}

/* ---------- inputs ---------- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11.5px;color:var(--ink-faded);margin-top:3px;line-height:1.4}
.num{font-family:var(--font-mono);font-size:14px;font-weight:500;width:104px;text-align:right;
     padding:5px 8px;border:1px solid var(--rule-soft);border-radius:6px;
     background:var(--paper);color:var(--ink)}
.num:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-wash)}
input[type=range]{width:100%;accent-color:var(--orange);margin:3px 0 0;cursor:pointer}

/* The two headline choices. Visually heavier than every other control so the
   salary-versus-dividend trade off reads as the point of the page. */
.driver{padding:14px 15px;border:1px solid var(--rule-soft);border-radius:8px;
        background:var(--paper);margin-bottom:12px}
.driver:last-child{margin-bottom:0}
.driver.lead{border-left:3px solid var(--orange)}
.driver-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.driver-name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em}

.derived{display:flex;justify-content:space-between;align-items:baseline;
         padding:11px 13px;background:var(--paper-3);border-radius:7px;margin:4px 0 16px}
.derived span:first-child{font-size:12.5px;color:var(--ink-muted);font-weight:600}
.derived span:last-child{font-family:var(--font-mono);font-size:16px;font-weight:600}

.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--orange);margin-top:2.5px;width:15px;height:15px;cursor:pointer}

details.adv{margin-top:15px;border-top:1px solid var(--rule-soft);padding-top:13px}
details.adv summary{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;
                    text-transform:uppercase;color:var(--ink-faded);cursor:pointer;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+ ";color:var(--orange)}
details.adv[open] summary::before{content:"- "}
details.adv > div{padding-top:14px}

/* ---------- headline result ---------- */
.headline{background:var(--paper-card);border:1px solid var(--rule-soft);
          border-left:4px solid var(--orange);border-radius:10px;padding:22px 24px}
.headline .big{font-family:var(--font-display);font-size:clamp(38px,6.4vw,58px);font-weight:600;
               line-height:1;letter-spacing:-.02em;margin:6px 0 0}
.headline .sub{font-size:13.5px;color:var(--ink-muted);margin-top:9px}
.split{display:flex;flex-wrap:wrap;gap:26px;margin-top:17px;padding-top:15px;
       border-top:1px solid var(--rule-soft)}
.split div{min-width:104px}
.split .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
          color:var(--ink-faded)}
.split .v{font-family:var(--font-mono);font-size:19px;font-weight:600;margin-top:3px}

/* ---------- allocation bar ---------- */
.bar{display:flex;height:34px;border-radius:7px;overflow:hidden;margin:6px 0 12px;
     border:1px solid var(--rule-soft)}
.bar div{transition:width .25s var(--ease)}
.legend{display:flex;flex-wrap:wrap;gap:7px 20px}
.legend .item{display:flex;align-items:center;gap:7px;font-size:12.5px}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.legend .amt{font-family:var(--font-mono);font-weight:600;margin-left:auto}

/* ---------- marginal routes ---------- */
.route{display:grid;grid-template-columns:88px 1fr 78px;align-items:center;gap:12px;
       padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.route:last-child{border-bottom:none}
.route .nm{font-size:13px;font-weight:600}
/* display:block is load bearing. These are spans, and an inline box ignores
   height, which silently collapses the bar to nothing. */
.route .track{display:block;height:11px;background:var(--paper-3);border-radius:6px;overflow:hidden}
.route .fill{display:block;height:11px;border-radius:6px;transition:width .3s var(--ease)}
.route .val{font-family:var(--font-mono);font-size:14.5px;font-weight:600;text-align:right}
.route.win .nm::after{content:"BEST";font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;
                      background:var(--orange);color:#fff;padding:1.5px 5px;border-radius:3px;
                      margin-left:7px;vertical-align:1.5px}

/* ---------- scenario comparison ---------- */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:700px){.scen{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule-soft);border-radius:9px;padding:15px}
.card.best{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-wash)}
.card .lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--ink-faded);min-height:26px}
.card .amt{font-family:var(--font-mono);font-size:23px;font-weight:600;margin:7px 0 3px}
.card .delta{font-size:12px;font-weight:600}
.card .delta.up{color:var(--status-ok)} .card .delta.down{color:var(--orange-deep)}
.card .det{font-size:11.5px;color:var(--ink-muted);margin-top:8px;padding-top:8px;
           border-top:1px solid var(--rule-soft);line-height:1.5}

/* ---------- tables ---------- */
table.calc{width:100%;border-collapse:collapse;font-size:13px}
table.calc td{padding:7px 0;border-bottom:1px solid var(--rule-soft)}
table.calc td:last-child{text-align:right;font-family:var(--font-mono);font-weight:500;
                         white-space:nowrap;padding-left:12px}
table.calc tr.sum td{font-weight:700;border-bottom:2px solid var(--ink)}
table.calc tr.sub td{color:var(--ink-muted)}
/* The working under each line. font-weight and white-space are both resets:
   the total rows are bold, and the value column sets nowrap. The colour is its
   own token rather than --ink-faded, because these workings are 11px and
   --ink-faded is tuned for larger labels, where it clears a contrast ratio it
   misses at this size. Both tokens now come from assets/tokens.css. */
table.calc td .wk{display:block;margin-top:3px;font-size:11px;line-height:1.45;
                  font-weight:400;white-space:normal;color:var(--ink-working)}
table.calc tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto}

/* ---------- flags ---------- */
.flag{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:8px;
      font-size:13px;line-height:1.5;margin-top:10px;background:var(--orange-wash);
      border-left:3px solid var(--orange)}
.flag.ok{background:transparent;border-left-color:var(--status-ok);border:1px solid var(--rule-soft);
         border-left:3px solid var(--status-ok)}
.flag b{display:block;margin-bottom:2px}
.flag .ic{font-family:var(--font-mono);font-weight:700;color:var(--orange);flex:none}
.flag.ok .ic{color:var(--status-ok)}

/* ---------- footer ---------- */
/* Scoped to a direct child of .wrap. The site build appends a second, full site
   footer after this one; a bare `footer` selector would silently restyle it. */
.wrap > footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule-soft);
       font-size:11.5px;color:var(--ink-faded);line-height:1.65}
.wrap > footer b{color:var(--ink-muted)}
.btnrow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
button.preset{font-family:var(--font-sans);font-size:12px;font-weight:600;padding:7px 12px;
              text-align:center;
              border:1px solid var(--rule-soft);background:var(--paper);color:var(--ink-2);
              border-radius:6px;cursor:pointer;transition:all .18s var(--ease)}
button.preset:hover{border-color:var(--orange);color:var(--orange);
                    transform:translateY(-1px);box-shadow:0 4px 12px var(--orange-wash)}
h3.sec{font-family:var(--font-display);font-size:20px;font-weight:600;margin:26px 0 12px;
       letter-spacing:-.01em}


/* Nav rules moved to /assets/chrome.css on 2026-09-01, including the
 * body padding-top offset for the fixed nav (chrome.css scopes that to
 * body:has(#mainNav.chrome-nav) instead of setting it here). */
.skip-link{position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;padding:.6rem 1rem;
  z-index:100;font-weight:600;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}
.after{max-width:760px;margin:40px auto 0;padding:0 20px}
.after h2{font-family:var(--font-display);font-size:clamp(21px,3vw,27px);font-weight:600;
  letter-spacing:-.01em;margin:34px 0 12px}
.after p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0 0 12px}
.faq-item{border-top:1px solid var(--rule-soft);padding:15px 0}
.faq-item h3{font-family:var(--font-display);font-size:17.5px;font-weight:600;margin:0 0 7px;letter-spacing:-.005em}
.faq-item p{margin:0;color:var(--ink-muted);font-size:14px}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:6px}
.rel a{display:block;padding:14px 15px;border:1px solid var(--rule-soft);border-radius:9px;
  background:var(--paper-card);text-decoration:none;transition:border-color .15s,transform .15s}
.rel a:hover{border-color:var(--orange);transform:translateY(-1px)}
.rel .rn{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:3px}
.rel .rd{display:block;color:var(--ink-muted);font-size:12.5px;line-height:1.45}
/* .cta-btn is a .btn-drawn in the markup */ .cta-btn{margin-top:6px;text-decoration:none}

#siteFooter{margin-top:52px;border-top:1px solid var(--rule-soft);background:var(--paper-2);
  padding:28px 20px 34px}
#siteFooter .inner{max-width:1180px;margin:0 auto}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.footer-wordmark{height:22px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:1.1rem}
.footer-links a{color:var(--ink-muted);text-decoration:none;font-size:13px}
.footer-links a:hover{color:var(--orange)}
.footer-copy{color:var(--ink-muted);font-size:12.5px;line-height:1.6;margin:16px 0 0;max-width:70ch}
/* --orange-deep, matching tools/_shared/flow.css. This page-local rule has
   the same specificity as the shared one and wins on source order, so the
   shared fix does not reach this page without it. */
.footer-copy a{color:var(--orange-deep)}
.footer-legal{color:var(--ink-faded);font-size:11.5px;margin-top:10px}

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

/* The tool-top strip is a child of main rather than of .wrap, so on this page
   alone it runs full bleed and the back link's left border is clipped by the
   viewport edge, while the heading beneath it starts at the gutter. Matching
   .wrap's own max-width and inline padding puts the two back into line. */
main > .tool-top{width:min(1140px,calc(100% - 40px));
  margin-left:auto;margin-right:auto}