/* My stocks on phones: the Pinterest reference's colour scheme (user picked 2026-11-01 after a ?drafts=1 trial) — the page
   shows in light mode whatever the theme (not saved), a white page, the notched bar (aiq-phone-navbar.css) and its raised
   circle in charcoal with square top corners and wider-spaced tabs. Colours only otherwise, never the bar's shape (user).
   html.ms-pin is set by mystocks/index.html. Selectors name the light theme so aiq-attio-classic.js leaves the charcoal
   alone. Loaded with media="(max-width: 767px)": every rule stays inside. */
@media (max-width: 767px) {
  /* the finance look (user, 2026-11-01, Revolut / Wealthsimple shots: "we can go for this look"): a light grey page,
     white rounded cards on it (was a white page with grey cards) */
  html.aiq-phone.ms-pin[data-theme="light"] { --sh-bed: #F2F3F5; }
  html.aiq-phone.ms-pin[data-theme="light"]:not(#_):not(#_):not(#_), html.aiq-phone.ms-pin[data-theme="light"]:not(#_):not(#_):not(#_) body,
  html.aiq-phone.ms-pin[data-theme="light"] main:not(#_):not(#_), html.aiq-phone.ms-pin[data-theme="light"] main > div:not(#_):not(#_) { background: #F2F3F5 !important; }
  /* the table pages' phone rule (aiq-phone-attio.css, html.ph-th-on … main:not(#_)×4: #fafafa) outranked the line above and
     showed as a grey band under the list (user, 2026-11-01: "get rid of that random gray bar") */
  html.aiq-phone.ms-pin[data-theme="light"].ph-th-on .app-shell > main:not(#_):not(#_):not(#_):not(#_):not(#_) { background: #F2F3F5 !important; }

  /* the charcoal bar, square corners and wide tabs moved to aiq-phone-navbar.css for every page (2026-11-01) */

  /* cards: white on the grey page */
  html.aiq-phone.ms-pin[data-theme="light"] .pc { --pc-row: #FFFFFF; }
}