/* Phone layout, style A — List pages (Screener, Watchlist, Insiders, Congress, Gov. contracts, Earnings, Superinvestors).
   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. */

/* Re-review in the approved phone look (2026-10-19): flat white, calm tables, round-ended toggles. Tab rows are chips,
   set centrally in aiq-phone.css "Every tab row". */
@media (max-width: 767px) {
  /* tables: no grey header band, no zebra banding — the page is one flat colour (house --tb-* tokens) */
  html.aiq-phone.aiq-phone[data-theme] { --tb-head: var(--ph-card); --tb-band: var(--ph-card); --tb-bg: var(--ph-card); }
  html.aiq-phone.aiq-phone[data-theme] main #screener-table tbody tr:nth-child(even) td { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.gm-thead, .ec-sub) { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(#screener-table, .wl-main table, .ins-tbl, .si-list-tbl) thead th {
    background: var(--ph-card) !important; color: var(--ph-mut) !important; font-weight: 500 !important; }

  /* readable rows on the dense lists (Insiders, Superinvestors): 13.5px figures, a little more air */
  html.aiq-phone.aiq-phone[data-theme] main :is(.ins-tbl, .si-list-tbl, .si-hold-tbl) tbody td {
    font-size: 13.5px !important; padding-top: 8px !important; padding-bottom: 8px !important; }

  /* toggles as round-ended tracks: Screener Table | Plot, Superinvestors Table | Pie and its performance switch */
  html.aiq-phone.aiq-phone[data-theme] main :is(.sc-view-switch, .si-view-switch, .retb-seg) {
    display: inline-flex !important; border: 0 !important; border-radius: 999px !important; padding: 3px !important; gap: 2px !important;
    background: rgba(118,118,128,.12) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.sc-view-switch, .si-view-switch, .retb-seg) > :is(button, a) {
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    color: var(--ph-mut) !important; padding: 5px 12px !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.sc-view-switch, .si-view-switch, .retb-seg) > :is(.on, .is-on, [aria-pressed="true"]) {
    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(.sc-view-switch, .si-view-switch, .retb-seg) > :is(.on, .is-on, [aria-pressed="true"]) { background: #3A3A3C !important; }

  /* Superinvestors sub-tabs: one chip row that scrolls sideways (the four chips + Table | Pie don't fit 390px; wrapping
     put Analytics on a line of its own and clipped the switch). The open chip is the central chip style —
     aiq-phone-people.css painted it with the page colour, which on the flat white page left it blank. */
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs::-webkit-scrollbar { display: none; }
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs > * { flex: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main .si-subtabs .si-subtab.si-subtab-active { background: #0F1115 !important; color: #fff !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main .si-subtabs .si-subtab.si-subtab-active { background: #F1F2F4 !important; color: #0F1115 !important; }
  /* the investor list was a 140px peephole (3 rows) inside a fixed 300px panel; show about seven */
  html.aiq-phone.aiq-phone[data-theme] main .si-list { height: auto !important; max-height: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main #si-list-scroll { flex: none !important; height: auto !important; max-height: 270px !important; }
  /* Watchlist: the pinned ticker column kept its own card colour (a darker stripe in dark mode) */
  html.aiq-phone.aiq-phone[data-theme] main .wl-main :is(tbody td.wl-td, thead th) { background: var(--ph-card) !important; }
  /* page panels kept their own (lighter) card colour in dark mode; the approved look is one flat colour */
  html.aiq-phone.aiq-phone[data-theme] main :is(.ec-col, .ec-panel, .si-list, .si-card, .si-panel, .gm-card, .ins-bar, .ins-tbl-wrap, .ins-foot) {
    background: var(--ph-card) !important; }
  /* Screener Plot view: one flat pane, the chart in an outlined card, its tool switches in a round track */
  html.aiq-phone.aiq-phone[data-theme] main #sc-plot-pane { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] main #sc-plot-card { background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important;
    border-radius: var(--ph-r) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main #sc-plot-head .tools { border-radius: 999px !important; background: rgba(118,118,128,.12) !important;
    padding: 3px !important; overflow-x: auto; scrollbar-width: none; }
  html.aiq-phone.aiq-phone[data-theme] main #sc-plot-head .tools .tg { border-radius: 999px !important; }
}