/* Notched tab bar (user, 2026-11-01, after a Pinterest "Micro-Interaction Project" clip): an edge-to-edge bar with
   labels; the open tab's icon rides in a raised circle that sits in a notch cut out of the bar, and on a tap the circle + notch
   glide to the new tab while the old icon drops back into its slot. With the menu (html.ph-drawer, the phone default): Home ·
   My stocks · Markets · Search · More. The bar's shape is an SVG drawn by js/aiq-phone-navbar.js (html.ph-nb once it's built).
   Picked the same day from six shapes (card, pill, island, wave, glass, sheet) and two colours (navy): edge to edge, Mist. */
@media (max-width: 767px) {
  /* rounded top corners (user, 2026-11-01: "more rounded edges", after picking edge to edge); the 36px side padding keeps the
     first and last tab's notch clear of the corners */
  /* A fixed height, no env(safe-area-inset-bottom): iPhone Safari reports that inset only once its toolbar collapses on
     scroll, so the bar grew ~34px mid-scroll (a blank band under the labels) and the notch, drawn for the old height,
     stretched out of line with the circle (user, 2026-11-01, on a real iPhone). 62px leaves ~13px under the labels for
     the home indicator. */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs:not(#_):not(#_):not(#_) { --nb-r: 0px; left: 0; right: 0; bottom: 0; height: 62px;
    padding: 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: visible; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs:not(#_):not(#_):not(#_)::before { display: none; }
  /* first paint, before aiq-phone-navbar.js has drawn the notched shape: a plain bar of the same colour and corners */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs:not(:has(> .ph-nb-bg)):not(#_):not(#_):not(#_) { background: #2B2D33; border-radius: 0;
    box-shadow: 0 -1px 0 rgba(15,17,21,.09), 0 -4px 12px rgba(15,17,21,.07); }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="dark"] #aiq-ptabs:not(:has(> .ph-nb-bg)):not(#_):not(#_):not(#_) { background: #262A33; box-shadow: 0 -1px 0 rgba(255,255,255,.07); }
  html.aiq-phone.ph-drawer #aiq-ptabs .ph-nb-only:not(#_):not(#_):not(#_) { display: flex; }
  /* by link, not position: the bar's SVG goes in first, which moved the old "6th tab = Account" rule onto Search */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.ph-search-tab:not(#_):not(#_):not(#_):not(#_) { display: flex; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs #aiq-ptab-account:not(#_):not(#_):not(#_):not(#_) { display: none; }
  /* order: Home · My stocks · Search · Markets · More (Search in the middle, user 2026-11-01; More opens the menu, js/aiq-phone-drawer.js) */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-only:not(#_):not(#_) { order: 4; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.ph-more-tab:not(#_):not(#_) { order: 5; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.ph-search-tab:not(#_):not(#_):not(#_) { order: 3; position: relative; inset: auto; width: auto; flex: 1;
    background: none; box-shadow: none; border-radius: 0; }

  /* the bar's shape, notch included. Light: charcoal on every page since 2026-11-01 (was Mist, a soft grey; the bar must
     differ from the white page — user); dark: a lighter grey than the page */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
    filter: drop-shadow(0 -1px 0 rgba(15,17,21,.09)) drop-shadow(0 -4px 12px rgba(15,17,21,.07)); }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-bg path { fill: #2B2D33; }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="dark"] #aiq-ptabs .ph-nb-bg { filter: drop-shadow(0 -1px 0 rgba(255,255,255,.07)); }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="dark"] #aiq-ptabs .ph-nb-bg path { fill: #262A33; }

  /* each tab: thin icon over a small label */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a:not(#_):not(#_):not(#_) { position: relative; z-index: 1; flex: 1; margin: 0; padding: 8px 0 0; gap: 4px; justify-content: flex-start;
    border-radius: 0; background: none; color: var(--ph-mut); -webkit-tap-highlight-color: transparent; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a i:not(#_):not(#_):not(#_) { font-family: "Phosphor-Regular" !important; font-size: 24px; color: var(--ph-ink2); }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a span:not(#_):not(#_):not(#_) { position: static; width: auto; height: auto; clip: auto; overflow: visible;
    font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--ph-mut); }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.on span:not(#_):not(#_):not(#_) { color: var(--ph-ink); font-weight: 600; }
  /* one bar on every page (user, 2026-11-01: opening a stock's Overview from My stocks "the menu bar changed. make sure it
     always stays the same"): My stocks' charcoal bar, square corners, wide tabs, light icons — it was Mist + rounded off the
     card pages. Light-theme rules name the theme so aiq-attio-classic.js leaves the charcoal alone; dark keeps #262A33. */
  html.aiq-phone.ph-drawer.ph-nb[data-theme="light"] #aiq-ptabs a i:not(#_):not(#_):not(#_):not(#_) { color: rgba(255,255,255,.62); }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="light"] #aiq-ptabs a span:not(#_):not(#_):not(#_):not(#_) { color: rgba(255,255,255,.55); }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="light"] #aiq-ptabs a.on span:not(#_):not(#_):not(#_):not(#_) { color: #FFFFFF; }
  /* the open tab's own icon hides: it's in the circle (the label drops a little to sit under the circle) */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.ph-nb-in i:not(#_):not(#_):not(#_) { opacity: 0; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs a.ph-nb-in span:not(#_):not(#_):not(#_) { transform: translateY(5px); }

  /* the raised circle: always the bar's colour (user: "they shouldn't be different colors"); the notch's gap of page colour
     and a soft shadow set it apart */
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-ball { position: absolute; z-index: 2; left: 0; top: -24px; width: 50px; height: 50px; margin-left: -25px;
    border-radius: 50%; background: #2B2D33; display: grid; place-items: center; pointer-events: none; color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15,17,21,.10); }
  html.aiq-phone.ph-drawer.ph-nb[data-theme="dark"] #aiq-ptabs .ph-nb-ball { background: #262A33; color: #F1F2F4; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-ball[hidden] { display: none; }
  html.aiq-phone.ph-drawer.ph-nb #aiq-ptabs .ph-nb-ball i { font-family: "Phosphor-Regular" !important; font-size: 25px; line-height: 1; }

  /* the page clears the bar and the circle above it */
  html.aiq-phone.ph-drawer.ph-nb .app-shell > main:not(#_):not(#_):not(#_) { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

  /* Search as one of the bar's tabs (user, 2026-11-01: the old full-screen takeover "doesn't really fit in with our whole
     menu bar change"; js/aiq-phone-search.js). The screen opens behind the bar, whose circle glides to Search; the field
     sits at the top with Cancel; rows look like the menu's (small muted headings, small rounded logos, no "Stock" badge). */
  html.aiq-phone.ph-nb #ph-search:not(#_):not(#_):not(#_) { z-index: 2147482990; background: #fff; }
  html.aiq-phone.ph-nb[data-theme="dark"] #ph-search:not(#_):not(#_):not(#_) { background: #252933; }
  html.aiq-phone.ph-nb.ph-searching #aiq-ptabs:not(#_):not(#_):not(#_):not(#_) { z-index: 2147482995; }
  html.aiq-phone.ph-nb #ph-search .ps-top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 8px; }
  html.aiq-phone.ph-nb #ph-search .ps-field { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: #ECEEF2; }
  html.aiq-phone.ph-nb[data-theme="dark"] #ph-search .ps-field { background: #2B2F3A; }
  html.aiq-phone.ph-nb #ph-search .ps-field i { flex: none; font-family: "Phosphor-Regular" !important; font-size: 18px; color: var(--ph-mut); }
  html.aiq-phone.ph-nb #ph-search .ps-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent;
    color: var(--ph-ink); font: inherit; font-size: 16px; font-weight: 450; letter-spacing: -.01em; -webkit-appearance: none; appearance: none; }
  html.aiq-phone.ph-nb #ph-search .ps-field input::placeholder { color: var(--ph-mut); }
  html.aiq-phone.ph-nb #ph-search .ps-field input::-webkit-search-cancel-button { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-cancel { flex: none; border: 0; background: none; padding: 8px 2px; color: var(--ph-acc); font: inherit; font-size: 16px; font-weight: 500;
    -webkit-tap-highlight-color: transparent; }
  html.aiq-phone.ph-nb #ph-search .ps-list:not(#_):not(#_):not(#_) { flex: 1; overflow-y: auto; padding: 0 0 calc(110px + env(safe-area-inset-bottom)); }
  html.aiq-phone.ph-nb #ph-search .ps-h:not(#_):not(#_):not(#_) { padding: 16px 18px 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ph-mut); }
  html.aiq-phone.ph-nb #ph-search .ps-row:not(#_):not(#_):not(#_) { display: flex; align-items: center; gap: 12px; margin: 0 8px; padding: 0 10px; min-height: 50px;
    border-radius: 12px; color: var(--ph-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone.ph-nb #ph-search .ps-row:active:not(#_):not(#_):not(#_) { background: rgba(15,17,21,.05); }
  html.aiq-phone.ph-nb[data-theme="dark"] #ph-search .ps-row:active:not(#_):not(#_):not(#_) { background: rgba(255,255,255,.07); }
  html.aiq-phone.ph-nb #ph-search .ps-lg:not(#_):not(#_):not(#_) { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px var(--ph-line); }
  html.aiq-phone.ph-nb #ph-search .ps-lg i:not(#_):not(#_):not(#_) { font-size: 12px; }
  html.aiq-phone.ph-nb #ph-search .ps-tx:not(#_):not(#_):not(#_) { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
  html.aiq-phone.ph-nb #ph-search .ps-tx b:not(#_):not(#_):not(#_) { flex: 1; min-width: 0; font-size: 16px; font-weight: 450; letter-spacing: -.01em; }
  html.aiq-phone.ph-nb #ph-search .ps-tx small:not(#_):not(#_):not(#_) { flex: none; margin: 0; font-size: 13px; font-weight: 450; color: var(--ph-mut); max-width: 45%; }
  html.aiq-phone.ph-nb #ph-search .ps-empty:not(#_):not(#_):not(#_) { padding: 20px 18px; font-size: 15px; color: var(--ph-mut); }

  /* ── Search before you type, Wealthsimple-style (user, 2026-11-01): the grey page, a white search field, quick-link
     chips, then white cards — Recent, your list, Earnings, Explore the market (a sideways row of cards with logo stacks),
     Top movers. js/aiq-phone-search.js showRecent(). ── */
  html.aiq-phone.ph-nb #ph-search:not(#_):not(#_):not(#_):not(#_) { background: #F2F3F5; }
  html.aiq-phone.ph-nb #ph-search .ps-field:not(#_):not(#_) { height: 50px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 0 0 .5px rgba(15,17,21,.06); }
  html.aiq-phone.ph-nb #ph-search .ps-field input:not(#_):not(#_) { font-size: 17px; }
  html.aiq-phone.ph-nb #ph-search .ps-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 4px; }
  html.aiq-phone.ph-nb #ph-search .ps-chips::-webkit-scrollbar { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; background: #FFFFFF;
    box-shadow: 0 0 0 .5px rgba(15,17,21,.07); color: #101112; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; }
  html.aiq-phone.ph-nb #ph-search .ps-chip i { font-size: 17px; }
  html.aiq-phone.ph-nb #ph-search .ps-sh { display: flex; align-items: center; gap: 6px; margin: 20px 18px 8px; color: #101112; font: 700 21px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.02em; text-decoration: none; }
  html.aiq-phone.ph-nb #ph-search .ps-sh i { font-size: 16px; color: #80868F; }
  html.aiq-phone.ph-nb #ph-search .ps-card { display: block; margin: 0 12px; padding: 4px 0; border-radius: 20px; background: #FFFFFF; }
  html.aiq-phone.ph-nb #ph-search .ps-card .ps-row:not(#_):not(#_):not(#_) { margin: 0 4px; min-height: 60px; }
  html.aiq-phone.ph-nb #ph-search .ps-empty-card { padding: 26px 20px; text-align: center; color: #101112; font-size: 15px; text-decoration: none; }
  /* rows with figures: logo · name over ticker + day change · right figure over a quiet line */
  html.aiq-phone.ph-nb #ph-search .ps-q .ps-lg:not(#_):not(#_):not(#_) { width: 38px; height: 38px; border-radius: 50%; }
  html.aiq-phone.ph-nb #ph-search .ps-q .ps-tx:not(#_):not(#_):not(#_) { flex-direction: column; align-items: flex-start; gap: 2px; }
  html.aiq-phone.ph-nb #ph-search .ps-q .ps-tx b:not(#_):not(#_):not(#_) { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  html.aiq-phone.ph-nb #ph-search .ps-q .ps-tx small:not(#_):not(#_):not(#_) { max-width: 100%; }
  html.aiq-phone.ph-nb #ph-search .ps-q em { font-style: normal; margin-left: 6px; }
  html.aiq-phone.ph-nb #ph-search .ps-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 48%; font-variant-numeric: tabular-nums; }
  html.aiq-phone.ph-nb #ph-search .ps-r b { font-size: 15px; font-weight: 600; color: #101112; white-space: nowrap; }
  html.aiq-phone.ph-nb #ph-search .ps-r small { font-size: 13px; color: #80868F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html.aiq-phone.ph-nb #ph-search .up { color: #0d8a66 !important; } html.aiq-phone.ph-nb #ph-search .dn { color: #c8203f !important; }
  /* Explore the market: a sideways row of white cards, a title, a stack of logos and a round → */
  html.aiq-phone.ph-nb #ph-search .ps-xs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 12px 4px; scroll-padding: 0 12px; scroll-snap-type: x mandatory; }
  html.aiq-phone.ph-nb #ph-search .ps-xs::-webkit-scrollbar { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-xc { flex: none; width: 62%; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 20px;
    background: #FFFFFF; color: #101112; text-decoration: none; scroll-snap-align: start; }
  html.aiq-phone.ph-nb #ph-search .ps-xc b { font-size: 16px; font-weight: 600; }
  html.aiq-phone.ph-nb #ph-search .ps-xb { display: flex; align-items: center; justify-content: space-between; }
  html.aiq-phone.ph-nb #ph-search .ps-stk { display: flex; }
  html.aiq-phone.ph-nb #ph-search .ps-stk .ps-lg:not(#_):not(#_):not(#_) { width: 36px; height: 36px; border-radius: 10px; margin-right: -8px; background: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 2.5px rgba(15,17,21,.08); }
  html.aiq-phone.ph-nb #ph-search .ps-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #F2F3F5; color: #101112; }
  html.aiq-phone.ph-nb #ph-search .ps-res { margin-top: 10px; }
  /* the clear × inside the field (no Cancel) */
  html.aiq-phone.ph-nb #ph-search .ps-clear { flex: none; border: 0; background: none; padding: 4px; color: #A3A8B2; font-size: 20px; line-height: 1; }
  html.aiq-phone.ph-nb #ph-search .ps-clear[hidden] { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-top:not(#_) { padding-right: 16px; }
  /* a long section as swipeable white columns of three rows, the next one peeking in */
  html.aiq-phone.ph-nb #ph-search .ps-pg { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 12px 2px; scroll-padding: 0 12px; scroll-snap-type: x mandatory; }
  html.aiq-phone.ph-nb #ph-search .ps-pg::-webkit-scrollbar { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-col { flex: none; width: 88%; padding: 4px 0; border-radius: 20px; background: #FFFFFF; scroll-snap-align: start; }
  html.aiq-phone.ph-nb #ph-search .ps-col:only-child { width: 100%; }
  html.aiq-phone.ph-nb #ph-search .ps-col .ps-row:not(#_):not(#_):not(#_) { margin: 0 4px; min-height: 60px; }
  /* the feature card: Dex on a soft lavender */
  html.aiq-phone.ph-nb #ph-search .ps-feat { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 22px 12px 0; padding: 20px 18px; min-height: 150px;
    border-radius: 22px; background: linear-gradient(135deg, #ECE8FF, #E1ECFF); color: #101112; text-decoration: none; }
  html.aiq-phone.ph-nb #ph-search .ps-fi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; margin-bottom: auto; }
  html.aiq-phone.ph-nb #ph-search .ps-fi svg { width: 28px; height: 28px; }
  html.aiq-phone.ph-nb #ph-search .ps-feat b { margin-top: 18px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
  html.aiq-phone.ph-nb #ph-search .ps-feat small { font-size: 14px; color: #5B6170; }
  html.aiq-phone.ph-nb #ph-search .ps-feat .ps-go { position: absolute; right: 16px; bottom: 16px; background: #FFFFFF; }
  /* Categories: grey pills, two rows that scroll sideways */
  html.aiq-phone.ph-nb #ph-search .ps-cats { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 8px; justify-content: start; }
  html.aiq-phone.ph-nb #ph-search .ps-cats::-webkit-scrollbar { display: none; }
  html.aiq-phone.ph-nb #ph-search .ps-cat { white-space: nowrap; padding: 11px 18px; border-radius: 999px; background: #E6E8EC; color: #101112; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; }
/* Search → Stocks page (category cards) */
html.aiq-phone.ph-nb #ph-search .ps-back { display: inline-flex; align-items: center; gap: 4px; margin: 8px 12px 0; padding: 6px 8px; border: 0; background: none; color: #455DDC; font: 600 16px/1 Inter, system-ui, sans-serif; }
html.aiq-phone.ph-nb #ph-search .ps-pt { margin: 4px 18px 0; color: #101112; font: 700 30px/1.15 Inter, system-ui, sans-serif; letter-spacing: -.025em; }
html.aiq-phone.ph-nb #ph-search .ps-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 12px 0; padding: 16px; border-radius: 20px; background: #FFFFFF; color: #101112; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; }
}