@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;scroll-behavior:smooth;scroll-padding-top:72px}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 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);font-size:13px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.03em;margin-right:22px;text-decoration:none}
.brand .mark{width:20px;height:20px;display:block;color:var(--ink)}
.tabs{display:flex;gap:2px}
.tabs a{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;color:var(--ink2);font-weight:500;border-radius:8px}
.tabs a:hover{background:var(--bg)}
.tabs a[aria-current]{color:var(--ink);background:var(--bg2)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pos);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;font-size:13px}
.btn:hover{opacity:.88}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.lead{padding:44px 0 30px;max-width:64ch}
.kicker{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
h1{margin:0;font-size:clamp(34px,3.6vw,50px);line-height:1.02;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
h1 em{font:italic 400 1.06em var(--serif);letter-spacing:0;color:var(--ink)}
.lede{margin:16px 0 0;font-size:17px;line-height:1.5;color:var(--muted);max-width:56ch}
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.meta b{color:var(--ink2);font-weight:500}
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 48px;align-items:start;padding-bottom:60px}
.toc{position:sticky;top:72px}
.toc .win{font-size:12.5px}
.toc ol{list-style:none;margin:0;padding:6px 0}
.toc li a{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:6px 14px;text-decoration:none;color:var(--ink2)}
.toc li a:hover{background:var(--hover);color:var(--ink)}
.toc li a .n{font:500 11px var(--mono);color:var(--muted);letter-spacing:.04em;padding-top:2px}
.toc li.sub a{padding-left:14px;color:var(--muted);font-size:12px}
.toc li.sub a .n{color:var(--line2)}
.toc .foot{padding:10px 14px;border-top:1px solid var(--line);font:500 10.5px var(--mono);color:var(--muted);letter-spacing:.04em;line-height:1.5}
.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:36px;padding:0 12px;border-bottom:1px solid var(--line)}
.titlebar .mark{width:14px;height:14px;color:var(--muted)}
.titlebar .t{margin:0 auto;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--muted)}
.body{max-width:66ch}
section{padding:28px 0 8px;border-top:1px solid var(--line)}
section:first-of-type{border-top:0;padding-top:4px}
h2{margin:0 0 6px;font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1;display:flex;gap:14px;align-items:baseline}
h2 .n,
h3 .n{font:500 12px var(--mono);letter-spacing:.06em;color:var(--acc)}
h3{margin:22px 0 4px;font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;gap:10px;align-items:baseline}
h3 .n{font-size:11px;color:var(--muted)}
p{margin:10px 0;max-width:60ch}
p.sum{color:var(--muted);font-size:15px;margin:0 0 6px}
ul{margin:8px 0 10px;padding-left:20px;max-width:60ch}
li{margin:4px 0}
a.x{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line2)}
a.x:hover{border-bottom-color:var(--acc)}
code{font:500 .92em var(--mono);background:var(--bg2);padding:.05em .35em;border-radius:4px}
.f{margin:14px 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;max-width:60ch}
.f .h{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line);font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.f .h b{color:var(--acc);font-weight:500}
.f pre{margin:0;padding:12px 14px;font:500 13.5px/1.6 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre}
.f .w{padding:8px 14px 10px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.f .w b{color:var(--ink2);font-weight:500}
.call{margin:14px 0;padding:12px 16px;border-left:3px solid var(--acc);background:var(--sel);border-radius:0 8px 8px 0;font-size:14.5px;max-width:60ch}
.call.warn{border-left-color:var(--neg);background:var(--bg2)}
.call b{font-weight:600}
table{border-collapse:separate;border-spacing:0;width:100%;max-width:60ch;font-size:13.5px;margin:12px 0}
th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 10px 6px 0;border-bottom:1px solid var(--line2)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:first-child{font-weight:500;white-space:nowrap}
td code{font-size:.9em}
.cls{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2)}
.cls.demote{border-color:var(--rich);color:var(--rich)}
.cls.suppress{border-color:var(--neg);color:var(--neg)}
figure{margin:16px 0;max-width:60ch}
figure .win{padding:0}
figure svg{display:block;width:100%;height:auto}
figcaption{padding:10px 14px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
figcaption b{color:var(--ink2);font-weight:500}
.foot{padding:0 0 40px;color:var(--muted);font-size:12px;line-height:1.5;max-width:100ch}
@media (max-width:1000px){.doc{grid-template-columns:1fr}.toc{position:static;margin-bottom:22px}}
.toc li.sub a .n{color:var(--muted)}
@media (max-width:1000px){.doc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .body .optwrap,.win{overflow-x:auto}
  :where(.opt) .fig,svg.fig{width:600px;max-width:none;min-width:600px}
}
.body li,
.body figcaption,
.body .w{max-width:60ch}
.foot{max-width:70ch}
.wrap>.lead{padding-top:44px}
: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-m3pad{padding:10px}
.u-m2fig{max-width:60ch;margin:18px 0}
.vers{display:grid;gap:14px;margin-top:14px}
.vers .v{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--panel)}
.vers .v h3{margin:0 0 8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.vers .v h3 .d{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
 color:var(--muted);margin-left:9px}
.vers .v p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--ink2)}
.vers .v p:last-child{margin-bottom:0}
.vers .v p.gap{border-left:2px solid var(--line2);padding-left:12px;color:var(--muted)}
.refs{margin:14px 0 0;padding-left:20px}
.refs li{margin-bottom:14px;font-size:13px;line-height:1.6;color:var(--ink2)}
.refs .tk{display:block;margin-top:6px;font:500 9.5px var(--mono);letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted)}
.defs{margin:12px 0 0;padding-left:20px}
.defs li{margin-bottom:8px;font-size:13px;line-height:1.6;color:var(--ink2)}
:root{--bar-h:56px}
.top a[href="#"]{outline:2px dashed var(--neg)}
.state{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fresh{font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.fresh b{font-weight:600;color:var(--ink2)}
.fresh b.ok{font-weight:700}
.fresh b.stale{color:var(--neg);font-weight:700}
.pill{flex:none}
.state .pill{color:var(--neg)}
.nav-id{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;
 color:var(--ink2);font-weight:500;border-radius:8px}
.nav-id:hover{background:var(--bg)}
.top .brand{text-decoration:none}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.tabs a{--tab-pad:12px}
.tabs a[aria-current]{position:relative;color:var(--acc);font-weight:600}
.tabs a[aria-current]::after{content:"";position:absolute;left:var(--tab-pad);
 right:var(--tab-pad);bottom:4px;height:2px;border-radius:1px;background:var(--acc)}
.top{flex-wrap:wrap;height:auto;min-height:56px;row-gap:0;--bar-h:0px}
.top .right{gap:12px}
@media (max-width:820px){
  .top{padding:0 16px}
  .brand{margin-right:12px}
  .tabs{order:3;width:100%;margin:0 -4px 6px;overflow-x:auto;scrollbar-width:none}
  .fresh{font-size:10px}
}
@media (max-width:520px){
  .brand .btxt{display:none}
  .brand{margin-right:8px}
  .fresh .long,.pill .long{display:none}
  .pill{font-size:9px;padding:4px 7px}
  .top .right{gap:8px}
  .nav-id{padding:0 9px}
}
.icon-btn{width:34px;padding:0;display:inline-grid;place-items:center}
.icon-btn svg{display:block;width:16px;height:16px}
.icon-btn .ico-sun{display:none}
.icon-btn[aria-pressed="true"] .ico-moon{display:none}
.icon-btn[aria-pressed="true"] .ico-sun{display:block}
@media (max-width:820px){.toc{top:89px}}
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:700px){
  table.mt-stack,.mt-stack tbody,.mt-stack tr,.mt-stack td{display:block;width:auto}
  table.mt-stack{max-width:none}
  .mt-stack thead{display:none}
  .mt-stack tr{padding:13px 0 14px;border-bottom:1px solid var(--line)}
  .mt-stack td{padding:0;border:0}
  .mt-stack td:first-child{white-space:normal;font-weight:600;margin-bottom:2px}
  .mt-stack td[data-l]{margin-top:7px;line-height:1.5}
  .mt-stack td[data-l]::before{content:attr(data-l);display:block;margin-bottom:1px;
    font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:700px),(pointer:coarse){.toc li a{min-height:44px;align-items:center}}
.body figcaption{max-width:none;padding-right:max(14px,calc(100% - 60ch + 14px))}
.body .f .w{max-width:none;padding-right:max(14px,calc(100% - 60ch + 14px))}
.toc .foot{max-width:none;padding-right:max(14px,calc(100% - 70ch + 14px))}
.body{max-width:49rem}
.body .f,
.body figure,
.body .u-m2fig,
.body table{max-width:none}
.body .call{max-width:none;padding-right:max(16px,calc(100% - 60ch + 16px))}
@media (min-width:761px){.body .opt svg.fig{max-width:calc(60ch - 2px);margin-inline:auto}}
.body figure .opt{background:var(--paper-drawn)}
@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}}
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}

/* ---- 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)}
/*
 * /methodology/ — the restored production paragraphs, as the operator reviewed them with the
 * review marker taken off (3.82, d). `real/methodology.py` laid them out as `.keptlist` /
 * `pre.kept`; these are those rules minus the terracotta border and its offsets.
 */
.plist{margin:10px 0 0;padding:0}
.plist>li{list-style:none}
pre.kf{white-space:pre-wrap;font:12.5px/1.55 var(--mono);color:var(--ink2);background:var(--bg2);padding:10px 12px}

/*
 * 3.137 — the audit's layout fixes (mocked in mockups/methodology-v2/).
 */
/* Formulas show the characters typed: JetBrains Mono's ligatures fuse `#{` (a set count) and
   `==` into single glyphs. */
.f pre{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
/* Callouts on the prose measure, at body size, the text filling the box; one style. The port
   held the text to 60ch with padding inside a full-width box, which left an empty tinted band. */
.call{font-size:16px;line-height:1.55}
.body .call{max-width:40rem;padding-right:16px}
.call p{margin:0;max-width:none}
.call p+p{margin-top:8px}
/* Captions fill their card instead of stopping at 60ch of 12.5px type. */
.f .w,figcaption{font-size:13.5px}
.body .f .w,.body figcaption{padding-right:max(14px,calc(100% - 680px))}
/* One size for prose lists. (The floor under the small mono labels that sat here is 3.198's
   label block at the end of this file: 12px, in the body face.) */
.defs li{font-size:inherit;color:inherit;line-height:inherit}
/* The plain-words key under the lede. */
.terms-h{margin:18px 0 4px;font:600 12px var(--ui);color:var(--ink2)}
.terms{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:14px;line-height:1.45;max-width:64ch}
.terms dt{font-weight:600;color:var(--ink)}
.terms dd{margin:0;color:var(--muted)}
@media (max-width:520px){.terms{grid-template-columns:1fr;gap:0}.terms dd{margin-bottom:6px}}
/* §11: the version cards on the prose measure, and the dated corrections. */
.vers .v{max-width:40rem}
.vers .v p{max-width:none}
.vers .v ul.corr{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink2);max-width:none}
.vers .v ul.corr li{margin-bottom:8px}
.vers .v ul.corr .d{display:block;font:500 12px var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
/* Contents: two more rows, so the sticky list scrolls on a short laptop screen; below 1000px,
   where it stops being sticky, it folds behind a CSS-only checkbox (no script). */
.toc-cb{display:none}
.toc .tg{display:none}
@media (min-width:1001px){.toc .win{max-height:calc(100vh - 90px);overflow-y:auto}}
@media (max-width:1000px){
 .toc-cb{display:block;position:absolute;opacity:0;pointer-events:none}
 .toc .titlebar{padding-top:0;padding-bottom:0}
 .toc .titlebar label{display:flex;align-items:center;justify-content:center;min-height:44px;flex:1;margin:0;cursor:pointer;font-size:12px}
 .toc-cb:not(:checked)~ol,.toc-cb:not(:checked)~.foot,.toc-cb:not(:checked)~.opt-m3{display:none}
 .toc-cb:not(:checked)~.titlebar{border-bottom:0}
 .toc-cb:not(:checked)~.titlebar .tg-s,.toc-cb:checked~.titlebar .tg-h{display:inline;color:var(--acc)}
 .toc-cb:focus-visible~.titlebar label{outline:2px solid var(--acc);outline-offset:-2px;border-radius:8px}
}
/* Figures: a 343-unit drawing below 760px, where the 600-unit one used to scroll its right
   side, the triangle's upright and its label included, out of the box. */
.fig-n{display:none}
@media (max-width:760px){
 svg.fig-w{display:none}
 svg.fig-n{display:block;width:100%;height:auto;background:var(--paper-drawn);border-radius:8px}
}
/* Formulas: below 760px the re-laid copy, each note on its own line. */
.f pre.nw{display:none}
@media (max-width:760px){
 .f pre.wd{display:none}
 .f pre.nw{display:block;white-space:normal;overflow:visible;font-size:12.5px;line-height:1.55;-webkit-mask-image:none;mask-image:none;animation:none}
 .f pre.nw .fl{display:block;white-space:pre-wrap;padding-left:2ch;text-indent:-2ch}
 .f pre.nw .fl-ind,.f pre.nw .fl-nt{padding-left:4ch;text-indent:-2ch}
 .f pre.nw .fl-nt{color:var(--muted)}
 .f pre.nw .fl-gap{height:.55em}
}

/*
 * 3.198 — QUIET (operator, 2026-10-14, mocked in mockups/emphasis-options/): the landing's
 * pass, scaled to a formula page. Formulas (.f pre), inline code and the formula identifiers
 * stay monospace, so the type change is scoped to the LABEL classes rather than the landing's
 * one-line --mono swap.
 */
/* One typeface for labels: the classes that only borrowed mono for texture take the body face,
   in sentence case at one size. */
.toc .foot,.titlebar .t,.f .h,th,.vers .v h3 .d,.refs .tk,.meta,.fresh,.kicker{font-family:var(--ui)!important;
  text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.mt-stack td[data-l]::before{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:11.5px}
.titlebar .t::first-letter{text-transform:uppercase}
.refs .tk,th{font-weight:600!important;color:var(--ink2)!important}
.f .h{color:var(--muted)}
/* The identifier keeps mono and loses the forced capitals: uppercasing printed σ_e², σ_c as
   "Σ_E², Σ_C" and √(2/π) as "√(2/Π)", which are different symbols. */
.f .h b{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--ink2)}
/* § numbers: body face, tabular, muted. Oxblood is left for the report part. */
.toc li a .n,h2 .n,h3 .n{font-family:var(--ui);letter-spacing:0;font-variant-numeric:tabular-nums}
h2 .n,h3 .n{color:var(--muted)}
/* Chart labels inside the SVGs: body face, sentence case; the values keep their figures. */
.grf text{font-family:var(--ui)}
.grf .k{text-transform:none;letter-spacing:0;font-size:11px}
/* Marker classes stay capitals, as a verdict reads, in the body face. Severity moves from hue
   to fill: outline grey, outline ink, solid ink. */
.cls{font:600 10.5px var(--ui);letter-spacing:.06em}
.cls.suppress{background:var(--ink);border-color:var(--ink);color:var(--panel)}
/* One job per colour: links are ink with an oxblood underline, drawn as a text underline so
   it never runs through a neighbouring line. */
a.x{color:var(--ink);border-bottom:0;text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);
  text-underline-offset:3px}
a.x:hover{color:var(--acc);text-decoration-color:var(--acc)}
/* Softer shadows. */
:root:not([data-theme="dark"]){--shadow:0 1px 2px rgba(0,0,0,.035),0 8px 22px -14px rgba(0,0,0,.16)}
/* Derivation detail is set as a note beside the argument, never cut. */
p.aside{font-size:15px;line-height:1.6;color:var(--muted)}
p.aside code{color:var(--ink2)}
/* Figures line up. */
td{font-variant-numeric:tabular-nums}

/*
 * 3.397 (operator, 2026-11-02, mockups/methodology-notes/ "B · card"). A call-out is the formula
 * card (`.f`) with a header strip: what kind of note it is on the left, its section on the right.
 * The pink tint and the rule on its left edge read as an alarm on a page that has thirteen of them.
 */
.call,.call.warn{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:12px 16px 14px;margin:18px 0;color:var(--ink2)}
.call .ch{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:-12px -16px 12px;
  padding:7px 16px;border-bottom:1px solid var(--line);font:500 12px/1.4 var(--ui);color:var(--muted)}
.call .ch span{color:var(--ink);font-weight:600}
.call .ch b{font-weight:500;font-variant-numeric:tabular-nums}
.call b,.call em{color:var(--ink)}
.call .ch b{color:var(--muted)}

/*
 * 3.397: §11 is a key to the `methodology_version` stamp, one row per stamp against the two
 * columns that differ, in place of the dated version cards. Superseded methods are struck and muted.
 */
.vkey{max-width:40rem;margin-top:16px}
.vkey table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.45;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.vkey th,.vkey td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.vkey thead th{padding:8px 12px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line2)}
.vkey tbody th{width:3.5rem;color:var(--ink);font-weight:600}
.vkey td{color:var(--ink2)}
.vkey tr:last-child th,.vkey tr:last-child td{border-bottom:0}
.vkey td.old{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.vkey p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink2)}
@media (max-width:640px){.vkey table{font-size:13px}.vkey th,.vkey td{padding:8px 9px}.vkey tbody th{width:2.5rem}}

/*
 * /data/ (BUILD_PLAN 3.217), the CSV and API reference. It renders with this stylesheet because
 * it is the same document shape as /methodology/; these rules are the parts that page lacks: the
 * four fact cards under the lede, the code windows (`.f.dx`), the three tables and the field list,
 * which stack on a phone. Every class is prefixed `dx-` so nothing here reaches /methodology/.
 */
.dx-facts{margin:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:none}
.dx-facts>div{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow);padding:12px 14px}
.dx-facts dt{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.dx-facts dd{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.dx-facts dd code{font-size:12.5px;background:none;padding:0;color:var(--ink)}
.dx-facts .need{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.f.dx pre{font-size:12.5px;line-height:1.55}
.f.dx .h b{text-transform:none}
.dx-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45;margin:10px 0 18px}
.dx-tbl th{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 6px 0;border-bottom:1px solid var(--line2);vertical-align:bottom}
.dx-tbl td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.dx-tbl td:first-child{white-space:nowrap;color:var(--ink)}
.dx-tbl td code{white-space:nowrap}
.dx-fields{margin:6px 0 22px;display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:0 18px;font-size:14px;line-height:1.45}
.dx-fields dt,.dx-fields dd{padding:9px 0 10px;border-bottom:1px solid var(--line);margin:0}
.dx-fields dt code{display:block;background:none;padding:0;font-size:12.5px;line-height:1.6;color:var(--ink)}
.dx-fields dd{color:var(--ink2)}
.dx-fields .in{display:block;margin-top:3px;font:500 11px/1.4 var(--mono);color:var(--muted)}
@media (max-width:900px){.dx-facts{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  .dx-tbl thead{display:none}
  .dx-tbl,.dx-tbl tbody,.dx-tbl tr,.dx-tbl td{display:block}
  .dx-tbl tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .dx-tbl td{border:0;padding:2px 0}
  .dx-tbl td:first-child{white-space:normal}
  .dx-tbl td[data-l]::before{content:attr(data-l);display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}
  .dx-fields{grid-template-columns:minmax(0,1fr)}
  .dx-fields dt{border-bottom:0;padding-bottom:2px}
  .dx-fields dt code{display:inline}
  .dx-fields dt code+code::before{content:"· ";color:var(--muted)}
  .dx-fields dd{padding-top:0}
}
@media (max-width:700px){
  .dx-err td:first-child,.dx-err td:nth-child(2){display:inline;margin-right:8px}
  .dx-err td[data-l]::before{display:none}
  .dx-err td:last-child{margin-top:2px}
}
@media (max-width:520px){.dx-facts{grid-template-columns:1fr}}