/* Layout: a reference ledger. Sticky masthead with tabs, filter rail over a grid of card slips, wiki-style detail pages. */
/* Design tokens: Don redesign (design book, Oct 2026). Light = Card Shop, dark = Night sea.
   Every colour has one job: jade = supply, gold = price, vermilion = rarity, indigo = verified. */
:root {
  --paper: #fafaf7; --surface: #ffffff; --sunk: #f0efea; --rule: #e0ddd5;
  --ink: #18181d; --ink-soft: #5a5961; --night: #14202b;
  --seal: #c42f1c; --seal-deep: #7e1f10; --seal-soft: #fde9e4;
  --supply: #137451; --supply-earlier: #0c4a33; --supply-fresh: #3fae7a; --supply-soft: #d6efe2;
  --price: #8a5f00; --price-fill: #d9a21b; --price-soft: #f7e8bf;
  --graded: #2c4f9a; --graded-soft: #e0e8f7;
  --caution: #7a4f00; --caution-soft: #f7ebcf;
  --band: #eceff8; --on-band: #18181d; --on-band-soft: #4f5260; --tone-dot: #c9cfe3;
  --conf-high: #2c4f9a; --conf-mid: #4d5d86; --conf-low: #5a5961;
  --conflict: #8f2a5d; --conflict-soft: #f8e3ee;
  --shadow-print: 3px 3px 0 #18181d;
  --shadow-pocket: inset 0 0 0 1px #e0ddd5;
  --shadow-sleeve: 0 1px 0 #e0ddd5, 0 8px 18px rgba(20, 20, 30, .08);
  --radius-0: 0px; --radius-cut: 3px; --radius-card: 9px; --radius-seal: 50%;
  /* Type (v3, information design): Dela Gothic One for titles only; IBM Plex Sans for everything read or compared,
     with Plex Sans JP for Japanese and Plex Mono for card numbers. Figures share the body face so numbers line up and compare. */
  --font-display: "Dela Gothic One", "IBM Plex Sans JP", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans JP", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
  --font-bounty: "IBM Plex Sans", "IBM Plex Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease-settle: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0e151c; --surface: #16212b; --sunk: #0a1016; --rule: #2b3a47;
  --ink: #f0e7d6; --ink-soft: #a99f8d; --night: #060a0e;
  --seal: #ff7b5e; --seal-deep: #ffa48c; --seal-soft: #3b1c15;
  --supply: #5ccc94; --supply-earlier: #2e8a5f; --supply-fresh: #8fe0b6; --supply-soft: #14301f;
  --price: #f0c25a; --price-fill: #d9a21b; --price-soft: #33280e;
  --graded: #93b2ea; --graded-soft: #18263b;
  --caution: #f0c063; --caution-soft: #352a12;
  --band: #142231; --on-band: #f0e7d6; --on-band-soft: #a99f8d; --tone-dot: #24384c;
  --conf-high: #93b2ea; --conf-mid: #a7b6d6; --conf-low: #a99f8d;
  --conflict: #f08cc0; --conflict-soft: #3a1729;
  --shadow-print: 3px 3px 0 #060a0e;
  --shadow-pocket: inset 0 0 0 1px #2b3a47;
  --shadow-sleeve: 0 1px 0 #2b3a47, 0 8px 18px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
/* Legacy names used across the views, mapped onto the book's tokens (see the book's Migration: token mapping). */
:root, :root[data-theme="dark"] {
  --bg: var(--paper); --line: var(--rule); --muted: var(--ink-soft);
  --accent: var(--ink); --accent-ink: var(--paper); --link: var(--ink);
  --gold: var(--price); --gold-soft: var(--price-soft);
  --ok: var(--supply); --ok-bg: var(--supply-soft); --warn: var(--caution); --warn-bg: var(--caution-soft);
  --sea: var(--ink); --sea-2: var(--ink-soft);
  --t2: var(--seal); --t2-bg: var(--seal-soft); --t8: var(--seal); --t8-bg: var(--seal-soft);
  --t16: var(--seal); --t16-bg: var(--surface); --t32: var(--ink-soft); --t32-bg: var(--surface);
  --t64: var(--ink-soft); --t64-bg: var(--sunk);
  --s-raw: var(--ink-soft); --s-psa: var(--price-fill);
  --radius: 0px;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* Masthead */
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.mast .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.cur { order: 3; }
.cur select { width: auto; padding: 5px 8px; font-size: 14px; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabs a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: var(--radius); }
.tabs a:hover { color: var(--ink); background: var(--sunk); }
.tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }

main { padding-block: 28px 64px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
.lede { color: var(--muted); max-width: 68ch; margin: 8px 0 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Summary strip */
.strip { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 24px; padding: 14px 0; border-block: 1px solid var(--line); }
.strip div { display: flex; flex-direction: column; }
.strip b { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.strip span { font-size: 13px; color: var(--muted); }

/* Filters */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.filters.has-lang { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
input[type="search"], select { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chips .count { margin-left: auto; font-size: 14px; color: var(--muted); }
.reset { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }

/* Card slips */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.slip { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px; transition: border-color .15s, transform .15s; }
.slip:hover { border-color: var(--accent); transform: translateY(-1px); }
.slip.serial { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.art { position: relative; aspect-ratio: 63 / 88; max-width: 100%; border-radius: 4.5% / 3.2%; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 16px -6px rgb(0 0 0 / 0.25); }
.art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.22) 45%, rgb(255 255 255 / 0.05) 55%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .7s ease; }
.art.ph::after { display: none; }
.slip:hover .art::after, .figure:hover .art::after { background-position: -20% 0; }
.art img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.art.ph { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 10%; text-align: center; background: var(--sunk); }
.slip .art.ph .ph-num, .slip .art.ph .ph-name { display: none; }
.art.ph .ph-num { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.art.ph .ph-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--muted); }
.art.ph .ph-note { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.slip .art { width: 100%; margin: 0; }
.slip .credit { text-align: center; }
.credit { font-size: 12px; color: var(--muted); margin-top: -4px; }
.credit a { color: var(--muted); }
.figure { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.figure .credit { margin-top: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.hero .facts { margin-bottom: 0; }
@media (max-width: 680px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero .art { width: min(260px, 100%); } }
.slip-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slip-num { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.slip h3 { font-size: 19px; line-height: 1.2; }
.slip-prog { font-size: 14px; color: var(--muted); margin-top: -6px; }
.slip-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: auto; }
.slip-foot div { display: flex; flex-direction: column; min-width: 0; }
.slip-foot span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.slip-foot b { font-size: 17px; font-variant-numeric: tabular-nums; }
.slip-foot b.pend { font-size: 14px; font-weight: 600; color: var(--muted); }
.empty { padding: 40px 0; color: var(--muted); }

/* Tier and status pills */
.tier { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--t64-bg); color: var(--t64); }
.tier.t2, .tier.t4 { background: var(--t2-bg); color: var(--t2); }
.tier.t8 { background: var(--t8-bg); color: var(--t8); }
.tier.t16 { background: var(--t16-bg); color: var(--t16); }
.tier.t32 { background: var(--t32-bg); color: var(--t32); }
.tier.serial { background: var(--gold-soft); color: var(--gold); }
.tier.promo { background: var(--ink); color: var(--bg); }
/* How to get it (promo cards): one card per way to get it */
.howget { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 12px; }
.howget article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; overflow-wrap: anywhere; }
.howget .hg-where { margin: 4px 0 0; font-weight: 600; }
.howget dl { margin: 10px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.howget dt { color: var(--muted); }
.howget dd { margin: 0; min-width: 0; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.pend { background: var(--sunk); color: var(--muted); }
.note { font-size: 14px; color: var(--muted); margin: 8px 0 0; max-width: 80ch; }

/* Detail page */
.crumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 1px; margin: 24px 0 8px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { flex: 1 1 170px; padding: 16px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fact .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fact .v.pend { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--muted); }
.fact .s { font-size: 13px; color: var(--muted); }
section.block { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.block > p { margin: 0; max-width: 72ch; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--sunk); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; font-size: 13px; color: var(--muted); }
.formula { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.notes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 80ch; }
.srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.srcs li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.srcs .sid { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.srcs .pub { font-size: 14px; color: var(--muted); }
.callout { background: var(--sunk); border-radius: var(--radius); padding: 14px 16px; font-size: 15px; max-width: 80ch; }
.callout b { display: block; margin-bottom: 2px; }
.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; }
.tchip .formula { color: var(--muted); font-size: 12px; }
.chase { margin: 24px 0; padding: 24px; border-radius: 12px; color: #fff4dc; background: radial-gradient(circle at 15% 0%, #5b3d0a 0%, transparent 55%), linear-gradient(135deg, #101a2b 0%, #1d2a45 55%, #3a2608 100%); box-shadow: 0 10px 30px rgba(10, 20, 40, .25); }
.chase .eyebrow { color: #e9c06a; }
.chase h2 { margin: 4px 0 4px; color: #fff; font-family: var(--font-display); }
.chase-head p { margin: 0 0 16px; color: #d6c9ad; font-size: 14px; }
.chase-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.chase-card { position: relative; display: flex; gap: 12px; text-decoration: none; color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 192, 106, .35); border-radius: 10px; padding: 12px; transition: transform .15s, border-color .15s; }
.chase-card:hover { transform: translateY(-2px); border-color: #e9c06a; }
.chase-card .art { width: 96px; flex: none; align-self: flex-start; }
.chase-rank { position: absolute; top: -10px; left: -10px; background: #e9c06a; color: #1b1405; font-weight: 800; font-family: var(--font-display); border-radius: 999px; padding: 2px 9px; font-size: 14px; z-index: 1; }
.chase-info { flex: 1; min-width: 0; }
.chase-info .tier { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.25; border-radius: 6px; }
.chase-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1b1405; background: #e9c06a; border-radius: 4px; padding: 1px 7px; }
.chase-line { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #e8dfcc; }
.chase-info h3 { margin: 6px 0 0; color: #fff; font-size: 17px; }
.chase-info .mono { color: #c9bfa8; font-size: 12px; }
.chase-info dl { margin: 8px 0 0; display: grid; gap: 2px; }
.chase-info dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.chase-info dt { color: #c9bfa8; } .chase-info dd { margin: 0; font-weight: 700; color: #ffe2a3; }
.char-fan { position: relative; width: 110px; height: 128px; flex: none; }
.char-fan .art { position: absolute; width: 72px; top: 8px; }
.char-fan .art:nth-child(1) { left: 19px; z-index: 3; }
.char-fan .art:nth-child(2) { left: 0; transform: rotate(-8deg); z-index: 2; }
.char-fan .art:nth-child(3) { left: 38px; transform: rotate(8deg); z-index: 1; }
.char-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.char-stats div { display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 192, 106, .35); border-radius: 10px; padding: 12px 14px; }
.char-stats span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e9c06a; }
.char-stats b { font-family: var(--font-display); font-size: 28px; color: #fff; line-height: 1.15; }
.char-stats i { font-style: normal; font-size: 12px; color: #c9bfa8; }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.prose { max-width: 72ch; display: flex; flex-direction: column; gap: 14px; }
.prose p, .prose ul { margin: 0; }
.prose li + li { margin-top: 6px; }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--sunk); padding: 1px 5px; border-radius: 4px; }
/* Charts */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 8px; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { font-size: 11px; fill: var(--muted); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--muted); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
:is(.legend, .cf) i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
:is(.legend, .cf) i.raw { background: var(--s-raw); border-radius: 50%; }
:is(.legend, .cf) i.psa { background: var(--s-psa); }
:is(.legend, .cf) i.wk { width: 3px; height: 12px; border-radius: 2px; background: var(--s-raw); opacity: .35; }
.wk-l { stroke: var(--s-raw); opacity: .35; }
:is(.legend, .cf) i.oth { background: var(--muted); border-radius: 50%; width: 7px; height: 7px; }
:is(.legend, .cf) i.priv { border: 2px solid var(--muted); border-radius: 50%; background: transparent; }
:is(.legend, .cf) i.tc { background: var(--s-raw); border-radius: 2px; }
:is(.legend, .cf) i.rg { background: var(--s-psa); border-radius: 2px; }
.f-raw { fill: var(--s-raw); } .f-psa { fill: var(--s-psa); } .f-oth { fill: var(--muted); }
.s-raw { stroke: var(--s-raw); } .s-psa { stroke: var(--s-psa); }
.mk { stroke: var(--surface); stroke-width: 2; }
.mk.priv { fill: var(--surface); stroke-width: 2; }
.mk.priv.f-raw { stroke: var(--s-raw); } .mk.priv.f-psa { stroke: var(--s-psa); }
[data-tip] { cursor: default; }
.hit { fill: transparent; }
.hit:hover + .bar, .bar:hover { opacity: .85; }
#tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.35; padding: 6px 9px; border-radius: 6px; max-width: 260px; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.stat-grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rank li { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.rank li:last-child { border-bottom: 0; }
.rank .n { color: var(--muted); font-size: 13px; width: 1.6em; font-variant-numeric: tabular-nums; }
.rank a { text-decoration: none; color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank a:hover { color: var(--accent); }
.rank .sub { color: var(--muted); font-size: 13px; }
.rank .v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel h3 { font-size: 16px; }
.panel .callout { margin: 0; }
/* Review */
.rv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv button { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.rv button:hover { color: var(--ink); border-color: var(--muted); }
.rv button[aria-pressed="true"].ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.rv button[aria-pressed="true"].bad { background: var(--t8-bg); color: var(--t8); border-color: var(--t8); }
.rv input { font: inherit; font-size: 14px; flex: 1 1 180px; min-width: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.rv .when { font-size: 12px; color: var(--muted); }
.rv-off { font-size: 13px; color: var(--muted); }
tr.rv-bad td { background: var(--t8-bg); }
.rv-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 16px 0; }
.foot { border-top: 1px solid var(--line); padding-block: 20px; color: var(--muted); font-size: 14px; }

/* Home */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-bottom: 8px; }
.home-hero h1 { font-size: clamp(30px, 4.6vw, 48px); margin-top: 8px; }
.home-search { display: flex; gap: 8px; margin-top: 18px; max-width: 540px; }
.btn { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--accent); padding: 5px 12px; font-size: 14px; }
.fan { position: relative; height: 320px; }
.fan a { position: absolute; top: 50%; left: 50%; width: min(44%, 188px); transition: transform .25s ease; }
.fan a:nth-child(1) { transform: translate(-112%, -48%) rotate(-9deg); }
.fan a:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.fan a:nth-child(3) { transform: translate(12%, -48%) rotate(9deg); }
.fan:hover a:nth-child(1) { transform: translate(-122%, -48%) rotate(-12deg); }
.fan:hover a:nth-child(3) { transform: translate(22%, -48%) rotate(12deg); }
.fan .art { width: 100%; }
.fan .art.ph > :is(.ph-num, .ph-name), .thumb .art.ph > :is(.ph-num, .ph-name) { display: none; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.sec-head > a { font-weight: 600; font-size: 15px; text-decoration: none; }
.fine { margin: 0; font-size: 13px; color: var(--muted); max-width: 80ch; }
.sub { color: var(--muted); font-size: 13px; }
.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.season { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.season.live { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.season-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.season-top h3 { font-size: 19px; margin-top: 2px; }
.season-meta { font-size: 14px; color: var(--muted); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.progress { height: 8px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sc-list { display: flex; flex-direction: column; }
.sc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 10px 0; border-top: 1px dashed var(--line); }
.sc-row:hover b { color: var(--accent); }
.sc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-name { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sc-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); }
.sc-nums b { color: var(--ink); }
.thumb { display: block; width: 52px; flex: none; }
.thumb .art { width: 100%; box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.meter, .meter-key i.m-left { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, var(--line) 4px 6px); }
.meter { position: relative; display: flex; height: 10px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.m-prev { background: var(--muted); }
.m-now { background: var(--accent); }
.m-pop { background: var(--gold); }
.meter .m-pop { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; }
.meter-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.meter-key i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line); }
.meter-key i.m-pop { width: 4px; }
.next-up { background: var(--sunk); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.lb li { align-items: center; }
.lb .thumb, .tg .thumb { width: 30px; }
.who { display: flex; flex-direction: column; min-width: 0; }
.who > a, .who > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .who a { font-weight: 600; }
.when-d { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 7.5em; }
.trend { font-weight: 600; font-variant-numeric: tabular-nums; }
.trend.up { color: var(--ok); } .trend.down { color: var(--t8); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 12px; border: 0; background: var(--surface); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ffacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.ffact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ffact .ff-top { display: flex; gap: 12px; align-items: center; }
.ffact h3 { font-size: 20px; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.ffact p { margin: 0; font-size: 15px; }
.ffact .basis { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); }
.ffact .basis a { color: var(--muted); }
.thumbs { display: flex; gap: 4px; flex: none; }
.ffact .thumb { width: 40px; }
.tag-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tg { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tg:hover { border-color: var(--accent); }
.tg p { margin: 0; font-size: 14px; color: var(--muted); }
.tg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); white-space: nowrap; }
.tag.info { background: var(--t16-bg); color: var(--t16); }
.tag.caveat { background: var(--warn-bg); color: var(--warn); }
.tag-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 80ch; }
.tag-why li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.checks { margin: 0; padding: 14px 16px 14px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.slip .tagrow { margin-top: -4px; }
@media (max-width: 820px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fan { height: 210px; max-width: 360px; width: 100%; margin: 0 auto; }
  .fan a { width: 34%; }
}
@media (max-width: 480px) { .home-search { flex-direction: column; } .when-d { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } .fan a { transition: none; } }

@media (max-width: 820px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filters.has-lang { grid-template-columns: 1fr 1fr; }
  .filters .field:has(#f-q) { grid-column: 1 / -1; }
  .tabs { margin-left: 0; order: 4; width: 100%; }
  .cur { order: 2; margin-left: auto; }
  .mast { position: static; }
}
@media (prefers-reduced-motion: reduce) { .art::after { transition: none; } .slip { transition: none; } .slip:hover { transform: none; } }

/* Grouped versions */
.slip.group .stack { position: relative; display: block; margin: 0 8px 8px 0; }
.slip.group .stack::before, .slip.group .stack::after { content: ""; position: absolute; inset: 0; border-radius: 4.5% / 3.2%; background: var(--sunk); border: 1px solid var(--line); }
.slip.group .stack::before { transform: translate(8px, 8px) rotate(2deg); }
.slip.group .stack::after { transform: translate(4px, 4px) rotate(1deg); }
.slip.group .stack .art { z-index: 1; }
.stack-n { position: absolute; z-index: 3; top: 8px; right: 8px; font-size: 12px; font-weight: 700; color: #fff; background: #0f3b5f; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 0 0 / .35); padding: 2px 9px; border-radius: 999px; }
.slip.group h3 a { color: inherit; text-decoration: none; }
.slip.group h3 a:hover { color: var(--accent); }
.slip.group:hover { transform: none; }
.vers { display: flex; flex-wrap: wrap; gap: 6px; }
.ver { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--t16); background: var(--t16-bg); border-radius: 999px; padding: 3px 10px; }
.ver:hover { background: var(--accent); color: #fff; }
.slip { position: relative; overflow: hidden; }
.slip .fig-link { display: block; }
.slip-foot span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vtag { font-style: normal; font-size: 10px; letter-spacing: .02em; text-transform: none; color: var(--t2); background: var(--t2-bg); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.slip-more { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 4px 4px 10px; border: 0; border-radius: 999px; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.slip-foot[data-n="1"] .slip-more { grid-column: auto; align-self: center; }
.slip-more:hover, .slip-more:focus-visible { background: var(--sunk); }
.slip-more svg { transition: transform .2s ease; }
.slip-more:hover svg { transform: translateX(2px); }
.slip-panel { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-left: 3px solid var(--accent); transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.slip.open .slip-panel { transform: none; opacity: 1; visibility: visible; transition: transform .25s ease, opacity .25s ease; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sp-head b { font-size: 16px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.slip-close { flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.slip-close:hover, .slip-close:focus-visible { border-color: var(--accent); color: var(--accent); }
.sp-figs { display: grid; gap: 8px; margin: 0; }
.sp-figs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.sp-figs dt, .sp-vers dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-figs dd { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.sp-figs dd b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sp-vers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-vers li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.sp-vers dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px 10px; margin: 0; width: 100%; }
.sp-vers dl div { min-width: 0; }
.sp-vers dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-link { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--accent); }
@keyframes sp-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .slip-panel, .slip.open .slip-panel, .slip-more svg { transition: none; animation: none !important; } .slip-more:hover svg { transform: none; } }
.sc-more { display: block; padding: 10px 0 2px; font-weight: 600; text-decoration: none; border-top: 1px dashed var(--line); }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.mast .wrap { gap: 12px 18px; }
.tabs { gap: 2px; }
.tabs a { padding: 6px 10px; }
@media (min-width: 1100px) { .mast .wrap { flex-wrap: nowrap; } .tabs { flex-wrap: nowrap; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .fan a:nth-child(2) .art { animation: none; } }

/* Text stays inside its container: long tier names and labels wrap instead of spilling out. */
h1, h2, h3, p, li, td, dd, .slip-prog, .meta, .fact .s, .chase-line, .credit { overflow-wrap: anywhere; }
.tier, .pill, .tag, .chase-label { white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.3; border-radius: 10px; }
.slip-top { flex-wrap: wrap; align-items: flex-start; }
.slip-top > * { min-width: 0; }
.slip-top .tier { text-align: right; margin-left: auto; }
.tchip { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.slip, .chase-card, .chase-info, .fact, .tchip, .season, .ffact, .tg, .sc-body, .who, .char-stats div { min-width: 0; }
.head, .meta { min-width: 0; }
@media (max-width: 480px) { .chase { padding: 18px 14px; } .chase-card .art { width: 80px; } }

/* Other prizes */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mp { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.mp-art { background: var(--sunk); display: flex; align-items: center; justify-content: center; height: 230px; padding: 10px; }
.mp-art img { max-width: 100%; max-height: 210px; object-fit: contain; display: block; border-radius: 4px; }
.mp-art.wide { padding: 6px; }
.mp-art.ph { flex-direction: column; gap: 4px; color: var(--muted); font-family: var(--font-display); font-size: 18px; text-align: center; }
.mp-art.ph small { font-family: var(--font-body); font-size: 13px; }
.mp-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-body h3 { font-size: 18px; line-height: 1.25; }
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; min-width: 0; }
.mp-place { font-weight: 600; background: var(--gold-soft); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-size: 13px; }
.mp-place.wall { background: var(--sunk); }
.mp-ev { min-width: 0; overflow-wrap: anywhere; }

/* Tournament seasons: search, kind chips, timeline, ladder, tiles */
.k-reg { --k: var(--t16); } .k-tc { --k: var(--gold); } .k-fin { --k: var(--t8); } .k-fb { --k: var(--t32); }
.k-store { --k: var(--t64); } .k-spec { --k: var(--sea-2, #1b6a8f); } .k-camp { --k: #b8467f; }
.sbar { margin: 18px 0 14px; }
.sbar input { width: 100%; font: inherit; font-size: 17px; padding: 12px 16px 12px 44px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface) no-repeat 16px 50% / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23888' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23888' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); color: var(--ink); }
.sbar input:focus { outline: none; border-color: var(--accent); }
.kchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-bottom: 12px; }
.kchip { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-left: 5px solid var(--k, var(--muted)); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.kchip b { font-size: 14px; } .kchip span { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.kchip[aria-pressed="true"] { background: var(--k, var(--sea)); border-color: var(--k, var(--sea)); color: #fff; }
.kchip[aria-pressed="true"] span { color: rgb(255 255 255 / .85); }
.kdot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--k); margin-right: 8px; vertical-align: 1px; }
.sgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sgroup-head p { margin: 0; }
.sgroup .btn.ghost { align-self: flex-start; }
.stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.stile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--k); border-radius: var(--radius); padding: 14px; min-width: 0; transition: transform .15s, box-shadow .15s; }
.stile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(10 20 40 / .12); }
.stile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stile h3 { font-size: 18px; line-height: 1.25; }
.stile-when { font-size: 14px; color: var(--muted); }
.stile-fan { display: flex; align-items: flex-end; min-height: 74px; padding: 4px 4px 0; }
.stile-fan .thumb { width: 52px; transform: rotate(-4deg); box-shadow: 0 3px 8px rgb(0 0 0 / .18); border-radius: 4px; }
.stile-fan .thumb + .thumb { margin-left: -10px; }
.stile-fan .thumb:nth-child(even) { transform: rotate(4deg) translateY(-4px); }
.stile-more { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.stile-empty { min-height: 74px; display: flex; align-items: center; font-size: 14px; color: var(--muted); background: var(--sunk); border-radius: var(--radius); padding: 0 12px; }
.stile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.stile-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stile-stats dd { margin: 0; font-weight: 700; font-size: 15px; }
.stile-top-prize, .stile-hit { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.stile-hit { color: var(--muted); }
.howto { list-style: none; counter-reset: h; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.howto li { counter-increment: h; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px 52px; position: relative; display: flex; flex-direction: column; gap: 4px; }
.howto li::before { content: counter(h); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; display: grid; place-items: center; }
.howto span { font-size: 14px; color: var(--muted); }
.explain-ex { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ladder { margin: 0; }
.ladder svg { width: 100%; max-width: 760px; height: auto; display: block; }
.ladder figcaption, .timeline figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.lad-bar { fill: var(--t64-bg); stroke: var(--t64); stroke-width: 1.5; }
.lad-bar.t2, .lad-bar.t1 { fill: var(--t2-bg); stroke: var(--t2); } .lad-bar.t4, .lad-bar.t8 { fill: var(--t8-bg); stroke: var(--t8); }
.lad-bar.t16 { fill: var(--t16-bg); stroke: var(--t16); } .lad-bar.t32 { fill: var(--t32-bg); stroke: var(--t32); }
.ladder a:hover .lad-bar { stroke-width: 3; }
.lad-t { font: 700 15px var(--font-body); fill: var(--ink); }
.lad-c { font: 600 15px var(--font-body); fill: var(--ink); }
.lad-n { font: 13px var(--font-body); fill: var(--muted); }
.ladder svg.narrow .lad-t { font-size: 12px; } .ladder svg.narrow .lad-c { font-size: 13px; } .ladder svg.narrow .lad-n { font-size: 12px; }
.tl-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.tl-scroll svg { min-width: 720px; width: 100%; height: auto; display: block; }
.tl-grid { stroke: var(--line); } .tl-yr, .tl-lane, .tl-nowt { font: 12px var(--font-body); fill: var(--muted); }
.tl-lane { font-weight: 600; fill: var(--ink); }
.tl-bar { fill: var(--k); opacity: .85; } .tl-bar.live { stroke: var(--ink); stroke-dasharray: 3 2; stroke-width: 1.2; }
.timeline a:hover .tl-bar { opacity: 1; stroke: var(--ink); stroke-width: 2; }
.tl-now { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; } .tl-nowt { fill: var(--accent); font-weight: 700; }
.sres { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 14px; }
.sres-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sres-row { display: flex; flex-direction: column; gap: 8px; }
.sres-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sres-chips .chip { text-decoration: none; }
.sres-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.sres-card { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); padding: 6px; border-radius: var(--radius); border: 1px solid transparent; min-width: 0; }
.sres-card:hover { border-color: var(--line); background: var(--sunk); }
.sres-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sres-card .thumb { width: 44px; }
.tab-search { display: inline-flex; align-items: center; }

/* Header: brand, nav and currency on one row; site-wide search on its own row. */
.mast .wrap.mast-row { display: flex; align-items: center; gap: 8px 20px; flex-wrap: nowrap; padding-block: 10px 6px; }
.brand { flex: none; }
.tabs { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
.tabs-main { display: flex; gap: 2px; min-width: 0; }
.tabs a, .more-btn { font-size: 15px; font-weight: 600; padding: 7px 12px; border-radius: 999px; line-height: 1.2; }
.cur { order: 0; flex: none; }
.more { position: relative; flex: none; }
.more-btn { font-family: inherit; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: #cfdbe7; }
.more-btn:hover, .more-btn[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / .12); }
.more-btn.is-current { color: #fff; background: #c8102e; box-shadow: 0 2px 0 #8d0b20; }
.more-btn svg { transition: transform .15s; }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 190px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(10 20 40 / .18); }
.more-menu[hidden] { display: none; }
.tabs .more-menu a { color: var(--ink); background: none; box-shadow: none; border-radius: 8px; padding: 9px 12px; }
.tabs .more-menu a:hover, .tabs .more-menu a:focus-visible { background: var(--sunk); color: var(--ink); }
.tabs .more-menu a[aria-current="page"] { color: var(--accent); background: var(--sunk); box-shadow: none; }
.mast .wrap.mast-search { display: block; padding-block: 4px 12px; }
.gsearch { margin: 0; width: 100%; }
.gsearch input[type="search"] { width: 100%; font-size: 16px; padding: 10px 16px 10px 42px; border-radius: 999px; border: 1px solid transparent; color: #13202b; background: #ffffff no-repeat 15px 50% / 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%235f5866' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%235f5866' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gsearch input[type="search"]::placeholder { color: #6b6474; }
.gsearch input[type="search"]:focus-visible { outline: 3px solid #e2b13c; outline-offset: 1px; }
@media (max-width: 960px) {
  .mast .wrap.mast-row { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
  .cur { margin-left: auto; }
  .tabs-main { flex: 1; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .tabs-main::-webkit-scrollbar { display: none; }
}
@media (max-width: 820px) {
  .tabs a, .more-btn { font-size: 14px; padding: 7px 10px; }
  .gsearch input[type="search"]::placeholder { font-size: 14px; }
}
.pfilters { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; }
.pfilters > * { margin: 0; }
.s-seasons-h { margin-top: 28px; }
.fam-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--link); background: var(--t16-bg); padding: 6px 14px; border-radius: 999px; }
.fam-link:hover { background: var(--link); color: #fff; }
.h1-num { font-size: .55em; color: var(--muted); font-weight: 600; margin-left: 6px; vertical-align: middle; }
.vtable td { vertical-align: middle; }
.vrow { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); min-width: 220px; }
.vrow > span:last-child { display: flex; flex-direction: column; }
.vrow .thumb { width: 40px; flex: none; }
.vrow:hover b { color: var(--accent); }
.vtable .sub { display: block; margin-top: 2px; }

/* ---------- Wiki layout for card pages: article on the left, infobox on the right (first on phones) ---------- */
.wiki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 28px; align-items: start; margin-top: 20px; }
.wiki > .ibox { grid-column: 2; grid-row: 1; }
.wiki > .wiki-main { grid-column: 1; grid-row: 1; min-width: 0; }
.wiki-main > section.block:first-child { margin-top: 0; }
.ibox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; box-shadow: 0 8px 22px -16px rgb(5 20 35 / .45); font-size: 14px; }
.ibox-title { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; text-align: center; background: #0f3b5f; color: #fff; }
.ibox-title b { font-family: var(--font-display); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.ibox-title .mono { font-size: 12px; color: #d6e3ee; }
.ibox-fig { padding: 14px 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ibox-fig .art { width: min(240px, 100%); }
.ibox-cap { margin: 6px 14px 10px; text-align: center; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ibox-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ibox-t th, .ibox-t td { padding: 7px 12px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.ibox-t th[scope="row"] { width: 40%; font-weight: 600; color: var(--ink); background: var(--sunk); }
.ibox-t td .sub { display: block; font-size: 12px; color: var(--muted); }
.ibox-t td .pend { font-weight: 600; color: var(--muted); }
.ibox-t td b { font-variant-numeric: tabular-nums; }
.ibox-sec th { text-align: center !important; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #134d70; }
.ibox-chips, .ibox-t .tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.ibox-foot { padding: 10px 12px 12px; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 900px) {
  .wiki { grid-template-columns: minmax(0, 1fr); }
  .wiki > .ibox, .wiki > .wiki-main { grid-column: 1; grid-row: auto; }
  .ibox { max-width: 460px; width: 100%; justify-self: center; }
}

/* ---------- Card history: stat banner, dated timeline, unknowns, per-program event lists ---------- */
.hx-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #0b2740 0%, #12507a 70%, #1d6f97 100%); box-shadow: 0 10px 28px -16px rgb(5 20 35 / .6); }
.hx-strip > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; background: rgb(255 255 255 / .03); }
.hx-strip > div + div { box-shadow: inset 1px 0 0 rgb(255 255 255 / .14); }
.hx-strip b { font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: #f3c969; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hx-strip span { color: #f4f8fb; font-weight: 600; overflow-wrap: anywhere; }
.hx-strip .sub { color: #c9d9e6; font-weight: 400; font-size: 13px; }
.hx-tl { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.hx-tl::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold), var(--line)); }
.hx-tl > li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 0 0 18px; }
.hx-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--line), 0 0 0 5px var(--bg); }
.hx-first .hx-dot { background: #e2b13c; color: #2b1d00; box-shadow: 0 0 0 2px #9a6a08, 0 0 0 5px var(--bg); }
.hx-live .hx-dot { background: #c8102e; color: #fff; box-shadow: 0 0 0 2px #8d0b20, 0 0 0 5px var(--bg); }
.hx-last .hx-dot { background: #0f3b5f; color: #fff; box-shadow: 0 0 0 2px #0b2740, 0 0 0 5px var(--bg); }
.hx-sale .hx-dot { background: var(--ok-bg); color: var(--ok); }
.hx-grade .hx-dot, .hx-peak .hx-dot { background: var(--gold-soft); color: var(--gold); }
.hx-body { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.hx-first .hx-body { border-color: #e2b13c; box-shadow: inset 4px 0 0 #e2b13c; }
.hx-live .hx-body { border-color: #c8102e; box-shadow: inset 4px 0 0 #c8102e; }
.hx-body h3 { margin: 2px 0 2px; font-family: var(--font-display); font-size: 18px; }
.hx-body p { margin: 0; overflow-wrap: anywhere; }
.hx-date { font-size: 13px; color: var(--muted); }
.hx-venue { display: block; font-size: 13px; color: var(--muted); }
.hx-src { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.hx-unk { color: var(--muted); font-weight: 600; }
.hx-unknowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.hx-unknowns > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; min-width: 0; }
.hx-unknowns .v { font-weight: 600; color: var(--muted); }
.hx-h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: 18px; }
.hx-prog, .hx-calc { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.hx-prog > summary, .hx-calc > summary { cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: center; list-style: none; }
.hx-prog > summary::-webkit-details-marker, .hx-calc > summary::-webkit-details-marker { display: none; }
.hx-prog > summary::before, .hx-calc > summary::before { content: "▸"; flex: none; color: var(--accent); transition: transform .15s; }
.hx-prog[open] > summary::before, .hx-calc[open] > summary::before { transform: rotate(90deg); }
.hx-prog > summary > span, .hx-calc > summary > span { display: flex; flex-direction: column; min-width: 0; }
.hx-prog > summary:focus-visible, .hx-calc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.hx-calc > :not(summary) { margin: 0 14px 14px; }
.hx-stops { list-style: none; margin: 0; padding: 0 14px 4px; }
.hx-stops li { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.hx-stops li .mono { font-size: 13px; color: var(--muted); padding-top: 2px; }
.hx-stops li .sub { display: block; }
.hx-stops li.ahead { opacity: .8; }
.hx-stops li.ahead .mono::after { content: " · upcoming"; color: var(--accent); font-weight: 600; }
.hx-prog > p { margin: 0; padding: 4px 14px 12px; }
@media (max-width: 640px) {
  .hx-strip b { font-size: 24px; }
  .hx-strip > div + div { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
  .hx-stops li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hx-tl::before { left: 15px; }
  .hx-tl > li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .hx-dot { width: 32px; height: 32px; }
}

/* ---------- Phone and touch: readable text, compact slips, tables as stacked cards ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.slip-fig, .slip-body { display: contents; }
.lg-only { display: inline; }
.cl-more { display: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--link); background: none; border: 0; padding: 6px 0 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ftoggle { display: none; }
.totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sea); color: #fff; box-shadow: 0 6px 18px rgb(10 20 40 / .3); cursor: pointer; display: grid; place-items: center; transition: opacity .2s, transform .2s; }
.totop[hidden] { display: none; }
.totop:focus-visible { outline: 3px solid #e2b13c; outline-offset: 2px; }
@media (hover: none) {
  .slip:hover, .stile:hover, .chase-card:hover { transform: none; }
}
@media (pointer: coarse) {
  .chip, .seg button, .rv button, .kchip { min-height: 40px; }
  .ver { padding: 7px 12px; font-size: 13px; }
  .tabs a, .more-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .reset { padding: 8px 0; }
}
@media (max-width: 820px) {
  input, select, textarea, .rv input, .cur select { font-size: 16px; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  main { padding-block: 20px 72px; }
  .sub, .fine, .note, .rank .sub, .sc-nums, .meter-key, .legend, .season-meta, .tg p, .stile-when { font-size: 14px; }
  .chase-line, .chase-head p, .chase-info dl div { font-size: 14px; }
  .chase-info .mono { font-size: 13px; }
  .slip-foot span, .stile-stats dt { font-size: 12px; }
  .lg-only { display: none; }
  .strip { gap: 10px 22px; padding: 12px 14px; }
  .strip b { font-size: 21px; }
  .fact { flex-basis: 140px; padding: 14px; }
  .fact .v { font-size: 26px; }
  .gsearch input[type="search"] { padding-block: 9px; }

  /* Card slips become list rows: picture on the left, details on the right. */
  .grid, .related { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .slip { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px; }
  .slip-fig { display: flex; flex-direction: column; gap: 6px; width: 104px; flex: none; }
  .slip-fig .credit { margin: 0; font-size: 11px; line-height: 1.3; }
  .slip.group .slip-fig { width: 112px; }
  .slip.group .stack { margin: 0 8px 8px 0; }
  .stack-n { top: auto; bottom: 6px; right: 6px; font-size: 11px; padding: 1px 7px; }
  .slip-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
  /* On phones the More data panel opens in place under the row instead of sliding over it. */
  .slip { flex-wrap: wrap; }
  .slip-panel, .slip.open .slip-panel { position: static; flex: 1 1 100%; transform: none; opacity: 1; visibility: visible; border-left: 0; border-top: 1px dashed var(--line); padding: 10px 0 0; overflow: visible; transition: none; }
  .slip-panel { display: none; }
  .slip.open .slip-panel { display: flex; animation: sp-in .2s ease; }
  .sp-head, .sp-head .slip-close { display: none; }
  .slip.open .slip-more svg { transform: rotate(90deg); }
  .slip h3 { font-size: 17px; }
  .slip-prog { margin-top: 0; font-size: 14px; }
  .slip .tagrow { margin-top: 0; }
  .slip-foot { gap: 6px 10px; padding-top: 8px; }
  .slip-foot b { font-size: 15px; }
  .slip-foot b.pend { font-size: 14px; }

  /* Tables: each row becomes a card with labelled fields. Short values pair up two per line. */
  .tablewrap.stack { overflow: visible; background: none; border: 0; border-radius: 0; }
  .stack table, .stack tbody { display: block; width: 100%; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr)); gap: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
  .stack tr.rv-bad { background: var(--t8-bg); }
  .stack td { display: block; padding: 0; border: 0; min-width: 0 !important; text-align: left; overflow-wrap: break-word; }
  .stack tr.rv-bad td { background: none; }
  .stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  .stack td[data-label=""]::before { content: none; }
  .stack td.wide, .stack td.full, .stack td:first-child { grid-column: 1 / -1; }
  .stack td:first-child { font-size: 16px; font-weight: 600; }
  .stack td:first-child .sub { font-weight: 400; }
  .stack td.full::before { content: none; }
  .stack .formula { white-space: normal; }
  .stack .vrow { min-width: 0; }
  /* Long text is clamped to three lines with a "Show more" toggle. */
  .cl { max-height: 4.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  td.is-clamped .cl-more { display: inline-block; }
  td.open .cl { max-height: none; -webkit-mask-image: none; mask-image: none; }
  td.open .cl-more { display: inline-block; }

  /* Cards page: search stays visible, the other filters fold behind one button. */
  .filters.has-lang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftoggle { display: inline-flex; align-items: center; gap: 8px; grid-column: 1 / -1; justify-self: start; font: inherit; font-size: 15px; font-weight: 600; color: var(--sea); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 42px; cursor: pointer; }
  .ftoggle b { background: var(--sea); color: #fff; font-size: 12px; border-radius: 999px; padding: 1px 8px; }
  .ftoggle svg { transition: transform .15s; }
  .ftoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .filters.folded .field:not(.f-search) { display: none; }
  .chips .count { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
  /* Fit every section in one row: the brand already links home, so the Home tab steps aside. */
  .tabs-main a[data-tab="home"] { display: none; }
  .tabs a, .more-btn { padding-inline: 8px; }
}
@media (min-width: 641px) { .filters .f-lang { order: -1; } }
@media (prefers-reduced-motion: reduce) { .totop, .ftoggle svg { transition: none; } }

/* Table cells wrap between words. "anywhere" let auto-sized columns shrink until names like PriceCharting broke mid-word. */
td { overflow-wrap: break-word; }
td a { overflow-wrap: break-word; }
td .sub { overflow-wrap: break-word; }
.formula { white-space: nowrap; }
td.nw { white-space: nowrap; }

/* Citations: one source shows as a link; several fold into a dropdown that lists each with its type, best first. */
.cites { display: inline-block; max-width: 100%; font-size: 15px; }
.cites summary { list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; cursor: pointer; color: var(--link); font-weight: 600; border-radius: 6px; padding: 1px 0; }
.cites summary::-webkit-details-marker { display: none; }
.cites summary::after { content: "▾"; font-size: 14px; line-height: 1; transition: transform .15s; }
.cites[open] summary::after { transform: rotate(180deg); }
.cites-n { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--sunk); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.cites ul { list-style: none; margin: 6px 0 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgb(10 20 40 / .08); min-width: 0; }
.cites li { display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.cites li .sub { font-size: 12px; }
.mp-src .cites { font-size: 13px; vertical-align: top; }
@media (pointer: coarse) { .cites summary { min-height: 36px; } }
@media (prefers-reduced-motion: reduce) { .cites summary::after { transition: none; } }

/* Tooltips: hover on desktop, tap on phones, focus from the keyboard. */
#tip { max-width: min(300px, calc(100vw - 16px)); overflow-wrap: break-word; }
#tip.pinned { pointer-events: none; }
[data-tip].tag, [data-tip].pill, [data-tip].tier, [data-tip].formula, .tipped { cursor: help; }
.tipped { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.info-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); color: var(--muted); font: italic 700 12px/1 Georgia, serif; cursor: help; vertical-align: 1px; flex: none; position: relative; }
.info-btn::before { content: ""; position: absolute; inset: -12px; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent-ink); background: var(--sea); border-color: var(--sea); }
th .info-btn { width: 16px; height: 16px; font-size: 11px; margin-left: 4px; }
/* "?" opens the longer explanation behind a one-line section intro. */
.info-btn.help { font: 700 12px/1 var(--font-body); }
#tip.wide { max-width: min(360px, calc(100vw - 16px)); }
.home-hero .info-btn { background: transparent; color: #e6eef5; border-color: rgb(255 255 255 / .6); }
/* Chart filters: chips above a chart that toggle what it shows. Series chips double as the legend. */
.cf-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.chips.cf { margin: 0; gap: 6px; }
.chips.cf .chip { font-size: 13px; padding: 3px 10px; display: inline-flex; align-items: center; max-width: 100%; }
.chips.cf .chip[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
.chips.cf .chip[aria-pressed="false"] i { opacity: .45; }
.cf-empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 14px; }
@media (pointer: coarse) { .chips.cf .chip { min-height: 36px; } }

/* Small search results: categories sit side by side instead of each taking a full row. */
.sres.compact { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px 28px; }
.sres.compact > * { flex: 1 1 200px; min-width: 0; }
.sres.compact > .sres-head, .sres.compact > p { flex-basis: 100%; }
.sres.compact > .sres-cardrow { flex: 2 1 300px; }
.stile-mixed .stile-top .eyebrow::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--k); margin-right: 6px; vertical-align: 0; }
/* ---------- Leaderboards: distinct header caps and gold / silver / bronze for the top 3 ---------- */
.stat-grid > .panel > h3, .panel > .sec-head.cap { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; color: #ffffff; background: linear-gradient(120deg, #0f3b5f 0%, #17507a 100%); border-radius: var(--radius) var(--radius) 0 0; padding: 10px 14px; margin-bottom: -10px; box-shadow: inset 0 -3px 0 #e2b13c; }
.panel > .sec-head.cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.panel > .sec-head.cap h3 { color: #ffffff; font-size: 17px; }
.stat-grid > .panel > h3 + *, .panel > .sec-head.cap + * > .rank, .panel > .sec-head.cap + * > .callout { border-top-left-radius: 0; border-top-right-radius: 0; }
.stat-grid > .panel > h3 + .chart { border: 1px solid var(--line); border-top: 0; padding: 10px; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.rank li > .n { flex: none; }
.rank li:nth-child(-n+3) > .n { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--font-display); font-size: 13px; font-weight: 700; align-self: center; box-shadow: 0 1px 3px rgb(0 0 0 / .25); animation: medal-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.rank li:nth-child(1) > .n { background: linear-gradient(145deg, #fbe29a, #d9a520 60%, #b8860b); color: #1b1405; }
.rank li:nth-child(2) > .n { background: linear-gradient(145deg, #f4f6f8, #b9c1ca 60%, #98a2ad); color: #1f2933; animation-delay: .06s; }
.rank li:nth-child(3) > .n { background: linear-gradient(145deg, #f6c9a2, #c27d45 60%, #9c5f2e); color: #22110a; animation-delay: .12s; }
.rank li:nth-child(1) > .n::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .75) 50%, transparent 70%); transform: translateX(-120%); animation: shine 1.2s .6s ease-out 2; }
.rank li:nth-child(1):has(> .n) { background: linear-gradient(90deg, rgb(217 165 32 / .16), transparent 70%); }
.rank li:nth-child(2):has(> .n) { background: linear-gradient(90deg, rgb(152 162 173 / .16), transparent 70%); }
.rank li:nth-child(3):has(> .n) { background: linear-gradient(90deg, rgb(194 125 69 / .16), transparent 70%); }
.rank li:nth-child(-n+3):has(> .n) .v { font-weight: 700; }
.rank li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.stat-grid > .panel > h3 + .rank li:first-child, .sec-head.cap + * .rank li:first-child { border-radius: 0; }
.rank li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
@keyframes medal-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shine { to { transform: translateX(120%); } }

/* ---------- Tags as links to their own page ---------- */
a.tag, .tag[data-href] { text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a.tag:hover, .tag[data-href]:hover, a.tag:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px currentColor; }
a.tag:focus-visible { outline: 3px solid #e2b13c; outline-offset: 1px; }
.tag-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 4px; }
.tag-hero .tag { font-size: 15px; padding: 5px 14px; position: relative; overflow: hidden; }
.tag-hero .tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%); transform: translateX(-120%); animation: shine 1.4s .3s ease-out 1; }
.tag-others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.grid-more { display: flex; justify-content: center; padding: 18px 0 4px; grid-column: 1 / -1; }

/* ---------- Spotlight: a tier shared by several cards ---------- */
.chase-card.multi { flex-direction: column; }
.chase-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.chase-thumbs a { display: block; width: 58px; transition: transform .15s ease; }
.chase-thumbs a:hover, .chase-thumbs a:focus-visible { transform: translateY(-3px) rotate(-2deg); }
.chase-thumbs .art.ph > :is(.ph-num, .ph-name) { display: none; }
.chase-names { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.chase-names a { color: #ffe2a3; }

/* ---------- Light motion: transforms and opacity only, off for reduced motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rank li, .slip, .tg, .ffact, .chase-card, .stile, .sres-card, .fact { animation: rise .35s ease-out both; }
.rank li:nth-child(2), .grid > :nth-child(2), .tag-gallery > :nth-child(2), .ffacts > :nth-child(2), .chase-row > :nth-child(2) { animation-delay: .04s; }
.rank li:nth-child(3), .grid > :nth-child(3), .tag-gallery > :nth-child(3), .ffacts > :nth-child(3), .chase-row > :nth-child(3) { animation-delay: .08s; }
.rank li:nth-child(4), .grid > :nth-child(4), .tag-gallery > :nth-child(4), .ffacts > :nth-child(4) { animation-delay: .12s; }
.rank li:nth-child(5), .grid > :nth-child(5), .tag-gallery > :nth-child(5) { animation-delay: .16s; }
.rank li:nth-child(6), .grid > :nth-child(6), .tag-gallery > :nth-child(6) { animation-delay: .2s; }
.rank li:nth-child(n+7), .grid > :nth-child(n+7), .tag-gallery > :nth-child(n+7) { animation-delay: .24s; }
.tg { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tg:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(10 20 40 / .12); }
.tg .thumbs .thumb { transition: transform .2s ease; }
.tg:hover .thumbs .thumb:nth-child(odd) { transform: rotate(-4deg) translateY(-2px); }
.tg:hover .thumbs .thumb:nth-child(even) { transform: rotate(4deg) translateY(-2px); }
.ffact { transition: transform .18s ease; }
.ffact:hover { transform: translateY(-2px); }
.slip.serial .art { position: relative; overflow: hidden; }
@media (hover: none) { .tg:hover, .ffact:hover { transform: none; box-shadow: none; } .tg:hover .thumbs .thumb { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rank li, .rank li > .n, .rank li > .n::after, .slip, .tg, .ffact, .chase-card, .stile, .sres-card, .fact, .tag-hero .tag::after { animation: none !important; }
  .tg, .ffact, a.tag, .tag[data-href], .chase-thumbs a, .tg .thumbs .thumb { transition: none !important; }
  .tg:hover, .ffact:hover, a.tag:hover, .tag[data-href]:hover, .chase-thumbs a:hover, .tg:hover .thumbs .thumb { transform: none !important; }
}

/* Tournament events: season list rows, event page key-value list and prev/next nav */
.ev-region { font-size: 16px; margin: 18px 0 8px; }
.evlist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evlist li { min-width: 0; }
.evrow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) minmax(0, 14em); gap: 4px 14px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.evrow:hover { border-color: var(--link); }
.evrow:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.evrow-date { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.evrow-main, .evrow-res { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.evrow-main b { color: var(--link); }
.evrow-res { align-items: flex-end; text-align: right; }
.evrow-season { display: block; padding: 2px 14px 0; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; max-width: 80ch; }
.kv div { display: contents; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.evnav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.evnav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.evnav a b { color: var(--ink); }
.evnav a.nx { text-align: right; }
.pcs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pc { min-width: 0; overflow-wrap: anywhere; }
.pcn { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .evrow { grid-template-columns: minmax(0, 1fr); }
  .evrow-res { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .evnav { grid-template-columns: minmax(0, 1fr); }
  .evnav a.nx { text-align: left; }
}

/* Collector rating: solid tier badges (white or gold on a dark fill) so they hold AA contrast on card art, Snow and dark surfaces. */
.grade { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; color: #fff; background: #5f5866; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); white-space: nowrap; cursor: help; flex: none; }
.grade.g-s { background: #a10d25; }
.grade.g-a { background: #7d5a06; }
.grade.g-b { background: #2f6b55; }
.grade.g-c { background: #5f5866; }
.grade.g-trophy { background: #1d1b2c; color: #f2c14e; box-shadow: inset 0 0 0 1.5px #f2c14e; font-size: 12px; }
.grade[data-href] { cursor: pointer; transition: transform .15s ease; }
.grade[data-href]:hover { transform: translateY(-1px); }
.grade.mini { min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; border-radius: 4px; margin-right: 6px; cursor: inherit; }
.chip.tier-chip, a.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip.tier-chip .grade.mini { margin-right: 1px; }
a.chip { text-decoration: none; }
a.chip[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
a.chip[aria-current="page"] .sub { color: inherit; }
@media (prefers-reduced-motion: reduce) { .grade[data-href] { transition: none; } .grade[data-href]:hover { transform: none; } }
.grade.g-none { background: var(--sunk); color: var(--muted); box-shadow: none; cursor: default; }
.grade.big { min-width: 52px; height: 52px; padding: 0 14px; font-size: 18px; border-radius: 12px; }
.grade.big.g-trophy { font-size: 14px; flex-direction: column; gap: 2px; padding: 0 8px; }
.grade.big.g-trophy svg { width: 20px; height: 20px; }
.slip-top .grade { margin-left: auto; }
.slip-top .grade + .tier { margin-left: 0; }
.rating-head { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.rating-head > div { min-width: 0; overflow-wrap: anywhere; }
.rating-head p { margin: 4px 0 0; }
.rating-block .hx-calc { margin-top: 14px; }
.rating-t th[scope="row"] { font-weight: 600; text-align: left; }
.rating-t .plus { margin-left: 6px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: -1px; }
.rating-t .muted-row th, .rating-t .muted-row td { color: var(--muted); }
.rating-t td { overflow-wrap: anywhere; }
.bar-cell { width: 28%; min-width: 80px; }
.fbar { display: block; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .5s ease-out; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .fbar i { transition: none; } }

/* =====================================================================
   Book components (design book components/bundle.css, prefix pl-), verbatim but for the page reset and brand mark.
   ===================================================================== */
.pl-pad { padding: 16px; }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-stack { display: grid; gap: 12px; }
.pl-tnum { font-variant-numeric: tabular-nums; }

/* Screentone: manga halftone dots at a 6px pitch. Decoration on large quiet areas only. */
.pl-tone { background-image: radial-gradient(var(--rule) 1px, transparent 1.3px); background-size: 6px 6px; }

/* ---------- Masthead (section heading) ---------- */
.pl-masthead { border-top: 4px solid var(--ink); padding-top: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; }
.pl-eyebrow { grid-column: 1 / -1; font: 700 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pl-eyebrow .jp { letter-spacing: .04em; margin-right: 8px; color: var(--ink); }
.pl-h2 { margin: 0; font: 400 28px/1.15 var(--font-display); }
.pl-dek { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-soft); max-width: 60ch; }
.pl-link { font: 500 14px/20px var(--font-body); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.pl-link:hover { text-decoration-thickness: 2px; }
.pl-flavour { font: italic 400 13px/20px var(--font-body); color: var(--ink-soft); margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); max-width: 60ch; }

/* ---------- RaritySeal (placement) ---------- */
.pl-seal { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-cut); font: 700 12px/1 var(--font-body); letter-spacing: .02em; white-space: nowrap; border: 1.5px solid var(--seal); color: var(--seal); background: var(--surface); }
.pl-seal.s1 { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--surface); }
.pl-seal.s4 { background: var(--seal); color: var(--surface); }
.pl-seal.s8 { background: var(--seal-soft); }
.pl-seal.s16 { }
.pl-seal.s32 { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); }
.pl-seal.s64 { border-color: transparent; color: var(--ink-soft); background: var(--sunk); }
.pl-seal.serial { background: var(--surface); border: 3px double var(--seal-deep); color: var(--seal-deep); height: 26px; }
.pl-seal .pips { letter-spacing: 1px; font-size: 9px; }

/* ---------- Hanko stamp (scarcity tag) ---------- */
.pl-stamp { display: inline-grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; background: var(--surface); box-shadow: var(--shadow-pocket); max-width: 340px; }
.pl-stamp .mark { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--seal); color: var(--seal); border-radius: var(--radius-cut); font: 400 20px/1 var(--font-display); transform: rotate(-4deg); }
.pl-stamp .mark.round { border-radius: var(--radius-seal); }
.pl-stamp b { display: block; font: 700 15px/20px var(--font-body); }
.pl-stamp span { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-stamp .n { font: 500 13px/18px var(--font-mono); color: var(--ink); }

/* ---------- Figure (estimate grammar) ---------- */
.pl-fig { display: inline-flex; align-items: baseline; gap: 4px; font: 400 15px/22px var(--font-body); }
.pl-fig b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-fig .q { font: 500 13px/1 var(--font-mono); color: var(--ink-soft); }
.pl-fig.est b { text-decoration: underline dotted var(--ink-soft); text-underline-offset: 4px; }
.pl-fig.verified b { color: var(--graded); }
.pl-fig.verified .ok { color: var(--graded); font-weight: 700; }
.pl-fig.unknown { color: var(--ink-soft); font-style: italic; }
.pl-fig .when { font-size: 13px; color: var(--ink-soft); }
.pl-fig.supply b { color: var(--supply); }
.pl-fig.price b { color: var(--price); }

/* ---------- SupplyGauge ---------- */
.pl-gauge { display: grid; gap: 8px; max-width: 560px; }
.pl-bar { display: flex; gap: 2px; height: 14px; }
.pl-bar > i { display: block; height: 100%; }
.pl-bar .earlier { background: var(--supply-earlier); }
.pl-bar .fresh { background: var(--supply-fresh); }
.pl-bar .tocome { flex: 1; background: repeating-linear-gradient(-45deg, var(--supply) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px var(--supply); opacity: .7; }
.pl-graded { position: relative; height: 10px; border-left: 2px solid var(--graded); border-right: 2px solid var(--graded); border-bottom: 2px solid var(--graded); }
.pl-graded-row { display: flex; gap: 2px; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 13px/18px var(--font-body); color: var(--ink-soft); margin: 0; padding: 0; list-style: none; }
.pl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pl-legend li::before { content: ""; width: 12px; height: 12px; }
.pl-legend .earlier::before { background: var(--supply-earlier); }
.pl-legend .fresh::before { background: var(--supply-fresh); }
.pl-legend .tocome::before { background: repeating-linear-gradient(-45deg, var(--supply) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--supply); opacity: .7; }
.pl-legend .graded::before { height: 6px; border: 2px solid var(--graded); border-top: 0; }
.pl-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Live dot ---------- */
.pl-live { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--supply); }
.pl-live::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-seal); background: var(--supply); box-shadow: 0 0 0 3px var(--supply-soft); }

/* ---------- Bounty price ---------- */
.pl-bounty { display: inline-grid; gap: 2px; }
.pl-bounty .lbl { font: 700 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pl-bounty .amt { font: 800 40px/1 var(--font-bounty); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; padding-bottom: 4px; border-bottom: 3px solid var(--price-fill); justify-self: start; }
.pl-bounty .amt.sm { font-size: 24px; font-weight: 700; border-bottom-width: 2px; }
.pl-bounty .meta { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-trend { font: 500 13px/18px var(--font-mono); color: var(--price); white-space: nowrap; }

/* ---------- Slab (graded pop) ---------- */
.pl-slab { display: inline-grid; grid-template-columns: auto 1fr; border: 2px solid var(--graded); background: var(--surface); min-width: 220px; }
.pl-slab .grade { background: var(--graded); color: var(--surface); font: 800 28px/1 var(--font-bounty); padding: 8px 12px; display: grid; place-items: center; }
.pl-slab .info { padding: 6px 12px; display: grid; }
.pl-slab .info b { font: 700 13px/18px var(--font-body); color: var(--graded); letter-spacing: .06em; text-transform: uppercase; }
.pl-slab .info span { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-slab .info .pop { font: 700 15px/20px var(--font-body); color: var(--ink); }

/* ---------- Source chip (Poneglyph) ---------- */
.pl-source { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-cut); background: var(--graded-soft); color: var(--graded); font: 500 12px/1 var(--font-mono); text-decoration: none; }
.pl-source::before { content: ""; width: 8px; height: 8px; background: var(--graded); transform: rotate(45deg); }
.pl-source:hover { text-decoration: underline; }

/* ---------- Caution note ---------- */
.pl-caution { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px; background: var(--caution-soft); color: var(--caution); font: 500 13px/18px var(--font-body); border-radius: var(--radius-cut); }
.pl-caution::before { content: "!"; font: 700 12px/16px var(--font-mono); width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1.5px solid currentColor; border-radius: var(--radius-seal); flex: none; }

/* ---------- VivreCard (card tile in a binder pocket) ---------- */
.pl-binder { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; padding: 16px; background: var(--sunk); }
.pl-card { position: relative; display: grid; gap: 8px; padding: 12px; background: var(--surface); box-shadow: var(--shadow-pocket); color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.pl-card:hover { box-shadow: var(--shadow-sleeve); transform: translateY(-2px); }
.pl-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pl-art { aspect-ratio: 63 / 88; border-radius: var(--radius-card); background: var(--sunk); position: relative; overflow: hidden; display: grid; place-items: center; color: var(--ink-soft); font: 500 12px/1 var(--font-mono); }
.pl-art img { width: 100%; height: 100%; object-fit: cover; }
.pl-art.back { background-color: var(--night); background-image: radial-gradient(var(--ink-soft) 1px, transparent 1.4px); background-size: 8px 8px; }
.pl-art.back::after { content: "台帳"; font: 400 22px/1 var(--font-display); color: var(--paper); border: 2px solid var(--paper); padding: 6px; border-radius: var(--radius-cut); opacity: .7; }
[data-theme="dark"] .pl-art.back::after { color: var(--ink); border-color: var(--ink); }
.pl-card .name { font: 700 15px/20px var(--font-body); }
.pl-code { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.pl-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed var(--rule); padding-top: 8px; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-card .foot b { color: var(--supply); font-variant-numeric: tabular-nums; }
.pl-card .foot .p { color: var(--price); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Index tabs (region) ---------- */
.pl-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ink); padding: 0 8px; }
.pl-tab { position: relative; top: 2px; padding: 8px 14px 6px; border: 2px solid var(--rule); border-bottom: 0; border-radius: var(--radius-cut) var(--radius-cut) 0 0; background: var(--sunk); color: var(--ink-soft); font: 500 14px/20px var(--font-body); cursor: pointer; }
.pl-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--ink); border-bottom: 2px solid var(--paper); font-weight: 700; }
.pl-tab[aria-disabled="true"] { cursor: default; opacity: .7; }
.pl-tab small { font: 400 11px/1 var(--font-body); margin-left: 4px; }

/* ---------- Button ---------- */
.pl-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 2px solid var(--ink); border-radius: var(--radius-cut); background: var(--surface); color: var(--ink); font: 700 14px/1 var(--font-body); cursor: pointer; text-decoration: none; }
.pl-btn.primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-print); }
.pl-btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--seal); }
.pl-btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pl-btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

/* ---------- Log Pose search ---------- */
.pl-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); max-width: 640px; }
.pl-search svg { flex: none; }
.pl-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--font-body); color: var(--ink); min-width: 0; }
.pl-search input::placeholder { color: var(--ink-soft); }
.pl-search kbd { font: 500 12px/1 var(--font-mono); color: var(--ink-soft); border: 1px solid var(--ink-soft); border-radius: var(--radius-cut); padding: 4px 6px; }
.pl-search:focus-within { box-shadow: 3px 3px 0 var(--seal); }

/* ---------- Grand Line track (season progress) ---------- */
.pl-track { display: grid; gap: 6px; max-width: 560px; }
.pl-track .line { position: relative; height: 18px; background-image: linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px); background-size: calc(100% / 21) 8px; background-repeat: repeat-x; background-position: 0 100%; border-bottom: 2px solid var(--ink); }
.pl-track .ship { position: absolute; bottom: -7px; width: 12px; height: 12px; background: var(--supply); border: 2px solid var(--surface); border-radius: var(--radius-seal); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--supply); }
.pl-track .ends { display: flex; justify-content: space-between; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-track .now { font: 700 14px/20px var(--font-body); }

/* ---------- Ledger table ---------- */
.pl-ledger { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--font-body); }
.pl-ledger th { text-align: left; font: 500 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 12px; border-bottom: 2px solid var(--ink); }
.pl-ledger td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.pl-ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-ledger .rank { font: 800 18px/1 var(--font-bounty); color: var(--ink-soft); width: 32px; }
.pl-ledger tr:first-child .rank { color: var(--price); }

/* ---------- Ledger strip (headline counts) ---------- */
.pl-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pl-strip > div { padding: 14px 16px; border-right: 1px solid var(--rule); }
.pl-strip > div:last-child { border-right: 0; }
.pl-strip b { display: block; font: 800 32px/1 var(--font-bounty); font-variant-numeric: lining-nums tabular-nums; }
.pl-strip span { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-strip .supply b { color: var(--supply); }
.pl-strip .graded b { color: var(--graded); }
.pl-strip .price b { color: var(--price); }


/* =====================================================================
   v2: uncertainty grammar, hero components, partial states (Oct 2026)
   ===================================================================== */

/* ---------- Certainty badge: one shape per state ---------- */
.pl-cert { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: var(--radius-cut); font: 600 11px/1 var(--font-body); letter-spacing: .04em; white-space: nowrap; border: 1px solid currentColor; background: var(--surface); }
.pl-cert::before { font: 400 11px/1 var(--font-mono); }
.pl-cert.exact { color: var(--conf-high); } .pl-cert.exact::before { content: "◆"; }
.pl-cert.est { color: var(--conf-mid); } .pl-cert.est::before { content: "≈"; font-weight: 700; }
.pl-cert.ub { color: var(--ink); } .pl-cert.ub::before { content: "≤"; font-weight: 700; }
.pl-cert.inf { color: var(--conf-low); border-style: dashed; } .pl-cert.inf::before { content: "◇"; }
.pl-cert.unk { color: var(--conf-low); border-style: dotted; } .pl-cert.unk::before { content: "?"; font-weight: 700; }
.pl-cert.live { color: var(--supply); } .pl-cert.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--supply); box-shadow: 0 0 0 2px var(--supply-soft); }
.pl-cert.conflict { color: var(--conflict); background: var(--conflict-soft); } .pl-cert.conflict::before { content: "⚠"; }

/* ---------- Certainty numbers ---------- */
.pl-n { font: 500 15px/22px var(--font-body); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pl-n .m { font: 600 0.85em/1 var(--font-mono); color: var(--ink-soft); margin-right: 2px; }
.pl-n.lg { font: 500 22px/28px var(--font-body); }
.pl-n.xl { font: 800 36px/1 var(--font-bounty); }
.pl-n.est b { text-decoration: underline dotted var(--conf-mid); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pl-n.inf b { font-style: italic; }
.pl-n.unk { font-style: italic; color: var(--ink-soft); font-weight: 400; }
.pl-n.live b::after { content: " so far"; font: 400 13px/1 var(--font-body); color: var(--ink-soft); }
.pl-n.conflict b { text-decoration: underline wavy var(--conflict); text-underline-offset: 5px; }
.pl-n .range { font: 400 13px/1 var(--font-mono); color: var(--ink-soft); margin-left: 6px; }
.pl-n.supply b { color: var(--supply); } .pl-n.price b { color: var(--price); } .pl-n.graded b { color: var(--graded); }

/* ---------- Supply bar v2 (program segments, cap, live end, unknown, conflict) ---------- */
.pl-sbar { display: grid; gap: 8px; }
.pl-sbar .track { position: relative; display: flex; gap: 2px; height: 18px; }
.pl-sbar .seg { height: 100%; background: var(--supply-earlier); position: relative; }
.pl-sbar .seg.now { background: var(--supply-fresh); }
.pl-sbar .seg.inf { background: repeating-linear-gradient(-45deg, var(--supply-earlier) 0 3px, var(--supply-soft) 3px 6px); }
.pl-sbar .seg.tocome { background: repeating-linear-gradient(-45deg, var(--supply) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px var(--supply); }
.pl-sbar .seg.unk { flex: 1; background: none; border: 2px dashed var(--conf-low); }
.pl-sbar .seg.open::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left: 8px solid var(--supply); }
.pl-sbar .seg.over { background: repeating-linear-gradient(90deg, var(--conflict) 0 2px, var(--conflict-soft) 2px 5px); }
.pl-sbar .cap { width: 3px; margin: -4px 2px; background: var(--ink); align-self: stretch; }
.pl-sbar .run { flex: 1; border: 1px solid var(--rule); border-left: 0; background: var(--surface); }
.pl-sbar .scale { display: flex; justify-content: space-between; font: 400 12px/16px var(--font-mono); color: var(--ink-soft); }
.pl-sbar .bracket { height: 8px; border: 2px solid var(--graded); border-top: 0; }
.pl-sbar .brow { display: flex; }
.pl-sbar .labels { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-sbar .labels b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-sbar .labels li { display: inline-flex; gap: 6px; align-items: center; }
.pl-sbar .labels li::before { content: ""; width: 12px; height: 12px; background: var(--supply-earlier); }
.pl-sbar .labels .inf::before { background: repeating-linear-gradient(-45deg, var(--supply-earlier) 0 2px, var(--supply-soft) 2px 4px); }
.pl-sbar .labels .now::before { background: var(--supply-fresh); }
.pl-sbar .labels .tocome::before { background: repeating-linear-gradient(-45deg, var(--supply) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--supply); }
.pl-sbar .labels .gr::before { height: 6px; background: none; border: 2px solid var(--graded); border-top: 0; }
.pl-sbar .labels .unk::before { background: none; border: 2px dashed var(--conf-low); }
.pl-sbar .labels .over::before { background: var(--conflict); }

/* ---------- Story timeline ---------- */
.pl-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pl-story li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 0 0 18px; }
.pl-story li::before { content: ""; position: absolute; left: 103px; top: 18px; bottom: -2px; width: 2px; background: var(--rule); }
.pl-story li:last-child::before { display: none; }
.pl-story .when { font: 500 12px/18px var(--font-mono); color: var(--ink-soft); text-align: right; padding-top: 2px; }
.pl-story .what { position: relative; padding-left: 20px; }
.pl-story .what::before { content: ""; position: absolute; left: -2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.pl-story .k { display: block; font: 700 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pl-story .v { display: block; font: 500 16px/24px var(--font-body); }
.pl-story .s { display: block; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-story .supply .what::before { background: var(--supply); }
.pl-story .graded .what::before { background: var(--graded); }
.pl-story .price .what::before { background: var(--price-fill); }
.pl-story .inf .what::before { background: var(--surface); border: 2px solid var(--supply); }
.pl-story .live .what::before { background: var(--supply); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--supply-soft); }
.pl-story .end .what::before { border-radius: 2px; background: var(--ink); }
@media (min-width: 900px) {
  .pl-story.h { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pl-story.h li { grid-template-columns: 1fr; gap: 6px; padding: 0 12px 0 0; }
  .pl-story.h li::before { left: 6px; right: -6px; top: 31px; bottom: auto; width: auto; height: 2px; }
  .pl-story.h .when { text-align: left; }
  .pl-story.h .what { padding: 22px 0 0; }
  .pl-story.h .what::before { left: 0; top: 0; }
}

/* ---------- Rating breakdown ---------- */
.pl-rating { display: grid; gap: 12px; max-width: 560px; }
.pl-rating .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pl-rating .grade { font: 400 26px/1 var(--font-display); }
.pl-rating .score { font: 800 26px/1 var(--font-bounty); font-variant-numeric: tabular-nums; }
.pl-rating .cov { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-rating .covbar { display: flex; height: 6px; gap: 2px; }
.pl-rating .covbar i { background: var(--ink); } .pl-rating .covbar i.miss { background: none; border: 1px dashed var(--ink-soft); }
.pl-rating table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-body); }
.pl-rating td { padding: 6px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.pl-rating .f { width: 34%; } .pl-rating .w { width: 12%; font: 500 12px/1 var(--font-mono); color: var(--ink-soft); letter-spacing: 2px; }
.pl-rating .b { width: 40%; } .pl-rating .sc { width: 14%; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-rating .meter { height: 8px; background: var(--sunk); position: relative; }
.pl-rating .meter i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.pl-rating tr.miss .meter { background: none; border: 1px dashed var(--ink-soft); }
.pl-rating tr.miss .sc, .pl-rating tr.miss .f { color: var(--ink-soft); font-style: italic; }
.pl-rating .ed { font: 600 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--conf-mid); border: 1px solid currentColor; padding: 2px 4px; margin-left: 6px; border-radius: 2px; }

/* ---------- Price sparkline ---------- */
.pl-spark { display: grid; gap: 6px; max-width: 560px; }
.pl-spark svg { width: 100%; height: auto; overflow: visible; }
.pl-spark .line { fill: none; stroke: var(--price-fill); stroke-width: 2; }
.pl-spark .pt { fill: var(--price-fill); stroke: var(--surface); stroke-width: 1.5; }
.pl-spark .pt.alt { fill: var(--surface); stroke: var(--price); stroke-width: 1.5; }
.pl-spark .med { stroke: var(--price); stroke-dasharray: 4 3; stroke-width: 1; }
.pl-spark .axis { stroke: var(--rule); stroke-width: 1; }
.pl-spark .lbl { fill: var(--ink-soft); font: 400 11px var(--font-mono); }
.pl-spark .peak { fill: var(--price); font: 600 11px var(--font-mono); }
.pl-spark .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.pl-spark .meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-spark .thin { font: 600 12px/16px var(--font-body); color: var(--caution); }

/* ---------- Source chip v2: confidence by diamond fill ---------- */
.pl-source.mid::before { background: linear-gradient(135deg, var(--graded) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--graded); }
.pl-source.low { background: var(--surface); color: var(--conf-low); box-shadow: inset 0 0 0 1px var(--rule); }
.pl-source.low::before { background: none; box-shadow: inset 0 0 0 1.5px var(--conf-low); }
.pl-source .pub { font-weight: 600; }

/* ---------- Conflict flag ---------- */
.pl-conflict { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; background: var(--conflict-soft); color: var(--ink); border-radius: var(--radius-cut); max-width: 560px; font: 400 14px/20px var(--font-body); }
.pl-conflict::before { content: "⚠"; color: var(--conflict); font-size: 18px; line-height: 20px; grid-row: span 2; }
.pl-conflict b { color: var(--conflict); }

/* ---------- Partial / empty slots ---------- */
.pl-slot { display: grid; gap: 4px; padding: 12px; border: 1.5px dashed var(--rule); border-radius: var(--radius-cut); color: var(--ink-soft); font: 400 14px/20px var(--font-body); }
.pl-slot b { color: var(--ink); font-weight: 700; }
.pl-slot a { color: var(--ink); }
.pl-art.missing { background: var(--sunk); border: 1.5px dashed var(--rule); display: grid; place-items: center; text-align: center; padding: 12px; }
.pl-art.missing span { font: 500 13px/18px var(--font-mono); color: var(--ink); }
.pl-art.missing small { display: block; font: 400 12px/16px var(--font-body); color: var(--ink-soft); margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .pl-card, .pl-btn { transition: none !important; } .pl-card:hover { transform: none; } }

/* ---------- Rating confidence: evidence pips + rating badge (v3) ---------- */
.pl-pips { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.pl-pips i { width: 9px; height: 9px; border-radius: 2px; display: block; box-sizing: border-box; }
.pl-pips i.c { background: var(--supply); } .pl-pips i.p { background: var(--seal); } .pl-pips i.v { background: var(--price-fill); } .pl-pips i.g { background: var(--graded); }
.pl-pips i.off { background: none; border: 1.5px dashed var(--ink-soft); opacity: .8; }
.pl-pips.lg i { width: 14px; height: 14px; border-radius: 3px; }
.pl-pips .n { font: 500 11px/1 var(--font-mono); color: var(--ink-soft); margin-left: 4px; }
.pl-rbadge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-cut); background: var(--surface); font: 700 13px/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.pl-rbadge .sc { font: 800 14px/1 var(--font-bounty); font-variant-numeric: tabular-nums; }
.pl-rbadge.prov { border-style: dashed; border-color: var(--ink-soft); font-weight: 500; }
.pl-rbadge.prov .t::after { content: " (provisional)"; font: italic 400 12px/1 var(--font-body); color: var(--ink-soft); }
.pl-rbadge.prov .sc { font-weight: 700; color: var(--ink-soft); }
.pl-rbadge.none { border: 1.5px dotted var(--ink-soft); color: var(--ink-soft); font-weight: 500; font-style: italic; }
.pl-rbadge.sm { height: 22px; padding: 0 6px; gap: 6px; font-size: 12px; }
.pl-rbadge.sm .pl-pips i { width: 7px; height: 7px; }
.pl-rbadge.sm.prov .t::after { content: " prov."; }
.pl-evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 14px/20px var(--font-body); }
.pl-evlist li { display: grid; grid-template-columns: 16px 110px 1fr; gap: 8px; align-items: center; }
.pl-evlist li.off { color: var(--ink-soft); }
.pl-evlist li .k { font-weight: 700; }
.pl-evlist li.off .k { font-weight: 500; font-style: italic; }

/* Component fit to this site */
.pl-source { max-width: 100%; min-width: 0; overflow: hidden; }
.pl-source .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-source .pub { flex: none; }
.pl-rbadge[data-href] { cursor: pointer; }
.pl-rbadge.trophy { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pl-rbadge .t { white-space: nowrap; }
.pl-rbadge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pl-rating { max-width: 640px; }
.pl-rating .rt-name { font: 400 26px/1 var(--font-display); }
.pl-rating .score.prov { color: var(--ink-soft); font-weight: 700; }
.pl-rating .lvl { font-size: 14px; }
.pl-rating .why { margin: 0; font-size: 15px; }
.pl-rating td { border-bottom: 1px solid var(--rule); padding: 8px 8px 8px 0; }
.pl-rating td.f .sub { display: block; font-size: 13px; line-height: 18px; font-style: normal; }
.pl-rating tr.miss td.f .sub { display: none; }
.pl-rating .tablewrap { margin-top: 4px; }
.pl-n .m + b { margin-left: 1px; }
.slip-foot .pl-n, .sp-figs .pl-n, .sp-vers .pl-n { font-size: 16px; line-height: 22px; white-space: normal; }
.slip-foot .pl-n .range, .sp-vers .pl-n .range { display: block; margin-left: 0; font-size: 12px; line-height: 16px; }
.pl-cert { cursor: help; }
/* Copy charts are supply, so jade: settled Treasure Cup copies dark, Regionals bright. */
.f-sup-a { fill: var(--supply-earlier); } .f-sup-b { fill: var(--supply-fresh); }
:is(.legend, .cf) i.tc { background: var(--supply-earlier); border-radius: 0; } :is(.legend, .cf) i.rg { background: var(--supply-fresh); border-radius: 0; }
.pl-rating .meter { height: 8px; background: var(--sunk); box-shadow: none; border: 0; border-radius: 0; display: block; }
.pl-rating tr.miss .meter { background: none; border: 1px dashed var(--ink-soft); }
.ibox-t th[scope="row"] { text-transform: none; letter-spacing: 0; font: 500 14px/20px var(--font-body); border-bottom: 0; }
.cert-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-conflict span { grid-column: 2; }
@media (max-width: 640px) { .pl-evlist li { grid-template-columns: 16px 80px minmax(0, 1fr); } .pl-rating .f { width: 46%; } .pl-rating .b { width: 26%; } }

/* =====================================================================
   Ledger layer (redesign phase 1): Card Shop paper, ink rules, square corners.
   Paper, not panels: sections are split by ink rules and white space, not boxes.
   Radius: 0 for paper, 3px die-cut for controls, card art keeps a real card's corner.
   ===================================================================== */
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/26px var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { max-width: 1280px; padding-inline: 32px; }
main { padding-block: 32px 64px; }
.mono, code, .slip-num, .formula, .pcn { font-family: var(--font-mono); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; }
h2 { font-size: 24px; line-height: 1.15; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: 0; }
.eyebrow { font: 700 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow .jp { color: var(--ink); letter-spacing: .04em; margin-right: 8px; }
.lede { color: var(--ink-soft); max-width: 62ch; }
.note, .fine, .sub { color: var(--ink-soft); }
::selection { background: var(--price-soft); color: var(--ink); }

/* Section heads: a newspaper front. Heavy ink rule, title, one-line dek. No boxes, no gradient underline. */
section.block > h2::after, .sec-head > h2::after { content: none; display: none; }
section.block { margin-top: 48px; gap: 16px; }
section.block > h2, .sec-head:not(.cap) { border-top: 4px solid var(--ink); padding-top: 12px; }
.sec-head:not(.cap) > h2 { border: 0; padding: 0; }
.sec-head > a { font: 500 14px/20px var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sec-head > a:hover { text-decoration-thickness: 2px; }

/* Masthead: paper, a single ink rule, the Podium fan mark. The only dark band on the site is gone. */
.mast { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--ink); box-shadow: none; }
.brand.pl-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
/* Brand mark: the Podium fan, three prize cards rising from a cup. Ink parts follow currentColor; card edges cut to the ground behind. */
.pl-mark .logo { width: 40px; height: 40px; flex: none; color: var(--ink); }
.foot-brand .pl-mark { --logo-ground: var(--band); }
.foot-brand .pl-mark .logo { color: var(--on-band); }
.pl-mark .word { font: 400 20px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.pl-mark .word small { display: block; font: 500 11px/14px var(--font-mono); letter-spacing: .14em; color: var(--ink-soft); margin-top: 4px; }
.tabs a, .more-btn { font: 500 15px/20px var(--font-body); color: var(--ink); background: none; border-radius: 0; padding: 10px 2px; margin: 0 8px; border-bottom: 2px solid transparent; box-shadow: none; }
.tabs a:hover, .more-btn:hover, .more-btn[aria-expanded="true"] { color: var(--ink); background: none; border-bottom-color: var(--rule); }
.tabs a[aria-current="page"], .more-btn.is-current { color: var(--ink); background: none; border-bottom-color: var(--ink); font-weight: 700; box-shadow: none; }
.more-menu { border: 1.5px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); background: var(--surface); padding: 4px; }
.tabs .more-menu a { margin: 0; padding: 8px 12px; border: 0; border-radius: 0; color: var(--ink); }
.tabs .more-menu a:hover, .tabs .more-menu a:focus-visible { background: var(--sunk); }
.tabs .more-menu a[aria-current="page"] { color: var(--ink); background: var(--sunk); font-weight: 700; }
.cur select, select, input[type="search"] { border-radius: var(--radius-cut); }
.cur select { font: 500 14px/20px var(--font-mono); background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink-soft); min-height: 36px; padding: 6px 8px; }
.cur select option { color: var(--ink); background: var(--surface); }
.theme-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--ink-soft); border-radius: var(--radius-cut); background: var(--surface); color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn .moon { display: none; } :root[data-theme="dark"] .theme-btn .moon { display: block; } :root[data-theme="dark"] .theme-btn .sun { display: none; }
/* Log Pose search: the needle points north. */
.gsearch input[type="search"], .sbar input { height: 48px; font: 400 16px/1 var(--font-body); color: var(--ink); padding: 0 14px 0 44px; border: 2px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print);
  background: var(--surface) no-repeat 14px 50% / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='none' stroke='%2318181d' stroke-width='1.5'/%3E%3Cpath d='M11 2.5 13.2 11H8.8Z' fill='%2318181d'/%3E%3Cpath d='M11 19.5 8.8 11h4.4Z' fill='none' stroke='%2318181d' stroke-width='1'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .gsearch input[type="search"], :root[data-theme="dark"] .sbar input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='none' stroke='%23f0e7d6' stroke-width='1.5'/%3E%3Cpath d='M11 2.5 13.2 11H8.8Z' fill='%23f0e7d6'/%3E%3Cpath d='M11 19.5 8.8 11h4.4Z' fill='none' stroke='%23f0e7d6' stroke-width='1'/%3E%3C/svg%3E"); }
.gsearch input[type="search"]::placeholder, .sbar input::placeholder { color: var(--ink-soft); }
.gsearch input[type="search"]:focus-visible, .sbar input:focus { outline: none; border-color: var(--ink); box-shadow: 3px 3px 0 var(--seal); }
input[type="search"], select { border: 1.5px solid var(--ink-soft); background: var(--surface); color: var(--ink); }
.field label { font: 700 12px/16px var(--font-body); letter-spacing: .12em; color: var(--ink-soft); }

/* Controls: die-cut 3px corners, no pills. Selected = ink. */
.chip, .seg, .seg button, .kchip, .rv button, .rv input, .slip-more, .ftoggle, .ver, .fam-link, .btn, .cites-n, .linkish { border-radius: var(--radius-cut); }
.chip { font: 500 14px/20px var(--font-body); color: var(--ink); border: 1.5px solid var(--ink-soft); background: var(--surface); padding: 4px 12px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"], a.chip[aria-current="page"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.seg { border: 1.5px solid var(--ink-soft); }
.seg button { border-radius: 0; color: var(--ink-soft); background: var(--surface); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn { font: 700 14px/1 var(--font-body); min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-print); transition: transform .12s ease-out, box-shadow .12s ease-out; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--seal); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.ghost:hover { transform: none; box-shadow: none; text-decoration: underline; }
.reset, .linkish, .cl-more { color: var(--ink); }
.fam-link { background: none; color: var(--ink); padding: 0; font: 700 15px/20px var(--font-body); text-decoration: underline; text-underline-offset: 4px; }
.fam-link:hover { background: none; color: var(--ink); text-decoration-thickness: 2px; }
.ver { font: 500 12px/16px var(--font-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink-soft); padding: 3px 9px; }
.ver:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.info-btn { border-color: var(--ink-soft); color: var(--ink-soft); background: var(--surface); }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
#tip { background: var(--ink); color: var(--paper); border-radius: var(--radius-cut); box-shadow: none; font: 400 13px/18px var(--font-body); }

/* Placing seals (RaritySeal): one vermilion ramp, heavier as the card gets scarcer. Replaces the rainbow tier badges. */
.tier, .tier.t2, .tier.t4, .tier.t8, .tier.t16, .tier.t32, .tier.serial, .tier.promo { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: var(--radius-cut); font: 700 12px/16px var(--font-body); letter-spacing: .02em; border: 1.5px solid var(--seal); color: var(--seal); background: var(--surface); }
.tier.t1 { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--surface); }
.tier.t2, .tier.t4 { background: var(--seal); border-color: var(--seal); color: var(--surface); }
.tier.t8 { background: var(--seal-soft); }
.tier.t32 { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); }
.tier.t64, .tier.t128, .tier.t256, .tier.t512, .tier.t999 { border-color: transparent; color: var(--ink-soft); background: var(--sunk); }
.tier.serial { border: 3px double var(--seal-deep); color: var(--seal-deep); background: var(--surface); }
.tier.promo { border-color: var(--ink-soft); color: var(--ink); background: var(--surface); }
:root[data-theme="dark"] .tier.t1, :root[data-theme="dark"] .tier.t2, :root[data-theme="dark"] .tier.t4 { color: var(--paper); }
/* Status pills and collector tags: die-cut chips, coloured by meaning only. */
.pill { border-radius: var(--radius-cut); font: 700 12px/16px var(--font-body); padding: 2px 8px; }
.tag, a.tag { border-radius: var(--radius-cut); font: 700 12px/16px var(--font-body); padding: 3px 8px; background: var(--seal-soft); color: var(--seal-deep); }
.tag.info { background: var(--graded-soft); color: var(--graded); }
.tag.caveat { background: var(--caution-soft); color: var(--caution); }
:root[data-theme="dark"] .tag { color: var(--seal-deep); }
a.tag:focus-visible { outline: 2px solid var(--ink); }
.vtag { border-radius: 2px; color: var(--seal-deep); background: var(--seal-soft); }

/* Card slips live in binder pockets: a sunk page, square white pockets, the card lifts out on hover. */
.grid { gap: 16px; padding: 16px; background: var(--sunk); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.related { gap: 16px; padding: 16px; background: var(--sunk); }
.slip, .slip.serial { border: 0; border-radius: 0; background: var(--surface); box-shadow: var(--shadow-pocket); padding: 12px; gap: 8px; transition: box-shadow .12s ease-out, transform .12s ease-out; }
.slip:hover { border: 0; transform: translateY(-2px); box-shadow: var(--shadow-sleeve); }
.slip.group:hover { transform: translateY(-2px); }
.slip h3 { font-size: 16px; line-height: 22px; }
.slip-prog { font-size: 13px; line-height: 18px; margin-top: -4px; }
.slip-num { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.slip-foot { border-top: 1px dashed var(--rule); padding-top: 8px; }
.slip-foot span { font: 700 11px/14px var(--font-body); letter-spacing: .1em; color: var(--ink-soft); }
.slip-foot b { font: 700 16px/22px var(--font-body); font-variant-numeric: tabular-nums lining-nums; }
.art { border-radius: 4.6% / 3.3%; border: 1px solid var(--rule); box-shadow: none; background: var(--sunk); }
.art.ph { background-color: var(--sunk); border-style: dashed; }
/* Missing image: one card-shaped "Image coming soon" frame everywhere (cards, thumbnails, banners, prizes). Small
   thumbnails keep the icon and a two-word note; the card number and name show only where the frame is large. */
.art.ph, .mp-art.ph { background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--ink) 4%, transparent) 9px 10px); }
.art.ph { container-type: inline-size; gap: 4px; padding: 6px; }
.ph-ic { width: 34%; max-width: 44px; min-width: 16px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art.ph .ph-note { display: block; font-size: 11px; line-height: 1.2; letter-spacing: .06em; color: var(--ink-soft); overflow-wrap: anywhere; }
.art.ph .ph-num, .art.ph .ph-name { color: var(--ink-soft); max-width: 100%; overflow-wrap: anywhere; }
@container (max-width: 120px) { .art.ph .ph-num, .art.ph .ph-name { display: none; } .art.ph .ph-note { font-size: 10px; letter-spacing: .03em; } }
@container (max-width: 56px) { .art.ph .ph-note { display: none; } .ph-ic { width: 60%; } }
.mp-art.ph { color: var(--ink-soft); background-color: var(--sunk); border: 1px dashed var(--rule); }
.tlx-bn.none { gap: 4px; align-content: center; }
.tlx-bn.none small, .mp-art.ph small { font: 600 11px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.tlx-bn.none .ph-ic, .mp-art.ph .ph-ic { width: 40px; }
.tlx-bn.none .ph-ic { stroke: currentColor; }
.slip.group .stack::before, .slip.group .stack::after { background: var(--surface); border-color: var(--rule); }
.stack-n { color: var(--paper); background: var(--ink); box-shadow: 0 0 0 2px var(--surface); border-radius: var(--radius-cut); font: 700 12px/16px var(--font-body); }
.slip-more { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.slip-more:hover, .slip-more:focus-visible { background: var(--sunk); }
.slip-panel { border-left: 2px solid var(--ink); background: var(--surface); }
.slip-close { border-radius: var(--radius-cut); border-color: var(--ink-soft); }
.sp-link { color: var(--ink); }
.thumb .art { box-shadow: none; }

/* Ledger strip: headline counts in wanted-poster numerals between two ink rules. */
.strip { margin: 24px 0; padding: 0; gap: 0; background: none; border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; box-shadow: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.strip > div { padding: 12px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.strip > div:last-child { border-right: 0; }
.strip b { font: 800 32px/1.1 var(--font-bounty); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.strip span { font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.facts { gap: 0; background: none; border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; }
.fact { background: none; border-right: 1px solid var(--rule); padding: 12px 16px; }
.fact:last-child { border-right: 0; }
.fact .v { font: 800 30px/1.1 var(--font-bounty); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fact .v.pend { font: 500 16px/22px var(--font-body); font-style: italic; color: var(--ink-soft); }
.hx-strip { background: none; border-radius: 0; box-shadow: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); gap: 0; }
.hx-strip > div { background: none; border-right: 1px solid var(--rule); padding: 12px 16px; }
.hx-strip > div + div { box-shadow: none; }
.hx-strip b { font: 800 30px/1.1 var(--font-bounty); color: var(--ink); }
.hx-strip span { color: var(--ink); font-weight: 700; }
.hx-strip .sub { color: var(--ink-soft); font-weight: 400; }

/* Ledger tables: ruled rows, an ink rule under the header, tabular figures. */
.tablewrap { background: none; border: 0; border-radius: 0; }
table { font: 400 15px/22px var(--font-body); }
th { font: 500 12px/16px var(--font-body); letter-spacing: .08em; color: var(--ink-soft); background: none; border-bottom: 2px solid var(--ink); }
td { border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 1px solid var(--rule); }
.callout { background: var(--sunk); border-radius: 0; border-left: 0; }
.checks { border: 0; border-radius: 0; background: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Rankings: Mincho numerals instead of medal discs. */
.rank { background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.rank li, .rank li:first-child, .rank li:last-child { border-radius: 0; border-bottom: 1px solid var(--rule); padding: 10px 4px; background: none; animation: none; }
.rank li:last-child { border-bottom: 1px solid var(--rule); }
.rank li:nth-child(-n+3):has(> .n) { background: none; }
.rank li > .n, .rank li:nth-child(-n+3) > .n { display: inline-block; width: 28px; height: auto; background: none; box-shadow: none; border-radius: 0; color: var(--ink-soft); font: 800 18px/1 var(--font-bounty); animation: none; overflow: visible; }
.rank li:nth-child(1) > .n { color: var(--price); }
.rank li:nth-child(1) > .n::after { content: none; }
.rank a { color: var(--ink); }
.rank a:hover { color: var(--ink); text-decoration: underline; }
.stat-grid > .panel > h3, .panel > .sec-head.cap { font: 700 16px/24px var(--font-body); color: var(--ink); background: none; border-radius: 0; padding: 0 0 4px; margin-bottom: 0; box-shadow: none; }
.panel > .sec-head.cap h3 { color: var(--ink); font-size: 16px; }
.stat-grid > .panel > h3 + .chart { border: 0; padding: 0; background: none; }
.trend, .trend.up, .trend.down { color: var(--price); font-family: var(--font-mono); font-size: 13px; }

/* Charts: flat paper, PSA 10 in gold, raw in ink-soft. */
.chart { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 12px 0 8px; }
.chart .ax { font-family: var(--font-mono); fill: var(--ink-soft); }
.chips.cf .chip[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--paper); }

/* Seasons and supply meters: jade only (dark = earlier seasons, bright = this season, hatched = still to come), graded in indigo. */
.season-grid { gap: 32px; }
.season, .season.live { background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; box-shadow: none; padding: 12px 0 0; }
.season-top h3 { font: 400 20px/1.2 var(--font-display); }
.season-top h3 a { color: var(--ink); }
.live-dot { font: 700 12px/16px var(--font-body); letter-spacing: .1em; color: var(--supply); }
.live-dot::before { background: var(--supply); box-shadow: 0 0 0 3px var(--supply-soft); animation: none; }
.progress { height: 6px; background: var(--sunk); border-radius: 0; }
.progress i, .m-now { background: var(--supply-fresh); border-radius: 0; }
.meter { height: 12px; border-radius: 0; border: 0; gap: 2px; }
.meter, .meter-key i.m-left { background: repeating-linear-gradient(-45deg, var(--supply) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px var(--supply); }
.m-prev { background: var(--supply-earlier); }
.m-pop, .meter .m-pop { background: var(--graded); }
.meter-key i { border-radius: 0; border: 0; }
.meter-key i.m-pop { background: var(--graded); }
.next-up { border-radius: 0; background: none; border-top: 1px solid var(--rule); padding: 8px 0 0; }
.sc-row { border-top: 1px dashed var(--rule); }
.sc-row:hover b { color: var(--ink); text-decoration: underline; }
.sc-more { border-top: 1px dashed var(--rule); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Home: a paper front page. The open-sea hero becomes a headline with the cards on a screentone band. */
.home-hero { padding: 48px 0 40px; margin-top: 0; border-radius: 0; color: var(--ink); background: none; border-bottom: 2px solid var(--ink); }
.home-hero::after { content: none; }
.home-hero h1 { color: var(--ink); text-shadow: none; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; max-width: 14ch; }
.home-hero .lede { color: var(--ink-soft); font-size: 18px; line-height: 28px; }
.home-hero .eyebrow { color: var(--ink-soft); }
.home-hero .chip { color: var(--ink); border-color: var(--ink-soft); }
.home-hero .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.home-hero .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.home-hero .info-btn { background: var(--surface); color: var(--ink-soft); border-color: var(--ink-soft); }
.fan { background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; }
.fan a:nth-child(2) .art { animation: none; }
.fan .art { box-shadow: 0 10px 24px rgba(0, 0, 0, .28); border: 0; }
/* Spotlight and character banners: the band with screentone, ink text. */
.chase { color: var(--on-band); border-radius: 0; box-shadow: none; background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; border-top: 4px solid var(--ink); }
.chase .eyebrow { color: var(--on-band-soft); }
.chase h2 { color: var(--on-band); }
.chase-head p, .chase-line { color: var(--on-band-soft); }
.chase-card { background: var(--surface); border: 0; box-shadow: var(--shadow-pocket); border-radius: 0; }
.chase-card:hover { border: 0; box-shadow: var(--shadow-sleeve); }
.chase-rank { background: var(--ink); color: var(--paper); border-radius: var(--radius-cut); font: 800 14px/1 var(--font-bounty); padding: 4px 8px; }
.chase-label { color: var(--seal-deep); background: var(--seal-soft); border-radius: var(--radius-cut); }
.chase-info h3 { color: var(--ink); }
.chase-info .mono, .chase-info dt { color: var(--ink-soft); }
.chase-info dd { color: var(--ink); }
.chase-names a { color: var(--ink); }
.char-stats div { background: var(--surface); border: 0; box-shadow: var(--shadow-pocket); border-radius: 0; }
.char-stats span { color: var(--ink-soft); }
.char-stats b { font: 800 28px/1.15 var(--font-bounty); color: var(--ink); }
.char-stats i { color: var(--ink-soft); }

/* Tiles: pockets, not rounded cards with coloured edges. */
.ffact, .tg, .mp, .howget article, .tchip, .explain-ex, .hx-body, .hx-prog, .hx-calc, .evrow, .evnav a, .sres, .stile, .howto li { border: 0; border-radius: 0; background: var(--surface); box-shadow: var(--shadow-pocket); }
.tg:hover, .stile:hover, .evrow:hover, .ffact:hover { border: 0; box-shadow: var(--shadow-sleeve); }
.ffact h3 { font: 400 20px/1.2 var(--font-display); }
.ffact .basis, .tg p { color: var(--ink-soft); }
.mp-art { background: var(--sunk); }
.mp-place { background: var(--seal-soft); color: var(--seal-deep); border-radius: var(--radius-cut); }
.mp-place.wall { background: var(--sunk); color: var(--ink); }
.howto li::before { background: var(--ink); color: var(--paper); border-radius: var(--radius-seal); }
.stile { border-top: 3px solid var(--ink); }
.stile h3 { font: 400 20px/1.2 var(--font-display); }
.stile-fan .thumb { border-radius: 0; box-shadow: none; }
.stile-empty { border-radius: 0; background: var(--sunk); }
.evrow-main b { color: var(--ink); }
.sres-card { border-radius: 0; }
.sres-card:hover { border-color: transparent; background: var(--sunk); }

/* Program kinds: a quiet categorical set for charts and filters. None of them is a meaning colour. */
.k-reg { --k: #4a5d7a; } .k-tc { --k: #8a6a3a; } .k-fin { --k: #18181d; } .k-fb { --k: #6f5a8a; }
.k-store { --k: #4f7262; } .k-spec { --k: #7a6a5d; } .k-camp { --k: #8a5a6f; }
:root[data-theme="dark"] .k-reg { --k: #9fb2d0; } :root[data-theme="dark"] .k-tc { --k: #d6b77f; } :root[data-theme="dark"] .k-fin { --k: #f0e7d6; }
:root[data-theme="dark"] .k-fb { --k: #c2acdf; } :root[data-theme="dark"] .k-store { --k: #9fc7b3; } :root[data-theme="dark"] .k-spec { --k: #c9b8a9; } :root[data-theme="dark"] .k-camp { --k: #dba9bf; }
.kchip { border: 1.5px solid var(--ink-soft); border-left: 1.5px solid var(--ink-soft); background: var(--surface); }
.kchip b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--k, var(--ink-soft)); vertical-align: 0; }
.kchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.kchip[aria-pressed="true"] b::before { box-shadow: 0 0 0 1.5px var(--paper); }
.kchip[aria-pressed="true"] span { color: var(--paper); opacity: .85; }
.kdot { border-radius: 0; }
.tl-scroll { border: 0; border-radius: 0; background: none; border-top: 1px solid var(--rule); padding: 12px 0; }
.tl-now { stroke: var(--supply); } .tl-nowt { fill: var(--supply); }
.lad-bar, .lad-bar.t2, .lad-bar.t1, .lad-bar.t4, .lad-bar.t8, .lad-bar.t16, .lad-bar.t32 { stroke-width: 1.5; }
.lad-bar { fill: var(--sunk); stroke: var(--ink-soft); }
.lad-bar.t1 { fill: var(--seal-deep); stroke: var(--seal-deep); }
.lad-bar.t2, .lad-bar.t4 { fill: var(--seal); stroke: var(--seal); }
.lad-bar.t8 { fill: var(--seal-soft); stroke: var(--seal); }
.lad-bar.t16 { fill: var(--surface); stroke: var(--seal); }
.lad-bar.t32 { fill: var(--surface); stroke: var(--ink-soft); stroke-dasharray: 4 3; }
.ladder svg .lad-bar.t1 ~ .lad-t, .ladder svg .lad-bar.t2 ~ .lad-t, .ladder svg .lad-bar.t4 ~ .lad-t { fill: #fff; }

/* Card page infobox: an ink-ruled reference slip, not a navy panel. */
.ibox { border: 0; border-top: 4px solid var(--ink); border-radius: 0; box-shadow: none; background: var(--surface); }
.ibox-title { background: none; color: var(--ink); padding: 12px 16px 4px; }
.ibox-title b { font: 400 20px/1.2 var(--font-display); }
.ibox-title .mono { color: var(--ink-soft); font-size: 13px; }
.ibox-t th[scope="row"] { background: none; color: var(--ink-soft); font-weight: 500; }
.ibox-t th, .ibox-t td { border-top: 1px solid var(--rule); }
.ibox-sec th { color: var(--ink-soft); background: var(--sunk); font: 700 12px/16px var(--font-body); letter-spacing: .12em; }
.ibox-foot { border-top: 1px solid var(--rule); }

/* Card history timeline: dots coloured by chapter (supply jade, price gold, graded indigo), square at the end. */
.hx-tl::before { background: var(--rule); }
.hx-dot { border-radius: var(--radius-seal); background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--rule), 0 0 0 5px var(--paper); }
.hx-first .hx-dot { background: var(--supply); color: #fff; box-shadow: 0 0 0 5px var(--paper); }
.hx-live .hx-dot { background: var(--supply); color: #fff; box-shadow: 0 0 0 3px var(--paper), 0 0 0 7px var(--supply-soft); }
.hx-last .hx-dot { background: var(--ink); color: var(--paper); border-radius: var(--radius-cut); box-shadow: 0 0 0 5px var(--paper); }
.hx-sale .hx-dot, .hx-peak .hx-dot { background: var(--price-soft); color: var(--price); box-shadow: 0 0 0 2px var(--price-fill), 0 0 0 5px var(--paper); }
.hx-grade .hx-dot { background: var(--graded-soft); color: var(--graded); box-shadow: 0 0 0 2px var(--graded), 0 0 0 5px var(--paper); }
:root[data-theme="dark"] .hx-first .hx-dot, :root[data-theme="dark"] .hx-live .hx-dot { color: var(--paper); }
.hx-first .hx-body, .hx-live .hx-body { border: 0; box-shadow: var(--shadow-pocket); }
.hx-body h3, .hx-h3 { font: 700 17px/24px var(--font-body); }
.hx-date, .hx-stops li .mono { font-family: var(--font-mono); }
.hx-prog > summary::before, .hx-calc > summary::before { color: var(--ink); }
.hx-stops li.ahead .mono::after { color: var(--supply); }
.hx-unknowns > div { border: 1.5px dashed var(--rule); border-radius: var(--radius-cut); }

/* Collector rating badge: ink outline, Mincho score. Trophy Card keeps its own mark. */
.grade, .grade.g-s, .grade.g-a, .grade.g-b, .grade.g-c { font: 700 12px/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-cut); box-shadow: none; }
.grade.g-trophy { font: 700 12px/1 var(--font-body); color: var(--paper); background: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.grade.g-none { border: 1.5px dotted var(--ink-soft); color: var(--ink-soft); background: var(--surface); font-style: italic; }
.grade.big { font: 400 18px/1 var(--font-display); border-width: 2px; border-radius: var(--radius-cut); }
.grade.big.g-trophy { font: 700 14px/1 var(--font-body); }
.grade.mini { border-width: 1px; border-radius: 2px; }
.fbar { border-radius: 0; height: 8px; }
.fbar i { background: var(--ink); }
.rating-t .plus { color: var(--ink-soft); }

/* Review controls */
.rv button { border-color: var(--ink-soft); color: var(--ink-soft); }
.rv button[aria-pressed="true"].bad { background: var(--conflict-soft); color: var(--conflict); border-color: var(--conflict); }
tr.rv-bad td, .stack tr.rv-bad { background: var(--conflict-soft); }

/* Citations: one source is a link, several fold into a ruled dropdown. */
.cites summary { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.cites-n { background: var(--graded-soft); color: var(--graded); border: 0; text-decoration: none; }
.cites ul { border: 1.5px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); }

/* Footer: the feature band with screentone, the seal again, data date. */
.foot { margin-top: 64px; border-top: 1px solid var(--ink); color: var(--on-band-soft); font-size: 14px; line-height: 22px; padding: 0; max-width: none; background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 48px 32px; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; max-width: 560px; min-width: 0; }
.foot-brand .pl-mark .word { color: var(--on-band); }
.foot-brand p { margin: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; }
.foot-nav a { color: var(--on-band); }
.foot-date { font: 500 13px/18px var(--font-mono); color: var(--on-band-soft); }

/* Small fixed controls */
.totop { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-print); }
.totop:focus-visible { outline: 2px solid var(--seal); }
.ftoggle { color: var(--ink); border: 1.5px solid var(--ink-soft); }
.ftoggle b { background: var(--ink); color: var(--paper); border-radius: var(--radius-cut); }

/* Phones: 16px gutter, binder two across stays a list of slips (the existing list layout), header wraps. */
@media (max-width: 960px) {
  .tabs a, .more-btn { margin: 0 6px; }
}
@media (max-width: 720px) {
  .wrap, .foot-in { padding-inline: 16px; }
  .pl-mark .word { font-size: 18px; }
  .strip > div:nth-child(2n) { border-right: 0; }
  .strip > div { border-bottom: 1px solid var(--rule); }
  .home-hero { padding: 32px 0 24px; }
}
@media (max-width: 640px) {
  .grid, .related { padding: 8px; gap: 8px; }
  .strip b { font-size: 26px; }
  .fact .v, .hx-strip b { font-size: 26px; }
  .stack tr { border: 0; border-radius: 0; box-shadow: var(--shadow-pocket); }
  .stack td::before { font: 700 11px/14px var(--font-body); letter-spacing: .1em; }
}
/* The wordmark is three letters, so it stays visible on phones. */
@media (prefers-reduced-motion: reduce) {
  .btn, .slip { transition: none; }
  .btn:hover, .btn:active, .slip:hover, .slip.group:hover { transform: none; }
}

/* ---------- Card page (redesign phase 3): hero with the answer line, 8 + 4 columns ---------- */
.cp-hero { display: flex; flex-wrap: wrap-reverse; gap: 24px 40px; align-items: flex-start; padding-top: 16px; }
.cp-id { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-title { margin: 4px 0 0; font: 400 clamp(30px, 4vw, 44px)/1.08 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cp-chips { align-items: center; }
.cp-num { font-size: 14px; margin-right: 6px; }
.cp-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.cp-answer .fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.cp-answer .pl-n.unk { font: italic 400 22px/28px var(--font-body); white-space: normal; }
.cp-answer .pl-n.xl b { font-size: 40px; }
.cp-answer .pl-n { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.cp-answer .pl-n .range { flex-basis: 100%; margin: 16px 0 0; }
.cp-answer .lbl { font: 400 14px/20px var(--font-body); color: var(--ink-soft); }
.cp-id > .note { margin: 0; max-width: 62ch; }
.cp-src .pl-source { max-width: 100%; }
.cp-art { flex: 1 1 220px; max-width: 300px; min-width: 180px; margin: 0 auto; }
.cp-art .art { box-shadow: var(--shadow-sleeve); }
.cp-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cp-main { flex: 999 1 620px; min-width: 0; }
.cp-margin { flex: 1 1 280px; min-width: 0; margin-top: 48px; border-left: 1px solid var(--rule); padding-left: 24px; display: flex; flex-direction: column; gap: 14px; }
.cp-margin .ibox { width: 100%; max-width: none; }
.cp-margin .pl-slab { min-width: 0; width: 100%; }
.cp-margin > .note { margin: 0; font-size: 14px; line-height: 21px; }
.cp-margin > .eyebrow { margin-top: 10px; }
.cp-sec > h2 small, .cp-sec .sgroup-head h2 small { display: block; font: 700 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.cp-sec h2 small .jp { color: var(--ink); letter-spacing: .04em; margin-right: 6px; }
.cp-sec .note { margin: 0; max-width: 62ch; font-size: 14px; line-height: 21px; }
.cp-ledger .tot td { font-weight: 700; border-bottom: 0; }
.cp-ledger .tot .sub { font-weight: 400; font-size: 13px; }
.cp-ledger .pl-code [data-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.cp-srcg { display: grid; gap: 6px; }
.cp-srcs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cp-srcs .pl-source { max-width: 100%; height: auto; min-height: 28px; padding: 4px 8px; line-height: 16px; }
.cp-srcs .pl-source { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.cp-srcs .pl-source .what { white-space: normal; flex-basis: 100%; padding-left: 14px; font-weight: 400; }
.pl-slab .grade { height: auto; min-width: 0; border-radius: 0; box-shadow: none; cursor: default; font: 800 28px/1 var(--font-bounty); padding: 8px 12px; display: grid; place-items: center; background: var(--graded); color: var(--surface); }
.ibox-t th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .cp-margin { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 32px; }
  .cp-answer { display: grid; gap: 10px; }
  .cp-answer .pl-n.xl b { font-size: 32px; }
  .cp-art { max-width: 160px; min-width: 0; margin: 0; }
}

/* Season page (phase 3): identity, Grand Line track by events held, season supply on one scale. */
.cp-season-id { padding-top: 16px; }
.cp-track { max-width: none; margin-top: 8px; }
.cp-track-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.season .cp-track { margin-top: 4px; }
.cp-ss-list { display: flex; flex-direction: column; gap: 18px; }
.cp-ss { gap: 6px; }
.cp-ss .track { height: 14px; }
.cp-ss-top { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; }
.cp-ss-top > a { text-decoration: none; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cp-ss-top > a:hover b { text-decoration: underline; }
.cp-ss-top .pl-n { margin-left: auto; white-space: normal; }
.cp-ss-top .pl-n .sub { font-size: 13px; }
.cp-srcg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cp-srcg-row .cp-srcs .pl-source { max-width: 100%; height: auto; min-height: 28px; padding: 4px 8px; line-height: 16px; flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.cp-srcg-row .cp-srcs .pl-source .what { white-space: normal; flex-basis: 100%; padding-left: 14px; font-weight: 400; }

/* Browse (phase 3): the "What we know" facet. */
.know-chips { align-items: center; margin-top: 8px; }
.know-chips .eyebrow { margin-right: 4px; }

/* Character page (phase 3): answer line, region chips and sort, records margin. */
.cp-answer-open { border-bottom: 0; }
.ch-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ch-sort { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.ch-divider { margin: 8px 0 0; padding-top: 10px; border-top: 1px dashed var(--ink-soft); font-size: 14px; color: var(--ink-soft); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv.stack { grid-template-columns: 1fr; gap: 2px; }
.kv.stack dt { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

/* Characters index (Oct 2026): drifting card-art backdrop, finder, ranked tiles with a fan that spreads on hover. */
.cx-hero { position: relative; overflow: hidden; margin: 8px 0 0; border-top: 4px solid var(--ink); background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; isolation: isolate; }
.cx-drift { position: absolute; inset: -40px -10% -40px 34%; display: flex; flex-direction: column; justify-content: center; gap: 14px; transform: rotate(-7deg); z-index: 0; }
.cx-lane { overflow: hidden; }
.cx-track { display: flex; gap: 12px; width: max-content; }
.cx-track img { width: 92px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; box-shadow: 0 6px 14px rgba(0, 0, 0, .22); background: var(--sunk); }
.cx-hero.moving .cx-track { animation: cx-drift var(--dur, 120s) linear infinite; will-change: transform; }
.cx-hero.moving .cx-lane.rev .cx-track { animation-direction: reverse; }
.cx-hero.paused .cx-track { animation-play-state: paused; }
@keyframes cx-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cx-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--band) 0%, var(--band) 42%, color-mix(in srgb, var(--band) 55%, transparent) 62%, transparent 85%); }
.cx-hero-in { position: relative; z-index: 2; max-width: 520px; padding: 36px 28px 30px; }
.cx-hero-in h1 { margin: 6px 0 6px; font-family: var(--font-display); line-height: 1.1; color: var(--on-band); }
.cx-hero-in .lede { color: var(--on-band-soft); margin: 0 0 18px; }
.cx-hero .eyebrow { color: var(--on-band-soft); }
.cx-find { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-find input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: var(--radius-cut); background: var(--surface); color: var(--ink); }
.cx-dice { box-shadow: var(--shadow-print); border-radius: var(--radius-cut); transition: transform .12s var(--ease-settle), box-shadow .12s; }
.cx-dice:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cx-dice:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cx-dice:disabled { cursor: progress; }
.cx-roll { min-height: 1.6em; margin: 12px 0 0; font-size: var(--fs-sub); font-weight: 600; color: var(--on-band); overflow-wrap: anywhere; }
.cx-roll b { color: var(--seal-deep); }
:root[data-theme="dark"] .cx-roll b { color: var(--seal); }
.cx-flick { display: inline-block; animation: cx-flick .09s ease-out; }
.cx-roll.landed b { display: inline-block; animation: cx-land .35s var(--ease-settle); }
@keyframes cx-flick { from { opacity: .3; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cx-land { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.cx-credit { margin: 6px 0 0; text-align: right; }
.cx-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cx-tools .chips { margin: 0; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.cx-tile { position: relative; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-pocket); transition: box-shadow .2s, transform .2s var(--ease-settle); }
.cx-tile:hover, .cx-tile:focus-visible { box-shadow: var(--shadow-sleeve); transform: translateY(-3px); }
.cx-rank { position: absolute; top: 8px; left: 8px; z-index: 4; font: 700 13px/1 var(--font-mono); padding: 4px 7px; border-radius: var(--radius-cut); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.cx-rank.top { background: var(--ink); color: var(--paper); box-shadow: none; }
.cx-fan { position: relative; height: 168px; background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; overflow: hidden; }
.cx-fan .art { position: absolute; left: 50%; top: 18px; width: 92px; margin-left: -46px; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); transition: transform .35s var(--ease-settle); }
.cx-fan .art:nth-child(1) { z-index: 3; }
.cx-fan .art:nth-child(2) { z-index: 2; transform: translateX(-30px) rotate(-9deg); }
.cx-fan .art:nth-child(3) { z-index: 1; transform: translateX(30px) rotate(9deg); }
.cx-fan.n2 .art:nth-child(1) { transform: translateX(14px) rotate(4deg); }
.cx-fan.n2 .art:nth-child(2) { transform: translateX(-16px) rotate(-6deg); }
.cx-tile:hover .cx-fan .art:nth-child(1), .cx-tile:focus-visible .cx-fan .art:nth-child(1) { transform: translateY(-8px) scale(1.05); }
.cx-tile:hover .cx-fan .art:nth-child(2), .cx-tile:focus-visible .cx-fan .art:nth-child(2) { transform: translateX(-50px) rotate(-15deg); }
.cx-tile:hover .cx-fan .art:nth-child(3), .cx-tile:focus-visible .cx-fan .art:nth-child(3) { transform: translateX(50px) rotate(15deg); }
.cx-tile:hover .cx-fan.n2 .art:nth-child(1), .cx-tile:focus-visible .cx-fan.n2 .art:nth-child(1) { transform: translate(26px, -6px) rotate(8deg); }
.cx-tile:hover .cx-fan.n2 .art:nth-child(2), .cx-tile:focus-visible .cx-fan.n2 .art:nth-child(2) { transform: translateX(-28px) rotate(-10deg); }
.cx-tile:hover .cx-fan .art::after { background-position: -20% 0; }
.cx-noart { position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px/1 var(--font-display); color: var(--on-band-soft); }
.cx-info { padding: 12px 14px 14px; min-width: 0; }
.cx-info h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.cx-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 14px; color: var(--ink-soft); }
.cx-stats b { color: var(--ink); font-weight: 700; }
.cx-sub { margin: 6px 0 0; font-size: var(--fs-foot); color: var(--ink-soft); overflow-wrap: anywhere; }
.cx-sub .tier { margin-left: 4px; }
.cx-grid.reveal .cx-tile:not(.in) { opacity: 0; transform: translateY(16px); }
.cx-grid.reveal .cx-tile.in { transition: opacity .45s ease-out calc(var(--d) * 45ms), transform .45s var(--ease-settle) calc(var(--d) * 45ms), box-shadow .2s; }
.cx-grid.reveal .cx-tile.in:hover { transition-delay: 0s; }
.cx-more { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 720px) {
  .cx-drift { position: relative; inset: auto; height: 150px; margin: -10px -20px 0; gap: 10px; }
  .cx-track img { width: 64px; }
  .cx-hero::after { background: linear-gradient(180deg, transparent 0, transparent 110px, var(--band) 150px); }
  .cx-hero-in { max-width: none; padding: 8px 16px 22px; }
  .cx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cx-fan { height: 140px; }
  .cx-fan .art { width: 74px; margin-left: -37px; top: 14px; }
  .cx-credit { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-track, .cx-flick, .cx-roll.landed b { animation: none !important; }
  .cx-tile, .cx-fan .art, .cx-dice { transition: none; }
  .cx-tile:hover, .cx-tile:focus-visible { transform: none; }
}

.sres-fig { margin-top: 2px; }
.sres-fig .pl-n { font-size: 14px; line-height: 20px; white-space: normal; }

/* =====================================================================
   v3: information design (Oct 2026). One type scale, tables built around the question each one answers,
   one certainty rule. Last in the sheet on purpose: it settles the earlier layers.
   ===================================================================== */
:root {
  /* Type scale: about 1.2 between steps from a 16px body. Every text element maps to one role below. */
  --fs-title: clamp(28px, 4vw, 40px);   /* Title: Dela Gothic One, page h1 */
  --fs-section: 23px;                   /* Section: Dela Gothic One, h2 */
  --fs-sub: 19px;                       /* Subsection: Plex Sans 600, h3 */
  --fs-figure: 28px;                    /* Figure: Plex Sans 600, a headline number */
  --fs-body: 16px;                      /* Body: Plex Sans 400 */
  --fs-cell: 15px;                      /* Table cell: Plex Sans 400 */
  --fs-label: 13px;                     /* Table header and figure label: Plex Sans 600, sentence case */
  --fs-foot: 13px;                      /* Footnote, sub-line, caption: Plex Sans 400, ink-soft */
  --fs-micro: 12px;                     /* Floor: badges and chips. Nothing on the site is set smaller. */
}
body { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; text-rendering: optimizeLegibility; }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-section); line-height: 1.2; }
h3 { font-family: var(--font-body); font-size: var(--fs-sub); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.sub, .note, .fine, td .sub, .fact .s, .strip span { font-size: var(--fs-foot); line-height: 1.45; }

/* Figures: the big numbers in fact rows and summary strips. Same face as the tables so a number reads the same everywhere. */
.fact .v, .strip b, .pl-strip b, .hx-strip b, .char-stats b { font: 600 var(--fs-figure)/1.1 var(--font-bounty); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.fact .v.pend { font: italic 400 var(--fs-body)/1.4 var(--font-body); }
.fact > .eyebrow, .strip span, .sp-figs dt, .sp-vers dt, .stile-stats dt, .slip-foot span, .kv.stack dt, .field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; text-transform: none; }
.pl-n.xl, .pl-bounty .amt { font-family: var(--font-bounty); font-weight: 600; }
.pl-slab .grade, .pl-rating .score, .pl-rbadge .sc, .chase-rank, .pl-ledger .rank, .rank li > .n, .rank li:nth-child(-n+3) > .n { font-family: var(--font-bounty); font-weight: 700; }
.pl-cert, .pill, .vtag, .pl-cert::before { font-size: var(--fs-micro); }
th .info-btn { font-size: var(--fs-micro); }

/* Tables. Headers: short, sentence case, aligned with their data, one strong rule under them.
   Cells: tabular figures, numbers right-aligned, quiet rules. The column that answers the table's question (.key) carries the weight. */
table, .pl-ledger { font: 400 var(--fs-cell)/1.4 var(--font-body); font-variant-numeric: lining-nums tabular-nums; }
th, .pl-ledger th { font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); background: none; vertical-align: bottom; padding: 8px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
td, .pl-ledger td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th.r, td.r, th.num, td.num, .pl-ledger .num { text-align: right; }
th .unit { font-weight: 400; }
td.key, td.key b, td.key a { font-weight: 600; color: var(--ink); }
td.key .sub { font-weight: 400; }
td.r.key { font-size: 16px; }
@media (min-width: 641px) { tbody tr:last-child td { border-bottom: 1px solid var(--rule); } }
@media (hover: hover) and (min-width: 641px) { tbody tr:hover > td { background: var(--sunk); } }
.ibox-t th, .ibox-t td { border-bottom: 0; }
.ibox-t th[scope="row"] { font: 500 14px/20px var(--font-body); color: var(--ink-soft); vertical-align: top; white-space: normal; border-bottom: 0; }
.ibox-sec th { border-bottom: 0; }
.ibox-t tbody tr:hover > td { background: none; }
.cp-ledger .tot td { border-top: 2px solid var(--ink); border-bottom: 0; }
.pl-n.unk { white-space: normal; }
.tkey { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; font-size: var(--fs-foot); color: var(--ink-soft); }
.tkey .pl-cert { cursor: help; }

/* Phones: tables already stack into labelled records (enhanceTables, "Tables" in the phone styles).
   v3 only brings their labels onto the same scale: sentence case, label size, no letterspacing. */
@media (max-width: 640px) {
  .stack td::before { font: 600 var(--fs-label)/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
  .stack tr { grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); }
  .stack td, .stack td.r, .stack td.num { text-align: left; overflow-wrap: normal; hyphens: auto; }
  .stack td:first-child::before { content: none; }
  .stack table td { width: auto; border: 0; padding: 0; }
  .stack td.key { font-size: 16px; }
  .stack .pl-n { white-space: normal; }
}

/* Certainty: one rule, the same mark everywhere a figure or its source appears.
   ◆ From Bandai · ◇ Secondary (any other source) · ≈ Estimate (≤ when it is an upper bound) · ○ Private sale. */
.pl-cert.priv { color: var(--caution); } .pl-cert.priv::before { content: "○"; font-weight: 700; }
.pl-cert.sec { color: var(--conf-low); border-style: dashed; } .pl-cert.sec::before { content: "◇"; }
.foot-key { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 0; font-size: var(--fs-foot); }

/* Small fixes found by the accessibility run: links inside text are underlined, not told apart by colour alone. */
.crumb a, .lede a, .note a, .block > p a, .callout a { text-decoration: underline; text-underline-offset: 2px; }

/* About: one page for the about, method and sources. */
.ab-jump { margin: 14px 0 4px; }
.ab-jump .chip { text-decoration: none; }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 16px 0 12px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 900px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ab-grid { grid-template-columns: minmax(0, 1fr); } }
.ab-m { background: var(--surface); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.ab-m h3 { margin: 0; font-size: var(--fs-sub); }
.ab-m p { margin: 0; }
.ab-m code { white-space: normal; overflow-wrap: anywhere; }
.ab-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-more, .ab-src { border-top: 1px solid var(--rule); padding: 10px 0; }
.ab-more:last-child, .ab-src:last-child { border-bottom: 1px solid var(--rule); }
.ab-more > summary, .ab-src > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.ab-more[open] > summary, .ab-src[open] > summary { margin-bottom: 10px; }
.ab-n { font: 600 12px/1 var(--font-mono); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: var(--radius-cut); padding: 3px 6px; }
.ab-src .srcs li { min-width: 0; overflow-wrap: anywhere; }
#ab-about, #ab-method, #ab-sources { scroll-margin-top: 96px; }

/* Promos */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 8px 0 4px; }
.pr-hero h1 { margin: 6px 0 0; }
.pr-pull { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pull-card { flex: none; width: 150px; aspect-ratio: 63 / 88; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; border-radius: 9px; }
.pull-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pull-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s var(--ease-settle); transform-style: preserve-3d; }
.pull-card.flipped .pull-inner { transform: rotateY(180deg); }
.pull-card:not(.flipped):hover .pull-inner { transform: rotateY(-12deg) translateY(-4px); }
.pull-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 9px; overflow: hidden; }
.pull-back { display: flex; align-items: center; justify-content: center; background: var(--night); background-image: radial-gradient(#2a3b4b 1px, transparent 1.3px); background-size: 6px 6px; box-shadow: var(--shadow-sleeve); }
.pull-front { transform: rotateY(180deg); }
.pull-front .art { width: 100%; height: 100%; }
.pr-seal { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--seal); color: #ffffff; border-radius: var(--radius-cut); transform: rotate(-3deg); }
.pr-seal span { display: block; font: 400 20px/1.05 var(--font-display); }
.pull-cap { display: flex; flex-direction: column; gap: 3px; max-width: 180px; min-width: 0; overflow-wrap: anywhere; }
.pull-cap b a { text-decoration: underline; text-underline-offset: 2px; }
.pr-strip b { font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  .pr-hero { grid-template-columns: minmax(0, 1fr); }
  .pull-card { width: 120px; }
}

/* Sections rise in as they scroll into view. */
.pr-rv { opacity: 0; transform: translateY(14px); transition: opacity .45s ease-out, transform .45s var(--ease-settle); }
.pr-rv.in { opacity: 1; transform: none; }

/* On now and coming up */
.pr-now { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.pr-now li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pn-when { display: flex; flex-direction: column; min-width: 0; }
.pn-when b { font-variant-numeric: tabular-nums; }
.pr-now li.live .pn-when b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--supply); vertical-align: 1px; }
.pn-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.pn-what > a { font-weight: 600; }
.pn-what .cites { display: inline-block; }
.pl-cert.pn-all { align-self: flex-start; color: var(--supply); background: var(--supply-soft); border-color: var(--supply); }
.pn-cards { display: flex; }
.pn-cards a { width: 44px; transition: transform .2s ease; }
.pn-cards a + a { margin-left: -16px; }
.pn-cards a:hover { transform: translateY(-6px); z-index: 1; }
.pn-cards .art.ph > span { display: none; }
@media (max-width: 680px) {
  .pr-now li { grid-template-columns: minmax(0, 1fr); }
}

/* Ways to get one */
.pr-ways { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px 32px; margin-top: 14px; align-items: start; }
.pr-way-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-way { font: inherit; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-cut); background: transparent; color: var(--ink); cursor: pointer; transition: transform .15s ease; }
.pr-way:hover { border-color: var(--rule); transform: translateX(3px); }
.pr-way[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pw-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pw-n { font: 600 14px/1 var(--font-mono); }
.pw-bar { grid-column: 1 / -1; height: 4px; background: var(--sunk); overflow: hidden; }
.pw-bar i { display: block; height: 100%; background: var(--supply); transform-origin: left; transform: scaleX(var(--w)); transition: transform .7s var(--ease-settle); }
.pr-way[aria-pressed="true"] .pw-bar { background: rgba(127, 127, 127, .35); }
.pr-way[aria-pressed="true"] .pw-bar i { background: var(--paper); }
.pr-rv:not(.in) .pw-bar i { transform: scaleX(0); }
.pr-way-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px 24px; align-items: center; min-width: 0; }
.pwd-text { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.pwd-text h3 { margin: 0; font-size: var(--fs-sub); }
.pwd-text p { margin: 0; }
.pwd-fan { height: 220px; }
.pr-way-detail .pwd-fan a { width: 46%; }
.pwd-fan a { width: 52%; }
.pwd-fan.n1 a { transform: translate(-50%, -50%); }
.pwd-fan.n2 a:nth-child(1) { transform: translate(-84%, -50%) rotate(-6deg); }
.pwd-fan.n2 a:nth-child(2) { transform: translate(-16%, -50%) rotate(6deg); }
@media (max-width: 900px) {
  .pr-ways, .pr-way-detail { grid-template-columns: minmax(0, 1fr); }
  .pwd-fan { height: 200px; max-width: 300px; width: 100%; }
}

/* Tidbits */
.pr-facts { margin-top: 14px; }
.pf-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px 24px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-print); max-width: 760px; }
.pf-art { display: block; width: 120px; }
.pf-blank { aspect-ratio: 63 / 88; display: flex; align-items: center; justify-content: center; background: var(--sunk); border-radius: 9px; }
.pf-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pf-body p { margin: 0; }
.pf-h { font-size: var(--fs-sub); font-weight: 600; line-height: 1.35; }
.pf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
@media (max-width: 560px) {
  .pf-card { grid-template-columns: 84px minmax(0, 1fr); padding: 14px; }
  .pf-art { width: 84px; }
}

/* By year */
.pg-tour { fill: var(--supply-earlier); } .pg-casual { fill: var(--supply-fresh); } .pg-buy { fill: var(--price-fill); } .pg-give { fill: var(--seal); }
.cf i.pg-tour { background: var(--supply-earlier); } .cf i.pg-casual { background: var(--supply-fresh); } .cf i.pg-buy { background: var(--price-fill); } .cf i.pg-give { background: var(--seal); }
.pr-bar { stroke: var(--paper); stroke-width: 1.5; transform-box: fill-box; transform-origin: bottom; }
.pr-rv.in .pr-bar { animation: pr-grow .6s var(--ease-settle) both; animation-delay: var(--d, 0ms); }
@keyframes pr-grow { from { transform: scaleY(0); } }
.pr-col { cursor: pointer; }
.pr-col:hover .pr-bar, .pr-col:focus-visible .pr-bar { opacity: .82; }
.pr-col:focus-visible { outline: 2px solid var(--ink); }

/* Every promo */
.pr-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 12px 0 16px; }
.pr-controls label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); font-weight: 600; color: var(--ink-soft); min-width: 0; max-width: 100%; }
.pr-controls select { max-width: 100%; }
.pr-controls .count { margin-left: auto; font-size: 14px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .pr-rv { opacity: 1; transform: none; transition: none; }
  .pr-rv:not(.in) .pw-bar i { transform: scaleX(var(--w)); }
  .pull-inner, .pw-bar i, .pr-way, .pn-cards a { transition: none; }
  .pr-rv.in .pr-bar { animation: none; }
  .pull-card:not(.flipped):hover .pull-inner { transform: none; }
}

/* ---------- Market: the wire, news blocks with card art, the Show Floor Kit ----------
   David asked for blocks back on this page (2026-10-16), so its panels are ink-framed boxes with a header band. */
.mkt section.block > h2 small, .su-page > h2 small { display: block; font: 700 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.mkt section.block > h2 small .jp, .su-page > h2 small .jp { color: var(--ink); letter-spacing: .04em; margin-right: 6px; }
.mk-asof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 16px; font-size: var(--fs-foot); color: var(--ink-soft); }
.mk-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--supply); margin-right: -6px; animation: mk-pulse 2s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: .35; } }
.mk-jump, .mk-btn { font: 700 15px/20px var(--font-body); color: #18181d; background: var(--price-fill); border: 2px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); padding: 8px 14px; cursor: pointer; transition: transform .15s; max-width: 100%; white-space: normal; text-align: left; }
.mk-jump:hover, .mk-btn:hover { transform: translate(-1px, -1px); }
.mk-jump:active, .mk-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.mk-filt .mk-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.mk-sales { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 220px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 6px 18px 4px; margin-top: 8px; overscroll-behavior-x: contain; }
.mk-sale { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); transition: transform .2s var(--ease-settle); }
.mk-sale:hover { transform: translateY(-3px); }
.mk-sale-art { display: flex; justify-content: center; padding: 16px 12px 12px; background: var(--sunk); border-bottom: 1.5px solid var(--ink); }
.mk-sale-art .art { width: 118px; }
.mk-no { position: absolute; top: 8px; left: 8px; min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 6px; font: 700 15px/1 var(--font-bounty); color: var(--paper); background: var(--ink); border-radius: var(--radius-cut); z-index: 3; }
.mk-sale:first-child .mk-no { background: var(--price-fill); color: #18181d; border: 1.5px solid var(--ink); }
.mk-sale-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.mk-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mk-price { font: 700 24px/1.1 var(--font-bounty); color: var(--price); }
.mk-grade { font: 700 12px/16px var(--font-body); color: var(--surface); background: var(--graded); border-radius: var(--radius-cut); padding: 1px 6px; overflow-wrap: anywhere; }
.mk-name { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mk-name:hover { text-decoration: underline; }
.mk-sale-body .sub { overflow-wrap: anywhere; }
.mk-src { margin-top: 4px; align-self: flex-start; text-decoration: none; max-width: 100%; }
.mk-src .pl-cert { max-width: 100%; white-space: normal; height: auto; min-height: 22px; line-height: 1.3; }
.mk-news { margin-top: 32px; }
.mkt .stat-grid > .mk-box, .mkt .mk-box { gap: 0; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); overflow: hidden; }
.mkt .stat-grid > .mk-box > h3 { display: flex; align-items: center; gap: 4px; margin: 0; padding: 9px 12px; font: 700 16px/22px var(--font-body); color: var(--paper); background: var(--ink); box-shadow: inset 0 -3px 0 var(--price-fill); border-radius: 0; }
.mk-box > h3 .info-btn { color: var(--paper); border-color: var(--paper); background: transparent; }
.mk-box > .chips, .mk-box > div > .chips { padding: 10px 12px 0; margin: 0; }
.mk-box .callout { margin: 12px; }
.mk-box .chart { padding: 12px; }
.mk-box .rank { border-top: 0; }
.mkt .rank li { padding: 9px 12px; align-items: center; }
.mkt .rank li:last-child { border-bottom: 0; }
.mkt .rank .thumb { width: 40px; }
.mkt .rank li:nth-child(-n+3) > .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; color: #18181d; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.mkt .rank li:nth-child(1) > .n { background: linear-gradient(145deg, #fbe29a, #d9a520 60%, #b8860b); }
.mkt .rank li:nth-child(2) > .n { background: linear-gradient(145deg, #f4f6f8, #b9c1ca 60%, #98a2ad); }
.mkt .rank li:nth-child(3) > .n { background: linear-gradient(145deg, #f6c9a2, #c27d45 60%, #9c5f2e); }
.mkt .rank li:nth-child(1):has(> .n) { background: linear-gradient(90deg, rgb(217 165 32 / .14), transparent 70%); }
.mk-moves .mk-pair { display: block; font-size: 14px; overflow-wrap: anywhere; white-space: normal; }
.mk-moves .mk-pair a { color: var(--ink); }
.mk-chg { font: 700 16px/1 var(--font-bounty); cursor: help; }
.mk-moves .up .mk-chg { color: var(--supply); } .mk-moves .down .mk-chg { color: var(--seal); }
.mk-kit-box { margin-top: 12px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-cut); box-shadow: var(--shadow-print); padding: 16px; min-width: 0; }
.kit-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kit-tab { font: 700 15px/20px var(--font-body); padding: 9px 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-cut); cursor: pointer; }
.kit-tab[aria-selected="true"] { color: var(--paper); background: var(--ink); }
.kp { position: relative; min-width: 0; }
.kp-l, .mk-ask-l { display: block; font: 700 15px/20px var(--font-body); margin: 0 0 6px; }
.kp input { width: 100%; font: 400 16px/22px var(--font-body); padding: 11px 12px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-cut); }
.kp-list { list-style: none; margin: 4px 0 0; padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius-cut); background: var(--surface); max-height: 340px; overflow-y: auto; position: relative; z-index: 5; }
.kp-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--rule); min-width: 0; }
.kp-list li:last-child { border-bottom: 0; }
.kp-list li[aria-selected="true"], .kp-list li:hover { background: var(--sunk); }
.kp-list .thumb { width: 34px; }
.kp-list .who { flex: 1; }
.kp-list .who .sub { white-space: normal; overflow-wrap: anywhere; }
.kp-list .cnt, .chip .cnt { margin-left: 6px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.chip[aria-pressed="true"] .cnt { color: inherit; opacity: .8; }
.mk-hint { color: var(--ink-soft); font-style: italic; margin: 10px 0 0; }
.kc { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; min-width: 0; }
.kc-art { width: 96px; flex: none; }
.kc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kc-name { font: 400 20px/1.2 var(--font-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mk-link { font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; text-align: left; }
.mk-ask-l { margin-top: 6px; }
.mk-ask-in { width: min(100%, 260px); font: 700 26px/1.2 var(--font-bounty); padding: 8px 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-cut); }
#k-out { margin-top: 14px; }
.mk-verdict { display: flex; align-items: center; gap: 18px; margin: 4px 0 10px; padding: 12px 14px; background: var(--sunk); border-radius: var(--radius-cut); --vc: var(--graded); }
.mk-verdict.steal, .mk-verdict.good { --vc: var(--supply); } .mk-verdict.high, .mk-verdict.over { --vc: var(--seal); }
.mk-stamp { flex: none; width: 74px; height: 74px; display: grid; place-items: center; color: var(--vc); border: 3px double var(--vc); border-radius: var(--radius-cut); transform: rotate(-6deg); animation: mk-stamp .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.mk-stamp span { font: 400 22px/1 var(--font-display); writing-mode: vertical-rl; }
@keyframes mk-stamp { from { opacity: 0; transform: scale(1.6) rotate(-14deg); } to { opacity: 1; transform: rotate(-6deg); } }
.mk-verdict b { display: block; font: 400 24px/1.15 var(--font-display); color: var(--vc); }
.mk-verdict p { margin: 4px 0 0; font-size: 15px; }
.mk-strip { display: block; width: 100%; height: auto; max-height: 120px; margin: 6px 0 4px; overflow: visible; }
.mk-axis { stroke: var(--rule); stroke-width: 2; } .mk-band { fill: var(--price-soft); } .mk-dot { fill: var(--ink-soft); }
.mk-med { stroke: var(--price); stroke-width: 3; } .mk-ask path { fill: var(--seal); } .mk-ask text { fill: var(--ink); font: 700 13px var(--font-body); }
.mk-ax { fill: var(--ink-soft); font: 400 12px var(--font-body); }
.mk-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px 16px; margin: 10px 0; }
.mk-kv div { min-width: 0; border-top: 2px solid var(--ink); padding-top: 6px; }
.mk-kv dt { font: 600 var(--fs-label)/1.3 var(--font-body); color: var(--ink-soft); }
.mk-kv dd { margin: 2px 0 0; display: flex; flex-direction: column; min-width: 0; }
.mk-kv dd b { font: 700 18px/1.3 var(--font-bounty); overflow-wrap: anywhere; } .mk-kv dd b a { color: var(--ink); }
.mk-kv dd span { font-size: var(--fs-foot); color: var(--ink-soft); }
.mk-pips { display: inline-flex; gap: 3px; vertical-align: 1px; } .mk-pips i { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; } .mk-pips i.on { background: var(--ink); }
.mk-facts { margin: 8px 0; padding-left: 20px; font-size: 15px; } .mk-facts li { margin: 3px 0; }
.mk-gm { margin: 14px 0; padding: 12px 14px; border: 1.5px dashed var(--ink-soft); border-radius: var(--radius-cut); }
.mk-gm p { margin: 6px 0; font-size: 15px; }
.mk-gm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-gm-call { font-weight: 700; } .mk-gm-call.good { color: var(--supply); } .mk-gm-call.fair { color: var(--graded); } .mk-gm-call.high { color: var(--seal); }
.mk-fee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 600; margin-top: 8px; }
.mk-fee input { width: 120px; font: 600 15px/20px var(--font-body); padding: 6px 8px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink-soft); border-radius: var(--radius-cut); }
.mk-last { margin: 10px 0 14px; } .mk-last summary { cursor: pointer; font-weight: 600; }
.mk-last ol { list-style: none; padding: 0; margin: 8px 0 0; } .mk-last li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; } .mk-last li a { color: var(--ink); }
.mk-stack { margin-top: 22px; padding-top: 12px; border-top: 2px solid var(--ink); }
.mk-stack ol, .kt-items { list-style: none; padding: 0; margin: 8px 0; }
.mk-stack li, .kt-items li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.mk-stack .thumb, .kt-items .thumb { width: 36px; }
.mk-stack .who, .kt-items .who { flex: 1; } .mk-stack .who .mk-link { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; white-space: normal; }
.mk-stack .v, .kt-items .v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-weight: 600; white-space: nowrap; }
.mk-x { flex: none; width: 32px; height: 32px; font-size: 18px; line-height: 1; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: var(--radius-cut); cursor: pointer; }
.mk-tot { font-size: 15px; font-weight: 600; margin: 8px 0; }
.kt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.kt-side { min-width: 0; }
.kt-items select { margin-top: 4px; max-width: 100%; font: 500 14px/18px var(--font-body); padding: 4px 6px; color: var(--ink); background: var(--surface); border: 1px solid var(--ink-soft); }
.kt-mid { position: sticky; top: 90px; text-align: center; }
.kt-svg { width: 100%; height: auto; overflow: visible; }
.kt-post { fill: var(--ink-soft); } .kt-pin { fill: var(--price-fill); stroke: var(--ink); stroke-width: 2; }
.kt-beam { transform-origin: 160px 46px; transition: transform .7s var(--ease-settle); } .kt-beam rect { fill: var(--ink); }
.kt-pan { transition: transform .7s var(--ease-settle); } .kt-pan path { fill: var(--price-fill); stroke: var(--ink); stroke-width: 1.5; } .kt-pan line { stroke: var(--ink-soft); stroke-width: 1.5; }
.kt-v { fill: var(--ink); font: 700 15px var(--font-body); } .kt-l { fill: var(--ink-soft); font: 400 12px var(--font-body); }
.kt-msg { font-size: 15px; margin: 4px 0 0; }
@media (max-width: 900px) { .kt-grid { grid-template-columns: minmax(0, 1fr); } .kt-mid { position: static; order: 3; max-width: 360px; margin: 0 auto; } .kt-side:last-child { order: 2; } }
@media (max-width: 640px) {
  .mk-sales { grid-auto-columns: minmax(172px, 186px); gap: 12px; }
  .mk-sale-art .art { width: 100px; }
  .mk-kit-box { padding: 12px; }
  .mk-verdict { gap: 12px; padding: 10px; } .mk-stamp { width: 60px; height: 60px; } .mk-stamp span { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .mk-live, .mk-stamp { animation: none; } .mk-sale, .kt-beam, .kt-pan, .mk-jump, .mk-btn { transition: none; } .mk-sale:hover { transform: none; } }

/* ---------- Home polish (Oct 2026): dealt hero fan, tournament road, season flow, market pulse blocks ---------- */
.fan-wrap { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.fan-cap { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.fan-cap a { color: var(--ink); text-underline-offset: 3px; }
.fan-cap .mono { font-size: 13px; color: var(--ink-soft); }
.fan-foot .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-print); }
.fan.dealt a .art { animation: deal-in .42s var(--ease-settle) both; }
.fan.dealt a:nth-child(2) .art { animation-delay: .07s; }
.fan.dealt a:nth-child(3) .art { animation-delay: .14s; }
@keyframes deal-in { from { opacity: 0; transform: translateY(-28px) rotate(-8deg) scale(.92); } }

.road { position: relative; margin: 8px 0 28px; padding: 20px 20px 16px; background-color: var(--band); background-image: radial-gradient(var(--tone-dot) 1.2px, transparent 1.6px); background-size: 6px 6px; border-top: 4px solid var(--ink); color: var(--on-band); overflow: hidden; }
.road-head { max-width: 62ch; }
.road-head .eyebrow { color: var(--on-band-soft); }
.road-head h3 { font: 400 clamp(20px, 2.6vw, 26px)/1.2 var(--font-display); margin: 4px 0 6px; color: var(--on-band); }
.road-head .sub { color: var(--on-band-soft); margin: 0; }
.road-stops { list-style: none; margin: 20px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.road-stops::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; border-top: 2px dashed var(--on-band-soft); }
.road-stops li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.road-stops b { font-size: 15px; line-height: 20px; margin-top: 8px; overflow-wrap: anywhere; }
.road-stops .sub { color: var(--on-band-soft); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.road-stack { position: relative; width: 66px; height: 92px; }
.road-stack .art { position: absolute; inset: 0; width: 66px; box-shadow: 0 4px 10px rgba(0, 0, 0, .22); background: var(--surface); }
.road-stack.n3 .art:nth-child(1) { transform: translateX(-16px) rotate(-10deg); }
.road-stack.n3 .art:nth-child(3), .road-stack.n2 .art:nth-child(2) { transform: translateX(14px) rotate(8deg); }
.road-stack.n2 .art:nth-child(1) { transform: translateX(-8px) rotate(-5deg); }
.road-stack.n3 .art:nth-child(2) { z-index: 1; }
.road-stack.n4 .art:nth-child(1) { transform: translateX(-27px) rotate(-14deg); }
.road-stack.n4 .art:nth-child(2) { transform: translateX(-9px) rotate(-5deg); }
.road-stack.n4 .art:nth-child(3) { transform: translateX(9px) rotate(5deg); }
.road-stack.n4 .art:nth-child(4) { transform: translateX(27px) rotate(14deg); }
.road-stack .art.ph > span { display: none; }
.road-stack.goal-card { display: grid; place-items: center; border-radius: var(--radius-card); background: var(--price-soft); box-shadow: 0 0 0 2px var(--price-fill), 0 4px 10px rgba(0, 0, 0, .22); color: var(--price); }
.road-stack.goal-card .ico-trophy { width: 36px; height: 36px; }
.road-link { display: inline-block; margin-top: 10px; color: var(--on-band); font-weight: 700; text-underline-offset: 4px; }
.road-link::after { content: ""; position: absolute; inset: 0; }
.road:hover .road-link { text-decoration-thickness: 2px; }
.road:hover .road-stack.n3 .art:nth-child(1), .road:focus-within .road-stack.n3 .art:nth-child(1) { transform: translateX(-20px) rotate(-13deg); }
.road:hover .road-stack.n3 .art:nth-child(3), .road:focus-within .road-stack.n3 .art:nth-child(3) { transform: translateX(18px) rotate(11deg); }
.road-stack .art { transition: transform .25s var(--ease-settle); }
.road-stops li { animation: rise .4s var(--ease-settle) both; }
.road-stops li:nth-child(2) { animation-delay: .08s; } .road-stops li:nth-child(3) { animation-delay: .16s; } .road-stops li:nth-child(4) { animation-delay: .24s; }
@media (max-width: 640px) {
  .road { padding: 16px; }
  .road-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .road-stops::before { content: none; }
}

.season-top > .pill, .season-top > .live-dot { flex: none; white-space: nowrap; }
.flow-step { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; min-width: 0; }
.flow-step > div { display: flex; flex-direction: column; min-width: 0; }
.flow-step b { font: 400 18px/1.25 var(--font-display); color: var(--ink); }
.flow-step .sub { font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.flow-n { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-seal); background: var(--ink); color: var(--paper); font: 700 15px/1 var(--font-body); }

/* Market pulse on the home page: data held in blocks under an ink header band, medals for the top three. */
.pulse .stat-grid > .panel { gap: 0; background: var(--surface); box-shadow: var(--shadow-pocket); }
.pulse .stat-grid > .panel > h3, .pulse .panel > .sec-head.cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); font: 400 17px/1.3 var(--font-display); box-shadow: inset 0 -3px 0 var(--price-fill); }
.pulse .panel > .sec-head.cap { justify-content: space-between; }
.pulse .panel > .sec-head.cap h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--paper); font: 400 17px/1.3 var(--font-display); }
.pulse .ico-trophy { flex: none; color: var(--price-fill); }
.pulse .panel h3 .info-btn { background: transparent; color: var(--paper); border-color: var(--paper); }
.pulse .cap .seg { border-color: var(--paper); }
.pulse .cap .seg button { background: transparent; color: var(--paper); }
.pulse .cap .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.pulse .rank { border-top: 0; padding: 0 14px 4px; }
.pulse .rank li { padding: 10px 6px; }
.pulse .rank li:last-child { border-bottom: 0; }
.pulse .panel .callout { margin: 12px 14px 14px; }
.pulse .rank li > .n { display: inline-grid; place-items: center; width: 28px; height: 28px; align-self: center; border-radius: var(--radius-seal); background: var(--sunk); color: var(--ink-soft); font: 700 14px/1 var(--font-body); }
.pulse .rank li:nth-child(-n+3) > .n { color: #18181d; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); animation: medal-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.pulse .rank li:nth-child(1) > .n { background: var(--price-fill); }
.pulse .rank li:nth-child(2) > .n { background: #c3c7cf; animation-delay: .06s; }
.pulse .rank li:nth-child(3) > .n { background: #cf8f5a; animation-delay: .12s; }
.pulse .rank li:nth-child(1):has(> .n) { background: linear-gradient(90deg, var(--price-soft), transparent 75%); }
.pulse .rank li:nth-child(-n+3):has(> .n) .v { font-weight: 700; }
.pulse .rank .v { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .fan.dealt a .art, .road-stops li, .pulse .rank li > .n { animation: none !important; }
  .road-stack .art { transition: none; }
}
/* ---------- Seasons page: sticky filter bar, timeline explorer, stacked placings note, living tiles ---------- */
.pbar { position: sticky; top: var(--mast-h, 0px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 20px; padding: 10px 0; background: var(--bg); border-block: 1px solid var(--rule); }
.pbar-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; flex: 1 1 420px; min-width: 0; padding-bottom: 2px; }
.pk { font: 500 14px/20px var(--font-body); flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius-cut); cursor: pointer; white-space: nowrap; transition: border-color .15s, transform .15s var(--ease-settle); }
.pk span { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.pk:hover { border-color: var(--ink); transform: translateY(-1px); }
.pk[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pk[aria-pressed="true"] span { color: var(--paper); opacity: .85; }
.pk[aria-pressed="true"] .kdot { box-shadow: 0 0 0 1.5px var(--paper); }
.kdot { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--k); }
.pbar-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pbar-sel select { width: auto; max-width: 100%; min-height: 34px; padding: 5px 28px 5px 10px; font: 500 14px/20px var(--font-body); border-radius: var(--radius-cut); }
.pbar-n { font: 500 13px/18px var(--font-mono); color: var(--ink-soft); white-space: nowrap; }
.pbar-reset[hidden] { display: none; }
.pyear { margin: 4px 0 0; }

/* Timeline explorer: the page's centrepiece. The spotlight shows the season under the pointer; its banner tints the stage. */
.tlx { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 18px; padding: 16px; background: var(--surface); box-shadow: var(--shadow-pocket); }
.tlx-bg { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: 0; transform: scale(1.04); transition: opacity .45s ease, transform 1.2s var(--ease-settle); pointer-events: none; }
.tlx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface) 91%, transparent) 55%, var(--surface)); }
.tlx-bg.on { opacity: 1; transform: none; }
:root[data-theme="dark"] .tlx-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 93%, transparent) 55%, var(--surface)); }
.tlx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.tlx-head h2 { margin: 0; }
.tlx-head h2 .sub { font: 400 var(--fs-foot)/1.4 var(--font-body); color: var(--ink-soft); margin-left: 6px; }
.tlx-years { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.tlx-years .chip { flex: none; }
.tlx-empty { margin: 12px 0 0; }
.tlx-spot { margin: 14px 0 12px; min-height: 196px; }
.tlx-spot-in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; animation: tlxIn .3s var(--ease-settle) both; }
@keyframes tlxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tlx-bn { margin: 0; min-width: 0; }
.tlx-bn img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--sunk); }
.tlx-bn figcaption { font-size: var(--fs-foot); color: var(--ink-soft); margin-top: 4px; }
.tlx-bn.none { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--k); color: var(--paper); font: 400 22px/1.2 var(--font-display); padding: 12px; text-align: center; }
.tlx-spot-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tlx-spot-txt h3 { font: 400 22px/1.2 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.tlx-spot-txt h3 a { color: var(--ink); text-decoration: none; }
.tlx-fan { display: flex; align-items: flex-end; min-height: 84px; padding: 6px 4px 0; }
.tlx-fan .thumb { width: 58px; flex: none; transform: rotate(calc(var(--d, -4) * 1deg)); }
.tlx-fan .thumb:nth-child(even) { --d: 4; }
.tlx-fan .thumb + .thumb { margin-left: -12px; }
.tlx-open { align-self: flex-start; margin-top: 4px; }
.tlx-scroll { overflow-x: auto; border-top: 1px solid var(--rule); padding-top: 8px; scrollbar-width: thin; }
.tlx-chart { --lab: 128px; position: relative; min-width: 760px; }
.tlx-chart.all { min-width: 900px; }
.tlx-axis, .tlx-lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); }
.tlx-lab { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding-right: 8px; font: 600 13px/16px var(--font-body); color: var(--ink); background: linear-gradient(90deg, var(--surface) 85%, transparent); min-width: 0; }
.tlx-axis .tlx-track { height: 40px; }
.tlx-track { position: relative; min-width: 0; }
.tlx-lane .tlx-track { height: calc(var(--rows) * 30px + 6px); border-top: 1px solid var(--rule); }
.tlx-lane .tlx-lab { border-top: 1px solid var(--rule); }
.tlx-tick { position: absolute; top: 20px; font: 500 12px/16px var(--font-mono); color: var(--ink-soft); padding-left: 4px; border-left: 1px solid var(--rule); white-space: nowrap; }
button.tlx-tick { background: none; border: 0; border-left: 1px solid var(--rule); cursor: pointer; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tlx-nowt { position: absolute; top: 2px; transform: translateX(-50%); font: 700 12px/16px var(--font-body); color: var(--supply); background: var(--surface); padding: 0 4px; }
.tlx-now { position: absolute; top: 18px; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--x) / 100); width: 0; border-left: 2px dashed var(--supply); pointer-events: none; z-index: 1; }
.tlx-bar { position: absolute; top: calc(var(--r) * 30px + 5px); height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; color: var(--paper); background: var(--k); text-decoration: none; font: 500 12px/24px var(--font-body); white-space: nowrap; border-radius: var(--radius-cut); outline-offset: 2px; transition: transform .18s var(--ease-settle), box-shadow .18s; }
.tlx-bar span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tlx-bar i { font: 600 10px/14px var(--font-mono); font-style: normal; padding: 0 3px; flex: none; background: color-mix(in srgb, var(--paper) 22%, transparent); }
.tlx-chart.all .tlx-bar span, .tlx-chart.all .tlx-bar i, .tlx-bar.tiny span, .tlx-bar.tiny i { display: none; }
.tlx-bar.tiny { padding: 0; min-width: 8px; }
.tlx-bar:hover, .tlx-bar:focus-visible, .tlx-bar[aria-current] { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink), 0 6px 14px rgba(20, 20, 30, .25); z-index: 3; }
.tlx-bar.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tlx-bar.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tlx-bar.soon { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--k); }
.tlx-bar.soon:hover, .tlx-bar.soon[aria-current] { box-shadow: inset 0 0 0 2px var(--k), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.tlx-bar.live::after { content: ""; position: absolute; inset: 0 -40px 0 0; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgb(255 255 255 / .16) 8px 16px); animation: tlxRun 1.4s linear infinite; pointer-events: none; }
.tlx-bar.live span, .tlx-bar.live i { position: relative; z-index: 1; }
@keyframes tlxRun { to { transform: translateX(-22.6px); } }
.tlx-cap { font-size: var(--fs-foot); color: var(--ink-soft); margin: 8px 0 0; }
/* Event popup: small, beside the pointer on hover (never blocks the timeline); a bottom sheet when tapped on touch screens. */
#evpop { position: fixed; z-index: 40; width: min(300px, calc(100vw - 16px)); pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-cut); box-shadow: 0 10px 28px rgb(20 20 30 / .26); opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .16s var(--ease-settle); }
#evpop.on { opacity: 1; transform: none; }
#evpop.sheet { pointer-events: auto; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: 480px; margin-inline: auto; max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.evp-in { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px; min-width: 0; border-top: 4px solid var(--k); border-radius: inherit; }
.evp-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; font: 400 22px/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-seal); cursor: pointer; }
.sheet .evp-head { padding-right: 36px; }
.evp-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.evp-bn { display: block; width: 96px; aspect-ratio: 16 / 9; object-fit: contain; background: var(--sunk); }
.evp-bn.none { display: grid; place-items: center; background: var(--k); color: var(--paper); }
.evp-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evp-title .eyebrow { overflow-wrap: anywhere; }
.evp-title h3 { font: 400 16px/1.2 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.evp-title h3 a { color: var(--ink); text-decoration: none; }
.evp-when, .evp-size, .evp-top, .evp-hint { margin: 0; font-size: var(--fs-foot); line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.evp-top { color: var(--ink); }
.evp-hint { font-size: var(--fs-micro, 11px); }
.evp-fmt { margin: 0; padding: 6px 8px; display: grid; gap: 3px; background: var(--sunk); border-radius: var(--radius-cut); min-width: 0; }
.evp-fmt > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px; }
.evp-fmt dt { font-size: var(--fs-micro, 11px); line-height: 18px; color: var(--ink-soft); }
.evp-fmt dd { margin: 0; min-width: 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.evp-fmt dd .sub { color: var(--ink-soft); }
.evp-fmt dd .blk { display: block; font-size: var(--fs-micro, 11px); }
.evp-src { font-size: var(--fs-foot); }
.evp-src summary { cursor: pointer; color: var(--ink-soft); }
.evp-src ul { margin: 4px 0 0; padding-left: 16px; }
.evp-src li { overflow-wrap: anywhere; }
.evp-open { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { #evpop { transition: none; transform: none; } }
@media (max-width: 640px) {
  .tlx { padding: 12px; margin-inline: -4px; }
  .tlx-spot { min-height: 0; }
  .tlx-spot-in { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tlx-bn img, .tlx-bn.none { max-height: 180px; }
  .tlx-chart { --lab: 96px; }
  .pbar { position: static; gap: 8px; }
  .pbar-kinds { flex-basis: 100%; }
}

/* Placings stack: one line, the example ladder behind a toggle. */
.pnote { margin: 0 0 18px; padding: 10px 14px; background: var(--surface); box-shadow: var(--shadow-pocket); }
.pnote summary { cursor: pointer; list-style: none; font-size: 15px; }
.pnote summary::-webkit-details-marker { display: none; }
.pnote[open] summary .linkish { visibility: hidden; }
.pnote-body { margin-top: 10px; }

/* Season tiles: the fan opens on hover, the banner tints the tile, and the placings line fades in.
   A live season spans two columns with its banner and events-held track, and its cards drift. */
.stile { position: relative; isolation: isolate; overflow: hidden; }
.stile-bn { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity .35s ease, transform .6s var(--ease-settle); }
.stile-bn::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.stile:hover .stile-bn, .stile:focus-visible .stile-bn { opacity: 1; transform: none; }
.stile-fan .thumb { transition: transform .3s var(--ease-settle); }
.stile:hover .stile-fan .thumb, .stile:focus-visible .stile-fan .thumb { transform: translateX(calc(var(--i, 0) * 8px)) rotate(calc((var(--i, 0) - 2) * 3deg)) translateY(-6px); }
.stile-peek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: var(--fs-foot); color: var(--ink-soft); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s var(--ease-settle); }
.stile-go { font-weight: 600; color: var(--ink); white-space: nowrap; }
.stile:hover .stile-peek, .stile:focus-visible .stile-peek { opacity: 1; transform: none; }
@media (hover: none) { .stile-peek { opacity: 1; transform: none; } }
.stile.live { grid-column: 1 / -1; border-top-color: var(--supply); padding: 18px; }
.stile-banner { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--sunk); }
@media (min-width: 761px) {
  .stile.live:has(.stile-banner) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; row-gap: 8px; align-content: start; }
  .stile.live:has(.stile-banner) > * { grid-column: 2; }
  .stile.live > .stile-banner { grid-column: 1; grid-row: 1 / span 9; align-self: start; }
}
.stile.live h3 { font-size: 24px; }
.stile.live .stile-fan { min-height: 104px; }
.stile.live .stile-fan .thumb { width: 72px; animation: drift 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.stile.live:hover .stile-fan .thumb { animation-play-state: paused; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.stile-live .cp-track { margin: 0; }
.stile .live-dot::before { animation: livePing 1.6s ease-out infinite; }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 var(--supply-soft); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tlx-bg, .tlx-bar, .pk, .stile-bn, .stile-fan .thumb, .stile-peek { transition: none; }
  .tlx-spot-in, .tlx-bar.live::after, .stile.live .stile-fan .thumb, .stile .live-dot::before { animation: none; }
  .stile:hover .stile-fan .thumb { transform: none; }
}
/* Signups: My events tracker on top, then a compact searchable list */
.su-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; margin: 8px 0 24px; }
.su-clock { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.su-clock b { font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.su-clock .sub { grid-column: 1; font-size: 13px; overflow-wrap: anywhere; }
.su-clock .seg { grid-column: 2; grid-row: 1 / span 2; }
.su-page h2 { margin: 0; }
.su-page .btn { text-decoration: none; justify-content: center; }
.su-page .tag { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.su-mine { margin-bottom: 40px; }
.su-mhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.su-mtools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; }
.su-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.su-cards.n1 { grid-template-columns: minmax(0, 560px); }
.su-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ink); }
.su-card.is-live { border-top-color: var(--ok); }
.su-chead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.su-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.su-x { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; display: grid; place-items: center; font: 400 22px/1 var(--font-body); color: var(--muted); background: none; border: 1px solid transparent; cursor: pointer; }
.su-x:hover { color: var(--ink); border-color: var(--line); }
.su-card h3 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; margin: -4px 0 0; }
.su-card h3 a { color: inherit; }
.su-cwhere { margin: -8px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.su-when { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.su-k { font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); }
.su-when time b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.su-when time span { font-weight: 600; }
.su-when .sub { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.su-tbd { font-size: 18px; }
.su-cd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; line-height: 1.1; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.su-cd small { font-size: 12px; color: var(--muted); margin-left: 1px; }
.su-isopen { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--ok); font-weight: 700; font-size: 18px; }
.su-isopen .sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.su-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.su-card.is-live .su-dot { animation: su-pulse 1.6s ease-in-out infinite; }
@keyframes su-pulse { 50% { opacity: .3; } }
.su-cact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-go { flex: 1 1 7rem; min-height: 52px; font-size: 17px; }
.su-card.is-live .su-go { background: var(--ok); border-color: var(--ok); color: var(--paper); animation: su-glow 1.8s ease-in-out infinite; }
@keyframes su-glow { 50% { transform: scale(1.015); } }
.su-cact .sub { font-size: 12px; flex: 1 1 100%; order: 3; }
.su-cact .btn.ghost { min-height: 52px; }
.su-card details { border-top: 1px solid var(--line); padding-top: 10px; }
.su-card summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.su-card summary .sub { font-weight: 400; font-size: 12px; }
.su-check ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.su-check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; font-size: 14px; }
.su-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.su-check label > span { min-width: 0; overflow-wrap: anywhere; }
.su-check b { font-weight: 600; }
.su-check input:checked + span b { text-decoration: line-through; color: var(--muted); }
.su-check .sub { display: block; font-size: 12px; margin-top: 2px; }
.su-check .sub .tag { font-size: 11px; padding: 0 7px; }
.su-more > :not(summary) { margin-top: 10px; }
.su-more .sub { font-size: 13px; }
.su-empty { padding: 18px; border: 1px dashed var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.su-empty p { margin: 0; max-width: 60ch; }
.su-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-qp { max-width: 100%; white-space: normal; text-align: left; }
.su-all > h2 { margin-bottom: 12px; }
.su-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 18px; }
.su-q { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 1 1 260px; max-width: 420px; min-width: 0; }
.su-q input, .su-name input { font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 8px 10px; min-height: 44px; min-width: 0; }
.su-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.su-groups { display: flex; flex-direction: column; gap: 26px; }
.su-grp { scroll-margin-top: calc(var(--mast-h, 0px) + 12px); }
.su-grp.is-target { outline: 3px solid var(--seal); outline-offset: 6px; }
.su-ghead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); min-width: 0; }
.su-ghead > div { min-width: 0; }
.su-gtools { display: flex; align-items: center; gap: 8px; }
.su-ghead h3 { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.su-ghead .sub { display: block; font-size: 13px; overflow-wrap: anywhere; }
.su-rows { list-style: none; margin: 0; padding: 0; }
.su-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.su-row.is-on { background: linear-gradient(90deg, var(--sunk), transparent 70%); }
.su-rt { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.su-rt b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.su-rn { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.su-rn > a { font-weight: 600; }
.su-rn .sub { flex-basis: 100%; font-size: 13px; }
.su-rn .tag { font-size: 11px; }
.su-pick { font: 600 13px/1 var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; }
.su-pick:hover { background: var(--sunk); }
.su-pick[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.su-rd { grid-column: 2 / -1; }
.su-rd summary { cursor: pointer; font-size: 13px; color: var(--muted); width: max-content; max-width: 100%; }
.su-rd > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 4px; }
.su-rd > div > p, .su-rd .su-side { flex-basis: 100%; margin: 0; }
.su-side { list-style: none; margin: 6px 0 2px; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 14px; }
.su-side li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.su-side-n { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.su-side-n b { font-weight: 600; }
.su-side-n .info-btn { margin-left: 4px; vertical-align: middle; }
.su-side-n .sub { display: block; font-size: 12px; }
.su-side-a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.su-side-a .sub { font-size: 12px; }
.su-name { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 0; flex: 1 1 220px; max-width: 320px; }
.su-copied { color: var(--ok); font-size: 13px; font-weight: 600; align-self: center; }
.linkish { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
@media (max-width: 720px) {
  .su-hero { grid-template-columns: minmax(0, 1fr); }
  .su-clock { justify-self: start; }
  .su-row { grid-template-columns: minmax(0, 1fr) auto; }
  .su-rt { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .su-rn { grid-column: 1; }
  .su-row .su-pick { grid-column: 2; grid-row: 1 / span 2; }
  .su-rd { grid-column: 1 / -1; }
  .su-when time b { font-size: 30px; display: inline; margin-right: 6px; }
  .su-hero { margin: 0 0 18px; gap: 10px; }
  .su-hero h1 { font-size: 30px; }
  .su-hero .eyebrow { display: none; }
  .su-clock { grid-template-columns: auto auto auto; gap: 4px 10px; padding: 6px 10px; }
  .su-clock b { font-size: 18px; }
  .su-clock .sub { grid-column: 2; }
  .su-clock .seg { grid-column: 3; grid-row: 1; }
  .su-card { gap: 10px; padding: 14px 14px 12px; }
  .su-go, .su-cact .btn.ghost { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .su-card.is-live .su-dot, .su-card.is-live .su-go { animation: none; } }
.cp-packs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cp-packs a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius-cut); background: var(--surface); min-width: 0; }
.cp-packs a:hover { border-color: var(--ink); }
.cp-packs img { width: 48px; height: auto; flex: none; border-radius: 4px; }
.cp-packs b, .cp-packs .note { display: block; overflow-wrap: anywhere; }

/* Pack pages (static, see website/packs_pages.py). Uses the site's tokens; text always wraps inside its box. */
.pk-main { padding-block: 20px 56px; }
.pk-main h1 { overflow-wrap: anywhere; }
.pk-hero { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 28px; }
.pk-hero-art { margin: 0; }
.pk-hero-art figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 8px; overflow-wrap: anywhere; }
.pk-pkg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-sleeve); }
.pk-fan { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; }
.pk-fan img { position: absolute; top: 8%; left: 18%; width: 64%; height: auto; border-radius: 6px; box-shadow: var(--shadow-sleeve); transform-origin: 50% 100%; }
.pk-fan img:nth-child(1) { transform: rotate(-12deg) translateX(-14%); }
.pk-fan img:nth-child(2) { transform: rotate(12deg) translateX(14%); }
.pk-fan img:nth-child(3) { transform: none; z-index: 1; }
.pk-fan img:only-child { transform: none; }
.pk-aka { color: var(--ink-soft); margin: 6px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.pk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 0; }
.pk-facts > div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-cut); padding: 10px 12px; min-width: 0; }
.pk-facts dt { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pk-facts dd { margin: 4px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.pk-est { display: inline-block; font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--caution); background: var(--caution-soft); border-radius: 999px; padding: 3px 7px; vertical-align: 2px; }
.pk-live { display: inline-block; font: 600 11px/1 var(--font-body); color: var(--supply); background: var(--supply-soft); border-radius: 999px; padding: 3px 7px; }
.pk-muted { color: var(--ink-soft); }
.pk-sec { margin-top: 32px; }
.pk-sec h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 6px; }
.pk-intro { color: var(--ink-soft); margin: 0 0 14px; max-width: 72ch; }
.pk-note { color: var(--ink-soft); font-size: 15px; max-width: 72ch; margin: 10px 0 0; }
.pk-big { font-size: 20px; margin: 4px 0 12px; }
.pk-q { display: inline-block; position: relative; margin-left: 6px; vertical-align: 1px; }
.pk-q summary { list-style: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-soft); color: var(--ink-soft); background: var(--surface); font: 700 12px/1 var(--font-body); cursor: help; }
.pk-q summary::-webkit-details-marker { display: none; }
.pk-q:not([open]) .pk-q-body { display: none; }
.pk-q[open] summary, .pk-q summary:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pk-q-body { position: absolute; z-index: 20; left: 0; top: 26px; width: min(340px, calc(100vw - 40px)); background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .25); overflow-wrap: anywhere; }
.pk-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pk-card a, .pk-card-raw { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.pk-art { display: block; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--sunk); }
.pk-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease-settle); }
.pk-card a:hover .pk-art img, .pk-card a:focus-visible .pk-art img { transform: translateY(-3px) scale(1.02); }
.pk-ph { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--ink-soft); }
.pk-num { font: 500 13px/1.3 var(--font-mono); color: var(--ink-soft); margin-top: 4px; }
.pk-nm { font-weight: 600; overflow-wrap: anywhere; }
.pk-lab { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pk-scroll { overflow-x: auto; }
.pk-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.pk-t th { text-align: left; font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); padding: 6px 10px 6px 0; }
.pk-t td { border-bottom: 1px solid var(--rule); padding: 8px 10px 8px 0; vertical-align: top; overflow-wrap: anywhere; }
.pk-t .pk-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-sub { display: block; font-size: 13px; color: var(--ink-soft); }
.pk-src { padding-left: 18px; margin: 0; }
.pk-src li { margin: 4px 0; overflow-wrap: anywhere; }
.pk-src .pk-sub { display: inline; }
.pk-find { margin: 18px 0 12px; max-width: 520px; }
.pk-find input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--ink-soft); border-radius: var(--radius-cut); background: var(--surface); color: var(--ink); }
.pk-count { font: 600 14px/1 var(--font-body); color: var(--ink-soft); vertical-align: middle; }
.pk-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.pk-tiles-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pk-tiles a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.pk-tiles .pk-pkg, .pk-tiles .pk-fan { transition: transform .2s var(--ease-settle); }
.pk-tiles a:hover .pk-pkg, .pk-tiles a:hover .pk-fan, .pk-tiles a:focus-visible .pk-pkg { transform: translateY(-3px); }
.pk-tn { font-weight: 600; margin-top: 6px; overflow-wrap: anywhere; }
.pk-tiles-sm span { font-size: 14px; overflow-wrap: anywhere; }
.pk-tm { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pk-chips .chip[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
@media (max-width: 900px) {
  .pk-q-body { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; font-size: 14px; padding: 12px 14px; }
}
@media (max-width: 720px) {
  .pk-hero { grid-template-columns: minmax(0, 1fr); }
  .pk-hero-art { max-width: 240px; }
  .pk-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .pk-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pk-art img, .pk-tiles .pk-pkg, .pk-tiles .pk-fan { transition: none; } }