/* The version picker (UX1 design §一.3–§一.5, §一.9, §一.15): a sheet of card pictures over a dimmed page, sort
   chips, search, a big-picture switch and a preview layer. Nothing is drawn on a picture (Scryfall's image terms): the
   badges and the selected mark sit under it or around it. */

/* the <dialog> covers the viewport and stays transparent: its ::backdrop dims, the panel slides (never the dialog: a
   transform there would trap the position: fixed preview inside it) */
.vp { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--text); overflow: hidden; }
.vp::backdrop { background: rgba(0, 0, 0, 0.55); }
.vp-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 92dvh; display: flex; flex-direction: column;
  padding-bottom: var(--safe-bottom); border-radius: 14px 14px 0 0; background: var(--panel); animation: vp-up 0.22s ease; }
.vp-panel[hidden] { display: none; }
@keyframes vp-up { from { transform: translateY(32px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vp-panel { animation: none; } }

.vp-head { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 16px; flex: none; }
.vp-titles { flex: 1; min-width: 0; }
.vp-head h2 { margin: 0; padding: 0; font-size: 17px; font-weight: 600; line-height: 22px; }  /* not card.css .card-page h2 */
.vp-count { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.vp-name { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--text-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.vp-find, .vp-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.vp-find svg, .vp-close svg { width: 20px; height: 20px; }
.vp-search { display: flex; align-items: center; gap: 10px; padding: 0 16px 6px; flex: none; }
.vp-search[hidden] { display: none; }
.vp-search input { flex: 1; min-width: 0; height: 36px; border: 0; border-radius: 18px; background: var(--capsule); padding: 0 14px;
  font-size: 14px; outline: none; }
.vp-search-cancel { color: var(--blue); font-size: 15px; }
.vp-tools { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; flex: none; }
.vp-sort button { padding: 0 12px; }
.vp-big { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.vp-note { margin: 0; padding: 0 16px 6px; font-size: 12px; color: var(--text-2); flex: none; }
/* 只看牌库 (UX4 design §二.3): what the grid lists, under the tools; the empty state under the 任意版本 cell */
.vp-scope { margin: 0; padding: 0 16px 6px; font-size: 13px; line-height: 18px; color: var(--text-2); flex: none; }
.vp-scope[hidden], .vp-empty[hidden] { display: none; }
.vp-scope-btn, .vp-manage { display: inline-block; margin-left: 6px; padding: 4px 0; font-size: 13px; color: var(--blue); }
.vp-empty { padding: 4px 16px 12px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.vp-empty b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--text); }
.vp-empty .vp-scope-btn, .vp-empty .vp-manage { display: block; margin: 6px 0 0; font-size: 14px; }
.vp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* minmax(0, 1fr), not 1fr: a cell's nowrap text would widen its column and scroll the sheet sideways */
.vp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 6px 12px 16px; list-style: none; }
.vp.big .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 6px 16px 16px; }
@media (min-width: 600px) {
  .vp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vp.big .vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .vp-panel { left: calc(50% - 380px); right: auto; width: 760px; }
  .vp.big .vp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* content-visibility: auto clips painting to the item's box: 5 px of room above and beside the picture keep the
   selected cell's outline (3 px, 2 px off the picture) whole; the negative margin keeps the grid's spacing */
.vp-item { position: relative; padding: 5px 5px 0; margin: -5px -5px 0; content-visibility: auto;
  contain-intrinsic-size: auto 117px 240px; }
.vp.big .vp-item { contain-intrinsic-size: auto 172px 316px; }
.vp-cell { display: block; width: 100%; padding: 0; border-radius: 6px; text-align: left; color: var(--text); -webkit-user-drag: none; }
.vp-cell:active { background: var(--panel-2); }
.vp-cell:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vp-art { position: relative; display: block; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; overflow: hidden; background: var(--panel-2); }
.vp-art img { display: block; width: 100%; height: 100%; }           /* never object-fit: cover (Scryfall: no crop) */
.vp-cell[aria-current] .vp-art { outline: 3px solid var(--blue); outline-offset: 2px; overflow: visible; }   /* outside the picture */
.vp-cell[aria-current] .vp-art img { border-radius: 4.75% / 3.5%; }
.vp-noimg, .vp-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; text-align: center; }
.vp-noimg b { font-size: 13px; font-weight: 600; }
.vp-noimg span { font-size: 11px; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.vp-blank { border: 1px dashed var(--line); background: var(--panel-2); }
.vp-blank b { font-size: 14px; font-weight: 400; }
.vp-blank small { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.vp-text { display: block; height: 76px; padding-top: 4px; }        /* 4 + 4 × 18: every cell lines up */
.vp-tags { display: flex; flex-wrap: wrap; gap: 4px; height: 18px; overflow: hidden; }   /* a tag that wraps is cut whole */
.vp-set, .vp-setname, .vp-price { display: block; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-set { padding-right: 20px; font-size: 12.5px; }
.vp-set img { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; filter: invert(1); }
.vp-setname { font-size: 12px; color: var(--text-2); }
.vp-price { font-size: 12.5px; }
.vp-check { display: none; margin-right: 3px; color: var(--blue); font-size: 12px; }
.vp-cell[aria-current] .vp-check { display: inline; }
/* the magnifier: a sibling of the cell button over the set line's right end; 32 × 32 to tap, 16 px seen, 6 px past
   the cell (-1 px: the item's 5 px padding). The line's centre is 45 px above the cell's bottom (price 18 + set name
   18 + half of 18) */
.vp-zoom { position: absolute; right: -1px; bottom: 29px; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; color: var(--text-2); }
.vp-zoom svg { width: 16px; height: 16px; }
.vp-tag { padding: 0 5px; border-radius: 3px; font-size: 11px; line-height: 18px; background: var(--panel-3); color: #d1d1d6;
  white-space: nowrap; }  /* = collection.css .col-tag */
.vp-tag.warn { background: var(--orange); color: #000; }
.vp-tag.own { background: #1f8a3c; color: #fff; }   /* 有 N 张: the collection holds it (the deck page's 已有 green) */
.vp-tag.foil { background: linear-gradient(90deg, #33a9ee, #1da1fa); color: #fff; }
.vp-item.skeleton .vp-art { background: var(--panel-2); }
.vp-item.skeleton i { display: block; height: 10px; margin: 6px 0 0; border-radius: 3px; background: var(--panel-2); }
.vp-item.skeleton i + i { width: 60%; }
.vp-msg { margin: 24px 16px; text-align: center; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.vp-msg[hidden] { display: none; }
.vp-msg button { display: inline-block; margin-left: 8px; color: var(--blue); font-size: 14px; }
.vp-source { margin: 0; padding: 4px 16px 16px; font-size: 11px; line-height: 1.6; color: var(--text-3); }

/* the preview layer: one version large, over everything in the dialog. It scrolls (UX4 design §一.2): the first
   screen (.vp-pv-first) at the top, the card's text (.vp-card) under it showing its top edge, the buttons stuck to the
   bottom; the first screen only makes up for a safe area taller than the layer's own 16 px */
.vp-preview { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 0; background: rgba(0, 0, 0, 0.85); }
.vp-preview[hidden] { display: none; }
.vp-pv-first { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; flex: none;
  padding-top: max(0px, var(--safe-top) - 16px); }
.vp-pv-stage { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.vp-pv-prev, .vp-pv-next { flex: none; width: 32px; height: 64px; font-size: 30px; color: var(--text-2); }
.vp-pv-prev[hidden], .vp-pv-next[hidden] { display: block; visibility: hidden; }
/* 264 px: the first screen without the picture (the words, 牌面内容 ⌄, the button bar), measured at 393 × 852,
   360 × 640 and 640 × 360 */
.vp-pv-art { width: min(92vw - 72px, 420px, calc((100dvh - 264px) * 488 / 680)); aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.5%; overflow: hidden; touch-action: pan-y; background: var(--panel-2); }
.vp-pv-art img { display: block; width: 100%; height: 100%; }
.vp-pv-art.zoomed { touch-action: none; }
.vp-pv-art.zoomed img { transform: translate(var(--dx, 0), var(--dy, 0)) scale(2); transform-origin: 0 100%; }  /* the bottom left: number, set, artist */
.vp-pv-fail { margin: 0; font-size: 12px; color: var(--text-2); }
.vp-pv-text { max-width: 420px; text-align: center; font-size: 13px; line-height: 1.5; }
.vp-pv-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; }
.vp-pv-text p { margin: 2px 0 0; }
.vp-pv-set { font-size: 14px; }
.vp-pv-line, .vp-pv-prices { color: #d1d1d6; }
.vp-pv-more { display: block; margin: 4px auto 0; padding: 2px 8px; font-size: 13px; line-height: 18px; color: var(--blue); }
.vp-pv-more[hidden] { display: none; }
/* the card's text (_vp_card.html): left-aligned on the panel colour, a face per .vp-face, Chinese first */
.vp-card { flex: none; width: min(100%, 420px); margin: 16px auto 0; padding: 12px 14px; border-radius: 10px;
  background: var(--panel); text-align: left; scroll-margin-top: 16px; }
.vp-card[hidden] { display: none; }
.vp-face + .vp-face { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vp-face-head { display: flex; align-items: baseline; gap: 8px; }
.vp-face-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; }
.vp-cost { flex: none; display: flex; font-size: 15px; line-height: 1; }
.vp-cost .sym { width: 15px; height: 15px; margin: 0 0 0 1.5px; vertical-align: 0; }   /* = card.css .cd-mv */
.vp-cost .sym-sep { font-size: 13px; margin: 0 3px; align-self: center; }
.vp-en-name, .vp-type-en { margin: 2px 0 0; font-size: 12.5px; line-height: 17px; color: var(--text-2); }
.vp-type { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.vp-rules { margin-top: 8px; font-size: 14.5px; line-height: 22.8px; overflow-wrap: anywhere; }
.vp-rules .syms { margin: 0 0.26em; white-space: nowrap; }                              /* = card.css .cd-rules-text */
.vp-rules .sym { width: 0.94em; height: 0.94em; vertical-align: -0.13em; margin: 0 0.02em; }
.vp-stat { margin: 6px 0 0; font-size: 14px; line-height: 20px; }
.vp-stat span { margin-right: 8px; color: var(--text-2); }
.vp-en { margin-top: 8px; font-size: 13px; }
.vp-en summary { color: var(--blue); cursor: pointer; }
.vp-en .vp-rules { font-size: 14px; line-height: 21px; }
/* the buttons stay at hand over the card's text: stuck to the bottom, the text fading out under them; at the bottom
   too when everything fits (margin-top: auto takes the room left) */
.vp-pv-actions { position: sticky; bottom: 0; z-index: 1; flex: none; display: flex; gap: 12px; width: min(100%, 420px);
  margin: auto auto 0; padding: 24px 0 calc(12px + var(--safe-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 24px); }
.vp-pv-actions button { flex: 1; height: 40px; border-radius: 8px; font-size: 15px; }
.vp-pv-flip, .vp-pv-close { background: var(--panel-2); }
.vp-pv-actions [hidden] { display: none; }

/* keywords in the card's text and their popup #vp-kw-pop (UX4 design §一.4): card.css's .kw / .kw-pop (UX1c) for the
   pages without card.css, scoped to the picker (the card page's own keep card.css's) */
.vp .kw { text-decoration: underline dotted rgba(235, 235, 245, 0.55); text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vp .kw:active, .vp .kw.open { text-decoration: underline solid var(--blue); text-decoration-thickness: 1px; }
.vp .kw:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 2px; }
.vp .kw-pop { position: fixed; inset: auto; margin: 0; padding: 0; width: min(320px, 100vw - 32px); overflow: visible; border: 0;
  border-radius: 10px; background: var(--panel-2); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 14px; line-height: 21px; }
.vp .kw-pop:focus { outline: none; }
.vp .kw-pop::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow-x, 50%) - 7px); width: 14px; height: 14px;
  background: var(--panel-2); transform: rotate(45deg); border-radius: 2px; }
.vp .kw-pop.up::before { top: auto; bottom: -7px; }
.vp .kw-in { position: relative; max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: 10px; }
.vp .kw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.vp .kw-head b { font-size: 15px; font-weight: 600; line-height: 22px; }
.vp .kw-en { font-size: 12.5px; color: var(--text-2); }
.vp .kw-kind { padding: 0 5px; border-radius: 3px; font-size: 11px; line-height: 17px; background: var(--panel-3); color: #d1d1d6; }  /* = .col-tag */
.vp .kw-in p { margin: 6px 0 0; }
.vp .kw-now, .vp .kw-eg, .vp .kw-cr, .vp .kw-note { color: var(--text-2); }
.vp .kw-now { font-size: 12.5px; margin-top: 2px; }
.vp .kw-eg { margin-right: 2px; }
.vp .kw-src { font-size: 11.5px; line-height: 16px; color: var(--text-2); }  /* --text-3 is ~2:1 on --panel-2: a CC BY credit must be readable */

/* the trigger row (UX1 design §一.2; plan b5): the 版本 row of the 加入牌库 / 修改 sheet and of the scan result's row
   sheet. A button the width of the row: the chosen version's picture (30 × 42; a grey card back for 版本待定), two
   lines, and "N 种可选 ›" on the right. With one paper version it is a <div class="vp-trigger one"> holding its own
   buttons (the picture: a preview; 就是这个版本), and the line under it takes 版本待定 back. */
.vp-trigger { flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  border-radius: 6px; background: var(--panel-2); color: var(--text); text-align: left; }
.vp-tr-art { flex: none; display: block; width: 30px; height: 42px; padding: 0; border-radius: 4.75% / 3.5%;
  overflow: hidden; background: var(--panel-3); }
.vp-tr-art img { display: block; width: 100%; height: 100%; }      /* the whole picture, never cropped */
button.vp-tr-art:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vp-tr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vp-tr-main, .vp-tr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-tr-main { font-size: 14px; line-height: 19px; }
.vp-tr-sub { font-size: 12.5px; line-height: 17px; color: var(--text-2); }
.vp-tr-more { flex: none; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.vp-tr-confirm { flex: none; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--orange); color: #000;
  font-size: 12px; white-space: nowrap; }                             /* = collection.css .col-confirm */
.vp-tr-none { flex-basis: 100%; padding: 2px 0 8px; font-size: 12px; color: var(--blue); text-align: left; }
.vp-tr-none[hidden] { display: none; }
/* a caller's line above the scope (UX6 decision 14: why the version shown on the card page may not be chosen) */
.vp-notice { display: block; margin-bottom: 2px; }