/* Asset Manager Compensation Outlook — the same design tokens and rules
   pay-predictor/pp.css carries, reduced to what this page uses, plus the
   chart layer.
   Navy dominates; gold is rules and the active mark; gold TEXT uses the darker
   accessible token; no shadows; 2px radii.

   Chart colours are their own tokens, not the UI tokens. The brand steps read
   correctly as accents but fail as adjacent chart series: validated against the
   dataviz six checks, --navy/--teal/--gold sit at OKLCH ΔE 12.3 in dark mode,
   below the 15 floor for normal vision. The chart steps below pass all six in
   both modes (light on #ffffff, dark on #111927). Do not swap them back. */
: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;
  /* One line length for every prose block on the page. See the header
     comment: nothing was consistent, and the raggedness read as broken
     wrapping. Retune the page by changing this alone. */
  --measure:960px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* chart layer — validated, light mode on #ffffff */
  --ch-act:#2D5BA8; --ch-scen:#00968E; --ch-avg:#B8860B;
  --ch-grid:#e8edf3; --ch-axis:#d9e2ec; --ch-band:0.10;
}
@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;
    --ch-act:#5285DB; --ch-scen:#109C8D; --ch-avg:#B28829;
    --ch-grid:#1F2A3C; --ch-axis:#31405A; --ch-band:0.16;
  }
}
: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;
  --ch-act:#5285DB; --ch-scen:#109C8D; --ch-avg:#B28829;
  --ch-grid:#1F2A3C; --ch-axis:#31405A; --ch-band:0.16;
}
*{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}

/* ── 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}
.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}
.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.quiet{border-color:transparent;background:none;color:var(--ink2);padding:6px 8px}
.btn.quiet:hover{color:var(--navy);text-decoration:underline;border-color:transparent}

/* ── 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);max-width:var(--measure)}
.context .basis{margin:6px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.5;
  max-width:var(--measure)}
.context .caution{margin:6px 0 0;font-size:13px;color:var(--warn);line-height:1.5;
  max-width:var(--measure)}

/* ── as-of control ── */
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:10px 0 9px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:14px}
.control label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--muted);margin-bottom:6px}
select{padding:7px 9px;border:1px solid var(--rule2);border-radius:2px;
  background:var(--card);color:var(--ink);font-size:14px;min-width:210px}
.vintage{margin-left:auto;font-size:12.5px;color:var(--muted)}

/* ── tabs: text with a fine gold active rule (the /pay-predictor idiom) ── */
.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}
.hidden{display:none!important}

/* ── the verdict: the answer before the evidence ── */
.verdict{margin-top:18px;padding-top:14px;border-top:2px solid var(--navy)}
.verdict p{margin:0;max-width:var(--measure);font-size:15.5px;line-height:1.62;color:var(--ink)}
.verdict b{color:var(--navy);font-weight:600;white-space:nowrap}
.readthrough{margin-top:16px;padding:12px 15px;background:var(--band);
  border-left:3px solid var(--teal);font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:var(--measure)}
.readthrough b{color:var(--ink)}
/* An unmissable limit, not a footnote: this sits with the table it qualifies. */
.caveat{margin:10px 0 0;padding:9px 12px;background:var(--goldsoft);border-left:3px solid var(--warn);
  font-size:12.5px;line-height:1.55;color:var(--ink);max-width:var(--measure)}
.caveat b{color:var(--warn)}
/* The model-estimate notice sits at the foot with the stamp, so it needs its
   own separation rather than the tight spacing it had inside .context. */
/* The model-estimate caution sits directly under main, outside .context,
   so the measure above did not reach it and it alone ran the full 1156px
   at 165 characters. It is the last thing a reader sees; it should read
   like the rest of the page. */
main>.caution{margin-top:26px;font-size:14px;line-height:1.55;color:var(--ink);
  max-width:var(--measure)}

/* ── sections & tables ── */
.section{margin-top:24px}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.sechead h2{font-size:17px;color:var(--navy)}
.sechead .sub{font-size:13px;color:var(--muted);flex:1 0 100%;margin-top:2px;line-height:1.5;
  max-width:var(--measure)}
.card{background:var(--card);border-top:1px solid var(--rule2);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
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)}
thead th[rowspan]{vertical-align:bottom}
thead th.wrap{white-space:normal;min-width:9em}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums lining-nums}
td.lbl{font-weight:600;color:var(--ink)}
td.desc{white-space:normal;color:var(--muted);font-size:12.5px;max-width:34ch}
.sub2{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}
tbody tr:last-child td{border-bottom:none}
tbody tr.clickable:hover{background:var(--band)}
/* the column the section is about: a gold rule, not a gold block */
th.key,td.key{border-left:1px solid var(--gold);border-right:1px solid var(--gold)}
th.key{color:var(--ink)}
td.key{font-weight:600}
tr.total td{font-weight:600;border-top:2px solid var(--navy)}
tr.pick td{background:var(--goldsoft)}
tr.pick td.lbl{box-shadow:inset 3px 0 0 var(--gold)}
tr.clickable{cursor:pointer}
/* The rows are a choice, so they carry a choice marker. A cursor change alone
   was the only affordance, and row hover fired on inert tables too. */
td.lbl .dot{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;
  border:1px solid var(--rule2);background:var(--card)}
tr.pick td.lbl .dot{border-color:var(--goldtext);background:var(--goldtext);
  box-shadow:inset 0 0 0 2px var(--card)}
.note{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;
  max-width:var(--measure)}
.pos{color:var(--teal);font-weight:600}
.neg{color:var(--brick);font-weight:600}

/* ── figures ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule);margin-top:16px}
.stat{padding:14px 16px 13px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:none;padding-left:0}
/* The answer has to out-rank the page title. At 26px it was 2px larger than the
   24px h1 and read as a peer of it. */
.stat .v{font-size:31px;font-weight:600;color:var(--navy);line-height:1.12;letter-spacing:-.015em}
.stat .v.pos{color:var(--teal)}
.stat .v.neg{color:var(--brick)}
.stat .t{margin-top:5px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.stat .k{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.45}

/* ── charts ── */
.legend{display:flex;flex-wrap:wrap;gap:7px 20px;margin:12px 0 0;font-size:12.5px;color:var(--ink2)}
.lg{display:inline-flex;align-items:center;gap:6px}
.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:12px;
  border-top:1px solid var(--rule2)}
.chart{margin:0;padding:12px 14px 8px;border-left:1px solid var(--rule);min-width:0}
.chart:first-child{border-left:none;padding-left:0}
.chart figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-bottom:2px}
.chart .t{font-size:14px;font-weight:600;color:var(--ink)}
.chart .a{font-size:12px;color:var(--muted)}
.chart .v{margin-left:auto;font-size:17px;font-weight:600;color:var(--navy);
  font-variant-numeric:tabular-nums lining-nums}
.chart .v.pos{color:var(--teal)}
.chart .v.ctx{font-size:14px;font-weight:600;color:var(--muted)}
.chart .v.neg{color:var(--brick)}
.chart .vk{width:100%;text-align:right;font-size:11.5px;color:var(--muted);margin-top:-2px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
/* Presentation attributes cannot read a CSS variable, so the marks wear
   classes and take their colour from here. That is what makes them follow
   the reader's light/dark setting. */
.c-act{stroke:var(--ch-act)}
.c-scen{stroke:var(--ch-scen)}
.c-band{fill:var(--ch-scen);fill-opacity:var(--ch-band)}
.c-avg{stroke:var(--ch-avg)}
.t-avg{fill:var(--ch-avg);font-size:9.5px;font-weight:600}
.t-ax{fill:var(--muted);font-size:9.5px;font-variant-numeric:tabular-nums}
.t-sc{fill:var(--ink2);font-size:9px}
.g-line{stroke:var(--ch-grid)}
.g-axis{stroke:var(--ch-axis)}
.m-end{fill:var(--ch-act);stroke:var(--card);stroke-width:2}

footer.site{max-width:1200px;margin:0 auto;padding:0 22px 40px;font-size:12px;color:var(--muted)}
.stamp{margin-top:26px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--muted);line-height:1.6;max-width:var(--measure)}

@media (max-width:1000px){
  .charts{grid-template-columns:1fr}
  .chart{border-left:none;border-top:1px solid var(--rule);padding-left:0}
  .chart:first-child{border-top:none}
  .stats{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--rule);padding-left:0}
  .stat:first-child{border-top:none}
  .reads{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mast{padding:8px 13px}
  .shell{padding:12px 13px 48px}
  .context h1{font-size:21px}
  .provenance{display:none}
  .brandlink img{height:24px}
  select{min-width:0;width:100%}
  .vintage{margin-left:0;flex-basis:100%}
}
@media print{
  /* Print what is on screen, as /pay-predictor does: the hidden panel stays
     hidden and the tab strip itself is chrome. The .basis line tells a reader
     of the printed page that a second tab exists. */
  header,.dmo-nav,.tabs,.btn,.saynote{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,.note,.stamp{color:#222}
  .controls{border-top:2px solid #000}
  .card{overflow:visible;border-top:1px solid #000}
  thead{display:table-header-group}
  thead th{background:#fff;color:#000}
  #tStance,#tSen{font-size:9.5pt}
  #tStance td.desc{white-space:normal}
  a{color:#000;text-decoration:none}
  /* Keep a chart whole: the break was landing between caption and plot. */
  .chart,.stat,.lede,.reads p{break-inside:avoid;page-break-inside:avoid}
  .charts{grid-template-columns:repeat(3,1fr);break-inside:avoid;page-break-inside:avoid}
  .stats{grid-template-columns:repeat(3,1fr);break-inside:avoid;page-break-inside:avoid}
  .card{break-inside:avoid;page-break-inside:avoid}
  tr{break-inside:avoid;page-break-inside:avoid}
  .sechead,.legend{break-after:avoid;page-break-after:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}