/* My cards - the reader's own pages (`web/mycards.py`, 2026-09-27).
   Loaded only by /my/collection, /my/watchlist and /my/compare, after
   pages.css and card-stage.css; every part it styles is the card page's own
   (ring, knob on a track, verdict chip, the six facts) placed in the reader's
   rows. Class names start `pv-my-` so nothing here can restyle a public page. */

.pv-mine-page { padding-top: var(--s2); }

/* --- the tab row: "My cards", its tabs, and (Collection) the view pill --- */
.pv-my-tabsrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 30px; border-bottom: 1px solid var(--hairline);
}
.pv-my-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.pv-my-title {
  margin: 0 16px 0 0; font-family: var(--display); font-size: 24px; font-weight: 700;
  letter-spacing: -.01em; color: var(--parchment);
}
.pv-my-tab {
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--fg-muted);
  padding: 8px 16px; border-radius: 99px; border: 1px solid transparent;
}
.pv-my-tab:hover { color: var(--parchment); text-decoration: none; }
.pv-my-tab.on { color: var(--parchment); border-color: var(--gilt-soft); background: rgba(200, 170, 110, .07); }
.pv-my-admin { color: var(--gilt); }

/* the view pill: a gilt thumb that slides between Showcase and List */
.pv-my-pill {
  --i: 0;
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none;
  padding: 3px; border-radius: 99px; background: var(--bg-sunken); border: 1px solid var(--border);
}
.pv-my-pill::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 99px; border: 1px solid var(--gilt-soft);
  background: linear-gradient(180deg, rgba(232, 207, 151, .2), rgba(200, 170, 110, .08));
  transform: translateX(calc(var(--i) * 100%)); transition: transform .38s cubic-bezier(.3, .7, .2, 1);
}
.pv-my-pill button {
  position: relative; min-width: 92px; padding: 7px 16px; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 12.5px; font-weight: 600; color: var(--fg-muted);
  border-radius: 99px; transition: color .25s;
}
.pv-my-pill button[aria-pressed="true"] { color: var(--parchment); }
.pv-my-pill button:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }

/* --- the two views of one collection ------------------------------------ */
.pv-my-collection[data-view="showcase"] .pv-my-view[data-for="list"],
.pv-my-collection[data-view="list"] .pv-my-view[data-for="showcase"] { display: none; }
@keyframes pv-my-in { from { opacity: 0; transform: translateY(8px); } }
.pv-my-view { animation: pv-my-in .45s cubic-bezier(.2, .7, .2, 1) both; }

.pv-my-kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gilt);
}
.pv-my-kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gilt-soft), transparent); }
.pv-my-panel {
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line); border-radius: 16px;
}
.pv-my .pos { color: var(--pos-strong); }
.pv-my .neg { color: var(--neg-strong); }
.pv-my .muted { color: var(--fg-muted); }
.pv-my-dash { color: var(--fg-faint); }
.gilt { color: var(--gilt); }

/* --- Showcase: the centrepiece on its stage, then the tiles --------------- */
.pv-my-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.pv-my-stage { display: block; }
.pv-my-stage .card-stage { --cw: 232px; }
.pv-my-total {
  margin: 0; font-family: var(--display); font-size: clamp(40px, 5vw, 56px); font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; color: var(--parchment); font-variant-numeric: tabular-nums;
}
.pv-my-lead { margin: 8px 0 0; font-size: 15px; color: var(--fg-dim); }
.pv-my-lead span { font-weight: 700; }
.pv-my-centre { margin: 10px 0 0; font-size: 13.5px; color: var(--fg-dim); }
.pv-my-chartbox { margin-top: 22px; padding: 14px 10px 4px; border-radius: 14px; background: var(--bg-sunken); border: 1px solid var(--hairline); }
.pv-my-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pv-my-grid { stroke: rgba(246, 242, 236, .06); }
.pv-my-tick { fill: var(--fg-muted); font-size: 12px; font-family: var(--sans); }
.pv-my-area { fill: url(#pv-my-fill); }
.pv-my-line { fill: none; stroke: var(--pos-strong); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pv-my-paid { stroke: var(--gilt); stroke-dasharray: 4 5; opacity: .75; }
.pv-my-paid-l { fill: var(--gilt); font-size: 12px; font-family: var(--sans); }
.pv-my-now { fill: var(--parchment); stroke: var(--pos-strong); stroke-width: 2.2; }
.pv-my-ping { fill: none; stroke: var(--pos-strong); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pv-motion .pv-my-ping { animation: pv-ping 2.8s cubic-bezier(.2, .6, .3, 1) 1.4s infinite; }
.pv-motion .pv-my-line { stroke-dasharray: 1; animation: pv-draw 1.6s cubic-bezier(.45, .05, .25, 1) both; }
.pv-motion .pv-my-area { animation: pv-fade .9s ease .6s both; }

.pv-my-cardshead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 44px 0 16px; }
.pv-my-cardshead h2 {
  margin: 0 12px 0 0; font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gilt);
}
.pv-my-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-my-chip {
  padding: 6px 12px; border-radius: 99px; border: 1px solid transparent; cursor: pointer;
  background: rgba(246, 242, 236, .06); color: var(--fg-dim); font-size: 12.5px; font-weight: 600;
}
.pv-my-chip:hover { color: var(--parchment); }
.pv-my-chip.on { background: rgba(200, 170, 110, .14); color: var(--parchment); border-color: var(--gilt-line); }
.pv-my-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 18px;
  border-radius: 99px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--parchment);
  font-family: var(--display); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pv-my-btn:hover { border-color: var(--gilt-soft); text-decoration: none; }
.pv-my-cardshead .pv-my-btn { margin-left: auto; }
.pv-my-btn[hidden] { display: none; }
.pv-my-btn.gold { border: 0; color: #1a1715; background: linear-gradient(180deg, #e8cf97, var(--gilt)); }
.pv-my-btn.sm { height: 30px; padding: 0 12px; font-size: 11.5px; }
.pv-my-link {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--fg-muted); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px;
}
.pv-my-link:hover { color: var(--parchment); }

.pv-my-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pv-my-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 16px; background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--border);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s;
}
.pv-my-tile:hover { transform: translateY(-3px); border-color: var(--gilt-line); }
.pv-my-tile-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--sa, #d7e0ee) 24%, transparent), transparent 68%), var(--bg-sunken);
}
.pv-my-tile-img { height: 88%; width: auto; border-radius: 7px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pv-my-tile:hover .pv-my-tile-img { transform: scale(1.04) rotate(-1deg); }
.pv-my-qty {
  position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px;
  background: rgba(12, 10, 9, .75); color: var(--parchment); font-size: 11.5px; font-weight: 700;
}
.pv-my-edit {
  position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(12, 10, 9, .72); color: var(--parchment);
  cursor: pointer; opacity: 0; transition: opacity .2s;
}
.pv-my-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pv-my-tile:hover .pv-my-edit, .pv-my-edit:focus-visible { opacity: 1; }
@media (hover: none) { .pv-my-edit { opacity: 1; } }
.pv-my-tile-name { margin: 2px 0 0; font-family: var(--display); font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.pv-my-tile-name a { color: var(--parchment); }
.pv-my-tile-set { margin: 0; font-size: 12px; color: var(--fg-muted); }
.pv-my-tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.pv-my-tile-value { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.pv-my-tile-gain { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.pv-my-tile-chip { min-height: 22px; }

/* --- List: the head, the chart with its rail, the ledger ----------------- */
.pv-my-chartpanel { display: grid; grid-template-columns: minmax(0, 1fr) 250px; overflow: hidden; }
.pv-my-chartpanel .pv-my-chartbox { margin: 0; border: 0; border-radius: 0; background: none; padding: 18px 10px 8px 16px; }
.pv-my-rail { display: grid; gap: 18px; align-content: start; padding: 22px 24px; border-left: 1px solid var(--hairline); }
.pv-my-rail p { margin: 0; }
.pv-my-rk { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.pv-my-rv { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--parchment); font-variant-numeric: tabular-nums; }
.pv-my-rb { font-family: var(--display); font-size: 14px; font-weight: 700; }
.pv-my-rb a { color: var(--parchment); }
.pv-my-rn { font-size: 12px; color: var(--fg-muted); }

.pv-my-ledger { overflow: hidden; }
.pv-my-lhead, .pv-my-row {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 48px minmax(0, 1.6fr) 54px minmax(0, 1.3fr) minmax(0, 1fr) 176px 60px 70px;
}
.pv-my-wl .pv-my-lhead, .pv-my-wl .pv-my-row {
  grid-template-columns: 48px minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 176px 60px 250px;
}
/* "60 days" is one line; the longer heads may wrap */
.pv-my-lhead span:nth-last-child(2) { white-space: nowrap; }
.pv-my-lhead {
  padding: 12px 20px; font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.pv-my-row { padding: 12px 20px; border-top: 1px solid var(--hairline); transition: background .2s; }
.pv-my-row:hover { background: rgba(246, 242, 236, .025); }
.pv-my-thumb-img { width: 44px; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); display: block; }
.pv-my-who h3 { margin: 0; font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1.3; }
.pv-my-who h3 a { color: var(--parchment); }
.pv-my-who p { margin: 2px 0 0; font-size: 12px; color: var(--fg-muted); }
.pv-my-q { margin: 0; font-size: 13px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.pv-my-pn { margin: 0 0 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pv-my-pn b { color: var(--fg); }
.pv-my-pn .pos, .pv-my-pn .neg { font-weight: 700; }
.pv-my-sub { margin: 5px 0 0; font-size: 11.5px; color: var(--fg-muted); }
.pv-my-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pv-my-rng .pv-my-link { margin-top: 6px; }

/* a change as a bar from the middle (blue right, red left) */
.pv-my-gain { position: relative; display: block; width: min(150px, 100%); height: 6px; border-radius: 3px; background: rgba(246, 242, 236, .06); }
.pv-my-gain::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(246, 242, 236, .22); }
.pv-my-gain i { position: absolute; top: 0; bottom: 0; width: max(3px, calc(var(--w) * 100%)); border-radius: 3px; }
.pv-my-gain.pos i { left: 50%; background: var(--pos); }
.pv-my-gain.neg i { right: 50%; background: var(--neg); }
.pv-motion .pv-my-gain i { animation: pv-grow 1s cubic-bezier(.3, .7, .2, 1) .2s both; transform-origin: 0 50%; }
.pv-motion .pv-my-gain.neg i { transform-origin: 100% 50%; }

/* the knob: the card page's own, pearl unless the card brings its motif */
:where(.pv-my-knob) { --sa: #d7e0ee; }
/* lighter in a dense row than on the card page's spec sheet */
.pv-my-row .pv-my-knob .pv-bb-track { height: 6px; }
.pv-my-row .pv-my-knob .pv-bb-track i { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  box-shadow: 0 0 0 2.5px var(--bg-panel), 0 0 0 4px var(--sa); }
.pv-my-knob .pv-bb-ends .pv-my-link { font-size: 11px; text-decoration: none; color: var(--fg-muted); }
.pv-my-knob .pv-bb-ends .pv-my-link:hover { color: var(--parchment); }
.pv-my-knob.is-reached .pv-bb-ends .pv-my-link { color: var(--pos-strong); font-weight: 600; }
.pv-my-knob .pv-bb-ends { margin-top: 7px; font-size: 11px; }
.pv-my-row .pv-my-knob.is-reached .pv-bb-track i { box-shadow: 0 0 0 2.5px var(--bg-panel), 0 0 0 4px var(--pos-strong); }
/* the list's head: the ring with its caption under it */
.pv-my-list > .pv-sec-head .pv-sec-ring { flex-direction: column; align-items: center; gap: 6px; }
.pv-my-list > .pv-sec-head .pv-ring-cap { max-width: 13ch; text-align: center; font-size: 10.5px; }

/* the watchlist's pick-to-compare */
.pv-my-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); cursor: pointer; }
.pv-my-pick input { accent-color: var(--gilt); width: 15px; height: 15px; }
.pv-my-x {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; background: none;
  color: var(--fg-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.pv-my-x:hover { color: var(--neg-strong); border-color: var(--border); }

/* --- the foot both views share: value by set, the next 60 days ------------ */
.pv-my-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.pv-my-foot-p { padding: 24px 26px; }
.pv-my-foot-p h2 {
  margin: 0 0 18px; font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gilt);
}
.pv-my-foot-p .pv-sec-head { margin: 0; }
.pv-my-foot-p .pv-sec-headline { font-size: 18px; }
.pv-my-foot-p .pv-sec-line { font-size: 13.5px; }
.pv-my-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.pv-my-stack i { flex: var(--w) 0 0; background: var(--c); min-width: 2px; }
.pv-motion .pv-my-stack i { animation: pv-grow .9s cubic-bezier(.3, .7, .2, 1) both; transform-origin: 0 50%; }
.pv-my-legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.pv-my-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.pv-my-legend .nm { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-my-legend .num { text-align: right; font-variant-numeric: tabular-nums; }
.pv-my-sw { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.pv-my-note { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-muted); }

/* --- Compare -------------------------------------------------------------- */
.pv-my-chead { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pv-my-chead .pv-sec-head { margin-bottom: 18px; }
.pv-my-cchart { padding: 18px 16px 10px; }
.pv-my-cline { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.pv-my-cend { fill: var(--c); font-size: 12.5px; font-weight: 700; font-family: var(--sans); }
.pv-my-facts { margin-top: 18px; overflow-x: auto; }
.pv-my-frow {
  display: grid; gap: 26px; padding: 20px 24px; border-top: 1px solid var(--hairline);
  grid-template-columns: 160px repeat(var(--n), minmax(210px, 1fr));
}
.pv-my-fhead { border-top: 0; align-items: center; }
.pv-my-fl {
  display: flex; align-items: flex-start; gap: 8px; margin: 3px 0 0;
  font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.pv-my-fl .pv-bb-ico { margin-top: -3px; }
.pv-my-fc .pv-bb-head { font-size: 15px; margin-bottom: 10px; }
.pv-my-fc .pv-bb-vis { min-height: 44px; margin-bottom: 10px; }
.pv-my-fc .pv-bb-line { font-size: 12.5px; }
.pv-my-ch { position: relative; display: flex; gap: 14px; align-items: center; padding-right: 26px; }
.pv-my-ch-img { width: 58px; height: auto; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .55); display: block; }
.pv-my-ch-name { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--display); font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.pv-my-ch-name a { color: var(--parchment); }
.pv-my-ch-price { margin: 4px 0 0; font-family: var(--display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-my-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pv-my-ch .pv-my-x { position: absolute; top: -4px; right: -6px; }

/* --- empty, guest --------------------------------------------------------- */
.pv-my-empty { display: grid; justify-items: center; gap: 10px; padding: 70px 20px 80px; text-align: center; }
.pv-my-empty .pv-my-kicker { justify-content: center; }
.pv-my-empty .pv-my-kicker::after { display: none; }
.pv-my-empty-t { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--parchment); }
.pv-my-empty-l { margin: 0 0 12px; max-width: 52ch; font-size: 15px; color: var(--fg-dim); }
.pv-my-guest-go { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- the dialog: find a card, copies, condition, price paid, a target ------ */
.pv-my-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--gilt-line); border-radius: 18px;
  background: var(--panel-grad), var(--bg-panel); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.pv-my-dialog::backdrop { background: rgba(8, 7, 6, .72); backdrop-filter: blur(3px); }
.pv-my-dform { display: grid; gap: 14px; padding: 24px; }
.pv-my-dform h2 { margin: 0; font-family: var(--display); font-size: 19px; color: var(--parchment); }
.pv-my-dcard { display: flex; gap: 12px; align-items: center; }
.pv-my-dcard img { width: 46px; border-radius: 4px; }
.pv-my-dcard b { font-family: var(--display); color: var(--parchment); }
.pv-my-dcard small { display: block; color: var(--fg-muted); font-size: 12px; }
.pv-my-dform label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.pv-my-dform input, .pv-my-dform select {
  height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-sunken); color: var(--fg); font: inherit; font-size: 14px;
}
.pv-my-dform input:focus, .pv-my-dform select:focus { outline: none; border-color: var(--gilt-soft); }
.pv-my-dgrid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.pv-my-dcheck { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; }
.pv-my-dcheck input { height: auto; accent-color: var(--gilt); }
.pv-my-dresults { display: grid; gap: 2px; max-height: 300px; overflow: auto; }
.pv-my-dresults button {
  display: flex; gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 10px;
  background: none; color: var(--fg); text-align: left; cursor: pointer;
}
.pv-my-dresults button:hover, .pv-my-dresults button:focus-visible { background: var(--bg-hover); outline: none; }
.pv-my-dresults img { width: 34px; border-radius: 3px; }
.pv-my-dresults small { display: block; color: var(--fg-muted); font-size: 11.5px; }
.pv-my-dfoot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pv-my-dfoot .pv-my-danger { margin-right: auto; color: var(--neg-strong); }
.pv-my-derr { margin: 0; font-size: 12.5px; color: var(--neg-strong); }

/* --- narrower screens ------------------------------------------------------ */
@media (max-width: 1100px) {
  .pv-my-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-my-lhead { display: none; }
  .pv-my-row, .pv-my-wl .pv-my-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "t w n" "t p v" "t r r" "t a a";
    gap: 10px 16px; padding: 16px 18px;
  }
  .pv-my-thumb { grid-area: t; align-self: start; }
  .pv-my-who { grid-area: w; }
  .pv-my-q { display: none; }
  .pv-my-pnc { grid-area: p; }
  .pv-my-rng { grid-area: r; max-width: 360px; }
  .pv-my-v { grid-area: v; justify-self: end; }
  .pv-my-n { grid-area: n; justify-self: end; }
  .pv-my-act { grid-area: a; justify-content: flex-start; }
}
@media (max-width: 860px) {
  .pv-my-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pv-my-stage .card-stage { --cw: 200px; }
  .pv-my-chartpanel { grid-template-columns: minmax(0, 1fr); }
  .pv-my-rail { grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid var(--hairline); padding: 18px; }
  .pv-my-foot { grid-template-columns: minmax(0, 1fr); }
  .pv-my-tick, .pv-my-paid-l { font-size: 20px; }
  .pv-my-cend { font-size: 20px; }
}
@media (max-width: 640px) {
  .pv-my-tabsrow { flex-direction: column; align-items: stretch; gap: 14px; }
  .pv-my-title { width: 100%; margin-bottom: 6px; }
  .pv-my-tab { padding: 7px 12px; }
  .pv-my-pill { align-self: flex-start; }
  .pv-my-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pv-my-tile { padding: 10px; }
  .pv-my-tile-value { font-size: 17px; }
  .pv-my-tile-foot .pv-ring { display: none; }
  .pv-my-cardshead .pv-my-btn { margin-left: 0; }
  .pv-my-chead { flex-direction: column; align-items: flex-start; }
  .pv-my-tick, .pv-my-paid-l, .pv-my-cend { font-size: 26px; }
  /* Compare on a phone: each fact's name above its row, the cards beside
     each other - two fit a phone, more scroll sideways, snapping per card */
  .pv-my-facts { scroll-snap-type: x mandatory; }
  .pv-my-frow { grid-template-columns: repeat(var(--n), minmax(150px, 1fr)); padding: 14px 16px; gap: 10px 16px; }
  .pv-my-fl { grid-column: 1 / -1; margin: 0; }
  .pv-my-fc, .pv-my-ch { scroll-snap-align: start; }
  .pv-my-ch { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 0; }
  .pv-my-ch-img { width: 48px; }
  .pv-my-ch .pv-my-x { top: -6px; right: -4px; }
  .pv-my-fc .pv-bb-head { font-size: 14px; }
  .pv-my-fc .pv-ring-cap { display: none; }
}