/* DRAFT (2026-11-08): the shared phone portfolio screen (phone/book.html). Round 2: a scroll of different cards (user:
   "more variety of cards, less lists, less text. instead of a bar just use icons stacked to the right") on a white
   page with pastel gradient bands behind two sections ("more variety of background colors"). Brand blue the one
   accent; gains/losses in the house green/red. Phones only: every selector under html.aiq-phone (tests/test_phone_layout.py). */
@media (max-width: 767px) {
  html.aiq-phone .bk { --ink: #101112; --mut: #80868F; --acc: #455DDC; --line: #ECEDF1; --soft: #F3F5F8; padding: 4px 0 28px; color: var(--ink); }
  html.aiq-phone[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_), html.aiq-phone[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) body,
  html.aiq-phone[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) main, html.aiq-phone[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #ph-cbar,
  html.aiq-phone[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #ph-th, html.aiq-phone .bk:not(#_):not(#_):not(#_):not(#_) { background: #FFFFFF !important; }
  html.aiq-phone .bk i { font-family: "Phosphor-Bold" !important; }
  html.aiq-phone .bk .pos { color: #0d8a66; } html.aiq-phone .bk .neg { color: #c8203f; }

  /* logos: round; a fund with no logo shows its ticker on a dark circle */
  html.aiq-phone .bk-lg { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(16,24,40,.08); }
  html.aiq-phone .bk-lg img { width: 70%; height: 70%; object-fit: contain; }
  html.aiq-phone .bk-tk { width: 100%; height: 100%; display: grid; place-items: center; background: #15171C; color: #FFFFFF; font-size: 9.5px; font-weight: 700; }

  /* the top: avatar · sub over value · the top holdings stacked on the right */
  html.aiq-phone .bk-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  html.aiq-phone .bk-av { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: #EEF1FD; color: var(--acc); font-size: 18px; font-weight: 750; }
  html.aiq-phone .bk-av img { width: 100%; height: 100%; object-fit: cover; }
  html.aiq-phone .bk-top-k { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.aiq-phone .bk-top-k small { font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.aiq-phone .bk-top-k b { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.aiq-phone .bk-est { display: inline-grid; place-items: center; height: 22px; padding: 0 8px; border-radius: 999px; vertical-align: middle;
    background: #FFF3E3; color: #B8620E; font-size: 12px; font-weight: 700; letter-spacing: 0; }
  html.aiq-phone .bk-stack { flex: none; display: flex; }
  html.aiq-phone .bk-stack .bk-lg { width: 40px; height: 40px; box-shadow: 0 0 0 3px #FFFFFF, inset 0 0 0 1px rgba(16,24,40,.08); }
  html.aiq-phone .bk-stack .bk-lg + .bk-lg { margin-left: -12px; }

  /* headings */
  html.aiq-phone .bk-h { display: flex; align-items: center; margin: 26px 0 12px; }
  html.aiq-phone .bk-h h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }

  /* pastel bands (edge to edge) */
  html.aiq-phone .bk-band { margin: 6px -16px 0; padding: 2px 16px 22px; }
  html.aiq-phone .bk-band.a { background: linear-gradient(115deg, #FBEAF6 0%, #EEF0FC 50%, #E6F7F8 100%); }
  html.aiq-phone .bk-band.b { margin-top: 26px; background: linear-gradient(115deg, #E8F6EF 0%, #EAF1FD 55%, #F3ECFC 100%); }
  html.aiq-phone .bk-band .bk-h { margin-top: 20px; }

  /* top holdings: 2×2 white tiles */
  html.aiq-phone .bk-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  html.aiq-phone .bk-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 22px; background: #FFFFFF; color: var(--ink);
    text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
  html.aiq-phone .bk-tile .bk-lg { margin-bottom: 8px; }
  html.aiq-phone .bk-tile b { font-size: 17px; font-weight: 700; }
  html.aiq-phone .bk-tile-f { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  html.aiq-phone .bk-tile em { font-style: normal; font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--acc); font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-tile small { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

  /* performance: colour card */
  html.aiq-phone .bk-perf { margin-top: 26px; padding: 18px 18px 10px; border-radius: 24px; color: #FFFFFF;
    background: linear-gradient(135deg, #2F3E9E 0%, #455DDC 60%, #6E8BF0 100%); }
  html.aiq-phone .bk-perf-h { display: flex; justify-content: space-between; align-items: flex-end; }
  html.aiq-phone .bk-perf-h span { display: flex; flex-direction: column; gap: 2px; }
  html.aiq-phone .bk-perf-h small { font-size: 12.5px; font-weight: 600; opacity: .8; }
  html.aiq-phone .bk-perf-h b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-vs { align-items: flex-end; }
  html.aiq-phone .bk-vs b { font-size: 17px !important; opacity: .8; }
  html.aiq-phone #bk-line { display: block; width: 100%; height: 110px; margin: 10px 0 4px; overflow: visible; }
  html.aiq-phone #bk-line .bk-me { fill: none; stroke: #FFFFFF; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  html.aiq-phone #bk-line .bk-sp { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

  /* risk: four tinted tiles */
  html.aiq-phone .bk-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  html.aiq-phone .bk-stat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic l" "v v"; align-items: center; gap: 6px 8px; padding: 14px;
    border-radius: 20px; }
  html.aiq-phone .bk-stat i { grid-area: ic; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.75); font-size: 15px; }
  html.aiq-phone .bk-stat small { grid-area: l; font-size: 12.5px; font-weight: 650; color: var(--mut); }
  html.aiq-phone .bk-stat b { grid-area: v; font-size: 21px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-stat.s0 { background: #E6ECFD; } html.aiq-phone .bk-stat.s0 i { color: #3049B8; }
  html.aiq-phone .bk-stat.s1 { background: #F0E8FD; } html.aiq-phone .bk-stat.s1 i { color: #6C3FD1; }
  html.aiq-phone .bk-stat.s2 { background: #FCE8EF; } html.aiq-phone .bk-stat.s2 i { color: #B42357; }
  html.aiq-phone .bk-stat.s3 { background: #E2F5EE; } html.aiq-phone .bk-stat.s3 i { color: #0F7A62; }

  /* sectors: donut + legend */
  html.aiq-phone .bk-sec { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); }
  html.aiq-phone .bk-donut { flex: none; width: 112px; height: 112px; }
  html.aiq-phone .bk-sec-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  html.aiq-phone .bk-sec-l span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
  html.aiq-phone .bk-sec-l span i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
  html.aiq-phone .bk-sec-l em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; }

  /* recent moves: swipe cards */
  html.aiq-phone .bk-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
  html.aiq-phone .bk-row::-webkit-scrollbar { display: none; }
  html.aiq-phone .bk-mv { flex: none; scroll-snap-align: start; width: 118px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px;
    border-radius: 20px; background: #FFFFFF; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
  html.aiq-phone .bk-mv .bk-lg { margin-bottom: 6px; }
  html.aiq-phone .bk-act { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; }
  html.aiq-phone .bk-act.up { background: #E3F5EE; color: #0d8a66; } html.aiq-phone .bk-act.dn { background: #FDE8EC; color: #c8203f; }
  html.aiq-phone .bk-mv b { font-size: 16px; font-weight: 700; }
  html.aiq-phone .bk-mv small { font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }

  /* every holding, folded */
  html.aiq-phone .bk-all { margin-top: 22px; border-radius: 22px; background: var(--soft); }
  html.aiq-phone .bk-all summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 15.5px; font-weight: 650;
    list-style: none; cursor: pointer; }
  html.aiq-phone .bk-all summary::-webkit-details-marker { display: none; }
  html.aiq-phone .bk-all[open] summary i { transform: rotate(180deg); }
  html.aiq-phone .bk-list { padding: 0 16px 8px; }
  html.aiq-phone .bk-r { display: flex; align-items: center; gap: 12px; min-height: 52px; color: inherit; text-decoration: none; }
  html.aiq-phone .bk-r + .bk-r { border-top: 1px solid #E6E8EE; }
  html.aiq-phone .bk-r .bk-lg { width: 34px; height: 34px; }
  html.aiq-phone .bk-r b { flex: 1; font-size: 15px; font-weight: 600; }
  html.aiq-phone .bk-r em { font-style: normal; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

  html.aiq-phone .bk-desk { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; font-size: 15px; font-weight: 600;
    color: var(--acc); text-decoration: none; }

  html.aiq-phone .bk-lock { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 60px 12px; }
  html.aiq-phone .bk-lock > i { font-size: 34px; color: var(--acc); }
  html.aiq-phone .bk-lock h1 { margin: 0; font-size: 22px; font-weight: 700; }
  html.aiq-phone .bk-lock p { margin: 0; font-size: 15px; color: var(--mut); }
  html.aiq-phone .bk-btn { margin-top: 8px; height: 46px; padding: 0 24px; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--acc); color: #FFFFFF; font-weight: 600; text-decoration: none; }

  /* the drafts' bright bottom bar (as on the Home draft, aiq-phone-blossom.css): white, grey tabs, brand-blue circle */
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-bg path { fill: #FFFFFF; }
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-bg { filter: drop-shadow(0 -1px 0 rgba(16,24,40,.08)) drop-shadow(0 -6px 16px rgba(16,24,40,.06)); }
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs:not(:has(> .ph-nb-bg)) { background: #FFFFFF; }
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a i, html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a span { color: #8A90A0; }
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs a.on span { color: #455DDC; }
  html.aiq-phone.ph-nb[data-theme]:has(.bk):not(#_):not(#_):not(#_):not(#_) #aiq-ptabs .ph-nb-ball { background: #455DDC; color: #FFFFFF; box-shadow: 0 6px 16px rgba(69,93,220,.35); }
}
@media (max-width: 767px) {
  /* "Build one like this" (the phone builder, /m/build?like=…) */
  html.aiq-phone .bk-like { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px; border-radius: 22px; color: #FFFFFF; text-decoration: none;
    background: linear-gradient(135deg, #2F3E9E 0%, #455DDC 60%, #6E8BF0 100%); }
  html.aiq-phone .bk-like > i:first-child { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 21px; }
  html.aiq-phone .bk-like span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  html.aiq-phone .bk-like b { font-size: 16px; font-weight: 700; } html.aiq-phone .bk-like small { font-size: 13px; opacity: .85; }
  /* Bloom-style holdings (2026-11-08): the ring with pins + the investor in the middle, then the holdings list */
  html.aiq-phone .bk-ring { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; }
  html.aiq-phone .bk-ring svg { position: absolute; inset: 10%; width: 80%; height: 80%; }
  html.aiq-phone .bk-ring-c { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: #ECE9FD; color: #5B4BD6; font-size: 34px; font-weight: 750; }
  html.aiq-phone .bk-ring-c img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  html.aiq-phone .bk-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 4px;
    border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(16,24,40,.10); font-size: 14px; font-weight: 650; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.aiq-phone .bk-pin .bk-lg { width: 30px; height: 30px; }
  html.aiq-phone .bk-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 6px; text-align: center; }
  html.aiq-phone .bk-sum small { font-size: 14px; color: var(--mut); }
  html.aiq-phone .bk-sum b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-vm { margin-left: auto; border: 0; background: none; color: var(--acc); font: 650 15px/1 Inter, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  html.aiq-phone .bk-hl { border-top: 1px solid var(--line); }
  html.aiq-phone .bk-hr { display: flex; align-items: center; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  html.aiq-phone .bk-hl:not(.bk-open) .bk-x { display: none; }
  html.aiq-phone .bk-hr .bk-lg { width: 46px; height: 46px; }
  html.aiq-phone .bk-hk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.aiq-phone .bk-hk b { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
  html.aiq-phone .bk-hk small { font-size: 14px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.aiq-phone .bk-hr em { flex: none; font-style: normal; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-pill { flex: none; min-width: 74px; height: 32px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 14px;
    font-weight: 650; background: var(--soft); font-variant-numeric: tabular-nums; }
  html.aiq-phone .bk-pill.pos { background: #E3F5EE; color: #0d8a66; } html.aiq-phone .bk-pill.neg { background: #FDE8EC; color: #c8203f; }
  html.aiq-phone .bk-pill:empty, html.aiq-phone .bk-pill:not(.pos):not(.neg) { visibility: hidden; }
}