#pre .pre__note{position:absolute;left:0;right:0;bottom:16%;text-align:center;color:var(--text-3);
  font-size:.84rem;font-family:var(--f-mono);letter-spacing:.06em}
/* ---------- top bar ---------- */
body{padding-top:var(--bar-h)}
.top{position:sticky;top:var(--bar-h);z-index:60;background:rgba(12,11,16,.86);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1rem;height:60px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--f-display);
  font-weight:700;letter-spacing:-.025em;font-size:1rem;white-space:nowrap}
.brand__mark{display:inline-flex;gap:3px;align-items:flex-end;height:19px}
.brand__mark i{width:3.5px;border-radius:2px;display:block;animation:eq 2.4s var(--ease-io) infinite}
.brand__mark i:nth-child(1){height:9px;background:var(--fire);animation-delay:0s}
.brand__mark i:nth-child(2){height:15px;background:var(--lightning);animation-delay:.12s}
.brand__mark i:nth-child(3){height:19px;background:var(--grass);animation-delay:.24s}
.brand__mark i:nth-child(4){height:13px;background:var(--water);animation-delay:.36s}
.brand__mark i:nth-child(5){height:8px;background:var(--psychic);animation-delay:.48s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@media(prefers-reduced-motion:reduce){.brand__mark i{animation:none}}
.top__right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.chip{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;padding:.4rem .7rem;border-radius:999px;
  border:1px solid var(--line);color:var(--text-3);white-space:nowrap}
.chip--link{text-decoration:none;transition:color .3s,border-color .3s;
  display:inline-flex;align-items:center;min-height:44px}
.chip--link:hover{color:var(--lightning);border-color:var(--lightning)}
.chip.stale{color:var(--foil-6);border-color:rgba(255,90,54,.45)}

/* ---------- views ---------- */
.view{display:none;padding:clamp(1.6rem,4vw,3rem) 0 5rem;min-height:70svh}
.view.on{display:block;animation:vIn .5s var(--ease)}
@keyframes vIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view.on{animation:none}}
.back{background:none;border:0;color:var(--text-3);cursor:pointer;padding:.5rem 0;margin-bottom:1rem;
  font-size:.9rem;min-height:44px;transition:color .3s}
.back:hover{color:var(--lightning)}

/* ---------- search ---------- */
.search__head{margin-bottom:1.8rem}
.search__head .h-l{margin:0 0 .5rem}
.searchbar{display:flex;align-items:center;gap:.8rem;background:var(--ink-2);border:1.5px solid var(--line-2);
  border-radius:16px;padding:0 1rem;transition:border-color .3s,box-shadow .3s}
/* focus ring consolidated further down — see 'The focus ring belongs to the WRAPPER' */
.searchbar__i{color:var(--text-3);flex:0 0 auto}
.searchbar input{flex:1;background:none;border:0;outline:none;min-height:60px;font-size:1.15rem;
  font-family:var(--f-display);font-weight:500;letter-spacing:-.02em}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar__x{background:none;border:0;color:var(--text-3);font-size:1.5rem;cursor:pointer;
  width:44px;height:44px;line-height:1}
.searchbar__meta{font-size:.72rem;color:var(--text-3);margin:.7rem 0 0;letter-spacing:.08em;min-height:1em}
.results{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.results li{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:.9rem 1.1rem;cursor:pointer;display:flex;align-items:center;gap:1rem;min-height:64px;
  transition:border-color .25s,transform .25s var(--ease),background .25s}
.results li:hover,.results li[aria-selected=true]{border-color:var(--lightning);transform:translateX(3px);background:var(--ink-3)}
.r__main{flex:1;min-width:0}
.r__n{font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r__s{font-size:.8rem;color:var(--text-3);font-family:var(--f-mono);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r__p{font-family:var(--f-mono);font-weight:600;flex:0 0 auto;text-align:right}
.r__v{font-size:.68rem;color:var(--text-3);font-family:var(--f-mono)}
.r__badge{flex:0 0 auto;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;padding:.2rem .45rem;
  border-radius:5px;border:1px solid var(--line-2);color:var(--text-3)}
.empty{text-align:center;padding:3rem 1rem;color:var(--text-2)}
.empty .h-m{margin:0 0 .5rem}

/* ---------- variant gate ---------- */
.variants{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.6rem}
.variants li{border:1.5px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;cursor:pointer;
  display:flex;align-items:center;gap:1rem;min-height:72px;transition:all .3s var(--ease)}
.variants li:hover{border-color:var(--lightning);background:rgba(46,155,255,.05);transform:translateX(4px)}
.variants .v__n{flex:1;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.variants .v__p{font-family:var(--f-mono);font-weight:600;font-size:1.15rem}
.variants .v__r{font-size:.72rem;color:var(--text-3);font-family:var(--f-mono);text-align:right}
.note{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--text-3);margin-top:1.6rem}
.note svg{flex:0 0 auto;margin-top:2px}
.note--warn{background:rgba(46,155,255,.06);border:1px solid rgba(46,155,255,.22);border-radius:12px;padding:.9rem 1rem}

/* ---------- card view ---------- */
.idbar{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.idbar .h-m{margin:0}
.idbar__sub{font-size:.76rem;color:var(--text-3);letter-spacing:.06em}
.idbar__swap{margin-left:auto;background:none;border:1px solid var(--line);color:var(--text-2);
  border-radius:999px;padding:.4rem .8rem;font-size:.76rem;cursor:pointer;min-height:44px;transition:all .3s}
.idbar__swap:hover{border-color:var(--lightning);color:var(--lightning)}

.hero-num{background:linear-gradient(150deg,var(--ink-2),var(--ink));border:1px solid var(--line-2);
  border-radius:24px;padding:clamp(1.4rem,3.5vw,2.4rem);position:relative;overflow:hidden}
.hero-num::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 15% 0%,rgba(46,155,255,.09),transparent 65%)}
.hero-num__lead{position:relative}
.big{font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;line-height:.9;margin:.3rem 0 .5rem;
  font-size:clamp(3.4rem,13vw,6.4rem);
  background:linear-gradient(96deg,var(--foil-0),var(--foil-5) 45%,var(--foil-4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.big.refuse{background:none;color:var(--text-3);font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:-.02em;line-height:1.15}
.big__sub{color:var(--text-2);margin:0;font-size:.96rem;max-width:52ch;position:relative}
.dial{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;padding-top:1.5rem;
  border-top:1px solid var(--line);position:relative;flex-wrap:wrap}
.dial__l{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.dial input[type=range]{flex:1;min-width:150px;accent-color:var(--lightning);height:44px}
.dial__v{font-weight:600;color:var(--lightning);min-width:3.2rem;text-align:right}

/* ---------- position bar ---------- */
.posbar{margin-top:1.2rem;background:var(--ink-2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.2rem,3vw,1.8rem)}
.posbar__head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.askwrap{margin-left:auto;display:flex;align-items:center;gap:.2rem;background:var(--ink-3);
  border:1.5px solid var(--line);border-radius:12px;padding:0 .9rem;transition:border-color .3s}
.askwrap:focus-within{border-color:var(--lightning)}
.askwrap__c{color:var(--text-3);font-family:var(--f-mono)}
.askwrap input{background:none;border:0;outline:none;width:6.5rem;min-height:48px;
  font-family:var(--f-mono);font-size:1.05rem}
.track{position:relative;height:12px;border-radius:999px;background:var(--ink-3);margin:2.4rem 0 .7rem}
.track__fill{position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,var(--foil-3),var(--foil-0) 50%,var(--foil-6));opacity:.3}
.track__tick{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--text);left:50%;border-radius:2px}
.track__tick span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.1em;color:var(--text-2);white-space:nowrap}
.track__tick span::after{content:"MARKET"}
.track__ask{position:absolute;top:-14px;bottom:-14px;width:3px;background:var(--lightning);border-radius:3px;
  transition:left .55s var(--ease);box-shadow:0 0 14px var(--lightning)}
.track__ask span{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:.72rem;
  font-weight:600;color:var(--lightning);white-space:nowrap}
.track__scale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-3);margin-top:1.6rem}
.verdict{margin:1.6rem 0 0;padding:.9rem 1.1rem;border-radius:12px;font-size:.95rem;
  border:1px solid var(--line);background:var(--ink-3)}
.verdict b{font-family:var(--f-display);letter-spacing:-.01em}
.verdict.good{border-color:rgba(49,217,138,.4);background:rgba(49,217,138,.08)}
.verdict.fair{border-color:rgba(46,155,255,.4);background:rgba(46,155,255,.08)}
.verdict.over{border-color:rgba(255,90,54,.4);background:rgba(255,90,54,.08)}

/* ---------- blocks ---------- */
.blocks{margin-top:1.2rem}
.blk__n{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.3rem);
  letter-spacing:-.03em;margin:.4rem 0 .4rem}
.blk__s{color:var(--text-3);font-size:.86rem;margin:0}
.ladder{margin-top:1.2rem}
.ladder__hint{color:var(--text-3);font-size:.86rem;margin:.4rem 0 1.2rem}
.ladder ul{list-style:none;padding:0;margin:0}
.ladder li{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.ladder li:last-child{border-bottom:0}
.ladder li.cur{color:var(--lightning)}
.ladder .l__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladder .l__s{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3);flex:0 0 auto}
.ladder .l__p{font-family:var(--f-mono);font-weight:600;flex:0 0 auto}
.prov{margin-top:1.4rem;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prov summary{cursor:pointer;padding:1rem 1.2rem;font-size:.9rem;color:var(--text-2);list-style:none;min-height:52px;
  display:flex;align-items:center;justify-content:space-between}
.prov summary::-webkit-details-marker{display:none}
.prov summary::after{content:"+";font-family:var(--f-mono);color:var(--lightning)}
.prov[open] summary::after{content:"−"}
.prov__b{padding:0 1.2rem 1.3rem;font-size:.86rem;color:var(--text-3);line-height:1.65}
.prov__b dl{display:grid;gap:.5rem;margin:.8rem 0 0}
.prov__b dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.prov__b dt{color:var(--text-3)}.prov__b dd{margin:0;text-align:right;font-family:var(--f-mono);color:var(--text-2)}

/* ---------- footer ---------- */
.foot{padding:0 0 3rem}
.foot .shell{padding-top:1.8rem}
.small{font-size:.82rem;color:var(--text-3);margin:0 0 .7rem;max-width:80ch}
.small a{color:var(--text-2)}


/* ============ FIXED FOIL CARD (page background) ============
   Same object as the storefront: never scrolls away, sits out of focus behind
   the content, and its sweep is driven by scroll position so the shimmer keeps
   moving as you read. Pointer tilts it; scroll refracts it. */
.foil-card{position:fixed;right:7vw;top:50%;
  /* CARD SIZE — read this before changing it.
     CSS `mm` is NOT physical: the spec pins 1in = 96px regardless of the
     display, so 63mm renders 238px. A Mac shows ~120 CSS px per real inch,
     so a life-size card (2.48in x 3.46in) needs ~300 x 419px.
     Nudge --cardW if it looks off on your screen; the ratio is locked. */
  width:var(--cardW,300px);aspect-ratio:63/88;
  border-radius:16px;background:linear-gradient(150deg,#22203A,#15142400 40%),linear-gradient(150deg,var(--ink-3),var(--ink-2) 62%,#08070E);
  border:1px solid rgba(255,255,255,.07);z-index:0;pointer-events:none;
  /* WebKit stops honoring overflow:hidden + border-radius the moment the clipping
     element itself carries a 3D transform, and this one does, for the tilt. The
     ::before foil is inset:-40%, so its square corners spilled past the rounded edge
     and drew a hard rectangle around every card. A fully opaque mask forces a real
     clipping layer that follows the radius; it is solid black everywhere, so it
     changes nothing visually and exists only to make the clip happen. */
  -webkit-mask-image:linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000);
  transform:perspective(1400px) translate3d(0,-50%,0) rotate(var(--slabRot,9deg))
    rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  /* NO preserve-3d. It establishes a 3D rendering context, which disables the
     overflow:hidden clip on .holo — so the sheen (inset:-40%, ie 180% of the
     card) spilled past the card's rotated, rounded outline and showed its own
     rectangular edges. Nothing here has 3D children, so it bought nothing. */
  filter:blur(var(--cardBlur,0px)) saturate(1.6) contrast(1.06);opacity:var(--cardOp,1);
  will-change:filter,opacity;
  box-shadow:0 46px 100px -28px #000, 0 8px 26px -10px #000,
             inset 0 0 0 1px rgba(242,239,234,.22),
             inset 0 1px 0 rgba(255,255,255,.35),
             0 0 100px -30px var(--cyan);transition:opacity .8s var(--ease)}
/* Concentric: inner radius = outer radius - BORDER - inset, so 16 - 1 - 10 = 5.
   The 1px border is measured out of it because `inset` starts at the padding box.
   Measured on the gate's card — the same motif at full strength — with
   tools/frame-gap.py: at 6px the corner ran 8% wider than the edges, at 5px 1%.
   Invisible here behind a quarter opacity and a blur; not invisible there. */
.foil-card__in{position:absolute;inset:10px;border-radius:5px;
  border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.04),transparent)}
.foil-card__n{font-size:1.05rem;letter-spacing:.34em;color:rgba(242,239,234,.2)}
@media(max-width:900px){.foil-card{right:50%;translate:50% 0;--cardOp:.28;top:46%;--cardW:min(300px,72vw)}}
/* content must sit above it */
/* stacking above the fixed card — must NOT clobber .top's sticky positioning */
main,.foot{position:relative;z-index:2}
.top{z-index:60}

/* Same reasoning as the shop: with reduced motion the scroll handler never
   runs, so these defaults must stand on their own. */
@media(prefers-reduced-motion:reduce){
  /* The search page is a single field with nothing on the right, so the card
     stays close to full strength — it is the thing you are meant to notice.
     The document page is dense running text the card sits behind, so there it
     drops back far enough to keep the whole column comfortable. */
  .foil-card{--cardOp:.85;--cardBlur:0px}
  .is-doc .foil-card{--cardOp:.34;--cardBlur:3px}
  /* On a phone the card sits behind the copy rather than beside it, so the
     reduced-motion fallback has to be width-aware too — .85 at 390px washed
     out the print label, the one field that separates a $869 card from a
     $10,000 one. */
  @media(max-width:900px){
    .foil-card{--cardOp:.24;--cardBlur:2px}
    .is-doc .foil-card{--cardOp:.20;--cardBlur:3px}
  }
}


/* ---------- confidence bar ----------
   Replaces the old blanket refusal. Listing spread is not uncertainty, so the
   bar reads off mid/low and simply tells you how much to trust the figure
   instead of withholding it. */
.conf{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.55rem 0 .1rem}
/* [hidden] only sets display:none at UA specificity, so the .conf rule above
   beat it and the bar stayed visible on the refusal path — where there is by
   definition no confidence to report. */
.conf[hidden]{display:none}
.conf__label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--e,var(--lightning));flex:0 0 auto}
.conf__track{flex:1 1 130px;min-width:110px;max-width:210px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden}
.conf__fill{display:block;height:100%;border-radius:99px;background:var(--e,var(--lightning));
  transition:width .6s var(--ease),background .4s}
.conf__note{flex:1 1 100%;font-size:.82rem;color:var(--text-3);line-height:1.45}
.conf--tight {--e:var(--grass)}
.conf--normal{--e:var(--lightning)}
.conf--wide  {--e:var(--fire)}
.conf--vwide {--e:var(--psychic)}
@media(prefers-reduced-motion:reduce){.conf__fill{transition:none}}


/* ---------- card thumbnails ----------
   A missing image COLLAPSES: the <img> is removed on error, and because the
   slot is not a reserved empty box, rows with no art simply close up rather
   than showing a broken frame. */
.thumb{width:42px;aspect-ratio:63/88;flex:0 0 auto;border-radius:4px;object-fit:cover;
  background:var(--ink-3);border:1px solid var(--line);
  box-shadow:0 3px 10px -4px rgba(0,0,0,.8)}
#results li .thumb{margin-right:.2rem}
.variants li .thumb{width:48px}
@media(max-width:520px){.variants li .thumb{width:34px}}  /* the generic .thumb rule loses on specificity */
.idbar__thumb{display:contents}
.thumb-lg{width:74px;aspect-ratio:63/88;border-radius:7px;object-fit:cover;
  background:var(--ink-3);border:1px solid var(--line-2);align-self:center;
  box-shadow:0 8px 26px -10px rgba(0,0,0,.85)}
.idbar{align-items:center}
@media(max-width:520px){
  .thumb{width:34px}
  .thumb-lg{width:56px}
}


/* ---------- refusal panel ----------
   Replaces the position bar and the two figure blocks when we will not stand
   behind the number, so nothing derived from a disowned price stays on screen. */
.refuse-note{border:1px solid rgba(255,90,54,.30);background:rgba(255,90,54,.05);
  border-radius:18px;padding:1.3rem 1.5rem;margin:0 0 1.6rem}
.refuse-note__b{margin:.5rem 0 0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:62ch}


/* ---------- result rows on a phone ----------
   The row is flex with several flex:0 0 auto children carrying nowrap content,
   so its min-content width exceeded the 358.8px column at 390px and the price
   column started at x=395 — off-screen, and unreachable because body has
   overflow-x:hidden. The price is the entire point of the row. Below 560px the
   row wraps and the price sits under the name instead. */
.r__right{flex:0 0 auto;text-align:right}
@media(max-width:560px){
  .results li{flex-wrap:wrap;gap:.55rem .7rem;padding:.85rem .95rem}
  .r__main{flex:1 1 60%;min-width:0}
  .r__right{flex:1 1 100%;text-align:left;display:flex;align-items:baseline;gap:.6rem}
  .r__badge{order:3}
  .r__v{margin-left:auto}
}

/* The focus ring belongs to the WRAPPER, not the input inside it.
   Both used to draw one: the wrapper lit its border on :focus-within, and the input drew
   its own 2px outline at outline-offset:3px on top. Because the input is flex:1 inside a
   padded wrapper, that offset outline was pushed OUTSIDE the wrapper's rounded edge — two
   nested gold rectangles with the inner one hanging over the right-hand side.
   One indicator, on the wrapper, which fires for pointer and keyboard alike and follows
   the wrapper's own border radius. The rule below is what keeps the keyboard ring the
   original comment was protecting; it just draws it in the right place. */
.searchbar input:focus-visible,.askwrap input:focus-visible{ outline:none }
.searchbar:focus-within,.askwrap:focus-within{
  border-color:var(--lightning);
  box-shadow:0 0 0 3px rgba(255,197,61,.30)}


/* ---------- Japanese sets ----------
   A quiet control: most people never want it, and the ones who do are looking for it.
   It sits under the search bar because that is where its effect is visible. */
.jp{display:inline-flex;align-items:center;gap:.55rem;margin:.15rem 0 0;cursor:pointer;
  font:500 .85rem/1.4 var(--f-body);color:var(--text-3);min-height:44px;
  transition:color .25s var(--ease)}
.jp:hover{color:var(--text-2)}
.jp input{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line-2);position:relative;cursor:pointer;flex:0 0 auto;
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.jp input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:var(--text-3);transition:transform .3s var(--ease),background .3s var(--ease)}
.jp input:checked{background:rgba(255,197,61,.22);box-shadow:inset 0 0 0 1px var(--lightning)}
.jp input:checked::after{transform:translateX(16px);background:var(--lightning)}
.jp input:focus-visible{outline:2px solid var(--lightning);outline-offset:3px}
.jp[data-busy="1"]{color:var(--text-2)}
/* Hidden until the server says the tier line was reached, so the public tool does not
   advertise a paywall to people who have not touched it. */
/* The free-lookup counter. Quiet until it is nearly spent, then it earns attention. */
.meter{margin:.35rem 0 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3)}
.meter--low{color:var(--lightning)}
/* A price you have not spent a lookup on. A dash, not a blur or a padlock: it says
   "not shown" without pretending there is something dramatic behind it. */
.locked{color:var(--text-3);opacity:.55;letter-spacing:.1em}
/* The buy button. It is the one thing on the wall that should be impossible to miss,
   and while cards are free the parenthetical is the whole pitch. */
.wall__buy{margin:1.6rem 0 .4rem}
.btn--free em{font-style:normal;font-weight:600;opacity:.72}
@media(min-width:520px){.btn--free{font-size:1.05rem;padding:1rem 1.6rem}}
/* THE CONDITION LADDER. Wraps rather than scrolls horizontally: a row you have to
   swipe hides the grades that matter most to a shop, and people do not discover it. */
.grades{margin:0 0 1.1rem}
.grades__l{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 .5rem}
.grades__row{display:flex;flex-wrap:wrap;gap:.4rem}
.grade{font:inherit;font-size:.82rem;padding:.5rem .8rem;min-height:44px;border-radius:999px;
  background:transparent;color:var(--text-2);cursor:pointer;
  border:1.5px solid var(--line-2);transition:border-color .2s,color .2s,background .2s}
.grade:hover{color:var(--text);border-color:var(--line)}
.grade.is-on{background:rgba(255,197,61,.14);border-color:var(--lightning);color:var(--text);font-weight:600}
.grade:focus-visible{outline:2px solid var(--lightning);outline-offset:2px}
/* Not a card. Deliberately a different color from the PRINTS badge, which is a helpful
   note about a real card; this one is a warning that the row is not what you are holding. */
.r__badge--sealed{background:rgba(255,90,54,.16);color:var(--fire);border-color:rgba(255,90,54,.4)}
.r__badge--code{background:rgba(134,126,160,.16);color:var(--text-3)}
.jp__get{display:none}
/* Two ways out, not one. The toggle used to reveal only "Use a card", which is an answer
   for somebody who already HAS one; the person who has just been told the Japanese
   catalog comes with a card almost certainly does not, and cards are free right now.
   The free offer leads, the code entry follows it quietly. */
.jp[data-tier="card"] .jp__free{display:inline;margin-left:.4rem;font-weight:600;
  color:var(--ink);background:var(--lightning);border-radius:999px;padding:.25rem .7rem;
  text-decoration:none;white-space:nowrap}
.jp[data-tier="card"] .jp__free:hover{filter:brightness(1.08)}
.jp .jp__free{display:none}
/* :not(.jp__free) matters. The free link carries BOTH classes, and this rule sits after
   the .jp__free one at equal specificity — so it won, and painted yellow text on the
   yellow pill. The button rendered as a blank lozenge with an invisible label. */
.jp[data-tier="card"] .jp__get:not(.jp__free){display:inline;margin-left:.15rem;color:var(--lightning);
  text-decoration:underline;text-underline-offset:2px}
.jp[data-tier="card"] input{opacity:.5}
@media (prefers-reduced-motion:reduce){.jp input,.jp input::after{transition:none}}


/* ---------- what condition the price is for ----------
   Quiet on modern cards, where the source is dependable. Louder on pre-2011, where
   the source itself says the number blends played copies — and where a third of the
   catalog's value sits. */
.cond{margin:.7rem 0 0;font-size:.86rem;line-height:1.55;color:var(--text-3);
  max-width:52ch}
.cond b{color:var(--text-2);font-weight:600}
.cond--old{color:var(--text-2);border-left:2px solid var(--lightning);
  padding-left:.85rem;margin-top:.9rem}