/* Record and other pages in the phone finance look (user, 2026-11-01: Revolut / Wealthsimple shots, replacing the same
   day's Pinterest colour blocks as "not 'finance' enough"; shared kit css/aiq-phone-pin.css). Congress member, an
   investor, Supply chain (html.pin-rec, set by js/aiq-phone-pin-records.js) and Account (/me): a large title-case name
   with the photo (circle) / logo (rounded square) above it, the headline figure as a white balance card (Revolut's: a quiet
   label over a big figure), the other Highlights white cards with a muted label and a plain figure, changes as small
   signed green / red text, lists grouped in one white card on the grey page. Colour only on gains / losses and the brand
   blue. The Overview · … switch, ‹ Back and desktop are untouched. Phones only: every rule stays inside the media query. */
@media (max-width: 767px) {
  /* ── the record header: the small header keeps ‹ Back and its menu, the name goes large above the switch ── */
  html.aiq-phone.pin-rec #ph-th .ph-th-t:not(#_):not(#_):not(#_):not(#_) { visibility: hidden; }
  html.aiq-phone .prc-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 2px 0 14px; padding: 0 16px; }
  html.aiq-phone .prc-face { width: 64px; height: 64px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 18px;
    background: #FFFFFF; color: #80868F; box-shadow: inset 0 0 0 1px rgba(15,17,21,.07); font: 700 26px/1 Inter, system-ui, sans-serif; }
  html.aiq-phone .prc-face.rd { border-radius: 50%; }
  html.aiq-phone .prc-face img { width: 100%; height: 100%; object-fit: cover; }
  html.aiq-phone .prc-face:not(.rd) img { object-fit: contain; padding: 11px; }
  html.aiq-phone .prc-t { margin: 0; font: 700 34px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.03em; text-transform: none; color: #101112;
    overflow-wrap: anywhere; }
  html.aiq-phone .prc-t.prc-dup small { margin-top: 0; }   /* the name is the header's: only the line under it */
  html.aiq-phone .prc-t small { display: block; margin-top: 6px; font: 500 14px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; color: #80868F; }
  /* Supply chain: the price line sits under the name (its logo and name are the ones above) */
  html.aiq-phone .prc-t .ph-sc-id:not(#_):not(#_) { justify-content: flex-start; margin: 6px 0 0; padding: 0; letter-spacing: 0; }
  html.aiq-phone .prc-t .ph-sc-id :is(img, .nm):not(#_):not(#_) { display: none; }
  html.aiq-phone .prc-t .ph-sc-id .p:not(#_):not(#_) { font-size: 15px; font-weight: 600; }
  html.aiq-phone .prc-t .ph-sc-id .c:not(#_):not(#_) { font-size: 13px; font-weight: 600; }

  /* ── Highlights: white cards, muted label, plain figure (beats aiq-phone-theme.css's brand-blue first card) ── */
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard:not(#_):not(#_) { min-height: 100px; border: 0; border-radius: 20px; box-shadow: none; color: #101112; background: #FFFFFF; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard :is(.l, .l span):not(#_):not(#_) { color: #80868F; opacity: 1; font-weight: 500; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .l i:not(#_):not(#_) { display: none; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v:not(#_):not(#_),
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v :is(span, b):not(.ph-rpill):not(.pos):not(.neg):not(#_):not(#_) { color: #101112; font-size: 22px; line-height: 1.2;
    font-weight: 700; letter-spacing: -.02em; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v :is(.pos, .neg):not(#_):not(#_) { font-size: 22px; font-weight: 700; }
  /* …in their own colours: the theme's first-card rule (aiq-phone-theme.css: white words on the old blue feature card) left a
     green / red first figure white on these white cards — an investor's "Return · 1Y" read as empty (2026-11-07) */
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v .pos:not(#_):not(#_) { color: #0d8a66; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v .neg:not(#_):not(#_) { color: #c8203f; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .v.mut:not(#_):not(#_) { color: #A3A8B2; font-weight: 500; }
  /* a pill in a card (Filed late, a party) is plain text: red for a warning, ink otherwise */
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .ph-rpill:not(#_):not(#_) { padding: 0; background: none; color: #101112; font-size: 22px; font-weight: 700; }
  html.aiq-phone.pin-rec .ph-rcards > .ph-rcard .ph-rpill.rose:not(#_):not(#_) { color: #c8203f; }

  /* the headline figure: one white balance card across both columns, a big figure under a quiet label */
  html.aiq-phone.pin-rec-hero .ph-rov .ph-rcards > .ph-rcard:first-child:not(#_):not(#_) { grid-column: 1 / -1; min-height: 0; gap: 6px; padding: 18px 18px 20px; border-radius: 22px;
    justify-content: flex-start; }
  html.aiq-phone.pin-rec-hero .ph-rov .ph-rcards > .ph-rcard:first-child .v:not(#_):not(#_),
  html.aiq-phone.pin-rec-hero .ph-rov .ph-rcards > .ph-rcard:first-child .v :is(span, b):not(.ph-rpill):not(#_):not(#_) { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; }
  /* a card left over after the hero takes the whole row, never a lone half */
  html.aiq-phone.pin-rec-hero .ph-rov .ph-rcards > .ph-rcard:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* section headings: quiet title case; lists and text in white cards on the grey page */
  html.aiq-phone.pin-rec .ph-rh:not(#_):not(#_) { color: #101112; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  html.aiq-phone.pin-rec :is(.ph-rlist, .ph-rtext):not(#_):not(#_) { border: 0; border-radius: 22px; background: #FFFFFF; }
  html.aiq-phone.pin-rec .ph-rrow .lg :is(img, .lt):not(#_):not(#_) { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,17,21,.07); }
  html.aiq-phone.pin-rec .ph-rrow .val .ph-rpill:not(#_):not(#_) { padding: 0; background: none; font-size: inherit; font-weight: 500; color: #101112; }

  /* Supply chain's Suppliers / Customers: one white card, round logos */
  html.aiq-phone.pin-rec.ph-rsc #ph-sc:not(#_):not(#_):not(#_):not(#_) { border: 0; border-radius: 22px; background: #FFFFFF; padding: 4px 0; }
  html.aiq-phone.pin-rec.ph-rsc #ph-sc .psc-r + .psc-r:not(#_):not(#_):not(#_):not(#_)::before { display: none; }
  html.aiq-phone.pin-rec.ph-rsc #ph-sc .psc-lg:not(#_):not(#_):not(#_):not(#_) { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,17,21,.07); }
  html.aiq-phone.pin-rec.ph-rsc #ph-sc .psc-lg img:not(#_):not(#_):not(#_):not(#_) { width: 24px; height: 24px; }
  html.aiq-phone.pin-rec.ph-rsc #ph-sc .psc-v:not(#_):not(#_):not(#_):not(#_) { font-weight: 600; }

  /* ── Account (/me, phone/account.html): a large title, you and the lists in white cards, the Pro offer softly tinted.
     Beats aiq-phone-account.css's "looks like Explore" rules (one more :not(#_), same !important). ── */
  html.aiq-phone[data-theme] main .ac .ac-title:not(#_):not(#_):not(#_):not(#_) { display: block !important; margin: 2px 0 14px !important; font: 700 34px/1.05 Inter, system-ui, sans-serif !important;
    letter-spacing: -.03em; text-transform: none; color: #101112 !important; }
  html.aiq-phone:has(.ac .ac-title) #ph-th .ph-th-t:not(#_):not(#_):not(#_):not(#_) { visibility: hidden; }
  html.aiq-phone[data-theme] main .ac .ac-grp:not(#_):not(#_):not(#_):not(#_) { border: 0 !important; border-radius: 22px !important; background: #FFFFFF !important; }
  html.aiq-phone[data-theme] main .ac .ac-me:not(#_):not(#_):not(#_):not(#_) { gap: 14px; padding: 16px !important; }
  html.aiq-phone[data-theme] main .ac .ac-me .ac-av:not(#_):not(#_):not(#_):not(#_) { width: 52px; height: 52px; font-size: 20px; }
  html.aiq-phone[data-theme] main .ac .ac-me b:not(#_):not(#_):not(#_):not(#_) { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  html.aiq-phone[data-theme] main .ac .ac-pro:not(#_):not(#_):not(#_):not(#_) { padding: 16px; border: 0 !important; border-radius: 22px !important; background: #EEF1FD !important; }
  html.aiq-phone[data-theme] main .ac .ac-pro .lg:not(#_):not(#_):not(#_):not(#_) { border-radius: 50% !important; background: #FFFFFF; }
  html.aiq-phone[data-theme] main .ac .ac-pro .up:not(#_):not(#_):not(#_):not(#_) { background: #455DDC; color: #FFFFFF; }
  html.aiq-phone[data-theme] main .ac .ac-h:not(#_):not(#_):not(#_):not(#_) { margin: 24px 4px 8px !important; color: #101112 !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.02em; }
}