/* Phone layout, style A — Portfolio pages (/p/, model portfolios, builder), Congress members, investor pages.
   Same rules as aiq-phone.css: every rule sits inside @media (max-width: 767px) and starts with html.aiq-phone
   (tests/test_phone_layout.py checks every aiq-phone*.css file). Loaded by _phone.html after aiq-phone.css. */

/* ── Portfolio builder (/portfolios/build): step tiles as soft borderless cards, the path switch as a pill track ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .bd-step { border-radius: var(--ph-r-sm) !important; border-color: var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .bd-step.on { border-color: var(--ph-acc) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .bd-path { border-radius: 999px !important; border: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] main .bd-path button { border-radius: 999px !important; }
}

/* ── Superinvestors: Holdings / Activity / History / Analytics scroll in one row (their chip look is aiq-phone.css
   "Every tab row"), boxes inside the panel get the inner-box corner ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 2px !important; }
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs .si-subtab-active::after { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main #si-content :is(.si-insight, .rounded-md, .pf-card, .si-perf-box) { border-radius: var(--ph-r-sm) !important; }
  /* Investors | Stocks switch at the top of the list: a pill track */
  html.aiq-phone.aiq-phone[data-theme] main .si-mode { border-radius: 999px !important; border: 0 !important; padding: 3px !important;
    background: rgba(118,118,128,.12) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .si-mode > a { border-radius: 999px !important; }
  /* Analytics' correlation grid (inline repeat(27,1fr)) ran 1px past the screen */
  html.aiq-phone.aiq-phone[data-theme] main #si-content .pf-corr { overflow: hidden; }
}

/* ── Re-review in the approved look (2026-10-19): Ask, Portfolios, My stocks Terminal, Supply chain ── */
@media (max-width: 767px) {
  /* tab rows the central "Every tab row" rule doesn't list: Portfolios (.ph-tabs) and each list's Terminal (.tm-tabs) */
  html.aiq-phone.aiq-phone[data-theme] main :is(.ph-tabs, .tm-tabs) { display: flex !important; gap: 8px !important; border-bottom: 0 !important;
    box-shadow: none !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.ph-tabs > a, .ph-tabs > button, .tm-tabs > button) {
    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] main :is(.ph-tabs > a, .ph-tabs > button, .tm-tabs > button)::after { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.ph-tabs > a, .tm-tabs > button) > * { border: 0 !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.ph-tabs > .on, .tm-tabs > .on) { background: #0F1115 !important; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(.ph-tabs > .on, .tm-tabs > .on) { background: #F1F2F4 !important; color: #0F1115 !important; }

  /* value toggles as round-ended tracks: Terminal range + D/W/M, model portfolio range, Supply chain By dollars | By dependence */
  html.aiq-phone.aiq-phone[data-theme] main :is(.tq-seg, .pp-rng, .scx-seg) { border: 0 !important; border-radius: 999px !important; padding: 3px !important;
    background: rgba(118,118,128,.12) !important; gap: 2px !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.tq-seg, .pp-rng, .scx-seg) > button { border: 0 !important; border-radius: 999px !important;
    background: transparent !important; box-shadow: none !important; color: var(--ph-mut) !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.tq-seg, .pp-rng, .scx-seg) > button.on { background: var(--ph-card) !important; color: var(--ph-ink) !important;
    box-shadow: 0 1px 3px rgba(15,17,21,.14) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(.tq-seg, .pp-rng, .scx-seg) > button.on { background: #3A3A3C !important; }

  /* Ask: one quiet composer — the placeholder fits (16px so iOS doesn't zoom), no decorative ribbon, the key note fits */
  html.aiq-phone.aiq-phone[data-theme] main #ai-input { font-size: 16px !important; min-height: 48px !important; }
  html.aiq-phone.aiq-phone[data-theme] main canvas.lkr-rb { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main .ai-keynote { max-width: 100% !important; white-space: normal !important; font-size: 13px !important; }

  /* Supply chain: the toggle + source line ran 26px past the card; the source wraps under the toggle */
  html.aiq-phone.aiq-phone[data-theme] main .scx-opts { flex-wrap: wrap !important; row-gap: 6px !important; min-width: 0; }
  html.aiq-phone.aiq-phone[data-theme] main .scx-opts #scx-src { white-space: normal !important; }

  /* Portfolios' strategies table edge to edge with hairlines, like the other list tables */
  html.aiq-phone.aiq-phone[data-theme] main .ph-mtbl-wrap { margin-left: -20px !important; margin-right: -20px !important; border-radius: 0 !important;   /* main 12px + .ph 8px */
    border-left: 0 !important; border-right: 0 !important; border-color: var(--ph-edge) !important; }
}