@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}
.find{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);width:240px;box-shadow:var(--shadow)}
.find input{border:0;background:transparent;color:var(--ink);font:inherit;flex:1;min-width:0;outline:0}
.find kbd{font:500 10.5px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:var(--bg)}
.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}
.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.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn:hover{opacity:.88}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.crumb{padding:26px 16px 0;max-width:1400px;margin:0 auto;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crumb a{text-decoration:none;color:var(--acc)}
.lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 40px;align-items:end;padding:14px 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)}
h1 .sym{color:var(--muted);font-weight:500}
.lede{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--muted);max-width:52ch}
.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.rich .v{color:var(--rich)}
.kpi.cheap .v{color:var(--cheap)}
.pc{display:flex;align-items:center;gap:8px;margin-top:2px}
.pc .tr{flex:1;height:12px;display:block}
.pc .tr .bg{fill:var(--line)}
.pc .tr .md{fill:var(--line2)}
.pc .tr .fl{fill:var(--rich)}
.pc .tr .mk{fill:var(--rich)}
.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)}
.titlebar .act{font:500 10.5px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--bg)}
.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)}
.priced{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
.chart{padding:18px 18px 10px;border-right:1px solid var(--line)}
.chart svg{display:block;width:100%;height:auto}
.chart .lg{display:flex;gap:18px;font-size:11.5px;color:var(--muted);padding:8px 2px 4px}
.chart .lg i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:6px;background:var(--ink)}
.chart .lg i.ev{background:var(--acc)}
.strip{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.strip .sr{display:grid;grid-template-columns:118px repeat(7,minmax(0,1fr));align-items:center;
  height:30px}
.strip .sr+.sr{border-top:1px solid var(--line)}
.strip .sk{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.strip .sr>span:not(.sk){text-align:right;font-size:12.5px;padding-right:6px}
.strip .hd>span:not(.sk){font:500 10.5px var(--mono);color:var(--muted)}
.strip .sr.now>span:not(.sk){font-weight:600}
.strip .sr.dl>span:not(.sk){color:var(--acc);font-weight:600}
.strip .cap{font-size:11.5px;color:var(--muted);line-height:1.45;padding:9px 0 0}
.decomp{padding:18px}
.decomp h3{margin:0 0 4px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.decomp p{margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.45}
.rows{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;align-items:center;font-size:12.5px}
.rows .k{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rows .v{font-weight:600;text-align:right}
.rows .v small{font-weight:500;color:var(--muted);margin-left:5px}
.share{height:8px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;margin:6px 0 4px}
.share .fl{fill:var(--acc)}
.share svg{width:100%;height:8px;display:block}
.share+.lab{display:flex;justify-content:space-between;font:500 10.5px var(--mono);color:var(--muted);margin-bottom:12px}
.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}
#hist thead th:not(.g)::before{content:"";display:block;height:13px;margin-bottom:1px}
td{padding:0 8px;height:38px;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.med td{background:var(--bg);font-weight:600;border-top:1px solid var(--line2)}
tr.med td:first-child{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
tr.med:hover td{background:var(--bg)}
td .u{color:var(--muted);font-size:11px;margin-left:1px}
td .d{font-weight:600}
#hist td .d{display:inline-block;min-width:66px}
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.pos{color:var(--pos)}
td.neg{color:var(--neg)}
td .src{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line2);border-radius:4px;padding:1px 5px;margin-left:6px}
td.dim{color:var(--muted)}
#hist th.evc,
#hist td.evc{text-align:center}
.ev{display:inline-block;width:180px;height:14px;position:relative;vertical-align:middle}
.ev svg{position:absolute;inset:0;width:100%;height:14px;display:block}
.ev .band{fill:var(--line)}
.ev .zero{position:absolute;left:50%;top:0;width:1px;height:14px;background:var(--line2)}
.ev .mv{position:absolute;top:2px;width:2px;height:10px;border-radius:1px}
.ev .mv.in{background:var(--pos)}
.ev .mv.out{background:var(--neg)}
.ev .mv.intra{top:5px;height:4px;opacity:.55}
.ladder{display:grid;grid-template-columns:repeat(3,1fr)}
.anchor{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.anchor:last-child{border-right:0}
.anchor .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.anchor h3{margin:4px 0 2px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.anchor h3 small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:6px}
.anchor p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.45}
.anchor .rows{font-size:12.5px;margin-top:auto}
.anchor .rows .v.covr{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.anchor .rows .v.covr .bar{flex:1;min-width:60px;height:4px;border-radius:2px;
  background:var(--line);position:relative;overflow:hidden}
.anchor .rows .v.covr .bar .bg{fill:var(--line)}
.anchor .rows .v.covr .bar .fl{fill:var(--ink2)}
.anchor .rows .v.covr b{font-weight:600;white-space:nowrap}
.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}
.tag{font:500 10px var(--mono);letter-spacing:.04em;padding:2px 6px;border:1px solid var(--line2);border-radius:999px;color:var(--ink2);background:var(--panel);margin-left:6px;vertical-align:1px}
.tag.cluster{border-color:var(--acc);color:var(--acc)}
.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,.priced,.ladder{grid-template-columns:1fr}.chart{border-right:0;border-bottom:1px solid var(--line)}.anchor{border-right:0;border-bottom:1px solid var(--line)}}
svg text[fill="var(--line2)"]{fill:var(--muted)}
.chart svg{max-width:860px;margin-inline:auto;display:block}
svg.fig{max-width:432px;margin-inline:auto}
.note{max-width:70ch}
.strip .cap{max-width:70ch}
.foot p{max-width:70ch}
.status{flex-wrap:wrap;height:auto;min-height:30px;row-gap:2px;padding:4px 0}
.crumb{padding-top:0;line-height:44px}
.wrap>.lead{padding-top:0}
.lead>div:first-child{align-self:start}
.decomp{background:var(--paper-drawn)}
.decomp .fig{background:none}
: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)}
.u-dim6{opacity:.6}
.u-neg{color:var(--neg)}
.u-t1gap{margin:6px 0 10px}
.mono{flex:none}
.mono-plate{fill:var(--bg2);stroke:var(--line2);stroke-width:1}
.mono-text{fill:var(--muted);font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.idrow{display:inline-block;vertical-align:-.18em;margin-right:12px}
.idrow .mono{width:clamp(34px,3.6vw,50px);height:clamp(34px,3.6vw,50px)}
.idnote{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);max-width:62ch}
: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}
.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 (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){
  #hist td .d{min-width:0}
  #hist td .s,#hist td .src{display:table;margin:3px 0 0}
  #hist td,#hist th{padding:0 7px}
  #hist td:first-child,#hist th:first-child{padding-left:12px}
  #hist tr.med td{white-space:normal;line-height:1.3;padding-top:6px;padding-bottom:6px}
  #hist tr td{height:44px}
  #hist .ev{width:min(190px,calc(100vw - 218px))}
}
@media (max-width:360px){
  #hist td,#hist th{padding:0 5px}
  #hist td:first-child,#hist th:first-child{padding-left:10px}
  #hist .ev{width:calc(100vw - 222px)}
}
@media (max-width:700px){
  .win:has(#mtl-hist-move:checked) #hist :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-chart:checked) #hist :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-crush:checked) #hist :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-fcst:checked) #hist :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
}
@media (max-width:700px),(pointer:coarse){.crumb a{display:inline-flex;align-items:center;min-height:44px}}
@media (max-width:1100px){.ladder{grid-template-columns:minmax(0,1fr)}}
.win>.note{max-width:none;padding-right:max(18px,calc(100% - 70ch + 18px))}
@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}
.titlebar>.act{justify-self:end}
@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}
.idrow img.mono{width:clamp(34px,3.6vw,50px);height:clamp(34px,3.6vw,50px);object-fit:contain;display:block;border-radius:6px}
.idrow{vertical-align:-.14em}
.pend{font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line2);border-radius:999px;padding:1px 6px;margin-left:6px}
.ladder.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.ladder.two{grid-template-columns:minmax(0,1fr)}}
table.qual td,
table.qual th{white-space:normal;vertical-align:top}
table.qual th{vertical-align:middle}
table.qual td{height:auto;padding-top:10px;padding-bottom:10px;line-height:1.45}
table.qual td.why{color:var(--muted);max-width:60ch}
table.qual td.n{white-space:nowrap}
table.qual .tag{white-space:nowrap;margin-left:0}
.act a{color:inherit;text-decoration:none}
.nr svg{display:block;width:100%;height:auto;max-width:720px}
.nr .cap{font-size:12.5px;color:var(--ink2);line-height:1.5;padding:12px 2px 2px;max-width:72ch}
.nr .cap b{color:var(--ink)}
.rows .v.none{color:var(--muted);font-weight:500}
.foot a{color:var(--ink2)}
#hist2 thead th:not(.g)::before{content:"";display:block;height:13px;margin-bottom:1px}
#hist2 td .d{display:inline-block;min-width:66px}
#hist2 th.evc,
#hist2 td.evc{text-align:center}
@media (max-width:700px){
  #hist2 td .d{min-width:0}
  #hist2 td .s,#hist2 td .src{display:table;margin:3px 0 0}
  #hist2 td,#hist2 th{padding:0 7px}
  #hist2 td:first-child,#hist2 th:first-child{padding-left:12px}
  #hist2 tr.med td{white-space:normal;line-height:1.3;padding-top:6px;padding-bottom:6px}
  #hist2 tr td{height:44px}
  #hist2 .ev{width:min(190px,calc(100vw - 218px))}
}
@media (max-width:360px){
  #hist2 td,#hist2 th{padding:0 5px}
  #hist2 td:first-child,#hist2 th:first-child{padding-left:10px}
  #hist2 .ev{width:calc(100vw - 222px)}
}

/* ---- 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)}
/*
 * /t/<SYM>/ for a signed-out reader (3.94, `mockups/ticker-anon-options/` option A, card A2).
 * The board's lock mark is public.html's own rule, copied; it stands where a value a free
 * account sees would be. The gate window holds the forward reading's four rows, locked, beside
 * the card; the three windows a free account opens keep their titles and say what is inside.
 */
.board-lock{display:inline-block;height:6px;border-radius:3px;background:var(--line2);
  vertical-align:middle}
.board-lock.w1{width:34px}
.board-lock.w2{width:58px}
.board-lock.w3{width:26px}
.kpi .v .board-lock{height:12px;width:72px;border-radius:6px;margin:8px 0 4px}
.gate{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;padding:22px 24px 24px}
.gate-main{min-width:0}
.gate-k{margin:0;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--report)}
.gate h3{margin:6px 0 4px;font:600 22px/1.2 var(--ui);letter-spacing:-.01em;color:var(--ink)}
.gate p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.gate-rows{display:grid;grid-template-columns:1fr auto;margin-top:14px;border-top:1px solid var(--line)}
.gate-rows>span{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.gate-rows .k{color:var(--ink)}
.gate-rows .v{text-align:right;padding-left:18px}
.gate-act{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);
  border-radius:10px;background:var(--paper-drawn)}
.gate-act .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;font-size:14px;
  text-decoration:none}
.gate-act .act-fine{font-size:12px;color:var(--muted);text-align:center}
.gate a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.opens{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.opens li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:12.5px;
  line-height:1.45;color:var(--muted)}
.opens b{display:block;color:var(--ink);font-weight:600;font-size:13.5px}
.tick{width:18px;height:18px;margin-top:1px}
.tick circle{fill:none;stroke:var(--report);stroke-width:1.3}
.tick path{fill:none;stroke:var(--report);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.act-hand{display:block;width:100%;max-width:300px;height:auto;margin:0 0 -8px auto}
.gated{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:18px 20px}
.gated p{flex:1 1 420px;margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.gated-row{display:flex;gap:10px}
.gated .btn{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:760px){.gate{grid-template-columns:1fr;gap:18px;padding:18px 16px}}
/*
 * The expiry strip under the chart (2026-09-30). The mockup's rows are a grid of seven value
 * columns, the fixture's count; a split uses two to ten, and an eighth wrapped into a second row
 * under the key that its fixed 30px height painted over the row below (MU, ten expiries). The
 * columns now follow the count, never narrower than an "Oct 23 25d" header, and when they do not
 * fit (a phone, or ten on a desktop) the two rows scroll together under the pinned key. `.sr-in`
 * is as wide as the wider row and at least the strip, so both rows share one width and their
 * columns line up. Below 1100px `.priced` is a single `1fr` column, whose automatic minimum is
 * the chart's widest content, so the chart would widen to the whole strip and `.win` would clip
 * it; `min-width:0` holds it to the column.
 */
.priced>.chart{min-width:0}
.strip .sr-x{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.strip .sr-in{width:max-content;min-width:100%}
.strip .sr{grid-template-columns:118px;grid-auto-flow:column;grid-auto-columns:minmax(66px,1fr)}
.strip .sr>span{white-space:nowrap}
.strip .sk{position:sticky;left:0;z-index:1;align-self:stretch;display:flex;align-items:center;
  background:var(--panel)}
@media (max-width:640px){.strip .sr{grid-template-columns:92px}}
/*
 * The data-quality window (2026-10-02, BUILD_PLAN 3.117, option B). On a phone the
 * four columns kept the tag and the count on one line, so "What it means" and "Affects" were
 * squeezed to a word a line: ASML's 13 markers made a window 4,263px tall, and the table was
 * 611px wide in a 317px box, clipping the count. Below 700px each row is a block: the tag, the
 * strip and the count, the meaning at full width, then an "Affects" line whose label the
 * desktop table does not need (it has the header). The strip is in both layouts.
 */
table.qual .mstrip{display:block;margin:4px 0 6px}
.mstrip rect.on{fill:var(--ink2)}
.mstrip rect.off{fill:var(--line)}
.mstrip rect.now{fill:var(--report)}
table.qual td.af .k{display:none}
@media (max-width:700px){
  table.qual thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.qual,table.qual tbody{display:block}
  table.qual tr{display:flex;flex-wrap:wrap;gap:6px 12px;padding:14px 16px 15px;border-bottom:1px solid var(--line)}
  table.qual tr:last-child{border-bottom:0}
  table.qual td{display:block;height:auto;padding:0;border:0;text-align:left;white-space:normal;
    line-height:1.45;background:none}
  table.qual tr:hover td{background:none}
  table.qual td.mk{flex-basis:100%}
  table.qual td.n{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
    font-size:12px;color:var(--muted);white-space:normal}
  table.qual td.n .mstrip{margin:0}
  table.qual td.why{flex-basis:100%;max-width:none;font-size:13px;color:var(--ink2)}
  table.qual td.af{flex-basis:100%;font-size:12px;color:var(--ink2)}
  table.qual td.af .k{display:inline;font:500 10px var(--mono);letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-right:8px}
}
/*
 * "The rest of each report" on a phone (2026-10-02): the history table's lens, on the second
 * table. Its ten columns scrolled sideways inside a 343px window; the lens shows the report and
 * one group at a time, like `#hist` above. Move = quoted, at the open, T+1; Drift = T+1 to T+3;
 * Crush = 10:00 as sold and 30-day; Skew · cover = skew before → after and the 10:00 mark.
 */
@media (max-width:700px){
  .win:has(#mtl-hist2-move:checked) #hist2 :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-drift:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-crush:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-skew:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
}
/*
 * The history table's summary row wraps at every width (3.117). Its captions ("5.9% avg either
 * way", "−20.5% median") were `nowrap`, so they set seven columns' minimum width: at 1280 ASML's
 * table was 1,277px in a 1,222px box and the P&L column was cut off. The phone layout already
 * let this row wrap; the same rule now applies on a desktop, so a caption breaks onto a second
 * line only where the columns would otherwise overflow.
 */
#hist tr.med td{white-space:normal;line-height:1.3;padding-top:6px;padding-bottom:6px}
/* On a phone the caption's word takes a line of its own and the row hangs from its top, so every
   number shares the first line and every word starts on the second. Left to wrap where it fell,
   "−24% / median" broke inside one cell beside an unbroken "4.9 average", and centring cells of
   two and three lines put the words at different heights across the row (2026-10-22). */
@media (max-width:700px){#hist tr.med td{vertical-align:top}#hist tr.med .ul{display:block;margin-left:0}}
/*
 * The two history lenses above phone width (3.117). Below 700px the lens is the mockup's; above
 * it, eleven columns scrolled sideways until the window was wide enough to hold them. Measured
 * on seven production names (ASML MU NVDA TSLA BBAI AAPL KO): `#hist` needs up to 1,037px of
 * viewport (MU, whose unsettled report carries a "pending" tag beside its date) and `#hist2` up
 * to 832px, so each lens runs to its own breakpoint with headroom, 1100 and 900. Here the control
 * is a compact segmented row at the left, not the phone's full-width one; the hide rules are the
 * phone's, copied exactly (`check_css.mjs`'s "ticker lenses" fails if a copy drifts).
 */
@media (min-width:701px) and (max-width:1100px){
  #mtl-hist{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;width:max-content;min-width:0;
    margin:10px;padding:2px;border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
  #mtl-hist .k{display:none}
  #mtl-hist label{position:relative;display:flex;align-items:center;min-height:40px;cursor:pointer}
  #mtl-hist input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  #mtl-hist label span{display:block;text-align:center;padding:8px 16px;border-radius:999px;
    font:500 12.5px var(--ui);color:var(--ink2);white-space:nowrap}
  #mtl-hist input:checked+span{background:var(--ink);color:var(--panel)}
  #mtl-hist input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
  #mtl-hist+.tw{border-top:1px solid var(--line)}
  .win:has(#mtl-hist-move:checked) #hist :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-chart:checked) #hist :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-crush:checked) #hist :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(9),:nth-child(10),:nth-child(11)){display:none}
  .win:has(#mtl-hist-fcst:checked) #hist :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
}
@media (min-width:701px) and (max-width:900px){
  #mtl-hist2{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;width:max-content;min-width:0;
    margin:10px;padding:2px;border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
  #mtl-hist2 .k{display:none}
  #mtl-hist2 label{position:relative;display:flex;align-items:center;min-height:40px;cursor:pointer}
  #mtl-hist2 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  #mtl-hist2 label span{display:block;text-align:center;padding:8px 16px;border-radius:999px;
    font:500 12.5px var(--ui);color:var(--ink2);white-space:nowrap}
  #mtl-hist2 input:checked+span{background:var(--ink);color:var(--panel)}
  #mtl-hist2 input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
  #mtl-hist2+.tw{border-top:1px solid var(--line)}
  .win:has(#mtl-hist2-move:checked) #hist2 :is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-drift:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-crush:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(9),:nth-child(10)){display:none}
  .win:has(#mtl-hist2-skew:checked) #hist2 :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
}

/*
 * 3.120 — the priced window, its panel, the data-quality window and the footnote, as reviewed in
 * mockups/ticker-term-unh/ (production UNH, 2026-09-30) and as /earnings/ has them since 3.119.
 */

/* Term chart: drawn twice (860 and 300 units) and one shown per width; the gap band. */
.tt-fig{display:block}
.tt-fig .sz-narrow{display:none}
.tt-gap{fill:var(--report);opacity:.09}
.tt-lvl{stroke:var(--report);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.tt-brk{stroke:var(--report);stroke-width:1.5;opacity:.7}
.tt-gl{font-family:var(--mono);fill:var(--report);letter-spacing:.02em}
/* the legend's marks are the chart's: the report's expiry is the dashed vertical */
.chart .tt-lg{flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--ink2)}
.chart .tt-lg .c{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.chart .tt-lg i{margin:0;width:16px}
.chart .tt-lg i.ev{width:0;height:12px;background:none;border-left:1.5px dashed var(--acc)}
.chart .tt-lg i.gp{height:9px;border-radius:2px;background:var(--report);opacity:.13}
/* the expiry list a phone reads instead of the two-row strip */
.strip .sr-v{display:none;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.strip .sr-v th{height:auto;padding:0 0 7px;border-bottom:1px solid var(--line2);font:500 10px var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;background:none;white-space:nowrap}
.strip .sr-v th.l,.strip .sr-v td.l{text-align:left}
.strip .sr-v td{padding:9px 0;border-bottom:1px solid var(--line);font:500 13px var(--mono);color:var(--ink2);text-align:right}
.strip .sr-v th+th,.strip .sr-v td+td{padding-left:14px}
.strip .sr-v th:nth-child(2),.strip .sr-v td:nth-child(2){width:52px}
.strip .sr-v td:last-child{font-weight:600;color:var(--ink)}
.strip .sr-v tr.is-rep td.l{color:var(--ink)}
.strip .sr-v .tag{margin-left:8px;padding:1px 6px;border:1px solid var(--acc);border-radius:999px;
  font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);vertical-align:1px}

/* Splitting the move: the prism in two sizes with its caption in HTML, and the rows as a ledger. */
.fig-pair{display:block}
.fig-pair .fig.sz-narrow{display:none}
.opt-t1 .fig-cap{margin:10px 0 0;font:400 12px/1.5 var(--ui);color:var(--muted)}
/* 3.381, the prism drafted (`mockups/prism-chart/` option D): one ruler, its zero at the prism.
   The desktop drawing is 480 units, the column's own width, so it lifts svg.fig's 432 cap. */
.decomp svg.fig.pd{max-width:480px;margin-inline:0}
.pd text{font-family:var(--ui);font-variant-numeric:tabular-nums}
.pd .lb{font-size:12px;fill:var(--ink2)}
.pd .val{font-size:13px;font-weight:600;fill:var(--ink)}
/* A drop line passes under a label rather than through it. */
.pd .lb,.pd .val{paint-order:stroke;stroke:var(--paper-drawn);stroke-width:3px;stroke-linejoin:round}
.pd text.rp{fill:var(--report)}
.pd text.od{fill:var(--ordinary)}
.pd .sh{font-size:11px;fill:var(--muted)}
.pd .tk{font-size:10.5px;fill:var(--muted)}
.pd .rule{stroke:var(--ink2);stroke-width:1}
.pd .axt{stroke:var(--line2);stroke-width:1}
.pd .axt.mi{opacity:.7}
.pd .drop{stroke:var(--line2);stroke-width:1;stroke-dasharray:1.5 2.5}
.pd .pr{fill:var(--paper-drawn);stroke:var(--ink);stroke-width:1}
.pd .beam{fill:none;stroke-width:3;stroke-linejoin:round}
.pd .ecap{stroke-width:1.4}
.pd path.qt{stroke:var(--ink)}
.pd path.rp{stroke:var(--report)}
.pd path.od{stroke:var(--ordinary)}
.pd-nar{display:none}
/* 3.387, how the split is solved (`mockups/ticker-space/` B3): under the expiry table, the space
   the right column's ledger used to leave empty. One bar per expiry on a squared scale, drawn at
   760 and 343 units like the prism, so type never scales. Its short SVG class names are scoped. */
.sv{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.sv-hd{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:8px}
.sv h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sv-key{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11.5px;color:var(--muted)}
.sv-key>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sv-key i{display:inline-block;width:16px;height:3px;border-radius:2px}
.sv-key i.r{background:var(--report)}
.sv-key i.o{background:var(--ordinary)}
.sv-pair{display:block}
.sv-fig{display:block;width:100%;height:auto;overflow:visible}
.sv-fig.sz-narrow{display:none}
.sv-fig text{font-family:var(--ui);font-size:11.5px;font-variant-numeric:tabular-nums}
.sv-fig.sz-narrow text{font-size:11px}
.sv-fig .grid{stroke:var(--line);stroke-width:1}
.sv-fig .tk{font-family:var(--mono);fill:var(--muted)}
.sv-fig .note,.sv-fig .ann{fill:var(--muted);font-style:italic}
.sv-fig .rep{stroke:var(--report);stroke-width:7}
.sv-fig .ord{stroke:var(--ordinary);stroke-width:7}
.sv-fig .fit{stroke:var(--ink);stroke-width:1.6}
.sv-fig .end{fill:var(--panel);stroke:var(--ink);stroke-width:1.8}
.sv-fig .end.rp{fill:var(--report);stroke:var(--report)}
.sv-fig .lab{fill:var(--ink2);font-weight:500}
.sv-fig .sub{fill:var(--muted);font-family:var(--mono);font-size:.88em;font-weight:400}
.sv-fig .val{font-family:var(--mono);fill:var(--ink);font-weight:600}
.sv-fig .lab.rp,.sv-fig .val.rp{fill:var(--report);font-weight:600}
.sv-cap{margin:6px 0 0;max-width:78ch;font:400 12px/1.5 var(--ui);color:var(--muted)}
.sv-cap b{color:var(--report);font-weight:600}
@media (max-width:560px){.pd-nar{display:inline}}
.rows.ledger{display:block;font-size:12.5px}
.rows.ledger .r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "n v";
  column-gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.rows.ledger .r:last-child{border-bottom:1px solid var(--line)}
.rows.ledger .k{grid-area:k}
.rows.ledger .v{grid-area:v;font:600 15px var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rows.ledger .n{grid-area:n;margin-top:3px;font-size:12px;line-height:1.35;color:var(--muted)}

/* "Definitions on the Method page": the link it always named */
.win>.status a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);
  text-decoration-thickness:1px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px;margin-left:.5ch}
.win>.status a:hover{text-decoration-color:currentColor}

/* Data quality: one row per marker, the current reading first, cells in a flex box (any N). */
.dq2{padding:18px 20px 6px}
.dq2 .intro{margin:0 0 14px;max-width:70ch;font-size:13px;line-height:1.5;color:var(--ink2)}
.dq2 .dq-grid{display:flex;flex-direction:column;gap:8px}
.dq2 .dq-r{display:grid;grid-template-columns:190px 26px minmax(0,1fr) 64px;column-gap:12px;align-items:center}
.dq2 .dq-cells{display:flex;gap:4px;min-width:0}
.dq2 .dq-cells>*{flex:1 1 0;min-width:0}
.dq2 .dq-nm{font:500 12.5px var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq2 .dq-dt{font:500 8.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden}
.dq2 .dq-nowh{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.dq2 .dq-ct{font:500 11px var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.dq2 .dq-ct b{color:var(--ink);font-weight:600;font-size:12.5px}
.dq2 .dq-head .dq-ct{font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.dq2 .dq-c{display:block;height:14px;border-radius:3px;background:var(--line);opacity:.55}
.dq2 .dq-c.dq-on{background:var(--ink2);opacity:.82}
.dq2 .dq-c.dq-now{border-radius:999px}
.dq2 .dq-c.dq-unk{background:transparent;opacity:1;box-shadow:inset 0 0 0 1px var(--line2);
  background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--line2) 55%,transparent) 3px 4px)}
.dq2 .dq-ax{display:none}
.dq2 .dq-why{margin:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
.dq2 .dq-why p{margin:0;padding:0 24px;font-size:12px;line-height:1.55;color:var(--muted);border-left:1px solid var(--line)}
.dq2 .dq-why p:nth-child(3n+1){padding-left:0;border-left:0}
.dq2 .dq-why b{display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--ink)}
.dq2 .dq-why .af{display:block;margin-top:5px;font-size:11.5px;color:var(--ink2)}
.dq2 .dq-why .af .k{margin-right:4px;font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .dq2 .dq-r{grid-template-columns:150px 18px minmax(0,1fr) 56px;column-gap:8px}
  .dq2 .dq-cells{gap:2px}
  .dq2 .dq-head{display:none}
  .dq2 .dq-ax{display:flex;justify-content:space-between;align-items:end;gap:6px;padding:0 64px 0 158px;
    font:500 9.5px var(--mono);letter-spacing:.02em;color:var(--muted)}
  .dq2 .dq-ax span{white-space:nowrap}
  /* 3.339: as public.add.css, weight rather than opacity, which read 3.39:1 */
  .dq2 .dq-ax .m{font-weight:400}
  .dq2 .dq-why{grid-template-columns:1fr;gap:14px}
  .dq2 .dq-why p{padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}
  .dq2 .dq-why p:first-child{padding-top:0;border-top:0}
}
@media (max-width:700px){
  .dq2{padding:14px 14px 4px}
  .dq2 .dq-grid{gap:4px}
  .dq2 .dq-r{grid-template-columns:12px minmax(0,1fr) 54px;column-gap:6px}
  .dq2 .dq-cells{gap:3px}
  .dq2 .dq-nm{grid-column:1/-1;white-space:normal;padding-top:8px}
  .dq2 .dq-ax{padding:0 60px 0 0}
  .dq2 .dq-ct{font-size:10px}
  .dq2 .dq-ct b{font-size:11.5px}
}

/* Footnote: /earnings/'s glossary, under this page's column names; the data-issue line as a button. */
.foot{max-width:880px;padding-top:6px;font-size:13px;color:var(--ink2)}
.foot .gl-h{margin:0 0 10px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot .gl{margin:0 0 18px;border-top:1px solid var(--line2)}
.foot .gl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;padding:11px 0 12px;border-bottom:1px solid var(--line)}
.foot .gl dt{font:600 12.5px/1.5 var(--ui);color:var(--ink)}
.foot .gl dd{margin:0;max-width:72ch;line-height:1.55;color:var(--ink2)}
.foot .gl .col{display:inline-block;margin:0 1px;padding:0 5px;border:1px solid var(--line2);border-radius:4px;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink2);background:var(--panel);vertical-align:1px;white-space:nowrap}
.foot .issue{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:none;margin:0;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.foot .issue span{flex:1 1 260px;color:var(--ink2)}
.foot .issue a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line2);
  border-radius:999px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.foot .issue a:hover{border-color:var(--ink2)}
.foot .issue svg{width:11px;height:11px}

@media (max-width:560px){
  .tt-fig .sz-wide,.fig-pair .fig.sz-wide{display:none}
  .tt-fig .sz-narrow,.fig-pair .fig.sz-narrow{display:block;max-width:none}
  .sv-fig.sz-wide{display:none}
  .sv-fig.sz-narrow{display:block}
  .chart{padding:14px 12px 10px}
  .strip .sr-x{display:none}
  .strip .sr-v{display:table;margin-top:4px}
  .strip .cap{font-size:12.5px;line-height:1.5;color:var(--ink2);padding-top:12px}
  .rows.ledger .v{font-size:16px}
  .foot .gl>div{grid-template-columns:minmax(0,1fr);gap:3px;padding:10px 0 11px}
  .foot .issue a{min-height:44px}
}

/*
 * 3.124 — the "next report" window and the history's Report cell, as reviewed in
 * mockups/ticker-timeline-banf/ (production BANF, 2026-10-02).
 */

/* The timeline: drawn twice (720 and 300 units) and one shown per width, as the term chart is. */
.tl-fig{display:block}
.tl-fig .sz-narrow{display:none}

/* History, report cell: /earnings/'s 3.119 chip — the session and its markers share one
   line-box. 3.215: "pending" is the "trade" chip, dashed capitals, as on /earnings/. */
#hist td .meta{display:inline-flex;align-items:center;gap:7px;margin-left:8px;vertical-align:1px;white-space:nowrap}
#hist td .meta .s,#hist td .meta .src{margin-left:0}
#hist td .meta .pend{display:inline-block;margin:0;padding:1px 5px;border:1px dashed var(--line2);border-radius:4px;
  font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){
  #hist td .meta{display:flex;width:max-content;gap:6px;margin:3px 0 0}
  #hist td .meta :is(.s,.src,.pend){display:inline-block;margin:0}
  /* a marker goes on its own line under the chip (3.215): beside it, it widened the column */
  #hist td .meta:has(.src,.pend){flex-direction:column;align-items:flex-start;gap:4px}
}
/* below 360px the chip tightens rather than wraps */
@media (max-width:360px){
  #hist td .meta{gap:4px}
  #hist td .meta .s{padding:2px 4px}
}

@media (max-width:560px){
  .tl-fig .sz-wide{display:none}
  .tl-fig .sz-narrow{display:block;max-width:none}
  .nr .cap{padding-top:10px}
}

/*
 * 3.127 — /t/<SYM>/ v2, as reviewed in mockups/ticker-visitor-rell/ (production RELL, PEP, HELE,
 * BANF, 2026-10-04): the locked page and the no-public-page notice for a visitor, and the parts a
 * subscriber shares (the folded marker notes, the hatched-cell key, short captions on a phone).
 */
/* the gate's eyebrows are <p>, so .gate p (13.5px, muted, +.08em) beat .gate-k: say it with more weight */
.gate p.gate-k{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--report)}
.gate-act p.gate-k{color:var(--muted)}
/* v2 / 1 — with its rows gone the gate's left side is a heading and a sentence: centre it on the card */
.gate{align-items:center}
.gate-main h3{font-size:26px;line-height:1.15}
.gate-main p:not(.gate-k){font-size:14.5px;max-width:46ch}
/* v2: one heading over the tiles at every width (2), the tile word gone */
.lk-kpis{row-gap:10px}
.lk-head{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin:0;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* v2 / 14 — the dashed outlines one step darker, so they read on paper */
.lk-kpis .kpi{border-color:color-mix(in oklab,var(--line2),var(--ink2) 22%)}
/* v2 / 7 — short window captions on a phone */
.titlebar .t .tn{display:none}
/* v2 / 15 — the hatched cell's key */
.dq-key{display:flex;align-items:flex-start;gap:8px;margin:8px 0 16px;line-height:1.45;font-size:12.5px;color:var(--muted)}
.dq-key i{flex:none;width:14px;height:12px;margin-top:3px}
.lk-ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 1 — locked tiles */
.lk-kpis .kpi{border-style:dashed;box-shadow:none;background:transparent}
.lk-kpis .lk-v{display:flex;align-items:center;gap:7px;margin:6px 0 2px;font:500 13px var(--ui);letter-spacing:0;color:var(--muted)}
/* 2 — one window for the three locked tables */
.gated3{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;padding:18px 20px}
.g3-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.g3-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.g3-list li:first-child{border-top:0;padding-top:0}
.g3-list .lk-ic{margin-top:2px;color:var(--muted)}
.g3-list b{display:block;font-weight:600;color:var(--ink);font-size:14px}
.g3-list span{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--muted);max-width:78ch}
.g3-act{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:260px;text-align:center}
.g3-act .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;width:100%;font-size:14px;text-decoration:none}
.g3-act span{font-size:12px;line-height:1.45;color:var(--muted)}
.g3-act span a{color:var(--ink2)}
/* 3 — the marker notes, folded */
.dq-more{margin:14px 0 0;border-top:1px solid var(--line)}
/* one row: label and count on a shared baseline, the toggle at the right edge as the board's
   Held-out block has it, and the same space above and below */
.dq-more>summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style: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::-webkit-details-marker{display:none}
.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}
@media (max-width:700px){
  /* the six tiles become one list: a heading, then each number's name in plain type with its lock */
  .lk-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;padding:14px 16px 6px;border:1px dashed color-mix(in oklab,var(--line2),var(--ink2) 22%);border-radius:12px}
  .lk-head{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin:0 0 6px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .lk-kpis .kpi{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:0;padding:9px 0;border:0;border-top:1px solid var(--line);border-radius:0}
  .lk-kpis .kpi .l{font:500 13px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
  .lk-kpis .kpi .n,.lk-kpis .lk-v span{display:none}
  .lk-kpis .lk-v{margin:0;color:var(--muted)}
  .lk-kpis .lk-wide{display:none}
  .gate h3,.gate-main h3{font-size:19px}
  .gate-act .btn,.g3-act .btn{height:44px}
  .titlebar .t .tw{display:none}
  .titlebar .t .tn{display:inline}
  .gated3{grid-template-columns:minmax(0,1fr)}
  .g3-act{max-width:none}
  .g3-act .btn{height:44px}
}
.nr-card{align-self:end;justify-self:end;width:min(320px,100%);padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow)}
.nr-card p{margin:0}
.nr-k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--report)}
.nr-v{margin-top:6px!important;font:600 24px/1.1 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.nr-n{margin-top:4px!important;font-size:12.5px;color:var(--muted)}
/* on the white window's edges, not the paper frame's: the window sits 12px inside it */
.nr-card{margin-right:12px}
@media (max-width:1100px){.nr-card{justify-self:stretch;width:auto;margin:0 12px}}
.wall-paid{max-width:72ch;margin:22px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.wall-paid a{color:var(--ink2)}

/* The history window's CSV action (paid), restored where 3.117 removed it; never underlined. */
.titlebar .act a{text-decoration:none}

/* 3.170 (mockups/ticker-free-lock/ option E): a free account, a report after today. "fl-" = forward
   lock. The tiles mix three locked and three open; the split keeps its shape with its two parts
   as bars; the strip under it points at the board window, which lists the names reporting the
   same day by symbol, the quoted move open and the rest locked. */
.lk-kpis .kpi.fl-open{border-style:solid;border-color:var(--line);background:var(--panel);box-shadow:var(--shadow)}
.fl-forkbox{margin:4px 0 14px}
.fl-fork{display:block;width:100%;max-width:330px;height:auto}
.fl-fork .q{stroke:var(--ink2);stroke-width:1.5}
.fl-fork .pr{fill:var(--panel);stroke:var(--ink2);stroke-width:1.3}
.fl-fork .rep{stroke:var(--report);stroke-width:2;opacity:.45}
.fl-fork .ord{stroke:var(--ordinary);stroke-width:2;opacity:.45}
.fl-fork .lbl{font:500 9.5px var(--mono);letter-spacing:.1em;fill:var(--ink2)}
.fl-fork .lbl.r{fill:var(--report)}
.fl-fork .lbl.o{fill:var(--ordinary)}
.fl-fork .num{font:600 14px var(--mono);fill:var(--ink)}
.fl-fork .bar{fill:var(--line2)}
.fl-forktag{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fl-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;padding:12px 14px;
  border:1px dashed color-mix(in oklab,var(--line2),var(--ink2) 22%);border-radius:10px;background:var(--panel)}
.fl-strip p{flex:1 1 220px;margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.fl-strip p b{color:var(--ink);font-weight:600}
.fl-strip .btn{display:inline-flex;align-items:center;height:34px;text-decoration:none;border-color:var(--line2)}
.fl-board{align-items:start}
.fl-card .btn{text-decoration:none}
.fl-card .act-fine a{color:var(--muted)}
.fl-tw{margin-top:12px;border-top:1px solid var(--line)}
.fl-t{width:100%;border-collapse:collapse;font-size:13px}
.fl-t th{height:32px}
.fl-t td{padding:8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.fl-t .l{text-align:left}
.fl-t td b{font:600 13px var(--mono)}
.gate .fl-t td b a{color:inherit;text-decoration:none}
.gate .fl-t td b a:hover{text-decoration:underline}
.fl-nm{margin-left:8px;color:var(--muted);font-size:12px}
.fl-ss{color:var(--muted)}
.fl-q{font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.fl-q small{display:block;font:500 10.5px var(--ui);color:var(--muted)}
th.fl-q{font:500 11px var(--ui)}
.fl-tag{display:block;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fl-t td.fl-gl,.fl-t th.fl-gl{border-left:1px dashed var(--line2)}
.fl-t tr.fl-me td{background:var(--sel)}
.fl-t tr.fl-me td:first-child{box-shadow:inset 3px 0 0 var(--report)}
.gate-main .fl-note{margin-top:10px;font-size:12.5px;max-width:none}
.gate-main .fl-note b{color:var(--ink2);font-weight:600}
@media (max-width:700px){
  .fl-rk,.fl-nm{display:none}
  .fl-t tr.fl-me td:nth-child(2){box-shadow:inset 3px 0 0 var(--report)}
  .lk-kpis .kpi.fl-open{background:transparent;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0}
  .lk-kpis .kpi.fl-open .v{font-size:15px}
}

/*
 * 3.171: the "← Board · date" row above the lead is gone (its link is the head line's "Board /"),
 * so the lead takes the company page's own top spacing, 44px at every width. The two views then
 * open at the same height, and switching between them moves nothing on the screen. The selector
 * is the mockup's own `.wrap>.lead{padding-top:0}`, which leaned on that row for the space.
 */
.wrap>.lead{padding-top:44px}

/*
 * 3.200 — the quiet pass and the column keys on /t/ (operator, 2026-10-14, mockups/ticker-quiet/
 * "Quiet + copy"): landing.add.css's 3.198 block, rule for rule, on this page's classes, as 3.199
 * did for /earnings/. Same layout, same elements, same figures.
 */
: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)}
/* One logo is enough. visibility, not display: the bar is a 1fr auto 1fr grid and the mark holds
   the first track, so removing it would pull every window title left. */
.titlebar .mark{visibility:hidden}
/* ONE TYPEFACE inside <main> (the top bar keeps its "/" key hint). */
main{--mono:var(--ui)}
.kpi .l,.rows .k,.strip .sk,.strip .sr-v th,.dq2 .dq-head .dq-ct,.dq2 .dq-nowh,.dq2 .dq-why .af .k,table.qual td.af .k,
.foot .gl-h,.grf .k,.mt-lens .k,.opt-t1 .fig-cap,th .grp,tr.med td:first-child,.vsw .h i,.titlebar .t,.status,
.nr-k,.gate-k,.lk-head{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.kpi .l::first-letter,.rows .k::first-letter,tr.med td:first-child::first-letter,.titlebar .t::first-letter{text-transform:uppercase}
.titlebar .t{font-weight:500;color:var(--ink2)}
th .grp{font-weight:600!important;color:var(--ink2)!important}
/* Kickers keep their role, as small capitals, muted and in the body face. */
.kicker,.anchor .k{font:600 12px var(--ui)!important;letter-spacing:.08em!important;color:var(--muted)!important;text-transform:uppercase}
.kicker.k1 .knm,.kicker.k1>span:not(.ksp):not(.kdt):not(.kx-sep){color:var(--ink2)}
/* Chips stay capitals: AMC / BMO / TRADE / REPORT read as tags. */
td .meta .s,td .src,.pill,.pend,.fl-tag,.strip .sr-v .tag,.tag.cluster{font-weight:600;letter-spacing:.06em}
/* ONE JOB PER COLOUR: oxblood is the report (its band, its expiry, its tag, its share); the
   kicker and the links leave it. Links: ink with an oxblood text underline. */
/* 3.216: LONGHANDS, not `text-decoration:underline 1px <colour>`. iOS Safari rejects a shorthand
   that carries a thickness, drops the whole declaration, and the base rule's text-decoration:none
   wins, so on a phone these links rendered as plain ink (operator, 2026-10-16). */
.kicker.k1 .kc,.lede a,.win>.status .r a,.note a,.cap a,.foot .gl a,.crumb a{
  color:var(--ink)!important;border-bottom:0!important;
  text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-underline-offset:3px}
.kicker.k1 .kc:hover,.lede a:hover,.win>.status .r a:hover,.note a:hover,.cap a:hover,.foot .gl a:hover,.crumb a:hover{
  color:var(--acc)!important;text-decoration-color:var(--acc)}
table td,.kpi .v,.rows .v,.strip .sr span,.status b,.anchor h3{font-variant-numeric:tabular-nums}

/* The expiry strip's rows are .sr, the search suggestions' class, so shared.add.css's
   .sr:hover{background:var(--hover)} lit them (a white box where the pinned label kept its --panel)
   and its border-radius:8px curved the divider over "Option price". The strip is not interactive. */
.strip .sr:hover{background:none}
.strip .sr{border-radius:0}

/* "What the columns mean": /earnings/'s key rows (3.199) under this page's .dq-more summary. */
.ckey{padding:0 18px}
.ckey .dq-more{margin:0}
.ckey dl.ck{margin:0}
.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 10.5px/1.6 var(--mono);letter-spacing:.02em;color:var(--ink2);background:var(--panel);white-space:nowrap}
@media (max-width:900px){
  .ckey .ck-r{grid-template-columns:170px 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 .ck-r{grid-template-columns:minmax(0,1fr);row-gap:7px;padding:13px 0 14px}
  .ckey .ck-in{grid-column:1}
}
#columns,#columns2{scroll-margin-top:90px}
.foot .gl .glsee 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}
/* Two reading notes side by side (the data-quality window), in the intro's type and colour;
   stacked below 820px. */
.lead2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 36px;align-items:start;margin:0 0 14px}
.lead2 .intro{margin:0;max-width:62ch}
@media (max-width:820px){.lead2{grid-template-columns:minmax(0,1fr)}.lead2 .intro+.intro{margin-top:10px}}
/* 3.201: the signed-out page's two "Next report" labels (the sign-up card's and the no-public-page
   notice's) were still --report; 3.200's mockup showed the paid view, so its kicker rule never met
   them. Muted, as every other label over a heading on this page; oxblood is the report. */
.gate p.gate-k,.nr-k{color:var(--muted)}

/* 3.278 (operator, 2026-10-22): a dash that says why it is empty on hover shows the help cursor, so a
   reader can tell it has an explanation from a dash that has none. `.why` is set wherever a dash
   carries its reason in a title. */
.why{cursor:help}