/* TrainerValue: one shared stylesheet, light theme only. Based on the approved prototype. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/figtree.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ink: #111827;
  --ink-2: #374151;
  --ink-3: #6b7280;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --soft: #f9fafb;
  --paper: #ffffff;
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-soft: #eff4ff;
  --select: #dbe6fe;

  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 0.9375rem;   /* 15 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-price: 2.125rem; /* 34 */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 8px;
  --gutter: 32px;
  --maxw: 1280px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  overflow-x: hidden;
}
::selection { background: var(--select); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.num, table { font-variant-numeric: tabular-nums lining-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-3); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* links, focus */
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 10; background: var(--ink); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--radius); text-decoration: none; }
.skip:focus, .skip:hover { top: var(--s3); color: #fff; }

.ic { width: 16px; height: 16px; flex: none; }

/* ---------- header ---------- */
header.site { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-row { display: flex; align-items: center; gap: var(--s6); height: 64px; }
.mark { color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; flex: none; }
.mark:hover { color: var(--ink); }
.search { position: relative; flex: 1 1 auto; max-width: 640px; display: flex; align-items: center; }
.search .search-ic { position: absolute; left: 12px; color: var(--ink-3); width: 18px; height: 18px; pointer-events: none; }
.search input {
  width: 100%; height: 40px; padding: 0 40px 0 38px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--soft);
  transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out);
}
.search input::placeholder, .hero-search input::placeholder, .field input::placeholder { color: var(--ink-3); opacity: 1; }
.search input:hover { border-color: #9ca3af; }
.search input:focus { background: var(--paper); border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.search kbd { position: absolute; right: 10px; font: 500 var(--fs-xs)/1 var(--font); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; background: var(--paper); }
.search input:focus ~ kbd { display: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
nav.top { display: flex; gap: var(--s5); margin-left: auto; }
nav.top a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-md); display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 2px solid transparent; }
nav.top a:hover { color: var(--ink); }
nav.top a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.badge { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 18px; min-width: 22px; text-align: center; }
nav.top a[aria-current="page"] .badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); }

/* breadcrumb */
.crumbs { padding-top: var(--s5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs li[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs .sep { width: 12px; height: 12px; color: var(--ink-3); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 44px; padding: 0 var(--s5); border-radius: var(--radius); border: 1px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #1f2937; }
.btn-primary:active { background: #030712; }
.btn-primary.is-on { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; font-weight: 500; }
.linkbtn:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.iconbtn:hover { color: var(--ink); border-color: var(--line); background: var(--soft); }

/* segmented control (radio inputs + labels) */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 0 var(--s4); height: 38px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.seg label + input + label { border-left: 1px solid var(--line-2); }
.seg label:hover { background: var(--soft); color: var(--ink); }
.seg input:checked + label { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg label .num { color: var(--ink-3); font-weight: 500; }
.seg input:checked + label .num { color: inherit; }

/* section heads */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.sec-head h2, h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.sec-head a { font-size: var(--fs-sm); font-weight: 600; }
.fine { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s3); }
.na { color: var(--ink-3); font-weight: 500; font-size: var(--fs-sm); }

/* direction glyph */
.dir { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.dir .ic { width: 14px; height: 14px; }
.dir-label { font-weight: 600; color: var(--ink); }
.dir-none .dir-label, .dir-none { color: var(--ink-3); }
.dir-pct { color: var(--ink-3); }
.dir-basis { color: var(--ink-3); margin-left: 2px; }

/* ---------- card page ---------- */
.cardpage {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-areas: "scan head" "scan price";
  grid-template-rows: auto 1fr;
  column-gap: var(--s7);
  padding-top: var(--s5);
}
.scan { grid-area: scan; }
.card-head { grid-area: head; }
.card-price { grid-area: price; }
.scan-frame { position: relative; aspect-ratio: 600 / 825; border-radius: 4.6% / 3.4%; background: var(--soft); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 10px 28px -10px rgb(17 24 39 / .30), 0 2px 6px -2px rgb(17 24 39 / .10); }
.scan-frame img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.scan figcaption { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; max-width: 36ch; }

.card-head h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.meta { margin-top: var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-2); font-size: var(--fs-md); }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.vname > span { display: none; font-weight: 600; color: var(--ink); }

.card-price { margin-top: var(--s5); }
.pv { display: none; }
/* print switch: one radio per print, value = index (works without JS) */
.hv { display: none; }
main:has(.variants input[value="0"]:checked) .pv[data-v="0"], main:has(.variants input[value="0"]:checked) .hv[data-v="0"],
main:has(.variants input[value="1"]:checked) .pv[data-v="1"], main:has(.variants input[value="1"]:checked) .hv[data-v="1"],
main:has(.variants input[value="2"]:checked) .pv[data-v="2"], main:has(.variants input[value="2"]:checked) .hv[data-v="2"],
main:has(.variants input[value="3"]:checked) .pv[data-v="3"], main:has(.variants input[value="3"]:checked) .hv[data-v="3"],
main:has(.variants input[value="4"]:checked) .pv[data-v="4"], main:has(.variants input[value="4"]:checked) .hv[data-v="4"],
main:has(.variants input[value="5"]:checked) .pv[data-v="5"], main:has(.variants input[value="5"]:checked) .hv[data-v="5"],
main:has(.variants input[value="6"]:checked) .pv[data-v="6"], main:has(.variants input[value="6"]:checked) .hv[data-v="6"],
main:has(.variants input[value="7"]:checked) .pv[data-v="7"], main:has(.variants input[value="7"]:checked) .hv[data-v="7"],
main:has(.variants input[value="8"]:checked) .pv[data-v="8"], main:has(.variants input[value="8"]:checked) .hv[data-v="8"],
main:has(.variants input[value="9"]:checked) .pv[data-v="9"], main:has(.variants input[value="9"]:checked) .hv[data-v="9"],
main:has(.variants input[value="10"]:checked) .pv[data-v="10"], main:has(.variants input[value="10"]:checked) .hv[data-v="10"],
main:has(.variants input[value="11"]:checked) .pv[data-v="11"], main:has(.variants input[value="11"]:checked) .hv[data-v="11"] { display: block; }
main:has(.variants input[value="0"]:checked) .vname [data-v="0"],
main:has(.variants input[value="1"]:checked) .vname [data-v="1"],
main:has(.variants input[value="2"]:checked) .vname [data-v="2"],
main:has(.variants input[value="3"]:checked) .vname [data-v="3"],
main:has(.variants input[value="4"]:checked) .vname [data-v="4"],
main:has(.variants input[value="5"]:checked) .vname [data-v="5"],
main:has(.variants input[value="6"]:checked) .vname [data-v="6"],
main:has(.variants input[value="7"]:checked) .vname [data-v="7"],
main:has(.variants input[value="8"]:checked) .vname [data-v="8"],
main:has(.variants input[value="9"]:checked) .vname [data-v="9"],
main:has(.variants input[value="10"]:checked) .vname [data-v="10"],
main:has(.variants input[value="11"]:checked) .vname [data-v="11"] { display: inline; }
main:not(:has(.variants)) .pv, main:not(:has(.variants)) .hv { display: block; }
main:not(:has(.variants)) .vname > span { display: inline; }

.prices { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.mkt { padding: var(--s4) var(--s5) var(--s4) 0; min-width: 0; }
.mkt + .mkt { padding: var(--s4) 0 var(--s4) var(--s5); border-left: 1px solid var(--line); }
.mkt-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); font-weight: 700; }
.mkt-cur { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.lead { margin-top: var(--s2); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.lead strong { font-size: var(--fs-price); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.lead span { font-size: var(--fs-sm); color: var(--ink-3); }
.mkt-empty { margin-top: var(--s3); color: var(--ink-2); font-size: var(--fs-sm); max-width: 34ch; }
.kv { margin-top: var(--s3); font-size: var(--fs-sm); }
.kv th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 7px var(--s3) 7px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.kv td { text-align: right; font-weight: 600; padding: 7px 0; border-top: 1px solid var(--line); }
.kv td i { font-style: normal; color: var(--line-2); padding: 0 2px; }
.trendline { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.trend-src { color: var(--ink-3); font-size: var(--fs-xs); }
.srcline { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); }
.srcnote { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ink-2); text-align: right; }
.srcnote .ic { width: 14px; height: 14px; margin-top: 1px; color: var(--ink-3); }

.variants { border: 0; margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.variants legend { float: left; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-right: var(--s4); line-height: 40px; }
.actions { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.actions-note { font-size: var(--fs-sm); color: var(--ink-3); }

.below { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "hist det" "value det"; column-gap: var(--s7); margin-top: var(--s8); }
.history { grid-area: hist; }
.value { grid-area: value; margin-top: var(--s7); }
.details { grid-area: det; }
.history h2, .value h2, .details h2 { margin-bottom: var(--s4); }
.history-empty { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s6) 0; min-height: 180px; display: flex; flex-direction: column; justify-content: center; gap: var(--s2); color: var(--ink-2); }
.history-empty p { max-width: 62ch; }
.history-title { font-weight: 700; color: var(--ink); font-size: var(--fs-lg); }
.value h3 { font-size: var(--fs-md); font-weight: 700; margin-top: var(--s5); }
.value h3:first-of-type { margin-top: 0; }
.value p { margin-top: var(--s1); color: var(--ink-2); max-width: 68ch; }
.kv-details { margin-top: 0; }
.kv-details td { font-weight: 500; text-align: left; }
.kv-details th { width: 40%; }

.same-set { margin-top: var(--s8); }
.strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s4); }
.tile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.tile:hover { color: var(--ink); }
.tile-img { display: block; aspect-ratio: 245 / 337; border-radius: 5% / 3.6%; overflow: hidden; background: var(--soft); border: 1px solid var(--line); margin-bottom: var(--s2); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-name { font-weight: 600; font-size: var(--fs-sm); }
.tile:hover .tile-name { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tile-meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- set page ---------- */
.set-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: center; padding: var(--s5) 0 var(--s5); border-bottom: 1px solid var(--line); }
.set-title h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s3); }
.facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
.facts dd { font-weight: 600; }
.owned-n { font-size: var(--fs-xl); font-weight: 700; }
.owned-of { font-size: var(--fs-md); font-weight: 500; color: var(--ink-2); }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: var(--s2); }
.bar > span { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width .4s var(--ease-out); }
.owned-hint { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }

.filters { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0; }
.total { display: flex; align-items: baseline; gap: 6px; margin-right: var(--s3); }
.total span:first-child { font-size: var(--fs-xl); font-weight: 700; }
.total span:last-child { color: var(--ink-3); font-size: var(--fs-sm); }
.select select { height: 40px; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 36px 0 var(--s3); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.select select:hover { border-color: #9ca3af; }
.qchip { font-size: var(--fs-sm); color: var(--ink-2); }

.table-wrap { width: 100%; }
.checklist { font-size: var(--fs-sm); }
.checklist thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--ink); padding: var(--s2) var(--s3); white-space: nowrap; }
.checklist th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.checklist th button:hover { color: var(--ink); }
.checklist th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sort-ic { width: 10px; height: 10px; color: var(--line-2); }
.checklist th[aria-sort="ascending"], .checklist th[aria-sort="descending"] { color: var(--accent-ink); }
.checklist th[aria-sort="ascending"] .sort-ic, .checklist th[aria-sort="descending"] .sort-ic { color: var(--accent); }
.checklist th[aria-sort="descending"] .sort-ic { transform: scaleY(-1); }
.checklist td { padding: 6px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.checklist tbody tr:hover td { background: var(--soft); }
.checklist .c-usd, .checklist .c-eur { text-align: right; font-weight: 600; white-space: nowrap; }
.checklist th.c-usd, .checklist th.c-eur { text-align: right; }
.checklist th.c-usd button, .checklist th.c-eur button { flex-direction: row; }
.checklist .c-n { width: 48px; color: var(--ink-3); }
.checklist .c-own, .checklist .c-rm { width: 72px; text-align: center; }
.checklist .c-rar { color: var(--ink-2); white-space: nowrap; }
.checklist .c-dir { width: 150px; }
.c-card { display: flex; align-items: center; gap: var(--s3); }
th.c-card { display: table-cell; }
.thumb { width: 30px; flex: none; aspect-ratio: 245 / 337; border-radius: 2px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-name { display: flex; flex-direction: column; min-width: 0; }
.cardlink { color: var(--ink); font-weight: 600; text-decoration: none; }
.cardlink:hover { color: var(--accent); text-decoration: underline; }
.c-sub { display: none; font-size: var(--fs-xs); color: var(--ink-3); }
.own { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.empty-rows { padding: var(--s6) 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.notes { margin-top: var(--s5); display: grid; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); max-width: 90ch; }

/* ---------- homepage ---------- */
.hero { padding-top: var(--s8); padding-bottom: var(--s7); border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; max-width: 20ch; }
.hero-sub { margin-top: var(--s3); font-size: var(--fs-lg); color: var(--ink-2); max-width: 60ch; }
.hero-search { position: relative; margin-top: var(--s5); display: flex; gap: var(--s2); max-width: 720px; }
.hero-search .search-ic { position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.hero-search input { flex: 1; min-width: 0; height: 54px; padding: 0 var(--s4) 0 46px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: var(--fs-lg); background: var(--paper); }
.hero-search input:hover { border-color: #9ca3af; }
.hero-search input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.hero-search .btn { height: 54px; }
.hero-try { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-3); }

.block { margin-top: var(--s7); }
.setgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.setgrid li > a { border-bottom: 1px solid var(--line); }
.setgrid li:not(:nth-child(3n)) > a { border-right: 1px solid var(--line); }
.settile { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s4); align-items: center; padding: var(--s4); text-decoration: none; color: var(--ink); height: 100%; transition: background-color .15s var(--ease-out); }
.settile:hover { background: var(--soft); color: var(--ink); }
.settile-logo { grid-row: 1 / 3; display: grid; place-items: center start; }
.settile-name { font-weight: 700; align-self: end; }
.settile:hover .settile-name { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.settile-meta { font-size: var(--fs-xs); color: var(--ink-3); align-self: start; }

.two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s7); }
.scope { font-size: var(--fs-sm); color: var(--ink-3); margin: calc(var(--s2) * -1) 0 var(--s3); max-width: 70ch; }
.checklist.compact .c-n { width: 36px; }
.explain p { color: var(--ink-2); max-width: 62ch; margin-top: var(--s3); }
.explain h2 { margin-bottom: var(--s1); }
.pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s4); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pair > div { padding: var(--s3) 0; display: flex; flex-direction: column; }
.pair > div + div { border-left: 1px solid var(--line); padding-left: var(--s4); }
.pair-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.pair strong { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.pair-cap { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); padding: var(--s2) 0; border-top: 1px solid var(--line); margin-top: 0 !important; }

.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s4); }
.guides li { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }
.guide-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.guide-sub { color: var(--ink-2); font-size: var(--fs-sm); }
.tag { margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 9px; }

/* ---------- binder ---------- */
.binder-head { padding-top: var(--s5); }
.binder-head h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.binder-sub { margin-top: var(--s2); color: var(--ink-2); max-width: 70ch; }
.sample-note { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sample-note .ic { color: var(--ink-3); }
.addcard { margin-top: var(--s5); max-width: 640px; }
.addcard-label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s2); }
.addcard-row { display: flex; gap: var(--s2); }
.field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.field .search-ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.field input { width: 100%; height: 44px; padding: 0 var(--s3) 0 38px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); }
.field input:hover { border-color: #9ca3af; }
.field input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.add-msg { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); min-height: 1.55em; }

.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s6); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.tot { display: flex; flex-direction: column; padding: var(--s4) var(--s5) var(--s4) 0; }
.tot + .tot { border-left: 1px solid var(--line); padding-left: var(--s5); }
.tot-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.tot strong { font-size: var(--fs-price); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-top: 2px; }
.tot-sub { font-size: var(--fs-xs); color: var(--ink-3); }
.totals-note { margin-top: var(--s2); }
.binder-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s7); margin-top: var(--s7); }
.binder-grid .sec-head p { font-size: var(--fs-sm); }
.binder-table .c-card { padding-top: 8px; padding-bottom: 8px; }
.binder-table .c-sub, .checklist.compact .c-sub { display: block; }
.completion h2 { margin-bottom: var(--s4); }
.completion ul { border-top: 1px solid var(--ink); }
.completion li { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.completion li a { font-weight: 600; }
.completion li .bar { grid-column: 1 / -1; margin-top: 2px; }

/* ---------- footer ---------- */
footer.site { margin-top: var(--s8); border-top: 1px solid var(--line); background: var(--soft); padding: var(--s6) 0 var(--s7); font-size: var(--fs-sm); color: var(--ink-2); }
.foot-links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot-links a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-2); }
.foot-links a:hover { color: var(--accent); }
.foot-src { margin-top: var(--s4); }
.foot-legal { margin-top: var(--s1); color: var(--ink-3); font-size: var(--fs-xs); max-width: 90ch; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .owned-box { grid-column: 1 / -1; }
  .two { grid-template-columns: 1fr; }
  .setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setgrid li:not(:nth-child(3n)) > a { border-right: 0; }
  .setgrid li:nth-child(odd) > a { border-right: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cardpage { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--s5); }
  .below { grid-template-columns: 1fr; grid-template-areas: "hist" "value" "det"; }
  .details { margin-top: var(--s7); }
  .site-row { gap: var(--s4); }
  .binder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --fs-2xl: 1.875rem; --fs-price: 1.75rem; }
  .site-row { flex-wrap: wrap; height: auto; padding-top: var(--s3); padding-bottom: var(--s3); row-gap: var(--s3); }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search kbd { display: none; }
  nav.top { gap: var(--s4); }
  .crumbs { padding-top: var(--s4); }

  .cardpage { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "scan head" "price price"; grid-template-rows: auto auto; column-gap: var(--s4); padding-top: var(--s4); align-items: start; }
  .scan figcaption { display: none; }
  .card-head { align-self: center; }
  .meta { font-size: var(--fs-sm); gap: 4px 8px; }
  .card-price { margin-top: var(--s4); }
  .scan-note-m { display: block; }
  .prices { grid-template-columns: 1fr 1fr; }
  .mkt { padding-right: var(--s3); }
  .mkt + .mkt { padding-left: var(--s3); }
  .kv { font-size: var(--fs-xs); }
  .kv th { padding-right: var(--s2); white-space: normal; }
  .kv td { white-space: nowrap; }
  .kv tr:last-child th { white-space: normal; }
  .kv tr:last-child td { white-space: normal; }
  .lead { gap: 0 var(--s2); }
  .lead span { font-size: var(--fs-xs); flex-basis: 100%; }
  .srcline { flex-direction: column; gap: var(--s1); }
  .srcnote { text-align: left; }
  .variants { gap: var(--s2); }
  .variants legend { float: none; line-height: 1.5; }
  .variants .seg { width: 100%; }
  .variants .seg label { flex: 1; justify-content: center; padding: 0 var(--s2); font-size: var(--fs-xs); }
  .actions .btn { width: 100%; }
  .trendline { flex-wrap: wrap; }
  .dir-basis { display: none; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s3); padding-bottom: var(--s2); }
  .strip li { flex: 0 0 34%; scroll-snap-align: start; }
  .below { margin-top: var(--s7); }

  .set-head { grid-template-columns: 1fr; gap: var(--s4); }
  .filters { gap: var(--s3); }
  .filters .seg { flex: 1 1 auto; }
  .filters .seg label { flex: 1; justify-content: center; padding: 0 var(--s2); }
  .select, .select select { width: 100%; }
  .total { width: 100%; }
  .checklist .c-n, .checklist .c-rar, .checklist .c-dir { display: none; }
  .c-sub { display: block; }
  .checklist td, .checklist thead th { padding-left: var(--s1); padding-right: var(--s1); }
  .checklist td:first-child, .checklist th:first-child { padding-left: 0; }
  .checklist td:last-child, .checklist th:last-child { padding-right: 0; }
  .checklist .c-own, .checklist .c-rm { width: 48px; }
  .checklist thead th { font-size: 0.75rem; white-space: normal; }
  .thumb { width: 26px; }

  .hero { padding-top: var(--s6); padding-bottom: var(--s6); }
  .hero-search input { height: 48px; font-size: var(--fs-md); }
  .hero-search .search-ic { top: 14px; }
  .hero-search .btn { height: 48px; padding: 0 var(--s4); }
  .setgrid { grid-template-columns: 1fr; }
  .setgrid li:nth-child(odd) > a { border-right: 0; }
  .settile { padding: var(--s3) 0; }
  .guides { grid-template-columns: 1fr; gap: var(--s5); }
  .pair strong { font-size: var(--fs-price); }

  .tot + .tot { padding-left: var(--s3); }
  .tot { padding-right: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- round 1 fixes ---------- */
.cc { display: flex; align-items: center; gap: var(--s3); }
.checklist td.c-card { display: table-cell; }
.m-only { display: none; }
.scan-note-m { display: none; }
.tile-price { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
.tile-price i { font-style: normal; color: var(--line-2); }
.settile-meta { display: flex; flex-direction: column; }
.hero { border-bottom: 0; padding-bottom: var(--s5); }
.srcnote { max-width: 38ch; }
@media (max-width: 720px) {
  .d-only { display: none; }
  .m-only { display: table-row; }
  .scan-note-m { display: block; margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
  .th-long { display: none; }
  .srcnote { max-width: none; }
  .checklist .c-card { width: auto; }
  .checklist .c-usd, .checklist .c-eur { font-size: var(--fs-sm); }
}
.sample-note { display: block; }
.sample-note .ic { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* ---------- finish review fixes ---------- */
/* 1: trend sits in the Cardmarket column; TCGplayer gets its own empty slot */
.mkt { display: flex; flex-direction: column; }
.mkt-trend { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-sm); min-height: 2.6em; display: flex; align-items: flex-start; }
.mkt .kv + .mkt-trend, .mkt .mkt-empty + .mkt-trend { margin-top: auto; }
.mkt-empty { margin-bottom: var(--s4); }
.kv { margin-bottom: var(--s3); }
.mkt-trend-none { color: var(--ink-3); }
.mkt-trend .dir { flex-wrap: wrap; white-space: normal; row-gap: 0; }
.prices { border-bottom: 1px solid var(--line); }

/* 3/4: set symbol slot with a plain text fallback (also the images-off state) */
.setmark { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; }
.setmark img { width: 100%; height: 100%; object-fit: contain; }
.setmark-txt { display: none; font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--ink-3); line-height: 1; white-space: nowrap; }
.setmark.is-text .setmark-txt { display: inline; }
.setmark.is-text { width: auto; min-width: 24px; justify-items: start; }
.setmark.sm { width: 18px; height: 18px; }
.setmark.sm.is-text { width: auto; min-width: 0; }
.setmark.md { width: 32px; height: 32px; }
.setmark.md .setmark-txt { font-size: var(--fs-xs); }
.setmark.lg { width: 36px; height: 36px; }
.setmark.lg .setmark-txt { font-size: var(--fs-md); }
.setlink { display: inline-flex; align-items: center; gap: 6px; }
.setlink .setmark-txt { color: var(--ink-3); }
.set-name { display: flex; align-items: center; gap: var(--s3); }
.c-sub-dir { display: none; }

/* 5: images off (html.no-card-images, or a failed scan) */
html.no-card-images .setmark img { display: none; }
html.no-card-images .setmark .setmark-txt { display: inline; }
html.no-card-images .setmark { width: auto; min-width: 0; justify-items: start; }
html.no-card-images .thumb,
html.no-card-images .tile-img { display: none; }
html.no-card-images .scan,
.cardpage.no-scan .scan,
html.no-card-images .scan-note-m,
.cardpage.no-scan .scan-note-m { display: none; }
html.no-card-images .cardpage,
.cardpage.no-scan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "price"; }
html.no-card-images .card-price, .cardpage.no-scan .card-price { max-width: 880px; }
html.no-card-images .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; column-gap: var(--s5); }
html.no-card-images .tile { padding: var(--s3) 0; border-top: 1px solid var(--line); }

/* 7: binder totals line */
.tot-line { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }
.tot-line:empty { display: none; }
.empty-rows p + p { margin-top: var(--s2); }

@media (max-width: 720px) {
  .c-sub-dir { display: block; margin-top: 1px; }
  .c-sub-dir .dir { font-size: var(--fs-xs); gap: 4px; }
  .c-sub-dir .dir .ic { width: 11px; height: 11px; }
  .mkt-trend .dir-basis { display: block; flex-basis: 100%; margin-left: 0; font-size: var(--fs-xs); }
  html.no-card-images .strip { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  html.no-card-images .strip li { flex: none; }
}

/* Set mark: a symbol-less set (and the images-off state) renders as a CSS badge
   drawn to match the TCGdex code badges: same box, dark fill, light ring, light text. */
.setmark { --mk: 24px; width: var(--mk); height: var(--mk); }
.setmark.sm { --mk: 18px; }
.setmark.md { --mk: 32px; }
.setmark.lg { --mk: 36px; }
.setmark.is-text, html.no-card-images .setmark { width: var(--mk); min-width: var(--mk); justify-items: center; }
.setmark .setmark-txt,
.setmark.md .setmark-txt,
.setmark.lg .setmark-txt,
.setlink .setmark-txt {
  box-sizing: border-box;
  min-width: var(--mk);
  height: calc(var(--mk) * 0.6);
  padding: 0 2px;
  place-items: center;
  background: #231f20;
  color: #ffffff;
  border: 1px solid #231f20;
  box-shadow: inset 0 0 0 1px #a8a6a5;
  border-radius: 2px;
  font-size: calc(var(--mk) * 0.34);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.setmark.sm .setmark-txt { font-size: 7px; border-radius: 1.5px; }
.setmark.is-text .setmark-txt,
html.no-card-images .setmark .setmark-txt { display: inline-grid; }

/* ---------- price history (card page) ---------- */
.hhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.history .hhead h2 { margin-bottom: 0; }
.seg-range label { height: 32px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.hsub { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s3); }
.hpane { display: none; }
.hv:has(.seg-range input[value="1m"]:checked) .hpane[data-r="1m"],
.hv:has(.seg-range input[value="3m"]:checked) .hpane[data-r="3m"],
.hv:has(.seg-range input[value="6m"]:checked) .hpane[data-r="6m"],
.hv:has(.seg-range input[value="1y"]:checked) .hpane[data-r="1y"],
.hv:has(.seg-range input[value="all"]:checked) .hpane[data-r="all"] { display: block; }
.hc-m { display: none; }
.hchart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.hchart .g { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.hchart .tk { stroke: var(--line-2); stroke-width: 1; }
.hchart .yt, .hchart .xt { fill: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.hchart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hchart .bar { fill: var(--line-2); }
.hchart .last { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.hchart .lastlab { fill: var(--ink); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.hchart .hit { fill: transparent; }
.hchart .hit:hover { fill: rgb(17 24 39 / .04); }
.hchart .gapband { fill: var(--soft); }
.hchart .gaptxt { fill: var(--ink-3); font-size: var(--fs-xs); }
.hcap { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }
.eur-hist { margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.eur-k { font-size: var(--fs-sm); color: var(--ink-2); margin-right: var(--s2); }
.eur-hist strong { font-size: var(--fs-lg); font-weight: 700; }
.eur-note { font-size: var(--fs-xs); color: var(--ink-3); max-width: 46ch; }
.hsrc { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s3); max-width: 80ch; }
.hdata { margin-top: var(--s3); font-size: var(--fs-sm); }
.hdata summary { cursor: pointer; color: var(--accent); font-weight: 500; width: fit-content; }
.hdata summary:hover { color: var(--accent-ink); }
.hdata table { max-width: 520px; margin-top: var(--s2); }
.hdata thead th { text-align: left; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.hdata thead th + th, .hdata td + td { text-align: right; }
.hdata td { padding: 5px 0; border-top: 1px solid var(--line); }
.history .h3 { font-size: var(--fs-lg); font-weight: 700; margin-top: var(--s6); }
.cond-lede { margin-top: var(--s2); color: var(--ink-2); max-width: 68ch; }
.condtable { margin-top: var(--s3); font-size: var(--fs-sm); }
.condtable thead th { text-align: right; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--ink); white-space: nowrap; }
.condtable thead th:first-child { text-align: left; padding-left: 0; }
.condtable tbody th, .condtable tfoot th { text-align: left; font-weight: 600; padding: 7px 0; border-bottom: 1px solid var(--line); }
.condtable td { text-align: right; padding: 7px 0 7px var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.condtable tfoot th, .condtable tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; }
.snap-pw { font-weight: 600; color: var(--ink-2); }
.cond-sub { display: none; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; }
.mkt-note { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 720px) {
  .hc-d { display: none; }
  .hc-m { display: block; }
  .hhead { align-items: flex-start; flex-direction: column; }
  .seg-range { width: 100%; }
  .seg-range label { flex: 1; justify-content: center; }
  .condtable .c-lo, .condtable .c-hi, .condtable .c-last { display: none; }
  .cond-sub { display: block; }
  .condtable tfoot td[colspan] { text-align: right; }
}

/* ---------- production additions: text pages, search, forms, sets overview ---------- */
.page { padding-top: var(--s6); padding-bottom: var(--s8); }
.page h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 24ch; }
.page .lede { margin-top: var(--s3); font-size: var(--fs-lg); color: var(--ink-2); max-width: 62ch; }
.prose { margin-top: var(--s6); max-width: 68ch; }
.prose h2 { margin-top: var(--s6); margin-bottom: var(--s2); }
.prose h3 { margin-top: var(--s5); margin-bottom: var(--s1); font-size: var(--fs-lg); font-weight: 700; }
.prose p, .prose ul, .prose ol { margin-top: var(--s3); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
.prose li + li { margin-top: var(--s1); }
.prose table { margin-top: var(--s4); font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 6px var(--s3) 6px 0; border-bottom: 1px solid var(--line); }
.byline { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-3); }
.guides a.guide-title { color: var(--ink); text-decoration: none; }
.guides a.guide-title:hover { color: var(--accent); text-decoration: underline; }
.empty-state { margin-top: var(--s5); padding: var(--s6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); max-width: 70ch; }
.empty-state p + p { margin-top: var(--s2); }
.serie { margin-top: var(--s7); }
.serie h2 { margin-bottom: var(--s4); }
.results-sets { margin-top: var(--s5); }
.results-cards { margin-top: var(--s6); }
.search-page .hero-search { margin-top: var(--s4); max-width: 720px; }
.form { margin-top: var(--s6); max-width: 560px; display: grid; gap: var(--s4); }
.form label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s1); }
.form input, .form select, .form textarea { width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); padding: 10px var(--s3); font: inherit; color: var(--ink); }
.form input, .form select { height: 44px; padding-block: 0; }
.form textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #9ca3af; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.form .hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.notice { margin-top: var(--s5); padding: var(--s3) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); max-width: 68ch; }
.foot-links a[hreflang] { font-weight: 600; }
.card-text { margin-top: var(--s5); max-width: 68ch; }
.card-text p + p { margin-top: var(--s2); }
.attacks { margin-top: var(--s2); }
.attacks li { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.attacks .atk-name { font-weight: 600; }
.attacks .atk-dmg { float: right; font-weight: 600; }
.attacks p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }
@media (max-width: 720px) {
  .page { padding-top: var(--s5); }
  .page h1 { font-size: 1.875rem; }
}

/* Printkeuze op een smal scherm: een fieldset krijgt standaard min-width: min-content,
   waardoor drie lange printnamen (Unlimited holo, Shadowless holo, 1st Edition Shadowless holo)
   de pagina op 375 px tot 613 px oprekten. Labels mogen nu breken en de rij mag doorlopen. */
.variants { min-width: 0; }
/* Onder de prijs: in een kolom moet de track kunnen krimpen (1fr is minmax(auto, 1fr) en rekte
   de kaartpagina op 375 px op tot de min-content van de breedste sectie). */
@media (max-width: 900px) {
  .below { grid-template-columns: minmax(0, 1fr); }
}
/* Kaartgegevens: de lijst met prints is lang ("Normal, Reverse holo, Reverse holo, Poké Ball
   pattern, ..."); met nowrap duwde die de tabel op elke moderne kaart buiten beeld. */
.kv-details td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .variants .seg { flex-wrap: wrap; }
  .variants .seg label { flex: 1 1 30%; white-space: normal; text-align: center; height: auto; min-height: 38px; padding: var(--s1) var(--s2); line-height: 1.25; }
}

/* Gefaseerde publicatie: een kaart zonder eigen pagina staat als tekst in de lijst */
.cardname { color: var(--ink); font-weight: 600; }

/* Auteurspagina */
.author-head { display: flex; gap: var(--s5); align-items: flex-start; margin-top: var(--s4); }
.author-head .avatar { flex: none; width: 72px; height: auto; }
.author-head h1 { max-width: none; }
.author-role { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--ink-3); }
.author-guides { margin-top: var(--s7); margin-bottom: var(--s4); font-size: var(--fs-xl, 1.25rem); font-weight: 700; }
.author-none { color: var(--ink-2); }