/* Pay Predictor — the /990 design tokens and rules, reduced to what these two
   pages use (the calculator and its methodology). One file, two pages.
   Navy dominates; gold is rules and the active mark; gold TEXT uses the
   darker accessible token; no shadows; 2px radii. */
:root{
  --mo-navy:#0b2662; --mo-gold:#d4af37; --mo-gold-text:#866812; --mo-teal:#1c5253;
  --mo-ink:#182238; --mo-text:#33415c; --mo-muted:#687386;
  --mo-border:#d9dee7; --mo-border-strong:#b7c0ce; --mo-surface:#f6f7f9; --mo-white:#ffffff;
  --mo-danger:#a62b23; --mo-warning:#7a5700;
  --paper:var(--mo-white); --card:var(--mo-white);
  --ink:var(--mo-ink); --ink2:var(--mo-text); --muted:var(--mo-muted);
  --rule:var(--mo-border); --rule2:var(--mo-border-strong); --band:var(--mo-surface);
  --navy:var(--mo-navy); --gold:var(--mo-gold); --goldtext:var(--mo-gold-text);
  --teal:var(--mo-teal); --brick:var(--mo-danger); --warn:var(--mo-warning);
  --goldsoft:#faf6e8;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A1018; --card:#111927;
    --ink:#DCE3F0; --ink2:#A9B4C8; --muted:#7E8CA3;
    --rule:#1F2A3C; --rule2:#31405A; --band:#0E1622;
    --navy:#7FA3E8; --gold:#D6B15C; --goldtext:#D6B15C; --teal:#4FB3AC; --brick:#D3806F; --warn:#D6B15C;
    --goldsoft:#2A2418;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1018; --card:#111927;
  --ink:#DCE3F0; --ink2:#A9B4C8; --muted:#7E8CA3;
  --rule:#1F2A3C; --rule2:#31405A; --band:#0E1622;
  --navy:#7FA3E8; --gold:#D6B15C; --goldtext:#D6B15C; --teal:#4FB3AC; --brick:#D3806F; --warn:#D6B15C;
  --goldsoft:#2A2418;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
a{color:var(--navy)}
.num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.mono{font-family:var(--mono)}
sup{font-size:11px;line-height:0;vertical-align:super}

/* ── header: the shared nav strip above, one 52px utility row below ── */
header{border-bottom:1px solid var(--rule);background:var(--card);position:sticky;top:0;z-index:20}
.mast{max-width:1200px;margin:0 auto;padding:8px 22px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;min-height:52px}
@media (min-width:761px){.mast{height:52px;flex-wrap:nowrap}}
.brand{display:flex;align-items:baseline;gap:12px;margin-right:auto;min-width:0}
/* The mark is the way back to the firm (WO-2026-09-04-15 T22). The same
   lockup the landing page carries, at mast height. The anchor is a box around
   the two variants and nothing else -- no underline, no colour, no extra
   height -- and centres itself in a row whose text is baseline-aligned, so
   the mast measures the same as before. */
.brandlink{display:inline-flex;align-items:center;align-self:center;
  text-decoration:none;color:inherit;line-height:0}
.brandlink:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.brandlink img{display:block;height:30px;width:auto}
.brandlink .mark-white{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandlink .mark-navy{display:none}
  :root:not([data-theme="light"]) .brandlink .mark-white{display:block}
}
:root[data-theme="dark"] .brandlink .mark-navy{display:none}
:root[data-theme="dark"] .brandlink .mark-white{display:block}
.wordmark{font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap}
.provenance{font-size:12px;color:var(--muted);white-space:nowrap}
.mastbtns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.saynote{flex-basis:100%;text-align:right;font-size:12px;color:var(--ink2);min-height:0}
.saynote:empty{display:none}
.saynote[data-bad="1"]{color:var(--brick)}
.btn{padding:7px 12px;border:1px solid var(--rule2);border-radius:2px;background:var(--card);
  cursor:pointer;font-size:14px;font-weight:500;transition:border-color .14s,background .14s,color .14s;
  text-decoration:none;color:var(--ink);display:inline-block;line-height:1.3}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:#143474;border-color:#143474}
.btn.quiet{border-color:transparent;background:none;color:var(--ink2);padding:6px 8px}
.btn.quiet:hover{color:var(--navy);text-decoration:underline;border-color:transparent}
.btn[disabled]{opacity:.45;cursor:default}

/* ── page ── */
.shell{max-width:1200px;margin:0 auto;padding:18px 22px 60px}
main{min-width:0}
.context{margin:0 0 14px}
.context h1{font-size:24px;line-height:1.2;color:var(--navy);letter-spacing:-.01em}
.context .ctx{margin:4px 0 0;font-size:13px;color:var(--muted)}
.context .basis{margin:6px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.5;max-width:100ch}
.context .caution{margin:6px 0 0;font-size:13px;color:var(--warn);line-height:1.5;max-width:100ch}
.context .migrate{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* ── tabs: text with a fine gold active rule ── */
.tabs{display:flex;gap:4px;margin:16px 0 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.tab{padding:9px 14px;border:none;background:none;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold);font-weight:600}
.tab:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* ── assumptions ── */
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;
  padding:16px 0 6px;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);margin-top:16px}
.control.full{grid-column:1 / -1}
.control label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--muted);margin-bottom:6px}
.control .val{color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px;margin-left:6px;
  font-variant-numeric:tabular-nums lining-nums}
.hint{margin:5px 0 0;font-size:12.5px;color:var(--muted);min-height:1.2em}
input[type=range]{width:100%;accent-color:var(--navy);margin:6px 0 0}
.range-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums lining-nums}
select,input[type=number]{width:100%;padding:7px 9px;border:1px solid var(--rule2);border-radius:2px;
  background:var(--card);color:var(--ink);font-size:14px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg-btn{padding:6px 11px;border:1px solid var(--rule2);border-radius:2px;background:var(--card);
  cursor:pointer;font-size:13px;font-weight:500;color:var(--ink2)}
.seg-btn:hover{border-color:var(--navy);color:var(--ink)}
.seg-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.cur-row{display:flex;gap:8px;align-items:center}
.cur-row select{flex:1}
#fx{width:84px}
.hidden{display:none!important}
.cad-banner{margin:14px 0 0;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--goldsoft);border-left:3px solid var(--gold)}
.bridge-line{margin:10px 0 0;padding:10px 12px;font-size:13.5px;line-height:1.55;color:var(--ink);
  border-top:1px solid var(--rule2,#dde1e7);border-bottom:1px solid var(--rule2,#dde1e7)}
.bridge-line a{color:var(--navy,#0b2662)}
.summary-line{margin:14px 0 0;padding:10px 0;font-size:14px;line-height:1.5;color:var(--ink);
  border-bottom:1px solid var(--rule)}

/* ── tables ── */
.section{margin-top:22px}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.sechead h2{font-size:17px}
.sechead .sub{font-size:13px;color:var(--muted);flex:1 0 100%;margin-top:2px}
.card{background:var(--card);border-top:1px solid var(--rule2);overflow-x:auto}
.card.pad{padding:14px 0 4px}
table{border-collapse:collapse;width:100%;font-size:13px}
.estline{margin:0 0 6px;font-size:12.5px;color:var(--goldtext);font-style:italic;line-height:1.5}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:middle}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600;background:var(--card);border-bottom:1px solid var(--rule2)}
thead th.block{text-align:center;color:var(--ink);text-transform:none;letter-spacing:0;font-size:12.5px;
  border-bottom:1px solid var(--rule)}
th.lvl,td.lvl{position:sticky;left:0;z-index:3;background:var(--card)}
td.lvl{font-weight:600}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums lining-nums}
th.blockstart,td.blockstart{border-left:1px solid var(--rule2)}
td.p50{font-weight:600}
th.p50{color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--band)}
.estnote{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:100ch}
.l7-note,.fo-note{margin:8px 0 0;font-size:12.5px;color:var(--muted);font-style:italic}
.discuss{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink2)}
footer.site{max-width:1200px;margin:0 auto;padding:0 22px 40px;font-size:12px;color:var(--muted)}

/* ── methodology body (also inlined into the calculator's Methodology tab) ── */
.methodbody{font-size:14px;line-height:1.6}
.methodbody h2{font-size:16px;color:var(--navy);margin:26px 0 6px;padding-top:12px;border-top:1px solid var(--rule)}
.methodbody h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.methodbody h3{font-size:14px;margin:16px 0 3px}
.methodbody p{max-width:80ch}
.methodbody ul{max-width:80ch;padding-left:20px}
.methodbody .scroll{overflow-x:auto;margin:12px 0;border-top:1px solid var(--rule2)}
.methodbody table{white-space:normal}
.methodbody th,.methodbody td{white-space:normal;vertical-align:top}
.methodbody td:first-child{font-weight:600}
.methodbody .stamp{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 14px;
  padding:8px 11px;background:var(--band);border-left:2px solid var(--gold);border-radius:2px}
.methodbody .callout{border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:2px;
  padding:12px 15px;margin:16px 0}
.methodbody .callout p{margin:6px 0 0}
.methodbody .reg{font-family:var(--mono);font-size:13px;padding:8px 11px;background:var(--band);
  border-left:2px solid var(--navy);margin:10px 0;max-width:80ch}
.methodbody tr.sum td{font-weight:600;border-top:2px solid var(--navy)}
.pos{color:var(--teal);font-weight:600}
.neg{color:var(--brick);font-weight:600}

@media (max-width:760px){
  .mast{padding:8px 13px}
  .shell{padding:12px 13px 48px}
  .controls{grid-template-columns:1fr}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .btn .long{display:none}
  .context h1{font-size:21px}
  .provenance{display:none}
  .brandlink img{height:24px}
}
@media print{
  header,.dmo-nav,.tabs,.btn,.saynote,.discuss,input[type=range],.range-ends,#panel-method{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .shell{padding:0;max-width:none}
  .context h1{font-size:17pt;color:#000}
  .context .ctx,.context .basis,.summary-line,.estnote{color:#222}
  .controls{border-top:2px solid #000}
  .card{overflow:visible;border-top:1px solid #000}
  thead{display:table-header-group}
  thead th{position:static;background:#fff;color:#000}
  th.lvl,td.lvl{position:static}
  tr{page-break-inside:avoid}
  a{color:#000;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}