@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans.woff2)format("woff2");
 font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-italic.woff2)format("woff2");
 font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2)format("woff2");
 font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2)format("woff2");
 font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url(/fonts/caveat.woff2)format("woff2");
 font-weight:500 600;font-style:normal;font-display:swap}
:root{
  --bg:#F7F6F0; --bg2:#EDEBE1; --panel:#FBFBF6; --hover:#F0EEE5; --sel:#FAE9E7;
  --line:#E3E1D7; --line2:#D1CEC0; --grid:rgba(29,26,24,.05);
  --ink:#1D1A18; --ink2:#3B3632; --muted:#67615A;
  --rich:#1D1A18; --cheap:#67615A; --pos:#1D1A18; --neg:#973533; --acc:#973533;
  --report:#973533; --ordinary:#366373; --paper-drawn:#F6F4E6;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -14px rgba(0,0,0,.22);
  --ui:"Instrument Sans",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"]{
  --bg:#151411; --bg2:#1A1915; --panel:#1D1C18; --hover:#26241F; --sel:#322625;
  --line:#2b2923; --line2:#3F3D34; --grid:rgba(239,237,231,.05);
  --ink:#EFEDE7; --ink2:#BEBCB2; --muted:#939187;
  --rich:#EFEDE7; --cheap:#939187; --pos:#EFEDE7; --neg:#D87267; --acc:#D87267;
  --report:#D87267; --ordinary:#80AEBF; --paper-drawn:#201E19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 var(--ui);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:56px;padding:0 32px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.03em;margin-right:22px;text-decoration:none}
.brand .mark{width:20px;height:20px;display:block;color:var(--ink)}
.tabs{display:flex;gap:2px}
.tabs a{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;color:var(--ink2);font-weight:500;border-radius:8px}
.tabs a:hover{background:var(--bg)}
.tabs a[aria-current]{color:var(--ink);background:var(--bg2)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--neg);border:1px solid currentColor;border-radius:999px;padding:5px 9px}
.pill.pub{color:var(--pos)}
.btn{height:34px;padding:0 14px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--panel);cursor:pointer;font-weight:500}
.btn:hover{opacity:.88}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 40px;align-items:end;padding:44px 0 26px}
.kicker{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
h1{margin:0;font-size:clamp(34px,3.6vw,50px);line-height:1.02;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
h1 em{font:italic 400 1.06em var(--serif);letter-spacing:0;color:var(--ink)}
.lede{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--muted);max-width:54ch}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-height:84px}
.kpi .l{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
.kpi .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.kpi .n{font-size:11.5px;color:var(--muted);margin-top:auto}
.kpi.back{background:var(--bg)}
.paper{border-radius:16px;padding:12px;background-color:var(--bg2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;margin-bottom:22px}
.win{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.titlebar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid var(--line)}
.titlebar .mark{width:14px;height:14px;color:var(--muted)}
.titlebar .t{margin:0 auto;font:500 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.status{display:flex;align-items:center;height:30px;border-top:1px solid var(--line);font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--muted)}
.status span{padding:0 14px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center}
.status span b{color:var(--ink2);font-weight:500;margin-left:6px}
.status .r{margin-left:auto;border-right:0;border-left:1px solid var(--line)}
.record{display:grid;grid-template-columns:1fr 1fr}
.sample{padding:18px;border-right:1px solid var(--line)}
.sample:last-child{border-right:0;background:var(--bg)}
.sample .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.sample .k i{width:8px;height:8px;border-radius:2px;background:var(--acc);display:inline-block}
.sample:last-child .k i{background:var(--line2)}
.sample h3{margin:6px 0 2px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.sample h3 small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:6px}
.sample p{margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.45;max-width:60ch}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);margin-bottom:14px}
.fig{padding:10px 12px;border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
.fig .l{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fig .v{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.2;margin-top:2px}
.fig .v small{font-size:11px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ch{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px 6px}
.ch .l{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between}
.ch svg{display:block;width:100%;height:auto}
.anchors{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:14px;font-size:12px}
.anchors .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.anchors .row .k2{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.anchors .row .cov-w{display:block}
.anchors .row .cov{height:4px;display:block}
.anchors .row .cov .bg{fill:var(--line)}
.anchors .row .cov .fl{fill:var(--ink2)}
.anchors .row .v{font-weight:600}
.anchors .row .v small{color:var(--muted);font-weight:500;margin-left:4px}
.tw{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%}
th{background:var(--panel);text-align:right;font:500 11px var(--ui);color:var(--muted);padding:0 8px;height:36px;border-bottom:1px solid var(--line2);white-space:nowrap}
th.l{text-align:left}
th.g{border-left:1px solid var(--line)}
th .grp{display:block;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.8;margin-bottom:1px;text-align:left}
#ledger thead th:not(:has(.grp))::before{content:"";display:block;height:13px;margin-bottom:1px}
td{padding:0 8px;height:36px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle}
td.l{text-align:left}
td.g{border-left:1px solid var(--line)}
tr:hover td{background:var(--hover)}
tr.pend td{background:var(--sel)}
tr.pend:hover td{background:var(--sel)}
td .t{font-weight:600;letter-spacing:-.01em;font-size:13.5px}
td .c{color:var(--muted);font-size:11.5px;margin-left:8px}
td .s{font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink2);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;margin-left:8px}
td .s.amc{background:var(--ink);color:var(--panel);border-color:var(--ink)}
td .u{color:var(--muted);font-size:11px;margin-left:1px}
td.pos{color:var(--pos)}
td.neg{color:var(--neg)}
td.dim{color:var(--muted)}
td .st{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2)}
td .st.pend{border-color:var(--acc);color:var(--acc)}
td .st.na{border-style:dashed;color:var(--muted)}
#ledger thead th.ctr{text-align:center}
#ledger th.ebc,
#ledger td.ebc{text-align:center}
.eb{display:inline-block;width:140px;height:12px;position:relative;vertical-align:middle}
.eb svg{width:100%;height:12px;display:block}
.eb .z{fill:var(--line2)}
.eb .b.p{fill:var(--pos)}
.eb .b.n{fill:var(--neg)}
.eb .b.o{opacity:.45}
.lg{display:flex;gap:16px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.lg i{display:inline-block;width:14px;height:6px;border-radius:2px;vertical-align:middle;margin-right:6px}
.lg i.p{background:var(--pos)}
.lg i.n{background:var(--neg)}
.lg i.o{background:var(--ink2);opacity:.45;height:3px}
.lg .sw{display:inline-block;width:14px;height:10px;background:var(--sel);border:1px solid var(--line2);vertical-align:middle;margin-right:6px;border-radius:2px}
.cov3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.covl{padding:18px;border-right:1px solid var(--line)}
.covl h3{margin:0 0 4px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.covl p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5;max-width:52ch}
.covr{padding:18px;display:grid;grid-template-columns:minmax(190px,1fr) auto auto auto;
  align-content:start}
.reason{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;
  gap:10px 16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.reason:last-child{border-bottom:0}
.reason .n{font-weight:500}
.reason .why{color:var(--muted);font-size:11.5px}
.reason .ct{font-weight:600;text-align:right;min-width:36px}
.reason .pc{font:500 11px var(--mono);color:var(--muted);text-align:right;min-width:44px}
.units{display:flex;gap:4px}
.units i{width:13px;height:13px;border-radius:3px;background:var(--line2);display:block}
.units i.on{background:var(--ink2)}
.covtot{display:flex;align-items:baseline;gap:10px;padding:0 0 13px;margin-bottom:3px;
  border-bottom:1px solid var(--line2)}
.covtot .big{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1}
.covtot .cap{color:var(--muted);font-size:12.5px}
.covtot .cap b{color:var(--ink2);font-weight:500}
.covr .scale{grid-column:2/-1;font:500 9.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-bottom:7px}
@media (max-width:560px){
  .covtot{flex-wrap:wrap;gap:3px 10px;padding-bottom:11px}
  .covtot .cap{flex:1 1 100%}
}
.note{padding:12px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.note b{color:var(--ink2);font-weight:500}
.foot{padding:0 0 40px;color:var(--muted);font-size:11.5px;line-height:1.5}
.foot p{max-width:100ch;margin:0}
@media (max-width:1100px){.lead,.record,.charts,.cov3,.anchors{grid-template-columns:1fr}.sample,.covl{border-right:0;border-bottom:1px solid var(--line)}}
td.l:has(.s){display:grid;grid-template-columns:minmax(3.5em,max-content) max-content;
 align-items:center}
@media not all and (max-width:1100px){
  .record{grid-template-rows:repeat(7,auto)}
  .sample{display:grid;grid-template-rows:subgrid;grid-row:span 7}
  .charts{grid-template-rows:subgrid;grid-row:span 2;row-gap:0;column-gap:14px}
  .ch{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
}
.ch svg{max-width:300px;margin-inline:auto}
.note{max-width:70ch}
.foot p{max-width:70ch}
.sample p{line-height:1.5}
.lead>div:first-child{align-self:start}
:root[data-theme="dark"] .optwrap img{filter:invert(1) hue-rotate(180deg) saturate(.85)}
:root[data-theme="dark"] .optwrap{background:var(--paper-drawn)}
:where(.opt) .fig{display:block;width:100%;height:auto;background:var(--paper-drawn);border-radius:8px}
.grf text{font-family:var(--mono)}
.grf .k{font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)}
.grf .k.xs{font-size:8px}
.grf .k.sm{font-size:8.5px}
.grf .v{font-size:12.5px;font-weight:500;fill:var(--ink);text-transform:none;letter-spacing:0}
.grf .v.sm{font-size:9.5px}
.grf .k.ev,
.grf .k.r,
.grf .k.rep,
.grf .v.r{fill:var(--report)}
.grf .k.od,
.grf .k.o,
.grf .v.od,
.grf .v.o{fill:var(--ordinary)}
.grf .k.qt,
.grf .v.qt{fill:var(--ink2)}
.grf .k.dim{fill:var(--muted)}
.grf .k.lane{fill:var(--ink2);font-size:9px}
.grf .v.od,
.grf .v.o{fill:var(--ordinary)}
.grf .v.r{fill:var(--report)}
.grf .sh{fill:var(--muted);font-size:9px}
.grf .ln{fill:none;stroke-linecap:round;stroke-width:2.2}
.grf .ln.ev{stroke:var(--report)}
.grf .ln.od{stroke:var(--ordinary)}
.grf .ln.qt{stroke:var(--ink);stroke-width:1.6}
.grf .rt{fill:none;stroke:var(--muted);stroke-width:1.3}
.grf .ghost{stroke:var(--report);stroke-width:11;opacity:.30;stroke-linecap:butt}
.grf .ghost.o{stroke:var(--ordinary)}
.grf .cap{stroke:var(--line2);stroke-width:1.2}
.grf .col{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.grf .mark{fill:none;stroke:var(--ordinary);stroke-width:1.6}
.grf .v.bad{fill:var(--muted)}
.grf .strike{stroke:var(--muted);stroke-width:1.1;stroke-dasharray:3 3}
.grf .k.bad{fill:var(--muted)}
.grf .rail{stroke:var(--line2);stroke-width:1.4}
.grf .tick{stroke:var(--ink2);stroke-width:1.4}
.grf .burst{stroke:var(--report);stroke-width:1.6;stroke-dasharray:2.5 2.5}
.grf .burstdot{fill:var(--report)}
.grf .anch{stroke:var(--ordinary);stroke-width:1.4}
.grf .prism{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}
.grf .facet{stroke:none}
.grf .facet.l{fill:var(--panel)}
.grf .facet.r{fill:var(--line2);opacity:.75}
.grf .ray{fill:none;stroke-width:3;stroke-linecap:round}
.grf .ray.r{stroke:var(--report)}
.grf .ray.o{stroke:var(--ordinary)}
.grf .ghost.big{stroke-width:16;opacity:.34}
.optfig{display:block;width:100%;height:auto}
.optwrap{background:var(--paper-drawn);border:1px solid var(--line);border-radius:10px;
 overflow:hidden;position:relative}
.optwrap img{display:block;width:100%;height:auto}
.opthand{position:absolute;font:600 17px "Caveat",cursive;transform:rotate(-3deg);
 white-space:nowrap;line-height:1}
.opthand.r{color:var(--report)}
.opthand.o{color:var(--ordinary)}
.opthand.q{color:var(--ink)}
.alt{display:none}
html.ground-grain body::before{content:"";position:fixed;
 inset:0;z-index:-1;pointer-events:none}
html.ground-grain body::before{background:url(/img/bg-paper-grain-linen.webp) center/460px repeat;
 opacity:.70}
.bgaccent{display:none;position:absolute;top:0;left:0;width:100%;height:460px;
 z-index:-1;pointer-events:none;background-position:center 38%;
 background-size:cover;background-repeat:no-repeat;
 -webkit-mask:linear-gradient(180deg,black 0,black 48%,transparent 97%);
 mask:linear-gradient(180deg,black 0,black 48%,transparent 97%);
 animation:bgkb 48s ease-in-out infinite alternate}
@keyframes bgkb{from{transform:scale(1) translateY(0)}to{transform:scale(1.07) translateY(-2%)}}
html.accent-daybreak .bgaccent{display:block}
.bgaccent::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
 color-mix(in srgb,var(--bg) 30%,transparent) 0,
 color-mix(in srgb,var(--bg) 52%,transparent) 16%,
 color-mix(in srgb,var(--bg) 82%,transparent) 30%,
 color-mix(in srgb,var(--bg) 93%,transparent) 58%,
 var(--bg) 100%)}
html.accent-daybreak .bgaccent{background-image:url(/img/background.jpg);opacity:.82;filter:saturate(.6) hue-rotate(10deg) sepia(.08)}
html.accent-daybreak .top{
 background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(10px)}
.bgfoot{display:none;position:fixed;right:0;bottom:0;width:60vw;height:50vh;z-index:-1;
 pointer-events:none;background:url(/img/background_2.jpg) right bottom/cover no-repeat;
 -webkit-mask:linear-gradient(320deg,black 0,rgba(0,0,0,.5) 34%,transparent 64%);
 mask:linear-gradient(320deg,black 0,rgba(0,0,0,.5) 34%,transparent 64%);opacity:.5}
html.accent-macro .bgfoot{display:block;filter:hue-rotate(-12deg) saturate(.8)}
html.atmos .paper{background-color:color-mix(in srgb,var(--bg2) 55%,transparent);
 backdrop-filter:blur(2px)}
:root[data-theme="dark"] .bgaccent,
:root[data-theme="dark"] .bgfoot{display:none!important}
:root[data-theme="dark"].ground-grain body::before,
:root[data-theme="dark"].ground-rays body::before{opacity:.16;filter:invert(1)}
:root[data-theme="dark"].atmos .paper{background-color:color-mix(in srgb,var(--bg2) 55%,transparent)}
.drv{display:inline-block;margin-left:5px;padding:0 4px;border:1px solid var(--line2);
 border-radius:3px;font:500 8.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
 color:var(--muted);vertical-align:1px}
.ladder{padding:18px 20px 20px}
.ladder .intro{margin:0 0 14px;max-width:70ch;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.ladder table{width:100%;border-collapse:collapse}
.ladder th{font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;
 color:var(--muted);text-align:right;padding:0 10px 7px;border-bottom:1px solid var(--line2)}
.ladder th.l,
.ladder td.l{text-align:left}
.ladder td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);
 font:500 14px var(--mono)}
.ladder td.l{font:400 13.5px var(--ui);color:var(--ink2)}
.ladder tr.us td{font-weight:600;color:var(--ink);background:var(--sel)}
.ladder tr.us td.l{font-weight:600;color:var(--ink)}
.ladder tbody tr:last-child td{border-bottom:0}
.ladder .note{margin:14px 0 0;max-width:70ch;font-size:12.5px;line-height:1.6;color:var(--muted)}
.ladder .call{margin:14px 0 0;max-width:70ch}
.lad2 .lv-figs{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:2px 0 22px}
.lad2 .lv-fig{padding-right:26px}
.lad2 .lv-fig+.lv-fig{padding-right:0;padding-left:34px;border-left:1px solid var(--line)}
.lad2 .lv-fig .lv-sm{font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;padding-bottom:11px;border-bottom:1px solid var(--line2);
  margin-bottom:13px}
.lad2 .lv-big{font:600 34px/1 var(--mono);letter-spacing:-.025em;color:var(--acc);
  font-variant-numeric:tabular-nums;display:block}
.lad2 .lv-big em{font-style:normal;font-size:15px;font-weight:500;letter-spacing:0;
  color:var(--ink2);margin-left:9px}
.lad2 .sub{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:30ch}
.lad2 .sub b{color:var(--ink2);font-weight:500;font-family:var(--mono);font-size:12px}
.lad2 .second{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
.lad2 .mid{font:600 19px/1 var(--mono);color:var(--ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.lad2 .mid em{font-style:normal;font-size:12.5px;font-weight:400;font-family:var(--ui);
  color:var(--muted);margin-left:9px;letter-spacing:0}
.lad2 .lv-foot{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-items:start;
  margin-top:14px}
.lad2 .lv-foot .note{margin:0 26px 0 0;padding:12px 0 0}
.lad2 .lv-foot .note+.note{margin:0 0 0 35px}
@media (max-width:640px){
  .lad2 .lv-figs{grid-template-columns:1fr;gap:22px}
  .lad2 .lv-fig+.lv-fig{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:20px}
  .lad2 .lv-foot{grid-template-columns:1fr;gap:0}
  .lad2 .lv-foot .note,.lad2 .lv-foot .note+.note{margin:0;padding:12px 0 0}
}
:root{--bar-h:56px}
.top a[href="#"]{outline:2px dashed var(--neg)}
.state{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fresh{font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.fresh b{font-weight:600;color:var(--ink2)}
.fresh b.ok{font-weight:700}
.fresh b.stale{color:var(--neg);font-weight:700}
.pill{flex:none}
.state .pill{color:var(--neg)}
.nav-id{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;
 color:var(--ink2);font-weight:500;border-radius:8px}
.nav-id:hover{background:var(--bg)}
.top .brand{text-decoration:none}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.tabs a{--tab-pad:12px}
.tabs a[aria-current]{position:relative;color:var(--acc);font-weight:600}
.tabs a[aria-current]::after{content:"";position:absolute;left:var(--tab-pad);
 right:var(--tab-pad);bottom:4px;height:2px;border-radius:1px;background:var(--acc)}
.top{flex-wrap:wrap;height:auto;min-height:56px;row-gap:0;--bar-h:0px}
.top .right{gap:12px}
@media (max-width:820px){
  .top{padding:0 16px}
  .brand{margin-right:12px}
  .tabs{order:3;width:100%;margin:0 -4px 6px;overflow-x:auto;scrollbar-width:none}
  .fresh{font-size:10px}
}
@media (max-width:520px){
  .brand .btxt{display:none}
  .brand{margin-right:8px}
  .fresh .long,.pill .long{display:none}
  .pill{font-size:9px;padding:4px 7px}
  .top .right{gap:8px}
  .nav-id{padding:0 9px}
}
.icon-btn{width:34px;padding:0;display:inline-grid;place-items:center}
.icon-btn svg{display:block;width:16px;height:16px}
.icon-btn .ico-sun{display:none}
.icon-btn[aria-pressed="true"] .ico-moon{display:none}
.icon-btn[aria-pressed="true"] .ico-sun{display:block}
html{--mt-top:0px}
@media (min-width:701px){.mt-ph{display:none!important}}
@media (max-width:700px){.mt-dt{display:none!important}}
.mt-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){
  .win>.status{flex-wrap:wrap;height:auto;padding:5px 0 6px}
  .win>.status span{min-height:21px;padding:2px 14px;border:0;white-space:normal}
  .win>.status .r{margin-left:0;flex-basis:100%;border:0}
  .win:is(:has(table),:has(.mt-rows))>.titlebar{height:auto;min-height:40px;padding-top:8px;padding-bottom:8px}
}
@media (hover:none) and (max-width:700px){.mt-kbd{display:none!important}}
@property --mt-fr{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes mt-edge{from{--mt-fr:44px}to{--mt-fr:0px}}
.tw,
.f pre{animation:mt-edge linear both;animation-timeline:scroll(self inline);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mt-fr)),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - var(--mt-fr)),transparent)}
@media (max-width:700px),(pointer:coarse){
  .top .brand{min-width:44px;min-height:44px;justify-content:center}
  .tabs a{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .nav-id{min-height:44px}
}
@media (max-width:520px){.top>.brand{margin-left:-12px}}
@media (max-width:520px){.top .brand .btxt{display:inline;position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
.top{padding-left:max(16px,calc((100% - 1400px) / 2 + 16px));
  padding-right:max(16px,calc((100% - 1400px) / 2 + 16px))}
@media (min-width:701px){
  .win>.status{flex-wrap:wrap;height:auto;min-height:30px}
  .win>.status span{height:auto;min-height:29px;white-space:nowrap}
}
@media (max-width:520px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis>:first-child:nth-last-child(odd){grid-column:1/-1}
}
.mt-lens{display:none}
@media (max-width:700px){
  .mt-lens{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;min-width:0;
    padding:0 10px;border:0;border-bottom:1px solid var(--line);background:var(--panel)}
  .mt-lens .k{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin-right:2px}
  .mt-lens label{position:relative;display:flex;align-items:center;min-height:44px;cursor:pointer}
  .mt-lens input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  .mt-lens label span{display:block;min-width:44px;text-align:center;padding:5px 11px;
    border:1px solid var(--line2);border-radius:999px;font:500 12px var(--ui);color:var(--ink2);
    background:var(--bg);white-space:nowrap}
  .mt-lens input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--panel)}
  .mt-lens input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
  .mt-lens label:hover span{border-color:var(--ink2)}
  .win:has(.mt-lens) thead th{white-space:normal;line-height:1.2}
  .win:has(.mt-lens) td .tag{display:inline-block}
  .mt-when{display:block;margin-top:2px;font:500 10px var(--mono);letter-spacing:0;
    color:var(--muted);white-space:nowrap}
}
@media (max-width:700px){
  .ladder :is(td,th).l{white-space:normal;line-height:1.4}
  .ladder td,.ladder th{padding-left:8px;padding-right:8px}
  .ladder td:not(.l){width:1%}
  .win:has(#ledger) .lg{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;line-height:1.35}
  .win:has(#ledger) .lg>span{display:flex;align-items:baseline;gap:0}
  .win:has(#ledger) .lg i,.win:has(#ledger) .lg .sw{flex:none}
  #ledger :is(th,td):nth-child(2){display:none}
  #ledger td .c{display:none}
  #ledger td,#ledger th{padding:0 6px}
  #ledger td:first-child,#ledger th:first-child{padding-left:12px}
  #ledger th .grp{display:none}
  #ledger thead th:not(:has(.grp))::before{display:none}
  #ledger .eb{width:clamp(44px,16vw,64px)}
  #ledger td .st{display:inline-block;white-space:normal;border-radius:7px;line-height:1.3;
    max-width:118px;margin:2px 0}
  #ledger td:last-child{white-space:normal;padding-top:4px;padding-bottom:4px}
  .win:has(#mtl-ledger-close:checked) #ledger .eb .b.o{display:none}
  .win:has(#mtl-ledger-open:checked) #ledger .eb .b:not(.o){display:none}
  .win:has(#mtl-ledger-open:checked) #ledger .eb .b.o{opacity:1}
  .win:has(.mt-lens){overflow:clip}
  .mt-lensed.tw{overflow:visible}
  .mt-lensed thead th{position:sticky;top:var(--mt-top,0px);z-index:2}
}
@media (max-width:360px){
  #ledger :is(th,td):nth-child(9){display:none}
  #ledger :is(th,td){padding:0 4px}
  #ledger :is(th,td):first-child{padding-left:10px}
  #ledger td:nth-child(4){white-space:normal;line-height:1.3}
  .win:has(#mtl-ledger-pub:checked) #ledger :is(th,td):nth-child(3){display:none}
}
@media (max-width:700px){
  .win:has(#mtl-ledger-close:checked) #ledger :is(th,td):is(:nth-child(4),:nth-child(6),:nth-child(8),:nth-child(10)){display:none}
  .win:has(#mtl-ledger-open:checked) #ledger :is(th,td):is(:nth-child(4),:nth-child(5),:nth-child(7),:nth-child(10)){display:none}
  .win:has(#mtl-ledger-pub:checked) #ledger :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9)){display:none}
}
@media (max-width:1100px){.record,.cov3,.charts,.anchors{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .record .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record .fig:nth-child(2n){border-right:0}
  .record .fig:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .covr{grid-template-columns:minmax(0,1fr) auto auto auto}
}
@media (max-width:700px){
  .covr .covtot{grid-column:1/-1}
  .covr .scale{grid-column:1/-1;text-align:right;padding-top:8px}
}
@media (max-width:520px){
  .reason>:first-child{grid-column:1/-1}
  .reason .units{grid-column:1/3}
  .covr .scale{text-align:left}
}
.win>.note{max-width:none;padding-right:max(18px,calc(100% - 70ch + 18px))}
@media (min-width:1101px){
  .anchors .row{grid-template-columns:auto minmax(0,1fr) auto}
  .anchors .row .k2{white-space:nowrap}
  .anchors .row .cov-w{min-width:0}
  .anchors .row .cov{width:100%;max-width:100px}
}
@media (min-width:1101px) and (max-width:1279px){.anchors{grid-template-columns:minmax(0,1fr)}}
@media (min-width:360px) and (max-width:820px){
  .top{flex-wrap:nowrap}
  .tabs{order:0;width:auto;flex:none;margin:0;overflow:visible}
  .top .right>.state,.top .right>#theme{display:none}
}
@media (min-width:360px) and (max-width:520px){.tabs a{padding:0 8px;--tab-pad:8px}.nav-id{padding:0 8px}}
@media (min-width:360px) and (max-width:420px){.tabs a{padding:0 6px;--tab-pad:6px}.nav-id{padding:0 6px}}
@media (min-width:360px) and (max-width:374px){.tabs a{padding:0 5px;--tab-pad:5px}.nav-id{padding:0 5px}}
.foot-bar{display:none}
@media (min-width:360px) and (max-width:820px){
  .foot-bar{display:flex;align-items:center;gap:10px;min-height:44px;margin:16px 0 0;
    padding:8px 0 0;border-top:1px solid var(--line);font-size:13px}
  .foot-bar .icon-btn{margin-left:auto;flex:none}
}
@media (min-width:375px) and (max-width:520px){.foot-bar .fresh .long,.foot-bar .pill .long{display:inline}}
.titlebar{display:grid;grid-template-columns:1fr auto 1fr}
.titlebar>.mark{justify-self:start}
.titlebar .t{text-align:center}
.titlebar:not(:has(>.act))::after{content:"";width:14px}
@media (max-width:700px){.titlebar{height:auto;min-height:40px;padding-top:8px;padding-bottom:8px}}
footer.site{margin-top:64px;border-top:1px solid var(--line);padding:24px 0 44px;font-size:11.5px;color:var(--muted)}
footer.site .site-in{max-width:1400px;margin:0 auto;padding:0 16px;display:grid;gap:6px}
footer.site a{color:var(--ink2)}
footer.site span:last-child a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.note.keep p{margin:0 0 8px}
.note.keep p:last-child{margin:0}
#ledger tr.pend td .board-lock{display:inline-block;height:6px;border-radius:3px;background:var(--line2);vertical-align:middle;width:34px}
.st.ex{border-style:dashed}

/* ---- product additions (BUILD_PLAN 3.82): every rule below is a logged difference ---- */
/*
 * Appended to every ported page's stylesheet and to chrome.css (scripts/port_mockup_css.py).
 * Each rule is a logged difference from the mockups (BUILD_PLAN 3.82).
 */

/*
 * TIER VARIANTS (3.64), rewritten for the mockup cascade. app.css reveals a variant with
 * `display: revert`, which rolls back to the UA value and would drop the mockup's
 * `.nav-id{display:flex}` for exactly the signed-in readers. So these HIDE the variants that do
 * not apply and never set a display for the one that does: whatever the page's own rules say
 * is what shows. (b: the page bytes are identical for every reader, 3.64.)
 */
html[data-tier] .tier-anon,
html:not([data-tier]) .tier-auth,
html:not([data-tier='free']) .tier-free,
html:not([data-tier='paid']) .tier-paid{display:none!important}

/*
 * The theme switch ships `hidden` (decision 18). The mockup's `.icon-btn{display:inline-grid}`
 * beats the UA's `[hidden]{display:none}`, so without this the attribute would do nothing.
 * `theme.js` sets `html.js` at parse time, before the bar exists, so a reader with scripts on
 * never sees the bar change after load; with scripts off the dead button stays hidden.
 */
html:not(.js) .icon-btn[hidden]{display:none}

/*
 * "ON" STATES ARE LINEN AND INK (3.409, `mockups/board-select/` option A, operator 2026-11-03). The
 * mockups mark every selected, pressed and current thing with `--sel` (the accent's pink) and an
 * oxblood edge, and oxblood already MEANS something on these pages: the report's part of the split,
 * a negative number, a link. So an open row was tinted the colour of the report, under every
 * figure in it. `--on-bg` is the page's own paper one step deeper and `--on` is ink: a row, a
 * pressed filter, a current tab or a picked item is pulled forward, not coloured. `--sel` is left
 * as it is, because `/`'s subscribe band and its free macro block use it as a fill and stay pink
 * (operator). Checked at 4.5:1 or better for the muted text on `--on-bg` in both modes.
 */
:root{--on-bg:#ECE8DC;--on:#1D1A18}
:root[data-theme="dark"]{--on-bg:#2A2822;--on:#EFEDE7}

/*
 * THE COMPACT FOOTER (operator, 2026-09-28). The mockup's footer set each disclaimer on its own
 * line, padded every link to a 44px box, and sat 64px below a separate readout/theme row, so
 * the pair took most of a phone screen. Now: one bar (links, readout, theme switch), and no
 * disclaimer lines (operator). The links are 32px tall, over WCAG 2.2 AA's 24px.
 *
 * The readout and the switch are shown where the top bar does not show them: the switch from
 * 360px up (the top bar keeps it below 360px, where it has room), and the readout from 360 to
 * 820px only (the top bar shows it everywhere else). On a phone the two head the footer; on a
 * desktop the switch ends the link row. (d)
 */
footer.site{margin-top:8px;padding:14px 0 20px}
footer.site .site-in{gap:2px}
.site-bar{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;min-height:34px}
.site-links{display:flex;flex-wrap:wrap;gap:0 16px;flex:1 1 auto;font-size:12.5px}
/* Terms and Privacy wrap as a pair, so a wrapped row never strands one word on a line */
.site-pair{display:flex;gap:inherit}
footer.site .site-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);text-decoration:none}
footer.site .site-links a:hover{text-decoration:underline}
/* 3.418: what VolModel is, one sentence above the links (SITE_DEFINITION; SEO audit item 9). */
footer.site .site-def{max-width:68ch;margin:2px 0 8px;font:400 13px/1.55 var(--ui);color:var(--muted)}
.site-bar>.state{display:none}
.site-bar .icon-btn{flex:none}
/* 3.433: down to 320 too, now that the footer's switch is the only one (it was hidden below 360,
   where the bar carried its own) */
@media (max-width:820px){
.site-bar>.state{display:flex;flex:1 1 auto;order:-1}
.site-bar .icon-btn{order:-1}
.site-links{flex-basis:100%}
.site-bar.bare>.state{display:none}
.site-bar.bare .icon-btn{order:0}
.site-bar.bare .site-links{flex:1 1 0;min-width:0}}
@media (min-width:375px) and (max-width:520px){.site-bar .fresh .long{display:inline}}
@media (max-width:520px){.site-links{gap:0 12px}}
/* the page notes above the footer end in 40px of padding, and the footer adds its own */
.wrap>.foot,body>.foot{padding-bottom:12px}

/*
 * "Sign in" in the top bar stands out from the section tabs (operator, 2026-09-28): a quieted
 * accent (60% accent, 40% ink2, so it does not compete with the current tab's full accent) and a
 * heavier weight. "Account", the signed-in variant, stays plain.
 */
.nav-id.nav-signin{color:color-mix(in srgb,var(--acc) 60%,var(--ink2));font-weight:600}
.bgaccent{overflow:clip;animation:none}
.bgaccent::before{content:"";position:absolute;inset:0;background:inherit;animation:bgkb 48s ease-in-out infinite alternate}
/*
 * THE TWO RULES ABOVE: THE DAYBREAK ZOOM DOES NOT WIDEN THE PAGE (BUILD_PLAN 3.111). The
 * mockup zooms the whole `.bgaccent` box (`bgkb`, scale 1 to 1.07 over 48s), and a transformed
 * box counts toward the
 * page's scrollable width. So in light mode every page with the band scrolled sideways, growing
 * with the zoom to 50px at 1440 and 13px at 375 (dark hides the band). The box now stays put and
 * clips, and the photo zooms inside it on `::before`, which inherits the box's background. The
 * veil (`::after`) and the mask no longer zoom with it.
 */

/*
 * THE PHONE LENS AS ONE SEGMENTED ROW (3.115). The mockups' lens is a row of pills that wraps:
 * "Cost after" sat alone on a second line on /, and the other lens pages wrapped the same way.
 * Each segment is as wide as its label and the row fills the width, so it fits a 320px phone
 * wherever the labels do (`check_css.mjs` cannot see widths; 3.115 measured each page). The
 * "Show" label goes because the control explains itself; the legend stays for screen readers.
 * The fieldset's bottom rule moves onto the table under it, which every lens page puts next.
 */
@media (max-width:700px){
  .mt-lens{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;margin:10px;padding:2px;
    border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
  .mt-lens .k{display:none}
  .mt-lens label span{width:100%;min-width:0;padding:10px 6px;border:0;border-radius:999px;
    background:transparent;font-size:12.5px}
  .mt-lens input:checked+span{background:var(--ink);color:var(--panel)}
  .mt-lens label:hover span{border:0}
  .mt-lens+.tw{border-top:1px solid var(--line)}
}
/* the narrowest phones: /accuracy/'s three labels overflowed the row by a few px at 320 */
@media (max-width:360px){
  .mt-lens{margin:10px 8px}
  .mt-lens label span{padding:10px 4px;font-size:12px}
}

/*
 * THE BAR PER READER (BUILD_PLAN 3.150, mockups/topbar-audit/). A visitor's "Sign in" gets a
 * filled "Create free account" button beside it from 768px up, and goes plain there so the two
 * do not compete; below 768px the button is hidden and "Sign in" keeps its accent. A free
 * reader's "Upgrade" takes that quiet accent. The tier rules above still win (`!important`), so
 * on a cached page the button never shows to a signed-in reader. (d)
 *
 * The button is an ink PILL with a chevron (3.320, mockups/topbar-nav-states/ round 2, R1): the
 * only round object on the bar, so it reads as the one action rather than an 8px-cornered slab
 * that matched nothing beside it. Hover warms the ink a step toward the accent, lifts it, and
 * moves the chevron 2px forward, in place of the flat `opacity:.88` dim. 4px more air before it.
 */
.top .nav-cta{display:none}
@media (min-width:768px){
.top .nav-id.nav-signin.has-cta{color:var(--ink2);font-weight:500}
.top .nav-id.nav-signin.has-cta:hover{color:var(--ink)}
.top .nav-cta{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 15px;margin-left:4px;
  border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--panel);
  font:600 13px var(--ui);text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:background .15s,border-color .15s,box-shadow .15s}
.top .nav-cta::after{content:"";width:6px;height:6px;margin-top:1px;border:solid currentColor;
  border-width:1.6px 1.6px 0 0;transform:rotate(45deg);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.top .nav-cta:hover{background:color-mix(in srgb,var(--ink) 86%,var(--acc));
  border-color:color-mix(in srgb,var(--ink) 86%,var(--acc));
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -8px rgba(0,0,0,.45)}
.top .nav-cta:hover::after{transform:translateX(2px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.top .nav-cta,.top .nav-cta::after{transition:none}}
.top .nav-id.nav-upgrade{color:color-mix(in srgb,var(--acc) 60%,var(--ink2));font-weight:600}
/*
 * THE BAR'S LINKS ARE UNDERLINED WORDS, NOT BOXES (3.320, mockups/topbar-nav-states/, option C).
 * The mockup's current tab carried three signals (a tinted box, the accent, and an underline
 * floating inside the box), and its hover box was LIGHTER than the frosted bar, so it read as a
 * white patch, and a hovered tab beside the current one looked like a second selection. Now the
 * current page is ink (the accent until 3.409), weight 600 and a 2px underline under the word; hover is ink and a faint
 * ink underline at the same offset. The identity link takes the same two states: on its own page
 * (/login/'s "Sign in", /account/'s "Account", which until 3.150 only a screen reader could
 * tell) it is current, and an open Account menu shows the hover state. (d)
 */
.tabs a,.top .nav-id{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;
  text-decoration-color:transparent;transition:color .15s,text-decoration-color .15s}
.tabs a:hover,.top .nav-id:hover,.am[open]>summary{background:none;color:var(--ink);
  text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.tabs a[aria-current],.top .nav-id[aria-current]{background:none;color:var(--on);font-weight:600;
  text-decoration-color:var(--on)}
.tabs a[aria-current]::after{content:none}
@media (prefers-reduced-motion:reduce){.tabs a,.top .nav-id{transition:none}}

/*
 * ONE BASELINE ON THE RIGHT OF THE BAR (3.153). The bar centres every item's BOX, and a box holding
 * 11px JetBrains Mono centres onto a different baseline than one holding 13px Instrument Sans: the
 * readout ("Updated 6 Oct") sat 0.58px above "Account" beside it, which reads as misaligned at any
 * zoom. The text-bearing items now share a baseline; the theme switch, which has no text, stays
 * centred. The group's tallest item (the 34px button where there is one, else the identity link)
 * keeps its place, so nothing but the readout moves.
 */
.top .right>.state,.top .right>.nav-id,.top .right>.btn:not(.icon-btn){align-self:baseline}

/*
 * SEARCH IN THE BAR (3.157, mockups/topbar-search/, phone layout B). The field from 1024px up,
 * growing from 160 to 300px; below that an icon opens a panel (search.js). Measured on the real
 * bars at every width from 320 to 1440: a field narrower than ~160px is not usable, and below 1024
 * one reader or another has less than that (a visitor 41-120px at 821-940, a free reader 24-104px
 * at 560-640).
 *   - basis 160, not 300: the bar is flex-wrap, and a line wraps on an item's BASIS before it
 *     shrinks one. A 300px basis wrapped a visitor's bar to 67px at 1024.
 *   - from 821 to 1023 the readout leaves the bar to make room for the icon, as it already does
 *     at 360-820; the footer carries it at every width.
 *   - on a phone the Method tab leaves the bar for the icon (it is in the footer). Below 360 the
 *     bar is already two rows, and the icon joins the tabs row instead.
 *   - the icon is 32px tall like the links beside it (44 where they are): the right side aligns on
 *     the text baseline (3.153), and a taller icon grew the group and lifted "Sign in" 4px.
 */
.srch{position:relative;flex:1 1 160px;max-width:300px;min-width:0;margin-left:14px}
.srch-box{display:flex;align-items:center;gap:8px;height:34px;padding:0 7px 0 10px;border:1px solid var(--line2);
  border-radius:9px;background:var(--bg);color:var(--muted);cursor:text}
.srch-box:hover{border-color:color-mix(in srgb,var(--ink2) 35%,var(--line2))}
.srch-box:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.srch-box svg{flex:none}
.srch input,.srch-sheet input{flex:1;min-width:0;height:100%;border:0;padding:0;margin:0;background:none;outline:0;
  font:500 13.5px var(--ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.srch input::placeholder,.srch-sheet input::placeholder{color:var(--muted);opacity:1}
.srch input::-webkit-search-cancel-button,.srch-sheet input::-webkit-search-cancel-button{display:none}
.srch kbd{flex:none;font:600 10.5px/1 var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:5px;
  padding:3px 6px;background:var(--panel)}
.srch-box:focus-within kbd{visibility:hidden}
.srch-pop{position:absolute;top:calc(100% + 8px);left:0;width:min(460px,calc(100vw - 32px));max-height:min(70vh,560px);
  overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;z-index:40}
.srch-pop[hidden]{display:none}
.srch-hd{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.sr{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:40px;
  padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sr:hover{background:var(--hover)}
.sr[aria-selected="true"]{background:var(--on-bg);box-shadow:inset 2px 0 0 var(--on)}
.sr .sy{font:600 13px var(--mono);letter-spacing:.01em}
.sr .nm{font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .mt,.ix-l .mt{display:flex;align-items:center;gap:6px;font:500 11.5px var(--ui);color:var(--muted);white-space:nowrap}
.sr .ss,.ix-l .ss{font:500 9.5px var(--mono);letter-spacing:.06em;color:var(--ink2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 5px}
.sr .ss.amc,.ix-l .ss.amc{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.sr .et,.ix-l .et{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line2);
  border-radius:5px;padding:1px 5px}
.sr mark{background:none;color:var(--acc);font-weight:700}
.sr .go{display:none;font:600 11px var(--mono);color:var(--acc)}
.sr[aria-selected="true"] .go{display:inline}
.srch-none{padding:14px 12px 12px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.srch-none b{color:var(--ink)}
.srch-none a{color:var(--acc);font-weight:600;text-decoration:none}
.srch-ft{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:6px;
  padding:9px 10px 5px;font:500 11px var(--mono);color:var(--muted)}
.srch-ft kbd{font:inherit;border:1px solid var(--line2);border-radius:4px;padding:0 4px}
.srch-ico{display:none;align-self:center;place-items:center;flex:none;width:36px;height:32px;margin:0;padding:0;border:0;
  border-radius:8px;background:none;color:var(--ink2);cursor:pointer}
.srch-ico:hover{background:var(--bg)}
@media (max-width:700px),(pointer:coarse){.srch-ico{min-height:44px}}
@media (max-width:1023px){.srch{display:none}.srch-ico.in-right{display:inline-grid}}
@media (min-width:821px) and (max-width:1023px){.top .right>.state{display:none}}
@media (max-width:520px){.tabs a[href="/methodology/"]{display:none}}
/*
 * ONE ROW DOWN TO 320 (3.433, mockups/topbar-oneline/, option A). Below 360 the bar used to wrap
 * the tabs onto a second row (95px) with the search icon beside them; now 360-820's single row
 * runs all the way down, with the padding stepped down once more. The readout goes, as it does
 * from 360 (the footer carries it), and the theme switch is the footer's only.
 */
@media (max-width:359px){
  .top{flex-wrap:nowrap}
  .tabs{order:0;width:auto;flex:none;margin:0;overflow:visible}
  .top .right>.state{display:none}
  .srch-ico.in-right{width:32px}
  .tabs a{padding:0 4px;--tab-pad:4px}
  .nav-id{padding:0 4px}
  .top .right{gap:4px}
  .brand{margin-right:4px}
}
/* the panel: a sheet over the page on a phone, a centred box from 521px */
.srch-sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--panel)}
.srch-sheet[hidden]{display:none}
@media (min-width:521px){.srch-sheet{inset:auto;top:64px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));
  max-height:min(72vh,620px);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow)}}
html.srch-open{overflow:hidden}
@media (min-width:521px){html.srch-open{overflow:visible}}
.srch-sh-top{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line)}
.srch-sh-top .srch-box{flex:1;height:44px;border-radius:10px;border-color:var(--acc);background:var(--panel);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.srch-sh-top input{font-size:16px}
.srch-x{flex:none;height:44px;padding:0 6px;border:0;background:none;font:600 14px var(--ui);color:var(--acc);cursor:pointer}
.srch-sh-list{flex:1;overflow:auto;padding:4px 6px 24px}
.srch-sheet .sr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sy mt" "nm nm";row-gap:2px;min-height:56px;padding:9px 10px}
.srch-sheet .sr .sy{grid-area:sy;font-size:14px}
.srch-sheet .sr .nm{grid-area:nm;font-size:14px}
.srch-sheet .sr .mt{grid-area:mt}
.srch-sheet .srch-ft{display:none}

/*
 * A COMPANY'S TWO VIEWS (3.171, `mockups/company-views/` E3). Both `/earnings/<sym>/` and
 * `/t/<SYM>/` open with the same one-line head and, for a company with a public page, the same
 * switch at the top of the figures column (`views/view-switch.ts`). Here, not in the two pages'
 * own files, because it is one component and the two copies would drift.
 *
 * The head: one line at every width. The symbol, the parent and the separators never shrink; a
 * long company name is cut with an ellipsis instead of wrapping the line.
 */
.kicker.k1{display:flex;align-items:baseline;white-space:nowrap;min-width:0;max-width:100%}
.kicker.k1 > *{flex:none}
.kicker.k1 .knm{flex:0 1 auto;min-width:3ch;overflow:hidden;text-overflow:ellipsis}
.kicker.k1 .ksp{color:var(--muted);margin:0 .6em}
.kicker.k1 .kdt{margin:0 .6em}
.kicker.k1 .kc{color:var(--acc);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--acc) 35%,transparent);
  text-underline-offset:3px;text-decoration-thickness:1px}
.kicker.k1 .kc:hover{text-decoration-color:var(--acc)}
@media (max-width:700px){.kicker.k1 .kc{display:inline-flex;align-items:center;min-height:44px;margin:-15px 0}}
/* 3.191: the ellipsis above never engaged. The head sits in `.lead`'s first column, a grid item
   with the default `min-width:auto`, so the column grew to the head's no-wrap width instead of
   letting `.knm` shrink: "Hewlett Packard Enterprise Co" made the head 352px in a 343px column at
   375, hidden by the page's overflow clip. A control after the name would be pushed off screen. */
.lead>div:has(>.kicker.k1){min-width:0}

/*
 * THE WATCH CONTROL (3.191, `mockups/watchlist/` K1): "· ☆ WATCH" in the head's own type, ink where
 * the breadcrumb is accent, and "· ★ WATCHING" in the accent once the name is on the list. The
 * text sets the baseline (the star is centred on it), and the 44px tap area is a pseudo-element,
 * so the head's line does not grow. A pending button (the cached page, before `watch.js` has
 * asked) is dimmed and not pressable.
 */
.kicker.k1 .kx-sep{color:var(--muted);margin:0 .6em}
.k1w{position:relative;display:inline-flex;align-items:baseline;gap:.5em;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink2);text-decoration:none;-webkit-tap-highlight-color:transparent}
.k1w::after{content:"";position:absolute;inset:-16px -6px}
.k1w .wl-i{position:relative;top:-1px;align-self:center;flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.k1w:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.k1w:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
.k1w .on-t{display:none}
.k1w.on{color:var(--on)}
.k1w.on .wl-i{fill:currentColor}
.k1w.on .on-t{display:inline}
.k1w.on .off-t{display:none}
.k1w[aria-busy=true]{opacity:.45;cursor:progress}
.wl-toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:calc(100vw - 32px);transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;
  padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 13.5px/1.4 var(--ui);box-shadow:var(--shadow);transition:opacity .18s,transform .18s}
.wl-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.wl-toast a{margin-left:10px;color:inherit;font-weight:600}

/*
 * THE ACCOUNT MENU (3.191, `mockups/watchlist/` round 2, M1). A `<details>`: its summary is the
 * bar's "Account" (`.nav-id`, so it keeps that link's look, its current-page underline and its
 * hit area), and the panel drops below it, right-aligned to the bar's edge. The wrapper takes
 * 3.153's baseline rule, which keys on `.nav-id`: without it the readout ("Updated 13 Oct") lost
 * its line beside Account the first time the menu was rendered.
 */
.am{position:relative;display:flex}
.top .right>.am{align-self:baseline}
.am-t{list-style:none;cursor:pointer;gap:6px;user-select:none;-webkit-user-select:none}
.am-t::-webkit-details-marker{display:none}
.am-t:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.am-cv{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.am[open]>summary{color:var(--ink)}
.am[open] .am-cv{transform:rotate(180deg)}
.am-p{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:292px;padding:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -18px rgba(0,0,0,.35);font:14px/1.4 var(--ui);text-align:left}
.am-who{padding:10px 12px 11px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.am-who b{display:block;font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-who span{display:block;margin-top:2px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.am-i{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:10px;width:100%;min-height:44px;padding:7px 10px;
  border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;font-weight:550;text-align:left;text-decoration:none;cursor:pointer}
/* Hover is `--bg2`, not `--hover`: `landing.css` defines `--hover` only for dark, so on `/` the
   light hover painted nothing, and where it is defined it sits one barely visible step off the panel
   (#F5ECE3 on #FDFAF5). Dark keeps `--hover`, which every page defines there and which is LIGHTER
   than its panel, where `--bg2` would be darker. */
.am-i:hover,.am-i:focus-visible{background:var(--bg2);outline:0}
.am-i:hover .am-ic,.am-i:focus-visible .am-ic{color:var(--ink)}
.am-i:hover .am-star,.am-i:focus-visible .am-star{color:var(--acc)}
html[data-theme="dark"] .am-i:hover,html[data-theme="dark"] .am-i:focus-visible{background:var(--hover)}
.am-i[aria-current]{background:var(--on-bg);box-shadow:inset 2px 0 0 var(--on)}
.am-i[aria-current] .am-l{color:var(--on)}
.am-ic{grid-row:1 / span 2;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;color:var(--ink2)}
.am-star{color:var(--acc);fill:currentColor}
.am-l{display:block}
.am-s{display:block;grid-column:2;margin-top:1px;font-size:12px;font-weight:400;color:var(--muted)}
.am-sep{height:1px;margin:4px 6px;background:var(--line)}
.am-p form{margin:0}
.am-out{color:var(--ink2);font-weight:500}
@media (max-width:520px){.am-p{right:-8px;width:min(320px,calc(100vw - 16px))}}
/* a free bar (Upgrade + Account) is 5px too wide at 375 and 6px at 360 with the full chevron */
@media (max-width:420px){.am-t{gap:2px}.am-cv{width:10px;height:10px}}
@media (max-width:374px){.am-cv{display:none}}
/* 3.433: below 360 "Account" is its menu's person icon, the word kept for screen readers; a free bar
   (Upgrade + Account) is otherwise 20px too wide at 320. With no text left, the baseline rule above
   would drop Upgrade 3px, so the menu centres instead. */
.am-tico{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:359px){
  .am-t .am-tl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .am-t .am-tico{display:block}
  .am-t{min-width:40px;justify-content:center}
  .top .right>.am{align-self:center}
}

/*
 * The switch, above the figures: its own column wrapper, so on the signed-out ticker page it
 * sits above the dashed "Open with a free account" panel rather than inside that lock.
 *
 * 3.216 (operator, 2026-10-16, option B of four rendered): a recessed track with the CURRENT half
 * raised on it, the phone's segmented-control shape, because the old switch read backwards. Its
 * only colour was the accent arrow, and that sat on the LINK half, so the eye went to the page you
 * were not on; the current half was marked by a 2px bar on the box edge alone. Now the raised
 * surface says where you are, the arrows (still the direction of time, ← past, next →) take the
 * text colour, and the accent appears only on hover. No new colour: oxblood stays the report's.
 * Dark mode raises the current half on --hover, since --panel is too close to the dark track.
 */
.kcol{display:flex;flex-direction:column;gap:12px;min-width:0}
/* 3.219: `.lead` bottom-aligns its columns (`align-items:end`, the mockups' own rule), so the
 * switch's height under the top bar was the headline column's height minus this one's, and it
 * differed between the two pages it exists to join: 25px lower on /earnings/nvda/ than on
 * /t/NVDA/ at 1600. Pinned to the top, it starts on the kicker line on both. */
.lead>.kcol{align-self:start}
.vsw{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg2);box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
:root[data-theme="dark"] .vsw{background:var(--bg)}
.vsw .h{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;border-radius:7px;text-decoration:none;color:var(--muted)}
.vsw .h.pv{padding:11px 14px 11px 38px}
.vsw .h.nx{padding:11px 38px 11px 14px;align-items:flex-end;text-align:right}
.vsw .h b{font:600 14.5px/1.2 var(--ui);color:inherit;letter-spacing:-.005em}
.vsw .h i{font:500 10px/1.25 var(--mono);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vsw .h[aria-current]{background:var(--panel);color:var(--ink);
  box-shadow:0 0 0 1px var(--line2),0 1px 2px rgba(0,0,0,.08),0 3px 10px -3px rgba(0,0,0,.18)}
:root[data-theme="dark"] .vsw .h[aria-current]{background:var(--hover);box-shadow:0 0 0 1px var(--line2),0 2px 10px -2px rgba(0,0,0,.6)}
.vsw .h[aria-current] i{color:var(--ink2)}
.vsw a.h:hover{background:color-mix(in srgb,var(--panel) 45%,transparent);color:var(--ink)}
.vsw a.h:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.vsw .dir{position:absolute;top:50%;transform:translateY(-50%);font:500 16px/1 var(--mono);color:inherit;transition:transform .15s}
.vsw .pv .dir{left:14px}
.vsw .nx .dir{right:14px}
.vsw a.h:hover .dir{color:var(--acc)}
.vsw a.pv:hover .dir{transform:translate(-3px,-50%)}
.vsw a.nx:hover .dir{transform:translate(3px,-50%)}
@media (prefers-reduced-motion:reduce){.vsw .dir{transition:none}}
/* The track's 4px inset is taken back from each half's inner padding, so a phone keeps the old
   line breaks ("Mon 19 Oct · before bell" on one line at 390). */
@media (max-width:700px){
  .vsw .h.pv{padding:10px 10px 10px 27px}
  .vsw .h.nx{padding:10px 27px 10px 10px}
  .vsw .pv .dir{left:8px}
  .vsw .nx .dir{right:8px}
}
/*
 * 3.388 — the two boards as a switch (`boardsSwitch`, `mockups/offseason-entry/` option A). The
 * company pages' track, without the arrows (they mean past and next there), so each half keeps
 * the same inner padding on both sides. On /board/ it heads the tiles' column (`.bcol`), in the
 * space the headline column leaves above them, so a desktop board moves nothing when the operator
 * turns it on; the off-season page has the same lead since 3.389, so it heads that page's tiles
 * too, as its way back (it sat beside the title, in `.off-head`, before). The counts' tails
 * (`.xl`) go on a phone, where they wrapped each half to three lines.
 */
.vsw.bsw .h.pv,.vsw.bsw .h.nx{padding:11px 14px}
@media (max-width:700px){.vsw.bsw .h.pv,.vsw.bsw .h.nx{padding:10px 12px}}
@media (max-width:520px){.bsw .xl{display:none}}
.bcol{display:flex;flex-direction:column;justify-content:space-between;gap:18px;align-self:stretch;min-width:0}
.bcol>.bsw{width:100%;max-width:420px;margin-left:auto}
@media (max-width:900px){.bcol>.bsw{max-width:none;margin-left:0}}

/*
 * `/watchlist/`'s add box (3.191) is the top bar's search list over the same index (`search.js`),
 * dropped from a box at the right of the window, so it opens right-aligned; the empty page's box is
 * centred, and so is its list. Here and not in `app.css`: these override `.srch-pop` above, which is
 * unlayered, and a rule in `app.css`'s `@layer components` would lose to it whatever its specificity.
 */
.wl-add .srch-pop{left:auto;right:0;z-index:30;text-align:left}
.wl-add.big .srch-pop{right:auto;left:50%;transform:translateX(-50%)}
.wl-add .sr .go{font-size:10.5px}
.sr .wl-on{color:var(--acc);font-weight:600}
/* Focus is the box's, as the top bar's search draws it, not a second ring on the field inside it. */
.wl-add input:focus,.wl-add input:focus-visible{outline:none}
.wl-add label:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}

/*
 * 3.215 — the history tables on /earnings/<sym>/ and /t/<SYM>/ (#hist, and /t/'s #hist2), one
 * shape on both pages. The cells were centred, and an empty spacer stood in for the group label
 * above a lone name; on a phone the label wraps ("Report's / part") and the spacer stays one
 * line, so "Priced" sat a line below "Report", "Rank" and "C2C". Now the group label sits at the
 * top-left of its cell, every column name on the bottom line, with room between the two
 * (operator's reference: /t/'s "Priced / Quoted"). Type is each page's quiet pass: the label
 * 12px 600 ink, the name the base 11px muted.
 */
#hist thead th,#hist2 thead th{vertical-align:bottom;height:auto;padding-top:5px;padding-bottom:5px;line-height:1.15}
/* the spacer goes: both pages' rules for it carry a :not(), so this needs the weight */
#hist thead th::before,#hist2 thead th::before{display:none!important}
#hist th .grp,#hist2 th .grp{white-space:nowrap;margin-bottom:7px}
/* The forecast column: every number ends on one edge, "rec" or not. A cell without it reserves
   the width "rec" takes, so the column is no wider than it was. */
#hist sup.u{display:inline-block;width:14px;margin-left:2px;text-align:left;font:500 8.5px var(--mono);
  letter-spacing:.04em;color:var(--muted);vertical-align:4px}
#hist .pr:not(:has(sup.u))::after{content:"";display:inline-block;width:16px}
@media (max-width:700px){
  /* "Report's part" is "Report's" on a phone: one line in a ~60px column */
  #hist th .grp .gx{display:none}
  /* The Chart lens: the strip takes whatever the other columns leave, up to its 190px. It was
     100vw minus a guessed width for them, and /earnings/'s Report column (date and chip on one
     line, 130px) is wider than the guess, so the table ran 23px past its box at 375. */
  #hist .evc{width:100%}
  #hist .ev{width:100%;max-width:190px}
}
/* below 360px "By 10:00" is "10:00": it sits under "Realized" */
@media (max-width:359px){#hist th .bx{display:none}}

/*
 * NO PAPER MAT (operator, 2026-10-25). The mockup sets every window on a `.paper` mat: 12px of
 * grid-paper padding with rounded corners. Removed on every page. The element stays, because it
 * carries the window's spacing (`margin-bottom:22px`, `/`'s `margin:22px 0`) and its anchor ids
 * (`#split`, `#fl-rank`). `!important` because the fills it clears include `/`'s band tints and
 * the dark `.atmos` re-tint, whose selectors outweigh any plain `.paper`. (d)
 */
.paper{padding:0!important;border-radius:0!important;background:none!important;backdrop-filter:none!important}

/*
 * HOVER (2026-10-28). The mockup's buttons hovered by dropping to `opacity:.88`. On an ink button
 * that is a faint grey, and on an outlined one (`.btn.ghost`, the theme switch: panel on panel) it
 * changes nothing anyone can see. Buttons now hover the way the bar's "Create free account" pill
 * does (3.320): a filled button warms its ink toward the accent and lifts, an outlined one takes
 * the hover ground and a firmer border. `app.css` gives its own buttons (`/account/`, `/pricing/`,
 * `/login/`, `/watchlist/`) the same two states. A button in a form that is sending
 * (`submit-once.js` sets `aria-disabled`) keeps its resting look. (d)
 */
.btn:not([aria-disabled="true"]):hover{opacity:1;background:color-mix(in srgb,var(--ink) 86%,var(--acc));
  border-color:color-mix(in srgb,var(--ink) 86%,var(--acc));box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.btn.ghost:not([aria-disabled="true"]):hover{background:var(--hover);color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 45%,var(--line2));box-shadow:none}
.more-btn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 45%,var(--line2))}
@media (prefers-reduced-motion:no-preference){.btn,.more-btn{transition:background-color .12s,border-color .12s,box-shadow .12s,transform .2s}}
/* Links that had no hover at all: the glossary's "What the columns mean", a methodology key's
   note, the board's off-season notice, and a ticker window's CSV chip, which hovers as the
   board's own CSV button does. */
.foot .gl .glsee a:hover,.mk-note a:hover,.board-notice a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.titlebar .act:has(>a:hover){color:var(--ink);border-color:var(--muted)}
/* 3.136 (`mockups/accuracy-v2/`, operator 2026-10-05). Every rule here is logged in
   `mockups/mockup_final/port/DIFFERENCES.md`'s accuracy table. */

/* The worked example under the intro: the unit, on a real row. */
.lead .lede.ex{margin-top:10px;font-size:14px;color:var(--muted)}


/* Type floors: the status chips were 10px and the legend 11.5px. */
.st{font-size:11px}
.lg{font-size:12px}

/* The ledger fold: inputs and their labels, no script, so the CSP needs nothing new. Each input
   stays focusable (opacity, not display) and lends its focus ring to its label.
   3.359 (`mockups/accuracy-live/` B): the pending forecasts fold into one line above the settled
   rows, and the settled rows step 15 → 40 → all through three radios, "Show fewer" back to 15. */
.more-cb{position:absolute;opacity:0;pointer-events:none}
.pd-rows,.more-a,.more-b{display:none}
#ledger-pend:checked ~ .tw .pd-rows{display:table-row-group}
#ledger-n40:checked ~ .tw .more-a,#ledger-nall:checked ~ .tw .more-a,#ledger-nall:checked ~ .tw .more-b{display:table-row-group}
.pd-bar td{padding:0!important;background:var(--sel);border-top:1px solid var(--line)}
.pd-bar label{display:flex;align-items:baseline;gap:10px;padding:11px 14px;cursor:pointer;font:500 13px var(--ui);color:var(--ink2)}
.pd-bar label:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pd-bar b{flex:none;color:var(--ink);font-weight:600}
.pd-bar .pn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-bar .chev{flex:none;align-self:center;width:7px;height:7px;border-right:1.6px solid var(--ink2);border-bottom:1.6px solid var(--ink2);transform:rotate(-45deg)}
#ledger-pend:checked ~ .tw .pd-bar .chev{transform:rotate(45deg)}
#ledger-pend:focus-visible ~ .tw .pd-bar label{outline:2px solid var(--acc);outline-offset:-2px}
.lpg{display:flex;align-items:center;gap:10px;margin:10px 14px}
.lpg .lc{margin-right:auto;font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.lpg .lc b{font-weight:600;color:var(--ink)}
.lpg .s40,.lpg .sall,.lpg .mless{display:none}
#ledger-n40:checked ~ .lpg .s15,#ledger-nall:checked ~ .lpg .s15,#ledger-nall:checked ~ .lpg .s40{display:none}
#ledger-n40:checked ~ .lpg .s40,#ledger-nall:checked ~ .lpg .sall{display:inline}
#ledger-n40:checked ~ .lpg .m15,#ledger-nall:checked ~ .lpg .m15,#ledger-nall:checked ~ .lpg .mall{display:none}
#ledger-n40:checked ~ .lpg .mless,#ledger-nall:checked ~ .lpg .mless{display:flex}
.more-btn{display:flex;align-items:center;justify-content:center;margin:0;height:40px;padding:0 18px;border:1px solid var(--line2);
 border-radius:8px;font:500 13px var(--ui);color:var(--ink);cursor:pointer;background:var(--panel)}
.more-btn:hover{background:var(--hover)}
.more-cb[name=ledger-n]:focus-visible ~ .lpg{outline:2px solid var(--acc);outline-offset:4px;border-radius:8px}
@media (max-width:700px){.pd-bar .pn{display:none}.lpg{flex-wrap:wrap}.lpg .lc{flex-basis:100%}.lpg .more-btn{flex:1}}
.tw td.l .st{white-space:normal}

/* 701-1100px: each 300px chart sat alone in a ~930px panel; two to a row there. */
@media (min-width:701px) and (max-width:1100px){.charts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The coverage reasons as a list. */
.covl ul{margin:8px 0 10px 18px;list-style:disc}
.covl li{margin:2px 0}

/* 3.169 (mockups/crosslinks/ option F): ledger symbols are links. Like the past-reports tickers on /,
   plain at rest, the accent and an underline on hover; a symbol with no public page carries no href
   for a visitor (only data-tier-to), so it stays plain text for them. */
table a.t{color:inherit;text-decoration:none}
table a.t[href]:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
/* 3.182: a ledger row opens its symbol's page, as `/`'s past reports do (3.169's link, row-link.js).
   `[href]`, because a name with no public page has no href for a visitor and gets one from tier.js
   only for a signed-in reader, so the cursor appears only on rows a click can open */
#ledger.rowlink tbody tr:has(a.t[href]){cursor:pointer}
/* Operator, 2026-10-14: the pending chip was terracotta on a tinted row, the loudest thing in the
   ledger for the one status that needs no action. It takes the neutral chip's grey; the row tint
   and the lock already say "not graded yet". On a phone the chips drop their tail (`.st-more`,
   ledgerRow): with every report showing, three-line chips pushed Status 23px past the panel. */
td .st.pend{border-color:var(--line2);color:var(--ink2)}
.st-ph{display:none}
@media (max-width:700px){#ledger .st-more{display:none}#ledger .st-ph{display:inline}
  #ledger td .st{padding-left:5px;padding-right:5px}}

/*
 * 3.204: THE QUIET PASS ON THE RECORD PAGE (operator, 2026-10-15, `mockups/accuracy-quiet/`,
 * labels.html). 3.198's rules mapped onto this page's classes, then the operator's choices on top:
 * mono capitals on set and group heads only, the ladder's figures named and drawn, a caption over
 * the pending rows, a folded column and flag key, the own line as one sentence, the anchor bars
 * labelled, the status bars as a list on a phone, and Lean in words on a phone. Every rule is
 * logged in `port/DIFFERENCES.md`.
 */
/* Calmer surfaces: softer shadows, a fainter graph-paper grid. The window bars drop their V mark
   (visibility, not display: the bar is a 1fr|auto|1fr grid and the mark holds the first track). */
:root:not([data-theme="dark"]){--shadow:0 1px 2px rgba(0,0,0,.035),0 8px 22px -14px rgba(0,0,0,.16);--grid:rgba(29,26,24,.035)}
.titlebar .mark{visibility:hidden}

/* ONE TYPEFACE inside <main>: labels, captions, ladder figures and chart text are Instrument
   Sans (the chart text takes it through its font-family="var(--mono)" attribute). The top bar
   keeps its mono "/" key hint. Labels that were tracked mono capitals become sentence case. */
main{--mono:var(--ui)}
.kpi .l,.fig .l,.ch .l,.anchors .row .k2,.covr .scale,.mt-lens .k,.status,.titlebar .t,.drv{
  text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.titlebar .t{font-weight:500;color:var(--ink2)}
.titlebar .t::first-letter{text-transform:uppercase}
.grf .k,.ch svg text{text-transform:none;letter-spacing:0}
/* Status pills read as plain words; BMO/AMC stay capitals because they are codes. */
td .st{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500}
/* The hero cards say "average miss"; a phone's two-column grid has no room for it. */
@media (max-width:520px){.kpi .l .kx{display:none}}

/* MONO CAPITALS where a label names a SET or a GROUP, never on a single figure: the record's and
   the ladder's Live/Backfilled heads (ink), the ladder table's header and the ledger's column
   groups (muted). The family is named outright because main's --mono is the body face. */
main .sample .k,main .lad2 .lv-fig .lv-sm,main .ladder th,main #ledger th .grp{
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace!important;font-size:11px!important;
  font-weight:500!important;letter-spacing:.1em!important;text-transform:uppercase!important}
main .sample .k,main .lad2 .lv-fig .lv-sm{color:var(--ink2)!important}
main .ladder th,main #ledger th .grp{color:var(--muted)!important;opacity:1}
main #ledger th .grp{line-height:15px}
main #ledger thead th:not(:has(.grp))::before{height:15px}
/* a phone's narrow first column would take the ladder header to three lines of capitals */
@media (max-width:700px){main .ladder th.l{font-family:var(--ui)!important;font-size:12px!important;
  letter-spacing:0!important;text-transform:none!important}}

/* ONE JOB PER COLOUR: oxblood is the live series and a collapse bigger than we said; the
   ladder's headline figures are neither, so they are ink. Links in the copy: ink with a
   oxblood TEXT underline (never a border, 3.198), longhands for Safari. */
.lad2 .lv-big{color:var(--ink)}
.lede a,.note a,.covl a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
.lede a:hover,.note a:hover,.covl a:hover{color:var(--acc);text-decoration-color:var(--acc)}
/* Quieter tints: pending rows took the ladder's "Our locked forecast" peach at full strength. */
tr.pend td,tr.pend:hover td,.lg .sw{background:color-mix(in srgb,var(--sel) 50%,transparent)}

/* The record's figure cells: three, since the repeated "Average miss" cell went. On a phone Lean
   takes the top row and says what it means beside the number. */
.sample .figs{grid-template-columns:repeat(3,1fr)}
.fig .fn{display:none}
@media (max-width:520px){
  .sample .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record .figs .fig:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  .record .figs .fig:first-child .l,.record .figs .fig:first-child .v{grid-column:1}
  .record .figs .fig:first-child .fn{display:block;grid-column:2;grid-row:1/3;padding-left:16px;
    border-left:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--muted)}
  .record .figs .fig:nth-child(2){border-right:1px solid var(--line);border-bottom:0}
  .record .figs .fig:nth-child(3){border-right:0;border-bottom:0}
}

/* The anchor rows: name and miss on one line, the bar at full width (it was capped at 100px),
   then what the bar counts. */
.anchors .row.an-b{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "bar bar" "n n";row-gap:5px;padding:9px 0 10px}
.an-b .k2{grid-area:k}
.an-b .v{grid-area:v;text-align:right}
.an-b .cov-w{grid-area:bar}
.anchors .row.an-b .cov{height:5px;width:100%;max-width:none}
.an-b .an-n{grid-area:n;font-size:11.5px;color:var(--muted)}

/* The ladder's two figures: the misses as bars on one scale, the share as a filled bar. */
.cl-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px 10px;max-width:340px;margin:12px 0 0}
.lad2 .cl-rows+.sub{margin-top:10px}
.cl-k{font:500 12px var(--ui);color:var(--muted)}
.cl-v{font:600 13px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.2em}
.cl-bar{display:block;width:100%;height:11px}
.cl-track{fill:none}
.cl-o{fill:var(--ink)}
.cl-g{fill:var(--line2)}
.cl-win{max-width:340px;margin-top:10px}
.cl-win .cl-bar{height:8px}
.cl-win .cl-track{fill:var(--line2)}

/* The pending block's caption row. */
#ledger tr.pd-head td{height:auto;padding:9px 12px;white-space:normal;text-align:left;font-size:12.5px;line-height:1.5;color:var(--ink2);
  background:color-mix(in srgb,var(--sel) 50%,transparent);border-bottom:1px solid var(--line)}
#ledger tr.pd-head:hover td{background:color-mix(in srgb,var(--sel) 50%,transparent)}
#ledger tr.pd-head b{font-weight:600;color:var(--ink)}
#ledger tr.pd-head a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;white-space:nowrap;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
#ledger tr.pd-head a::after{content:"\2192";display:inline-block;margin-left:4px}
#ledger tr.pd-head a:hover{color:var(--acc)}

/* The column and flag key: /t/'s .dq-more summary (ticker.css) over 3.200's .ckey rows. */
.dq-more{margin:14px 0 0;border-top:1px solid var(--line)}
.dq-more>summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none}
.dq-more>summary::-webkit-details-marker{display:none}
.dq-more .dq-l{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;min-width:0}
.dq-more>summary b{font:600 13.5px/1.3 var(--ui);color:var(--ink)}
.dq-more .dq-n{font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--muted)}
.dq-more .dq-tg{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 12px;
  border:1px solid var(--line2);border-radius:999px;font:500 12px var(--ui);color:var(--ink2)}
.dq-more .dq-tg svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.dq-more .dq-tg .c,.dq-more[open] .dq-tg .o{display:none}
.dq-more[open] .dq-tg .c{display:inline}
.dq-more[open] .dq-tg svg{transform:rotate(180deg)}
.dq-more>summary:hover .dq-tg{border-color:var(--ink2);color:var(--ink)}
.dq-more>summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.ckey{padding:0 18px}
.ckey .dq-more{margin:0}
.ckey dl.ck{margin:0 0 6px}
.ckey .ck-r{display:grid;grid-template-columns:200px minmax(0,1fr) 230px;column-gap:28px;row-gap:6px;padding:12px 0 13px;border-bottom:1px solid var(--line)}
.ckey .ck-r:last-child{border-bottom:0}
.ckey .ck-r dt{font:600 13px/1.4 var(--ui);color:var(--ink)}
.ckey .ck-note{margin:0;max-width:72ch;font-size:12.5px;line-height:1.6;color:var(--ink2)}
.ckey .ck-note b{font-weight:600;color:var(--ink)}
.ckey .ck-in{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 6px;align-content:flex-start}
.ckey .ck-in .k{width:100%;font:500 12px/1.4 var(--ui);color:var(--muted)}
.ckey .col{display:inline-block;padding:0 6px;border:1px solid var(--line2);border-radius:4px;
  font:500 11px/1.6 var(--ui);color:var(--ink2);background:var(--panel);white-space:nowrap}
.ckey .ck-sec{padding:14px 0 6px;border-bottom:1px solid var(--line2);
  font:500 11px "JetBrains Mono",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ckey summary+.ck-sec{padding-top:2px}
.ckey .st{font:500 11.5px var(--ui);padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.ckey .st.na{border-style:dashed;color:var(--muted)}
.ckey .st.ex{border-style:dashed}
.ckey .drv{margin-left:0}
.ckey .ck-ct{width:100%;font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:900px){
  .ckey .ck-r{grid-template-columns:150px minmax(0,1fr);column-gap:22px}
  .ckey .ck-in{grid-column:2}
  .ckey .ck-in .k{width:auto;margin-right:2px}
}
@media (max-width:700px){
  .ckey{padding:0 14px}
  .ckey .ck-r{grid-template-columns:minmax(0,1fr);row-gap:7px;padding:13px 0 14px}
  .ckey .ck-in{grid-column:1}
}
#ledger-key{scroll-margin-top:90px}

/* Phone: every window's status bar as a label/value list, the sentence set apart below. */
@media (max-width:700px){
  .win>.status{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px;height:auto;min-height:0;padding:4px 14px 10px}
  .win>.status span{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;
    min-height:0;height:auto;padding:7px 0;border:0;border-bottom:1px solid var(--line);white-space:normal}
  .win>.status span b{margin-left:0;color:var(--ink);font-weight:500}
  .win>.status .r{display:block;margin:0;padding:9px 0 0;border:0;color:var(--muted);line-height:1.45}
}

/* 3.213 (SEO audit O6): the two headline average misses are figures, not headings, so they are
   no longer `<h3>`s; under the new section headings they would have read as sub-sections named
   "4.5". These are the mockup's own `.sample h3` declarations, moved onto the new element. A
   `div` has no browser default style to override, so it renders as the `h3` did. */
.sample .mae{margin:6px 0 2px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.sample .mae small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:6px}
/* 3.229 (`mockups/accuracy-rounding/`): each comparison column carries how many reports it grades,
   since that is not the record's count, and the note under it says why the two averages can read
   differently. The count is the mono head's own face in lower case, under the name. */
.ladder th .lad-n{display:block;margin-top:2px;font:500 10.5px var(--mono);letter-spacing:.04em;
  text-transform:none;color:var(--muted)}
.ladder .note .lad-why b{color:var(--ink);font-weight:600}
/* 3.229: the ledger's figures went from whole points to tenths, two characters wider, and at 375px
   production's widest row (−44.8% / −32.5% / +12.3pt) put the table 3px past its box. The miss bar
   gives the width back: 60px at 375 → 49px, which still draws ±15 points at 1.6px a point. */
@media (max-width:700px){
  #ledger .eb{width:clamp(40px,13vw,64px)}
  /* The ledger's column lines are the desktop table's GROUP lines (`.g`: Forecast, Close, Miss),
     and each phone view shows one column per group. At the close shows the first of each, so it
     drew three lines; Next morning shows the SECOND of two (Open, its Miss), so it drew one, and
     its figures ran together. These give it the same two lines At the close has; still none
     before the ±15 bar, which belongs to the Miss group (`mockups/accuracy-rounding/`, option 1). */
  .win:has(#mtl-ledger-open:checked) #ledger :is(th,td):is(:nth-child(6),:nth-child(8)){border-left:1px solid var(--line)}
}

/* 3.360 tidy: a panel title wraps evenly on a phone instead of leaving its last word alone
   ("never / merged", "how / often"). */
.titlebar .t{text-wrap:balance}
/* 3.418: the record's headline, dated (`datedRecord`; SEO audit item 9). Ink, not muted: it is the
   sentence a reader or an answer engine quotes. */
.lead .asof{max-width:62ch;margin:12px 0 0;font:500 14px/1.5 var(--ui);color:var(--ink2)}