/* ==========================================================================
   Portexa app shell — the signed-in workspace (templates/base.html).

   One sheet for the frame every member page shares: design tokens, the
   sidebar (components/sidebar.html + _nav_link.html + _nav_group.html), the
   top bar (components/top_navigation.html + _user_menu.html +
   _notifications_menu.html), the fixed page heading, flash messages, and the
   few site-wide utilities page templates rely on (frozen table columns, the
   freshness chips, the brand line, pinned bars).

   Behaviour lives in static/js/app-shell.js. Page vocabularies (tm-*, hm-*,
   fd-*, sp-* …) keep their own sheets; the public site keeps
   portexa-design-system.css (pds-*).

   Tokens: the font, size, space, radius, shadow and colour values come from
   the one token sheet, static/css/portexa/tokens.css (loaded before this
   one; the design preset may override it). The names below are the shell's
   own, kept as aliases so every rule and page that reads them is unchanged;
   dark mode needs no second block because the tokens change under html.dark.

   Breakpoints: ≥1280 wide · 1024 sidebar docks (below it is a drawer) ·
   768 tablet · <768 phone · 320 minimum.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

/* Type (--font-*, --leading-*), space (--space-*), radius (--radius-*) and
   shadows (--shadow-sm, --shadow-menu, --shadow-drawer) are read straight
   from tokens.css. */

:root {
    /* Shell geometry. --shell-sidebar-w is the width in force: the docked
       width, the collapsed rail, or 0 (visitors, framed pages, phones). */
    --sidebar-width: 15rem;
    --sidebar-collapsed-width: 4rem;
    --topbar-height: 3.5rem;
    --shell-sidebar-w: 0px;
    --page-gutter: 1rem;

    /* Surfaces */
    --surface-page: var(--color-bg);
    --surface-chrome: var(--color-chrome);          /* sidebar + top bar */
    --surface-primary: var(--color-surface);        /* cards */
    --surface-secondary: var(--color-surface-subtle);
    --surface-sunken: var(--color-surface-sunken);
    --surface-elevated: var(--color-surface-raised); /* menus, tooltips */
    --surface-hover: var(--color-surface-hover);

    --border-color: var(--color-border);
    --border-strong: var(--color-border-strong);

    /* Text */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-faint: var(--color-text-faint);

    /* Brand: the Portexa blue, the logo's gold, and the sky "selected"
       language every analysis page already uses (analysis-controls.css). */
    --brand-primary: var(--color-brand-primary);
    --brand-primary-hover: var(--color-brand-primary-hover);
    --brand-soft: var(--color-brand-soft);
    --brand-accent: var(--color-brand-gold);
    --accent: var(--color-accent);
    --accent-soft: var(--color-accent-soft);
    --accent-ring: var(--color-accent-ring);
    --focus-color: var(--color-focus);

    --positive: var(--color-positive);
    --positive-ink: var(--color-positive-ink);      /* green as small text: AA on white */
    --negative: var(--color-negative);
    --warning: var(--color-warning);
    --info: var(--color-info);

    /* Navigation */
    --nav-text: var(--color-text-secondary);
    --nav-icon: var(--color-text-muted);
    --nav-hover-bg: var(--color-surface-hover);
    --nav-active-bg: var(--color-accent-soft);
    --nav-active-text: var(--color-accent);
    --nav-active-bar: var(--color-focus);
    --nav-guide: var(--color-border);
    --nav-label: var(--color-text-muted);           /* section labels: AA on white */

    /* Layering, back to front. The stock popup (components/_stock_popup.html)
       sits at 80/90 and the search overlay at 95, between dropdown and modal. */
    --z-base: 0;
    --z-pinned: 25;        /* bars pinned under the heading ([data-px-pin]) */
    --z-header: 30;        /* the fixed page heading */
    --z-sidebar: 40;       /* docked sidebar (≥1024) */
    --z-topbar: 50;
    --z-backdrop: 55;      /* dims the page and the top bar behind the drawer */
    --z-drawer: 60;        /* the sidebar as a phone drawer: above the top bar */
    --z-dropdown: 70;      /* top-bar menus, search results */
    --z-modal: 100;
    --z-toast: 110;
    --z-tooltip: 120;
}

/* The two navigation greys the dark sidebar tunes for itself. */
html.dark {
    --nav-icon: #7c8aa0;
    --nav-label: #8391a7;
}

@media (min-width: 1024px) {
    :root { --shell-sidebar-w: var(--sidebar-width); --page-gutter: 1.5rem; }
    html.shell-collapsed { --shell-sidebar-w: var(--sidebar-collapsed-width); }
}
/* No sidebar: visitors on base.html pages and pages framed in the popup. */
html.px-public, html.px-embed { --shell-sidebar-w: 0px !important; }

/* ── Base ───────────────────────────────────────────────────────────────── */

body {
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
}
body.shell-body { display: flex; flex-direction: column; min-height: 100vh; }

/* Wide content (tables, charts, tickers) scrolls inside its own box, never
   the page — otherwise the body slides sideways under the fixed sidebar. */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Touch screens: entry fields keep 16px text for comfortable typing. Zero
   specificity so the mobile filter scale (_filters_mobile.html) wins for
   filters; !important because fields size themselves with utility classes.
   iOS focus-zoom is capped by the viewport script in base.html. */
@media (hover: none) and (pointer: coarse) {
    :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),
    select,
    textarea) {
        font-size: 16px !important;
    }
}

[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
html.dark ::-webkit-scrollbar-thumb { background-color: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: #475569; }

/* The phone drawer (and the search overlay) freeze the page behind them. */
html.shell-lock, html.shell-lock body { overflow: hidden !important; }

.shell-skip {
    position: fixed; left: var(--space-3); top: -4rem; z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--font-sm); font-weight: var(--font-weight-semibold);
    color: #fff; background: #1e4ed8; text-decoration: none;
    transition: top .15s ease;
}
.shell-skip:focus { top: var(--space-3); outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* ── Frame ──────────────────────────────────────────────────────────────── */

.main-content-wrapper { display: flex; flex: 1 1 auto; min-height: 0; }

/* The content sits beside the fixed sidebar. No overflow value here: any
   non-visible overflow makes this box the scroll container for sticky
   descendants. `min-width: 0` stops wide children pushing it past its share. */
.content-area {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--shell-sidebar-w);
    max-width: calc(100% - var(--shell-sidebar-w));
}

/* Room for the fixed top bar plus the fixed page heading, whose height the
   shell script keeps in --page-header-height. */
main.main-scrollable {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: calc(var(--topbar-height) + var(--page-header-height, 5.5rem)) var(--page-gutter) var(--page-gutter);
}
main.main-scrollable:focus { outline: none; }

.footer-wrapper {
    flex-shrink: 0;
    margin-left: var(--shell-sidebar-w);
    width: calc(100% - var(--shell-sidebar-w));
    max-width: 100%;
    overflow-x: hidden;
}

/* The shared footer ({% site_footer %}, components/footer.html) inside the
   app. It is drawn with the public site's design system, whose warm palette
   and centred 1280px column belong to the website; here it takes the app's
   own tokens — the chrome surface of the sidebar and top bar, the slate
   text, the app border — and, for members, lines up with the page content
   (sidebar edge + page gutter), so it reads as part of the page in both
   themes. The pds tokens share names with the app's, so the app values are
   read on .footer-wrapper (outside .pds) and handed in under other names. */
.footer-wrapper {
    --ft-surface: var(--surface-chrome);
    --ft-border: var(--border-color);
    --ft-text: var(--text-primary);
    --ft-text-2: var(--text-secondary);
    --ft-muted: var(--text-muted);
    --ft-accent: var(--accent);
    background: var(--surface-chrome);
}
.footer-wrapper .pds.pds-footer {
    --surface-soft: var(--ft-surface);
    --border: var(--ft-border);
    --text-primary: var(--ft-text);
    --text-secondary: var(--ft-text-2);
    --text-body: var(--ft-text-2);
    --text-muted: var(--ft-muted);
    --portexa-primary-ink: var(--ft-accent);
    font-family: var(--font-sans);
}
html:not(.px-public) .footer-wrapper .pds-footer .pds-container {
    max-width: none; padding-left: var(--page-gutter); padding-right: var(--page-gutter);
}
html:not(.px-public) .footer-wrapper .pds-footer__top { gap: 32px; padding: 40px 0 32px; }
html:not(.px-public) .footer-wrapper .pds-footer__disclaimer { padding: 16px 0; }
html:not(.px-public) .footer-wrapper .pds-footer__bottom { padding: 16px 0 24px; }

/* The popup's framed view (?embed=1): no sidebar, bar, heading or footer. */
html.px-embed main.main-scrollable { padding: .75rem 1rem 1.25rem; }
html.px-embed .stock-shell .stock-ribbon { top: 0; }
@media (max-width: 767px) {
    html.px-embed main.main-scrollable { padding: .5rem .5rem 1rem; }
}

/* ── Brand ──────────────────────────────────────────────────────────────── */

.shell-brand {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    color: var(--text-primary); text-decoration: none; border-radius: var(--radius-md);
}
.shell-brand-mark { display: block; flex: none; height: 30px; width: auto; }
.shell-brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.1; }
/* The brand kit's wordmark (website/branding.py) has a light and a dark file;
   the theme hides the other (hide-only rules, so the phone rules below that
   hide the word still win). */
.shell-brand-word { display: block; height: 21px; width: auto; }
html:not(.dark) .shell-brand-word.is-dark,
html.dark .shell-brand-word.is-light { display: none; }
.shell-brand-tag { margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.shell-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: var(--z-drawer);
    display: flex; flex-direction: column;
    width: min(20rem, 86vw);
    background: var(--surface-chrome);
    border-right: 1px solid var(--border-color);
    font-feature-settings: "tnum" 1, "lnum" 1;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}
.shell-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--shadow-drawer);
    transition: transform .22s ease, visibility 0s;
}
@media (min-width: 1024px) {
    .shell-sidebar {
        z-index: var(--z-sidebar);
        width: var(--shell-sidebar-w);
        transform: none;
        visibility: visible;
        transition: none;
    }
    .shell-sidebar.is-open { box-shadow: none; }
}

.shell-sidebar-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    height: var(--topbar-height); padding: 0 var(--space-3) 0 var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
/* The drawer's close button; the docked sidebar has none. */
.shell-sidebar-head .shell-sidebar-close { display: inline-flex; }
@media (min-width: 1024px) { .shell-sidebar-head .shell-sidebar-close { display: none; } }

.shell-backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(15, 23, 42, .5);
}
@media (min-width: 1024px) { .shell-backdrop { display: none !important; } }

/* The scrolling list (class name kept: the scroll-memory code finds it). */
.sidebar-scroll-container {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: var(--space-2) var(--space-2) var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.sidebar-scroll-container:hover, .sidebar-scroll-container:focus-within { scrollbar-color: var(--border-strong) transparent; }

/* A link (components/_nav_link.html). */
.sidebar-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    min-height: 32px; margin: 1px 0; padding: 0 var(--space-2) 0 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-ui); font-weight: var(--font-weight-medium); line-height: 1.25;
    color: var(--nav-text); text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar-item > .fa-fw { flex: none; width: 16px; font-size: var(--font-ui); text-align: center; color: var(--nav-icon); }
.sidebar-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item:hover { color: var(--text-primary); background: var(--nav-hover-bg); }
.sidebar-item:hover > .fa-fw { color: var(--text-secondary); }
.sidebar-item.active {
    color: var(--nav-active-text); background: var(--nav-active-bg);
    font-weight: var(--font-weight-semibold);
}
.sidebar-item.active > .fa-fw { color: var(--nav-active-text); }
.sidebar-item:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }

/* A plan-locked link: dimmed, one padlock (drawn once, in the markup). */
.sidebar-item.nav-locked { color: var(--text-muted); }
.sidebar-item.nav-locked > .fa-fw { color: var(--text-faint); opacity: .7; }
.sidebar-item.nav-locked:hover { color: var(--text-secondary); }
.nav-lock { flex: none; font-size: 9px; color: var(--text-faint); }

/* A group: a button that opens its links (components/_nav_group.html). */
.sidebar-group { margin-top: 2px; }
.sidebar-group-title {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 36px; padding: 0 var(--space-2) 0 6px;
    border: 0; border-radius: var(--radius-md); background: none;
    font: inherit; font-size: var(--font-ui); font-weight: var(--font-weight-semibold); text-align: left;
    color: var(--text-primary); cursor: pointer;
    transition: background-color .12s ease;
}
.sidebar-group-title:hover { background: var(--nav-hover-bg); }
.sidebar-group-title:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.shell-group-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    font-size: 11px; color: var(--tone);
    background: var(--tone-soft);
}
.shell-group-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-chevron { flex: none; font-size: 9px; color: var(--text-faint); transition: transform .18s ease; }
.sidebar-group.expanded > .sidebar-group-title .shell-chevron { transform: rotate(180deg); }
/* The group holding the current page, while it is closed or the rail is collapsed. */
.sidebar-group.has-active > .sidebar-group-title .shell-group-label { color: var(--nav-active-text); }

/* Group tones: one accent per module, on its icon only. */
.tone-violet  { --tone: #7c3aed; --tone-soft: rgba(124, 58, 237, .10); }
.tone-indigo  { --tone: #4f46e5; --tone-soft: rgba(79, 70, 229, .10); }
.tone-cyan    { --tone: #0891b2; --tone-soft: rgba(8, 145, 178, .10); }
.tone-emerald { --tone: #059669; --tone-soft: rgba(5, 150, 105, .10); }
.tone-rose    { --tone: #e11d48; --tone-soft: rgba(225, 29, 72, .09); }
.tone-teal    { --tone: #0d9488; --tone-soft: rgba(13, 148, 136, .10); }
.tone-blue    { --tone: #2563eb; --tone-soft: rgba(37, 99, 235, .10); }
.tone-amber   { --tone: #d97706; --tone-soft: rgba(217, 119, 6, .11); }
.tone-pink    { --tone: #db2777; --tone-soft: rgba(219, 39, 119, .09); }
.tone-slate   { --tone: #475569; --tone-soft: rgba(71, 85, 105, .10); }
html.dark .tone-violet  { --tone: #a78bfa; --tone-soft: rgba(167, 139, 250, .14); }
html.dark .tone-indigo  { --tone: #818cf8; --tone-soft: rgba(129, 140, 248, .14); }
html.dark .tone-cyan    { --tone: #22d3ee; --tone-soft: rgba(34, 211, 238, .12); }
html.dark .tone-emerald { --tone: #34d399; --tone-soft: rgba(52, 211, 153, .12); }
html.dark .tone-rose    { --tone: #fb7185; --tone-soft: rgba(251, 113, 133, .13); }
html.dark .tone-teal    { --tone: #2dd4bf; --tone-soft: rgba(45, 212, 191, .12); }
html.dark .tone-blue    { --tone: #60a5fa; --tone-soft: rgba(96, 165, 250, .14); }
html.dark .tone-amber   { --tone: #fbbf24; --tone-soft: rgba(251, 191, 36, .12); }
html.dark .tone-pink    { --tone: #f472b6; --tone-soft: rgba(244, 114, 182, .12); }
html.dark .tone-slate   { --tone: #94a3b8; --tone-soft: rgba(148, 163, 184, .12); }

/* The group's links slide open (grid rows 0fr → 1fr). Closed links are
   hidden from the tab order and screen readers, not only from sight. */
.sidebar-group-content {
    display: grid; grid-template-rows: 0fr;
    margin-left: 17px; padding-left: 8px;
    border-left: 1px solid var(--nav-guide);
    transition: grid-template-rows .2s ease;
}
.shell-group-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .2s; }
.sidebar-group.expanded > .sidebar-group-content { grid-template-rows: 1fr; }
.sidebar-group.expanded > .sidebar-group-content > .shell-group-inner { visibility: visible; transition: visibility 0s; padding: 2px 0 6px; }
.sidebar-group-content .sidebar-item.active::before {
    content: ""; position: absolute; left: -9px; top: 5px; bottom: 5px;
    width: 2px; border-radius: 2px; background: var(--nav-active-bar);
}
/* While the sidebar restores its scroll position on load, groups open and
   close without animating, so the position lands on the final layout. */
.sidebar-restoring .sidebar-group-content { transition: none !important; }
.sidebar-restoring .shell-group-inner { transition: none !important; }

.shell-nav-label {
    padding: 10px 10px 4px;
    font-size: var(--font-xs); font-weight: var(--font-weight-bold); letter-spacing: .07em; text-transform: uppercase;
    color: var(--nav-label);
}
.shell-group-inner > .shell-nav-label:first-child { padding-top: 6px; }
.shell-nav-sep { height: 1px; margin: 6px 10px; background: var(--border-color); }

/* Second-level accordion inside a long group (the staff sections). */
.sidebar-section { margin: 1px 0; }
.sidebar-section-title {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    min-height: 30px; padding: 0 var(--space-2) 0 10px;
    border: 0; border-radius: var(--radius-md); background: none;
    font: inherit; font-size: var(--font-xs); font-weight: var(--font-weight-bold); letter-spacing: .05em; text-transform: uppercase;
    text-align: left; color: var(--text-muted); cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar-section-title > i:first-child { flex: none; width: 14px; font-size: 11px; text-align: center; color: var(--tone, var(--text-faint)); }
.sidebar-section-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-section-title:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.sidebar-section-title:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.sidebar-section.open > .sidebar-section-title { color: var(--text-primary); }
.sidebar-section-chevron { margin-left: auto; font-size: 8px; transition: transform .18s ease; }
.sidebar-section.open .sidebar-section-chevron { transform: rotate(180deg); }
.sidebar-section-body { display: none; margin: 1px 0 6px 6px; }
.sidebar-section.open > .sidebar-section-body { display: block; }
/* A role that can open nothing in a section never sees its heading. */
.sidebar-section:not(:has(.sidebar-item)) { display: none; }

/* Status signs after a label: live stream, flagship tool, beta, pro. Each has
   a title and a screen-reader word in the markup, never colour alone. */
.nav-sign { flex: none; position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 999px; }
.nav-sign-live { background: #16a34a; }
.nav-sign-live::after {
    content: ""; position: absolute; inset: -3px; border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, .55); animation: navPulse 2.2s ease-out infinite;
}
.nav-sign-power { width: 2px; height: 5px; border-radius: 1px; margin: 0 3px; background: #6366f1; }
.nav-sign-power::before, .nav-sign-power::after { content: ""; position: absolute; bottom: 0; width: 2px; border-radius: 1px; background: #6366f1; }
.nav-sign-power::before { left: -3px; height: 3px; }
.nav-sign-power::after { left: 3px; height: 7px; }
html.dark .nav-sign-power, html.dark .nav-sign-power::before, html.dark .nav-sign-power::after { background: #818cf8; }
.nav-sign-beta { width: 7px; height: 7px; background: transparent; border: 1.5px solid #d97706; border-radius: 2px; transform: rotate(45deg); }
.nav-sign-pro { width: 7px; height: 7px; background: #7c3aed; border-radius: 1px; transform: rotate(45deg); }
.nav-sign-muted { opacity: .4; }
.nav-sign-muted::after { animation: none; border-color: rgba(100, 116, 139, .4); }
@keyframes navPulse { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* The plan card at the foot of the sidebar. */
.shell-sidebar-foot { flex: none; padding: var(--space-2); border-top: 1px solid var(--border-color); }
.shell-plan {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
    border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none;
}
.shell-plan:hover { background: var(--nav-hover-bg); }
.shell-plan:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.shell-plan > i { flex: none; width: 16px; font-size: 12px; text-align: center; color: var(--brand-accent); }
.shell-plan-text { flex: 1 1 auto; min-width: 0; font-size: var(--font-sm); line-height: 1.2; }
.shell-plan-text span { display: block; font-size: var(--font-xs); font-weight: var(--font-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.shell-plan-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.shell-plan-go { flex: none; font-size: var(--font-xs); font-weight: var(--font-weight-semibold); color: var(--accent); }
/* A running free trial: the countdown is the card's first line. */
.shell-plan.is-trial > i, .shell-plan.is-trial .shell-plan-text span { color: var(--positive-ink); }
.shell-plan.is-trial.is-ending > i, .shell-plan.is-trial.is-ending .shell-plan-text span { color: #b45309; }
html.dark .shell-plan.is-trial.is-ending > i, html.dark .shell-plan.is-trial.is-ending .shell-plan-text span { color: #fcd34d; }

/* Collapsed rail (desktop): icons only, a tooltip names each one, and
   choosing a module opens the sidebar on it. Labels stay in the
   accessibility tree (visually hidden, not display:none). */
@media (min-width: 1024px) {
    html.shell-collapsed .shell-sidebar-head { justify-content: center; padding: 0; }
    html.shell-collapsed .shell-sidebar .shell-brand-text { display: none; }
    html.shell-collapsed .sidebar-scroll-container { padding-left: var(--space-2); padding-right: var(--space-2); }
    html.shell-collapsed .sidebar-group-title,
    html.shell-collapsed .shell-sidebar .sidebar-item,
    html.shell-collapsed .shell-plan { justify-content: center; padding: 0; }
    html.shell-collapsed .shell-sidebar .sidebar-item { min-height: 40px; }
    html.shell-collapsed .shell-group-label,
    html.shell-collapsed .shell-sidebar .sidebar-item-label,
    html.shell-collapsed .shell-plan-text {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    html.shell-collapsed .shell-sidebar .shell-chevron,
    html.shell-collapsed .shell-sidebar .nav-sign,
    html.shell-collapsed .shell-sidebar .nav-lock,
    html.shell-collapsed .shell-plan-go,
    html.shell-collapsed .sidebar-group-content { display: none; }
    html.shell-collapsed .shell-group-icon { width: 32px; height: 32px; font-size: 13px; }
    html.shell-collapsed .sidebar-group.has-active > .sidebar-group-title .shell-group-icon {
        box-shadow: inset 0 0 0 1.5px var(--tone);
    }
}

/* Touch: comfortable targets in the drawer; desktop density is untouched. */
@media (max-width: 1023px) {
    .shell-sidebar .sidebar-item,
    .shell-sidebar .sidebar-group-title,
    .shell-sidebar .sidebar-section-title { min-height: 44px; }
    .shell-sidebar .sidebar-item { font-size: 14px; }
}

/* Tooltip for the collapsed rail (one element, placed by app-shell.js). */
.shell-tip {
    position: fixed; z-index: var(--z-tooltip); pointer-events: none;
    padding: 5px 9px; border-radius: var(--radius-sm);
    font-size: var(--font-sm); font-weight: var(--font-weight-semibold); white-space: nowrap;
    color: #fff; background: #0f172a; box-shadow: var(--shadow-menu);
    transform: translateY(-50%);
}
html.dark .shell-tip { color: #0f172a; background: #e2e8f0; }
.shell-tip[hidden] { display: none; }

/* ── Top bar ────────────────────────────────────────────────────────────── */

/* Fixed, not sticky: .content-area's overflow-x would make sticky pin to it. */
.fixed-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); }
.shell-topbar {
    left: var(--shell-sidebar-w);
    height: var(--topbar-height);
    background: var(--surface-chrome);
    border-bottom: 1px solid var(--border-color);
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.shell-topbar-inner {
    display: flex; align-items: center; gap: var(--space-2);
    height: 100%; padding: 0 var(--space-2) 0 var(--space-2);
}
@media (min-width: 1024px) { .shell-topbar-inner { gap: var(--space-3); padding: 0 var(--space-4) 0 var(--space-3); } }
.shell-topbar-left { flex: none; display: flex; align-items: center; gap: var(--space-1); margin-right: auto; }
.shell-topbar-search { flex: 0 0 auto; display: flex; justify-content: center; min-width: 0; }
/* The search box grows on focus but never past its column (the right-hand
   cluster is wider when the clock, "Markets" and the trial offer show). */
.shell-topbar-search > .pxse, .shell-topbar-search .pxse-slot,
.shell-topbar-search .pxse-box, .shell-topbar-search .pxse-bar { min-width: 0; max-width: 100%; }
.shell-topbar-search .pxse-input { max-width: 100%; }
.shell-topbar-right { flex: none; display: flex; align-items: center; gap: 2px; }
@media (min-width: 1024px) {
    .shell-topbar-left { margin-right: 0; }
    .shell-topbar-search { flex: 1 1 auto; }
    .shell-topbar-right { gap: var(--space-1); }
}
/* The bar's own brand shows while the sidebar is a drawer. */
.shell-brand--topbar { padding: 4px 6px; }
.shell-brand--topbar { gap: 8px; }
.shell-brand--topbar .shell-brand-mark { height: 26px; }
.shell-brand--topbar .shell-brand-word { height: 18px; }
@media (min-width: 1024px) { .shell-brand--topbar { display: none; } }
@media (max-width: 359px) { .shell-brand--topbar .shell-brand-word { display: none; } }
/* A trial's countdown needs the word's room on a narrow phone; the mark stays. */
@media (max-width: 419px) { .shell-topbar.has-trial-count .shell-brand--topbar .shell-brand-word { display: none; } }

.shell-icon-btn {
    position: relative; flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; height: 40px; padding: 0 10px;
    border: 0; border-radius: var(--radius-md); background: none;
    font: inherit; font-size: var(--font-sm); font-weight: var(--font-weight-semibold);
    color: var(--text-secondary); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.shell-icon-btn > i { font-size: 15px; }
.shell-icon-btn:hover, .shell-menu-wrap > .shell-icon-btn[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-hover); }
.shell-icon-btn:focus-visible, .shell-user-btn:focus-visible, .shell-brand:focus-visible, .shell-trial:focus-visible {
    outline: 2px solid var(--focus-color); outline-offset: 1px;
}
/* The button's text is its accessible name; below 1280 it is visually hidden. */
.shell-icon-btn .shell-btn-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (min-width: 1280px) { .shell-icon-btn .shell-btn-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } }
@media (hover: none) and (pointer: coarse) { .shell-icon-btn { min-width: 44px; height: 44px; } }

.shell-count {
    position: absolute; top: 4px; right: 4px;
    display: flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    font-size: var(--font-xs); font-weight: 800; line-height: 1; color: #fff; background: var(--negative);
    box-shadow: 0 0 0 2px var(--surface-chrome);
}
.shell-count.hidden { display: none; }

.shell-clock {
    display: none; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border: 1px solid var(--border-color); border-radius: var(--radius-pill);
    font-size: var(--font-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted);
    white-space: nowrap;
}
.shell-clock > i { font-size: var(--font-xs); }
.shell-clock .live-clock { min-width: 4.4em; font-weight: var(--font-weight-bold); color: var(--text-primary); }
@media (min-width: 1280px) { .shell-clock { display: inline-flex; margin-right: var(--space-1); } }

.shell-bar-sep { display: none; width: 1px; height: 22px; margin: 0 var(--space-1); background: var(--border-color); }
@media (min-width: 768px) { .shell-bar-sep { display: block; } }

.shell-trial {
    display: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 1px solid rgba(5, 150, 105, .45); border-radius: var(--radius-pill);
    font-size: var(--font-xs); font-weight: var(--font-weight-bold); color: var(--positive-ink);
    text-decoration: none; white-space: nowrap;
}
.shell-trial:hover { background: rgba(5, 150, 105, .08); }
@media (min-width: 768px) { .shell-trial { display: inline-flex; } }
/* A running free trial's countdown (user_accounts/trial.py): on every width —
   "5d" on a phone, "5 days left" from 768, the plan's name from 1280. */
.shell-trial-count { display: inline-flex; padding: 0 9px; }
.shell-trial-count.is-ending { color: #b45309; border-color: rgba(217, 119, 6, .55); background: rgba(242, 165, 30, .10); }
html.dark .shell-trial-count.is-ending { color: #fcd34d; border-color: rgba(251, 191, 36, .45); }
.shell-trial-count.is-ending:hover { background: rgba(242, 165, 30, .18); }
.shell-trial-long, .shell-trial-plan { display: none; }
@media (max-width: 767px) { .shell-trial-count { gap: 4px; padding: 0 7px; } }
@media (min-width: 768px) { .shell-trial-long { display: inline; } .shell-trial-short { display: none; } }
@media (min-width: 1280px) { .shell-trial-plan { display: inline; } }

/* Hidden on phones: the theme switch moves into the account menu there. */
.shell-hide-phone { display: none; }
@media (min-width: 768px) { .shell-hide-phone { display: inline-flex; } }
.shell-only-phone { display: flex; }
@media (min-width: 768px) { .shell-only-phone { display: none !important; } }

.shell-theme-icon-dark, html.dark .shell-theme-icon-light { display: none; }
html.dark .shell-theme-icon-dark { display: inline-block; }

/* Account button: avatar, first name, chevron. */
.shell-user-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 40px; padding: 0 var(--space-2) 0 4px;
    border: 0; border-radius: var(--radius-pill); background: none;
    font: inherit; color: var(--text-primary); cursor: pointer;
}
.shell-user-btn:hover, .shell-user-btn[aria-expanded="true"] { background: var(--surface-hover); }
.shell-avatar { width: 30px; height: 30px; border-radius: 999px; font-size: 11px; box-shadow: 0 0 0 1px var(--border-color); }
.shell-user-name {
    display: none; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--font-ui); font-weight: var(--font-weight-semibold);
}
.shell-user-btn .shell-chevron { display: none; }
@media (min-width: 768px) {
    .shell-user-name { display: inline; }
    .shell-user-btn .shell-chevron { display: inline-block; }
}

/* ── Menus (quick actions, notifications, account) ─────────────────────── */

.shell-menu-wrap { position: relative; display: inline-flex; }
.shell-menu {
    position: absolute; top: calc(100% + 6px); z-index: var(--z-dropdown);
    display: flex; flex-direction: column;
    width: 17rem;
    max-height: calc(100vh - var(--topbar-height) - 1.5rem);
    max-height: calc(100dvh - var(--topbar-height) - 1.5rem);
    overflow: hidden;
    color: var(--text-primary); background: var(--surface-elevated);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-menu);
}
.shell-menu--right { right: 0; }
.shell-menu--wide { width: 25rem; }
.shell-menu-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) 0; }
.shell-menu-scroll.is-flush { padding: 0; }
.shell-push { margin-left: auto; }
/* Phones: menus become a sheet under the bar, the full width of the screen. */
@media (max-width: 767px) {
    .shell-menu, .shell-menu--wide {
        position: fixed; top: calc(var(--topbar-height) + 6px); left: var(--space-2); right: var(--space-2);
        width: auto;
    }
}

.shell-menu-head { flex: none; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); }
.shell-menu-head-row { display: flex; align-items: center; gap: var(--space-2); }
.shell-menu-title { font-size: var(--font-ui); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.shell-menu-note { margin-top: 2px; font-size: var(--font-xs); line-height: 1.4; color: var(--text-muted); }
.shell-menu-note a { font-weight: var(--font-weight-semibold); color: var(--accent); text-decoration: none; }
.shell-menu-note a:hover { text-decoration: underline; }
.shell-menu-link {
    border: 0; background: none; font: inherit; font-size: var(--font-xs); font-weight: var(--font-weight-semibold);
    color: var(--accent); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.shell-menu-link:hover { text-decoration: underline; }
.shell-menu-label {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--font-xs); font-weight: var(--font-weight-bold); letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
}
.shell-menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--border-color); }

.shell-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; padding: 0 var(--space-4);
    border: 0; background: none;
    font: inherit; font-size: var(--font-ui); font-weight: var(--font-weight-medium); text-align: left;
    color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.shell-menu-item > i:first-child { flex: none; width: 16px; font-size: var(--font-ui); text-align: center; color: var(--text-muted); }
.shell-menu-item:hover, .shell-menu-item:focus-visible { color: var(--text-primary); background: var(--surface-hover); outline: none; }
.shell-menu-item:focus-visible { box-shadow: inset 2px 0 0 var(--focus-color); }
.shell-menu-meta { margin-left: auto; font-size: var(--font-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); white-space: nowrap; }
.shell-menu-meta.up { color: var(--positive-ink); }
.shell-menu-meta.down { color: var(--negative); }
.shell-menu-meta.pill { padding: 1px 6px; border-radius: var(--radius-sm); color: var(--positive-ink); background: rgba(5, 150, 105, .10); }
.shell-menu-item.is-danger { color: var(--negative); }
.shell-menu-item.is-danger > i:first-child { color: var(--negative); }
.shell-menu-item.is-danger:hover { background: rgba(225, 29, 72, .08); }
.shell-menu-item.is-accent { color: var(--positive-ink); }
.shell-menu-item.is-accent > i:first-child { color: var(--positive-ink); }
/* A padlocked row (_menu_locked.html): readable, the padlock + plan carry the state. */
.shell-menu-item.is-locked { color: var(--text-muted); }
.shell-menu-item.is-locked .shell-menu-meta i { font-size: 10px; }
@media (hover: none) and (pointer: coarse) { .shell-menu-item { min-height: 44px; } }

.shell-menu-foot {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-color);
}
.shell-menu-foot .shell-menu-link { color: var(--text-muted); }
.shell-menu-foot .shell-menu-link:hover { color: var(--accent); }

/* The account menu's header: who is signed in. */
.shell-account { display: flex; align-items: center; gap: var(--space-3); }
.shell-account .shell-avatar { width: 40px; height: 40px; font-size: 13px; }
.shell-account-text { min-width: 0; }
.shell-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-ui); font-weight: var(--font-weight-bold); }
.shell-account-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); color: var(--text-muted); }
.shell-account-plan {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 7px;
    border-radius: var(--radius-pill); font-size: var(--font-xs); font-weight: var(--font-weight-bold);
    color: #92400e; background: rgba(242, 165, 30, .16);
}
html.dark .shell-account-plan { color: #fcd34d; background: rgba(242, 165, 30, .14); }
.shell-account-plan.is-trial { color: var(--positive-ink); background: rgba(5, 150, 105, .10); }

/* ── Page heading ───────────────────────────────────────────────────────── */

/* Fixed under the top bar on every page; its height is measured into
   --page-header-height so main clears it (app-shell.js). Kept compact so a
   page's own content starts high: one short line (crumbs + data freshness),
   the title and the subtitle. */
.page-header-sticky {
    position: fixed; top: var(--topbar-height); left: var(--shell-sidebar-w); right: 0;
    z-index: var(--z-header);
    padding: var(--space-2) var(--page-gutter) var(--space-2);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-color);
}
.shell-page-head { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 768px) {
    .shell-page-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
}
.shell-page-titles { min-width: 0; display: flex; flex-direction: column; }
.shell-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin-bottom: 2px; }
.shell-page-meta .px-fresh { margin-top: 0; }
.shell-crumbs {
    display: none; align-items: center; gap: 6px; min-height: 16px;
    font-size: var(--font-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted);
}
.shell-crumbs:empty { display: none !important; }
.shell-crumbs i { font-size: 8px; color: var(--text-faint); }
@media (min-width: 768px) { .shell-crumbs { display: flex; } }
.shell-title {
    margin: 0;
    font-size: clamp(1.0625rem, .875rem + .45vw, 1.375rem);
    font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: -.015em;
    color: var(--text-primary);
}
.shell-subtitle {
    margin: 1px 0 0; max-width: 72rem;
    font-size: var(--font-ui); line-height: 1.4; color: var(--text-muted);
}
.shell-subtitle:empty { display: none; }
.shell-page-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.shell-page-actions:empty { display: none; }

/* The default heading actions and any page that wants the same buttons. */
.shell-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    font-size: var(--font-ui); font-weight: var(--font-weight-semibold); white-space: nowrap;
    color: var(--text-primary); background: var(--surface-primary); box-shadow: var(--shadow-sm);
    text-decoration: none; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.shell-btn > i { font-size: 12px; color: var(--text-muted); }
.shell-btn:hover { border-color: var(--border-strong); background: var(--surface-secondary); }
.shell-btn:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* Tablet and phone: a compact heading, so data starts high on the screen. */
@media (max-width: 1023px) {
    .page-header-sticky { padding: .5rem .875rem .55rem; }
    .shell-subtitle {
        font-size: var(--font-sm); line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Page action buttons (Tailwind or shell) sit tighter. */
    .page-header-sticky a.inline-flex,
    .page-header-sticky button.inline-flex { padding: .3rem .6rem; font-size: var(--font-xs); }
    .page-header-sticky a.inline-flex > span.h-7,
    .page-header-sticky button.inline-flex > span.h-7 { display: none; }
    .shell-btn { height: 32px; padding: 0 10px; font-size: var(--font-sm); }
}
@media (max-width: 767px) {
    .shell-title { font-size: 1.0625rem; }
    /* Crumbs hide on a phone; the freshness chip reads under the subtitle. */
    .shell-page-meta { order: 3; margin: 5px 0 0; }
}

/* ── Flash messages ─────────────────────────────────────────────────────── */

.shell-messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.shell-message {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: 10px var(--space-3) 10px var(--space-4);
    border: 1px solid var(--border-color); border-left: 3px solid var(--info); border-radius: var(--radius-md);
    font-size: var(--font-base); color: var(--text-primary); background: var(--surface-primary); box-shadow: var(--shadow-sm);
}
.shell-message > i { flex: none; margin-top: 3px; font-size: var(--font-ui); color: var(--info); }
.shell-message-text { flex: 1 1 auto; min-width: 0; }
.shell-message.is-success { border-left-color: var(--positive); }
.shell-message.is-success > i { color: var(--positive); }
.shell-message.is-error { border-left-color: var(--negative); }
.shell-message.is-error > i { color: var(--negative); }
.shell-message.is-warning { border-left-color: var(--warning); }
.shell-message.is-warning > i { color: var(--warning); }
.shell-message-close {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: -3px -4px -3px 0; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-faint); cursor: pointer;
}
.shell-message-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.shell-message-close:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 1px; }

/* ── Free-trial notice under the title (components/_trial_window.html) ── */

.shell-window {
    display: block; width: fit-content; max-width: 100%;
    margin: 8px 0 0; padding: 5px 12px; border-radius: var(--radius-md);
    font-size: var(--font-sm); line-height: 1.4; color: #92400e;
    background: rgba(242, 165, 30, .12); border: 1px solid rgba(217, 119, 6, .35);
}
html.dark .shell-window { color: #fcd34d; background: rgba(242, 165, 30, .10); border-color: rgba(251, 191, 36, .3); }
.shell-window > i { margin-right: 6px; font-size: 11px; }
.shell-window > span { margin-right: 8px; }
.shell-window b { font-weight: var(--font-weight-bold); }
.shell-window a { font-weight: var(--font-weight-bold); color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A date or fiscal year the trial cannot open (app-shell.js locks them). */
option.is-window-locked { color: var(--text-faint); }

/* The free-trial banner at the top of the page (components/_trial_status.html):
   amber while it runs out, rose on the last day, neutral once it has ended. */
.shell-trial-banner {
    --tb-ink: #92400e; --tb-bg: rgba(242, 165, 30, .10); --tb-line: rgba(217, 119, 6, .35); --tb-go: #b45309;
    display: flex; align-items: flex-start; gap: var(--space-3);
    margin: 0 0 var(--space-4); padding: 10px 12px 10px 14px;
    border: 1px solid var(--tb-line); border-left-width: 4px; border-radius: var(--radius-lg);
    background: var(--tb-bg); color: var(--tb-ink); font-size: var(--font-sm); line-height: 1.45;
}
html.dark .shell-trial-banner { --tb-ink: #fde68a; --tb-bg: rgba(242, 165, 30, .09); --tb-line: rgba(251, 191, 36, .32); --tb-go: #f59e0b; }
.shell-trial-banner.is-urgent { --tb-ink: #9f1239; --tb-bg: rgba(225, 29, 72, .07); --tb-line: rgba(225, 29, 72, .35); --tb-go: #e11d48; }
html.dark .shell-trial-banner.is-urgent { --tb-ink: #fecdd3; --tb-bg: rgba(251, 113, 133, .09); --tb-line: rgba(251, 113, 133, .35); --tb-go: #e11d48; }
.shell-trial-banner.is-ended { --tb-ink: var(--text-secondary); --tb-bg: var(--surface-primary); --tb-line: var(--border-color); --tb-go: var(--accent); }
.shell-trial-banner > i { flex: none; margin-top: 3px; font-size: 13px; }
.shell-trial-banner-text { flex: 1 1 auto; min-width: 0; }
.shell-trial-banner-text b { display: block; font-weight: var(--font-weight-bold); color: var(--tb-ink); }
.shell-trial-banner.is-ended .shell-trial-banner-text b { color: var(--text-primary); }
.shell-trial-banner-text span { display: block; opacity: .92; }
.shell-trial-banner-go {
    flex: none; align-self: center; display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border-radius: var(--radius-md); background: var(--tb-go); color: #fff;
    font-size: var(--font-xs); font-weight: var(--font-weight-bold); letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
}
html.dark .shell-trial-banner.is-ended .shell-trial-banner-go { color: #0b1220; }
.shell-trial-banner-go:hover { filter: brightness(1.08); }
.shell-trial-banner-go:focus-visible, .shell-trial-banner-close:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.shell-trial-banner-close {
    flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: var(--radius-md); background: transparent;
    color: inherit; opacity: .7; cursor: pointer;
}
.shell-trial-banner-close:hover { opacity: 1; background: rgba(15, 23, 42, .06); }
html.dark .shell-trial-banner-close:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 639px) {
    /* Icon · text · close on the first line, the button under the text. */
    .shell-trial-banner { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: 10px 8px 12px 12px; }
    .shell-trial-banner-text { flex-basis: calc(100% - 70px); }
    .shell-trial-banner-close { order: 1; align-self: flex-start; margin-top: -4px; }
    .shell-trial-banner-go { order: 2; margin-left: 25px; }
}

/* ── Bars pinned under the heading ([data-px-pin], app-shell.js) ───────── */

.px-pinned { position: fixed !important; z-index: var(--z-pinned); margin: 0 !important; }

/* ── Data freshness chips under the title (components/_data_freshness.html) */

.px-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.px-fresh-chip {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%;
    padding: 2px 9px; border-radius: 999px; font-size: 11px; line-height: 1.3; color: #475569;
    background: #f1f5f9; border: 1px solid #e2e8f0;
}
.dark .px-fresh-chip { color: #94a3b8; background: rgba(30, 41, 59, 0.7); border-color: #334155; }
.px-fresh-chip b { font-weight: 700; color: #0f172a; }
.dark .px-fresh-chip b { color: #e2e8f0; }
.px-fresh-chip > i { font-size: 10px; color: #94a3b8; }
.px-fresh-chip.is-live { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.dark .px-fresh-chip.is-live { color: #6ee7b7; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); }
.px-fresh-chip.is-live b { color: #047857; }
.dark .px-fresh-chip.is-live b { color: #a7f3d0; }
.px-fresh-dot { font-size: 7px !important; color: #10b981 !important; animation: px-fresh-pulse 1.6s ease-in-out infinite; }
.px-fresh-chip.is-stale { border-color: #fcd34d; background: #fffbeb; }
.dark .px-fresh-chip.is-stale { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.12); }
.px-fresh-link { font-size: 11px; font-weight: 700; color: #0369a1; text-decoration: none; }
.px-fresh-link:hover { text-decoration: underline; }
.dark .px-fresh-link { color: #7dd3fc; }
@keyframes px-fresh-pulse { 50% { opacity: 0.3; } }

/* ── Brand line in the heading (components/_brand_tagline.html) ─────────
   ≥1280: the promise and the moving statement sit between the title and the
   actions. Narrower: one slim strip across the top. Movement pauses on
   hover, has a pause button, and stops under prefers-reduced-motion. */
.brand-tagline { min-width: 0; }
.brand-tagline--inline { display: none; }
.brand-tagline__promise { font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .01em; text-align: right; text-wrap: balance; }
.brand-tagline__ticker { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.brand-tagline__viewport {
    display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brand-tagline__track {
    display: flex; flex: none; white-space: nowrap; will-change: transform;
    animation: brand-tagline-scroll var(--tagline-duration, 60s) linear infinite;
}
.brand-tagline__item { padding-right: 3rem; font-size: 11.5px; line-height: 1.5; color: rgb(100 116 139); }
.brand-tagline:hover .brand-tagline__track,
.brand-tagline.is-paused .brand-tagline__track { animation-play-state: paused; }
@keyframes brand-tagline-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bt-1 { color: rgb(37 99 235); }
.bt-2 { color: rgb(79 70 229); }
.bt-3 { color: rgb(220 38 38); }
.bt-key { color: rgb(79 70 229); font-weight: 700; }
.bt-sep { margin: 0 .6rem; color: rgb(148 163 184); }
.brand-tagline__promise-inline { font-weight: 800; }
.bt-call { font-weight: 800; color: rgb(79 70 229); }
.dark .brand-tagline__item { color: rgb(148 163 184); }
.dark .bt-1 { color: rgb(96 165 250); }
.dark .bt-2 { color: rgb(192 132 252); }
.dark .bt-3 { color: rgb(248 113 113); }
.dark .bt-key { color: rgb(165 180 252); }
.dark .bt-call { color: rgb(192 132 252); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bt-1, .bt-2, .bt-3, .bt-key, .bt-call {
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    .bt-1 { background-image: linear-gradient(90deg, rgb(37 99 235), rgb(79 70 229)); }
    .bt-2 { background-image: linear-gradient(90deg, rgb(79 70 229), rgb(147 51 234)); }
    .bt-3 { background-image: linear-gradient(90deg, rgb(147 51 234), rgb(220 38 38)); }
    .bt-key { background-image: linear-gradient(90deg, rgb(79 70 229), rgb(124 58 237)); }
    .bt-call { background-image: linear-gradient(90deg, rgb(37 99 235), rgb(79 70 229), rgb(147 51 234), rgb(220 38 38)); }
    .dark .bt-1 { background-image: linear-gradient(90deg, rgb(96 165 250), rgb(129 140 248)); }
    .dark .bt-2 { background-image: linear-gradient(90deg, rgb(129 140 248), rgb(192 132 252)); }
    .dark .bt-3 { background-image: linear-gradient(90deg, rgb(192 132 252), rgb(248 113 113)); }
    .dark .bt-key { background-image: linear-gradient(90deg, rgb(165 180 252), rgb(196 181 253)); }
    .dark .bt-call { background-image: linear-gradient(90deg, rgb(96 165 250), rgb(129 140 248), rgb(192 132 252), rgb(248 113 113)); }
}
.brand-tagline__toggle {
    flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center;
    width: 1.125rem; height: 1.125rem; border-radius: 9999px;
    border: 1px solid var(--border-strong); background: var(--surface-primary);
    color: var(--text-muted); font-size: 8px; cursor: pointer;
}
.brand-tagline__toggle:hover { color: rgb(79 70 229); border-color: rgb(165 180 252); }
.brand-tagline__toggle:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
/* Drawn at 18px; the tap area stays 24px through this invisible margin. */
.brand-tagline__toggle::before { content: ''; position: absolute; inset: -4px; }
@media (min-width: 1280px) {
    .brand-tagline--inline {
        display: flex; flex-direction: column; justify-content: center; gap: .3rem;
        flex: 1 1 0; max-width: 26rem; min-width: 13rem; margin: 0 .5rem 0 1rem;
    }
    .brand-tagline--strip { display: none; }
}
@media (max-width: 1279.98px) {
    .brand-tagline--strip {
        --tagline-duration: 75s; display: block; margin-bottom: .3rem;
        padding-bottom: .15rem; border-bottom: 1px dashed var(--border-color);
    }
}
@media (max-width: 767.98px) {
    .brand-tagline--strip .brand-tagline__item { font-size: var(--font-xs); padding-right: 2rem; }
}

/* ── Frozen table columns on phones and tablets ─────────────────────────
   `mob-freeze` pins a table's first column; `mob-freeze-second` also drops a
   leading "#" counter so the identity column pins; `mob-freeze-pair` pins
   Date + Symbol. data-px-freeze="N" (set by the popup controller on tables
   whose Nth column holds a symbol) pins that column. Pinned cells need an
   opaque background matching the cards. */
@media (max-width: 1023px) {
    .mob-freeze-second th:nth-child(1),
    .mob-freeze-second td:nth-child(1) { display: none; }

    .mob-freeze-pair th:nth-child(1),
    .mob-freeze-pair td:nth-child(1) { width: 100px; min-width: 100px; max-width: 100px; }
    .mob-freeze-pair th:nth-child(2),
    .mob-freeze-pair td:nth-child(2) { position: sticky; left: 100px; background: #fff; }
    .dark .mob-freeze-pair th:nth-child(2),
    .dark .mob-freeze-pair td:nth-child(2) { background: #1e293b; }
    .mob-freeze-pair tbody td:nth-child(2) { z-index: 3; }
    .mob-freeze-pair thead th:nth-child(2) { z-index: 20; }
    .mob-freeze-pair th:nth-child(2)::after,
    .mob-freeze-pair td:nth-child(2)::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(148, 163, 184, 0.35);
    }
    .mob-freeze-pair tbody tr:hover td:nth-child(2) { background: #f8fafc; }
    .dark .mob-freeze-pair tbody tr:hover td:nth-child(2) { background: #334155; }

    .mob-freeze:not(.mob-freeze-second) th:first-child,
    .mob-freeze:not(.mob-freeze-second) td:first-child,
    .mob-freeze-second th:nth-child(2),
    .mob-freeze-second td:nth-child(2) { position: sticky; left: 0; background: #fff; }
    .dark .mob-freeze:not(.mob-freeze-second) th:first-child,
    .dark .mob-freeze:not(.mob-freeze-second) td:first-child,
    .dark .mob-freeze-second th:nth-child(2),
    .dark .mob-freeze-second td:nth-child(2) { background: #1e293b; }
    .mob-freeze tbody td:first-child,
    .mob-freeze-second tbody td:nth-child(2) { z-index: 3; }
    .mob-freeze thead th:first-child,
    .mob-freeze-second thead th:nth-child(2) { z-index: 20; }
    .mob-freeze:not(.mob-freeze-second) th:first-child::after,
    .mob-freeze:not(.mob-freeze-second) td:first-child::after,
    .mob-freeze-second th:nth-child(2)::after,
    .mob-freeze-second td:nth-child(2)::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(148, 163, 184, 0.35);
    }
    .mob-freeze tbody tr:hover td:first-child,
    .mob-freeze-second tbody tr:hover td:nth-child(2) { background: #f8fafc; }
    .dark .mob-freeze tbody tr:hover td:first-child,
    .dark .mob-freeze-second tbody tr:hover td:nth-child(2) { background: #334155; }
    .mob-freeze th,
    .mob-freeze td { padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; }

    table[data-px-freeze="1"] > * > tr > :nth-child(1),
    table[data-px-freeze="2"] > * > tr > :nth-child(2),
    table[data-px-freeze="3"] > * > tr > :nth-child(3),
    table[data-px-freeze="4"] > * > tr > :nth-child(4) {
        position: sticky; left: 0; z-index: 3; background: #fff; white-space: nowrap;
        box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.35);
    }
    .dark table[data-px-freeze="1"] > * > tr > :nth-child(1),
    .dark table[data-px-freeze="2"] > * > tr > :nth-child(2),
    .dark table[data-px-freeze="3"] > * > tr > :nth-child(3),
    .dark table[data-px-freeze="4"] > * > tr > :nth-child(4) { background: #1e293b; }
    table[data-px-freeze="1"] > thead > tr > :nth-child(1),
    table[data-px-freeze="2"] > thead > tr > :nth-child(2),
    table[data-px-freeze="3"] > thead > tr > :nth-child(3),
    table[data-px-freeze="4"] > thead > tr > :nth-child(4) { z-index: 20; }
    table[data-px-freeze="1"] > tbody > tr:hover > :nth-child(1),
    table[data-px-freeze="2"] > tbody > tr:hover > :nth-child(2),
    table[data-px-freeze="3"] > tbody > tr:hover > :nth-child(3),
    table[data-px-freeze="4"] > tbody > tr:hover > :nth-child(4) { background: #f8fafc; }
    .dark table[data-px-freeze="1"] > tbody > tr:hover > :nth-child(1),
    .dark table[data-px-freeze="2"] > tbody > tr:hover > :nth-child(2),
    .dark table[data-px-freeze="3"] > tbody > tr:hover > :nth-child(3),
    .dark table[data-px-freeze="4"] > tbody > tr:hover > :nth-child(4) { background: #334155; }
}

/* ── Shared page utilities ──────────────────────────────────────────────
   Used by page templates across the apps (staff desks, AI, older analysis
   pages). Kept here so every page inherits the same chrome. */
.pulse-card { background: linear-gradient(140deg, rgba(255,255,255,0.6) 0%, rgba(248,250,252,0.4) 100%); border: 1px solid rgb(226 232 240); }
.dark .pulse-card { background: linear-gradient(140deg, rgba(15,23,42,0.85) 0%, rgba(2,6,23,0.92) 100%); border: 1px solid rgba(51,65,85,0.6); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.panel-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgb(226 232 240); }
.dark .panel-glass { background: rgba(15,23,42,0.78); border: 1px solid rgba(51,65,85,0.5); }
.ticker-mono { font-feature-settings: "tnum" 1, "lnum" 1; }
.row-divider { border-top: 1px solid rgb(226 232 240); }
.dark .row-divider { border-top: 1px solid rgba(51,65,85,0.6); }
.hero-bg {
    background:
        radial-gradient(circle at 12% 18%, rgba(14,165,233,0.10), transparent 38%),
        radial-gradient(circle at 86% 78%, rgba(168,85,247,0.08), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(16,185,129,0.06), transparent 50%),
        linear-gradient(135deg, rgba(248,250,252,0.96) 0%, rgba(241,245,249,0.92) 100%);
}
.dark .hero-bg {
    background:
        radial-gradient(circle at 12% 18%, rgba(14,165,233,0.18), transparent 38%),
        radial-gradient(circle at 86% 78%, rgba(168,85,247,0.16), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(16,185,129,0.09), transparent 50%),
        linear-gradient(135deg, rgba(6,11,20,0.95) 0%, rgba(11,17,32,0.92) 100%);
}
.eyebrow { font-size: 10px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; }
.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.4rem; font-size: 0.65rem; font-weight: 600; border-radius: 9999px; }
.gradient-bg { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .shell-sidebar, .shell-sidebar.is-open, .sidebar-group-content, .shell-group-inner,
    .shell-chevron, .sidebar-section-chevron, .shell-skip { transition: none !important; }
    .nav-sign-live::after { animation: none; opacity: .55; }
    .px-fresh-dot { animation: none; }
    .brand-tagline__track { animation: none; display: block; flex: 1 1 auto; min-width: 0; }
    .brand-tagline__item { display: block; overflow: hidden; text-overflow: ellipsis; padding-right: 0; }
    .brand-tagline__item[aria-hidden="true"], .brand-tagline__toggle { display: none; }
    .brand-tagline__viewport { -webkit-mask-image: none; mask-image: none; }
}