@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);
}
:root[data-theme="dark"]{color-scheme:dark}
: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}
.brand .mark{width:20px;height:20px;display:block;color:var(--ink)}
.tabs{display:flex;gap:2px}
.tabs a{display:flex;align-items:center;height:32px;padding:0 12px;text-decoration:none;color:var(--ink2);font-weight:500;border-radius:8px}
.tabs a:hover{background:var(--bg)}
.tabs a[aria-current]{color:var(--ink);background:var(--bg2)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--neg);border:1px solid currentColor;border-radius:999px;padding:5px 9px}
.btn{height:34px;padding:0 14px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--panel);cursor:pointer;font-weight:500}
.btn:hover{opacity:.88}
:root[data-theme="dark"] .optwrap img{filter:invert(1) hue-rotate(180deg) saturate(.85)}
:root[data-theme="dark"] .optwrap{background:var(--paper-drawn)}
: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)}
: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}
.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}
@property --mt-fr{syntax:"<length>";inherits:false;initial-value:0px}
@media (max-width:700px),(pointer:coarse){.top .brand{min-width:44px;min-height:44px;justify-content:center}
.tabs a{min-height:44px}
.icon-btn{width:44px;height:44px}
.nav-id{min-height:44px}}
@media (max-width:520px){.top>.brand{margin-left:-12px}}
@media (max-width:520px){.top .brand .btxt{display:inline;position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
.top{padding-left:max(16px,calc((100% - 1400px) / 2 + 16px));
  padding-right:max(16px,calc((100% - 1400px) / 2 + 16px))}
@media (min-width: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)}
/*
 * chrome.css only — the pages with no mockup, where the bar and the footer sit inside
 * app.css's Tailwind body (16px/1.5) instead of a mockup body. The five app screens' bar and
 * footer inherit the board's `body{font:13px/1.45 var(--ui)}`; these restate it for the chrome
 * alone, so the chrome measures the same and the page under it is untouched (3.82, d).
 */
.top,footer.site{font-family:var(--ui);line-height:1.45}
.top{font-size:13px}
body>.top{margin:0}