/* The phone header, as the big apps do it (user, 2026-11-01: "How do most large apps deal with headers?" … "generally
   speaking we should be copying the big guys"). iOS / Apple Stocks / Robinhood:
   - inner screens (an open list, a stock, Earnings …): one slim row — a plain ‹ (no circle), a small centred title, one
     action on the right; no coloured icon tile, no pencil (renaming is a double-tap on the title / the list's own menu)
   - tab pages (Home, My stocks, Markets: html.ph-th-root, set by aiq-phone-tablehead.js): a large bold title on the left
   - view switches (#ph-rtabs: a list's Overview · Why it moved · News, a member's / investor's tabs): an iOS segmented
     control
   ?phead=old (html.ph-hd-old, _phone.html) shows the previous header to compare. Loaded with media="(max-width: 767px)":
   every rule stays inside. */
@media (max-width: 767px) {
  /* the bar */
  html.aiq-phone:not(.ph-hd-old) #ph-th:not(#_):not(#_):not(#_) { position: relative; min-height: 52px; padding: 6px 4px 4px; }
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-b:not(#_):not(#_):not(#_) { width: 44px; height: 44px; background: none; box-shadow: none; color: var(--ph-ink); font-size: 24px; }
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-b i:not(#_):not(#_):not(#_) { font-family: "Phosphor-Regular" !important; }
  html.aiq-phone:not(.ph-hd-old)[data-theme="dark"] #ph-th .ph-th-b:not(#_):not(#_):not(#_) { background: none; box-shadow: none; }
  /* the small centred title; no icon tile, logo or pencil */
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-t:not(#_):not(#_):not(#_) { position: absolute; left: 56px; right: 56px; top: 50%; transform: translateY(-50%); justify-content: center; gap: 0; }
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-t b:not(#_):not(#_):not(#_) { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-t > i:not(#_):not(#_):not(#_),
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-t > img:not(#_):not(#_):not(#_),
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-pen:not(#_):not(#_):not(#_) { display: none !important; }
  /* the right-hand button: plain, like the ‹ */
  html.aiq-phone:not(.ph-hd-old) #ph-th .ph-th-b + .ph-th-t ~ .ph-th-b:not(#_):not(#_):not(#_) { margin-left: auto; }

  /* tab pages: the large title on the left, nothing else in the row */
  html.aiq-phone.ph-th-root:not(.ph-hd-old) #ph-th:not(#_):not(#_):not(#_) { min-height: 0; padding: 14px 20px 6px; }
  html.aiq-phone.ph-th-root:not(.ph-hd-old) #ph-th > .ph-th-b:first-child:not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-th-root:not(.ph-hd-old) #ph-th .ph-th-t:not(#_):not(#_):not(#_) { position: static; transform: none; justify-content: flex-start; flex: 1; }
  html.aiq-phone.ph-th-root:not(.ph-hd-old) #ph-th .ph-th-t b:not(#_):not(#_):not(#_) { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
  html.aiq-phone.ph-th-root:not(.ph-hd-old) #ph-th .ph-th-sp:not(#_):not(#_):not(#_) { display: none; }

  /* view tabs: separate buttons (user, 2026-11-02: "buttons on mobile should be separate", not one joined toggle) — each its
     own rounded pill with a gap, white on the grey page, the open one charcoal; more than fit scroll sideways */
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs:not(#_):not(#_):not(#_) { gap: 6px; margin: 4px 0 12px; padding: 0 12px; border-radius: 0; background: none; box-shadow: none; }
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs button:not(#_):not(#_):not(#_) { flex: none; justify-content: center; height: 36px; padding: 0 12px; gap: 4px; border: 0; border-radius: 999px;
    background: #FFFFFF; box-shadow: none; color: var(--ph-ink); font-size: 14px; font-weight: 500; }
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs button i:not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs button em:not(#_):not(#_):not(#_) { font-style: normal; font-size: 12px; opacity: .55; background: none; padding: 0; }
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs button.on:not(#_):not(#_):not(#_) { background: #2B2D33; color: #FFFFFF; font-weight: 600; }
  html.aiq-phone:not(.ph-hd-old) #ph-rtabs button.on em:not(#_):not(#_):not(#_) { color: #FFFFFF; opacity: .7; }

  /* DRAFT (?phead=large, user 2026-11-02: "is our header too small?"): inner pages get the Revolut / Apple Stocks large title —
     ‹ in the same top-left spot on every page, the name as a 30px bold left-aligned title right under it, then the tabs. */
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th:not(#_):not(#_):not(#_):not(#_) { flex-wrap: wrap; align-items: flex-start; height: auto; min-height: 0; padding: 6px 4px 6px; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th .ph-th-b:not(#_):not(#_):not(#_):not(#_) { order: 0; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th .ph-th-b ~ .ph-th-b:not(#_):not(#_):not(#_):not(#_) { order: 1; margin-left: auto; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th .ph-th-t:not(#_):not(#_):not(#_):not(#_) { position: static; transform: none; order: 2; flex: 0 0 100%; justify-content: flex-start; padding: 0 12px; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th .ph-th-t b:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { font-size: 30px; line-height: 36px; font-weight: 700 !important; letter-spacing: -.025em; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-rtabs:not(#_):not(#_):not(#_):not(#_) { margin-top: 8px; }
  /* table pages draw their own big title (tcards.js .tc-pin-t) and hide the header's: in the draft the header's is the only one,
     so every inner page puts it in the same place */
  html.aiq-phone.ph-hd-large .tc-pin-t:not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
  /* stock pages too (2026-11-03: "Income statement" / "All charts" twice): the header names the tab, so the page's own big
     name (aiq-phone-fin-overview.js #pfp-t) goes and its ticker · price line stays; Overview's #pfp-t is the company row */
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #pfp-t:not(.pfp-ws) > h1:not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th .ph-th-t:not(#_):not(#_):not(#_):not(#_):not(#_) { visibility: visible; }
  /* …and Account (/me): its own .ac-title read "Account" under the header's "Account" (2026-11-07) */
  html.aiq-phone.ph-hd-large:not(.ph-th-root) main .ac .ac-title:not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  /* one geometry for every inner page: the buttons in the row (‹ and the right-hand one) are all
     44px and top-aligned, so a 48px one can't push the ‹ or the title down a few px (Financials 7/55 vs the rest 6/50) */
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th > .ph-th-b:not(.ph-th-sp):not(#_):not(#_):not(#_):not(#_):not(#_) { width: 44px; height: 44px; margin: 0; align-self: flex-start; }
  html.aiq-phone.ph-hd-large:not(.ph-th-root) #ph-th > .pfa:not(#_):not(#_):not(#_):not(#_):not(#_) { align-self: flex-start; margin-top: 0; }
}