/* Phone layout, style A — Dark-theme fixes across every page in phone mode.
   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. */

/* Dark pass (2026-10-19, audit in the approved phone look): one flat page colour, cards the same colour with the 1px
   --ph-edge outline. Leftover lighter fills (#292929 / #262626 / #242424 / #1F1F1F) and navy header bands from the
   desktop dark theme go flat; fields get a hairline instead of a lighter fill. */
@media (max-width: 767px) {
  /* Home / Explore / Account cards read their own tokens */
  html.aiq-phone.aiq-phone[data-theme="dark"] :is(.hm, .ex, .ac) {
    --hm-card: var(--ph-card); --hm-line: var(--ph-edge); --ex-card: var(--ph-card); --ex-line: var(--ph-edge);
    --ac-card: var(--ph-card); --ac-line: var(--ph-edge); }

  /* page wrappers and footers that kept the old dark page colour */
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(#wl-window, #sc-footer, .ph-mtbl-wrap, .ph-mtbl-wrap .in, div.in) {
    background: var(--ph-bed) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(#ins-table, #ins-table td, #ins-table th) { background: var(--ph-bed) !important; }

  /* cards and tiles: flat with the outline */
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(#wl-feed, .mkx-chip, .mkx-cc, .scx-card, .scx-tile, .scx-map, .aqp-card, .ai-comp) {
    background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main .scx-tile.anon { background: rgba(118,118,128,.12) !important; }
  /* Markets: the navy card-header band */
  html.aiq-phone.aiq-phone[data-theme="dark"] main .mk3 .chd { background: transparent !important; }

  /* buttons and fields with a lighter fill: hairline instead */
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(.stx-next, #wl-vw-btn, .ec-my-btn) {
    background: transparent !important; border: 1px solid var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea):not(#nav-search-input) {
    background: transparent !important; border-color: var(--ph-edge) !important; color: var(--ph-ink) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main select option { background: #1C1C1E; color: var(--ph-ink); }

  /* Comparables: its view row is tabs (chips), its period / ticker switches are toggles (round track, dark-grey pill) */
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-views { gap: 8px !important; border: 0 !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-views button { height: 36px !important; padding: 0 14px !important; border: 0 !important;
    border-radius: var(--ph-r-sm) !important; background: rgba(118,118,128,.16) !important; color: var(--ph-ink) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-views button.on { background: #F1F2F4 !important; color: #0F1115 !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-seg { border: 0 !important; border-radius: 999px !important; padding: 3px !important;
    background: rgba(118,118,128,.16) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-seg button { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] #comp-root .cmp-seg button.on { background: #3A3A3C !important; color: var(--ph-ink) !important; box-shadow: none !important; }
}