/* TMPY web UI. One light palette on :root, a designed dark palette for
   "match my device" and for the explicit dark choice. Green/red only ever
   mean price direction; blue is the interface colour.
   Every text colour passes WCAG 2.2 AA (4.5:1) on both surfaces and every
   graphic colour passes 3:1. docs/brand-design/README.md has the table;
   re-check it there before changing a value here. */
/* IBM Plex Sans, served from /fonts (SIL Open Font License, fonts/OFL.txt).
   One variable file holds every weight the site uses. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #F5F6F8; --surface: #FFFFFF; --surface-2: #FAFBFC; --hover: #F4F6F9;
  --text: #0B1220; --text-2: #5B6475; --text-3: #667085;
  --line: #E4E7EC; --line-2: #EEF0F3;
  --accent: #2457F5; --accent-ink: #FFFFFF; --accent-tint: #EEF3FF; --accent-track: #E1E8F7;
  --up: #0D7F48; --down: #D0343B; --flat: #828B9B; --vwap: #C8930F;
  --up-fill: rgba(13, 127, 72, .08); --down-fill: rgba(208, 52, 59, .08);
  --chip: #F0F2F5; --amber: #9A5B00; --amber-tint: #FFF4E0; --session-band: rgba(11, 18, 32, .035);
  --shadow-pop: 0 12px 32px rgba(11, 18, 32, .12), 0 2px 6px rgba(11, 18, 32, .06);
  --shadow-panel: -16px 0 40px rgba(11, 18, 32, .10);
  --scrim: rgba(11, 18, 32, .30);
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  --panel-w: 416px;
  --font: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0E15; --surface: #10161F; --surface-2: #141B26; --hover: #161E2A;
    --text: #E8ECF3; --text-2: #A3ACBB; --text-3: #838C9C;
    --line: #222A38; --line-2: #1A212D;
    --accent: #5B84FF; --accent-ink: #0A0E15; --accent-tint: #16203A; --accent-track: #223050;
    --up: #2FBF71; --down: #F0555B; --flat: #6F7889; --vwap: #E0B23A;
    --up-fill: rgba(47, 191, 113, .10); --down-fill: rgba(240, 85, 91, .10);
    --chip: #1A212D; --amber: #F2B45A; --amber-tint: #2A2113; --session-band: rgba(255, 255, 255, .035); --session-band: rgba(255, 255, 255, .035);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-panel: -16px 0 40px rgba(0, 0, 0, .35); --scrim: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0E15; --surface: #10161F; --surface-2: #141B26; --hover: #161E2A;
  --text: #E8ECF3; --text-2: #A3ACBB; --text-3: #838C9C;
  --line: #222A38; --line-2: #1A212D;
  --accent: #5B84FF; --accent-ink: #0A0E15; --accent-tint: #16203A; --accent-track: #223050;
  --up: #2FBF71; --down: #F0555B; --flat: #6F7889; --vwap: #E0B23A;
  --up-fill: rgba(47, 191, 113, .10); --down-fill: rgba(240, 85, 91, .10);
  --chip: #1A212D; --amber: #F2B45A; --amber-tint: #2A2113; --session-band: rgba(255, 255, 255, .035);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-panel: -16px 0 40px rgba(0, 0, 0, .35); --scrim: rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 14px/1.4 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg { display: block; overflow: visible; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--text-3); } .small { font-size: 12px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); }
/* The page: the menu rail on the left, and the top bar, index strip and
   page to its right. The rail folds to icons on narrower windows (or by
   choice) and becomes a bar along the bottom on phones. */
/* The light-blue tint of "What just happened", shared by the list tabs and the
   feed's chips. Built from --accent and --surface, so it follows the theme. */
:root { --seg-bg: color-mix(in srgb, var(--accent) 7%, var(--surface)); --seg-line: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
/* One look for every segmented control (list tabs, the feed's chips, the
   stock panel, the Overview sessions; owner picked option C, 2026-09-30): a
   plain grey track, the chosen one a solid accent pill with white text, and
   the keyboard ring a soft halo rather than a hard blue box, which read as a
   second selection. */
:root { --seg-pill-shadow: 0 0 0 .5px rgba(11, 18, 32, .10), 0 1px 2px rgba(11, 18, 32, .08), 0 2px 6px rgba(11, 18, 32, .05); --seg-focus: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seg-pill-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .4); } }
:root[data-theme="dark"] { --seg-pill-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .4); }
:root { --rail-w: 184px; --rail-bg: #0F1B3D; --rail-2: #1B2B5C; --rail-text: #C9D3F0; --rail-dim: #7F8DB8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rail-bg: #070B14; --rail-2: #141D33; } }
:root[data-theme="dark"] { --rail-bg: #070B14; --rail-2: #141D33; }
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 100%; padding-top: env(safe-area-inset-top, 0px); transition: grid-template-columns 220ms var(--ease-out); }
.shell > .topbar, .shell > .context, .shell > .app { grid-column: 2; }

/* ---------- menu rail ---------- */
.rail { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--rail-bg); color: var(--rail-text); min-height: 0; z-index: 40; }
.rail .logo-mark { color: #fff; padding: 2px 10px 12px; font-size: 17px; font-weight: 700; }
.rail .logo-mark b { background: #6E93FF; }
.rail-h { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--rail-dim); padding: 10px 10px 4px; }
.rail .tab, .rail-fold { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--rail-text); text-decoration: none; font-size: 14px; font-weight: 600; position: relative; white-space: nowrap; transition: background 150ms, color 150ms; }
.rail .tab svg, .rail-fold svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rail .tab:hover, .rail-fold:hover { background: var(--rail-2); color: #fff; }
.rail .tab:focus-visible, .rail-fold:focus-visible { outline: 2px solid #6E93FF; outline-offset: 2px; }
.rail .tab[aria-current] { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(36, 87, 245, .3); }
:root[data-theme="dark"] .rail .tab[aria-current] { color: #0A0E15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail .tab[aria-current] { color: #0A0E15; } }
.rail .tab[aria-current] svg { opacity: 1; }
.rail .tab .ndot { margin-left: auto; width: 8px; height: 8px; background: #6E93FF; box-shadow: 0 0 0 3px rgba(110, 147, 255, .25); }
.rail .tab[aria-current] .ndot { background: #fff; }
.rail .tab .ncount { margin-left: auto; }
.rail-fold { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--rail-dim); height: 38px; }
.rail-fold svg { transition: transform 220ms var(--ease-out); }

/* One tooltip delay for the whole site (#297): the same 500 ms as the help
   cards (TIP_DELAY_MS in terms.js). Keyboard focus shows a label at once.
   Preferences "Help cards: Show immediately" sets it to 0. */
:root { --tip-delay: 500ms; }
/* Tooltips: what each page is, to the right of the rail. */
.rail [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 120ms ease var(--tip-delay), transform 120ms ease var(--tip-delay); z-index: 95; box-shadow: var(--shadow-pop); }
.rail [data-tip]:hover::after, .rail [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.rail [data-tip]:focus-visible::after { transition-delay: 0ms; }

/* Folded: icons only (the name moves into the tooltip). */
.shell.folded { --rail-w: 64px; }
.shell.folded .rail { padding: 14px 8px; align-items: center; gap: 4px; }
.shell.folded .rail .tab-l, .shell.folded .rail-h { display: none; }
/* Folded, the site name stays, small, under the logo bars. */
.shell.folded .rail .logo-mark { flex-direction: column; gap: 4px; padding: 2px 0 12px; }
.shell.folded .rail .logo-mark .tab-l { display: block; font-size: 10.5px; letter-spacing: .8px; }
.shell.folded .rail .tab, .shell.folded .rail-fold { width: 44px; height: 42px; padding: 0; justify-content: center; }
.shell.folded .rail .tab .ncount { position: absolute; top: 3px; right: 1px; margin: 0; min-width: 18px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.shell.folded .rail .tab .ndot { position: absolute; top: 9px; right: 9px; margin: 0; }
.shell.folded .rail-fold svg { transform: rotate(180deg); }
/* Folded, the tooltip also names the page. */
.shell.folded .rail .tab[data-name]::after { content: attr(data-name) " — " attr(data-tip); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.topbar .search { margin-left: 0; }
/* On phones the rail is a bottom bar, so the logo moves up here. */
.topbar .top-logo { display: none; }
.topbar .top-right { margin-left: auto; }
.logo-mark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; letter-spacing: .5px; color: var(--text); text-decoration: none; }
.logo-mark i { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.logo-mark b { display: block; width: 5px; border-radius: 1px; background: var(--accent); }
.ndot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .ndot { animation: pulse 2s ease-in-out 3; } }
@keyframes pulse { 50% { opacity: .35; } }
/* The watchlist count: amber like the star that fills it, so it reads at a glance. */
.ncount { font-size: 11px; font-weight: 600; line-height: 17px; min-width: 18px; text-align: center; color: var(--accent-ink); background: var(--amber); border-radius: 9px; padding: 0 6px; }
.search { position: relative; flex: 0 1 420px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text-3); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 13.5px; }
.search input::-webkit-search-cancel-button { display: none; }
/* Faint completion after the cursor ("what is v" + "olume"): Tab takes it. Same font and padding as the input so the letters line up. */
.search .inwrap { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.search .inwrap input { width: 100%; }
.search .ghost { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; overflow: hidden; pointer-events: none; color: transparent; font-size: 13.5px; }
.search .ghost i { font-style: normal; color: var(--text-3); }
@media (min-width: 761px) { .topbar .search .ghost { font-size: 14.5px; } }
.search kbd { font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
/* "Fuzzy + natural-language search on" (nl_search): a tiny line under the box, in the free strip of the 56px bar. */
.search .nl-on { position: absolute; left: 12px; top: calc(100% + 1px); font-size: 10px; line-height: 10px; letter-spacing: .01em; color: var(--text-3); white-space: nowrap; pointer-events: none; }
.search-cancel, #search-open { display: none; }
.search-cancel { border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 500; padding: 8px 4px 8px 8px; cursor: pointer; }
@media (max-width: 760px) { #search-open { display: inline-flex; } }
#search-list { position: absolute; top: 40px; left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); }
/* Desktop: the search is the front door, so it sits in the middle of the bar, wider and taller. The bar grows 8px to
   keep the "search on" caption inside it. Phones keep the flex row above. */
@media (min-width: 761px) {
  .topbar { display: grid; grid-template-columns: 1fr minmax(0, 620px) 1fr; height: 64px; }
  .topbar .search { grid-column: 2; margin: 0; height: 40px; padding: 0 10px 0 14px; border-radius: 10px; gap: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
  .topbar .search > svg { width: 16px; height: 16px; }   /* the icon only: not the pictures inside the dropdown */
  .topbar .search input { font-size: 14.5px; }
  .topbar .search .nl-on { left: 14px; }
  .topbar .top-right { grid-column: 3; justify-self: end; margin-left: 0; }
  #search-list { top: 52px; max-height: min(72vh, 640px); overflow-y: auto; }
}
#search-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px; }
#search-list li span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search-list li em { font-style: normal; font-weight: 600; }
#search-list li[aria-selected="true"], #search-list li:hover { background: var(--hover); }
#search-list li.none { display: block; color: var(--text-3); cursor: default; }
/* Smart results (nl_search): rows that go somewhere, plus the stats line */
#search-list li.nl b { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
#search-list li svg.nl-ico { width: 20px; height: 20px; color: var(--accent); }
#search-list li.nl-sector { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
#search-list li.nl strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search-list li.nl small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 1px; color: var(--text-3); font-size: 11.5px; line-height: 1.35; overflow: hidden; white-space: normal; }
#search-list .nl-b { font-style: normal; font-weight: 600; font-size: 10.5px; padding: 2px 8px; border-radius: 9px; background: var(--hover); color: var(--text-2); white-space: nowrap; }
#search-list .nl-b[data-src="cache"] { color: var(--up, #1a7f37); }
#search-list .nl-b[data-src="fuzzy"], #search-list .nl-b[data-src="numeric"], #search-list .nl-b[data-src="composed"] { color: var(--accent); }
#search-list .nl-b[data-src="ai"] { color: #b45309; }
#search-list .nl-b[data-src="unsupported"] { color: var(--down, #cf222e); }
#search-list .nl-b[data-src="closest"] { color: var(--text-2); font-style: italic; }
#search-list .nl-b[data-src="ticker"] { color: var(--accent); }
#search-list .nl-b[data-src="help"], #search-list .nl-b[data-src="sug"] { color: var(--text-2); }
#search-list li.nl-sug u { text-decoration: none; font-weight: 500; color: var(--text-3); }
#search-list li.nl-sug strong { font-weight: 600; }
#search-list li.nl-head, #search-list li.nl-foot, #search-list li.nl-trace { display: block; cursor: default; background: none; }
#search-list li.nl-head { padding: 6px 10px; color: var(--text-3); font-size: 12px; }
#search-list li.nl-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; }
#search-list li.nl-foot .linkbtn { font-size: 11.5px; }
#search-list li.nl-foot span { overflow: visible; text-overflow: clip; white-space: normal; }
#search-list li.nl-trace { padding: 0 10px 8px; font-size: 11px; color: var(--text-3); }
#search-list li.nl-trace table { width: 100%; border-collapse: collapse; }
#search-list li.nl-trace td { padding: 2px 4px; border-top: 1px solid var(--line); vertical-align: top; word-break: break-word; }
#search-list li.nl-exh { display: block; cursor: default; padding: 8px 10px 2px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#search-list li.nl-ex { display: block; padding: 6px 10px; color: var(--text-2); font-size: 13px; }
#search-list li.nl-ex:hover { background: var(--hover); color: var(--text); }
/* Recent searches (this browser only), with Clear. */
#search-list li.nl-rh { display: flex; align-items: baseline; justify-content: space-between; }
#search-list li.nl-rh .linkbtn { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Results in groups: Stocks & ETFs, Screens, Help, Pages. */
#search-list li.nl-gh { display: block; cursor: default; background: none; padding: 8px 10px 2px; }
/* What a screen was understood as: one tag per part, shown before it runs. */
#search-list li.nl small.nl-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; -webkit-line-clamp: unset; }
#search-list .nl-chips i { font-style: normal; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; line-height: 16px; color: var(--text-2); white-space: nowrap; }
/* The stock preview (nl_stock_preview): look only. The chart takes no pointer, the card is not a row. */
#search-list li.nl-stock { display: block; cursor: default; padding: 8px 10px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.nl-stock .ns-head { display: flex; align-items: baseline; gap: 8px; }
.nl-stock .ns-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.nl-stock .ns-px { font-weight: 600; font-variant-numeric: tabular-nums; }
.nl-stock em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.nl-stock .ns-chart { margin: 6px 0 2px; pointer-events: none; user-select: none; }
.nl-stock .ns-svg { display: block; height: 70px; }
.nl-stock .ns-empty { color: var(--text-3); font-size: 12px; padding: 4px 0; }
.nl-stock .ns-legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--text-3); }
.nl-stock .ns-legend .sw { display: inline-block; width: 10px; height: 2px; margin-right: 4px; vertical-align: middle; }
.nl-stock .ns-sec { margin-top: 10px; pointer-events: none; }
.nl-stock .ns-sec h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.nl-stock .ns-sec h4 small { font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.nl-stock .ns-sec .ns-empty { margin: 4px 0 0; }
.nl-stock .ns-sec svg { display: block; max-width: 100%; }
.nl-stock .ns-sec .legs-today { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.nl-stock .ns-open { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent); }
#search-list li.nl-trace td:first-child { font-weight: 600; white-space: nowrap; color: var(--text-2); }
.top-right { display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--text-2); position: relative; flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
#theme-btn svg { display: none; }
#theme-btn[data-mode="system"] .i-sys, #theme-btn[data-mode="light"] .i-light, #theme-btn[data-mode="dark"] .i-dark { display: block; }
.bell-wrap { position: relative; }
.bell-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--down); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); }
.bell-pop { position: absolute; right: 0; top: 40px; z-index: 45; width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); animation: popin 160ms var(--ease-out); }
.notes { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.note { width: 100%; display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; text-align: left; padding: 10px; border-radius: 8px; }
.note:hover { background: var(--hover); }
.note i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.note.unread i { background: var(--accent); }
.note b { display: block; font-size: 13px; }
.note small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.note em { font-style: normal; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* ---------- status strip ---------- */
.context { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); flex: none; white-space: nowrap; overflow: hidden; }
.sep { width: 1px; height: 16px; background: var(--line); }
.st { display: inline-flex; align-items: center; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--flat); }
.conn[data-s="live"] .dot { background: var(--up); }
.conn[data-s="reconnecting"] .dot, .conn[data-s="connecting"] .dot, .conn[data-s="stale"] .dot { background: var(--amber); }
.conn[data-s="disconnected"] .dot { background: var(--down); }
.idx-strip { display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden; }
.idx { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--text-2); border-radius: 4px; padding: 2px 4px; margin: 0 -4px; white-space: nowrap; }
button.idx:hover { background: var(--hover); color: var(--text); }
.idx b { font-weight: 500; }
.idx-when { font-size: 11px; font-weight: 500; color: var(--text-3); background: var(--chip); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.st-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 1700px) { #st-count, .st-right .sep:last-of-type { display: none; } }
@media (max-width: 1280px) { .idx-strip > .sep, .idx-strip > .sep ~ .idx { display: none; } }

/* ---------- layout: main + panel ---------- */
/* The panel column animates open; its content is pinned to the right edge so
   it slides in rather than being wiped on. */
/* clip: the stock panel waits off-screen to the right; without this it
   widened phone pages to ~800 px (a white strip beside the page). */
.app { flex: 1; min-height: 0; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns 260ms var(--ease-in); position: relative; }
.app.open { grid-template-columns: minmax(0, 1fr) var(--panel-w); transition: grid-template-columns 380ms var(--ease-out); }
.main { overflow: auto; padding: 16px 24px 32px; min-width: 0; outline: 0; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
/* The page-head date (#290): one style on every page, loud enough that a
   Friday list is never read as today's; amber tag when the data is older. */
.ph-date { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-day { font-size: 16px; font-weight: 600; color: var(--text); padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.last-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-tint); white-space: nowrap; }
.uni-note { font-size: 16px; color: var(--text-3); font-weight: 500; }
.view-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--chip); border-radius: 6px; padding: 3px 8px; }
.view-name .edited { font-size: 11px; color: var(--amber); background: var(--amber-tint); border-radius: 4px; padding: 0 6px; }
.actions { margin-left: auto; display: flex; gap: 8px; position: relative; flex-wrap: wrap; }

.btn { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { opacity: .5; }
.btn svg { color: var(--text-2); flex: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.btn.icon-only { width: 32px; padding: 0; }
.linkbtn { color: var(--accent); font-size: 12.5px; font-weight: 500; }
.linkbtn:hover { text-decoration: underline; }

/* Top picks: the first thing on Movers. Cards open the stock. */
.picks-strip { margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-title { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.ps-title svg, .tab-picks svg { color: var(--accent); }
.ps-sub { font-size: 12.5px; color: var(--text-2); }
.ps-rules { margin-left: auto; }
.ps-rule-list { margin: 8px 0 2px; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.ps-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.pick-card { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); transition: border-color 120ms, background 120ms; }
.pick-card:hover { border-color: var(--accent); background: var(--surface); }
.pick-card.best { border: 2px solid var(--accent); padding: 9px 11px; }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; }
.pc-top b { font-size: 14px; }
.pc-top em { font-style: normal; font-weight: 600; font-size: 13px; }
.pc-px { font-size: 18px; font-weight: 600; }
.pc-why { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.pc-score { justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 1px 6px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.pc-foot .pc-score { margin-top: 0; }
.pc-state { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.pc-state.live { color: var(--up); font-weight: 600; }
.pick-pill { display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 8px; color: var(--accent-ink); background: var(--accent); white-space: nowrap; }
.set-tag { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 8px; padding: 1px 8px; }
.pick-pill.holding { color: var(--text-2); background: var(--chip); }
/* Risk flags (#189): amber, a notch quieter than the pick pill, so a flag reads as "look closer", not as a signal. */
.risk-pill { display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 8px; color: var(--amber); background: var(--amber-tint); white-space: nowrap; cursor: help; }
/* Leveraged / inverse fund multiple (#293): grey and outlined, a fact about the fund rather than a signal. */
.lev-tag { display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 15px; padding: 0 5px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; cursor: help; }
.p-risk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.p-risk:empty { display: none; }
.p-risk .risk-pill { margin-left: 0; }
.tab-picks { display: inline-flex; align-items: center; gap: 5px; }
.tab-n { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 8px; padding: 0 6px; }
.tab-n:empty { display: none; }
.seg1 button:disabled { opacity: .45; cursor: not-allowed; }
/* The list tabs: the stock panel's segmented control (#291), on the same
   light-blue tint as "What just happened" beside the table, so both read as
   the controls for the list below them. --seg-bg / --seg-line are shared. */
.tabs { display: flex; width: max-content; max-width: 100%; gap: 2px; margin-top: 14px; padding: 3px; background: var(--chip); border: 0; border-radius: 10px; overflow-x: auto; scrollbar-width: none; }
.tabs button { height: 32px; padding: 0 14px; border-radius: 7px; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; transition: background 120ms ease, color 120ms ease; }
.tabs button:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; background: var(--accent); box-shadow: var(--seg-pill-shadow); }
.tabs button:focus-visible { outline: none; box-shadow: var(--seg-focus); }
.tabs button[aria-selected="true"]:focus-visible { box-shadow: var(--seg-pill-shadow), var(--seg-focus); }

/* Universe and Rank by are two separate controls, each with its own label,
   separated by a divider, so "which stocks" and "what order" never blur. */
/* The two choices that shape the list sit in their own toolbar, with bold
   labels and full-size controls, so they read as primary, not as fine print. */
.controls { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 10px 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ctl-group { display: flex; align-items: center; gap: 12px; }
.ctl-group[hidden] { display: none; }
.ctl-group + .ctl-group { padding-left: 20px; border-left: 1px solid var(--line); }
.ctl-lbl { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ctl-lbl .term { border-bottom-color: var(--text-3); }
.controls .seg1 { padding: 3px; }
.controls .seg1 button { height: 30px; padding: 0 14px; font-size: 13.5px; }
.controls .rank-btn { height: 36px; min-width: 190px; justify-content: space-between; font-size: 13.5px; border-color: var(--text-3); }
.controls .rank-menu { top: 42px; left: 72px; }
.seg1 { display: flex; background: var(--chip); border-radius: 8px; padding: 3px; gap: 2px; }
.seg1 button { flex: 1; height: 26px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.seg1 button:hover { color: var(--text); }
.seg1 button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04); }
.rankby { position: relative; }
.rank-btn { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 600; }
.rank-btn:hover { background: var(--hover); }
.rank-btn svg { color: var(--text-3); }
.rank-menu { position: absolute; top: 38px; left: 76px; z-index: 30; min-width: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); animation: popin 140ms var(--ease-out); }
.rm-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.rm-opt svg { visibility: hidden; color: var(--accent); }
.rm-opt[aria-selected="true"] { font-weight: 600; }
.rm-opt[aria-selected="true"] svg { visibility: visible; }
.rm-opt:hover, .rm-opt:focus { background: var(--hover); outline: 0; }
.rm-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.rm-opt.dis { color: var(--text-3); cursor: default; }
.rm-opt.dis:hover { background: none; }
.rm-opt small { font-size: 11px; background: var(--chip); border-radius: 4px; padding: 0 6px; }
.rm-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; }
.rm-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.chip { height: 26px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.chip button { width: 18px; height: 18px; border-radius: 50%; color: var(--text-3); font-size: 14px; line-height: 1; }
.chip button:hover { background: var(--chip); color: var(--text); }
.joiner { font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
/* Filter bar (#295): on top of the table whenever a filter is on. Tinted with
   a left accent bar so it can't pass for a table header. A fixed height, so
   the counts updating every second never move the table; chips that don't fit
   scroll sideways. It stays put when a wide table scrolls sideways. */
/* What a search was understood as (Movers, after a search ran): the words, the market, the list, the sort, Undo. */
.nl-strip { position: sticky; left: 0; z-index: 2; padding: 8px 14px 8px 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.nl-strip[hidden] { display: none; }
.nl-strip .ns-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nl-strip .ns-q q { color: var(--text); font-weight: 600; }
.nl-strip .ns-uni { display: inline-flex; align-items: center; gap: 6px; }
.nl-strip .ns-uni span { color: var(--text-3); font-size: 12px; }
.nl-strip select { height: 26px; border: 1px solid var(--line); border-radius: 13px; padding: 0 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.nl-strip .ns-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nl-strip .ns-close { width: 22px; height: 22px; border-radius: 50%; color: var(--text-3); font-size: 15px; line-height: 1; }
.nl-strip .ns-close:hover { background: var(--hover); color: var(--text); }
.nl-strip .ns-note { margin: 6px 0 0; color: var(--text-3); font-size: 12px; }
.fbar { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px 0 16px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.fb-lead { flex: none; white-space: nowrap; }
.fb-lead b { color: var(--text); font-weight: 600; }
.fb-s { display: none; }
/* Beside the feed column the table is narrower: the lead drops "stocks on
   Top gainers" (the page title says it) so the chips keep their room. */
.mv-grid > .tbl-wrap { container: mvtable / inline-size; }
@container mvtable (max-width: 1000px) { .fb-where { display: none; } }
/* More chips than fit: they scroll, and the right edge fades to say so. */
.fb-chips.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.fb-chips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fb-chips::-webkit-scrollbar { display: none; }
.fb-chips .chip { flex: none; white-space: nowrap; }
.fb-acts { flex: none; display: flex; gap: 14px; margin-left: auto; }
.fb-acts .linkbtn { white-space: nowrap; }
/* The Filters button says the table is filtered, and by how many: "Filters · 3". */
.btn.fon { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.btn.fon svg { color: var(--accent); }
.fcount { margin-left: -4px; }
@media (max-width: 760px) {
  /* Two fixed rows on phones: the counts and actions, then the chips. */
  .fbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 30px 32px; row-gap: 0; column-gap: 10px; height: 72px; padding: 4px 12px 6px 14px; }
  .fb-l { display: none; } .fb-s { display: inline; }
  .fb-chips { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- the table ---------- */
/* Rows are CSS grids sharing one column template (--cols). When the panel
   opens, low-priority columns go to 0px and fade; grid-template-columns
   animates, so the table squeezes smoothly instead of jumping. */
.tbl-wrap { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.tbl { min-width: 100%; }
.thr, .tr { display: grid; grid-template-columns: var(--cols); align-items: center; transition: grid-template-columns 380ms var(--ease-out); }
/* Every header label starts on the same line, whether or not it has a
   sub-label under it; centring them vertically put one-line labels lower
   than two-line ones. */
.thr { height: 48px; align-items: start; padding-top: 11px; box-sizing: border-box; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.th { padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; line-height: 16px; }
.th small { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); line-height: 14px; }
.th:first-child, .td:first-child { padding-left: 16px; }
.th.num, .td.num { text-align: right; }
.th.center, .td.center { text-align: center; justify-self: center; }
.th, .td { transition: opacity 260ms ease, padding 380ms var(--ease-out); min-width: 0; }
/* The sparkline stretches with its column when there's spare room. */
.spark-fit svg { width: var(--chart-w, 84px); transition: width 380ms var(--ease-out); }
.colrow.auto { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 10px; height: auto; }
/* Label and arrow share the first line; a sub-label (like "30s → 1h") wraps
   onto its own line underneath. In right-aligned columns the arrow goes on
   the left so the label's right edge lines up with the numbers below. */
.th-sort { font: inherit; color: inherit; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; text-align: inherit; border-radius: 4px; }
.th-l { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.th.num .th-sort { align-items: flex-end; }
.th.num .th-sort .arr { order: -1; }
.th-sort .arr { font-style: normal; font-size: 11px; color: var(--text-3); opacity: 0; transition: opacity 120ms; }
.th-sort:hover { color: var(--accent); } .th-sort:hover .arr, .th-sort:focus-visible .arr { opacity: 1; }
.th-sort.on { color: var(--accent); } .th-sort.on .arr { opacity: 1; color: var(--accent); }
.th-sort .term { cursor: inherit; }
.term { border-bottom: 1px dotted var(--text-3); cursor: help; }
.term:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tr { min-height: 56px; cursor: pointer; position: relative; }
.tr + .tr { border-top: 1px solid var(--line-2); }
.tr:hover { background: var(--hover); }
.tr[aria-selected="true"] { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
.td { padding: 6px 8px; overflow: hidden; }
.td small { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px { font-weight: 500; font-size: 14px; }
.rank-n { font-size: 12.5px; color: var(--text-3); }
.rchg { display: block; font-size: 10px; }
.stock { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stock-t { display: grid; min-width: 0; }
.stock-t b { font-size: 14px; font-weight: 600; }
.stock-t small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; display: grid; place-items: center; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo.mono { background: var(--chip); color: var(--text-2); font-size: 12px; font-weight: 600; }
.logo.lg { width: 36px; height: 36px; font-size: 15px; }
.why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; }
.why.muted { color: var(--text-2); }
.clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hov { display: inline-flex; padding: 4px; margin: -4px; border-radius: 6px; }
.hov:hover, .hov:focus-visible { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.hov.mom { flex-direction: column; align-items: center; gap: 0; }
.hov.mom svg { margin: -3px 0 -2px; }
.blurb { font-size: 11px; color: var(--text-2); line-height: 1; white-space: nowrap; }
.star { font-size: 17px; line-height: 1; color: var(--text-3); width: 28px; height: 28px; border-radius: 6px; }
.star.on, .tr:hover .star.on { color: var(--accent); }
.star:hover { background: var(--chip); }
.state { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 48px 16px; font-size: 13px; color: var(--text-2); }
.state b { color: var(--text); font-size: 14px; }
.state.small { padding: 20px 12px; }
.state.soon { padding: 32px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.state.soon small { color: var(--text-3); font-size: 11.5px; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { #tbody.flash { animation: flash 240ms ease; } }
@keyframes flash { from { opacity: .35; } }
.foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.size { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text-3); }
.size select { height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 0 4px; }
.pager { display: flex; gap: 2px; align-items: center; }
.pager button { min-width: 28px; height: 28px; border-radius: 6px; font-size: 13px; color: var(--text-2); }
.pager button:hover:not(:disabled) { background: var(--hover); }
.pager button[aria-current] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.pager button:disabled { opacity: .35; }
.pager .gap { padding: 0 4px; color: var(--text-3); }

/* industry table: fixed template */

/* watchlist table: fixed template */
.tbl.wl .thr, .tbl.wl .tr { grid-template-columns: 220px 92px 84px 104px 64px 64px 140px 150px minmax(180px, 1fr) 44px; }
.tbl.wl { min-width: 1140px; }
.wl-alert { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; margin: 2px 4px 2px 0; border-radius: 13px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.wl-alert.set { border-color: var(--accent); color: var(--accent); }
.wl-alert.hit { background: var(--amber-tint); border-color: transparent; color: var(--amber); font-weight: 600; }
.wl-alert.add { border-style: dashed; color: var(--text-3); }
.wl-x { width: 28px; height: 28px; border-radius: 6px; color: var(--text-3); font-size: 16px; }
.wl-x:hover { background: var(--chip); color: var(--down); }
.wl-sort { flex: none; }
.wstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 4px; }
.wstat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; gap: 2px; }
.wstat span { font-size: 12px; color: var(--text-3); }
.wstat b { font-size: 15px; font-weight: 600; }
.wstat em { font-style: normal; }
.wstat em.hit { color: var(--amber); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.falerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fa { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.fa.off { opacity: .6; }
.fa-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fa-main b { font-size: 13.5px; }
.fa-main span { font-size: 12.5px; color: var(--text-2); }
.fa-main small { font-size: 11.5px; color: var(--text-3); }
.switch { position: relative; width: 34px; height: 20px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 10px; background: var(--line); transition: background 160ms; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 160ms var(--ease-out); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(14px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- cards / overview ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
/* ---------- Overview (#287): head strip, lead, folded AI summary, two cards ---------- */
.ov-head { row-gap: 8px; }
/* The day shown (tmpyapp#310): ‹ date ›, and "Back to today". */
.ov-head .ov-today { margin-left: auto; }
.ov-day { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.ov-arr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font-size: 17px; color: var(--text-2); }
.ov-arr:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.ov-arr:disabled { opacity: .3; }
#ov-dsel { height: 28px; border: 0; font-family: inherit; background: transparent; font-size: 15px; font-weight: 600; color: var(--text); padding: 0 4px; cursor: pointer; }
.ov-pill[data-s="afterhours"] { color: var(--accent); background: var(--accent-tint); }
.ov-pill[data-s="last"] { color: var(--amber); background: var(--amber-tint); }
.ov-pill[data-s="saved"] { color: var(--text-2); background: var(--chip); }
.ov-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--chip); white-space: nowrap; }
.ov-pill[data-s="open"] { color: var(--up); background: var(--up-fill); }
.ov-pill[data-s="open"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ov-pill[data-s="premarket"] { color: var(--amber); background: var(--amber-tint); }
.ov-when b { color: var(--text); font-weight: 600; }
.rk.rk-c { grid-template-columns: minmax(0, 210px) minmax(80px, 1fr) 58px; grid-template-areas: "n bar pct"; color: var(--text); text-decoration: none; }
.stag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--chip); color: var(--text-2); font-size: 10.5px; font-weight: 500; line-height: 16px; vertical-align: 1px; white-space: nowrap; }
.mlist li.hl .mrow { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Overview, story-first (tmpyapp#450) ----------
   Session tabs, then two cards: the briefing (the story) and Market mood
   (the numbers), Biggest stories full width, Your stocks as a short ending.
   One editorial width, three bands 24px apart, 16px between cards; borders
   only on the four main cards. Colour: blue for selection and actions, green
   and red for market data, amber only for split days and data warnings. */
#page-overview { max-width: 1280px; }
#ov-panel { transition: opacity 160ms ease; }

.ov-split { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 16px; margin-top: 24px; align-items: stretch; }
.ov-split > .card, .ov-stories { padding: 22px 24px; min-width: 0; }
.ov-split > .ov-solo { display: none; }
.ov-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov-side > .card { padding: 22px 24px; min-width: 0; }
/* The briefing stands out by its surface and type, never an alert-style edge. */
.ov-brief { display: flex; flex-direction: column; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ov-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); }
.ov-head-t { margin: 0; font-size: clamp(23px, 2.1vw, 28px); line-height: 1.22; font-weight: 500; letter-spacing: -.3px; text-wrap: balance; max-width: 40ch; }
.ov-why p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 62ch; }
.ov-why .banner { margin: 12px 0 0; }
.ov-ai-body { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Catch me up (tmpyapp#471): the story in a minute, in place under the why.
   A source reads as a quiet inline link after the claim it backs. */
.ov-catch { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 66ch; }
.ov-catch p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.ov-catch .ov-catch-mine { color: var(--text-2); }
.ov-src { font-size: 12.5px; color: var(--text-3); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.ov-src:hover { color: var(--text-2); text-decoration-color: currentColor; }
.ov-catch-foot { margin-top: 10px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.ov-catch-foot .ov-ai { display: inline; }
.ov-catch-foot .ov-ai svg { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.ov-sum { padding: 0; }
.ov-sum .sum-head { font-size: 17px; margin: 10px 0 8px; }
.ov-drivers { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ov-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-dh h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ov-dh small { font-size: 13px; color: var(--text-3); }
.ov-drivers > p { margin: 8px 0 0; }
.ov-srows { list-style: none; margin: 6px 0 0; padding: 0; }
.ov-sr { display: grid; grid-template-columns: 124px minmax(0, 1fr) 70px; align-items: center; gap: 16px; min-height: 36px; padding: 0 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.ov-sr:hover { background: var(--accent-tint); }
.ov-sr:hover .nm { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ov-sr .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-bar { position: relative; height: 10px; }
.ov-bar::after { content: ""; position: absolute; left: 50%; top: -8px; bottom: -8px; width: 1px; background: var(--line); }
.ov-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ov-bar i.up { background: var(--up); } .ov-bar i.down { background: var(--down); } .ov-bar i.flat { background: var(--flat); }
.ov-sr .pc { display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tri { width: 9px; height: 9px; flex: none; fill: currentColor; }
.ov-more { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.ov-more:hover { text-decoration: underline; }
.ov-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ov-acts .btn { height: 40px; padding: 0 16px; font-size: 14.5px; }
.ov-meta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12.5px; color: var(--text-3); }
.ov-meta b { color: var(--text-2); font-weight: 600; }
.ov-ai { display: inline-flex; align-items: center; gap: 6px; }
.ov-ai svg { width: 12px; height: 12px; fill: currentColor; }
.ov-meta .short, #page-overview .short { display: none; }

/* Big vs small companies: one sentence, two rows, an "Ahead" tag. No chart. */
.ov-caps-v { margin: 6px 0 14px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; }
.ov-cap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ov-cap + .ov-cap { margin-top: 8px; }
.ov-cap.lead { border-color: var(--up); background: var(--up-fill); }
.ov-cap .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ov-cap.lead .dot { background: var(--up); }
.ov-cap .nm { flex: 1; min-width: 0; }
.ov-cap .nm b { display: block; font-size: 15px; font-weight: 600; }
.ov-cap .nm span { font-size: 13px; color: var(--text-3); }
.ov-cap .tag { font-size: 12px; font-weight: 700; color: var(--up); background: var(--surface); border: 1px solid var(--up); border-radius: 999px; padding: 2px 10px; }
.ov-cap .pc { min-width: 84px; text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-cap .pc.up { color: var(--up); } .ov-cap .pc.down { color: var(--down); } .ov-cap .pc.flat { color: var(--flat); }
@container (max-width: 400px) {
  .ov-cap { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .ov-cap .nm { flex: 1 1 100px; }
  .ov-cap .pc { min-width: 0; margin-left: auto; font-size: 18px; }
}
.ov-caps-n { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }

/* Market mood: verdict, scale, dollars first, one participation line. */
.ov-mood { container-type: inline-size; }
.ov-mood-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov-mood-hd small { font-size: 13px; color: var(--text-3); }
.ov-ah { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.ov-ah b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-ah span { font-size: 12.5px; color: var(--text-3); }
.ov-k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); }
.ov-verdict { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; font-weight: 500; letter-spacing: -.5px; }
.ov-verdict .tri { width: 17px; height: 17px; }
.t-up { color: var(--up); } .t-down { color: var(--down); } .t-flat { color: var(--flat); } .t-split { color: var(--amber); }
.ov-scale { position: relative; height: 12px; margin-top: 22px; border-radius: 6px;
  background: linear-gradient(to right, var(--down), color-mix(in srgb, var(--down) 22%, var(--chip)) 35%, var(--chip) 50%, color-mix(in srgb, var(--up) 22%, var(--chip)) 65%, var(--up)); }
.ov-scale b { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: currentColor; }
.ov-scale-l { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.ov-scale-l .on { color: var(--text); font-weight: 600; }
.ov-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.ov-tile { background: var(--surface-2); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.ov-tile .nm { font-size: 13.5px; color: var(--text-2); }
.ov-tile .usd { margin-top: 4px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-tile .usd.up { color: var(--up); } .ov-tile .usd.down { color: var(--down); } .ov-tile .usd.flat { color: var(--text-3); }
.ov-tile .pct { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
/* Side by side at every width (the two indexes are read as a pair); below
   400px of card the type scales so "+$116.6B" still fits a 320px phone. */
@container (max-width: 400px) { .ov-tiles { gap: 8px; } .ov-tile { padding: 14px 12px; } .ov-tile .usd { font-size: clamp(16px, 8cqi, 26px); } .ov-tile .pct { font-size: 12px; } }
@container (max-width: 280px) { .ov-tile { padding: 12px 10px; } .ov-tile .usd { font-size: 6.6cqi; } .ov-tile .pct { font-size: 11px; } }
.ov-part { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.ov-part .lbl { color: var(--text-2); }
.ov-part .cnt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-part .cnt > span { display: inline-flex; align-items: center; gap: 5px; }
.ov-partial { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.ov-how { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.ov-how summary, .ov-check summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-radius: 4px; }
.ov-how summary { color: var(--text-2); }
.ov-how summary::-webkit-details-marker, .ov-check summary::-webkit-details-marker { display: none; }
.ov-how summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.ov-how[open] summary::before { transform: rotate(45deg); }
.ov-rule { margin: 10px 0 0; color: var(--text); }
.ov-how-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin-top: 10px; align-items: start; }
.ov-how-g table { width: 100%; border-collapse: collapse; }
.ov-how-g td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.ov-how-g td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-how-g p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }

/* Biggest stories: full width, side by side where there is room. */
.ov-stories { margin-top: 24px; }
/* Replay the day: the four markets' lines from 4 AM, all 11 sectors beside
   them, Replay and a time slider; then one line per part of the day. */
.ov-replay { margin-top: 24px; padding: 22px 24px; min-width: 0;
  --rp-sp: var(--text); --rp-nq: var(--accent); --rp-ru: #C2570C; --rp-gd: #0B7A75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ov-replay { --rp-ru: #F0914F; --rp-gd: #3CC2B8; } }
:root[data-theme="dark"] .ov-replay { --rp-ru: #F0914F; --rp-gd: #3CC2B8; }
.ov-rp-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.ov-rp-hd h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ov-rp-hd small { font-size: 13px; color: var(--text-3); }
.ov-rp-body { margin-top: 14px; }
.rp-now { display: flex; align-items: baseline; gap: 14px; }
.rp-clock { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.rp-phase { font-size: 13.5px; color: var(--text-3); }
.rp-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; margin-top: 10px; align-items: start; }
.rp-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-chart { display: block; width: 100%; height: auto; overflow: visible; }
.rp-band { fill: var(--session-band); }
.rp-sess { stroke: var(--line); stroke-width: 1; }
.rp-zero { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
.rp-blab, .rp-ylab { font-size: 19px; fill: var(--text-3); font-family: var(--font); }
.rp-close { font-weight: 600; fill: var(--text-2); }
.rp-cur { stroke: var(--text); stroke-width: 2; opacity: .3; }
.rp-ln { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.rp-dot { stroke: var(--surface); stroke-width: 2.5; }
.rp-ln.rp-sp { stroke: var(--rp-sp); } .rp-dot.rp-sp { fill: var(--rp-sp); }
.rp-ln.rp-nq { stroke: var(--rp-nq); stroke-dasharray: 8 6; } .rp-dot.rp-nq { fill: var(--rp-nq); }
.rp-ln.rp-ru { stroke: var(--rp-ru); stroke-dasharray: 2 6; } .rp-dot.rp-ru { fill: var(--rp-ru); }
.rp-ln.rp-gd { stroke: var(--rp-gd); stroke-dasharray: 14 5 3 5; } .rp-dot.rp-gd { fill: var(--rp-gd); }
.rp-axis { position: relative; height: 18px; font-size: 12px; color: var(--text-3); }
.rp-axis span { position: absolute; top: 0; white-space: nowrap; }
.rp-axis span:nth-child(2), .rp-axis span:nth-child(3) { transform: translateX(-50%); }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.rp-tile { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.rp-tn { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.rp-sw { flex: none; width: 20px; height: 0; border-top: 3px solid; }
.rp-sw.rp-sp { border-color: var(--rp-sp); } .rp-sw.rp-nq { border-color: var(--rp-nq); border-top-style: dashed; }
.rp-sw.rp-ru { border-color: var(--rp-ru); border-top-style: dotted; } .rp-sw.rp-gd { border-color: var(--rp-gd); border-top-style: dashed; }
.rp-tv { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.rp-ts { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-secs h3 { margin: 0 0 6px; }
.rp-gh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rp-gh .rp-grp { margin-left: 0; padding: 3px; border-radius: 8px; }
.rp-gh .rp-grp button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.rp-gsub { margin: 6px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rp-gap { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 12.5px; color: var(--text-3); }
.rp-gap::before, .rp-gap::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.rp-gnote { margin: 10px 0 0; line-height: 1.5; }
.rp-secs ul { list-style: none; margin: 0; padding: 0; }
.rp-secs a { display: grid; grid-template-columns: minmax(110px, 1.5fr) minmax(0, 1fr) 58px; align-items: center; gap: 12px; min-height: 30px; padding: 0 6px; margin: 0 -6px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; }
.rp-secs a:hover { background: var(--hover); }
.rp-secs .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-secs .pc { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-secs .ov-bar i { transition: width 90ms linear; }
.rp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.rp-play { min-width: 104px; }
.rp-scrub { flex: 1 1 240px; display: flex; }
.rp-scrub input { flex: 1; min-height: 44px; accent-color: var(--accent); }
.ov-dparts { list-style: none; margin: 18px 0 0; padding: 0; }
.ov-dp { display: grid; grid-template-columns: 18px minmax(150px, 200px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-2); }
.ov-dp i { width: 9px; height: 9px; border-radius: 50%; background: var(--flat); align-self: center; }
.ov-dp[data-st="now"] i { background: var(--up); box-shadow: 0 0 0 3px var(--up-fill); }
.ov-dp[data-st="future"] i, .ov-dp[data-st="missing"] i { background: none; border: 1.5px solid var(--flat); box-sizing: border-box; }
.ov-dp[data-st="future"], .ov-dp[data-st="missing"] { color: var(--text-3); }
.ov-dp-n { display: flex; flex-direction: column; }
.ov-dp-n b { font-size: 14.5px; font-weight: 600; }
.ov-dp-n span { font-size: 12.5px; color: var(--text-3); }
.ov-dp p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.ov-dp p b { font-variant-numeric: tabular-nums; }
@container (max-width: 900px) { .rp-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ov-replay { margin-top: 12px; padding: 18px; } .ov-dp { grid-template-columns: 18px minmax(0, 1fr); } .ov-dp p { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .rp-secs .ov-bar i { transition: none; } }
.ov-st-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov-st-hd h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ov-st-hd small { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.ov-st-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-3); }
.ov-st-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0 32px; }
/* Today's turning points (tmpyapp#467): side by side on desktop, reading
   left to right in time; stacked on a phone. */
.ov-story { display: flex; flex-direction: column; min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.ov-story .ph { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); }
.ov-story .tk { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; min-width: 0; }
.ov-story .tk b { font-weight: 700; font-size: 15px; }
.ov-story .tk .nm { font-size: 12.5px; color: var(--text-3); min-width: 0; overflow-wrap: anywhere; }
.ov-story .hl { font-weight: 500; color: var(--text); }
.ov-partial { grid-column: 1 / -1; padding: 10px 0 0; color: var(--amber); }
.ov-story p { margin: 4px 0 0; line-height: 1.5; }
.ov-tchip { align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: 10px; background: var(--chip); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-tchip.up { color: var(--up); } .ov-tchip.down { color: var(--down); } .ov-tchip.flat { color: var(--text-2); }
.ov-story .sa { display: flex; align-items: center; gap: 4px 6px; margin-top: auto; padding-top: 6px; font-size: 13.5px; }
.ov-story .sa .star { flex: none; width: 28px; height: 28px; font-size: 16px; margin-left: -6px; }
.ov-whyb { min-width: 0; font-size: 13.5px; font-weight: 600; text-align: left; min-height: 28px; overflow-wrap: anywhere; }
.ov-whyb[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }
.ov-check { margin-top: 4px; font-size: 12.5px; }
.ov-check summary { color: var(--amber); font-weight: 500; gap: 6px; align-items: flex-start; }
.ov-check svg, .dw-tag svg { flex: none; width: 13px; height: 13px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-check p { margin: 4px 0 0 22px; color: var(--text-2); }
/* "Why is this stock moving?": inline under the rows, never a modal. */
.ov-drawer { margin-top: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.dw-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dw-hd h3 { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dw-hd h3 .nm { font-weight: 500; color: var(--text-2); }
.dw-hd h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dw-ph { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.dw-x { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; border-radius: 6px; font-size: 20px; line-height: 1; color: var(--text-2); }
.dw-x:hover { background: var(--hover); }
.dw-state { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.dw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dw-tag.warn { color: var(--amber); background: var(--amber-tint); border-color: transparent; }
.dw-tag.warn svg { margin-top: 0; }
.dw-note { margin: 8px 0 0; font-size: 13px; color: var(--text-2); max-width: 70ch; }
.dw-ex, .dw-so { margin-top: 12px; }
.dw-lbl { margin: 0; font-size: 12.5px; color: var(--text-3); }
.dw-text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 75ch; }
.dw-src { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.dw-src a { color: var(--accent); font-weight: 500; }
.dw-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.dw-num dt { font-size: 12.5px; color: var(--text-3); }
.dw-num dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-num .up { color: var(--up); } .dw-num .down { color: var(--down); }
.dw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Since you last checked (tmpyapp#470): like Your stocks, no card. Each
   change is one row: what changed in bold, the figures under it. */
.ov-since { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ov-since-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-since-hd h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ov-since-hd small { font-size: 13px; color: var(--text-3); }
.ov-since > p { margin: 4px 0 0; color: var(--text-2); }
.ov-since-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.ov-since-it { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ov-since-it:hover b, .ov-since-it:focus-visible b { text-decoration: underline; }
.ov-since-it b { font-weight: 600; color: var(--text); }
.ov-since-it span { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Your stocks: a short ending on the page background, no card. */
.ov-mine { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ov-mine h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ov-mine p { margin: 4px 0 0; color: var(--text-2); }
.ov-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ov-wchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; }
.ov-wchip:hover { background: var(--hover); }

/* Stack by the page's own width, so a wide detail pane squeezing Overview stacks it too (#94, #95). */
#ov-panel { container-type: inline-size; }
@container (max-width: 760px) {
  .ov-split { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the Market mood verdict must be on the first screen, so the sector
   chart leaves the briefing for its own card below Market mood; the last-
   session tag and "See biggest movers" (the bottom bar has it) step aside. */
@media (max-width: 760px) {
  .ov-head .ov-today { margin-left: 0; }
  #ov-sess { display: none; }
  .ov-split { gap: 12px; margin-top: 16px; }
  .ov-split > .card, .ov-stories, .ov-side > .card { padding: 18px; }
  .ov-split > .ov-solo { display: block; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); }
  .ov-brief .ov-drivers { display: none; }
  .ov-why p { font-size: 15.5px; line-height: 1.6; }
  .ov-acts .btn { flex: 1 1 100%; }
  .ov-acts .ov-sec-act { display: none; }
  .ov-meta { padding-top: 12px; }
  .ov-meta .long, #page-overview .long { display: none; }
  .ov-meta .short, #page-overview .short { display: inline; }
  .ov-sr { grid-template-columns: minmax(84px, 1fr) minmax(64px, 1.2fr) 64px; gap: 10px; }
  .ov-stories { margin-top: 12px; }
  .ov-drawer { padding: 14px; }
  .dw-num { grid-template-columns: minmax(0, 1fr); }
  .dw-num > div { display: flex; justify-content: space-between; gap: 12px; }
  .dw-acts .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { #ov-panel, .ov-how summary::before { transition: none; } }
.banner { background: var(--amber-tint); color: var(--amber); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.sum { padding: 20px 22px; }
.sum-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.sess { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 9px; }
.sess.pre { background: var(--amber-tint); color: var(--amber); }
.sess.post { background: var(--accent-tint); color: var(--accent); }
.latest { font-size: 11px; font-weight: 600; color: var(--up); }
.sum-meta .ai { margin-left: auto; }
.ai { font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 1px 6px; }
.sum-head { margin: 12px 0 10px; font-size: 21px; line-height: 1.35; font-weight: 600; letter-spacing: -.2px; text-wrap: balance; }
.sum-lines { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.65; max-width: 75ch; }
.sum-lines li::marker { color: var(--text-3); }
.sum-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); }
.tchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; vertical-align: 1px; }
.tchip:hover { border-color: var(--accent); }
.tchip em { font-style: normal; font-size: 12px; }
.ov-h { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 20px 0 8px; }
.earlier { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.earlier summary { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 12.5px; list-style: none; }
.earlier summary::-webkit-details-marker { display: none; }
.earlier summary b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earlier[open] summary { border-bottom: 1px solid var(--line-2); }
.earlier > div { padding: 14px 16px; }
.breadth .bb { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.breadth .bb i.u { background: var(--up); } .breadth .bb i.d { background: var(--down); }
.breadth .bl { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.breadth .bl .muted { font-weight: 400; font-size: 11.5px; }
.uni-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sectors { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sectors li { display: grid; grid-template-columns: 1fr 100px 56px; align-items: center; gap: 10px; font-size: 12.5px; }
.sectors li span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sectors em { font-style: normal; font-weight: 600; text-align: right; }
.sbar { position: relative; height: 8px; }
.sbar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.sbar i { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.sbar i.pos { left: 50%; } .sbar i.neg { right: 50%; }
.ov-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li + li { border-top: 1px solid var(--line-2); }
.mrow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; text-align: left; }
.mrow:hover { background: var(--hover); }
.mt { display: grid; min-width: 0; flex: 1; }
.mt b { font-size: 13.5px; }
.mt small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mr em { font-style: normal; font-weight: 600; min-width: 60px; text-align: right; }

/* ---------- footer ---------- */
/* Sits at the end of the scrolling content, so it never covers the table. */
.site-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.sf-top { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 1.4fr) minmax(220px, 1.4fr); gap: 32px; }
.sf-brand p { margin: 8px 0 0; max-width: 28ch; line-height: 1.5; }
.logo-mark.sm { font-size: 16px; gap: 6px; }
.logo-mark.sm i { height: 14px; }
.logo-mark.sm b { width: 4px; }
.sf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-links div, .sf-data { display: grid; align-content: start; gap: 8px; }
.sf-links b, .sf-data b { color: var(--text); font-size: 12.5px; font-weight: 600; }
.sf-links a, .sf-link { color: var(--text-2); text-decoration: none; text-align: left; font-size: 13px; }
.sf-links a:hover, .sf-link:hover { color: var(--accent); text-decoration: underline; }
.sf-data p { margin: 0; line-height: 1.5; }
.sf-alpha { margin: 24px 0 0; padding: 8px 12px; text-align: center; border-radius: 8px; background: var(--amber-tint); color: var(--amber); font-size: 12.5px; }
.sf-alpha b { font-weight: 600; }
#sf-build { margin-left: 10px; font-variant-numeric: tabular-nums; }
.sf-bottom { display: flex; justify-content: center; text-align: center; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding: 16px 0 8px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); }
.sf-bottom p { margin: 0; max-width: 80ch; line-height: 1.5; }

/* ---------- panel ---------- */
.panel { position: relative; overflow: hidden; min-width: 0; background: var(--surface); border-left: 1px solid var(--line); }
.app:not(.open) .panel { border-left-color: transparent; }
/* Resize grip on the panel's left edge (#195). A thin line that thickens on
   hover and while dragging; the whole 10px strip is the hit area. */
.panel-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 6; cursor: col-resize; touch-action: none; }
.panel-grip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background 120ms ease; }
.panel-grip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line); opacity: 0; transition: opacity 120ms ease; }
.panel-grip:hover::before, .panel-grip:focus-visible::before, .resizing .panel-grip::before { background: var(--accent); }
.panel-grip:hover::after, .panel-grip:focus-visible::after, .resizing .panel-grip::after, .panel-grip.wide::after { opacity: 1; }
.panel-grip:focus-visible { outline: none; }
.app:not(.open) .panel-grip { display: none; }
/* No slide animation while dragging: the grid must follow the pointer. */
.app.resizing, .app.resizing .panel { transition: none !important; }
.app.resizing { cursor: col-resize; user-select: none; }
.panel-inner { position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
/* The chart and details scroll; identity and price stick above the tabs. */
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transition: opacity 140ms ease; }
.panel-body.swap { opacity: 0; }
html:not(.solo) .p-header { position: sticky; top: 0; z-index: 5; flex: none; padding: 14px 24px 10px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
html:not(.solo) .p-header .p-id { flex-wrap: wrap; }
html:not(.solo) .p-header .p-name { min-width: 100px; }
html:not(.solo) .p-header .p-name small { white-space: normal; overflow-wrap: anywhere; }
html:not(.solo) .p-header .p-price { flex-wrap: wrap; row-gap: 6px; }
html:not(.solo) .ptabs { top: var(--p-header-h, 0px); }
@media (max-width: 760px) {
  html:not(.solo) .p-header { padding-left: 16px; padding-right: 16px; }
  html:not(.solo) .p-header .p-name { flex-basis: calc(100% - 48px); }
}
.panel-stale { margin: 0; padding: 8px 24px; font-size: 11.5px; color: var(--amber); background: var(--amber-tint); }
.panel-stale.info { color: var(--text-2); background: var(--chip); }
.p-top { flex: none; padding: 14px 24px 0; }
.p-id { display: flex; align-items: center; gap: 10px; }
.p-name { display: grid; flex: 1; min-width: 0; }
.p-name b { font-size: 17px; font-weight: 600; }
.p-name small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
.p-price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; white-space: nowrap; }
.p-price .big { font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.p-price .chg { font-size: 13.5px; font-weight: 500; }
.p-actions { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.p-chart { margin-top: 10px; }
.chart-box { height: 146px; position: relative; touch-action: pan-y; cursor: crosshair; }
.hv-tip { position: absolute; top: -6px; pointer-events: none; display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-pop); }
.hv-tip b { font-weight: 600; }
.hv-tip em { font-style: normal; font-weight: 600; }
.hv-tip em.up { color: #6EE7A8; } .hv-tip em.down { color: #FF9A9E; }
.hv-tip span { opacity: .75; font-size: 11px; }
.chart-empty { height: 104px; display: grid; place-items: center; font-size: 12.5px; color: var(--text-3); border: 1px dashed var(--line); border-radius: 8px; text-align: center; padding: 0 20px; }
.chart-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.legend { display: flex; gap: 12px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.sw { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.ranges { margin-left: auto; display: flex; background: var(--chip); border-radius: 6px; padding: 2px; }
.ranges button { height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--text-2); }
.ranges button:disabled { color: var(--text-3); opacity: .6; }
.ranges button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
/* Panel tabs (#291): a segmented control, so they read as tabs at first
   sight (they used to be a row of plain words). A rounded track; the selected
   tab is a raised pill that slides between them. The row sticks to the top of
   the panel while it scrolls; its own background hides what scrolls under it.
   Unselected labels are --text-2 on the track: 5.8:1 light, 7.6:1 dark (and
   5.3:1 / 7.1:1 on the hover fill). */
:root { --ptab-pill: var(--surface); --ptab-ring: var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ptab-pill: var(--line); --ptab-ring: rgba(255, 255, 255, .06); } }
:root[data-theme="dark"] { --ptab-pill: var(--line); --ptab-ring: rgba(255, 255, 255, .06); }
.ptabs { position: sticky; top: 0; z-index: 4; flex: none; padding: 10px 24px 8px; background: var(--surface); }
.ptrack { position: relative; display: flex; gap: 2px; padding: 3px; background: var(--chip); border: 0; border-radius: 10px; overflow-x: auto; scrollbar-width: none; }
.ptrack::-webkit-scrollbar { display: none; }
.ptrack.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ptrack.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.ptrack.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ptrack [role=tab] { position: relative; z-index: 1; flex: 1 0 auto; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background 120ms ease, color 120ms ease; }
.ptrack [role=tab]:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.ptrack [role=tab][aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
/* Inside the pill, so the track's rounded clip never cuts the ring off. */
.ptrack [role=tab]:focus-visible { outline: none; box-shadow: var(--seg-focus); border-radius: 7px; }
.ptrack .ind { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 7px; background: var(--accent); box-shadow: var(--seg-pill-shadow); transition: transform 260ms var(--ease-out), width 260ms var(--ease-out); }
.soon-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); opacity: .6; }
.tp { flex: none; transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.tp.out { opacity: 0; transform: translateX(var(--dx, 0)); transition: opacity 110ms ease, transform 110ms ease; }
.tp.in { opacity: 0; transform: translateX(var(--dx, 0)); transition: none; }
.sec { padding: 12px 24px; border-top: 1px solid var(--line-2); }
.sec:first-child { border-top: 0; padding-top: 14px; }
.sec h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.sec h3 small { font-size: 12px; font-weight: 400; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sec .body { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.legs3 { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; margin-top: 4px; }
.legs3 .c { text-align: center; } .legs3 .r { text-align: right; }
.legs3 span { display: block; font-size: 11px; color: var(--text-3); }
.legs3 b { font-size: 12.5px; font-weight: 600; }
.legs3 em { font-style: normal; font-weight: 600; }
.legs-today { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.score-row { display: flex; gap: 14px; align-items: flex-start; }
.score-row p { margin: 0; }
.score-row .score-l { font-weight: 600; margin: 2px 0 8px; }
.score-row .chiprow { margin-bottom: 2px; }
.score-row [data-tip] { position: relative; cursor: help; }
.score-row [data-tip]::after { right: auto; left: 0; width: 240px; }
/* TMPY Score: Beta label, change since the last session, score over time (tmpywebui#150). */
/* Beta is amber like the risk pills: a caution, not a direction. */
.beta { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 8px; color: var(--amber); background: var(--amber-tint); white-space: nowrap; cursor: help; vertical-align: 1px; }
.beta-l { font-weight: 600; color: var(--amber); }
.sl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 8px; }
.score-row .sl-row .score-l { margin: 0; }
/* Change since the session before: green/red like the chip tones. A dot marks a big move. */
.dchg { font-size: 12px; font-weight: 600; white-space: nowrap; }
.dchg.up { color: var(--up); } .dchg.down { color: var(--down); }
.dchg.same { color: var(--text-3); font-weight: 500; }
.dchg em { font-style: normal; font-weight: 400; color: var(--text-3); }
.dchg.big::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: 1px; }
.sh { margin-top: 12px; }
.sh-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sh-h .r { margin-left: auto; font-weight: 400; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.sh-read { font-size: 12px; color: var(--text-2); min-height: 17px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-read b { color: var(--text); font-weight: 600; }
.sh-chart { position: relative; width: 100%; touch-action: pan-y; }
.sh-chart svg { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.sh .b3 { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.sh .b2 { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.sh .b1 { fill: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.sh .b0 { fill: transparent; }
.jdot { cursor: pointer; outline: none; }
.jdot .ring { fill: var(--surface); stroke-width: 2; }
.jdot.u .ring { stroke: var(--up); } .jdot.d .ring { stroke: var(--down); }
.jdot.on .ring, .jdot:focus-visible .ring { stroke-width: 3; }
.jdot .halo { fill: transparent; }
.jdot.on .halo, .jdot:focus-visible .halo { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.jnote { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); }
.jnote .jn-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.jnote .jn-h b { color: var(--text); font-weight: 600; }
.jnote p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.sh .legend { flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; margin-top: 6px; white-space: normal; }
.sh .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sh .legend .lg3 { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sh .legend .lg2 { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sh .legend .lg1 { background: color-mix(in srgb, var(--accent) 3.5%, transparent); outline: 1px solid var(--line); }
.sh .legend .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-3); background: var(--surface); }
.empty-chart { border: 1px dashed var(--line); border-radius: 10px; padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); }
.empty-chart b { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }
.sh .skel { height: 96px; width: auto; border-radius: 10px; margin: 0; }
.score-ring { display: flex; flex: none; }
.tag.sc-up { background: var(--up-fill); color: var(--up); }
.tag.sc-down { background: var(--down-fill); color: var(--down); }
.tag.sc-flat { background: var(--accent-tint); color: var(--text-2); }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { height: 24px; padding: 0 10px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.fine { font-size: 11.5px; color: var(--text-3); margin: 8px 0 0; }
.stgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
/* The top bar also has a .st (inline-flex); without this the panel's stat
   tiles inherited it and ran label and value together ("Market cap$5.45T"). */
.stgrid .st { display: block; min-width: 0; }
.st > span { display: block; font-size: 11px; color: var(--text-3); }
.st b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.st em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-2); }
.kv { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; padding: 3px 0; }
.kv > span { color: var(--text-2); }
.kv > span { flex: none; }
/* Values sit on the right edge, and a value long enough to wrap (a long
   industry name) stays right-aligned instead of flipping to the left. */
.kv b { font-weight: 500; text-align: right; min-width: 0; }
/* technicals and news tabs */
.tfseg { width: 100%; }
.tf-note { margin: 8px 0 0; }
.warn { color: var(--amber); }
.kv small { font-size: 11px; margin-left: 4px; }
.kv b em { font-style: normal; font-weight: 500; font-size: 11.5px; margin-left: 6px; }
.tech-say { margin: 4px 0 8px; color: var(--text-2); line-height: 1.45; }
.meter { position: relative; height: 6px; margin: 6px 0 3px; border-radius: 3px; background: var(--chip); }
.meter .zone { position: absolute; top: 0; bottom: 0; background: var(--accent-track); }
.meter i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.meter-lab { position: relative; height: 14px; font-size: 10.5px; color: var(--text-3); }
.meter-lab span { position: absolute; top: 0; white-space: nowrap; }
.sec h4.sub { margin: 10px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ladder .kv { padding: 3px 8px; margin: 0 -8px; border-radius: 6px; }
.ladder .kv.now { background: var(--accent-tint); }
.ladder .kv.now span, .ladder .kv.now b { color: var(--accent); font-weight: 600; }
.skel { height: 14px; margin: 10px 0; border-radius: 4px; background: linear-gradient(90deg, var(--chip) 25%, var(--line-2) 50%, var(--chip) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.skel:nth-child(odd) { width: 70%; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.tp a { color: var(--accent); }
.co-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.co-desc.open { display: block; }
.co-more { margin-bottom: 8px; }
.co-split { margin: 10px 0 0; }
.co-q { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.co-q th { font-weight: 500; color: var(--text-3); font-size: 11.5px; text-align: right; padding: 0 0 6px; }
.co-q td { text-align: right; padding: 5px 0; border-top: 1px solid var(--line-2); }
.co-q th:first-child, .co-q td:first-child { text-align: left; }
.chiprow button.tag { cursor: pointer; }
.news-meta { margin: 0 0 4px; }
.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 10px 0; border-top: 1px solid var(--line-2); }
.news li:first-child { border-top: 0; }
.n-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }
.n-meta span:first-child { color: var(--text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-meta .ai { margin-left: auto; white-space: nowrap; }
.news a, .news li > b { font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--text); text-decoration: none; }
.news a:hover { color: var(--accent); text-decoration: underline; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Short labels on panel controls (pin, price alert, "Used in AI summary"),
   replacing the browser's own slow, unstyled title (#297). Right-aligned:
   they all sit at the panel's right edge. aria-label still names each one. */
.panel [data-tip] { position: relative; }
.panel [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; width: max-content; max-width: 240px; padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 11.5px; font-weight: 500; line-height: 1.35; white-space: normal; text-align: left; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 120ms ease var(--tip-delay), transform 120ms ease var(--tip-delay); z-index: 90; }
.panel [data-tip]:hover::after, .panel [data-tip]:focus-visible::after { opacity: 1; transform: none; }
.panel [data-tip]:focus-visible::after { transition-delay: 0ms; }

/* hover cards */
.pop { position: fixed; z-index: 50; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px 16px; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease; }
.pop.show { opacity: 1; transform: none; }
.pop h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pop h4 span { font-weight: 400; color: var(--text-3); margin-left: 6px; }
.term-card { position: fixed; z-index: 70; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 14px 16px; font-size: 13px; opacity: 0; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease; }
.term-card.show { opacity: 1; transform: none; }
.term-card b { font-size: 14px; }
.term-card p { margin: 6px 0 0; line-height: 1.45; }
.term-card .how, .glossary .how { color: var(--text-2); font-size: 12.5px; }
.term-ex { margin: 10px 0 2px; padding: 8px 10px; background: var(--bg); border-radius: 8px; display: inline-block; }
.term-card .linkbtn { margin-top: 10px; }

/* ---------- popovers & dialogs ---------- */
.tb-pop { position: absolute; top: 40px; right: 0; z-index: 26; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 170px)); animation: popin 160ms var(--ease-out); }
.tb-pop.wide { width: 390px; }
#pop-views { position: fixed; right: auto; width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 100px); color: var(--text); white-space: normal; font-weight: 400; text-align: left; }
#pop-views .vlist { min-height: 0; overflow-y: auto; }
@keyframes popin { from { opacity: 0; transform: translateY(-4px); } }
.tp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.tp-head b { font-size: 14px; }
.tp-body { padding: 12px 16px; overflow-y: auto; }
.tp-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.tp-foot.split { justify-content: space-between; }
.tp-foot #f-logic { margin-right: auto; }
.tp-note { justify-content: flex-start; font-size: 11.5px; color: var(--text-3); }
.match { display: grid; gap: 6px; padding: 10px 12px; margin: -2px 0 16px; background: var(--bg); border-radius: 10px; font-size: 12.5px; color: var(--text-2); }
.fgroup { margin-bottom: 14px; }
.fgroup.dis { opacity: .55; }
.fl { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.fl small { color: var(--text-3); }
.soon { font-style: normal; font-size: 11px; background: var(--chip); border-radius: 4px; padding: 0 6px; margin-left: 4px; }
.fgroup input[type=range] { width: 100%; accent-color: var(--accent); }
.prow { display: flex; align-items: center; gap: 8px; }
.money-in { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); flex: 1; margin: 0; font-size: 14px; color: var(--text); }
.money-in span { color: var(--text-3); flex: none; font-size: 13px; }
.money-in input { border: 0; outline: 0; background: none; width: 100%; min-width: 0; padding: 0; }
.money-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Five market-cap bands fit on one line only with tighter buttons. */
/* Movers: the View group (Simple | Pro) fills the chosen side so it stands out. */
.mv-view button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.seg1.tight button { padding: 0 6px; font-size: 12px; }
.momrow { margin-top: 8px; }
.momrow .money-in { flex: 0 1 150px; }
.momrow .check { margin: 0; white-space: nowrap; font-size: 12.5px; }
/* Sector: a button that opens a checklist in place. */
.msel-btn { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 13px; color: var(--text); }
.msel-btn:hover { background: var(--hover); }
.msel-btn[aria-expanded="true"] { border-color: var(--accent); }
.msel-btn svg { color: var(--text-3); flex: none; }
.msel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-list { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; max-height: 220px; overflow-y: auto; }
.msel-opt { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.msel-opt:hover { background: var(--hover); }
.msel-opt input { accent-color: var(--accent); width: 15px; height: 15px; }
.msel-foot { display: flex; justify-content: space-between; padding: 6px 8px 2px; border-top: 1px solid var(--line-2); margin-top: 4px; }
/* Sector or industry: one box, chips inside, matches under it, quick picks below. */
.si-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: var(--card, transparent); }
.si-box:focus-within { border-color: var(--accent); }
.si-box input { flex: 1; min-width: 120px; height: 24px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; }
.si-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 6px; background: var(--hover); font-size: 12px; }
.si-chip button { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.si-chip button:hover { color: var(--text); }
.si-sug { margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.si-opt { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 7px 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.si-opt:hover, .si-opt:focus-visible { background: var(--hover); }
.si-opt small { color: var(--text-3); }
.si-pop { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.si-pop small { color: var(--text-3); }
.si-pop > span { display: contents; }
.si-pill { border: 1px solid var(--line); border-radius: 14px; background: none; color: inherit; font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.si-pill:hover { background: var(--hover); }
.cgroup { display: grid; gap: 2px; }
.colrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; min-height: 32px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.colrow > label { grid-column: 2; }
.colrow > small { grid-column: 2; grid-row: 2; }
.colrow > .mv { grid-column: 3; grid-row: 1 / span 2; }
.colrow.auto { display: flex; }
.colrow > label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.colrow[draggable] { cursor: grab; }
.colrow.fixed { cursor: default; }
.colrow .grip { width: 10px; color: var(--text-3); font-size: 11px; letter-spacing: -2px; flex: none; }
.colrow .mv { display: flex; gap: 2px; opacity: 0; }
.colrow:hover .mv, .colrow:focus-within .mv { opacity: 1; }
.colrow .mv button { width: 22px; height: 22px; border-radius: 4px; color: var(--text-2); font-size: 12px; }
.colrow .mv button:hover { background: var(--chip); color: var(--text); }
.colrow.dragging { opacity: .4; }
.colrow.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.colrow.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.cols-hint { margin: 0 0 8px; }
.colrow:hover { background: var(--hover); }
.colrow input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.colrow > label > span { min-width: 0; overflow-wrap: anywhere; }
.colrow small { font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.colrow.locked { cursor: default; color: var(--text-2); }
.vlist { padding: 6px; overflow-y: auto; }
.vitem { display: flex; align-items: flex-start; border-radius: 8px; }
.vitem:hover, .vitem.on { background: var(--hover); }
.vapply { flex: 1; text-align: left; padding: 8px 10px; display: grid; gap: 2px; }
.vapply b { font-size: 13px; }
.vapply span { font-size: 12px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vdel { width: 28px; height: 28px; margin: 6px; border-radius: 6px; color: var(--text-3); }
.vdel:hover { background: var(--chip); color: var(--text); }

.dlg-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--scrim); opacity: 0; transition: opacity 180ms ease; }
.dlg-wrap.show { opacity: 1; }
.dlg { width: min(480px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 20px 22px; transform: translateY(8px) scale(.98); transition: transform 220ms var(--ease-out); }
.dlg.wide { width: min(560px, 100%); }
.dlg-wrap.show .dlg { transform: none; }
.dlg-scroll { overflow-y: auto; margin: 0 -22px; padding: 0 22px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.dlg-sub { margin: 6px 0 14px; font-size: 13px; color: var(--text-2); }
.fld { display: block; font-size: 12.5px; font-weight: 500; margin: 14px 0 6px; }
.fld-row { display: flex; justify-content: space-between; align-items: baseline; }
.txt { width: 100%; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.txt:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
textarea.txt { font-size: 13px; line-height: 1.5; }
.hint { margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); }
.err { margin: 6px 0 0; font-size: 12.5px; color: var(--down); }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dlg-foot #pa-remove { margin-right: auto; color: var(--down); }
.when { background: var(--bg); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; font-size: 13px; }
.conds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt-grid .seg1 button { font-size: 12px; padding: 0 8px; }
.chans { display: grid; gap: 6px; }
.chan { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.chan.on { border-color: var(--accent); background: var(--accent-tint); }
.chan-top { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.chan-top input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.chan-l { display: grid; flex: 1; }
.chan-l b { font-size: 13px; }
.chan-l small { font-size: 12px; color: var(--text-2); }
.live-tag { font-size: 10.5px; font-weight: 600; color: var(--up); background: var(--up-fill); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.later-tag { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--chip); border-radius: 4px; padding: 1px 6px; }
.chan-in { display: none; margin-top: 8px; }
.chan.on .chan-in { display: block; }
.chan.on .chan-btns { display: flex; gap: 6px; flex-wrap: wrap; }
#ns-quiet-times { margin-top: 8px; }

/* glossary slides in from the right as a drawer */
/* release notes */
.rn-list { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.rn-day + .rn-day { margin-top: 18px; }
.rn-day h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: none; }
/* Room to read (QA #116): the notes are full sentences, several per release. */
.rn-rel { padding: 14px 0; border-top: 1px solid var(--line-2); }
.rn-rel > b { font-size: 14px; }
.rn-rel ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.rn-rel li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.6; }
.rn-tag { justify-self: start; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 0 6px; line-height: 17px; }
.rn-new { color: var(--accent); background: var(--accent-tint); }
.rn-improved { color: var(--up); background: var(--up-fill); }
.rn-fixed { color: var(--amber); background: var(--amber-tint); }
.rn-more { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.rn-more summary { cursor: pointer; }
.rn-more p { margin: 4px 0 0; }
/* Bottom-right corner, clear of every page's title and controls
   (tmpyapp#450 OVR-10: it used to sit top-centre, over the page head). It
   rises in, then the border glows twice so a new release gets noticed, then
   it sits still. On phones it sits just above the bottom bar. */
.rn-card { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-pop); animation: rn-rise 520ms cubic-bezier(.2, 1.3, .4, 1) both, rn-glow 1.4s ease-out 600ms 2; }
.rn-card::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: rn-dot 1.2s ease-in-out 600ms 3; }
@keyframes rn-rise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rn-glow { 0% { box-shadow: var(--shadow-pop), 0 0 0 0 var(--accent-tint); } 40% { box-shadow: var(--shadow-pop), 0 0 0 8px var(--accent-tint); } 100% { box-shadow: var(--shadow-pop), 0 0 0 0 var(--accent-tint); } }
@keyframes rn-dot { 50% { transform: scale(1.6); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .rn-card, .rn-card::before { animation: none; } }

/* Short labels under the top-right icons, sooner and easier to read than the
   browser's own tooltip. */
.top-right [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, -2px); padding: 3px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 11.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease var(--tip-delay), transform 120ms ease var(--tip-delay); z-index: 90; }
.top-right [data-tip]:hover::after, .top-right [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.top-right [data-tip]:focus-visible::after { transition-delay: 0ms; }
.top-right [data-tip][aria-expanded="true"]::after { display: none; }
.top-right > :last-child [data-tip]::after, .top-right > [data-tip]:last-child::after { left: auto; right: 0; transform: translateY(-2px); }
.top-right > :last-child [data-tip]:hover::after { transform: none; }
.rn-card-body { display: grid; gap: 2px; min-width: 0; }
.rn-card-body b { font-size: 13.5px; }
.rn-card-body span { font-size: 12px; color: var(--text-2); }
.rn-card .btn { flex: none; }
.sf-rn { font-size: 12px; color: var(--text-3); }
/* One row the height of the window: with an automatic row, height: 100%
   became the content's height (6,195 px of release notes in a 900 px
   window), so neither list could scroll (#213). */
.dlg-wrap.drawer { place-items: stretch end; padding: 0; grid-template-rows: 100%; }
.dlg-wrap.drawer .dlg { position: relative; width: min(var(--help-w), 100%); max-height: none; height: 100%; border-radius: 0; transform: translateX(24px); gap: 12px; }
.dlg-wrap.drawer.show .dlg { transform: none; }
.dlg-tools { display: flex; align-items: center; gap: 2px; }
/* Pinned Site Help: docked on the right, page makes room, no scrim. The wrap lets clicks through; only the panel takes them. */
:root { --help-w: 572px; }   /* Site Help's width: helpsize.js sets it when you drag the grip */
#glossary.pinned { background: none; pointer-events: none; }
#glossary.pinned .dlg { width: var(--help-w); pointer-events: auto; border-left: 1px solid var(--line); box-shadow: var(--shadow-panel, none); }
body.help-pinned .rn-card { right: calc(var(--help-w) + 20px); }
body.help-pinned .shell { padding-right: var(--help-w); transition: padding-right 220ms var(--ease-out); }
.glossary { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: grid; align-content: start; gap: 4px; }
.glossary li { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.glossary li.mark { background: var(--accent-tint); }
.glossary li b { font-size: 13.5px; }
.glossary .gl-s { color: var(--text-2); }
.glossary li p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; }
.glossary details { display: inline; }   /* "More" follows the one-line help instead of taking a line of its own */
.glossary details[open] { display: block; margin-top: 2px; }
.glossary summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--accent); }
.glossary summary::-webkit-details-marker { display: none; }
.glossary details:not([open]) > summary { margin-left: 5px; }
.glossary summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; }
.glossary details[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.glossary details[open] > summary { margin-bottom: 4px; }
.gl-bar { display: flex; align-items: center; gap: 10px; }
.gl-bar .txt { flex: 1; min-width: 0; }
.gl-bar .linkbtn { white-space: nowrap; font-size: 12px; }

.nudge { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); font-size: 13px; transform: translate(-50%, 16px); opacity: 0; transition: transform 260ms var(--ease-out), opacity 200ms; }
.nudge.show { transform: translate(-50%, 0); opacity: 1; }
.toast { position: fixed; left: 50%; top: 72px; z-index: 90; transform: translate(-50%, -8px); opacity: 0; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all 200ms var(--ease-out); max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.banner-note { position: fixed; right: 20px; top: 68px; z-index: 55; width: 380px; max-width: calc(100vw - 32px); display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); transform: translateX(24px); opacity: 0; transition: transform 280ms var(--ease-out), opacity 200ms; }
.banner-note.show { transform: none; opacity: 1; }
.banner-note .bn-i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); flex: none; }
.banner-note > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.banner-note b { font-size: 13px; }
.banner-note small { font-size: 12px; color: var(--text-2); }
.scrim { display: none; }


/* ---------- Movers: "What just happened" feed (#193 part 1) ----------
   A column beside the table when the main area is wide enough (feed.js sets
   --feed-w, which the table's column fitting also subtracts); otherwise one
   line above the table that opens the full list. */
:root { --feed-col: 360px; --feed-rail: 40px; --feed-w: 0px; }
/* The 16px gap only when the feed column (or its strip) is there: with a 0px
   column the gap still took 16px, so the table card ended short of the
   cards above it. */
.mv-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--feed-w); gap: 0 var(--feed-gap, 0px); align-items: start; margin-top: 10px; }
.mv-grid > .tbl-wrap { margin-top: 0; min-width: 0; }
.feed { min-width: 0; }
.feed.col { position: sticky; top: 0; }
.feed.drop { grid-column: 1 / -1; order: -1; position: relative; margin-bottom: 8px; }
.feed-bar { display: none; }
.feed.drop .feed-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; min-width: 0; }
.feed-bar .fb-last { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.feed-bar .muted { flex: 1; }
/* Open: a light blue box, so it reads as its own thing beside the table. */
.feed-box { background: var(--seg-bg); border: 1px solid var(--seg-line); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 170px); }
.feed.drop .feed-box { display: none; }
.feed.drop.open .feed-box { display: flex; position: absolute; right: 0; top: calc(100% + 6px); width: min(var(--feed-col), 100%); max-height: 60vh; z-index: 30; box-shadow: var(--shadow-pop); }
.feed-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; }
.fh-top { display: flex; align-items: center; gap: 8px; }
.fh-top h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.fh-top .ev-livetag { margin-left: auto; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.ev-livetag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.ev-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
/* The dot is green and pulsing only while moments can arrive; grey and still
   after the close or when the feed is down. */
#feed:not([data-s="live"]) .ev-live { background: var(--flat); }
#feed[data-s="off"] .ev-live { background: var(--amber); }
@media (prefers-reduced-motion: no-preference) { #feed[data-s="live"] .feed-head .ev-live, #feed[data-s="live"] .feed-bar .ev-live { animation: pulse 2s ease-in-out infinite; } }
/* Same control as the list tabs, a shade deeper so it holds its own on the
   box's tint. It wraps on a narrow column rather than scrolling. */
.fh-chips { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--chip); border: 0; border-radius: 10px; }
.fh-chips button { height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); transition: background 120ms ease, color 120ms ease; }
.fh-chips button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.fh-chips button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 600; background: var(--accent); box-shadow: var(--seg-pill-shadow); }
.fh-chips button:focus-visible { outline: none; box-shadow: var(--seg-focus); }
.fh-chips button[aria-pressed="true"]:focus-visible { box-shadow: var(--seg-pill-shadow), var(--seg-focus); }
/* "Only my watchlist" is a filter like the chips, so it is a toggle button
   (star outline off, filled on), not a settings-style checkbox row. */
.fh-mine { justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 500; color: var(--text-2); border: 1px solid var(--seg-line); background: var(--surface); }
.fh-mine:hover { color: var(--text); border-color: var(--accent); }
.fh-mine[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.fh-mine:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 60px; }
.feed-list li + li { border-top: 1px solid var(--line-2); }
.ev { width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 9px 14px; text-align: left; font-size: 12.5px; line-height: 1.4; }
.ev:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.ev-t { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-x b { font-weight: 600; }
.ev-tags { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.ev-tag { font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 8px; background: var(--chip); color: var(--text-2); }
.ev-tag.up { background: var(--up-fill); color: var(--up); }
.ev-tag.down { background: var(--down-fill); color: var(--down); }
.ev-tag.accent { background: var(--accent-tint); color: var(--accent); }
.ev-tag.violet { background: color-mix(in srgb, var(--cmp-3) 14%, transparent); color: var(--cmp-3); }
.ev-tag.hot { background: color-mix(in srgb, #E0592A 14%, transparent); color: #C2410C; }
:root[data-theme="dark"] .ev-tag.hot { color: #FB923C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ev-tag.hot { color: #FB923C; } }
.ev-star { font-size: 10.5px; color: var(--amber); }
.ev-none { padding: 16px 14px; font-size: 12.5px; color: var(--text-3); }
/* Date header over each session's lines (#298), in the bold page-head date style. */
.feed-list li.ev-day { position: sticky; top: 0; z-index: 1; padding: 6px 14px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.feed-list li.ev-day b { color: var(--text); font-weight: 600; }
.feed-list li.ev-day + li { border-top: 0; }
.feed-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line-2); }
/* Minimize (wide screens): the column folds into a slim strip. */
.fh-min { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--text-3); }
.fh-min:hover { background: var(--hover); color: var(--text); }
.feed.col.mini .feed-box { display: none; }
.feed.col.mini .feed-bar { display: block; }
.feed-rail { width: var(--feed-rail); min-height: 240px; max-height: calc(100vh - 170px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: color-mix(in srgb, var(--accent) 78%, #000); border: 1px solid transparent; border-radius: 12px; color: #fff; }
/* Minimized: the strip is solid (darker) blue so it is easy to find again. */
.feed-rail:hover { filter: brightness(1.1); }
.feed-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-n { min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: color-mix(in srgb, var(--accent) 78%, #000); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.rail-ticks { display: flex; flex-direction: column; gap: 3px; }
.rail-ticks:not(:empty) { padding: 4px; border-radius: 5px; background: var(--surface); }
.rt { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--text-3); }
.rt.up { background: var(--up); } .rt.down { background: var(--down); }
.rt.accent { background: var(--accent); } .rt.violet { background: var(--cmp-3); } .rt.hot { background: #E0592A; }
.rail-t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.rail-open { margin-top: auto; color: inherit; opacity: .8; }
@media (prefers-reduced-motion: no-preference) { #feed[data-s="live"] .feed-rail .ev-live { animation: pulse 2s ease-in-out infinite; } .rt:first-child { animation: rail-in .4s ease-out; } }
@keyframes rail-in { from { transform: scaleX(0); } }
/* The closed strip's colour flows slowly: deep blue through indigo and a
   brighter blue and back, over 8 s (owner: "animate a color gradient").
   Every stop is dark enough for the white text. The first and last stops
   match, so the loop has no seam. Still (plain deep blue) for people who ask
   for less motion. */
.feed-rail { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #000), #4338CA, color-mix(in srgb, var(--accent) 95%, #fff), #6D28D9, color-mix(in srgb, var(--accent) 78%, #000)); background-size: 100% 400%; }
/* Plus a small swell at the start of every 5 s (owner: "grow every 5 sec,
   very subtle"): 3.5% and a soft ring for about 0.4 s, then still. */
@media (prefers-reduced-motion: no-preference) { .feed-rail { transform-origin: 50% 0; animation: rail-drift 8s linear infinite, rail-grow 5s ease-in-out infinite; } }
@keyframes rail-grow {
  0%, 16%, 100% { transform: scale(1); box-shadow: none; }
  8% { transform: scale(1.035); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
}
@keyframes rail-drift { from { background-position: 0 0%; } to { background-position: 0 100%; } }

/* ---------- panel chart tools: candles, compare, relative strength (#190) ----------
   Compare lines avoid green and red, which mean up and down on this site. */
:root { --cmp-1: #2457F5; --cmp-2: #B7791F; --cmp-3: #7C5CD6; --cmp-1-ink: #8FB0FF; --cmp-2-ink: #F2C46D; --cmp-3-ink: #C6B3FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cmp-1: #5B84FF; --cmp-2: #E0B23A; --cmp-3: #A78BFA; --cmp-1-ink: #2457F5; --cmp-2-ink: #8A5A00; --cmp-3-ink: #5B3DB8; } }
:root[data-theme="dark"] { --cmp-1: #5B84FF; --cmp-2: #E0B23A; --cmp-3: #A78BFA; --cmp-1-ink: #2457F5; --cmp-2-ink: #8A5A00; --cmp-3-ink: #5B3DB8; }
.chart-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.chart-tools .ctools { margin-left: 0; }
.cmp-btn { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--text-2); }
.cmp-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.cmp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cmp-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.cmp-legend li { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto 22px; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 12.5px; }
.cmp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.cmp-legend .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-legend em { font-style: normal; font-weight: 600; }
.icon-btn.sm { width: 22px; height: 22px; font-size: 15px; }
.cmp-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 0 10px; height: 30px; border: 1px dashed var(--line); border-radius: 6px; color: var(--accent); }
.cmp-add input { flex: 1; border: 0; background: none; outline: none; font-size: 12.5px; color: var(--text); }
.rs { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.rs-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 6px; }
.rs-w { padding: 1px 7px; border-radius: 10px; background: var(--chip); font-size: 11.5px; }
.rs-sw { margin-left: auto; }
.rs-t { margin: 6px 0 0; font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

/* ---------- Sectors page: the heat map (#190) ----------
   Its own colour ramp: pale grey at 0%, full green/red at the period's cap.
   Box ink flips to white once the colour is strong (light theme); the dark
   theme's ramp is dark all the way, so its ink is always light. */
#page-sectors { --hm-0: #E6E9EE; --hm-up: #0B7A45; --hm-down: #C8313A; --hm-na: repeating-linear-gradient(135deg, #EEF0F3 0 6px, #E6E9EE 6px 12px); --hm-dark: 0; --hm-head: #1B2230; --hm-head-up: #6EE7A8; --hm-head-down: #FF9A9E; --hm-gap: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #page-sectors { --hm-0: #2A313D; --hm-up: #1E9E5A; --hm-down: #D2424A; --hm-na: repeating-linear-gradient(135deg, #1A212D 0 6px, #161C26 6px 12px); --hm-dark: 1; --hm-head: #070A10; --hm-gap: var(--bg); } }
:root[data-theme="dark"] #page-sectors { --hm-0: #2A313D; --hm-up: #1E9E5A; --hm-down: #D2424A; --hm-na: repeating-linear-gradient(135deg, #1A212D 0 6px, #161C26 6px 12px); --hm-dark: 1; --hm-head: #070A10; --hm-gap: var(--bg); }
.sec-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.sec-bar p { margin: 0; }
.sec-bar .seg1 button { height: 24px; }
#sec-period { flex-wrap: wrap; }
/* Play is the page's main action: filled, and until it's been used once a
   soft ring pulses around it with a nudge beside it. */
.btn-play { position: relative; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 0 16px; }
.btn-play:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.btn-play svg { color: currentColor; }
#sec-play[data-playing] { background: var(--surface); color: var(--accent); }
#sec-play .i-stop, #sec-play[data-playing] .i-play { display: none; }
#sec-play[data-playing] .i-stop { display: block; }
.play-hint { align-self: center; font-size: 12.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
@media (max-width: 760px) { .play-hint { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .btn-play.fresh::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 var(--accent); animation: play-ring 1.8s ease-out infinite; pointer-events: none; }
  .btn-play.fresh .i-play { animation: play-nudge 1.8s ease-in-out infinite; }
  .play-hint { animation: play-hint 1.8s ease-in-out infinite; }
}
@keyframes play-ring { 0% { box-shadow: 0 0 0 0 rgba(36, 87, 245, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(36, 87, 245, 0); } }
@keyframes play-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(2px); } }
@keyframes play-hint { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(-3px); } }
.sec-sum { margin: 0 0 12px; font-size: 15px; line-height: 1.55; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sec-crumb { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.sec-crumb [data-see-movers] { margin-left: auto; }
.hm-wrap { position: relative; }
.hm { position: relative; height: clamp(360px, 44vw, 620px); background: var(--hm-gap); border-radius: 10px; overflow: hidden; contain: strict; }
.hm-s { position: absolute; background: var(--hm-gap); }
.hm-sh { position: absolute; left: 1px; right: 1px; top: 1px; height: 19px; padding: 0 6px; display: flex; align-items: center; gap: 5px; background: var(--hm-head); color: #F2F4F8; font-size: 11.5px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; border-radius: 2px 2px 0 0; }
.hm-sh:hover { background: #2C3648; }
.hm-sn { overflow: hidden; text-overflow: ellipsis; }
.hm-sp { font-weight: 600; flex: none; }
.hm-b { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 2px; border: 1px solid var(--hm-gap); border-radius: 3px; overflow: hidden; text-align: center; line-height: 1.15; white-space: nowrap; text-decoration: none; }
.hm-b b { font-weight: 600; letter-spacing: .1px; }
.hm-b span { opacity: .92; }
.hm-b.na span { font-size: 10.5px !important; }
.hm-b:hover { outline: 2px solid var(--text); outline-offset: -2px; z-index: 2; }
.hm-b.rest { font-size: 11px; }
.hm.anim .hm-s, .hm.anim .hm-b { transition: left 650ms var(--ease-out), top 650ms var(--ease-out), width 650ms var(--ease-out), height 650ms var(--ease-out), background-color 650ms ease, opacity 400ms ease; }
.hm-frame { position: absolute; right: 12px; bottom: 12px; display: grid; justify-items: end; padding: 8px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-pop); pointer-events: none; }
.hm-frame b { font-size: 18px; } .hm-frame span { font-size: 12px; color: var(--text-3); }
.hm-msg { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; align-content: center; }
.hm-tip { position: absolute; z-index: 5; min-width: 180px; max-width: 280px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); font-size: 12.5px; pointer-events: none; }
.hm-tip .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tip dl { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 8px 0 0; }
.hm-tip dt { color: var(--text-3); } .hm-tip dd { margin: 0; text-align: right; font-weight: 600; }
.hm-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 16px; align-items: start; }
.hm-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.hm-legend i { width: 180px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--hm-down), var(--hm-0), var(--hm-up)); }
.hm-legend .muted { margin-left: 8px; }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rk-card { container-type: inline-size; }
@container (min-width: 900px) { .rk-list { display: block; columns: 2; column-gap: 28px; } .rk-list li { break-inside: avoid; margin-bottom: 2px; } }
.rk { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 96px 58px 36px 44px; grid-template-areas: "n bar pct sh bz" "ud ud ud ud ud"; align-items: center; column-gap: 10px; padding: 5px 6px; border-radius: 6px; font-size: 13px; text-align: left; }
.rk:hover, .rk[aria-pressed="true"] { background: var(--hover); }
.rk-n { grid-area: n; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-n small { color: var(--text-3); font-size: 11px; }
.rk .sbar { grid-area: bar; }
.rk em { grid-area: pct; font-style: normal; font-weight: 600; text-align: right; }
.rk-sh { grid-area: sh; text-align: right; color: var(--text-2); font-size: 12px; }
/* vs normal: amber when a sector trades well above its usual money */
.rk-bz { grid-area: bz; justify-self: end; font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 0 6px; border-radius: 9px; line-height: 18px; }
.rk-bz.hi { color: var(--amber); background: var(--amber-tint); }
.rk-bz.lo { color: var(--text-3); }
.hm-bz { flex: none; font-size: 10.5px; font-weight: 600; color: #1B2230; background: #F2B45A; border-radius: 8px; padding: 0 6px; line-height: 15px; }
.sec-playrow { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rk-ud { grid-area: ud; font-size: 11px; color: var(--text-3); display: none; }
.rk[aria-pressed="true"] .rk-ud { display: block; }

/* ---------- narrower screens: the panel slides over the table ---------- */
@media (max-width: 1180px) {
  .app, .app.open { grid-template-columns: minmax(0, 1fr) 0px; }
  .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 100%); overflow: visible; border-left: 1px solid var(--line); box-shadow: var(--shadow-panel); transform: translateX(calc(100% + 24px)); transition: transform 260ms var(--ease-in); z-index: 20; }
  .app.open .panel { transform: none; transition: transform 380ms var(--ease-out); }
  .panel-inner { width: 100%; }
  .scrim { display: block; position: absolute; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 260ms ease; z-index: 15; }
  .app.open .scrim { opacity: 1; pointer-events: auto; }
  .sf-top { grid-template-columns: 1fr 1fr; }
  .sf-data { grid-column: 1 / -1; }
  .wstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-foot { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --mobile-nav-h: 60px; }
  .topbar { gap: 12px; padding: 0 16px; }
  /* Phones: the rail becomes a bar of six icons along the bottom, and What's
     new and Help (both also in the footer) step aside in the top bar. */
  .shell, .shell.folded { grid-template-columns: minmax(0, 1fr); --rail-w: 0px; padding-bottom: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); }
  .shell > .topbar, .shell > .context, .shell > .app { grid-column: 1; }
  .rn-card { left: 12px; right: 12px; bottom: calc(var(--mobile-nav-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; flex-wrap: wrap; row-gap: 10px; }
  .rn-card-body { flex: 1 1 0; }
  .rn-card .btn { order: 3; flex: 1 1 100%; }
  .rail, .shell.folded .rail { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); padding: 4px 4px env(safe-area-inset-bottom, 0px); flex-direction: row; align-items: stretch; gap: 0; }
  .rail .logo-mark, .rail-h, .rail-fold { display: none !important; }
  .topbar .top-logo { display: flex; font-size: 18px; }
  .rail .tab, .shell.folded .rail .tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; height: auto; width: auto; padding: 0; font-size: 10.5px; font-weight: 600; border-radius: 10px; }
  /* Equal slots, and a two-word name wraps onto two lines rather than
     running into its neighbour on a 320px phone ("Biggest movers"). */
  .rail .tab, .shell.folded .rail .tab { min-width: 0; }
  .rail .tab .tab-l, .shell.folded .rail .tab .tab-l { display: block; max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }
  .rail .tab svg { width: 20px; height: 20px; }
  .rail .tab .tab-l { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
}
@media (max-width: 760px) {
  .rail .tab[aria-current] { box-shadow: none; }
  .rail .tab .ndot, .rail .tab .ncount, .shell.folded .rail .tab .ncount, .shell.folded .rail .tab .ndot { position: absolute; top: 5px; right: calc(50% - 20px); margin: 0; }
  .rail .tab .ncount { min-width: 16px; line-height: 15px; font-size: 9.5px; padding: 0 4px; }
  .rail [data-tip]::after { display: none; }
  .top-right [data-open-releases], .top-right #help-btn { display: none; }
  #sec-period { width: 100%; flex-wrap: wrap; }
  #sec-period button { padding: 0 4px; font-size: 12px; }
  /* Phones: a search icon in the bar opens the same search as a full-screen sheet (Cancel closes it). */
  .search { display: none; }
  body.search-open .search { display: flex; position: fixed; inset: 0 0 auto 0; z-index: 60; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--surface); }
  body.search-open .search input { font-size: 16px; }
  body.search-open .search .ghost { font-size: 16px; }
  body.search-open .search kbd { display: none; }
  body.search-open .search .search-cancel { display: inline-block; }
  body.search-open .search .nl-on { display: none; }
  body.search-open #search-list { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; padding: 4px 8px calc(16px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
  body.search-open #search-list li { padding: 11px 10px; font-size: 14px; }
  .context { padding: 0 16px; }
  #st-count, .st-right .sep:last-of-type { display: none; }
  .idx-strip { gap: 12px; }
  .idx:nth-child(n+3) { display: none; }
  .main { padding: 12px 16px 24px; }
  .actions .btn span, .actions #save-btn { display: none; }
  .ctl-group + .ctl-group { padding-left: 0; border-left: 0; }
  .actions .btn .fcount { display: inline; }
  /* The four markets don't fit a phone: they scroll inside their own box
     instead of widening the page by ~45 px. */
  .controls .ctl-group { min-width: 0; max-width: 100%; }
  .controls .uni { overflow-x: auto; scrollbar-width: none; }
  .panel { width: 100%; }
  .sec, .p-top { padding-left: 16px; padding-right: 16px; }
  .ptabs { padding-left: 16px; padding-right: 16px; }
  .ptrack [role=tab] { padding: 0 8px; }
  .ov-lists, .two { grid-template-columns: 1fr; }
  .sf-top { grid-template-columns: 1fr; gap: 20px; }
  .tb-pop, .tb-pop.wide { position: fixed; left: 8px; right: 8px; top: 110px; width: auto; }
  .hm { height: 440px; }
  .rk { grid-template-columns: minmax(0, 1fr) 56px 52px 32px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
/* Top picks outside trading hours (tmpyapp#210): no strip at all. */
.picks-strip.off { display: none; }

/* ---------- New IPOs (#ipos) ---------- */
.ipo-pill { display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 8px; color: var(--accent); background: var(--accent-tint); white-space: nowrap; cursor: help; }
.tbl.ipo .thr, .tbl.ipo .tr { grid-template-columns: minmax(220px, 1.6fr) 110px 150px 150px 120px 90px 100px 96px 100px 120px; }
.tbl.ipo { min-width: 1260px; }
.nw { white-space: nowrap; }
.ipo-meta { color: var(--text-3) !important; font-size: 11.5px !important; }
.ipo-bench { margin-top: 16px; }
.ipo-bench .card { overflow-x: auto; }
.tbl.ipo-b { min-width: 560px; }
.tbl.ipo-b .thr, .tbl.ipo-b .tr { grid-template-columns: minmax(180px, 1.4fr) 70px 150px 130px minmax(120px, 1fr); }
.tbl.ipo-b .tr { min-height: 40px; }
.ipo-b-all { background: var(--surface-2); }
.ipo-bar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; max-width: 160px; }
.ipo-bar i { display: block; height: 100%; background: var(--accent); }
.tbl.ipo .tr.static { cursor: default; }
.tbl.ipo .tr.static:hover { background: none; }
.tbl.ipo .td small { display: block; }
.ipo-st { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--chip); color: var(--text-2); white-space: nowrap; }
.ipo-st.listed { background: var(--accent-tint); color: var(--accent); }
.ipo-st.postponed { background: var(--amber-tint); color: var(--amber); }
.ipo-tag { display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 5px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-3); cursor: help; }
.ipo-spac-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
/* IPO search, Best since IPO and What worked (#296). */
.ipo-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ipo-search { flex: 0 1 380px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text-3); }
.ipo-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ipo-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.ipo-search kbd { font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.ipo-best-ctl { display: flex; gap: 10px; flex-wrap: wrap; }
.ipo-search-note { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.ipo-search-note b { color: var(--text); }
.ipo-filter { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 6px 4px 12px; border-radius: 16px; background: var(--accent-tint); color: var(--text); font-size: 13px; }
.chip-x { width: 22px; height: 22px; border-radius: 50%; color: var(--text-2); font-size: 12px; }
.chip-x:hover { background: var(--surface); color: var(--text); }
.tbl.ipo.ipo-best { min-width: 1180px; }
.tbl.ipo.ipo-best .thr, .tbl.ipo.ipo-best .tr { grid-template-columns: 44px minmax(200px, 1.6fr) 130px 140px 110px 100px 120px 120px 130px 100px; }
.tbl.ipo-best .th { white-space: normal; }
.px.strong { font-weight: 700; }
.ipo-stats { margin-top: 16px; }
.ipo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 24px; margin: 0 0 14px; }
.ipo-facts p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.ipo-facts b { color: var(--text); font-weight: 600; }
.ipo-fk { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.ipo-sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 24px; }
.ipo-g h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.ipo-g ul { list-style: none; margin: 0; padding: 0; }
.ipo-gh, .ipo-bk { display: grid; grid-template-columns: minmax(0, 1fr) 44px 92px 88px; gap: 8px; align-items: center; }
.ipo-gh { font-size: 11px; color: var(--text-3); padding: 0 6px 2px; }
.ipo-gh span:not(:first-child), .ipo-bk span:not(.bk-l) { text-align: right; }
.ipo-bk { width: 100%; padding: 5px 6px; border-radius: 6px; font-size: 13px; text-align: left; }
.ipo-bk:hover { background: var(--hover); }
.ipo-bk[aria-pressed="true"] { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
.bk-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-n { color: var(--text-2); }
.bk-few { grid-column: span 2; }
@media (max-width: 760px) {
  .ipo-search { flex-basis: 100%; }
  /* Four tabs don't fit a phone: they scroll sideways inside their own track. */
  #ipo-show { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #ipo-show button { flex: none; }
  .ipo-search kbd { display: none; }
  #page-ipos .page-head .actions { min-width: 0; max-width: 100%; }
  .ipo-sg { grid-template-columns: 1fr; }
  .ipo-gh, .ipo-bk { grid-template-columns: minmax(0, 1fr) 36px 80px 64px; }
}

/* IPO calendar (tmpyapp#481): one column per market day; a phone stacks
   them into a day-by-day list and folds the empty days to one line. */
.ipo-cal { margin-top: 14px; }
.ipc-bar-top { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
/* Week picker: ‹ name › and a small chart of the thirteen weeks (bar = IPOs). */
.ipc-nav { display: flex; align-items: center; gap: 10px 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.ipc-step { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 18px; line-height: 1; color: var(--text-2); display: grid; place-items: center; flex: none; }
.ipc-step:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.ipc-step:disabled { opacity: .4; cursor: default; }
.ipc-wkname { display: flex; flex-direction: column; min-width: 118px; line-height: 1.2; }
.ipc-wkname b { font-size: 14px; font-weight: 600; }
.ipc-wkname span { font-size: 12px; color: var(--text-3); }
.ipc-spark { display: grid; grid-template-columns: repeat(13, 24px); gap: 3px; align-items: end; margin-left: 8px; }
.ipc-sb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border-radius: 5px; }
.ipc-sb-n { font-size: 10px; font-weight: 600; color: var(--text-3); line-height: 12px; height: 12px; }
.ipc-sb-bar { position: relative; width: 16px; height: 26px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.ipc-sb-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--text-3); border-radius: 3px 3px 0 0; opacity: .55; }
.ipc-sb-m { font-size: 10px; color: var(--text-3); line-height: 12px; height: 12px; white-space: nowrap; }
.ipc-sb.now .ipc-sb-bar { box-shadow: 0 0 0 1.5px var(--text-3); }
.ipc-sb:not(.past) .ipc-sb-bar i { opacity: .8; }
.ipc-sb:hover .ipc-sb-bar i { opacity: 1; }
.ipc-sb[aria-pressed="true"] .ipc-sb-bar i { background: var(--accent); opacity: 1; }
.ipc-sb[aria-pressed="true"] .ipc-sb-bar { box-shadow: 0 0 0 1.5px var(--accent); }
.ipc-sb[aria-pressed="true"] .ipc-sb-n { color: var(--accent); }
.ipc-today { font-size: 13px; white-space: nowrap; }
.ipc-head { margin: 0 0 16px; }
.ipc-head h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.ipc-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.ipc-head p b { color: var(--text); font-weight: 600; }
.ipc-now { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.ipc-now b { color: var(--text); font-weight: 600; }
.ipc-now small { color: var(--text-3); }
.ipc-now .up { color: var(--up); } .ipc-now .down { color: var(--down); }
.ipm-t em { font-style: normal; font-weight: 600; }
.ipm-t em.up { color: var(--up); } .ipm-t em.down { color: var(--down); }
.ipc-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ipc-day { min-width: 0; }
.ipc-day h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0 2px 6px; border-bottom: 2px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ipc-day h4 b { color: var(--text); }
.ipc-day h4 em { display: inline-block; margin-left: 8px; vertical-align: 1px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent); border-radius: 8px; padding: 0 6px; line-height: 16px; }
.ipc-day h4 small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.ipc-day.today h4 { border-bottom-color: var(--accent); }
.ipc-day.past h4 { color: var(--text-3); }
.ipc-day ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ipc-none { margin: 0; padding: 8px 2px; font-size: 12.5px; color: var(--text-3); }
.ipc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px 10px; min-width: 0; }
.ipc-day.past .ipc-card, .ipc-card.listed { background: var(--surface-2); }
.ipc-r1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ipc-r1 b { font-size: 15px; font-weight: 700; }
.ipc-ex { font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ipc-sz { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: help; }
.ipc-nm { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipc-px { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.ipc-bar { height: 4px; border-radius: 2px; background: var(--chip); margin-top: 7px; overflow: hidden; }
.ipc-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.ipc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.ipc-tags .ipo-tag { margin-left: 0; }
.ipc-more { margin: 16px 0 0; font-size: 13px; color: var(--text-2); }
.ipc-mode { flex: none; }
.ipc-share-btn { flex: none; margin-left: auto; gap: 6px; }
.ipc-bar-top { flex-wrap: nowrap; }
/* The Share panel sits under the calendar's controls, in the page flow. */
.ipc-share { margin: 14px 0 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.ipc-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 15px; }
.ipc-sh-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ipc-sh-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ipc-sh-side .hint { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.ipm-r.now { box-shadow: inset 0 2px 0 var(--accent); }
.ipm-past { display: inline-block; margin: 0 0 10px; font-size: 13px; }
.ipc-mode button { flex: none; padding: 0 14px; }
/* Month: five weekdays and a week total per row. */
.ipm { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ipm-r { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .8fr); }
.ipm-r + .ipm-r { border-top: 1px solid var(--line-2, var(--line)); }
.ipm-h { padding: 7px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
.ipm-c { min-width: 0; min-height: 84px; padding: 6px 8px 8px; border-left: 1px solid var(--line-2, var(--line)); }
.ipm-c:first-child { border-left: 0; }
.ipm-c.past { background: var(--session-band); }
.ipm-c.past .ipm-d { color: var(--text-3); opacity: .7; }
.ipm-d { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ipm-d em { font-style: normal; font-size: 10.5px; color: var(--accent-ink); background: var(--accent); border-radius: 8px; padding: 0 6px; line-height: 16px; }
.ipm-c.today { box-shadow: inset 0 2px 0 var(--accent); }
.ipm-c ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ipm-t { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; min-width: 0; cursor: default; }
.ipm-t b { font-weight: 700; }
.ipm-t span { margin-left: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.ipm-t.listed { background: var(--surface-2); }
.ipm-wt { background: var(--surface-2); }
button.ipm-wt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; cursor: pointer; }
button.ipm-wt:hover { background: var(--hover); }
.ipm-n { font-size: 16px; font-weight: 600; line-height: 1.25; }
.ipm-s { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.ipm-s small { display: block; color: var(--text-3); }
@media (max-width: 1000px) { .ipc-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ipc-bar-top { flex-wrap: wrap; }
  .ipc-nav { order: 3; flex-basis: 100%; }
  .ipc-spark { margin-left: 0; flex-basis: 100%; grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .ipc-sh-body { grid-template-columns: minmax(0, 1fr); }
  .ipc-days { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ipc-day.empty { display: flex; align-items: baseline; gap: 10px; }
  .ipc-day.empty h4 { margin: 0; padding: 0; border: 0; }
  .ipc-day.empty .ipc-none { padding: 0; }
  /* Month on a phone: the week total wraps under its row; chips lose the amount. */
  .ipm-r { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ipm-h.ipm-wt { display: none; }
  .ipm-c { min-height: 60px; padding: 4px 4px 6px; }
  .ipm-t { padding: 0 3px; font-size: 10.5px; height: 20px; }
  .ipm-t span { display: none; }
  .ipm-d em { display: none; }
  button.ipm-wt { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; min-height: 0; padding: 6px 8px; border-left: 0; border-top: 1px solid var(--line-2, var(--line)); }
  .ipm-n { font-size: 14px; }
  .ipm-s small { display: inline; margin-left: 6px; }
}

/* Overview list cards: when the list is from sits after the title. */
.card-h .ov-when { margin-right: auto; }
.card-h .linkbtn { white-space: nowrap; }
@media (max-width: 560px) {
  .card-h:has(.ov-when) { flex-wrap: wrap; row-gap: 2px; }
  .card-h .ov-when { order: 3; flex-basis: 100%; }
}
.tbl.ipo-b .tr { cursor: default; }
.tbl.ipo-b .tr:hover { background: none; }
.tbl.ipo-b .tr.ipo-b-all, .tbl.ipo-b .tr.ipo-b-all:hover { background: var(--surface-2); }
@media (max-width: 560px) {
  .tbl.ipo-b { min-width: 0; }
  .tbl.ipo-b .thr, .tbl.ipo-b .tr { grid-template-columns: minmax(0, 1fr) 44px 92px 64px 0; }
  .tbl.ipo-b .th:last-child, .tbl.ipo-b .td:last-child { display: none; }
  .tbl.ipo-b .th, .tbl.ipo-b .td { padding-left: 6px; padding-right: 6px; }
  .tbl.ipo-b .th { white-space: normal; }
  .tbl.ipo-b .thr { height: auto; padding-bottom: 8px; }
}

/* ---------- 10-yr yield panel (tmpyapp#256) ----------
   Opens in the stock panel's place. The index line uses the compare gold,
   not green or red, which mean up and down on this site; its axis text uses
   --amber, the gold that passes AA as text. */
/* The yield is the panel's only door, so it stays on the strip where Gold
   and Crude fold away. */
@media (max-width: 1280px) { .idx-strip > .sep ~ .idx-yield { display: inline-flex; } }
.y-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.ypanel .p-price { flex-wrap: wrap; row-gap: 2px; }
.y-since { font-size: 12.5px; color: var(--text-3); }
.y-asof { margin: 4px 0 0; font-size: 12px; color: var(--text-3); }
.ypanel .sec { padding-top: 14px; padding-bottom: 14px; }
.ypanel .p-top + .sec { margin-top: 10px; }
.y-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.y-sh h3 { margin: 0; }
.y-sh small { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.y-ro { font-size: 12px; color: var(--text-2); min-height: 18px; margin-bottom: 4px; display: flex; gap: 4px 10px; flex-wrap: wrap; }
.y-ro b { font-weight: 500; color: var(--text); }
.y-key { display: inline-flex; align-items: center; gap: 5px; }
.y-key i { width: 12px; height: 0; border-top: 2px solid var(--accent); display: inline-block; }
.y-key i.dash { border-top: 2px dashed var(--text-3); }
.y-key i.idx { border-top-color: var(--cmp-2); }
.ychart { touch-action: pan-y; cursor: crosshair; }
.ychart text { font-size: 10px; fill: var(--text-3); }
.ychart text.y-r { fill: var(--amber); }
.y-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.y-fact { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 9px; min-width: 0; }
.y-fact span { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-fact b { font-size: 13px; font-weight: 500; white-space: nowrap; }
.y-corr { display: grid; gap: 12px; }
.y-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.y-row .n { font-size: 12.5px; color: var(--text-2); }
.y-row .r { text-align: right; font-weight: 600; font-size: 13px; }
.y-row .say { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); margin: -4px 0 0; }
.y-meter { position: relative; height: 18px; }
.y-meter .track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line); border-radius: 1px; }
.y-meter .mid { position: absolute; left: 50%; top: 3px; width: 1px; height: 12px; background: var(--text-3); opacity: .5; }
.y-meter .fill { position: absolute; top: 7px; height: 4px; border-radius: 2px; background: var(--accent); }
.y-meter .dot { position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.y-scale { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; gap: 10px; font-size: 10.5px; color: var(--text-3); }
.y-scale div { display: flex; justify-content: space-between; }
.y-none { font-size: 12px; color: var(--text-3); background: var(--chip); border-radius: 6px; padding: 8px 10px; }
.chart-empty.sm { height: 64px; }
.y-tabs { display: flex; gap: 4px; margin: 14px 0 6px; flex-wrap: wrap; }
.y-tabs button { font-size: 12px; padding: 3px 9px; border-radius: 999px; color: var(--text-2); border: 1px solid var(--line); }
.y-tabs button:hover { background: var(--hover); color: var(--text); }
.y-tabs button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .y-meter .dot, .y-meter .fill { transition: left 200ms ease, width 200ms ease; } }
@media (max-width: 760px) {
  /* Phones have room for one fund and a short "10-yr 5.24%"; the change is
     in the panel and the tooltip. The "At close" chip steps aside for it:
     the fund's tooltip still says whether its % is the close. */
  .idx-strip > .idx-yield { display: inline-flex; }
  .idx-strip > .idx ~ .idx:not(.idx-yield), .idx-yield .y-word, .idx-yield .y-chg, .idx-strip > .idx-when { display: none; }
  .y-row, .y-scale { grid-template-columns: 80px minmax(0, 1fr) 42px; gap: 8px; }
  .y-fact { padding: 6px 7px; }
}

/* ---------- Preferences (#292) ---------- */
.pf { display: grid; gap: 16px; margin-top: 16px; max-width: 880px; }
/* Wide screens: two columns instead of one pinned left with the right half
   empty (tmpyapp#352). Full width would put each label far from its
   control; two columns keep rows readable and halve the scroll. Cards in a
   row stretch to one height so their edges line up. */
@media (min-width: 1200px) { .pf { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-card { padding: 6px 20px 8px; }
.pf-card h2 { margin: 12px 0 4px; font-size: 16px; font-weight: 600; }
.pf-card h2 small { font-size: 12.5px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line-2); }
.pf-card h2 + .pf-row, .pf-card h2 + div > .pf-row { border-top: 0; }
.pf-lbl { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pf-lbl small { font-size: 12px; font-weight: 400; color: var(--text-2); line-height: 1.4; }
.pf-note { margin: 4px 0 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 70ch; }
/* Radio buttons drawn as a segmented control, the same look as .seg1. */
.pf-seg { display: inline-flex; flex-wrap: wrap; background: var(--chip); border-radius: 8px; padding: 3px; gap: 2px; }
.pf-seg label { position: relative; }
.pf-seg input, .pf-theme input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pf-seg span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.pf-seg span:hover { color: var(--text); }
.pf-seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04); }
.pf-seg input:focus-visible + span, .pf-theme input:focus-visible ~ .pf-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pf-dot + .pf-dot { margin-left: -3px; }
.gr-up { background: #0D7F48; } .gr-down { background: #D0343B; }
.bo-up { background: #1D5FC4; } .bo-down { background: #B45309; }
.pf-sel { height: 32px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 0 8px; font-size: 13px; }
.pf-pair { display: flex; gap: 8px; flex-wrap: wrap; }
/* Theme: a small picture of each choice. The pictures use fixed colours on
   purpose: they show the other theme, not the current one. */
.pf-themes { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-theme { display: grid; justify-items: center; gap: 6px; cursor: pointer; position: relative; }
.pf-theme .pf-sw { transition: box-shadow 120ms ease; }
.pf-theme input:checked ~ .pf-sw { box-shadow: 0 0 0 2px var(--accent); }
.pf-tl { display: grid; justify-items: center; font-size: 12.5px; color: var(--text-2); }
.pf-theme input:checked ~ .pf-tl { color: var(--text); font-weight: 600; }
.pf-tl small { font-size: 11px; font-weight: 400; color: var(--text-3); }
.pf-sw { position: relative; display: block; width: 92px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.pf-sw i { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; }
.pf-sw b { position: absolute; left: 26px; right: 8px; height: 10px; border-radius: 3px; }
.pf-sw b:first-of-type { top: 9px; } .pf-sw b + b { top: 25px; right: 28px; }
.pf-sw em { position: absolute; left: 26px; bottom: 8px; width: 22px; height: 8px; border-radius: 3px; }
.pf-sw-light { background: #F5F6F8; } .pf-sw-light i { background: #0F1B3D; } .pf-sw-light b { background: #FFFFFF; box-shadow: 0 0 0 1px #E4E7EC; } .pf-sw-light em { background: #2457F5; }
.pf-sw-dark { background: #0A0E15; border-color: #222A38; } .pf-sw-dark i { background: #070B14; } .pf-sw-dark b { background: #10161F; box-shadow: 0 0 0 1px #222A38; } .pf-sw-dark em { background: #5B84FF; }
.pf-sw-system { display: flex; }
.pf-sw-system > .pf-sw { width: 50%; height: 100%; border: 0; border-radius: 0; flex: none; }
/* Simple | Pro (tmpyapp#633): at the right of the page head, under the
   title on a phone. */
.pf-view { margin-left: auto; }
.pf-view .pf-seg span { min-width: 64px; justify-content: center; }
#pf-nset > .fld:first-of-type { margin-top: 4px; }
#pf-nset { padding-bottom: 12px; }
.ns-digest { display: inline-flex; flex-wrap: wrap; }
@media (max-width: 560px) {
  .pf-card { padding: 4px 14px 6px; }
  .pf-seg { display: flex; width: 100%; }
  .pf-seg label { flex: 1 1 auto; }
  .pf-seg span { width: 100%; justify-content: center; padding: 0 8px; }
  .pf-themes { width: 100%; justify-content: space-between; }
  .pf-sw { width: 86px; }
}

/* Density (#292): Compact is the phone app's "List style: Compact". */
:root[data-density="compact"] .tr { min-height: 40px; }
:root[data-density="compact"] .td { padding-top: 3px; padding-bottom: 3px; }
:root[data-density="compact"] .thr { height: 42px; padding-top: 8px; }
:root[data-density="compact"] .mrow { padding-top: 5px; padding-bottom: 5px; }

/* Up/down colours (#292): blue/orange for red-green colour blindness. Text
   colours pass 4.5:1 on both surfaces: light #1D5FC4 5.6:1, #B45309 4.6:1
   on --bg; dark #5AA2FF 7.0:1, #F59E0B 8.5:1 on --surface. */
:root[data-updown="blue-orange"] { --up: #1D5FC4; --down: #B45309; --up-fill: rgba(29, 95, 196, .08); --down-fill: rgba(180, 83, 9, .08); }
@media (prefers-color-scheme: dark) { :root[data-updown="blue-orange"]:not([data-theme="light"]) { --up: #5AA2FF; --down: #F59E0B; --up-fill: rgba(90, 162, 255, .10); --down-fill: rgba(245, 158, 11, .10); } }
:root[data-theme="dark"][data-updown="blue-orange"] { --up: #5AA2FF; --down: #F59E0B; --up-fill: rgba(90, 162, 255, .10); --down-fill: rgba(245, 158, 11, .10); }
:root[data-updown="blue-orange"] #page-sectors, :root[data-updown="blue-orange"] .ov-mini { --hm-up: #1D5FC4; --hm-down: #B45309; }
@media (prefers-color-scheme: dark) { :root[data-updown="blue-orange"]:not([data-theme="light"]) #page-sectors, :root[data-updown="blue-orange"]:not([data-theme="light"]) .ov-mini { --hm-up: #2F6FD0; --hm-down: #B8620A; } }
:root[data-theme="dark"][data-updown="blue-orange"] #page-sectors, :root[data-theme="dark"][data-updown="blue-orange"] .ov-mini { --hm-up: #2F6FD0; --hm-down: #B8620A; }

/* Reduce motion (#292): the same as the device setting, on request. It also
   takes away Sectors' Play, which is an animation and nothing else. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
:root[data-motion="reduce"] .sec-playrow { display: none; }

/* ---------- Charts (#charts, tmpyapp#300) ----------
   One screen, no scrolling: the page fills the main area and the grid takes
   what the header and bar leave (no fixed tile heights, no empty band). */
.main:has(> #page-charts:not([hidden])) { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 12px; }
.main:has(> #page-charts:not([hidden])) > .site-foot { display: none; }
#page-charts { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.ch-head { gap: 10px 14px; }
.ch-date { font-size: 17px; font-weight: 600; padding-left: 14px; border-left: 1px solid var(--line); }
.ch-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; background: var(--chip); color: var(--text-2); white-space: nowrap; }
.ch-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ch-pill[data-tone="live"] { background: var(--up-fill); color: var(--up); }
.ch-pill[data-tone="amber"] { background: var(--amber-tint); color: var(--amber); }
.ch-pill[data-tone="grey"] { background: var(--chip); color: var(--text-2); }
.ch-pill[data-tone="wait"] i { animation: none; opacity: .5; }
.ch-note { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); position: relative; }
.ch-note-i { color: var(--text-3); }
.ch-set-btn { width: 28px; height: 28px; }
.ch-pop { z-index: 30; }
.ch-set { width: 320px; top: 34px; }
.ch-set .check { margin-top: 0; color: var(--text); }
.ch-pop-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.ch-pop .tp-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px 0; }
.ch-pop .hint { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.ch-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--chip); color: var(--text); }
.ch-banner svg { color: var(--text-3); flex: none; }
.ch-banner[data-tone="amber"] { background: var(--amber-tint); color: var(--amber); }
.ch-banner[data-tone="amber"] svg { color: var(--amber); }

.ch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Full screen (tmpyapp#353): desktop only; the board takes the whole window. */
.ch-fs { display: inline-flex; align-items: center; gap: 4px; }
.ch-fs .btn { gap: 6px; }
@media (max-width: 899px), (pointer: coarse) and (not (any-pointer: fine)) { .ch-fs { display: none; } }
body.pulse-full .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
body.pulse-full .shell > .rail, body.pulse-full .shell > .topbar, body.pulse-full .shell > .context { display: none; }
body.pulse-full .shell > .app { grid-column: 1; grid-row: 1; }
.ch-anchor { position: relative; }
.ch-board-btn { gap: 6px; }
.ch-board-btn b { font-weight: 600; }
.ch-board-btn .muted { font-size: 12.5px; }
.ch-unsaved { font-size: 11px; color: var(--amber); background: var(--amber-tint); border-radius: 4px; padding: 0 6px; }
.ch-boards { left: 0; right: auto; width: 290px; }
/* Share: the picture's preview, then what to do with it. */
.ch-share { width: 440px; max-height: none; }
.sh-prev { aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.sh-prev img { display: block; width: 100%; height: 100%; }
.sh-prev .hint { padding: 12px; text-align: center; }
.sh-url { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); min-width: 0; }
.sh-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.sh-acts .btn { justify-content: center; }
.sh-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--text-2); }
.sh-opts .linkbtn { margin-left: auto; }
.ch-board-list { list-style: none; margin: 8px 0 0; padding: 0 6px; max-height: 260px; overflow: auto; }
.ch-board-list button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 6px; text-align: left; font-size: 13px; }
.ch-board-list button:hover { background: var(--hover); }
.ch-board-list button[aria-current="true"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.ch-name { display: flex; gap: 6px; padding: 8px 14px 0; }
.ch-name .txt { flex: 1; min-width: 0; height: 30px; }
.ch-board-acts { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px 12px; border-top: 1px solid var(--line-2); margin-top: 8px; }
.linkbtn.danger { color: var(--down); }
.ch-mode button { min-width: 76px; }
.ch-layouts { display: flex; gap: 2px; padding: 3px; background: var(--chip); border-radius: 8px; }
.ch-layouts button { width: 30px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); }
.ch-layouts svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.ch-layouts button:hover:not(:disabled) { color: var(--text); }
.ch-layouts button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.ch-layouts button:disabled { opacity: .35; cursor: not-allowed; }
.ch-layouts button[hidden] { display: none; }
.ch-add { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border: 1.5px dashed var(--accent); border-radius: 7px; color: var(--accent); background: var(--surface); flex: 0 1 230px; min-width: 150px; }
.ch-add input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 13px; color: var(--text); }
.ch-add input::placeholder { color: var(--accent); }
.ch-add kbd { font: 500 11px var(--font); color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.ch-add-pop { top: 38px; left: 0; right: auto; width: 320px; }
.ch-hits { list-style: none; margin: 0; padding: 6px; }
.ch-hits li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ch-hits li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ch-hits li em { font-style: normal; font-size: 12px; }
.ch-hits li[aria-selected="true"], .ch-hits li:hover { background: var(--hover); }
.ch-hits li.none { display: block; color: var(--text-3); cursor: default; }
.ch-follow { padding: 10px 12px 12px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; }
.ch-follow .fld { margin: 0 0 2px; }
.ch-opt { text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.ch-opt:hover:not(:disabled) { background: var(--hover); }
.ch-opt:disabled { color: var(--text-3); }
.ch-wl-opt { font-weight: 600; margin-bottom: 4px; }
.dyn-pill { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 7px; border-radius: 8px; color: var(--accent); background: var(--accent-tint); }
.btn-primary .dyn-pill { color: var(--accent-ink); background: rgba(255, 255, 255, .22); }
.ch-opt:disabled .dyn-pill { color: var(--text-3); background: var(--chip); }
.ch-full { margin: 10px 12px 0; padding: 8px 10px; border-radius: 6px; background: var(--amber-tint); color: var(--amber); font-size: 12.5px; font-weight: 500; }
.ch-count { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ch-count b { color: var(--text); }
.ch-strip { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-size: 12.5px; }
.ch-strip button { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px; color: var(--text-2); }
.ch-strip button:hover { background: var(--hover); }
.ch-strip button[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
.ch-strip button.big { box-shadow: inset 0 -2px 0 var(--accent); }

.ch-grid { flex: 1; min-height: 0; display: grid; gap: 10px; }
.ch-grid.simple { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.ch-grid.empty { place-items: center; }
.ch-empty { max-width: 460px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.ch-empty p { margin: 0; color: var(--text-2); font-size: 13px; }
.ch-empty kbd { font: 600 12px var(--font); color: var(--accent); }
.ch-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }

/* A Simple tile: symbol, Vol · RVol and price; name, tags and % today; the chart. */
.ct { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 6px; cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
.ct:hover { border-color: var(--accent); }
.ct:focus-visible { outline-offset: -2px; }
.ct-h { display: grid; gap: 1px; }
.ct-r1, .ct-r2 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.ct-sym { font-size: 14.5px; font-weight: 700; letter-spacing: .1px; }
.ct-vv { font-size: 11.5px; color: var(--text-3); background: var(--chip); border-radius: 4px; padding: 0 5px; flex: none; }
.ct-vv em { font-style: normal; font-weight: 600; color: var(--text); }
.ct-vv em.hot { color: var(--accent); }
.ct-px { margin-left: auto; font-size: 14.5px; font-weight: 600; }
.ct-r2 { font-size: 12px; color: var(--text-2); }
/* A long name (an ETF's "Leverage Shares 2X Long …") gives way before the
   tags do: it shrinks a hundred times faster, so a "Following Gainers #12"
   pill stays whole instead of running off the tile (owner, 2026-10-02). */
.ct-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 100 auto; }
.ct-tags { display: flex; gap: 4px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.ct-tags .ct-tag { flex: none; }
.ct-tag { font-size: 10.5px; font-weight: 600; padding: 0 5px; border-radius: 4px; line-height: 16px; white-space: nowrap; }
.ct-tag.follow { color: var(--accent); background: var(--accent-tint); }
.ct-tag.ev { color: var(--up); background: var(--up-fill); }
.ct-pct { margin-left: auto; font-weight: 600; font-size: 12.5px; flex: none; }
.ct-st { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--text-2); flex: none; }
.ct-st + .ct-pct { margin-left: 6px; }
.ct-r2 .ct-st { margin-left: auto; }
.ct-st[data-k="amber"] { color: var(--amber); }
.ct-st[data-k="quiet"] { color: var(--text-3); }
.ct-st[data-k="close"] { color: var(--text-3); background: var(--chip); border-radius: 4px; padding: 0 5px; }
.ct[data-st="stale"] :is(.ct-px, .ct-pct, .ct-chg, .ct-bpx) { color: var(--flat); }
.ct[data-st="amber"] :is(.ct-px, .ct-pct, .ct-chg, .ct-bpx) { color: var(--amber); }
.ct[data-st="amber"] { background: linear-gradient(var(--amber-tint), var(--amber-tint)) padding-box; background-color: var(--surface); }
.ct-plot { flex: 1; min-height: 0; position: relative; margin-top: 4px; overflow: hidden; }
.ct-plot > svg { position: absolute; inset: 0; }
.ct-msg { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; gap: 2px; text-align: center; font-size: 12.5px; color: var(--text-2); padding: 0 8px; }
.ct-msg b { font-weight: 600; color: var(--text); }
.ct-msg.over { inset: 0 40px 16px 0; }
.ct-msg.over b { background: var(--surface); padding: 2px 8px; border-radius: 6px; }
.ct-load { position: absolute; inset: 8px 44px 18px 0; border-radius: 6px; background: linear-gradient(90deg, var(--line-2), var(--hover), var(--line-2)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
/* The day's change on the chart (tmpyapp#462), large, where it covers no part
   of the line and not the hover tools (tile.js placeChange sets left/top; it
   stays invisible until placed). It takes no clicks, so the tools still work. */
.ct-ov { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; white-space: nowrap; }
.ct-ov.sm { font-size: 17px; }
.ct-ov[data-at] { visibility: visible; }
/* Phone: price and change in a band above the plot, which is drawn below it. */
.ct-band { position: absolute; top: 0; left: 0; right: 0; height: 20px; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.ct-bpx { font-size: 13px; font-weight: 700; color: var(--text); }
.ct-band .ct-chg { font-size: 12.5px; font-weight: 600; }
.ct-band.tight { gap: 4px; }
.ct-band.tight .ct-bpx { font-size: 11.5px; }
.ct-band.tight .ct-chg { font-size: 11px; }
.ct-plot.band .ct-msg { top: 20px; }
.ct-plot.band .ct-load { top: 28px; }
.ch-grid.adv .ct-load { position: relative; inset: auto; height: 100%; }
.ct-tools { position: absolute; top: 34px; right: 50px; display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity 120ms; }
.ct:hover .ct-tools, .ct:focus-within .ct-tools { opacity: 1; pointer-events: auto; }
.ct-tools button { width: 24px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: var(--text-2); }
.ct-tools button:hover { background: var(--hover); color: var(--text); }
.ct-tools svg { fill: currentColor; }
.ct-tools button[data-ct-adv] svg, .ct-tools button[data-ct-x] svg { fill: none; }

.ct.dragging { opacity: .5; }
.ct.drop { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.ct-ev { position: absolute; left: 10px; right: 56px; bottom: 22px; padding: 6px 9px; border-radius: 7px; background: var(--surface); border: 1px solid var(--up); font-size: 12px; line-height: 1.35; box-shadow: var(--shadow-pop); }
.ct-ev b { color: var(--up); font-weight: 600; }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 var(--up); border-color: var(--up); } 60% { box-shadow: 0 0 0 5px transparent; border-color: var(--up); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) { .ct.pulse { animation: ct-pulse 1.4s ease-out 1; } }

/* Advanced: 1, 2 side by side, 2 × 2, or one large and three small. */
.ch-grid.adv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ch-grid.adv.l-1x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-grid.adv.l-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ch-grid.adv.l-3p1 { grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ch-grid.adv.l-3p1 .cc.large { grid-row: 1 / span 3; }
.cc { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cc.small { cursor: pointer; }
.cc.small:hover { border-color: var(--accent); }
.cc-h { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; min-width: 0; font-size: 13px; }
.cc-sym { font-size: 14px; font-weight: 700; }
.cc-name { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-h em { font-style: normal; font-weight: 600; }
.cc-fresh { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-fresh[data-tone="amber"] { color: var(--amber); }
.cc-fresh[data-tone="grey"] { color: var(--text-2); font-weight: 600; }
.cc-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.cc-tf button { padding: 0 7px; }
.cc-tf-sel { height: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12px; font-weight: 600; padding: 0 4px; }
.cc-over { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 2px; }
.cc-full { width: 26px; height: 26px; }
.cc-body { position: relative; flex: 1; min-height: 0; }
.cc-canvas { position: absolute; inset: 0; }
.cc-band { position: absolute; top: 0; bottom: 28px; background: var(--session-band); pointer-events: none; z-index: 2; }
.cc-band span { position: absolute; bottom: 4px; right: 6px; font-size: 10.5px; color: var(--text-3); }
.cc.small .cc-band { bottom: 26px; }
.cc.small .cc-band span, .cc.small .cc-legend { display: none; }
.cc.small .cc-fresh[data-tone="live"] { display: none; }
.cc-legend { position: absolute; top: 6px; left: 8px; right: 70px; z-index: 3; font-size: 11.5px; color: var(--text-2); pointer-events: none; display: grid; gap: 2px; }
.cc-legend .term { pointer-events: auto; }
.cc-legend b { color: var(--text); }
.l-ohlc span, .l-ind > span { margin-right: 8px; white-space: nowrap; }
.l-ind { display: flex; flex-wrap: wrap; }
.l-vwap { color: var(--vwap); } .l-ema0 { color: var(--accent); } .l-ema1 { color: var(--cmp-3); } .l-rsi { color: var(--cmp-3); } .l-macd { color: var(--accent); }
.l-ind .muted { color: var(--text-3); }
.cc.small .cc-legend { font-size: 10.5px; }
/* Clear of the price scale on the right (60px), the time axis (28px) and the
   library's attribution logo in the bottom-left corner (35px wide, kept as its
   NOTICE asks): in a short small tile the centred note sat on the logo (QA #114). */
.cc-note { position: absolute; inset: 0 60px 28px 44px; display: grid; place-content: center; text-align: center; font-size: 13px; font-weight: 600; color: var(--text); z-index: 3; pointer-events: none; }
.ch-ind { width: 300px; }
.ch-ind .check, .ch-lines .check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ch-ind .check.sub { margin: -4px 0 2px 24px; font-size: 12px; color: var(--text-2); }
.ch-ns { display: flex; gap: 6px; margin: -4px 0 2px 24px; }
.ch-ns .txt.n { width: 62px; height: 26px; padding: 0 6px; }
.ch-scope { margin-bottom: 4px; }
.ch-lines { width: 260px; }

/* "+ Chart": on a Movers row on hover (always once on the board), and in the panel. */
.chart-add { font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
/* Over the symbol line's free end, so it never takes the name's room. */
.stock:has(> .chart-add.row) { position: relative; }
.chart-add.row { position: absolute; right: 0; top: 0; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--accent-track); background: var(--surface); opacity: 0; }
.tr:hover .chart-add.row, .chart-add.row:focus-visible { opacity: 1; }
.chart-add.row.on { opacity: 1; border-color: transparent; background: none; color: var(--text-3); font-weight: 500; font-size: 11px; padding-right: 0; }
.chart-add.hdr { flex: none; align-self: center; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--accent-track); font-size: 12px; }
.chart-add.hdr:hover { background: var(--accent-tint); }
.chart-add.hdr.on { color: var(--text-2); border-color: var(--line); font-weight: 500; }
@media (hover: none) { .chart-add.row:not(.on) { display: none; } }
/* The tray: how full the board is, from Movers. */
.ch-tray { position: sticky; bottom: 8px; z-index: 12; width: max-content; max-width: 100%; margin: 12px auto 0; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 13px; }
.ch-tray .linkbtn { font-size: 13px; font-weight: 600; }

@media (max-width: 1180px) {
  .ch-note #ch-note { display: none; }
  .ch-count { margin-left: 0; }
}
@media (max-width: 760px) {
  #page-charts { gap: 8px; }
  .ch-head h1 { font-size: 20px; }
  .ch-date, .ch-note-i { display: none; }
  .ch-strip.compact { font-size: 12px; }
  .ch-layouts, #ch-sort, .ch-count { display: none; }
  .ch-add { flex: 1 1 100%; order: 5; }
  .ch-add kbd { display: none; }
  .ch-add-pop, .ch-boards, .ch-set, .ch-ind, .ch-lines, .ch-share { position: fixed; left: 8px; right: 8px; top: 110px; width: auto; }
  .ch-grid { gap: 6px; }
  .ct { padding: 6px 7px 4px; border-radius: 8px; }
  .ct-sym, .ct-px { font-size: 13px; }
  .ct-vv { font-size: 10.5px; }
  .ct-r2 { font-size: 11px; }
  .ct-tags { display: none; }
  .ct-r2:empty { display: none; }
  .ct-r1 .ct-name { font-size: 11px; color: var(--text-2); }
  .ct-r1 .ct-st { margin-left: auto; font-size: 10.5px; }
  .ct-tools { display: none; }
  .ch-grid.adv.l-3p1, .ch-grid.adv.l-2x2, .ch-grid.adv.l-1x2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ch-grid.adv .cc:not(:first-child) { display: none; }
  .ch-grid.adv.l-3p1 .cc.large { grid-row: auto; }
  .cc-name, .cc-fresh { display: none; }
}

/* ---------- Market Flash: the day as a 15-second story (tmpyapp#476, js/flash.js) ----------
   The animations carry the figures (the line draws the session, bars split
   from zero, your stocks float to their move); the kind of day changes only
   --fl-acc, and only its strength: the card behind stays plain (#518). Every
   animated element waits for its frame's .on. */
/* The header's Today in 15s, beside the title: a story ring like the ones
   people know from other apps. While there's a story the reader hasn't
   watched (overview.js renderFlashBtn) the ring is in colour, beats twice
   and rests, with a soft ring going out like Sectors' Play, and says New.
   Watched, it goes quiet and grey until the next story (the close, the why). */
.ov-head .ov-flash { margin-left: auto; }
.ov-head .ov-today:not([hidden]) + .ov-flash { margin-left: 4px; }
.ov-flash { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); text-align: left; }
.ov-flash:hover:not(:disabled) { background: var(--hover); }
.ov-flash[hidden] { display: none; }
.fl-ring { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 2.5px; background: var(--line); }
.fl-ring svg { position: absolute; inset: 2.5px; width: calc(100% - 5px); height: calc(100% - 5px); padding: 11px 10px 11px 12px; border-radius: 50%; background: var(--surface); color: var(--accent); box-sizing: border-box; }
.ov-flash.fresh .fl-ring { background: conic-gradient(from 200deg, var(--accent), #f5b94a, var(--up), var(--accent)); }
.fl-btxt { display: flex; flex-direction: column; line-height: 1.2; }
.fl-btxt b { font-size: 14px; font-weight: 600; }
.fl-cap { font-size: 12px; color: var(--text-3); }
.fl-new { display: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); padding: 2px 7px; border-radius: 999px; }
.ov-flash.fresh .fl-new { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ov-flash.fresh .fl-ring { animation: fl-beat 2.4s ease-in-out infinite; }
  .ov-flash.fresh .fl-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: play-ring 2.4s ease-out infinite; pointer-events: none; }
}
@keyframes fl-beat { 0%, 36%, 100% { transform: scale(1); } 9% { transform: scale(1.09); } 18% { transform: scale(1); } 27% { transform: scale(1.07); } }
@media (max-width: 760px) { .ov-head .ov-flash { margin-left: 0; } .fl-cap { display: none; } }
body.fl-open { overflow: hidden; }
.fl-scrim { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 55%, rgba(0, 0, 0, .55)); backdrop-filter: blur(6px); animation: popin 180ms var(--ease-out); }
.fl-scrim[hidden] { display: none; }
.fl-story { --fl-acc: var(--up); position: relative; width: min(940px, 100%); height: min(580px, calc(100vh - 32px)); border-radius: 22px; overflow: hidden; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-pop); user-select: none; -webkit-user-select: none; }
.fl-story.paused *, .fl-story.paused *::before, .fl-story.paused *::after { animation-play-state: paused !important; }
/* A frame stepped to while paused jumps to its finished state: every
   animation fills "both", so a zero-length run lands on its last keyframe. */
.fl-frame.still, .fl-frame.still * { animation-duration: 0s !important; animation-delay: 0s !important; animation-play-state: running !important; }
.fl-prog { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 3; }
.fl-prog div { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); overflow: hidden; }
.fl-prog i { display: block; height: 100%; width: 0; background: var(--text); }
.fl-top { position: absolute; top: 24px; left: 16px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.fl-top b { color: var(--text); }
.fl-sp { flex: 1; }
.fl-x { border: 0; background: none; color: var(--text); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.fl-x:hover { background: var(--hover); }
.fl-paused { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--text-2); opacity: 0; transition: opacity .2s; }
.fl-story.paused .fl-paused { opacity: 1; }
.fl-frames { position: absolute; inset: 0; cursor: pointer; }
/* Desktop is landscape: the words on the left, the moving picture on the
   right. Below 760px it becomes the phone's portrait card, one column. */
.fl-frame { position: absolute; inset: 0; padding: 72px 48px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 44px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .25s; }
.fl-frame.cur { opacity: 1; visibility: visible; }
.fl-txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fl-vis { min-width: 0; }
.fl-solo { grid-column: 1 / -1; max-width: 640px; }
@media (max-width: 760px) {
  .fl-story { width: min(420px, 100%); height: min(760px, calc(100vh - 32px)); height: min(760px, calc(100dvh - 32px)); }
  .fl-frame { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 14px; padding: 78px 24px 64px; }
  .fl-frame.fl-takeaway { justify-content: flex-start; }
  .fl-frame.fl-takeaway .fl-links { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fl-frame.fl-takeaway .fl-links .pri, .fl-frame.fl-takeaway .fl-stamp, .fl-frame.fl-takeaway .fl-mine, .fl-frame.fl-takeaway .fl-invite { grid-column: 1 / -1; }
  .fl-frame.fl-takeaway .fl-link { padding: 10px 6px; font-size: 14px; }
  .fl-x { min-width: 40px; min-height: 40px; }
  .fl-nav button { width: 44px; height: 40px; }
  /* A full takeaway (money, four facts, the driver and its news) can be
     taller than a phone: it scrolls rather than run under the controls. */
  .fl-frame.fl-takeaway { overflow-y: auto; }
  .fl-srow { grid-template-columns: 116px 1fr; }
}
.fl-nav { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.fl-nav button { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 14px; }
.fl-nav button:hover { background: var(--hover); color: var(--text); }

.fl-frame .a { opacity: 0; }
.fl-frame.on .a { animation: fl-rise .55s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes fl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fl-frame .fl-pop { opacity: 0; }
.fl-frame.on .fl-pop { animation: fl-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0s); }
@keyframes fl-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fl-grow { to { transform: scaleX(1); } }

.fl-chip { align-self: flex-start; display: inline-block; font-size: 15px; font-weight: 700; color: var(--text); background: var(--chip); border-radius: 999px; padding: 5px 12px; }
.fl-ai { margin-left: 6px; font-size: 13px; color: var(--accent); background: var(--accent-tint); }
.fl-big { font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--fl-acc); }
.fl-h { font-size: 22px; font-weight: 600; line-height: 1.2; }
.fl-muted { color: var(--text-2); }
.fl-small { font-size: 12.5px; }
.fl-strong { font-weight: 600; }
/* Nasdaq 100 and small companies: bold, well below the S&P 500's number (#518). */
.fl-sub { display: flex; flex-direction: column; gap: 4px; font-size: 17px; font-weight: 600; color: var(--text); }
.fl-l { font-weight: 500; color: var(--text-2); }
.fl-gen { font-size: 13px; font-weight: 600; color: var(--text-2); }
.fl-gen::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-acc); margin-right: 7px; vertical-align: 1px; }
.fl-gentop { font-weight: 600; color: var(--text-2); }
.fl-other { font-size: 14px; line-height: 1.35; color: var(--text); }
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-mini { display: inline-flex; gap: 6px; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--chip); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fl-warn { align-self: flex-start; font-size: 12.5px; color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: 8px; padding: 6px 10px; }
/* Before the open: the biggest premarket movers, compact rows (#521). */
.fl-mvr { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.fl-mvn { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-mvp { font-size: 16px; font-weight: 600; }
.fl-mvr .fl-logo { min-width: 40px; height: 32px; font-size: 11px; }
.fl-invite { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-tint); font-size: 14px; }
.fl-invb { height: 34px; padding: 0 14px; border-radius: 17px; display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 600; white-space: nowrap; text-decoration: none; }

/* frame 1: the session draws itself, the counter climbs with it */
.fl-chart { width: 100%; height: clamp(150px, 30vh, 260px); overflow: visible; }
.fl-ref { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.fl-ln { fill: none; stroke: var(--fl-acc); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fl-frame.on .fl-ln { animation: fl-draw 1.7s linear .35s both; }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
.fl-area { fill: color-mix(in srgb, var(--fl-acc) 16%, transparent); opacity: 0; }
.fl-frame.on .fl-area { animation: fl-fade .6s ease 2s both; }
@keyframes fl-fade { to { opacity: 1; } }
.fl-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.fl-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.fl-idx { width: 100%; font-size: 13px; color: var(--text-2); }
.fl-counter { font-size: clamp(42px, 5vw, 60px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fl-usd { font-size: 19px; font-weight: 600; color: var(--fl-acc); }

/* frame 2: why */
.fl-why { margin: 0; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.35; font-weight: 500; text-wrap: pretty; }

/* frame 3: sectors split from zero, the biggest stock, breadth */
.fl-sectors { display: flex; flex-direction: column; gap: 8px; }
.fl-srow { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; font-size: 13px; color: var(--text); text-decoration: none; border-radius: 6px; }
.fl-srow:hover { background: var(--hover); }
.fl-strack { position: relative; height: 20px; }
.fl-strack::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.fl-sbar { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; transform: scaleX(0); }
.fl-sbar.pos { left: 50%; background: var(--up); transform-origin: left; }
.fl-sbar.neg { right: 50%; background: var(--down); transform-origin: right; }
.fl-frame.on .fl-sbar { animation: fl-grow .7s var(--ease-out) both; animation-delay: var(--d, 0s); }
.fl-sval { position: absolute; top: 0; line-height: 20px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fl-star { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; color: var(--text); font: inherit;
  background: color-mix(in srgb, var(--fl-acc) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--fl-acc) 35%, var(--line)); }
.fl-star b { display: block; font-size: 16px; }
.fl-logo { flex: none; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--chip); font-weight: 700; font-size: 12px; }
.fl-pips { display: flex; gap: 5px; margin-top: 6px; }
.fl-pip { width: 16px; height: 16px; border-radius: 4px; background: var(--chip); }
.fl-frame.on .fl-pip.hit { animation: fl-fill-up .25s ease both; animation-delay: var(--d, 0s); }
.fl-frame.on .fl-pip.hit.down { animation-name: fl-fill-down; }
@keyframes fl-fill-up { to { background: var(--up); } }
@keyframes fl-fill-down { to { background: var(--down); } }

/* frame 4: IPOs, today and the next trading day (#518) */
.fl-ipos { display: flex; flex-direction: column; gap: 10px; }
.fl-iph { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.fl-ipr { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.fl-ipmid { flex: 1; min-width: 0; }
.fl-ipmid b { display: block; font-size: 16px; }
.fl-sec { display: inline-block; margin-top: 3px; font-size: 11.5px; color: var(--text-2); background: var(--chip); border-radius: 999px; padding: 1px 8px; }
.fl-ipr-r { text-align: right; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.fl-ipm { font-size: 17px; font-weight: 600; }
.fl-ipst { font-size: 12px; font-weight: 600; color: var(--text); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 9px; }

/* frame 5: the takeaway, then into Overview */
.fl-take { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; font-weight: 600; color: var(--fl-acc); text-wrap: balance; }
.fl-takeaway .fl-muted { margin: 0; font-size: 14px; line-height: 1.45; }
.fl-driver { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); font-size: 15.5px; line-height: 1.45; color: var(--text); }
.fl-driver b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fl-mine { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; }
.fl-news { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.fl-news a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.fl-money { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.fl-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; line-height: 1.35; color: var(--text); }
.fl-facts li { position: relative; padding-left: 16px; }
.fl-facts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-acc); }
.fl-links { display: flex; flex-direction: column; gap: 10px; }
.fl-link { display: block; text-align: center; text-decoration: none; padding: 11px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.fl-link:hover { background: var(--hover); }
.fl-link.pri { background: var(--text); color: var(--bg); border-color: var(--text); }
.fl-stamp { text-align: center; font-size: 11.5px; color: var(--text-3); }

/* Market Flash sharing (js/flashshare.js): the panel opens over the paused
   story, on the right on desktop and across the card on a phone. */
body.fl-open .toast { z-index: 130; }
/* The story is paused under the panel; the panel's own animations aren't. */
.fl-story.paused .fs-panel, .fl-story.paused .fs-panel * { animation-play-state: running !important; }
.fl-story:has(.fs-panel:not([hidden])) .fl-paused { opacity: 0; }
.fl-sh { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 6px; }
.fl-sh:hover { background: var(--hover); }
.fl-sh[hidden] { display: none; }
.fs-panel { position: absolute; z-index: 5; right: 18px; top: 58px; bottom: 18px; width: min(430px, calc(100% - 36px)); overflow: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); cursor: default; animation: popin 160ms var(--ease-out); }
.fs-panel[hidden] { display: none; }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.fs-prev { position: relative; aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.fs-prev .ct-load { inset: 0; border-radius: 0; }
.fs-prev img { display: block; width: 100%; height: 100%; }
.fs-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fs-acts .btn { height: 36px; }
.fs-acts .fs-wide { grid-column: 1 / -1; }
.fs-wa { color: #128C4A; }
:root[data-theme="dark"] .fs-wa { color: #25D366; }
.fs-panel .hint b { color: var(--text-2); font-weight: 600; }
.fl-sharelink { color: var(--accent); }
@media (max-width: 760px) { .fs-panel { left: 12px; right: 12px; width: auto; top: 54px; bottom: 12px; } }

/* ---------- Live charts: moving tiles, placing from the strip, hover price (tmpyapp#498) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-strip [data-chip] { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ch-strip .ch-n { font-style: normal; font-size: 9.5px; font-weight: 700; margin-left: 3px; padding: 0 3px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); vertical-align: 1px; }
.ch-strip [data-chip].picked { color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.ch-strip [data-chip].picked .ch-n { background: var(--accent-ink); color: var(--accent); }
.ch-strip [data-chip].dragging { opacity: .4; }
.ch-grid.simple .ct { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ch-grid.dragging .ct:not(.lifted) { transition: transform 200ms var(--ease-out), border-color 150ms; }
.ch-grid.dragging .ct-tools { opacity: 0 !important; pointer-events: none !important; }
.ct.lifted { z-index: 6; cursor: grabbing; border-color: var(--accent); box-shadow: var(--shadow-pop); transition: scale 150ms var(--ease-out), left 150ms var(--ease-out), top 150ms var(--ease-out); scale: 1.035; transform-origin: var(--gx, 50%) var(--gy, 50%); }
.ct.lifted.mini { scale: .28; opacity: .92; left: var(--ox, 0); top: var(--oy, 0); }
.ct.settling { transition: translate 220ms var(--ease-out), transform 220ms var(--ease-out), scale 220ms var(--ease-out), left 220ms var(--ease-out), top 220ms var(--ease-out) !important; }
.ct.kd-lifted { z-index: 6; border-color: var(--accent); box-shadow: var(--shadow-pop); transition: transform 160ms var(--ease-out); }
.ch-grid.no-anim .ct { transition: none !important; }
.ct { scale: 1; }
.ch-ph { position: fixed; z-index: 0; pointer-events: none; border: 2px dashed var(--accent-track); border-radius: 10px; background: var(--surface-2); transition: left 200ms var(--ease-out), top 200ms var(--ease-out); }
.ch-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: grid; gap: 1px; padding: 4px 9px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-pop); font-size: 12.5px; white-space: nowrap; }
.ch-ghost span { font-size: 11px; opacity: .9; }
.ch-ghost span:empty { display: none; }
.ch-ins { position: fixed; z-index: 50; width: 4px; border-radius: 2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.ch-grid.placing .ct, .ch-grid.placing .cc { cursor: copy; position: relative; }
.ct-place { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 13px; color: var(--text); pointer-events: none; }
.ct-place kbd { font: inherit; font-size: 11px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.ct-target { border-color: var(--accent); }
.ct-target .ct-place { border-style: solid; background: color-mix(in srgb, var(--accent-tint) 85%, transparent); }
.ct-in { animation: ct-in 180ms var(--ease-out); }
@keyframes ct-in { from { opacity: 0; } to { opacity: 1; } }
.ct.tools-on .ct-tools { opacity: 1; pointer-events: auto; }
.ct.hovering .ct-ov { opacity: .15; }
.ct-ov { transition: opacity 120ms; }
.ct-hv { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hv-x { position: absolute; top: 0; width: 1px; background: var(--text-3); opacity: .7; }
.hv-x.faint { opacity: .3; }
.hv-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.hv-box { position: absolute; display: grid; gap: 1px; padding: 3px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 11.5px; line-height: 1.35; white-space: nowrap; color: var(--text); }
.hv-box b { font-weight: 600; margin: 0 2px; }
.hv-box .hv-t { color: var(--text-2); }
.hv-gap { color: var(--text-2); }
.cc-legend .l-now { font-weight: 600; color: var(--text); }
.toast-act { margin-left: 10px; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .ch-grid.dragging .ct:not(.lifted), .ct.settling, .ct.lifted, .ct.kd-lifted, .ch-ph { transition: none !important; }
  .ct-in { animation: none; }
}
/* A tile dragged over the strip (tmpyapp#498): a stock waiting there takes its place; empty space sends it back. */
.ch-strip { position: relative; }
.ch-strip [data-chip].drop { color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ch-strip.drop-hide { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; }
.ch-strip [data-chip].drop[data-hint]::after, .ch-strip.drop-hide[data-hint]::after { content: attr(data-hint); position: absolute; top: -26px; left: 0; padding: 2px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 11.5px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 7; }
.ch-strip [data-chip].drop[data-hint]::after { left: 50%; transform: translateX(-50%); }

/* Your account (tmpyapp#583): avatar menu at the top right, and the #profile page. */
.acct-wrap { position: relative; }
.acct-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.acct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-menu { position: absolute; right: 0; top: 40px; z-index: 45; width: 230px; padding: 6px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); animation: popin 160ms var(--ease-out); }
.acct-who { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct-who .acct-id { min-width: 0; }
.acct-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; flex: none; }
.acct-who b, .acct-who small { display: block; overflow-wrap: anywhere; }
.acct-who small { color: var(--text-3); font-size: 12.5px; }
.acct-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--text); font-size: 14px; text-decoration: none; }
.acct-menu a:hover { background: var(--hover); text-decoration: none; }
.acct-menu a svg { color: var(--text-2); }
.acct-menu a[href^="/cdn-cgi"] { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.pr-head { display: flex; align-items: center; gap: 20px; padding: 4px 0 8px; }
.pr-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.pr-head p { margin: 2px 0 0; }
.pr-av { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; font-weight: 600; display: grid; place-items: center; flex: none; }
.pr-out { text-decoration: none; border: 1px solid var(--down, #C2362F); color: var(--down, #C2362F); border-radius: 8px; padding: 7px 14px; font-weight: 600; white-space: nowrap; }
.pr-out:hover { text-decoration: none; background: var(--hover); }
.gl-long h4 { margin: 12px 0 4px; font-size: 13px; }
.gl-long p, .gl-long li { color: var(--text-2); font-size: 12.5px; margin: 4px 0; }
.gl-long li { padding: 0; }
.gl-long ul { margin: 4px 0; padding-left: 18px; }
.gl-long ol { margin: 4px 0; padding-left: 20px; }
.gl-long .gl-tip { background: var(--bg); border-left: 3px solid var(--flat); border-radius: 6px; padding: 8px 10px; }
.gl-long b { color: var(--text); }

/* The long text's own lists are not dropdown rows (the row styles above apply to every li inside the list). */

/* "what is …" in the search box: topic names, and the meaning of the highlighted one in a strip (list) or a pane (split). */
#search-list li.nl-hwrap, #search-list li.nl-split { display: block; padding: 0; margin: 0; cursor: default; background: none; border-radius: 0; }
#search-list .nl-head { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.hn-list { padding: 2px 2px 4px; }
.hn-list.cols { column-count: 2; column-gap: 12px; }
.nl-gh { break-after: avoid; padding: 8px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.nl-hn { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; break-inside: avoid; color: var(--text); font-size: 13.5px; }
.nl-hn[aria-selected="true"], .nl-hn:hover { background: var(--accent-tint, var(--hover)); }
.nl-hn .hn-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nl-hn .hn-n b { font-weight: 700; color: var(--accent); }
.nl-hn .hn-tag { flex: none; font-size: 11px; color: var(--text-3); }
.nl-hn.nl-all .hn-n { color: var(--accent); font-weight: 600; }
.nl-prev { border-top: 1px solid var(--line); background: var(--bg); margin: 2px -4px -4px; padding: 10px 14px 10px; border-radius: 0 0 10px 10px; }
.np-h { display: flex; align-items: baseline; gap: 8px; }
.np-h strong { font-size: 13.5px; }
.np-c { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.np-s { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.np-long { margin-top: 2px; max-height: min(50vh, 420px); overflow-y: auto; }   /* continues the text above: no divider */
.np-long p, .np-long li { color: var(--text-2); font-size: 12.5px; line-height: 1.45; margin: 3px 0; }
.np-long h4 { margin: 8px 0 2px; font-size: 12.5px; }
.np-long ul, .np-long ol { margin: 4px 0; padding-left: 18px; }
#search-list .np-long li, #search-list .np-long li:hover { display: list-item; padding: 0; border-radius: 0; background: none; cursor: default; color: var(--text-2); }   /* the dropdown's row styles apply to every li in it */
#search-list .np-long ul, #search-list .np-long ol { margin: 4px 0; padding-left: 18px; list-style-position: outside; }
#search-list .np-long .gl-tip { background: var(--bg); border-left: 3px solid var(--flat); border-radius: 6px; padding: 6px 8px; }
.np-a { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.np-more, .np-go { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; }
.np-go { margin-left: auto; }
.np-k { margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
#search-list li.nl-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sp-l { border-right: 1px solid var(--line); max-height: min(60vh, 420px); overflow-y: auto; }
.sp-r { background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 0 10px 10px 0; max-height: min(60vh, 420px); overflow-y: auto; }
.sp-r h3 { margin: 0; font-size: 16px; }
.sp-r .np-go { margin: 10px 0 0; padding: 5px 11px; border: 1px solid var(--accent); border-radius: 8px; }
.sp-r .np-more { margin-top: 6px; }
@media (max-width: 760px) { .hn-list.cols { column-count: 1; } }
/* A help picture is part of the short help: its own line, never in the middle of a sentence. */
.glossary li > .term-ex, .nl-prev .term-ex { display: block; width: fit-content; max-width: 100%; margin: 8px 0 4px; }
.np-kbd { font: inherit; font-size: 11px; line-height: 1; padding: 2px 5px; margin-left: -6px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); background: var(--bg); }
/* Resizing Site Help: no easing while the edge is held, and no grip on a phone-width window. */
body.help-resizing .shell, #glossary.resizing .dlg { transition: none; }
body.help-resizing { user-select: none; cursor: col-resize; }
@media (max-width: 600px) { #gl-grip { display: none; } }
/* "See also": the related topics, as a quiet row under the text. */
.gl-long .gl-see { margin: 12px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; }
.gl-long .gl-see b { margin-right: 8px; color: var(--text); }
.gl-long .gl-see .linkbtn { margin: 0; }

/* Benchmark table + compare widgets (bench.js, benchwidgets.js) */
.bn-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px 4px; font-size: 12px; color: var(--text-2); }
.bn-tools .ranges { margin-left: 0; }
.bn-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bn-t th { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: right; padding: 6px 10px; }
.bn-t th:first-child { text-align: left; }
.bn-t td { padding: 5px 10px; text-align: right; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.bn-t td small { display: block; font-size: 10.5px; font-weight: 500; }
.bn-t td.sym { text-align: left; } .bn-t td.sym b { display: block; } .bn-t td.sym span { font-size: 11px; color: var(--text-3); font-weight: 400; }
.bn-t tr[data-open] { cursor: pointer; } .bn-t tr[data-open]:hover { background: var(--hover); }
.bn-t tr.base td { background: var(--accent-tint); border-top: 0; } .bn-t tr.base td.sym b { color: var(--accent); }
.bn-empty { color: var(--text-3); font-size: 12px; padding: 8px 10px; text-align: left !important; }
.bn-foot { margin: 0; padding: 6px 10px 8px; font-size: 11px; color: var(--text-3); }
/* The one sentence above the table: what the count means. */
.bn-line { margin: 6px 0 8px; padding: 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); }
.bn-line a { white-space: nowrap; }
.bn-base { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.bn-base span { font-weight: 600; }
#search-list li.nl-bench { padding: 0; }
.ov-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.ov-w { padding: 12px; min-width: 0; } .ov-w-h { font-size: 14px; margin: 0 0 6px; }
.ov-w .bn-tools, .ov-w .bn-foot { padding-left: 0; padding-right: 0; }
/* Research: the two tools get room and targets a mouse can hit. */
.rs-widgets { margin-top: 20px; align-items: stretch; }
.ov-widgets.rs-widgets { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rs-widgets .ov-w { padding: 18px 20px; }
.rs-widgets .ov-w-h { font-size: 16px; margin-bottom: 4px; }
.rs-desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.rs-widgets .bn-line { padding: 0; font-size: 15px; }
.rs-widgets .bn-t td { font-size: 14px; padding: 7px 10px; } .rs-widgets .bn-t td.sym span { font-size: 12px; }
.rs-widgets .ranges { padding: 3px; border-radius: 8px; }
.rs-widgets .ranges button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.rs-widgets .cw-in input { height: 32px; width: 96px; font-size: 13.5px; }
.cw-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.cw-in input { width: 84px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); text-transform: uppercase; font: inherit; font-size: 12.5px; }
.cw-in span { color: var(--text-3); font-size: 12px; }
/* Sector rotation (Research): four corners, one dot per sector. */
.rs-rot { margin-top: 20px; padding: 18px 20px; }
.rs-rot .ov-w-h { font-size: 16px; margin-bottom: 4px; }
.rs-wi .ranges { margin-left: 0; padding: 3px; border-radius: 8px; } .rs-wi .ranges button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.rs-wi .cw-in input { height: 32px; width: 96px; font-size: 13.5px; }
.wi-line { margin: 12px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.2px; max-width: 46ch; }
.wi-pts { margin: 0 0 10px; padding: 0; list-style: none; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.wi-note { margin: 12px 0 8px; font-size: 15px; color: var(--text-2); }
.rs-rot .bn-line { padding: 0; font-size: 15px; }
.rs-rot .rt-head { margin: 4px 0 12px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; }
.rt-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rt-sw .ranges { margin-left: 0; padding: 3px; border-radius: 8px; } .rt-sw .ranges button { height: 30px; min-width: 44px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.rt-share-btn { margin-left: auto; height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.rt-flow { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 14px; }
.rt-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; min-width: 0; align-self: stretch; }
.rt-box.rt-out { background: color-mix(in srgb, var(--down) 8%, var(--surface)); } .rt-box.rt-in { background: color-mix(in srgb, var(--up) 8%, var(--surface)); }
.rt-lab { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } .rt-out .rt-lab { color: var(--down); } .rt-in .rt-lab { color: var(--up); }
.rt-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 14px; border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
.rt-chip .rt-nm { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-chip b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rt-chip small { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); }
.rt-chip:hover .rt-nm, .rt-tile:hover .rt-nm { text-decoration: underline; }
.rt-none { margin: 0; font-size: 14px; color: var(--text-3); }
.rt-arrow { width: 96px; height: auto; } .rt-arrow path { fill: var(--accent); }
.rt-h { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.rt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rt-tile { display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.rt-tile .rt-nm { font-size: 14px; font-weight: 600; } .rt-tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.rt-tile small { font-size: 12px; color: var(--text-2); margin-top: auto; } .rt-turn.rt-up, .rt-turn.rt-down { font-weight: 600; color: var(--text); }
.rt-key { background: var(--surface-2); justify-content: center; } .rt-key small { margin: 0; color: var(--text-3); }
.rt-foot { margin: 10px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.rt-share { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rt-share[hidden] { display: none; }
@media (max-width: 700px) { .rt-flow { grid-template-columns: minmax(0, 1fr); } .rt-arrow { transform: rotate(90deg); justify-self: center; width: 56px; } .rt-share-btn { margin-left: 0; } }
/* Compare's symbol suggestions under each box. */
.cw-ac { position: relative; display: inline-flex; }
.cw-in .cw-ac span { color: inherit; font-size: inherit; }
.cw-sugg { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 260px; max-width: 340px; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); }
.cw-sugg li { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.cw-sugg li b { font-size: 13.5px; }
.cw-sugg li span { font-size: 12.5px; color: var(--text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-sugg li:hover, .cw-sugg li[aria-selected="true"] { background: var(--hover); }
/* Sortable headers in Who's beating the market. */
.bn-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bn-sort i { font-style: normal; font-size: 10px; opacity: .55; }
.bn-sort.on { color: var(--text); } .bn-sort.on i { opacity: 1; }
.bn-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Help page (left nav) and the roomier Site Help panel ---------- */
.hp { max-width: 1120px; }
.hp-top { display: grid; gap: 12px; padding: 18px 0 8px; }
.hp-top .txt { width: 100%; max-width: 640px; height: 46px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.hp-sbox { position: relative; max-width: 640px; }
.hp-sbox .txt { max-width: none; }
.hp-drop { position: absolute; top: 52px; left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 4px; max-height: min(72vh, 560px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); }
.hp-drop li.nl-hwrap { display: block; padding: 0; margin: 0; }
.hp-drop .nl-head { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.hp-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hp-q { height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.hp-q:hover { color: var(--text); border-color: var(--text-3); }
.hp-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 12px; }
.hp-nav { position: sticky; top: 8px; display: grid; gap: 4px; }
.hp-navh { padding: 0 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.hp-nav select { display: none; }
.hp-list { display: grid; gap: 2px; }
.hp-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 14px; text-align: left; }
.hp-chip span { font-size: 12px; color: var(--text-3); }
.hp-chip:hover { background: var(--bg); color: var(--text); }
.hp-chip[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.hp-chip[aria-pressed="true"] span { color: var(--accent); }
.hp-body { display: grid; gap: 40px; padding: 0 0 56px; min-width: 0; }
.hp-sec h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; letter-spacing: -.1px; }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 16px; transition: border-color .15s, box-shadow .15s; }
.hp-card { cursor: pointer; }
.hp-card .hp-how { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hp-card.nopic .hp-s { -webkit-line-clamp: 6; }
.hp-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.hp-card.mark { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.hp-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.hp-card h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.hp-s { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-ex { height: 128px; margin: 6px 0; padding: 8px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.hp-ex svg { width: 100%; max-width: 270px; height: 100%; }
.hp-foot { display: grid; gap: 6px; margin-top: auto; padding-top: 10px; }
.hp-foot .linkbtn { text-align: left; font-size: 13.5px; font-weight: 600; }
.hp-foot .hp-go { font-weight: 500; color: var(--text-2); }
.hp-foot .hp-go:hover { color: var(--accent); }
.gl-go { margin: 12px 0 0; }
.hp-none { color: var(--text-2); font-size: 15px; padding: 24px 0; }
body.on-help .idx-strip { display: none; }
#page-help { container-type: inline-size; }
@container (max-width: 950px) { .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) {
  .hp-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hp-nav { position: static; }
  .hp-navh, .hp-list { display: none; }
  .hp-nav select { display: block; width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; }
}
@container (max-width: 400px) { .hp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hp-card { padding: 18px; } .hp-q { height: 34px; } }
/* The side panel: the one topic, with room to breathe. */
#glossary .glossary { gap: 12px; }
#glossary .glossary li { padding: 4px 4px 12px; font-size: 14.5px; line-height: 1.6; }
#glossary .glossary li > b { display: block; margin-bottom: 6px; font-size: 18px; }
#glossary .glossary li p { font-size: 14px; line-height: 1.6; margin-top: 10px; }
#glossary .glossary details { display: block; margin-top: 12px; }
#glossary .glossary details:not([open]) > summary { margin-left: 0; }
#glossary .glossary .gl-long p, #glossary .glossary .gl-long li { font-size: 14px; line-height: 1.6; margin: 6px 0; }
#glossary .gl-bar .linkbtn { font-size: 13.5px; font-weight: 600; }

/* Phones (#research, Replay, Overview): nothing wider than the screen, and
   buttons at least 36 px tall to tap. */
@media (max-width: 760px) {
  .rs-widgets .cw-in input, .rs-wi .cw-in input { flex: 1 1 96px; min-width: 0; width: auto; height: 38px; font-size: 16px; }
  .cw-in .ranges { flex: 1 0 100%; margin-left: 0; }
  .cw-in .ranges button { flex: 1; }
  .cw-ac { flex: 1 1 96px; min-width: 0; display: flex; } .cw-ac input { width: 100%; }
  .cw-sugg { min-width: 0; width: max(100%, 220px); max-width: calc(100vw - 72px); }
  .cw-ac:last-of-type .cw-sugg { left: auto; right: 0; }
  .rs-widgets .ranges button, .rt-sw .ranges button, .rp-gh .rp-grp button, .bn-tools .ranges button { height: 36px; }
  .rt-sw .ranges { flex: 1 1 100%; } .rt-sw .ranges button { flex: 1; min-width: 0; padding: 0 6px; }
  .bn-sort { min-height: 36px; }
  .rp-secs a { min-height: 36px; }
  .rp-gh { flex-wrap: wrap; }
  .ov-arr { width: 36px; height: 36px; }
  .rp-tall .rp-blab { display: none; }
  .rp-tall .rp-ylab { font-size: 40px; }
  .rp-tall .rp-ln { stroke-width: 7; }
  .rp-tall .rp-zero { stroke-width: 3; stroke-dasharray: 12 10; }
  .rp-tall .rp-cur { stroke-width: 4; }
  .rp-tall .rp-dot { stroke-width: 5; }
  .rp-tall .rp-ln.rp-nq { stroke-dasharray: 16 12; } .rp-tall .rp-ln.rp-ru { stroke-dasharray: 4 12; } .rp-tall .rp-ln.rp-gd { stroke-dasharray: 28 10 6 10; }
}
/* Narrow phones need space for longer labels across system fonts. */
@media (max-width: 360px) {
  .rail .tab .tab-l, .shell.folded .rail .tab .tab-l { overflow: hidden; text-overflow: ellipsis; }
}

/* The side panel left too little room for a page: a note replaces the squeezed content. */
.tight-note { display: none; }
#app.tight .tight-note { display: flex; flex-direction: column; gap: 10px; padding: 24px 16px; color: var(--text-2); }
#app.tight .tight-note b { color: var(--text); font-size: 16px; }
#app.tight .tight-note div { display: flex; flex-wrap: wrap; gap: 8px; }
#app.tight #main > :not(.tight-note) { display: none; }
#ipo-show { flex-wrap: wrap; max-width: 100%; }
/* The panel alone in its own tab (?open=SYM&solo=1): no menu, bar or page, the panel fills the window. */
html.solo .rail, html.solo .topbar, html.solo .context, html.solo #main, html.solo .panel-grip, html.solo #p-close { display: none; }
html.solo .shell { display: block; }
html.solo .app, html.solo .app.open { grid-template-columns: minmax(0, 1fr); height: 100%; }
html.solo .panel-inner { width: 100%; }
/* Wide layout: chart, then the tabs, on the left; the Now summary in a side column on the right. */
html.solo .panel-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--solo-side, 420px); grid-template-rows: auto auto 1fr; align-items: start; overflow-y: auto; }
html.solo .p-top { grid-column: 1; grid-row: 1; padding: 20px 28px 0; }
html.solo .ptabs { grid-column: 1; grid-row: 2; padding: 10px 28px 0; }
html.solo .tp { grid-column: 1; grid-row: 3; }
html.solo .p-side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; border-left: 1px solid var(--line); padding-top: 12px; }
html.solo .p-chart { display: flex; flex-direction: column; }
html.solo .chart-tools { order: -1; margin: 0 0 8px; }
html.solo .chart-box { height: clamp(160px, 28vh, 300px); }
html.solo .panel { position: absolute; inset: 0; width: auto; }
@media (max-width: 799px), (max-height: 559px) {
  html.solo .panel-body { display: block; overflow-y: auto; }
  html.solo .p-top, html.solo .ptabs { padding-left: 16px; padding-right: 16px; }
  html.solo .p-side { position: static; max-height: none; overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
}
html.solo #p-pin { display: none; }
.rs-min { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; color: var(--text-2); font-size: 12px; }
.rs-sw + .rs-min { margin-left: 0; }
.rs-min:hover { background: var(--hover); color: var(--text); }
/* Full-page view: top bar (back, symbol and price, share), key stats row, calmer tabs and side cards. */
.solo-bar, .solo-sharebox { display: none; }
html.solo .solo-bar { display: flex; align-items: center; gap: 14px; flex: none; padding: 8px 28px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.solo-back { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.solo-back:hover { text-decoration: underline; }
.solo-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.solo-id b { font-size: 14px; }
.solo-id em { font-style: normal; font-weight: 600; }
.solo-share { margin-left: auto; height: 30px; padding: 0 14px; }
html.solo .solo-sharebox:not([hidden]) { display: block; position: absolute; top: 48px; right: 24px; z-index: 30; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; margin: 0; }
html.solo .p-price .big { font-size: 38px; }
html.solo .p-top { padding-top: 14px; }
html.solo .p-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pk { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.pk span { font-size: 11.5px; color: var(--text-3); }
.pk b { font-size: 15px; font-variant-numeric: tabular-nums; }
html.solo .ptabs { padding-top: 8px; }
html.solo .ptrack { background: none; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 22px; justify-content: flex-start; }
html.solo .ptrack button { flex: none; background: none; padding: 8px 2px; border-radius: 0; color: var(--text-2); }
html.solo .ptrack button[aria-selected="true"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); background: none; }
html.solo .ptrack .ind { display: none; }
html.solo .p-side { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
html.solo .p-side > .sec { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
@media (max-width: 799px), (max-height: 559px) { html.solo .solo-bar { padding: 8px 16px; } html.solo .p-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Full-page view, wide: name, price and the buttons share one row (the header used to take three). */
@media (min-width: 1100px) and (min-height: 560px) {
  html.solo .p-head { display: grid; grid-template-columns: auto minmax(0, 360px) auto auto minmax(0, 1fr) auto auto; column-gap: 14px; align-items: center; }
  html.solo .p-id, html.solo .p-price { display: contents; }
  html.solo .p-id .logo { grid-column: 1; grid-row: 1; }
  html.solo .p-name { grid-column: 2; grid-row: 1; flex: none; max-width: 360px; }
  html.solo .p-price .big { grid-column: 3; grid-row: 1; font-size: 34px; margin-left: 10px; }
  html.solo .p-price .chg { grid-column: 4; grid-row: 1; }
  html.solo .p-id .chart-add { grid-column: 6; grid-row: 1; }
  html.solo .p-price .p-actions { grid-column: 7; grid-row: 1; margin-left: 0; }
}
html.solo #p-newtab { display: none; }
html.solo .p-side > .sec:has(.score-row) { order: -1; }
html.solo #p-full { display: none; }
.solo-back kbd { margin-left: 4px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font: 500 11px/16px inherit; color: var(--text-3); }
/* Phones: the extra header buttons step aside so Close always fits. */
@media (max-width: 760px) { #p-full, #p-newtab { display: none; } .p-id #p-close, .p-id #p-pin { flex: none; } }
/* Bias: today's move big, top right of the heading. */
.sec h3.has-today { display: flex; align-items: baseline; gap: 8px; }
.b-today { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.b-today b { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin-left: 2px; font-variant-numeric: tabular-nums; }
/* Compact stock panel: tighter section spacing. */
.panel .sec { padding-top: 9px; padding-bottom: 9px; }
.panel .sec h3 { margin-bottom: 6px; }
.score-why { margin: 4px 0 2px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.sig-line { margin: 0 0 4px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
/* Full page, right column: everything on one screen. The score history chart stays in the side panel. */
html.solo .p-side { gap: 8px; padding: 8px; }
html.solo .p-side > .sec { padding: 8px 12px; }
html.solo .p-side .sec h3 { margin-bottom: 4px; }
html.solo .p-side .sh { display: none; }
html.solo .p-side .fine { margin: 4px 0 0; font-size: 11px; line-height: 1.35; }
html.solo .p-side .sec .body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* TMPY Score: bigger ring, title and verdict. */
.score-row { gap: 16px; align-items: center; }
.score-row h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.score-row .score-l { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.score-row .score-l small { font-size: 12px; font-weight: 500; }
/* ---- Full page, cleaner: score strip on top, then chart and tabs on the left, short cards on the right ---- */
html.solo .panel, html.solo .panel-inner { background: var(--bg); }
html.solo .panel-body { grid-template-rows: auto auto auto 1fr; gap: 8px; padding: 8px; }
html.solo .p-scorebar { grid-column: 1 / -1; grid-row: 1; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-tint); }
html.solo .p-top { grid-column: 1; grid-row: 2; padding: 10px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
html.solo .ptabs { grid-column: 1; grid-row: 3; padding: 10px 14px 0; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; margin-bottom: -8px; }
html.solo .tp { grid-column: 1; grid-row: 4; padding: 4px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
html.solo .p-side { grid-column: 2; grid-row: 2 / span 3; top: 8px; max-height: calc(100vh - 16px); padding: 0; border-left: 0; background: none; }
html.solo .p-side > .sec { padding: 8px 12px; }
.sb-main { display: flex; align-items: center; gap: 12px; }
.sb-txt { min-width: 0; flex: 1; }
.sb-v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.sb-why { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.sb-toggle { flex: none; margin-left: auto; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.sb-toggle:hover { text-decoration: underline; }
.sb-bd { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.pa-head { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.kvs { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12.5px; }
.kvs span { color: var(--text-3); }
.kvs b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kvs em { font-style: normal; margin-left: 4px; }
.solo-sess { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.solo-sess:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--up); }
@media (max-width: 799px), (max-height: 559px) {
  html.solo .p-scorebar, html.solo .p-top, html.solo .tp { margin-bottom: 8px; }
  html.solo .ptabs { margin-bottom: 0; }
  html.solo .p-side { position: static; max-height: none; }
}
.solo-id { flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.solo-share { flex: none; }
@media (max-width: 760px) {
  .solo-back kbd { display: none; }
  html.solo .solo-bar { gap: 10px; }
  .solo-id { gap: 6px; padding-left: 10px; }
  .solo-share { padding: 0 10px; }
  .sb-main { flex-wrap: wrap; }
  .sb-toggle { flex: 1 1 100%; margin-left: 0; padding-left: 60px; text-align: left; }
}

/* ---- Full page: header card first, then a polished score strip ---- */
html.solo .panel-body { grid-template-rows: auto auto auto auto 1fr; }
html.solo .p-head { grid-column: 1 / -1; grid-row: 1; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 18, 32, .04); }
html.solo .p-head .p-id { gap: 12px; }
html.solo .p-head .logo.lg { width: 44px; height: 44px; box-shadow: 0 0 0 1px var(--line); }
html.solo .p-head .p-name b { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
html.solo .p-head .p-name small { font-size: 13px; }
html.solo .p-head .p-price { margin-top: 8px; }
html.solo .p-head .p-price .chg { padding: 3px 10px; border-radius: 999px; font-weight: 600; }
html.solo .p-head .p-price .chg.up { background: var(--up-fill); }
html.solo .p-head .p-price .chg.down { background: var(--down-fill); }
html.solo .p-scorebar { grid-row: 2; padding: 12px 18px; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: linear-gradient(100deg, var(--accent-tint) 0%, var(--surface) 78%); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 18, 32, .04); }
html.solo .p-top { grid-row: 3; }
html.solo .ptabs { grid-row: 4; }
html.solo .tp { grid-row: 5; }
html.solo .p-side { grid-row: 3 / span 3; }
.sb-main { gap: 16px; }
.sb-main .score-ring svg { filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent)); }
.sb-v { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.sb-why { margin-top: 2px; font-size: 13px; line-height: 1.45; }
.sb-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 999px; background: var(--surface); transition: background 120ms ease, border-color 120ms ease; }
.sb-toggle:hover { background: var(--accent-tint); text-decoration: none; }
.sb-toggle .sb-chev { display: inline-block; transition: transform 160ms ease; }
.sb-toggle[aria-expanded="true"] .sb-chev { transform: rotate(180deg); }
.sb-bd { margin-top: 10px; padding-top: 10px; animation: sb-in 180ms ease-out; }
.sb-bd .chiprow { gap: 8px; }
.sb-bd .tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.sb-bd .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--flat); }
.sb-bd .tag.sc-up::before { background: var(--up); }
.sb-bd .tag.sc-down::before { background: var(--down); }
@keyframes sb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sb-bd { animation: none; } .sb-toggle .sb-chev { transition: none; } }
@media (max-width: 799px), (max-height: 559px) { html.solo .p-head { margin-bottom: 8px; } }
/* Narrow header: the price row may wrap, so the buttons never run off the card. */
html.solo .p-head .p-price { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 760px) { html.solo .p-head .p-price .big { font-size: 30px; } html.solo .p-head .p-price .p-actions { margin-left: 0; } }
.sb-bd .sh-h { flex-wrap: wrap; gap: 2px 10px; }
.sb-bd .sh-h .r { margin-left: 0; white-space: normal; }
/* Full page tabs: on a wide card the sections flow into columns (about 460 px each) so the width is used. */
html.solo .tp { columns: 460px; column-gap: 36px; }
html.solo .tp .sec { break-inside: avoid; border-top: 0; padding: 10px 0 14px; }
html.solo .tp .sec:first-child { padding-top: 6px; }

/* ---- Full page: header and score card like the reference ---- */
html.solo .p-head .logo.lg { width: 72px; height: 72px; border-radius: 20px; box-shadow: none; background: var(--accent-tint); color: var(--accent); font-size: 30px; font-weight: 700; }
html.solo .p-head .logo.lg img { border-radius: 20px; background: #fff; padding: 6px; box-sizing: border-box; }
html.solo .p-head .p-name { gap: 2px; }
html.solo .p-head .p-name b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1.4px; color: var(--text-2); }
html.solo .p-head .p-ex { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-3); }
html.solo .p-head .p-ex:empty { display: none; }
html.solo .p-head .p-name small { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--text); line-height: 1.15; }
html.solo .p-head .p-ind { font-size: 14px; color: var(--text-2); }
html.solo .p-head .p-ind:empty { display: none; }
html.solo .p-head .chgwrap { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
html.solo .p-head .today { font-size: 13px; color: var(--text-3); }
html.solo .p-head .p-actions { margin-left: 0; }
@media (min-width: 1100px) and (min-height: 560px) {
  html.solo .p-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 10px; padding: 14px 18px; }
  html.solo .p-id .logo { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  html.solo .p-name { grid-column: 2; grid-row: 1; max-width: none; align-self: start; }
  html.solo .p-price .big { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; font-size: 42px; letter-spacing: -1px; align-self: start; line-height: 1; }
  html.solo .p-price .chgwrap { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; }
  html.solo .p-price .p-actions { grid-column: 2; grid-row: 2; justify-self: start; align-self: end; }
}
/* the score card */
html.solo .p-scorebar { padding: 0; background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }
.sb-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.sb-left { padding: 16px 22px 14px; display: flex; flex-direction: column; gap: 8px; }
.sb-right { padding: 16px 22px 14px; border-left: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sb-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.sb-score { display: flex; align-items: center; gap: 10px; }
.sb-num { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -2px; color: var(--accent); font-variant-numeric: tabular-nums; }
.sb-of { align-self: flex-end; margin: 0 6px 6px -4px; font-size: 15px; color: var(--text-3); }
.sb-title { display: flex; flex-direction: column; gap: 2px; }
.sb-title b { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.sb-verdict { font-size: 16px; color: var(--text); }
.sb-asof { font-size: 13px; color: var(--text-2); }
.sb-grp { display: flex; flex-direction: column; gap: 3px; }
.sb-list { font-size: 15px; font-weight: 500; line-height: 1.35; }
.sb-toggle { margin-left: 0; margin-top: auto; }
html.solo .p-scorebar .sb-bd { margin: 0; padding: 12px 22px 14px; border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
@media (max-width: 799px), (max-height: 559px) {
  .sb-card { grid-template-columns: minmax(0, 1fr); }
  .sb-right { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
  .sb-num { font-size: 46px; }
}
/* ---- Full page: the header and the score are one card; tighter; softer blue ---- */
html.solo .p-head { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: color-mix(in srgb, var(--accent) 16%, var(--line)); box-shadow: none; padding-top: 11px; padding-bottom: 11px; }
html.solo .p-scorebar { margin-top: -8px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 1px 2px rgba(11, 18, 32, .04);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 11%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 5%, var(--surface)) 50%, var(--surface) 100%); }
html.solo .p-head .logo.lg { width: 62px; height: 62px; border-radius: 18px; font-size: 26px; }
html.solo .p-head .logo.lg img { border-radius: 18px; }
html.solo .p-head .p-name small { font-size: 24px; }
html.solo .p-head .p-price .big { font-size: 38px; }
.sb-left { padding: 12px 22px 10px; gap: 6px; }
.sb-right { padding: 12px 22px 10px; gap: 7px; }
.sb-num { font-size: 48px; }
.sb-title b { font-size: 18px; }
.sb-verdict { font-size: 15px; }
.sb-list { font-size: 14.5px; }
.sb-more { display: inline; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.sb-more:hover { text-decoration: underline; }
@media (min-width: 1100px) and (min-height: 560px) { html.solo .p-head { row-gap: 8px; padding: 11px 18px; } }
@media (max-width: 799px), (max-height: 559px) { html.solo .p-head { margin-bottom: 0; } html.solo .p-scorebar { margin-top: 0; } }
html.solo .p-head { padding-top: 9px; padding-bottom: 9px; }
html.solo .p-head .logo.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
html.solo .p-head .logo.lg img { border-radius: 16px; }
html.solo .p-head .p-name small { font-size: 23px; }
html.solo .p-head .p-price .big { font-size: 36px; }
.sb-left { padding: 10px 22px 8px; gap: 5px; }
.sb-right { padding: 10px 22px 8px; gap: 6px; }
.sb-num { font-size: 44px; }
@media (min-width: 1100px) and (min-height: 560px) { html.solo .p-head { row-gap: 6px; padding: 9px 18px; } }

/* Phone browsers need document scrolling for their address bar to collapse.
   Keep overlays fixed to the visible viewport while the page scrolls normally. */
@media (max-width: 760px) {
  html:not(.solo), html:not(.solo) body { height: auto; min-height: 100%; }
  html:not(.solo) body { overflow: visible; overflow-x: clip; }
  html:not(.solo) .shell { height: auto; min-height: 100svh; grid-template-rows: auto auto auto; }
  html:not(.solo) .app, html:not(.solo) .app.open { display: block; overflow: visible; min-height: calc(100svh - 150px); }
  html:not(.solo) .main { overflow: visible; }
  html:not(.solo) .topbar { position: sticky; top: 0; z-index: 42; }
  html:not(.solo) .context { position: sticky; top: 56px; z-index: 41; }
  html:not(.solo) .panel { position: fixed; top: calc(90px + env(safe-area-inset-top, 0px)); bottom: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); }
  html:not(.solo) .scrim { position: fixed; top: 90px; bottom: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); }
  html:not(.solo) .main:has(> #page-charts:not([hidden])) { overflow: visible; min-height: calc(100svh - 150px); }
  html:not(.solo) #page-charts { min-height: calc(100svh - 174px); }
  .actions { flex-wrap: wrap; }
  .actions #save-btn { display: inline-flex; }
  .actions #save-btn span, .actions #view-default span { display: inline; }
  .nudge { width: calc(100vw - 24px); max-width: 430px; bottom: calc(var(--mobile-nav-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .nudge > span { flex: 1; min-width: 0; }
  .nudge .btn, .nudge button { flex: none; }
}

@media (max-width: 760px) {
  .wl-sort { max-width: 100%; min-width: 0; overflow-x: auto; }
  .wl-sort button { flex: none; }
  .rail .tab .tab-l, .shell.folded .rail .tab .tab-l { display: block; flex: none; overflow-wrap: anywhere; }
  .idx-strip { flex: 1; overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .idx-strip > .idx, .idx-strip > .sep ~ .idx, .idx-strip > .idx ~ .idx:not(.idx-yield) { display: inline-flex; flex: none; }
  .context { gap: 10px; }
  .st-right { gap: 6px; }
  #st-when { display: none; }
}

@media (max-width: 760px) { #page-watchlist .actions { min-width: 0; max-width: 100%; width: 100%; } }

@media (max-width: 760px) {
  .context .st-right { max-width: 55%; min-width: 0; }
  .context #st-conn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* QA (phone audit). An empty state is as wide as the table it replaces, and its
   text is centred, so on a phone the message sat far off to the right of the
   screen and the list looked blank ("Your watchlist is empty" was never seen).
   Pin it to the visible edge of the scroller and cap it at the screen width. */
.tbl-wrap .state { position: sticky; left: 0; box-sizing: border-box; width: min(100%, calc(100vw - 34px)); }

/* Fingers: the 28px star, 18px text links and 17px sort headers were hard to hit
   and sat close to their neighbours. Grow the hit area, not the look. */
@media (pointer: coarse) {
  .star, .linkbtn, .th-sort, .sf-links a, .sf-link { position: relative; }
  .star::after, .linkbtn::after, .th-sort::after { content: ""; position: absolute; inset: -8px -6px; }
  .sf-links a, .sf-link { display: inline-flex; align-items: center; min-height: 36px; }
  .idx { padding-block: 8px; margin-block: -8px; }
}
@media (max-width: 760px) {
  /* The connection text was cut mid-letter ("· up"): ellipsis on the text itself, and a fade where the index strip scrolls on. */
  #st-conn { display: flex; align-items: center; gap: 6px; }
  #st-conn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .idx-strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}

/* Phone bottom bar (tmpywebui#245): four main tabs and "More". A light bar, 24px icons and 11px labels in one
   line, instead of nine dark, crammed tabs. Sectors, IPOs, Research, Saved views and Help sit in the sheet. */
.rail .tab.tab-more-btn, .rail .more-pref, .more-scrim { display: none; }
.tl-short { display: none; }
@media (max-width: 760px) {
  .tl-long { display: none; }
  .tl-short { display: inline; }
  .rail, .shell.folded .rail { background: var(--surface); color: var(--text-2); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(11, 18, 32, .06); padding-top: 0; }
  .rail .tab, .shell.folded .rail .tab { color: var(--text-2); font-size: 12px; font-weight: 500; gap: 2px; border-radius: 0; }
  .rail .tab:hover, .shell.folded .rail .tab:hover { background: none; color: var(--text-2); }
  .rail .tab svg { width: 24px; height: 24px; opacity: 1; stroke-width: 1.6; }
  .rail .tab[aria-current], .shell.folded .rail .tab[aria-current], :root .rail .tab[aria-current] { background: none; color: var(--accent) !important; font-weight: 600; }
  .rail .tab[aria-current]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .rail .tab.tab-more-btn { display: flex; }
  .rail .tab .ncount, .shell.folded .rail .tab .ncount { background: var(--accent); color: #fff; }
  .more-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(11, 18, 32, .45); }
  .more-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 8px); max-height: calc(100vh - var(--mobile-nav-h, 60px) - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); max-height: calc(100dvh - var(--mobile-nav-h, 60px) - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); overflow-y: auto; overscroll-behavior: contain; z-index: 41; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); animation: popin 160ms var(--ease-out); }
  .more-sheet[hidden] { display: none; }
  .more-sheet .tab, .shell.folded .more-sheet .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; height: 52px; padding: 0 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--text); text-align: left; }
  .more-sheet .tab:hover { background: var(--hover); color: var(--text); }
  .more-sheet .tab[aria-current] { background: var(--chip); }
  .more-sheet .tab[aria-current]::before { display: none; }
  .more-sheet .tab svg { width: 22px; height: 22px; }
  .more-sheet .tab .tab-l, .shell.folded .more-sheet .tab .tab-l { text-align: left; font-size: 16px; line-height: 1.2; }
  .more-sheet .tab .ncount, .shell.folded .more-sheet .tab .ncount { position: static; margin-left: auto; }
  .more-sheet .more-pref { display: flex; }
  /* Footer: the bar already links every page, so the footer keeps only what is not elsewhere (tmpywebui#249). */
  .site-foot { margin-top: 32px; padding-top: 20px; }
  .sf-top { gap: 12px; }
  .sf-brand p, .sf-links > div:first-child, .sf-links b, .sf-data b, .sf-data > p:first-of-type { display: none; }
  .sf-links { grid-template-columns: 1fr; }
  .sf-links > div { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .sf-alpha { margin-top: 12px; text-align: left; font-size: 12px; }
  .sf-bottom { margin-top: 8px; padding-top: 12px; gap: 4px; }
}

/* Phone-only pieces (css/phone.css shows them): hidden on wider screens. */
.acct-menu .acct-phone, .actions .mv-phone, .controls .opts-head, .opts-scrim, .ov-idxrow { display: none; }