/* The one phone colour theme (user, 2026-11-01: "we need a consistent color theme throughout all pages" — picked "always
   light"; and "look for areas where we can add bits of color fill to cards"). Every phone page is light (_phone.html sets
   html.ms-pin + data-theme=light on phones). Use only these:
   - page #F2F3F5 · card #FFFFFF (the finance look, 2026-11-01; was a white page with #F4F5F7 cards) · ink #101112 · muted #80868F · bar / open card charcoal #2B2D33
   - ONE accent: brand blue #455DDC (filled feature cards, links, the selected thing)
   - up / down: #0d8a66 on rgba(67,209,167,.14) · #c8203f on rgba(247,52,99,.12)
   - category tiles (icon squares / dots), always in this order: blue #2a6df4, violet #8b5cf6, teal #06b6d4, amber #f59e0b,
     rose #ec4899, green #12b981, orange #f97316, slate #64748b
   Colour fill, sparingly (one filled card per group, like the big apps' feature card): the first Highlights card is filled
   brand blue with white words; the other Highlights get their icon in a tinted dot in the category order.
   Loaded with media="(max-width: 767px)": every rule stays inside. */
@media (max-width: 767px) {
  html.aiq-phone {
    --ph-acc: #455DDC; --ph-c1: #2a6df4; --ph-c2: #8b5cf6; --ph-c3: #06b6d4; --ph-c4: #f59e0b; --ph-c5: #ec4899; --ph-c6: #12b981; --ph-c7: #f97316; --ph-c8: #64748b;
  }

  /* Highlights: icon in a tinted dot, the category colours in order */
  html.aiq-phone .ph-rcards > .ph-rcard .l i:not(#_) { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
    color: var(--dot, var(--ph-c1)); background: color-mix(in srgb, var(--dot, var(--ph-c1)) 14%, transparent); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+2) { --dot: var(--ph-c2); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+3) { --dot: var(--ph-c3); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+4) { --dot: var(--ph-c4); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+5) { --dot: var(--ph-c5); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+6) { --dot: var(--ph-c6); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+7) { --dot: var(--ph-c7); }
  html.aiq-phone .ph-rcards > .ph-rcard:nth-child(8n+8) { --dot: var(--ph-c8); }

  /* the first Highlights card: filled brand blue, white words (the one feature card in the group) */
  html.aiq-phone .ph-rcards > .ph-rcard:first-child:not(#_) { background: var(--ph-acc); color: #FFFFFF; box-shadow: 0 8px 20px rgba(69,93,220,.22); }
  html.aiq-phone .ph-rcards > .ph-rcard:first-child .l:not(#_), html.aiq-phone .ph-rcards > .ph-rcard:first-child .v:not(#_),
  html.aiq-phone .ph-rcards > .ph-rcard:first-child .v *:not(.ph-rpill):not(#_) { color: #FFFFFF; }
  html.aiq-phone .ph-rcards > .ph-rcard:first-child .l:not(#_) { opacity: .85; }
  html.aiq-phone .ph-rcards > .ph-rcard:first-child .l i:not(#_) { color: #FFFFFF; background: rgba(255,255,255,.2); }
  html.aiq-phone .ph-rcards > .ph-rcard:first-child .ph-rpill:not(#_) { background: rgba(255,255,255,.2); color: #FFFFFF; }
}