/* My stocks on phones, card list (user 2026-11-01 from a Pinterest reference; picked after a ?drafts=1 trial): an
   opened list's stocks as rounded cards; a tapped card grows in place into a dark card (price + a year's line) and
   folds back on a second tap. Built by pcards() in js/aiq-terminal.js, which animates with WAAPI (no CSS transition
   on the class swap). Loaded with media="(max-width: 767px)", so every rule stays inside that query. */
@media (max-width: 767px) {
  html.aiq-phone .pc { --pc-row: #F4F5F7; --pc-ring: #E4E6EB; --pc-ink: #101112; --pc-mut: #80868F;
    --pc-dk: #2B2D33; --pc-hink: #F3F4F6; --pc-chip: rgba(255,255,255,.08);
    overflow-anchor: none; padding: 6px 12px 0; }
  /* dark: a navy-tinted near-black — aiq-attio-classic.js repaints neutral near-blacks to the page navy */
  html.aiq-phone[data-theme="dark"] .pc { --pc-row: rgba(255,255,255,.045); --pc-ring: rgba(255,255,255,.14); --pc-ink: #F1F2F4; --pc-mut: #9AA2B4; --pc-dk: #131626; }

  html.aiq-phone .pc-list { padding: 4px 0 120px; }
  html.aiq-phone .pc-r { overflow: hidden; margin-bottom: 8px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--pc-row); color: var(--pc-ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone .pc-r.is-open { background: var(--pc-dk); color: var(--pc-hink); border-radius: 24px; padding-bottom: 0; }   /* the line's fill runs to the card's edge — no strip under it */
  /* while it animates: above the cards gliding round it, which trail it a beat */
  html.aiq-phone .pc-r.is-moving { position: relative; z-index: 2; }
  html.aiq-phone .pc-r.is-moving, html.aiq-phone .pc-r.is-moving ~ .pc-r { will-change: transform; }
  html.aiq-phone .pc-r.is-moving .pc-px, html.aiq-phone .pc-r.is-moving .pc-ln, html.aiq-phone .pc-r.is-moving .pc-cap, html.aiq-phone .pc-r.is-moving .pc-ax,
  html.aiq-phone .pc-r.is-moving .pc-open { will-change: transform, opacity; }

  /* the row: stays put as the card opens, only the price swaps for the ↗ */
  html.aiq-phone .pc-hd { display: flex; align-items: center; gap: 12px; min-height: 46px; }
  html.aiq-phone .pc-lw { flex: none; width: 46px; height: 46px; border-radius: 13px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(16,17,18,.06); }
  html.aiq-phone .pc-lg { width: 58%; height: 58%; object-fit: contain; }
  html.aiq-phone .pc-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.aiq-phone .pc-nm b { font-size: 16px; font-weight: 600; color: inherit; line-height: 20px; }
  html.aiq-phone .pc-nm small { font-size: 13px; color: inherit; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.aiq-phone .pc-pr { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-pr b { font-size: 16px; font-weight: 600; color: inherit; }
  html.aiq-phone .pc-tg { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--pc-mut); background: var(--pc-row); }
  html.aiq-phone .pc-tg.up { color: #0d8a66; background: rgba(67,209,167,.14); } html.aiq-phone .pc-tg.dn { color: #c8203f; background: rgba(247,52,99,.12); }
  html.aiq-phone[data-theme="dark"] .pc .pc-tg.up { color: #43D1A7; } html.aiq-phone[data-theme="dark"] .pc .pc-tg.dn { color: #F73463; }
  html.aiq-phone .pc-open { display: none; flex: none; width: 34px; height: 34px; border-radius: 50% !important; border: 0; background: var(--pc-chip); color: var(--pc-hink);
    align-items: center; justify-content: center; font-size: 15px; }
  html.aiq-phone .pc-r.is-open .pc-pr { display: none; }
  html.aiq-phone .pc-r.is-open .pc-open { display: inline-flex; }

  /* what opens under the row */
  html.aiq-phone .pc-body { display: none; }
  html.aiq-phone .pc-r.is-open .pc-body, html.aiq-phone .pc-r.is-closing .pc-body { display: block; }
  html.aiq-phone .pc-px { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-px b { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
  html.aiq-phone .pc-body .pos { color: #43D1A7; } html.aiq-phone .pc-body .neg { color: #F73463; }
  html.aiq-phone .pc-px > span { font-size: 15px; font-weight: 600; }
  html.aiq-phone .pc-px > span:last-child { color: inherit; opacity: .55; font-weight: 500; font-size: 13px; }
  html.aiq-phone .pc-chart { position: relative; height: 168px; margin: 14px -14px 0 -12px; padding-top: 22px; }
  html.aiq-phone .pc-cap { position: absolute; top: 0; left: 12px; display: flex; gap: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-cap > span:first-child { opacity: .5; }
  html.aiq-phone .pc-ax { position: absolute; top: 22px; bottom: 6px; right: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    font-size: 10px; opacity: .45; font-variant-numeric: tabular-nums; pointer-events: none; }
  html.aiq-phone .pc-none { padding: 40px 12px; font-size: 13px; opacity: .55; }
  html.aiq-phone .pc-ln { display: block; width: 100%; height: 100%; }
  html.aiq-phone .pc-ln.up { color: #43D1A7; } html.aiq-phone .pc-ln.dn { color: #F73463; }
  html.aiq-phone .pc-ln .a { fill: currentColor; opacity: .1; } html.aiq-phone .pc-ln .l { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

  /* Add stocks: a quiet card after the list; the corner + button is hidden here (user, 2026-11-01: "stands out too much") */
  html.aiq-phone .pc-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; margin: 2px 0 8px;
    border: 1.5px dashed var(--pc-ring); border-radius: 18px; background: none; color: var(--pc-mut); font: 500 15px/1 Inter, system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent; }
  html.aiq-phone .pc-add i { font-size: 16px; }
  html.aiq-phone .pc-add:active { background: var(--pc-row); }
  html.aiq-phone:has(.pc) #ph-fab:not(#_):not(#_):not(#_) { display: none !important; }

  /* ── My stocks, an open list: one white card like Revolut's "Wealth" screen (user, 2026-11-01). Only pcards() in
     aiq-terminal.js emits .pc-rv, so Markets' cards (which share this file) are untouched. ── */
  /* the header is the standard slim row (‹ left, name centred; aiq-phone-header.css) — same place as every other inner page
     (user, 2026-11-02: headers and back buttons in one consistent position) */
  html.aiq-phone .pc.pc-rv { padding: 4px 12px 0; }
  html.aiq-phone .pc-rv .pc-sheet { padding: 20px 6px 8px; border-radius: 20px; background: #FFFFFF; margin-bottom: 120px; }
  html.aiq-phone .pc-rv .pc-sum { padding: 0 10px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-rv .pc-sum b { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--pc-ink); }
  html.aiq-phone .pc-rv .pc-sum b small { font-size: 22px; font-weight: 600; }
  html.aiq-phone .pc-rv .pc-sum > span { font-size: 14px; color: var(--pc-mut); }
  html.aiq-phone .pc-rv .up { color: #0d8a66; } html.aiq-phone .pc-rv .dn { color: #c8203f; }
  /* soft pill actions: light blue tint, blue words + icon (they replace the dashed Add card inside a list) */
  html.aiq-phone .pc-rv .pc-acts { display: flex; gap: 8px; padding: 16px 10px 4px; overflow-x: auto; scrollbar-width: none; }
  html.aiq-phone .pc-rv .pc-acts::-webkit-scrollbar { display: none; }
  html.aiq-phone .pc-rv .pc-act { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
    background: #EDF0FC; color: #455DDC; font: 600 14px/1 Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone .pc-rv .pc-act i { font-size: 16px; }
  html.aiq-phone .pc-rv .pc-act:active { background: #E0E5FA; }
  html.aiq-phone .pc-rv .pc-lab { padding: 22px 10px 6px; font-size: 13px; font-weight: 500; color: var(--pc-mut); }
  /* the rows: no separators, a round logo, the name over its line, the price / value over a small ▲ change */
  html.aiq-phone .pc-rv .pc-list { padding: 0; }
  html.aiq-phone .pc-rv .pc-r { margin-bottom: 0; padding: 10px 10px; border-radius: 16px; background: transparent; }
  html.aiq-phone .pc-rv .pc-r.is-open { background: var(--pc-dk); border-radius: 20px; padding-bottom: 0; }
  html.aiq-phone .pc-rv .pc-hd { gap: 12px; min-height: 40px; }
  html.aiq-phone .pc-rv .pc-chart { margin: 14px -10px 0; }   /* the line runs to the open card's edges (rows pad 10px here) */
  html.aiq-phone .pc-rv .pc-lw { width: 40px; height: 40px; border-radius: 50%; }
  html.aiq-phone .pc-rv .pc-nm b { font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.aiq-phone .pc-rv .pc-nm small { font-size: 13px; opacity: 1; color: var(--pc-mut); font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-rv .pc-r.is-open .pc-nm small { color: inherit; opacity: .6; }
  html.aiq-phone .pc-rv .pc-pr { gap: 3px; }
  html.aiq-phone .pc-rv .pc-pr b { font-size: 15px; font-weight: 600; }
  html.aiq-phone .pc-rv .pc-ch { font-size: 13px; font-weight: 500; color: var(--pc-mut); font-variant-numeric: tabular-nums; }
  html.aiq-phone .pc-rv .pc-ch.up { color: #0d8a66; } html.aiq-phone .pc-rv .pc-ch.dn { color: #c8203f; }
}