/* The phone tab bar (built 2026-11-08, the default since 2026-11-09): Markets · Investors (superinvestors) · Congress · My stocks · Account,
   Search as a round button at the top right. Only with html.ph-v2 (set in _phone.html on phones; ?drafts=0 opts a browser out, kept per
   browser). Same notched bar (aiq-phone-navbar.js draws it round whichever tabs are visible); bright colours: white bar, grey
   tabs, brand-blue circle + label (user, 2026-11-08: "brighter and more fitting"). Phones only: every rule under
   html.aiq-phone (tests/test_phone_layout.py). */
@media (max-width: 767px) {
  html.aiq-phone #aiq-ptabs a.ph-v2-only:not(#_):not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-only:not(#_):not(#_):not(#_):not(#_):not(#_) { display: flex; }
  html.aiq-phone.ph-v2 #aiq-ptabs a:not(.ph-v2-only):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-mk:not(#_):not(#_):not(#_) { order: 1; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-si:not(#_):not(#_):not(#_) { order: 2; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-cg:not(#_):not(#_):not(#_) { order: 3; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-ms:not(#_):not(#_):not(#_) { order: 4; }
  html.aiq-phone.ph-v2 #aiq-ptabs a.ph-v2-ac:not(#_):not(#_):not(#_) { order: 5; }

  /* bright colours */
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-bg path { fill: #FFFFFF; }
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-bg { filter: drop-shadow(0 -1px 0 rgba(16,24,40,.08)) drop-shadow(0 -6px 16px rgba(16,24,40,.06)); }
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs:not(:has(> .ph-nb-bg)) { background: #FFFFFF; }
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a i,
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a span { color: #8A90A0; }
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a.on span { color: #455DDC; font-weight: 600; }
  html.aiq-phone.ph-v2[data-theme]:not(#_):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-ball { background: #455DDC; color: #FFFFFF; box-shadow: 0 6px 16px rgba(69,93,220,.35); }

  /* Search: top right; the Search screen covers the bar while open (its tab isn't in this bar for the circle to go to) */
  html.aiq-phone.ph-v2 #ph-v2-search[hidden] { position: fixed; z-index: 60; top: calc(8px + env(safe-area-inset-top)); right: 12px; display: grid; place-items: center;
    width: 38px; height: 38px; border: 0; border-radius: 50%; background: #F3F5F8; color: #101112; font-size: 18px; }
  html.aiq-phone.ph-v2 #ph-v2-search i { font-family: "Phosphor-Bold" !important; }
  html.aiq-phone.ph-v2 #ph-v2-search[hidden] { visibility: visible !important; }   /* a header slot can be visibility:hidden */
  html.aiq-phone.ph-v2 #ph-v2-search.in-th[hidden] { position: static; flex: none; width: 36px; height: 36px; margin-left: 4px; }
  html.aiq-phone.ph-v2 #ph-v2-search.th-end[hidden] { margin-left: auto; }
  html.aiq-phone.ph-v2.ph-v2-tab #ph-th:has(> #ph-v2-search) { min-height: 0; height: 48px; }
  html.aiq-phone.ph-v2 #ph-th .ph-th-sp:has(#ph-v2-search) { display: flex; justify-content: flex-end; visibility: visible; }
  html.aiq-phone.ph-v2.ph-searching #ph-v2-search { display: none; }
  html.aiq-phone.ph-v2.ph-searching #aiq-ptabs:not(#_):not(#_):not(#_):not(#_):not(#_) { visibility: hidden; }
  /* no page title on the bar's own tab screens (user, 2026-11-08, picked "No title at all"); html.ph-v2-tab is set by
     aiq-phone-tablehead.js. Inner screens (a portfolio, a stock) keep theirs. */
  html.aiq-phone.ph-v2.ph-v2-tab #ph-th .ph-th-t:not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-v2.ph-v2-tab :is(.tc-pin-t, .pin-t, .aiq-bigt):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  /* where the header row is hidden the search button floats top right: give it a strip of its own above the content */
  html.aiq-phone.ph-v2.ph-v2-tab:has(body > #ph-v2-search):not(#_):not(#_):not(#_):not(#_):not(#_) .app-shell > main { padding-top: 58px !important; }
  /* the full investor + Congress member lists under the draft bar: a two-column grid of portrait tiles, not one long
     list (user, 2026-11-08: "this page cannot just be one large list, it doesn't look good"). The cards come from
     js/aiq-phone-tcards.js (.pc-r > .pc-hd > face · name over sub · value); only their layout changes here. */
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face):not(#_):not(#_):not(#_):not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    padding: 0; background: transparent; box-shadow: none; border: 0; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) > .pc-r:not(#_):not(#_):not(#_):not(#_):not(#_) { margin: 0; padding: 8px 8px 12px; border-radius: 22px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16,24,40,.05); }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) > .pc-r::before:not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-hd:not(#_):not(#_):not(#_):not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pic pic" "nm nm" "pr pr";
    gap: 8px 6px; padding: 0; min-height: 0; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .tc-face:not(#_):not(#_):not(#_):not(#_):not(#_) { grid-area: pic; width: 100% !important; height: 128px !important; border-radius: 16px !important;
    margin: 0 !important; overflow: hidden; background: #EEF1FD; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .tc-face img:not(#_):not(#_):not(#_):not(#_):not(#_) { width: 100% !important; height: 100% !important; border-radius: 0 !important;
    object-fit: cover; object-position: center 20%; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-nm:not(#_):not(#_):not(#_):not(#_):not(#_) { grid-area: nm; padding: 0 4px; min-width: 0; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-nm b:not(#_):not(#_):not(#_):not(#_):not(#_) { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-nm small:not(#_):not(#_):not(#_):not(#_):not(#_) { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-pr:not(#_):not(#_):not(#_):not(#_):not(#_) { grid-area: pr; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 6px; padding: 0 4px; text-align: left; }
  html.aiq-phone.ph-v2 :is(.si-dir, .cg) .pc-list:has(.tc-face) .pc-pr b:not(#_):not(#_):not(#_):not(#_):not(#_) { font-size: 14.5px; }
  /* fewer buttons on the full lists (user, 2026-11-08: "I don't think we should have all these buttons in one place"):
     no period pill + filter button (the default window stands), and the view switch as quiet words with a 2px bar
     under the open one (the house tab style) instead of a row of pills */
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-cf { display: none !important; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs { gap: 20px; margin: 0 0 14px; padding: 0 2px; border-bottom: 1px solid #E6E8EE;
    background: transparent !important; overflow-x: auto; scrollbar-width: none; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs button { position: relative; height: 38px; padding: 0; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; color: #80868F !important; font-size: 15px; font-weight: 600; white-space: nowrap; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs button i { display: none; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs button :is(span, small, em) { color: inherit !important; background: none !important; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs button.on { color: #101112 !important; }
  html.aiq-phone.ph-v2:has(:is(.si-dir, .cg)):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-rtabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    border-radius: 2px; background: #101112; }
  /* the investor list's own chip row (nav.sid-rail: All managers · Following · Value · Growth…) gets the same quiet
     tabs, and its ☰ Views button goes (the tab screen /m/investors holds the other views' content) */
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) #ph-th button.ph-th-b[aria-label="Views"] { display: none !important; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail { gap: 20px; margin: 0 16px 14px; padding: 0 2px; border-bottom: 1px solid #E6E8EE;
    background: transparent !important; overflow-x: auto; scrollbar-width: none; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail button { position: relative; flex: none; height: 38px; padding: 0; border: 0 !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #80868F !important; font-size: 15px; font-weight: 600; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail button :is(span, small, em, b) { color: inherit !important; background: none !important; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail button :is(i, .sid-dot, [class*="dot"]) { display: none !important; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail button.on { color: #101112 !important; }
  html.aiq-phone.ph-v2:has(.si-dir):not(#_):not(#_):not(#_):not(#_):not(#_) .si-dir nav.sid-rail button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    border-radius: 2px; background: #101112; }
  /* "Search any stock" bar at the top of Markets, Investors and My stocks (user, 2026-11-09): opens the phone search */
  html.aiq-phone .ph-sbar { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin: 4px 0 18px; padding: 0 16px; border: 0;
    border-radius: 999px; background: #F2F3F5; color: #80868F; font: 500 16px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
  html.aiq-phone .ph-sbar i { font-size: 19px; color: #101112; }
}