/* Tops (routes_tops.py / static/tops.js): the owner's standalone Home Screen app. Standalone page, so the shared tokens are
   restated here with the same values as design.css / gainers.css (ink, lines, card, up/down, radii, General Sans + Inter);
   the tile is the gx card (gainers.css) at reading size. Light is the default; dark via localStorage ct-theme. */
/* Bottom safe area (Jason, Oct 23 4:22 PM: empty dark band under the tab bar in a Safari tab). The home-indicator inset is only
   added when the app runs from the Home Screen (display-mode standalone / navigator.standalone -> html.tp-sa); in a browser
   tab the toolbar already sits below the page, so the nav sits flush and --tp-sab is 0. --tp-env-sab is a test hook only
   (shots emulate the iPhone inset with it); real devices use env(). */
:root{--tp-sab:0px}
html.tp-sa{--tp-sab:var(--tp-env-sab,env(safe-area-inset-bottom,0px))}
@media (display-mode:standalone){:root{--tp-sab:var(--tp-env-sab,env(safe-area-inset-bottom,0px))}}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-var-latin.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/general-sans-600.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/general-sans-500.woff2) format("woff2")}
:root{--f-body:"Inter",system-ui,-apple-system,sans-serif;--f-head:"General Sans","Inter",system-ui,-apple-system,sans-serif;
 /* Identity B "Midnight + electric cyan" (Jason picked Oct 23 2026): dark is the default, light is the alternate. */
 --bg:#060B19;--card:#0B1226;--surface-2:#0F1830;--ink:#EEF3FF;--ink-2:#A9B6D3;--ink-3:#8492B4;--line:#1B2745;--up:#35D99A;--down:#FF6A5C;
 --navy:#060B19;--cy:#3EC8C9;--acc:#3EC8C9;--acc-ink:#03131A;--lime:#B8F15A;--r:14px;--rs:10px;--gap:16px;--shadow:none;
 --sel-bg:#3EC8C9;--sel-ink:#060B19;--cm-c:#EEF3FF;--cm-d:#B8F15A;--grid-op:.19;--nav-h:58px;
 --s-pre-bg:rgba(62,200,201,.16);--s-pre:#7FE0E1;--s-reg-bg:rgba(184,241,90,.14);--s-reg:#C9F57E;--s-post-bg:rgba(124,140,248,.18);--s-post:#AEB8FF;--s-cl-bg:rgba(255,255,255,.07);--s-cl:#A9B6D3;
 --flash-up:rgba(53,217,154,.18);--flash-dn:rgba(255,106,92,.16);color-scheme:dark}
html[data-theme=light]{--bg:#F2F5FB;--card:#FFFFFF;--surface-2:#F5F7FC;--ink:#0A1124;--ink-2:#46506A;--ink-3:#5E6884;--line:#DCE2EE;--up:#0F7F4E;--down:#C8362B;
 --shadow:0 1px 2px rgba(10,17,36,.04),0 4px 14px rgba(10,17,36,.05); --acc:#0E8486;--acc-ink:#FFFFFF;--sel-bg:#0A1124;--sel-ink:#FFFFFF;--cm-c:#0A1124;--cm-d:#7FB52E;--grid-op:.19;
 --s-pre-bg:#DDF5F5;--s-pre:#0B6566;--s-reg-bg:#E6F8C9;--s-reg:#2F5A06;--s-post-bg:#E6E8FD;--s-post:#3440A8;--s-cl-bg:#ECEEF3;--s-cl:#46506A;
 --flash-up:rgba(15,127,78,.14);--flash-dn:rgba(200,54,43,.12);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
.tp-app{max-width:1240px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(var(--tp-sab) + 28px)}
.tp-hd{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.tp-mk .bcm{display:block;width:34px;height:auto}
.tp-t{margin:0;font:600 30px/1.1 var(--f-head);letter-spacing:-.015em;color:var(--ink)}
/* pinned status: the session is always on screen */
.tp-stick{position:sticky;top:0;z-index:20;margin:0 -16px;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 10px;background:var(--bg)}
.tp-stick.stuck{box-shadow:0 1px 0 var(--line)}
.tp-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
html[data-theme=light] .tp-box{background:#EEF1F4}
.tp-box-r{align-items:flex-end;text-align:right}
.tp-lab{font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
.tp-val{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12.5px/1.25 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.tp-cd{font:500 12px/1.2 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 9px;border-radius:999px;font:700 13px/1 var(--f-body);white-space:nowrap}
.tp-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tp-pill.ses-pre{background:var(--s-pre-bg);color:var(--s-pre)}.tp-pill.ses-regular{background:var(--s-reg-bg);color:var(--s-reg)}
.tp-pill.ses-post{background:var(--s-post-bg);color:var(--s-post)}.tp-pill.ses-closed{background:var(--s-cl-bg);color:var(--s-cl)}
.tp-pill.live i{animation:tpp 1.8s infinite}
@keyframes tpp{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tp-livetag{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:999px;background:var(--cy);color:#0A1124;font:700 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
/* chip rows: one non-wrapping row per group, 32px chips in 44px tap areas, 8px gaps, 16px above and below */
.tp-chips,.tp-sesrow{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 0;padding:0 16px}
.tp-chips::-webkit-scrollbar,.tp-sesrow::-webkit-scrollbar{display:none}
.tp-sub{margin:8px 0 12px}.tp-sub .tp-sesrow{margin-top:0}.tp-sub .tp-seg+.tp-sesrow{margin-top:8px}
.tp-chip{flex:none;position:relative;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer}
.tp-chip::after{content:"";position:absolute;inset:-6px 0}
.tp-chip.on{background:var(--sel-bg);border-color:transparent;color:var(--sel-ink)}
.tp-chip.q{height:30px;padding:0 11px;font-size:13px;font-weight:500;color:var(--ink-2)}
.tp-chip.q.on{background:var(--card);color:var(--ink);border-color:var(--ink);font-weight:600}
.tp-seg{display:grid;grid-template-columns:1fr 1fr;max-width:420px;padding:3px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.tp-seg button{height:34px;padding:0 12px;border:0;border-radius:9px;background:none;font:600 14px/1 var(--f-body);color:var(--ink-2);cursor:pointer}
.tp-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(10,17,36,.12)}
.tp-div{flex:none;width:1px;height:20px;background:var(--line)}
/* the grid: 2 columns at phone width, 3 from 760, 4 from 1080 */
.tp-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.tp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.tp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tp-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform}
.tp-card:active{background:var(--surface-2)}
.tp-top{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:2px}
.tp-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tp-tk{font:700 16px/1.15 var(--f-body);letter-spacing:-.005em;white-space:nowrap}
.tp-nm{font:400 13px/1.2 var(--f-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-px{align-self:flex-start;margin:0 -4px;padding:0 4px;font:700 28px/1.05 var(--f-body);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:6px;transition:background-color .6s,color .6s}
.tp-sp{flex:none;width:56px;height:24px;margin-bottom:4px}
.tp-sp path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tp-sp .up{stroke:var(--up)}.tp-sp .dn{stroke:var(--down)}.tp-sp .base{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.tp-ch{display:flex;align-items:center;gap:4px;font:600 12.5px/1.25 var(--f-body);font-variant-numeric:tabular-nums;flex-wrap:wrap;row-gap:0;margin-top:-4px}.tp-ch span{white-space:nowrap}
.tp-ch.up{color:var(--up)}.tp-ch.dn{color:var(--down)}.tp-ch.na{color:var(--ink-3);font-weight:500}
.tp-ch svg{width:14px;height:14px;flex:none}
.tp-x{display:flex;flex-wrap:wrap;gap:4px;min-height:0;margin-top:1px}
.tp-x:empty{display:none}
.tp-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);font:600 10.5px/1 var(--f-body);white-space:nowrap}
html[data-theme=light] .tp-tag:not(.halt):not(.res):not(.sq){background:#EEF1F4}   /* the coloured halt / resumed / score tags keep their own fill */
.tp-tag.halt{background:var(--down);color:#fff}.tp-tag.res{background:var(--s-post-bg);color:var(--s-post)}
.tp-tag.sq{background:var(--s-pre-bg);color:var(--s-pre)}
.tp-sqv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font:500 12px/1.25 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tp-sqv b{display:block;font:700 14px/1.2 var(--f-body);color:var(--ink)}
.tp-score{flex:none;align-self:flex-start;min-width:30px;height:22px;padding:0 6px;border-radius:7px;background:var(--sel-bg);color:var(--sel-ink);font:700 12.5px/22px var(--f-body);text-align:center;font-variant-numeric:tabular-nums}
/* logo: the shared .lgo plate, 44px, soft square; fallback initials on a soft square */
.lgo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden}
.lgo img{display:block;object-fit:contain;width:36px;height:36px}
.lgo.lgo-fill img{width:44px;height:44px;object-fit:cover}
.lgo.mono{background:#EEF1F4;border-color:transparent;color:#0A1124;font:700 15px/1 var(--f-body);letter-spacing:-.01em}
html[data-theme=dark] .lgo.mono{background:#22262A;color:#E3E7EA}
/* live motion: FLIP reorder, enter / leave, price flash, new-entry glow (all off with reduced motion) */
.tp-card.tp-enter{animation:tpin .38s cubic-bezier(.2,.7,.2,1) both}
.tp-card.tp-leave{position:absolute;margin:0;pointer-events:none;animation:tpout .3s ease both}
.tp-card.tp-new{box-shadow:0 0 0 2px var(--cy),var(--shadow)}
.tp-px.fu{background:color-mix(in srgb,var(--flash-up) 45%,transparent);color:var(--up);transition:none}.tp-px.fd{background:color-mix(in srgb,var(--flash-dn) 45%,transparent);color:var(--down);transition:none}
@keyframes tpin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes tpout{to{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.tp-card,.tp-card.tp-enter,.tp-card.tp-leave{animation:none!important;transition:none!important}.tp-pill.live i{animation:none}}
.tp-none{grid-column:1/-1;margin:24px 0;color:var(--ink-2);font-size:15px;text-align:center}
.tp-foot{margin:24px 0 0;font:400 12.5px/1.5 var(--f-body);color:var(--ink-2)}
.tp-note{display:inline-block;margin:0 0 4px;padding:2px 8px;border-radius:6px;background:var(--lime);color:#0A1124;font:700 11px/1.4 var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.tp-net{position:fixed;left:50%;bottom:calc(var(--tp-sab) + 16px);transform:translateX(-50%);z-index:40;padding:8px 14px;border-radius:999px;background:var(--navy);color:#fff;font:600 13px/1 var(--f-body)}
/* detail sheet */
.tp-sheet{position:fixed;inset:0;z-index:50}
.tp-sheet-bg{position:absolute;inset:0;background:rgba(10,17,36,.42)}
.tp-sheet-c{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;padding:10px 18px calc(var(--tp-sab) + 22px);background:var(--card);border-radius:20px 20px 0 0;animation:tpup .28s cubic-bezier(.2,.7,.2,1)}
@media(min-width:760px){.tp-sheet-c{left:50%;right:auto;bottom:auto;top:50%;width:560px;transform:translate(-50%,-50%);border-radius:20px;animation:none}}
@keyframes tpup{from{transform:translateY(30%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.tp-sheet-c{animation:none}}
.tp-grab{width:40px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--line)}
.tp-sh-hd{display:flex;align-items:center;gap:12px}
.tp-sh-hd .tp-id{flex:1}
.tp-x-btn{width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:22px;color:var(--ink-2);cursor:pointer}
.tp-sh-px{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.tp-sh-px .tp-px{font-size:32px}
.tp-big{width:100%;height:96px;margin:6px 0 10px}
.tp-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.tp-kv div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.tp-kv span{display:block;font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
.tp-kv b{display:block;margin-top:4px;font:700 16px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.tp-rng{margin:12px 0}
.tp-rng .bar{position:relative;height:6px;border-radius:3px;background:var(--line);margin:8px 0 6px}
.tp-rng .dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--navy);border:2px solid var(--card)}
html[data-theme=dark] .tp-rng .dot{background:var(--cy)}
.tp-rng .ends{display:flex;justify-content:space-between;font:500 12.5px/1 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tp-cat{display:block;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.tp-cat small{display:block;margin-top:4px;color:var(--ink-2);font-size:12.5px}
.tp-open{display:flex;align-items:center;justify-content:center;height:48px;margin-top:14px;border-radius:12px;background:var(--sel-bg);color:var(--sel-ink);font:600 15px/1 var(--f-body);text-decoration:none}
.tp-sh-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2)}
/* sign-in */
.tp-in{min-height:100vh;display:flex;align-items:center;justify-content:center}
.tp-in-c{width:100%;max-width:360px;padding:24px 20px;text-align:center}
.tp-in-mk .bcm{width:64px;height:auto}
.tp-in-sub{color:var(--ink-2);margin:8px 0 24px}
.tp-in-f{display:flex;flex-direction:column;gap:10px;text-align:left}
.tp-in-f label{font:600 13px/1 var(--f-body);color:var(--ink-2)}
.tp-in-f input{height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:400 16px/1 var(--f-body)}
.tp-in-f button{height:48px;border:0;border-radius:12px;background:var(--sel-bg);color:var(--sel-ink);font:600 16px/1 var(--f-body);cursor:pointer}
.tp-err{margin:0;color:var(--down);font-size:14px}

.tp-tk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-px.sm{font-size:24px}
@media (max-width:520px){.tp-px.sm{font-size:22px}}
.tp-subl{font-size:12px;margin-top:-4px}
/* tile logo: the shared CLogo component (static/clogo.js) as a 40px rounded square (round everywhere else) */
/* Oct 23 logo pass: the tile logo is the same 28 px light circle as every other Systematic surface (see clogo.css);
   no image or an unreadable one -> ticker initials on the theme's letter circle */
/* View all / Show fewer: full width, rounded, cyan (Jason's reference), right under the tiles; room for more content below */
.tp-more{margin:14px 0 0}.tp-more:empty{display:none}
.tp-more-b{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border:0;border-radius:999px;background:var(--cy);color:#0A1124;font:700 16px/1 var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.tp-more-b .n{font-weight:600;opacity:.75}.tp-more-b .ar{font-size:20px;line-height:1;margin-top:-2px}
.tp-more-b:active{filter:brightness(.92)}
.tp-more-b.less{background:transparent;color:var(--cy);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cy) 55%,transparent)}
html[data-theme=light] .tp-more-b{background:#3EC8C9}html[data-theme=light] .tp-more-b.less{background:transparent;color:#0F8586;box-shadow:inset 0 0 0 1.5px #0F8586}
.tp-more-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* live price flash (1 s ticks): short and subtle; off with reduced motion (JS also skips it) */
.ss-px{border-radius:6px;transition:background-color .6s,color .6s}
.ss-px.fu{background:color-mix(in srgb,var(--flash-up) 45%,transparent);color:var(--up);transition:none}.ss-px.fd{background:color-mix(in srgb,var(--flash-dn) 45%,transparent);color:var(--down);transition:none}
@media (prefers-reduced-motion:reduce){.tp-px,.ss-px{transition:none!important}.tp-px.fu,.tp-px.fd,.ss-px.fu,.ss-px.fd{background:none}}

/* app name (renamed 9:36 Oct 23): Systematic Strategies eyebrow over the view title */
.tp-hd-tx{min-width:0}.tp-appname{font:600 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= Identity B (Oct 23 2026): lockup, hairlines, cyan notch, slash motif, background grid, bottom nav ================= */
/* Background: the splash's diagonal hairline grid behind every screen. One fixed layer (no repaint on scroll, no motion),
   low opacity via --grid-op; cards are opaque so numbers stay crisp on top. */
body.tp::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grid-op);
 background-image:repeating-linear-gradient(115deg,var(--acc) 0 1px,transparent 1px 30px);transform:translateZ(0)}
.tp-app,.tp-nav,.tp-sheet,.tp-net{position:relative;z-index:1}
.tp-sheet{position:fixed}.tp-nav{position:fixed}
.tp-stick{background:var(--bg)}
/* 3-line lockup */
.tp-hd{display:block;margin:6px 0 14px;padding:4px 2px 0}
.ss-lk{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.ss-lk .bcm{display:block;width:44px;height:auto;flex:none}
/* Lockup = shared slash spec (static/lockup_slash.css, wip-hero-fun 925a3d4, copied unchanged). --wm drives --slk-wm. */
.ss-w{--wm:26px;--slk-wm:var(--wm);--slk-c1:var(--ink);--slk-c2:var(--ink-2);--slk-sl-c:#3EC8C9;font-family:var(--f-head);font-weight:600}
.ss-1{white-space:nowrap}.ss-1 b{font-weight:600;color:var(--cm-d)}
html[data-theme=light] .ss-w{--slk-sl-c:#0B7A7C}  /* darker teal on light surfaces: 4.7:1 on #F2F5FB, 5.1:1 on #FFF (#3EC8C9 is ~1.9:1) */
.tp-t{margin:14px 0 0;font:600 28px/1.1 var(--f-head)}html[data-ssv=tops] .tp-t::before{content:"/ ";color:var(--acc);font-weight:500}  /* cyan slash: lockup + the main Tops title only (Jason, Oct 23) */
.tp-appname{display:none}
/* Jason, Oct 23: "just a different theme" - main-app components and cards unchanged; only colours, faint grid and lockup differ */
/* spacing rule: nothing against an edge; section headers inset to card padding; footnotes card-padded */
.tp-foot,.ss-foot{margin:22px 0 0;padding:14px 16px;font:400 12.5px/1.45 var(--f-body);color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.tp-foot:empty{display:none}
.ss-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 10px;padding:0 16px;font:600 16px/1.2 var(--f-head);color:var(--ink)}
.ss-sec a,.ss-sec button{font:500 13px/1 var(--f-body);letter-spacing:0;text-transform:none;color:var(--acc);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none}
.ss-card{background:var(--card);border-radius:var(--r);padding:14px 16px}
/* bottom nav (iOS tab bar): safe-area aware, cyan active state, no filled box */
.tp-app{padding-bottom:calc(var(--tp-sab) + var(--nav-h) + 28px)}
.tp-nav{left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;background:color-mix(in srgb,var(--bg) 88%,transparent);
 -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-top:1px solid var(--line);padding-bottom:var(--tp-sab)}
.tp-nav-in{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:560px;height:var(--nav-h)}
.tp-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);text-decoration:none;font:500 10.5px/1 var(--f-body);letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.tp-nav svg{width:23px;height:23px;display:block}
.tp-nav a[aria-current=page]{color:var(--acc)}
.tp-nav a[aria-current=page]::before{content:"";position:absolute;top:-1px;left:30%;right:30%;height:2px;background:var(--acc)}
.tp-nav a:focus-visible{outline:2px solid var(--acc);outline-offset:-4px;border-radius:var(--rs)}
@media(min-width:760px){.tp-nav-in{max-width:640px}.tp-nav a{flex-direction:row;gap:8px;font-size:13px}}
html.tp-splash .tp-nav{display:none}
@media (prefers-reduced-motion:reduce){body.tp::before{transform:none}}
/* views */
[data-view][hidden]{display:none!important}
/* launch splash (identity B): stacked lockup on the grid; the nav is hidden while it shows */
.ss-splash{display:none}
html.tp-splash .ss-splash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);transition:opacity .25s}
html.tp-splash .ss-splash::before{content:"";position:absolute;inset:0;opacity:.2;background-image:repeating-linear-gradient(115deg,var(--acc) 0 1px,transparent 1px 30px)}
.ss-splash .ss-lk{position:relative;flex-direction:column;gap:26px;padding:24px}
.ss-lk-xl .ss-w{--wm:52px}
.ss-splash-ft{position:absolute;bottom:calc(var(--tp-sab) + 48px);font:500 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html.tp-splash.out .ss-splash{opacity:0}
@media (prefers-reduced-motion:reduce){.ss-splash{transition:none}}
/* ---------- B views: Advanced / Signals / Journal / Guide ---------- */
.ss-pick,.ss-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px 2px}.ss-pick::-webkit-scrollbar,.ss-chips::-webkit-scrollbar{display:none}
.ss-filt .ss-chips+.ss-chips{margin-top:8px}
.ss-q{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.ss-q-l{display:flex;flex-direction:column;gap:6px}.ss-sym{font:600 22px/1 var(--f-head);letter-spacing:.04em}.ss-age{font:500 11px/1 var(--f-body);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.ss-q-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.ss-px{font:700 32px/1 var(--f-body);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ss-pc{font:600 15px/1 var(--f-body);font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--down)}
.ss-seg{display:inline-flex;gap:6px;margin:12px 0 10px}.ss-seg button{font:600 12.5px/1 var(--f-body);padding:8px 12px;border:1px solid var(--line);border-radius:var(--rs);background:var(--card);color:var(--ink-2);cursor:pointer}
.ss-seg button.on{background:var(--sel-bg);border-color:transparent;color:var(--sel-ink)}
.ss-cw{position:relative;margin-top:10px}
.ss-chart{height:380px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
@media(min-width:760px){.ss-chart{height:520px}}
/* crosshair readout: one line over the chart, top-left (time, O/H/L/C, rating) */
.ss-cbar{display:flex;align-items:center;gap:8px;min-height:36px;margin-bottom:4px}
.ss-ro{flex:1;min-width:0;display:flex;gap:4px 10px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;pointer-events:none;font:500 12px/1.2 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.ss-ro b{font-weight:600;color:var(--ink)}.ss-ro .r.u{color:var(--up)}.ss-ro .r.d{color:var(--down)}
.ss-fs{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink-2);cursor:pointer}
.ss-fs:active{background:var(--surface-2)}
/* tap-to-fullscreen: CSS full-viewport fallback (iPhone Safari has no element fullscreen), landscape-friendly */
.ss-cw.fs{position:fixed;inset:0;z-index:80;margin:0;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 8px) var(--tp-sab) calc(env(safe-area-inset-left,0px) + 12px);background:var(--card)}
.ss-cw.fs .ss-chart{flex:1;height:auto;min-height:0;border:0;border-radius:0}
html.ss-fs-on,html.ss-fs-on body{overflow:hidden}
.ss-age.live{color:var(--up);display:inline-flex;align-items:center;gap:6px}.ss-age.live i{width:7px;height:7px;border-radius:50%;background:var(--up)}
.ss-attr{margin:6px 16px 0;font:400 10.5px/1.45 var(--f-body);color:var(--ink-3);text-align:right}.ss-attr a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.ss-mtf{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.ss-m{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;background:var(--card);border:1px solid var(--line);border-radius:var(--rs);text-align:center}
.ss-m span{font:500 11px/1 var(--f-body);color:var(--ink-3)}.ss-m b{font:700 10.5px/1.15 var(--f-body);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}.ss-m b.up{color:var(--up)}.ss-m b.dn{color:var(--down)}
.ss-mtf-n{grid-column:1/-1;margin:4px 16px 0;font:400 12px/1.45 var(--f-body);color:var(--ink-2)}
.ss-flag{font:600 11px/1 var(--f-body);letter-spacing:.04em;text-transform:none;padding:5px 8px;border-radius:var(--rs);color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}
.ss-list{padding:0}.ss-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ss-row:first-child{border-top:0}.ss-row.st{cursor:default}
.ss-row-l{display:flex;flex-direction:column;gap:4px;min-width:0}.ss-row-l b{font:600 15px/1.2 var(--f-body)}.ss-row-l em{font-style:normal;font-weight:500;color:var(--ink-2)}
.ss-row-l small{font:400 12px/1.35 var(--f-body);color:var(--ink-3)}small.warn,.ss-mut.warn{color:color-mix(in srgb,var(--down) 70%,var(--ink-2))}
.ss-row-r{display:flex;align-items:center;gap:8px;flex:none;font-variant-numeric:tabular-nums}.ss-chev{font-style:normal;color:var(--ink-3);font-size:20px;line-height:1}
.ss-pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--rs);font:700 11.5px/1 var(--f-body);letter-spacing:.04em;white-space:nowrap}
.ss-pill.buy{color:var(--up);background:color-mix(in srgb,var(--up) 15%,transparent)}.ss-pill.sell{color:var(--down);background:color-mix(in srgb,var(--down) 15%,transparent)}
.ss-pill.off{color:var(--ink-3);background:var(--surface-2);font-weight:500;letter-spacing:0}
.ss-day{margin:18px 16px 8px;font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ss-mk{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.ss-mut{color:var(--ink-2);font:400 13.5px/1.45 var(--f-body)}.ss-card.ss-mut{display:block}
.ss-hero{display:flex;flex-direction:column;gap:6px;margin-top:12px}.ss-hero b{font:600 20px/1.2 var(--f-head)}.ss-hero small{font:400 12.5px/1.45 var(--f-body);color:var(--ink-2)}
.ss-sec.in{padding:0;margin:18px 0 8px}
.ss-sheet{position:fixed;inset:0;z-index:70}.ss-sheet[hidden]{display:none}.ss-sheet-bg{position:absolute;inset:0;background:rgba(3,6,14,.6)}
.ss-sheet-c{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow:auto;padding:10px 18px calc(var(--tp-sab) + 20px);background:var(--card);border-radius:14px 14px 0 0}
@media(min-width:760px){.ss-sheet-c{left:50%;right:auto;top:50%;bottom:auto;width:540px;transform:translate(-50%,-50%);border-radius:var(--r)}}
.ss-grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.ss-sh-hd{display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--f-head)}
.ss-kv{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font:400 14px/1.3 var(--f-body);color:var(--ink-2)}.ss-kv b{color:var(--ink);font-variant-numeric:tabular-nums}.ss-kv b.up{color:var(--up)}.ss-kv b.dn{color:var(--down)}
.ss-fx{list-style:none;margin:0;padding:0}.ss-fx li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line)}.ss-fx i{font-style:normal;width:18px;flex:none;font-weight:700}
.ss-fx li.ok i{color:var(--up)}.ss-fx li.no i{color:var(--down)}.ss-fx li.na i{color:var(--ink-3)}.ss-fx b{display:block;font:600 13.5px/1.3 var(--f-body)}.ss-fx small{display:block;font:400 12px/1.4 var(--f-body);color:var(--ink-3)}
.ss-btn{display:block;width:100%;margin-top:14px;height:44px;border:1px solid var(--line);border-radius:var(--rs);background:var(--surface-2);color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer}
.ss-mk-l{display:flex;flex-direction:column;gap:6px}.ss-mk-l b{font:600 16px/1 var(--f-head)}.ss-mk-r{display:flex;gap:12px;font:500 12.5px/1 var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums}.ss-mk-r b{color:var(--ink)}.ss-mk-r b.up{color:var(--up)}.ss-mk-r b.dn{color:var(--down)}
/* sign-in (B) */
.tp-in .ss-lk{justify-content:flex-start;margin-bottom:0}

/* Face ID sign-in (one screen) */
.tp-pk{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:22px;border:0;border-radius:12px;background:var(--sel-bg);color:var(--sel-ink);font:600 17px/1 var(--f-body);cursor:pointer}
.tp-pk svg{width:24px;height:24px}.tp-pk[aria-busy=true]{opacity:.7;pointer-events:none}.tp-pk:disabled{opacity:.5}
.tp-in-alt{display:block;margin:18px auto 0;padding:8px;text-align:center;font:500 14px/1.3 var(--f-body);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.tp-in-pc{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);text-align:left}
.tp-in-pc label{font:500 13px/1.3 var(--f-body);color:var(--ink-2)}
.tp-in-pc .tp-in-pc-go{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
/* viewer (view-only): owner-only controls never render; this is a second guard */
html[data-role=viewer] [data-owner-only]{display:none!important}
.ss-vo{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
/* Header: lockup left, small c. brand mark right, vertically centred on the lockup; right inset = card padding (Jason 10:24 AM ET).
   Not a link. Grid in-app ~ splash strength (.19 vs .2; Jason 10:26 AM ET 'a little stronger') so it reads in the gaps; cards stay opaque. */
.tp-hd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:16px}
.tp-hd-mk{flex:none;display:block;line-height:0}.tp-hd-mk .bcm{display:block;height:25px;width:auto}
.tp-hd-row+.tp-hd-tx{margin-top:12px}
/* Sign-in (Jason 10:28 AM ET): grid at splash strength; phone = single column as before; desktop S1 = offset hero + card. */
body.tp-in{--grid-op:.2}
.tp-in-hero,.tp-in-or{display:none}.tp-in-orv{display:none}
.tp-in-c{position:relative;z-index:1}
@media (min-width:900px){
 .tp-in{justify-content:flex-start;padding:0 8vw 0 11vw;gap:6vw}
 .tp-in-hero{display:block;position:relative;z-index:1;flex:1 1 auto;margin-top:-6vh}
 .ss-lk-hero .ss-w{--wm:clamp(76px,6.67vw,104px)}
 .tp-in-cap{margin:28px 0 0;font:500 15px/1.4 var(--f-body);color:var(--ink-3)}
 .tp-in-c{flex:none;width:420px;max-width:420px;padding:40px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
 .tp-in-lk{display:none}
 .tp-in-c .tp-t{margin:0}.tp-in-sub{margin:10px 0 28px}
 .tp-in-pc{margin-top:28px;padding-top:0;border-top:0;gap:12px}
 .tp-in-or{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:var(--ink-3);font:500 13px/1 var(--f-body)}
 .tp-in-or::before,.tp-in-or::after{content:"";flex:1;height:1px;background:var(--line)}
 .tp-in-orw{display:none}.tp-in-orv{display:inline}
 .tp-in-alt{margin:28px 0 0;padding:0;text-align:left}
 .tp-in-s2{flex-direction:column;justify-content:center;padding:48px 0;gap:40px}
 .tp-in-s2 .tp-in-hero{flex:none;margin:0;text-align:left}.tp-in-s2 .tp-in-cap{display:none}
 .tp-in-s2 .ss-lk-hero .ss-w{--wm:62px}
 .tp-in-s2 .tp-in-c{width:480px;max-width:480px}
}
@media (min-width:900px){.tp-in-hero .ss-lk{justify-content:flex-start;margin:0}.tp-in-s2 .tp-in-hero{width:480px}}
/* Guide */
.ss-g{margin-top:10px;padding:0}.ss-g>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font:600 15px/1.3 var(--f-head);color:var(--ink)}
.ss-g>summary::-webkit-details-marker{display:none}.ss-g>summary::after{content:'\203A';color:var(--ink-2);transition:transform .2s}.ss-g[open]>summary::after{transform:rotate(90deg)}
.ss-g-lv{margin-left:auto;font:500 11px/1 var(--f-body);color:var(--ink-2)}
.ss-g-b{padding:0 16px 16px;font:400 14px/1.5 var(--f-body);color:var(--ink)}.ss-g-b p{margin:0 0 10px}.ss-g-b ul,.ss-g-b ol{margin:4px 0 10px;padding-left:18px}.ss-g-b li{margin:0 0 6px}
.ss-g-b .tp-lab{display:block;margin:8px 0 4px}.ss-g-b small{color:var(--ink-2)}.ss-g-b .warn{margin:8px 0 2px;font-weight:600}
.ss-g-set{padding:12px 0;border-top:1px solid var(--line)}.ss-g-set:first-child{border-top:0;padding-top:0}.ss-g-set>b{font:600 15px/1.3 var(--f-head)}
.ss-g-w{font:500 11px/1 var(--f-body);color:var(--ink-2);margin-left:6px}.ss-g-f{list-style:none;padding:0!important}
.ss-g-m li p{margin:2px 0 0;color:var(--ink-2)}.ss-g-gl dt{font-weight:600;margin-top:8px}.ss-g-gl dd{margin:2px 0 0;color:var(--ink-2)}
.ss-g [hidden]{display:none!important}
.ss-g-b p.warn{color:color-mix(in srgb,var(--down) 70%,var(--ink-2))}
.ss-g-b>p,.ss-g-b li,.ss-g-b small,.ss-g-gl dd{max-width:72ch}

/* Rating arrows (Advanced chart; owner + viewer, read-only) */
.ss-ra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.ss-sw{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 6px;border:1px solid var(--line);border-radius:var(--rs);background:var(--card);color:var(--ink-2);font:600 12.5px/1 var(--f-body);cursor:pointer}
.ss-sw i{position:relative;width:28px;height:16px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);transition:background .15s}
.ss-sw i:after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--ink-3);transition:transform .15s}
.ss-sw[aria-checked=true] i{background:var(--sel-bg);border-color:transparent}.ss-sw[aria-checked=true] i:after{transform:translateX(12px);background:var(--sel-ink)}
.ss-ra-st{font:500 11.5px/1 var(--f-body);color:var(--ink-3)}
.ss-ex{font:600 10.5px/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:var(--rs);border:1px dashed var(--ink-3);color:var(--ink-2)}
.ss-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 16px 0;font:500 11px/1.4 var(--f-body);color:var(--ink-3)}
.ss-legd{width:100%}.ss-legd summary{display:flex;gap:12px;align-items:center;white-space:nowrap;overflow:hidden;list-style:none;cursor:pointer}
.ss-legd summary::-webkit-details-marker{display:none}.ss-legd summary::after{content:"\24D8";margin-left:auto;color:var(--ink-3);font-size:12px}
.ss-legd summary .n1{overflow:hidden;text-overflow:ellipsis;font-weight:400}.ss-legd .ss-noise{color:#E8A23B;font-weight:600}
.ss-legd p{margin:6px 0 0;font-weight:400;white-space:normal}
.ss-leg span{display:inline-flex;align-items:center;gap:5px}.ss-leg b{font-size:11px}.ss-leg b.u{color:#3EC8C9}.ss-leg b.d{color:#E5484D}
.ss-leg b.h{display:inline-block;width:8px;height:12px;border:1.5px solid var(--ink-2);border-radius:1px}
.ss-leg .n{flex-basis:100%;font-weight:400}
/* Swing (daily) card in Signals: Earnings gap-up (60-day hold), watch only */
.ss-swg{display:flex;flex-direction:column;gap:4px}
.ss-swg-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.ss-swg small{line-height:1.4}
.ss-out{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.ss-out small{display:block;color:var(--ink-3);margin-top:3px}

/* Sign-in v2 (Jason 11:02 AM ET): phone = large LEFT-aligned lockup at the top (wordmark 62px), Sign in block below;
   desktop S1 = the same lockup bigger (85px at 1280, 96px at 1440), offset 11vw. Grid + device-aware copy unchanged. */
@media (max-width:899px){
 .tp-in{display:block;min-height:100vh;padding:calc(env(safe-area-inset-top,0px) + 88px) 24px calc(var(--tp-sab) + 32px)}
 .tp-in-c{max-width:none;padding:0;text-align:left}
 .tp-in-lk{margin:0 0 56px}.tp-in-lk .ss-w{--wm:62px}
 .tp-in-c .tp-t{margin:0}
 .tp-in-alt{margin:18px 0 0;padding:8px 0;text-align:left}
}
@media (min-width:900px){.tp-in:not(.tp-in-s2){padding-left:11vw}.tp-in:not(.tp-in-s2) .tp-in-hero{margin-top:-4vh}}
@media(max-width:420px){.ss-ro{gap:4px 6px;font-size:11px;letter-spacing:-.01em}}
/* Stage in Webull (owner only) */
.ss-stg{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.ss-stg-b{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb,var(--up) 45%,var(--line));border-radius:var(--rs);background:color-mix(in srgb,var(--up) 9%,var(--card));color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer;text-align:left}
.ss-stg-b span{margin-left:auto;color:var(--ink-3);font-weight:500;font-size:12.5px}
.ss-stg small{font-size:12px;line-height:1.35}
.ss-chk{display:flex;gap:10px;align-items:center;margin-top:14px;font:500 14px/1.3 var(--f-body);color:var(--ink)}
.ss-chk input{width:20px;height:20px;accent-color:var(--up)}
.ss-btn.ss-btn-go{background:var(--up);border-color:var(--up);color:#04130c}
.ss-btn.ss-btn-go.arm{background:var(--down);border-color:var(--down);color:#fff}
.ss-btn.ss-btn-go:disabled{opacity:.4;cursor:not-allowed}
.ss-risk{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font:600 14px/1 var(--f-body)}
.ss-risk input{width:86px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:var(--rs);background:var(--surface-2);color:var(--ink);font:600 15px/1 var(--f-body);font-variant-numeric:tabular-nums}
.ss-set .ss-row{gap:12px}.ss-set>small{display:block;padding:0 14px 10px}
/* chart zoom buttons (Jason 11:28 AM ET): one-handed +/- and reset beside full screen */
.ss-zm{flex:none;display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.ss-zm button{width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:var(--ink-2);font:600 18px/1 var(--f-body);cursor:pointer}
.ss-zm button+button{border-left:1px solid var(--line)}
.ss-zm button:active{background:var(--surface-2)}
@media(max-width:420px){.ss-zm button{width:32px}}
@media(max-width:420px){.ss-ro>b{order:-3}.ss-ro .r{order:-2}.ss-ro .c{order:-1}}  /* phone: close stays visible beside the zoom buttons */
/* chart tools (Jason 11:33 AM ET): candle style switch + Indicators sheet */
.ss-tools{display:flex;align-items:center;gap:8px;margin:-2px 0 10px}
.ss-seg.sm{margin:0;gap:0;border:1px solid var(--line);border-radius:var(--rs);overflow:hidden}
.ss-seg.sm button{border:0;border-radius:0;padding:7px 10px;font-size:12px}
.ss-seg.sm button+button{border-left:1px solid var(--line)}
.ss-indb{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--rs);background:var(--card);color:var(--ink-2);font:600 12px/1 var(--f-body);cursor:pointer}
.ss-indb span{min-width:18px;height:18px;padding:0 5px;display:inline-grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--ink);font-size:11px}
.ss-hat{position:absolute;z-index:3;left:8px;top:48px;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);font:700 10.5px/1.2 var(--f-body);letter-spacing:.06em;pointer-events:none}
.ss-hat[hidden]{display:none}
.ss-cw.fs .ss-hat{top:calc(env(safe-area-inset-top,0px) + 52px);left:calc(env(safe-area-inset-left,0px) + 12px)}
.ss-chart.p1{height:450px}.ss-chart.p2{height:520px}
@media(min-width:760px){.ss-chart.p1{height:600px}.ss-chart.p2{height:680px}}
.ss-indl{border-top:1px solid var(--line);margin-top:6px}
.ss-ind-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ss-ind-r>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ss-ind-r b{font:600 14px/1.25 var(--f-body);color:var(--ink)}.ss-ind-r small{font:400 12px/1.35 var(--f-body);color:var(--ink-3)}
.ss-ind-r .ss-seg.sm{align-self:flex-start;margin-top:4px}
.ss-ind-r .ss-sw{flex:none;padding:0 6px}
/* FULL VIEW (Jason 11:41 AM ET): one bottom-right button; fixed full-viewport overlay, no Fullscreen API */
.ss-cbar{flex-wrap:wrap;row-gap:6px}
.ss-cx{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ss-zm button{height:36px}
.ss-fvb{position:absolute;z-index:4;left:auto;top:auto;right:0;bottom:0;width:34px;height:34px;padding:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,#3EC8C9 38%,var(--line));border-radius:8px;
 background:color-mix(in srgb,var(--card) 88%,#9FB4C8);color:#3EC8C9;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
.ss-fvb::before{content:'';position:absolute;inset:-3px}/* 40 px tap target, invisible */
.ss-fvb svg{width:17px;height:17px}
.ss-fvb:hover,.ss-fvb:active{border-color:#3EC8C9;background:color-mix(in srgb,var(--card) 78%,#3EC8C9)}
html[data-theme=light] .ss-fvb{color:#0F8586;border-color:color-mix(in srgb,#0F8586 35%,var(--line));background:color-mix(in srgb,var(--card) 90%,#7F93A8)}
.ss-fbar{display:none;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
.ss-cw.fs .ss-fbar{display:flex}
.ss-fvq{display:inline-flex;align-items:baseline;gap:6px;margin-right:auto;font:600 14px/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.ss-fvq .p{font-weight:600}.ss-fvq .ss-pc{font-size:12px}.ss-fvq .ss-age{font:500 11px/1 var(--f-body);color:var(--ink-3)}
.ss-fbar .ss-seg.sm button{padding:0 9px;height:34px}
.ss-fbar .ss-indb{margin:0;height:34px}
.ss-cw.fs{position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:200;overscroll-behavior:contain;
 padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 8px) calc(var(--tp-sab) + 4px) calc(env(safe-area-inset-left,0px) + 8px)}
.ss-cw.fs .ss-hat{top:auto}
html.ss-fs-on body{position:fixed;inset:0;overflow:hidden;touch-action:none}
html.ss-fs-on .ss-cw.fs{touch-action:auto}
@media(max-width:760px){.ss-ro{order:5;flex-basis:100%}}
@media(orientation:landscape) and (max-height:500px){.ss-cw.fs .ss-cbar{flex-wrap:nowrap}.ss-cw.fs .ss-ro{order:0;flex-basis:auto}.ss-cw.fs .ss-fbar{width:auto;flex:none}.ss-cw.fs .ss-fvq{margin-right:8px}}
.ss-sheet{z-index:300}
.ss-hat{top:auto;bottom:40px;left:8px}
.ss-cw.fs .ss-hat{top:auto;left:calc(env(safe-area-inset-left,0px) + 14px);bottom:calc(var(--tp-sab) + 40px)}
.ss-tags{position:absolute;z-index:3;left:8px;bottom:62px;display:flex;gap:6px;pointer-events:none}
.ss-cw.fs .ss-tags{left:calc(env(safe-area-inset-left,0px) + 14px);bottom:calc(var(--tp-sab) + 62px)}
.ss-xrt{padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid rgba(62,200,201,.35);color:var(--ink-2);font:600 10.5px/1.3 var(--f-body)}
.ss-xrt[hidden]{display:none}
.ss-ro .x{color:var(--acc)}
/* owner watch list (Jason 11:52 AM ET) */
.tp-chip.w{position:relative;padding-left:18px}
.tp-chip.w::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--acc)}
.ss-wl{display:flex;align-items:center;gap:8px;margin:-2px 0 8px;min-height:28px}
.ss-wl[hidden]{display:none}
.ss-wb{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:4px 10px;font:600 12px/1.2 var(--f-body);cursor:pointer}
.ss-wb.on{border-color:rgba(62,200,201,.5);color:var(--acc)}
.ss-wn{color:var(--ink-3,var(--ink-2));font-size:12px}
html.ss-fs-on .tp-app{z-index:250}
.ss-fbar .ss-indb{gap:6px}
@media (orientation:landscape) and (max-height:500px){.ss-cw.fs .ss-ro{display:none}}
@media (orientation:landscape) and (max-height:500px){.ss-cw.fs .ss-fvq .ss-age{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (orientation:landscape) and (max-height:500px){.ss-cw.fs .ss-cx{display:none}}/* phone landscape: pinch / double-tap reset instead of the -/+ buttons */
/* Checks (owner only, extras Oct 23 2026) */
.ss-ck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:4px}
.ss-ckc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:9px 11px;color:var(--ink);font:inherit;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ss-ckc small{font:500 11px/1.2 var(--f-body);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.ss-ckc b{font:600 14px/1.25 var(--f-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ss-ckc.good{border-left:3px solid var(--up)}.ss-ckc.warn{border-left:3px solid #E8C468}.ss-ckc.bad{border-left:3px solid var(--down)}
.ss-ckc.bad b{color:var(--down)}
.ss-gd{border:1px solid var(--down);border-radius:var(--rs);padding:10px 12px;margin:10px 0}.ss-gd b{color:var(--down)}.ss-gd ul{margin:6px 0 4px 18px;padding:0;font:400 13px/1.35 var(--f-body);color:var(--ink-2)}
.ss-plan .ss-row-l small{white-space:normal}.ss-plan .ss-pl-w{display:block;color:var(--ink-2)}
.ss-set .ss-num{width:74px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:500 15px var(--f-body);padding:6px 8px;text-align:right}
.ss-fr .ss-row-l small.bk{color:var(--down)}
.ss-fr .ss-row-l small.pre{color:var(--ink-2)}
.ss-fr .ss-acct{display:inline-block;padding:0 6px;border:1px solid var(--line);border-radius:6px;font-size:11px;line-height:16px;color:inherit}
.ss-fr-day{padding:10px 14px 4px;font:700 11.5px/1.2 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ss-fr-day:not(:first-child){border-top:1px solid var(--line);margin-top:2px}
.ss-fra{margin:4px -16px 10px}.ss-fra .tp-chip[disabled]{opacity:.45}.ss-fra .tp-chip .ss-mut{font-size:11.5px;margin-left:2px}

/* Morning game plan rows, restacked for phone (Jason 1:25 PM ET): ticker/name + price/change/volume on top, details full width */
.ss-pl-hd span{display:flex;flex-direction:column;gap:3px}.ss-pl-hd small{font:400 12px/1.3 var(--f-body)}
.ss-plan .ss-pl-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:14px 16px;text-align:left}
.ss-pl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.ss-pl-s{font:600 15px/1.3 var(--f-body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-pl-s em{font-style:normal;font-weight:500;color:var(--ink-2)}
.ss-pl-q{display:flex;align-items:baseline;gap:8px;flex:none;font-variant-numeric:tabular-nums}.ss-pl-q b{font:600 15px/1.3 var(--f-body)}.ss-pl-q small{font:500 12px/1.3 var(--f-body)}
.ss-pl-body{display:flex;flex-direction:column;gap:4px}.ss-pl-body small{display:block;font:400 12.5px/1.45 var(--f-body);color:var(--ink-3);white-space:normal}
.ss-pl-body .ss-pl-w{color:var(--ink-2)}.ss-pl-body small.warn{color:color-mix(in srgb,var(--down) 70%,var(--ink-2))}
.ss-trip{color:var(--down);font-weight:600;line-height:1.45}
.ss-pl-note{display:block;padding:0 16px 8px;line-height:1.45}

/* company logos (static/clogo.js, Oct 23 2026): fixed round tiles beside tickers; the text next to them keeps its full width */
.ss-pl-top{align-items:center}
.ss-pl-s{flex:1 1 auto}
.ss-sym{display:inline-flex;align-items:center;gap:8px}
@media (min-width:700px){.ss-q-lg{--clg:28px!important}}
.tp-chip.q{display:inline-flex;align-items:center;gap:6px}.tp-chip.q>.clg{margin-left:-4px}
/* side word in Fill review / Journal / Latest signals: same --up / --down as the chart BUY/SELL arrows; ticker, qty, price stay ink */
.ss-side{font-weight:700}.ss-side.buy{color:var(--up)}.ss-side.sell{color:var(--down)}
/* ===== Tops first screen (Jason, Oct 23 PM): exactly 9 tiles + "View all stocks" above the fold at 390x844 / 375.
   Compact top (slim header, one status row, one chip line) and a 3x3 grid of narrow tiles (~142px tall); Jason picked 3x3. */
.tp-app{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
.tp-hd{margin:0 0 4px;padding:0 2px}
.tp-hd-row+.tp-hd-tx{margin-top:6px}
.tp-t{margin:0;font-size:20px}
.tp-stick{padding:6px 16px 6px}
.tp-stat{display:flex;gap:0;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:6px 10px;align-items:center;justify-content:space-between}
html[data-theme=light] .tp-stat{background:#EEF1F4}
.tp-stat .tp-box{padding:0;background:none;border:0;border-radius:0;gap:3px}
html[data-theme=light] .tp-stat .tp-box{background:none}
.tp-stat .tp-lab{display:none}
.tp-stat .tp-pill{height:20px;font-size:12px;padding:0 8px 0 7px;gap:6px}.tp-stat .tp-pill i{width:7px;height:7px}
.tp-stat .tp-cd{font-size:11.5px}
.tp-stat .tp-val{font-size:12px}
.tp-chips{margin-top:8px}
.tp-chip{height:30px;padding:0 13px;font-size:13.5px}
.tp-chip::after{inset:-4px 0}
.tp-sub{display:flex;align-items:center;gap:8px;margin:8px 0 8px}
.tp-sub .tp-seg{flex:none;padding:2px;border-radius:10px}
.tp-sub .tp-seg button{height:26px;padding:0 10px;font-size:13px;border-radius:8px}
.tp-sub .tp-seg+.tp-sesrow{margin-top:0}
.tp-sub .tp-sesrow{flex:1;min-width:0;margin:0 -16px 0 0;padding:0 16px 0 0}
.tp-sub .tp-chip.q{height:28px;padding:0 10px;font-size:12.5px}
.tp-grid{gap:8px}
.tp-card .tp-x{flex-wrap:nowrap;overflow:hidden}
.tp-card .tp-x .tp-tag{flex:none}
.tp-card .tp-tk{font-size:14px}
.tp-card .tp-nm{font-size:11.5px}
.tp-card .tp-ch{margin-top:0;font-size:12.5px}.tp-card .tp-ch svg{width:13px;height:13px}
.tp-pq{display:flex;flex-direction:column;min-width:0}
.tp-more{margin-top:10px}.tp-more-b{height:44px;font-size:15px}
/* 3x3 tiles (9 across on desktop) */
.tp-app .tp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-app .tp-grid .tp-card{gap:0;padding:10px 9px 9px;min-height:142px}
.tp-app .tp-grid .tp-top{gap:7px;margin:0 0 9px}
.tp-app .tp-grid .tp-top .clg{--clg:28px}
.tp-app .tp-grid .tp-id{gap:1px}
.tp-app .tp-grid .tp-pq{gap:2px}
.tp-app .tp-grid .tp-px{font-size:19px;margin:0 -3px;padding:0 3px}.tp-app .tp-grid .tp-px.sm{font-size:16px}
.tp-app .tp-grid .tp-x{margin-top:auto;padding-top:8px}
.tp-app .tp-grid .tp-nm{max-width:100%}
@media(min-width:900px){.tp-app .tp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* one chip line: views | sessions; Gainers/Losers a slim full-width toggle under it (movers only) */
.tp-chips{gap:6px}
.tp-cg{display:inline-flex;align-items:center;gap:6px;flex:none}
.tp-dv{flex:none;width:1px;height:20px;margin:0 3px;background:var(--line);border-radius:1px}
html[data-theme=dark] .tp-dv{background:#2B3A60}
.tp-chips .tp-chip{height:30px;padding:0 12px;font-size:13.5px}
.tp-chips .tp-chip.q{padding:0 11px;font-size:13px}
.tp-sub[hidden]{display:none}
.tp-sub .tp-seg{flex:1;max-width:none}
.tp-sub .tp-seg button{height:24px;font-size:12.5px}
.tp-stat{padding:4px 10px}.tp-stat .tp-box{gap:2px}

/* --------------------------------------------------------------- home cards under the tiles (owner only; tops_home.js) */
.hm{display:flex;flex-direction:column;gap:12px;margin:10px 0 0}
.hm:empty{display:none}
.hm-plan{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 7px;border-radius:var(--rs);background:var(--s-pre-bg);color:var(--ink);text-decoration:none;border:1px solid color-mix(in srgb,var(--cy) 35%,transparent);-webkit-tap-highlight-color:transparent}
.hm-plan-i{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--cy);color:#0A1124;font-size:14px;line-height:1}
.hm-plan-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
.hm-plan-t b{font:700 14px/1.2 var(--f-body)}
.hm-plan-t small{min-width:0;font:500 12px/1.3 var(--f-body);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.hm-plan-a{flex:none;font-size:22px;line-height:1;color:var(--s-pre)}
.hm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 12px 10px;min-width:0}
.hm-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin:0 0 4px}
.hm-h h2{margin:0;font:600 15px/1.25 var(--f-head);color:var(--ink);letter-spacing:.005em}
.hm-see{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 2px 0 8px;border:0;background:none;color:var(--acc);font:600 13px/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap}
.hm-see span{font-size:17px;line-height:1;margin-top:-1px}
.hm-list{list-style:none;margin:0;padding:0}
.hm-list li+li{border-top:1px solid var(--line)}
.hm-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 0;color:var(--ink);text-decoration:none;min-width:0;-webkit-tap-highlight-color:transparent}
a.hm-row:active{opacity:.75}
.hm-row .hm-lg,.hm-row .lgo{flex:none}
.hm-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-id b{font:700 14px/1.2 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-id small{font:500 12px/1.3 var(--f-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-q{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;max-width:48%}
.hm-q b{font:700 14px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.hm-q small{font:500 11.5px/1.3 var(--f-body);color:var(--ink-2);white-space:nowrap}
.hm-c{font:600 12.5px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.hm-c.up{color:var(--up)}.hm-c.dn{color:var(--down)}.hm-c.na{color:var(--ink-3)}
.hm-side{flex:none;width:40px;font:800 12.5px/1 var(--f-body);letter-spacing:.04em}
.hm-wo{color:var(--ink-3)}
.hm-mk{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font:600 10px/1.1 var(--f-body);font-style:normal;vertical-align:1px}
.hm-news{align-items:flex-start}
.hm-news .hm-lg,.hm-news .lgo{margin-top:2px}
.hm-hl{font:500 13.5px/1.35 var(--f-body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-evi{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--acc);font-size:10px}
.hm-cd{font:600 12.5px/1.2 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-cd.soon{color:var(--acc)}.hm-cd.past{color:var(--ink-3)}
.hm-empty{margin:4px 0 6px;font:500 13px/1.45 var(--f-body);color:var(--ink-2)}
.hm-next{display:inline-block;margin-top:4px;color:var(--ink-2)}.hm-next b{color:var(--ink)}
.hm-src{margin:6px 0 0;font:400 11.5px/1.4 var(--f-body);color:var(--ink-3)}
.hm-ix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 0}
.hm-ixc{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:var(--rs);background:var(--surface-2);min-width:0}
.hm-ixs{font:700 13px/1.2 var(--f-body);color:var(--ink);display:flex;flex-direction:column;gap:1px}
.hm-ixs small{font:500 11px/1.25 var(--f-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ixc b{font:700 15px/1.2 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;font:500 13px/1.3 var(--f-body);color:var(--ink-2)}
.hm-sec b{color:var(--ink)}
.hm-bar{display:flex;gap:3px;flex:1;max-width:180px}
.hm-bar i{flex:1;height:8px;border-radius:999px;background:color-mix(in srgb,var(--down) 55%,var(--surface-2))}
.hm-bar i.up{background:var(--up)}
.hm-see:focus-visible,.hm-row:focus-visible,.hm-plan:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
@media (min-width:900px){
 .hm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px}
 .hm-plan{grid-column:1/-1}
}
/* Phone fit (Jason, Oct 23 4:27 PM "there's wasted space" / "you can definitely shrink the tiles"): all 9 tiles and
   "View all stocks" clear the bottom nav at real Safari-tab visible heights (390x664, 393x659, 430x740) and standalone
   390x844. Tiles are content-height (no 142px min-height, chip right under the % line instead of pinned to the bottom),
   tighter padding; the header block (lockup, title, status, chips, Gainers/Losers) is tightened. Desktop is untouched. */
@media (max-width:899px){
 .tp-hd{margin:0 0 2px}
 .tp-hd .ss-w{--wm:21px}
 .tp-hd-mk .bcm{height:21px}
 .tp-hd-row+.tp-hd-tx{margin-top:3px}
 .tp-t{font-size:18px;line-height:1.15}
 .tp-stick{padding-top:4px;padding-bottom:4px}
 .tp-stat{padding:3px 10px}
 .tp-chips{margin-top:4px}
 .tp-chips .tp-chip{height:28px;font-size:13px}.tp-chips .tp-chip.q{height:28px;font-size:12.5px}
 .tp-sub{margin:6px 0 8px}
 .tp-sub .tp-seg button{height:22px;font-size:12px}
 .tp-app .tp-grid{gap:6px}
 .tp-app .tp-grid .tp-card{min-height:0;padding:7px 8px 7px;justify-content:flex-start}
 .tp-app .tp-grid .tp-top{margin:0 0 5px}
 .tp-app .tp-grid .tp-pq{gap:1px}
 .tp-app .tp-grid .tp-px{font-size:18px}.tp-app .tp-grid .tp-px.sm{font-size:15.5px}
 .tp-app .tp-grid .tp-x{margin-top:4px;padding-top:0}
 .tp-app .tp-grid .tp-tag{height:17px}
 .tp-more{margin-top:8px}.tp-more-b{height:40px;font-size:14.5px}
}
.tp-px[data-k=mid]::after{content:"mid";margin-left:3px;font:600 9px/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);vertical-align:super}   /* IEX bid/ask midpoint, not a trade */
.ss-age.mid{color:var(--ink-2)}

/* Header declutter (Jason, Oct 23 4:49 PM "Too cluttered?"), html.tp-dc. Option A (default): no big c. in the header (it stays on
   the splash and the app icon), no "/ Top movers" title on the Tops view (the Movers chip already says it; kept for screen
   readers; other views keep their title), the status card becomes one line: pill · ends 8:00 PM ... Updated 2s ago (the
   date/time stamp moves to the tooltip). Lockup untouched (S of STRATEGIES under the S of SYSTEMATIC). */
html.tp-dc .tp-hd-mk{display:none}
html.tp-dc[data-ssv=tops] .tp-t,html.tp-dc:not([data-ssv]) .tp-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.tp-dc[data-ssv=tops] .tp-hd-row+.tp-hd-tx,html.tp-dc:not([data-ssv]) .tp-hd-row+.tp-hd-tx{margin-top:0}
html.tp-dc .tp-stat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;padding:4px 10px 4px 5px}
html.tp-dc .tp-stat .tp-box{flex-direction:row;align-items:center;gap:7px;min-width:0}
html.tp-dc .tp-stat .tp-box-r{margin-left:auto}
html.tp-dc .tp-stat .tp-box-r .tp-val{display:none}
html.tp-dc .tp-stat .tp-cd{font-size:12px}
@media (max-width:899px){
 html.tp-dc .tp-hd{margin:0 0 4px}
 html.tp-dc .tp-stick{padding-top:2px}
}
/* Option B (?hd=b, dev only): the status sits at the right of the lockup row, three short right-aligned lines matching the
   lockup's height; no status card, so the sticky strip under the header is gone. Other views hide it (it is Tops status). */
html.tp-dc-b .tp-hd-row{padding-right:0;align-items:center}
html.tp-dc-b .tp-hd-row .tp-stat{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;flex:0 1 auto;min-width:0;padding:0;background:none;border:0;border-radius:0}
html.tp-dc-b .tp-hd-row .tp-stat .tp-box{display:contents}
html.tp-dc-b .tp-hd-row .tp-stat .tp-cd{font-size:11.5px;line-height:1.25;text-align:right}
html.tp-dc-b .tp-hd-row .tp-stat .tp-pill{height:19px}
html.tp-dc-b[data-ssv]:not([data-ssv=tops]) .tp-hd-row .tp-stat{display:none}
html.tp-dc-b .tp-stick{display:none}
@media (max-width:899px){html.tp-dc-b .tp-hd{margin:0 0 6px}}
/* Option C (?hd=c, dev only): A plus the diagonal stripes at half strength behind the content */
html.tp-dc-c{--grid-op:.095}html.tp-dc-c[data-theme=light]{--grid-op:.075}

/* Top-right filler mocks (?tr=, localhost only): one slot right-aligned in the lockup row, vertically centred, never taller
   than the lockup (so the tiles do not move) and never wider than the space left of it. */
.tp-tr{display:none}
html[data-tr] .tp-tr{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;margin-left:auto;position:relative}
html[data-tr] .tp-hd-row{padding-right:0}
.tp-tr-mkt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-decoration:none;color:var(--ink);padding:4px 0 4px 8px;-webkit-tap-highlight-color:transparent}
.tp-tr-ix{display:flex;gap:10px;font:600 13px/1.15 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-tr-ix span{color:var(--ink-2)}.tp-tr-ix b{font-weight:700}.tp-tr-ix b.up{color:var(--up)}.tp-tr-ix b.dn{color:var(--down)}.tp-tr-ix b.na{color:var(--ink-3)}
.tp-tr-st{display:inline-flex;align-items:center;gap:5px;font:500 11px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap}
.tp-tr-st i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.tp-tr-st.lv i{background:var(--up)}.tp-tr-st.dl i{background:#E0B341}.tp-tr-st.st{color:#E0B341}.tp-tr-st.st i{background:none;box-shadow:inset 0 0 0 1.5px #E0B341}
html[data-theme=light] .tp-tr-st.dl i{background:#A87A00}html[data-theme=light] .tp-tr-st.st{color:#8A6400}html[data-theme=light] .tp-tr-st.st i{box-shadow:inset 0 0 0 1.5px #8A6400}
.tp-tr-mkt:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.tp-tr-clk{display:inline-flex;align-items:center;gap:7px;padding:4px 0;white-space:nowrap;color:var(--ink)}
.tp-tr-clk b{font:600 17px/1 var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tp-tr-clk small{font:600 11px/1 var(--f-body);letter-spacing:.06em;color:var(--ink-3)}
.tp-tr-dot,.tp-tr-clk i{width:8px;height:8px;border-radius:50%;background:var(--s-cl)}
.tp-tr-clk.k-pre i{background:var(--s-pre)}.tp-tr-clk.k-regular i{background:var(--s-reg)}.tp-tr-clk.k-post i{background:var(--s-post)}

/* 'feel alive': live dots pulse only while the feed is live; stale = grey, static, labelled; flashes reuse .fu/.fd */
.tp-pill.stale i{background:var(--ink-3);animation:none}
.tp-stl{font-weight:600;color:#E0B341}html[data-theme=light] .tp-stl{color:#8A6400}
.tp-tr-st.lv i{animation:tpp 1.8s infinite;color:var(--up)}
.tp-tr-ix b,.hm-q [data-hm-px]{border-radius:4px;padding:0 2px;margin:0 -2px;transition:background .5s,color .5s}
.tp-tr-ix b.fu,.hm-q [data-hm-px].fu{background:color-mix(in srgb,var(--flash-up) 45%,transparent);color:var(--up);transition:none}
.tp-tr-ix b.fd,.hm-q [data-hm-px].fd{background:color-mix(in srgb,var(--flash-dn) 45%,transparent);color:var(--down);transition:none}
@media (prefers-reduced-motion:reduce){.tp-tr-st.lv i{animation:none}.tp-tr-ix b,.hm-q [data-hm-px]{transition:none}.tp-tr-ix b.fu,.tp-tr-ix b.fd,.hm-q [data-hm-px].fu,.hm-q [data-hm-px].fd{background:none}}

/* Oct 23 logo pass: 28 px company logo at the start of every list row (signals feed, swing, fill review) */
.ss-row>.ss-row-lg{flex:none}.ss-row>.ss-row-lg+.ss-row-l{flex:1}
.hm-id .hm-side{display:inline;width:auto;margin-left:4px}
.tp-sh-hd .clg{flex:none}

/* Standalone gap fix (Jason, Oct 23 6:29 PM "Random space", iPhone Home Screen app): the iPhone status-bar inset
   (env(safe-area-inset-top), ~47-59px) was added twice: once above the lockup (.tp-app padding) and again inside the sticky
   status strip, so in standalone a blank band the height of the status bar sat between the lockup / SPY-QQQ row and the
   status strip (a browser tab reports 0, which is why tab shots never showed it). The strip now has normal padding and
   sticks just below the status bar (top: inset) instead of at 0 with the inset as padding; a fixed band the colour of the
   page sits under the status bar so scrolled content never shows through it. Desktop / browser tabs: inset is 0, no change. */
.tp-stick{top:env(safe-area-inset-top,0px)}
body.tp::after{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:21;pointer-events:none}
/* Ticker search in the chip row (Jason Oct 23 'Magnifier.'): the outer .tp-chips keeps its per-breakpoint margins / gap;
   the magnifier is pinned, only the inner strip scrolls (edge fade so chips slide under cleanly). */
.tp-chips.tp-chipbar{overflow:visible;position:relative;padding-right:0}
.tp-chips-sc{display:flex;align-items:center;gap:inherit;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding-right:16px;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px);mask-image:linear-gradient(90deg,transparent 0,#000 8px);padding-left:8px;margin-left:-8px}
.tp-chips-sc::-webkit-scrollbar{display:none}
.tp-srch{flex:none;display:flex}
.tp-chip.tp-srch-b{display:grid;place-items:center;padding:0;aspect-ratio:1;width:auto}
.tp-srch-b svg{width:16px;height:16px}
.tp-srch-b[aria-expanded=true]{border-color:var(--acc);color:var(--acc)}
.tp-srch-b:focus-visible,.tp-srch-x:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tp-srch-pop{position:absolute;top:calc(100% + 8px);left:16px;z-index:60;width:min(320px,calc(100vw - 32px));padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme=light] .tp-srch-pop{box-shadow:0 10px 30px rgba(15,23,42,.16)}
.tp-srch-pop[hidden]{display:none}
.tp-srch-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px -4px 8px 0}
.tp-srch-lab{font:500 12.5px/1.3 var(--f-body);color:var(--ink-2)}
.tp-srch-x{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.tp-srch-x svg{width:16px;height:16px}
.tp-srch-in{display:flex;gap:8px}
.tp-srch-in input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:600 16px/1 var(--f-body);text-transform:uppercase;-webkit-appearance:none;appearance:none}
html[data-theme=light] .tp-srch-in input{background:#fff}
.tp-srch-in input::-webkit-search-cancel-button{display:none}
.tp-srch-in input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.tp-srch-in input::placeholder{text-transform:none;font-weight:400;color:var(--ink-3)}
.tp-srch-in button{height:42px;padding:0 16px;border-radius:10px;border:0;background:var(--sel-bg);color:var(--sel-ink);font:700 14px/1 var(--f-body);cursor:pointer}
.tp-srch-err{margin:6px 0 0;font:500 12px/1.3 var(--f-body);color:var(--down)}
.tp-srch-qk{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tp-srch-qk:empty{display:none}
.tp-srch-qk .tp-chip{height:30px;font-size:13px}
/* floated under a ticker on the Advanced chart (absolute in the page; fixed over the full-screen chart) */
.tp-srch-pop.fl{position:absolute;right:auto;z-index:300}.tp-srch-pop.fl.fx{position:fixed}
/* Advanced: the ticker is a button ('PENG \25be'); same type as before so the header does not move */
.ss-symb{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:6px}
.ss-symb i{font-style:normal;font-size:.6em;color:var(--ink-3);transform:translateY(.05em)}
.ss-symb[aria-expanded=true] i{color:var(--acc)}
.ss-symb:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Pull to refresh (tops_ptr.js; Home Screen app only): a small circle drops from under the status bar; arrow turns when
   the pull is far enough, then spins while the movers / tiles / home cards refetch in place. The native rubber band is
   switched off in standalone only so it does not fight the pull (Safari tabs keep their own pull-to-reload). */
html.tp-sa,html.tp-sa body{overscroll-behavior-y:none}
.tp-ptr{position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:30;transform:translate(-50%,-48px);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease}
.tp-ptr.on{opacity:1}.tp-ptr.drag{transition:none}
.tp-ptr-c{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-theme=light] .tp-ptr-c{box-shadow:0 6px 18px rgba(15,23,42,.16)}
.tp-ptr-c svg{grid-area:1/1;width:18px;height:18px}
.tp-ptr-a{transition:transform .15s ease}.tp-ptr.arm .tp-ptr-c,.tp-ptr.spin .tp-ptr-c{color:var(--acc)}
.tp-ptr-s,.tp-ptr-d{display:none}
.tp-ptr.spin .tp-ptr-a{display:none}.tp-ptr.spin .tp-ptr-s{display:block;animation:tp-ptr-r .8s linear infinite}
@keyframes tp-ptr-r{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tp-ptr,.tp-ptr-a{transition:none}.tp-ptr.spin .tp-ptr-s{display:none}.tp-ptr.spin .tp-ptr-d{display:block}}
.tp-ptr-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header fill mocks (Jason Oct 23 6:39-6:47 PM, "fill in the space" / "make the tiles bigger" / "I want all 9"), localhost
   only via ?lk= and ?fill=. Lockup stays top-left (S of STRATEGIES under the S of SYSTEMATIC, lime period): ?lk=125 / 150.
   ?fill=4 (recommended): no extra row; the 3x3 tiles take the spare height. Tile height follows the viewport
   (--th: 108px at 390x664 Safari with toolbars, up to 142px, the pre-c76 size, on 780-844 tall screens), and the
   logo / ticker / name / price / padding scale with it (StocksNews 'Market Scanner' proportions: roomy tile, big bold
   price, bigger logo; their branding / colours not copied). ?fill=2: slim 'Search ticker' field under the lockup row (opens the
   ticker search; the chip-row magnifier goes). ?fill=3: SPY / QQQ / IWM / VIX row instead of the SPY / QQQ corner. */
@media (max-width:899px){
 html[data-lk="125"] .tp-hd .ss-w{--wm:26px}
 html[data-lk="150"] .tp-hd .ss-w{--wm:31.5px}
 html[data-fill~="2"] .tp-fill,html[data-fill~="3"] .tp-fill{display:block;margin:6px 0 0}
 html[data-fill~="2"] .tp-srch{display:none}
 html[data-fill~="3"] .tp-tr{display:none}
}
.tp-fill{display:none}
html[data-ssv]:not([data-ssv=tops]) .tp-fill{display:none!important}
.tp-sfield{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink-3);font:500 15px/1 var(--f-body);text-align:left;cursor:text;-webkit-tap-highlight-color:transparent}
.tp-sfield svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.tp-sfield:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tp-mrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none}
.tp-mc{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:5px 4px 6px}
.tp-mc+.tp-mc{border-left:1px solid var(--line)}
.tp-mc small{font:600 11px/1.2 var(--f-body);letter-spacing:.04em;color:var(--ink-3)}
.tp-mc b{font:700 14px/1.2 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-mc b.up{color:var(--up)}.tp-mc b.dn{color:var(--down)}.tp-mc b.na{color:var(--ink-3)}
.tp-mc b i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--ink-2)}
.tp-mc.st b{color:var(--ink-3)}


/* Movers grid, phone (Jason, Oct 23 7:17 PM: "I want what they do. It's 6"): exactly 6 tiles in 2 columns with the reference
   proportions (36px-class logo, 17px bold ticker, 13px full name, 22-24px bold price, change line under it, badges on the
   change line, generous padding). Tiles grow with the visible height (clamped 108-150px); extra height goes to roomier tiles
   and more of the watch list, never more tiles. 380px = everything on screen that is not tile rows (header, strip, chips,
   Gainers/Losers, View all, nav, watch-list peek). 6 tiles + View all + watch-list start clear the nav from 659px up. */
@media (max-width:899px){
 .tp-hd .ss-w{--wm:26px}   /* 1.25x lockup, top-left (was 21px) */
 .tp-app{--th:clamp(108px,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 380px) / 3),150px)}
 .tp-app .tp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(8px + (var(--th) - 108px) * .08)}
 .tp-app .tp-grid .tp-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "px px" "ch x";column-gap:6px;row-gap:0;min-height:var(--th);padding:calc(10px + (var(--th) - 108px) * .1) 12px}
 .tp-app .tp-grid .tp-top{grid-area:top;gap:calc(8px + (var(--th) - 108px) * .05);margin:0 0 calc(5px + (var(--th) - 108px) * .1)}
 .tp-app .tp-grid .tp-top .clg{--clg:calc(32px + (var(--th) - 108px) * .12)}
 .tp-app .tp-grid .tp-id{gap:calc(1px + (var(--th) - 108px) * .04)}
 .tp-app .tp-grid .tp-tk{font-size:calc(16px + (var(--th) - 108px) * .04);font-weight:700}
 .tp-app .tp-grid .tp-nm{font-size:calc(12.5px + (var(--th) - 108px) * .02)}
 .tp-app .tp-grid .tp-pq{display:contents}
 .tp-app .tp-grid .tp-px{grid-area:px;justify-self:start;align-self:end;font-size:calc(21px + (var(--th) - 108px) * .08);font-weight:800;line-height:1.2}
 .tp-app .tp-grid .tp-px.sm{font-size:calc(18.5px + (var(--th) - 108px) * .07)}
 .tp-app .tp-grid [data-ch]{grid-area:ch;align-self:center;min-width:0;white-space:nowrap}
 .tp-app .tp-grid .tp-ch{font-size:calc(12.5px + (var(--th) - 108px) * .012);flex-wrap:nowrap}
 .tp-app .tp-grid .tp-x .tp-tag{padding:0 5px;font-size:10px}
 .tp-app .tp-grid .tp-x{grid-area:x;align-self:center;justify-self:end;max-width:100%;margin:0;padding:0}
}
/* from 720px tall the tiles have room for the full company name on up to 2 lines */
@media (max-width:899px) and (min-height:720px){
 .tp-app .tp-grid .tp-top{align-items:flex-start}
 .tp-app .tp-grid .tp-nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
}
@supports not (height:100dvh){@media (max-width:899px){.tp-app{--th:clamp(108px,calc((100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 380px) / 3),150px)}}}

/* Header rhythm (Jason, Oct 23 7:44 PM "Empty space" / 7:45 PM "Oddly staggered"). Standalone: the top inset is NOT doubled;
   the lockup ink sits ~9px under the status bar (inset + 4px box; 4px in a browser tab). One ~8px step everywhere (ink to
   ink / box to box): status bar -> lockup row, lockup row -> status strip, strip -> chips. Row 1 is one baseline: SPY / QQQ sit on the wordmark baseline, right edge on
   the page edge, one line (dot + SPY + QQQ, no 'Yahoo · after hrs' sub-line). The strip is always one line: pill + 'ends
   8:00 PM' left, source + age right ('Updated 6h ago · stale', 'Yahoo · 4s old'), centred; the right side clips with an
   ellipsis before it could ever wrap. */
.tp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html[data-tr=mkt] .tp-hd-row{align-items:baseline}
.tp-tr-mkt{flex-direction:row;align-items:baseline;gap:7px;padding:8px 0 8px 8px;margin:-8px 0}
.tp-tr-mkt .tp-tr-st{align-self:center;gap:0}
.tp-tr-mkt .tp-tr-st i{width:7px;height:7px}
html.tp-dc .tp-stat{flex-wrap:nowrap;gap:10px}
html.tp-dc .tp-stat .tp-box{flex:none;white-space:nowrap}
html.tp-dc .tp-stat .tp-box-r{flex:0 1 auto;min-width:0;overflow:hidden}
html.tp-dc .tp-stat .tp-box-r .tp-cd{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:899px){
 /* the wordmark's line box has ~5px of air above the 't' ascender, so inset + 4px puts the ink ~9px under the status bar */
 .tp-app{padding-top:calc(env(safe-area-inset-top,0px) + 4px)}
 html.tp-dc .tp-hd{margin:0}
 html.tp-dc .tp-stick{padding-top:8px}
 /* freed height (one strip line, ~16px): half to the 6 tiles (--th), half to the watch-list peek */
 .tp-app{--th:clamp(108px,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 372px) / 3),150px)}
}
@supports not (height:100dvh){@media (max-width:899px){.tp-app{--th:clamp(108px,calc((100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 372px) / 3),150px)}}}
/* Caps tracking (Jason, Oct 23 7:48 PM "Weird spacing in systematic strategies letters"): the shared slash spec tracks the caps
   at .18em (1.87px at the 1.25x header), which reads gappy next to the tight wordmark; .1em here (header, splash, sign-in).
   Nothing forces the two lines to equal width; the S of STRATEGIES stays under the S of SYSTEMATIC (same ghost-slash box). */
.ss-w{--slk-tr:.1em}
html[data-tr=mkt] .tp-hd-row{margin-right:-2px}   /* SPY / QQQ right edge on the strip's right edge (the header has 2px side padding) */

/* Light-mode stripes (Jason, Oct 23 7:56 PM "the slightest bit more noticeable"): --grid-op .15 -> .19 (+25%) on the light
   theme only (set in the light token block at the top); dark stays .19; cards stay opaque on top. */
/* Theme toggle (tops.js): 32px round sun / moon at the far right of the lockup row, centred on the wordmark line (the row
   is baseline-aligned, the wordmark box is 26px tall, so -3px puts the 32px button's centre on it). Auto = small dot. */
.tp-tt{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);cursor:pointer;
 -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.tp-hd-row>.tp-tt{align-self:flex-start;margin:-3px 0 0}
html[data-theme=light] .tp-tt{background:#FFFFFF}
.tp-tt svg{grid-area:1/1;width:17px;height:17px}
html[data-theme=dark] .tp-tt-sun,html[data-theme=light] .tp-tt-moon{display:none}
.tp-tt-a{position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc);display:none}
.tp-tt[data-mode=auto] .tp-tt-a{display:block}
.tp-tt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tp-tt.tp-tt-ok{border-color:var(--acc)}
@media (prefers-reduced-motion:no-preference){.tp-tt svg{animation:tptt .28s ease-out}@keyframes tptt{from{transform:rotate(-40deg) scale(.8);opacity:.4}}}
html[data-tr=mkt] .tp-hd-row{gap:10px}
html[data-tr=mkt] .tp-hd-row>.tp-tr{margin-left:auto}
/* fallback placement (?tt=chip, localhost only): last item of the chip row, like the magnifier at its start */
.tp-chipbar>.tp-tt{align-self:center;margin:0 16px 0 6px}