/* Phone layout, style A (user, 2026-10-19; static/proto/mobile-app-drafts.html, after the PostHog iOS app).
   Phones only (≤767px) and only with html.aiq-phone (set by _phone.html, ?phone=on while trialled). Desktop unchanged.
   The 4px-corner rule is waived here: phone cards are 18px (var(--ph-r)), buttons are pills.
   `html.aiq-phone.aiq-phone[class][data-theme]` outranks _shell.html's `html.aiq-shell[class][data-theme]` rules. */

/* the tab bar exists in every page's markup; it only shows in phone mode. Its desktop `display: none` sits inline in
   _phone.html: this file loads with media="(max-width: 767px)" so desktop never waits on it. */

@media (max-width: 767px) {
  html.aiq-phone {
    --ph-bed: #FFFFFF; --ph-card: #FFFFFF; --ph-edge: #E6E8EE; --ph-ink: #0F1115; --ph-ink2: #3F4656; --ph-mut: #727C94; --ph-faint: #A0A9C0;
    --ph-line: #E6E8EE; --ph-acc: #455DDC; --ph-tint: #EEF1FB; --ph-bar: rgba(255,255,255,.86);
    --ph-pos: #0d8a66; --ph-neg: #c8203f; --ph-r: 18px; --ph-r-sm: 10px; --ph-r-xs: 8px; --ph-top: 52px; --ph-shadow: 0 4px 14px rgba(15,17,21,.06);
    /* the shell's page colour follows */
    --sh-bed: var(--ph-bed);
  }
  html.aiq-phone[data-theme="dark"] {
    --ph-bed: #161616; --ph-card: #161616; --ph-edge: #2E2E2E; --ph-ink: #F1F2F4; --ph-ink2: #C9CDD6; --ph-mut: #9AA2B4; --ph-faint: #6B7286;
    --ph-line: #333333; --ph-tint: #2A2F45; --ph-bar: rgba(40,40,40,.86); --ph-pos: #43D1A7; --ph-neg: #F73463;
    --ph-shadow: none;
  }
  /* the shell's page colour follows in both themes (_shell.html sets --sh-bed per theme at higher specificity) */
  html.aiq-phone.aiq-phone.aiq-shell[data-theme] { --sh-bed: var(--ph-bed); }

  /* page + top bar sit on the grey bed (no midnight band, no rule) */
  html.aiq-phone.aiq-phone[class][data-theme], html.aiq-phone.aiq-phone[class][data-theme] body,
  html.aiq-phone.aiq-phone[class][data-theme] .app-shell > main { background: var(--ph-bed) !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #top-nav { background: var(--ph-bed) !important; border-bottom: 0 !important;
    box-shadow: none !important; height: var(--ph-top) !important; }
  html.aiq-phone.aiq-phone[class][data-theme] .app-shell { padding-top: var(--ph-top) !important; }

  /* the drawer is replaced by Explore */
  html.aiq-phone #sb-mob-btn, html.aiq-phone #theme-toggle { display: none !important; }
  html.aiq-phone #nav-search-wrap { padding-left: 2px !important; }

  /* search = a round field, upgrade = a round button */
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search { height: 38px !important; border-radius: 999px !important;
    background: rgba(118,118,128,.12) !important; border: 0 !important; box-shadow: none !important; padding: 0 16px !important; width: 100%; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-search-input { color: var(--ph-ink) !important; font-size: 16px !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-search-input::placeholder { color: var(--ph-mut) !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search > svg { color: var(--ph-mut) !important; width: 16px; height: 16px; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-upgrade { height: 38px; border-radius: 999px !important; padding: 0 15px !important;
    display: inline-flex; align-items: center; }
  html.aiq-phone.aiq-phone[class][data-theme] #top-nav .trial-pill { border-radius: 999px !important; }

  /* room under the page for the tab bar */
  html.aiq-phone .app-shell > main { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; }

  /* ── the tab bar ── */
  html.aiq-phone #aiq-ptabs { display: flex; position: fixed; z-index: 150; left: 10px; right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; padding: 5px; border-radius: 999px;
    background: var(--ph-bar); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 6px 24px rgba(15,17,21,.12); font-family: 'Inter', sans-serif; }
  html.aiq-phone[data-theme="dark"] #aiq-ptabs { box-shadow: 0 6px 24px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06); }
  html.aiq-phone #aiq-ptabs a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border-radius: 999px; color: var(--ph-ink); text-decoration: none; font-size: 10.5px; font-weight: 500;
    -webkit-tap-highlight-color: transparent; }
  html.aiq-phone #aiq-ptabs a i { font-size: 22px; line-height: 1; }
  /* the open tab by colour only, iOS-style (user, 2026-10-19: didn't like the tinted bubble behind it) */
  html.aiq-phone #aiq-ptabs a { color: var(--ph-mut); }
  html.aiq-phone #aiq-ptabs a.on { color: var(--ph-acc); font-weight: 600; }
  html.aiq-phone.sb-drawer-open #aiq-ptabs { display: none; }
  /* things pinned to the bottom of the screen clear the bar */
  html.aiq-phone #aiq-toast, html.aiq-phone .aiq-toast { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }

  /* ── shared phone pieces for pages built in this style (Home, Explore, …) ── */
  html.aiq-phone .aiq-bigt { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 6px 2px 10px; color: var(--ph-ink); }
}

@media (max-width: 767px) {
  /* the admin's Pro / Free / Signed out switch squeezed the search to one word; it stays on desktop */
  html.aiq-phone #top-nav #aiq-viewas { display: none !important; }
}

/* ── Stock page (/financials/<t>): the most important page on a phone (user, 2026-10-19). Header + section row sit on
   the bed with no frame, sections are pills, every tile is a borderless 18px card. Selector list as in
   financials/_tiles.html, one id/class more so these win. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] #fin-top { background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; margin: 0 0 6px !important; overflow: visible !important; }
  html.aiq-phone.aiq-phone[data-theme] #company-header, html.aiq-phone.aiq-phone[data-theme] #ch-inner { background: transparent !important; }
  /* header (user, 2026-10-19, after header drafts 1–5 in static/proto/fin-header-phone-drafts.html: liked 5's plain
     "Apple and then the price", 3 too; Mkt cap / EV / Today boxes "take up too much space"): one line — small logo,
     name, ticker …… price (day change small under it), then the watchlist star top right ("keep the little star
     button"). Notes / alerts / exchange · sector / Mkt cap · EV stay on desktop. */
  html.aiq-phone.aiq-phone[data-theme] #fin-top { padding: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    gap: 10px !important; padding: 6px 0 8px !important; min-height: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-id { display: flex !important; align-items: center !important; gap: 7px !important; flex: 1 1 auto !important; min-width: 0; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner :is(.ch-logo, .ch-mono) { width: 28px !important; height: 28px !important; padding: 3px !important;
    margin: 0 !important; border-radius: var(--ph-r-xs) !important; flex: none; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-name { font-size: 16px !important; font-weight: 650 !important; color: var(--ph-ink) !important; min-width: 0;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-tkr { flex: none; background: none !important; padding: 0 !important; font: 500 12px/1 Inter, sans-serif !important;
    color: var(--ph-mut) !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner :is(.ch-meta, .ch-vsep, .ch-when) { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-quote { flex: none !important; align-items: flex-end !important; gap: 3px !important; margin: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-price { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--ph-ink) !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-chg { font-size: 11.5px !important; font-weight: 600 !important; }
  /* the star: add to My stocks (its pop-up is the desktop one) */
  html.aiq-phone.aiq-phone[data-theme] #ch-inner #fin-acts { display: flex !important; order: 9; flex: none !important; width: auto !important; margin: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] #fin-acts .fa-btn:not([data-fa="wl"]) { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #fin-acts .fa-btn[data-fa="wl"] { width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center;
    border-radius: 999px !important; border: 0 !important; background: rgba(118,118,128,.12) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #fin-acts .fa-btn[data-fa="wl"] :is(.fa-lbl, .n) { display: none !important; }
  /* Overview's Price performance: no repeated price and no range-change line (user, 2026-10-19: "get rid of the
     $81.70 and % change past year") — legend, range toggle, chart */
  html.aiq-phone.aiq-phone[data-theme] #tab-overview .ovs-px { display: none !important; }


  /* tiles */
  html.aiq-phone.aiq-phone[data-theme] main :is(#tab-overview .card, .card, .fx-card, .stx-card, .cmp-card, .cap-card, .cm-card,
      .lkl-promo, .stmt-seg-chartcard, .stmt-table-wrap, .stmt-lock-card, .kd-card) {
    background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; box-shadow: none !important; border-radius: var(--ph-r) !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(#tab-overview .ovs-grid, .ovs-grid, .ovs-main, .ovs-side) { gap: 12px !important; }
  html.aiq-phone.aiq-phone[data-theme] main .stmt-table-wrap { overflow: hidden !important; }
  /* Charts tab: key-figures panel, toolbar, chart tiles, "add chart" */
  html.aiq-phone.aiq-phone[data-theme] main :is(#ch-kpis, #ch-bar, .cg-card, .cg-add) {
    border-radius: var(--ph-r) !important; border-color: var(--ph-edge) !important; box-shadow: none !important; overflow: hidden; }
  html.aiq-phone.aiq-phone[data-theme] main :is(#ch-kpis, #ch-bar, .cg-card) { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .cg-add { border: 1.5px dashed var(--ph-line) !important; }
  /* statement controls: Annual | Quarterly and Options as pills */
  html.aiq-phone.aiq-phone[data-theme] main :is(.stmt-seg, .stmt-dd) { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] main .stmt-seg > * { border-radius: 999px !important; }
  /* boxes inside a tile (Comparables fair value, Dividends notes / projection) */
  html.aiq-phone.aiq-phone[data-theme] main :is(.cmp-fair, .dv-note, .dv-proj-out) { border-radius: var(--ph-r-sm) !important; }
}

/* ── My stocks (lists page + each list's Terminal, aiq-terminal.css): borderless 18px cards on the bed, a large title,
   round buttons. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] .tm { --tm-card: var(--ph-card); --tm-line: var(--ph-line); --tm-ink: var(--ph-ink); --tm-blue: var(--ph-acc); }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-c, html.aiq-phone.aiq-phone[data-theme] .tm .tm-ghost {
    border-radius: var(--ph-r) !important; border-color: var(--ph-edge) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-ghost { border: 1.5px dashed var(--ph-line) !important; background: transparent !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-hbar { background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 6px 2px 4px !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-hbar-ic { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm h1 { font-size: 34px !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-hbar-x { background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; border-radius: var(--ph-r) !important; padding: 12px 14px !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-sec { font-size: 13px; color: var(--ph-mut); margin: 20px 4px 8px; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-grid { gap: 12px; }
  html.aiq-phone.aiq-phone[data-theme] .tm :is(.tm-btn, .tm-seg, .tm-pl, .tm-chip) { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-seg button { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-btn { height: 38px; padding: 0 15px; }
}

/* ── Full-height pages: stop above the tab bar instead of running under it ── */
@media (max-width: 767px) {
  /* down to the top of the tab bar (user, 2026-10-19: "the screener table is too small, it should go down more") */
  html.aiq-phone .sc-layout { height: calc(100dvh - var(--ph-top) - 78px - env(safe-area-inset-bottom)) !important; }
  html.aiq-phone.aiq-phone[data-theme] .sc-results-pane { margin-bottom: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .app-shell > main:has(.sc-layout) { padding-bottom: 0 !important; }
  /* Table | Plot: the plot is a desktop tool ("the table/plot look awkward on mobile"); the switch only shows if a
     ?view=plot link opened it, so there's a way back */
  html.aiq-phone.aiq-phone[data-theme] .sc-results-pane:not(.plot-mode) .sc-view-switch { display: none !important; }
  /* Workspace's own bottom dock (+ Add card, layout, Lock, Save) sits just above the tab bar */
  html.aiq-phone .ws-dock { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  /* it was 475px wide on a 390px screen: keep it inside, its buttons scroll */
  html.aiq-phone .ws-dock { max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
}

/* ── Every page: the house kit (aiq-controls.css, aiq-pop.css, aiq-table-panel.css) in the phone style ── */
@media (max-width: 767px) {
  /* large page titles (app pages say 23px; phones get the iOS large title) */
  html.aiq-phone.aiq-phone .app-shell > main h1:not(#ai-greet):not(.rx-company):not(.aiq-dlg h1) {
    font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.15 !important; }

  /* toggles: a round track with a white pill on the active option */
  html.aiq-phone.aiq-phone[data-theme] .aiq-seg { border-radius: 999px !important; height: 34px; padding: 3px; border: 0;
    background: rgba(118,118,128,.12); }
  html.aiq-phone.aiq-phone[data-theme] .aiq-seg > button, html.aiq-phone.aiq-phone[data-theme] .aiq-seg > a {
    border-radius: 999px !important; padding: 0 12px; font-size: 13px; }
  html.aiq-phone.aiq-phone[data-theme] .aiq-seg > .on, html.aiq-phone.aiq-phone[data-theme] .aiq-seg > [aria-pressed="true"] {
    background: var(--ph-card); color: var(--ph-ink); box-shadow: 0 1px 3px rgba(15,17,21,.12); }

  /* section tabs: a scrolling row of pills, the open one white */
  html.aiq-phone.aiq-phone[data-theme] .aiq-utabs { gap: 4px; border-bottom: 0; padding: 2px 0 4px; }
  html.aiq-phone.aiq-phone[data-theme] .aiq-utabs > a, html.aiq-phone.aiq-phone[data-theme] .aiq-utabs > button {
    padding: 0 14px; height: 36px; display: inline-flex; align-items: center; border-radius: 999px; border-bottom: 0; margin: 0;
    font-size: 14px; font-weight: 600; color: var(--ph-mut); }
  html.aiq-phone.aiq-phone[data-theme] .aiq-utabs > .on, html.aiq-phone.aiq-phone[data-theme] .aiq-utabs > [aria-selected="true"] {
    background: var(--ph-card); color: var(--ph-ink); box-shadow: var(--ph-shadow); }

  /* buttons: pills */
  html.aiq-phone.aiq-phone[data-theme] .aiq-btn { border-radius: 999px !important; min-height: 38px; padding-left: 16px; padding-right: 16px; }

  /* pop-ups: rounder sheets and menus */
  html.aiq-phone.aiq-phone[data-theme] .aiq-dlg { border-radius: var(--ph-r) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-menu, .aiq-pop) { border-radius: 14px !important; }

  /* big-table pages (toolbar + table in one panel): a rounded card, no outline */
  html.aiq-phone.aiq-phone[data-theme] { --tp-card: var(--ph-card); --tp-line: transparent; }
  /* your own lists' tabs (screens, watchlists, Gov. contracts views): pills */
  html.aiq-phone.aiq-phone[data-theme] :is(#scx-tabs, .wl-kf .wl-kf-tabs, .gm-tabs) { box-shadow: none !important; gap: 4px; }
  html.aiq-phone.aiq-phone[data-theme] :is(.scx-tab, .wl-kf .wl-kf-tab, .gm-tab) { border-radius: 999px !important; border: 0 !important;
    box-shadow: none !important; padding-left: 14px !important; padding-right: 14px !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.scx-tab.on, .wl-kf .wl-kf-tab.on, .gm-tab.on) { background: var(--ph-card) !important;
    box-shadow: var(--ph-shadow) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(#scx-bar, .wl-kf .wl-tool, .ins-bar, .cg-bar:not(#ch-bar), .gm-bar) {
    border-radius: var(--ph-r) var(--ph-r) 0 0 !important; border-color: var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.sc-results-pane, .wl-kf .wl-main, .ins-tbl-wrap, .cg-main-wrap .cg-tbl-wrap, .gm-scrollx) {
    border-radius: 0 0 var(--ph-r) var(--ph-r) !important; border-color: transparent !important; }
  html.aiq-phone.aiq-phone[data-theme] .ins-foot { border-radius: 0 0 var(--ph-r) var(--ph-r) !important; border-color: transparent !important; }
  html.aiq-phone.aiq-phone[data-theme] .gm-card { border-radius: var(--ph-r) !important; border-color: var(--ph-edge) !important; }
}

/* ── Markets: chapter row and card switches as pills ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav { border-bottom: 0 !important; box-shadow: none !important; background: var(--ph-bed) !important; top: var(--ph-top) !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav-in { gap: 4px !important; height: auto !important; padding: 6px 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav a.on::after { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav a { border-radius: 999px !important; border-bottom: 0 !important; box-shadow: none !important;
    padding: 8px 14px !important; margin: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav a b { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-cnav a.on { background: var(--ph-card) !important; color: var(--ph-ink) !important; box-shadow: var(--ph-shadow) !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-wrap :is(.seg, .tabs) { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3-wrap :is(.seg, .tabs) > button { border-radius: 999px !important; }
}

/* ── Fields and plain buttons everywhere: softer 10px corners. Tabs, toggles and menu items are left alone; a pill or
   circle set elsewhere in this file uses !important so it still wins. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main :is(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])) {
    border-radius: var(--ph-r-sm) !important; }
  html.aiq-phone.aiq-phone[data-theme] main button:not(.aiq-seg > *):not(.aiq-utabs > *):not([class*="tab"]):not([role="tab"]):not([role="menuitem"]):not(.aiq-mi) {
    border-radius: var(--ph-r-sm); }
}

/* ── Page panels that aren't one of the house classes (found by walking every page at 390px, 2026-10-19) ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main :is(.si-list, .si-card, .ec-col, .ec-panel, .scx-card, .gm-card, .aqp-card, .rp-card, .ai-comp,
      .ph-mtbl-wrap, .xl-card, .sp-hero, .sp-card, .st-card, .st-preview-card, .gs-card, .ws-card) {
    border-radius: var(--ph-r) !important; border-color: var(--ph-edge) !important; box-shadow: none !important; overflow: hidden; }
  /* Superinvestors: the investor panel is three stacked pieces — round the outer corners only */
  html.aiq-phone.aiq-phone[data-theme] main .si-id-row.si-panel { border-radius: var(--ph-r) var(--ph-r) 0 0 !important; border-color: var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .si-panel.rounded-b-md { border-radius: 0 0 var(--ph-r) var(--ph-r) !important; border-color: var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs.si-panel { border-color: var(--ph-edge) !important; }
  /* Insiders: the white page panel goes; its toolbar + table make the card */
  html.aiq-phone.aiq-phone[data-theme] main .ins-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
}

/* ── Tab-bar pop-ups (user, 2026-10-20, draft E of six: the chip row "feels poorly designed and not a great layout for a
   mobile app"; "when you click on financials at the bottom there can be a pop-up", then "the same sort of pop up style
   for the explore"). Tapping Financials on a stock page, or Explore anywhere, raises a frosted card of tiles out of the
   tab bar (_phone_tabbar.html opens it; .ph-pop markup in financials/index.html and _phone_tabbar.html). On a stock page
   the Financials tab names the open page ("Income ⌃"). No row of chips at the top of the stock page any more. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] #fin-tabs-wrap,
  html.aiq-phone.aiq-phone[data-theme] #ch-inner .ch-vsep { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #statements-inner.stmt-v2 #stmt-unit-note { font-size: 12px !important; color: var(--ph-mut) !important; }

  html.aiq-phone #aiq-ptabs a.ph-pop-tab span { display: inline-flex; align-items: center; gap: 2px; max-width: 74px; white-space: nowrap; }
  html.aiq-phone #aiq-ptabs a.ph-pop-tab span::after { content: ""; flex: none; width: 4px; height: 4px; margin: 1px 0 0 2px;
    border-left: 1.4px solid currentColor; border-top: 1.4px solid currentColor; transform: rotate(45deg); }
  html.aiq-phone #aiq-ptabs a.ph-pop-tab.is-up span::after { transform: rotate(225deg); margin-top: -3px; }
  html.aiq-phone #aiq-ptabs a.is-up { color: var(--ph-acc); }

  html.aiq-phone .ph-pop { position: fixed; inset: 0; z-index: 148; }     /* under the tab bar (150): a second tap closes */
  html.aiq-phone .ph-pop.open { display: block; }      /* closed = the hidden attribute (desktop never shows it) */
  html.aiq-phone .ph-pop-dim { position: absolute; inset: 0; background: rgba(0,0,0,.22); animation: phPopFade .18s ease; }
  html.aiq-phone .ph-pop-card { position: absolute; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); max-height: 64vh;
    overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 12px; border-radius: 24px; background: var(--ph-bar);
    backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 10px 40px rgba(15,17,21,.18);
    font-family: Inter, sans-serif; transform-origin: 50% 100%; animation: phPopIn .26s cubic-bezier(.22,1,.36,1); }
  html.aiq-phone[data-theme="dark"] .ph-pop-card { box-shadow: 0 10px 40px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.07); }
  html.aiq-phone .ph-pop-h { padding: 10px 6px 6px; font: 600 12px Inter, sans-serif; color: var(--ph-mut); }
  html.aiq-phone .ph-pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  html.aiq-phone .ph-pop-grid > :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 58px;
    padding: 0 4px; border: 0; border-radius: 14px; background: rgba(118,118,128,.1); color: var(--ph-ink); font: 500 12.5px/1.15 Inter, sans-serif;
    text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone .ph-pop-grid > * i { font-size: 18px; color: var(--ph-mut); }
  html.aiq-phone .ph-pop-grid > .on { background: var(--ph-acc); color: #fff; font-weight: 600; }
  html.aiq-phone .ph-pop-grid > .on i { color: #fff; }
  html.aiq-phone .ph-pop-grid > :active { transform: scale(.96); }
  @keyframes phPopIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
  @keyframes phPopFade { from { opacity: 0; } }
}

/* ── Core only (user, 2026-10-19: "the mobile layout should generally be simpler … focus on the core"). Picked cuts:
   toolbar extras (save / copy / download / export / configure, watchlist alerts bell, the top bar's Help), desktop-only
   tools in Explore (Workspace, Excel model, Reports), and the chart page's advanced controls (indicators, setups,
   watchlist strip). Desktop keeps all of it. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] :is(#scx-save, #scx-dup, #scx-csv, .wl-kf-hbtn, #ins-csv, #ins-cbtn, #cg-dl, .gm-btn,
      #top-nav #aiq-help, .ex-tile.ex-desk, #btn-add, #setup-pick, #setup-btn, #setup-save) { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(#strip, .strip):has(#wl-pick) { display: none !important; }
}

/* ── Big tables edge to edge (user, 2026-10-19: "the watch list or maybe the screen(er) should go edge to edge on mobile
   as we're trying to maintain space"). Toolbar + table span the screen, square ends, hairlines above and below; titles
   and tabs keep their side margin. Same for Insiders / Congress / Gov. contracts so the list pages match. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] :is(#scx-bar, .sc-results-pane, .wl-kf .wl-tool, .wl-kf .wl-main) {
    margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(#scx-bar, .wl-kf .wl-tool) { border-top: 1px solid var(--ph-line) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.sc-results-pane, .wl-kf .wl-main) { border-bottom: 1px solid var(--ph-line) !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.ins-bar, .ins-tbl-wrap, .ins-foot, .cg-bar:not(#ch-bar), .cg-main-wrap .cg-tbl-wrap, .gm-card) {
    margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }
}

/* ── Less chrome on the tab pages (user, 2026-10-19): no "Home" / "My stocks" / "Explore" / "Account" titles — the tab
   bar already says where you are. (Home's squeezed S&P line was removed from phone/today.html.) ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] .app-shell > main :is(h1.aiq-bigt, .tm .tm-hbar-t) { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .tm .tm-hbar { padding-top: 0 !important; margin-bottom: 12px !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.hm, .ex, .ac) > .hm-h:first-of-type,
  html.aiq-phone.aiq-phone[data-theme] :is(.hm, .ex, .ac) > :is(.hm-h, .ex-h, .ac-h):first-of-type { margin-top: 4px !important; }
}

/* ── Every tab row = the stock page's chips (user, 2026-10-19: "all of these 'tab' options should be in the same style as
   the financials tab"): grey chips, the open one filled dark (dark theme: light fill). Wins over the pill rules above.
   Rows: house section tabs (.aiq-utabs), your lists' tabs (screens, watchlists, Gov. contracts views), Markets' chapters,
   Settings' sections, Superinvestors' sub-tabs (Portfolios' .ph-tabs: aiq-phone-people.css). ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-utabs, #scx-tabs, .wl-kf .wl-kf-tabs, .gm-tabs, .mk3-cnav-in, .st-tabs, .si-subtabs) {
    display: flex !important; gap: 8px !important; border-bottom: 0 !important; box-shadow: none !important; overflow-x: auto; scrollbar-width: none; }
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-utabs > a, .aiq-utabs > button, .scx-tab, .wl-kf .wl-kf-tab, .gm-tab, .mk3-cnav a, .st-tabs > a, .si-subtab) {
    flex: none !important; height: 38px !important; padding: 0 15px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important;
    border: 0 !important; border-radius: var(--ph-r-sm) !important; box-shadow: none !important; background: rgba(118,118,128,.12) !important;
    color: var(--ph-ink) !important; font: 500 15px Inter, sans-serif !important; white-space: nowrap !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-utabs > .on, .aiq-utabs > [aria-selected="true"], .scx-tab.on, .wl-kf .wl-kf-tab.on, .gm-tab.on, .mk3-cnav a.on,
      .st-tabs > .on, .st-tabs > [aria-current], .si-subtab.si-subtab-active) {
    background: #0F1115 !important; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] :is(.aiq-utabs > .on, .aiq-utabs > [aria-selected="true"], .scx-tab.on, .wl-kf .wl-kf-tab.on, .gm-tab.on, .mk3-cnav a.on,
      .st-tabs > .on, .st-tabs > [aria-current], .si-subtab.si-subtab-active) {
    background: #F1F2F4 !important; color: #0F1115 !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.scx-tab, .wl-kf .wl-kf-tab) :is(svg, i) { color: inherit !important; }
}

/* ── The affiliate "Try Pro free" pill (_ref_offer.html) sat on the tab bar; then the user (2026-10-19): "get rid of try pro
   free in the bottom right" — hidden on phones (the offer still shows on pricing / sign-up). ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-ro-pill, .aiq-ro-panel) { display: none !important; }
}

/* ── Search as a bubble (user, 2026-10-19: "the search function doesn't need to be a full bar rather a small bubble or
   something in the top right"): the top bar is the Investingly mark on the left, then (Upgrade) and a round search
   button on the right; tapping it opens the full field over the bar (:focus-within), and it folds back on blur.
   The input fills the bubble invisibly so one tap focuses it and brings up the keyboard. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[class][data-theme] #top-nav > div { position: relative; gap: 8px !important; padding: 0 12px !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #top-nav > div::before { content: ""; order: 0; flex: none; width: 30px; height: 30px; margin-right: auto;
    border-radius: var(--ph-r-xs); background: #0F1115 center / 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='12' width='5' height='9' rx='2.5' fill='%23fff'/%3E%3Crect x='11' y='6' width='5' height='15' rx='2.5' fill='%23fff'/%3E%3Ccircle cx='19.5' cy='5.5' r='2.6' fill='%2343D1A7'/%3E%3C/svg%3E"); }
  html.aiq-phone.aiq-phone[class][data-theme="dark"] #top-nav > div::before { background-color: #2A2F45; }
  html.aiq-phone.aiq-phone[class][data-theme] #top-nav > div > .shrink-0 { order: 1; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-search-wrap { order: 2; flex: none !important; padding: 0 !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search { position: relative; width: 38px !important; height: 38px !important; padding: 0 !important;
    justify-content: center; border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search > svg { position: relative; z-index: 0; width: 17px !important; height: 17px !important;
    color: var(--ph-ink) !important; pointer-events: none; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-search-input { position: absolute; inset: 0; width: 100% !important; padding: 0 !important; opacity: 0;
    cursor: pointer; }
  /* open: the field spans the bar */
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search:focus-within { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%);
    width: auto !important; z-index: 5; justify-content: flex-start; padding: 0 14px !important; background: var(--ph-card) !important;
    box-shadow: 0 0 0 1px var(--ph-edge), 0 6px 20px rgba(15,17,21,.12) !important; }
  html.aiq-phone.aiq-phone[class][data-theme] #nav-global-search:focus-within #nav-search-input { position: static; opacity: 1; padding-left: 10px !important; cursor: text; }
}

/* The top bar slides away while reading down and comes back on the first scroll up (user, 2026-10-20: it "takes up too
   much space at the top"). _phone.html's listener toggles html.ph-away / html.ph-back. The sticky rows that sit under
   it (Markets nav, Getting started jump bar) move up with it. Keyframes, not a transition: a
   transition on a class-swapped transform can stick in its old state. */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone.ph-away[class][data-theme] :is(#top-nav, .mk3-cnav, .gs-jump) { animation: phAway .28s cubic-bezier(.4,0,.2,1) forwards; }
  html.aiq-phone.aiq-phone.ph-back[class][data-theme] :is(#top-nav, .mk3-cnav, .gs-jump) { animation: phBack .32s cubic-bezier(.22,1,.36,1); }
  @keyframes phAway { to { transform: translateY(calc(-1 * var(--ph-top))); } }
  @keyframes phBack { from { transform: translateY(calc(-1 * var(--ph-top))); } }
  html.aiq-phone.aiq-phone.ph-away[class][data-theme] #top-nav { pointer-events: none; }
}