/* ================= the slab: an acrylic grading case, drawn in CSS from real grading data ================= */
.slab{--grade-color:var(--g-other);container-type:inline-size;position:relative;width:100%;aspect-ratio:63/101;display:block;margin:0;isolation:isolate}
.slab[data-grader="PSA"]{--grade-color:var(--g-psa)}
.slab[data-grader="CGC"]{--grade-color:var(--g-cgc)}
.slab[data-grader="BGS"],.slab[data-grader="Beckett"]{--grade-color:var(--g-bgs)}
.slab[data-grader="SGC"]{--grade-color:var(--g-sgc)}
.slab__case{position:absolute;inset:0;border-radius:6cqi;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(224,231,241,.7) 55%,rgba(255,255,255,.9));box-shadow:0 0 0 1px rgba(11,18,48,.16),0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(11,18,48,.08) inset,var(--shadow-2);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.slab__inner{position:absolute;inset:3.2cqi;border-radius:4cqi;border:1px solid rgba(11,18,48,.18);background:linear-gradient(180deg,#fbfcfe,#e9edf4);display:flex;flex-direction:column;padding:3cqi;gap:3cqi;overflow:hidden}
.slab__label{position:relative;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2cqi;background:#fff;border-radius:1.6cqi;padding:3.4cqi 3cqi 2.4cqi;box-shadow:0 0 0 1px rgba(11,18,48,.12);overflow:hidden}
.slab__label::before{content:"";position:absolute;left:0;right:0;top:0;height:1.6cqi;background:var(--grade-color)}
.slab__text{display:grid;align-content:space-between;min-width:0;gap:1cqi}
.slab__meta{font-size:3cqi;line-height:1.2;color:#44506b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab__name{font-size:4.6cqi;line-height:1.1;font-weight:700;color:#0b1230;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.slab__grade{display:grid;justify-items:center;align-content:center;min-width:17cqi;border-left:1px solid rgba(11,18,48,.15);padding-left:2.4cqi}
.slab__grader{font-size:3cqi;font-weight:800;color:var(--grade-color);letter-spacing:.02em}
.slab__num{font-family:var(--display);font-weight:900;font-size:15cqi;line-height:.9;color:#0b1230}
.slab__window{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.slab__window img{max-width:94%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2.4cqi;box-shadow:0 1cqi 3.4cqi -.6cqi rgba(11,18,48,.55)}
.slab__window--empty{color:#6a7590;font-size:4cqi;text-align:center;padding:6cqi}
.slab__sheen{position:absolute;inset:0;pointer-events:none;border-radius:6cqi;background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.55) 49%,transparent 62%);background-size:260% 100%;background-position:var(--sx,100%) 0;mix-blend-mode:soft-light;opacity:.9}
.slab__foil{position:absolute;inset:0;pointer-events:none;border-radius:6cqi;background:linear-gradient(125deg,var(--foil-a),var(--foil-b) 40%,var(--foil-c) 70%,var(--foil-a));opacity:.0;mix-blend-mode:overlay}
.slab--foil .slab__foil{opacity:.42}
@media (hover:hover) and (pointer:fine){
  .slab[data-tilt]:hover .slab__case{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));box-shadow:0 0 0 1px rgba(11,18,48,.2),var(--shadow-2),0 30px 40px -24px rgba(11,18,48,.55)}
}
/* the unwrap: the sheen sweeps across once when a slab is opened */
@media (prefers-reduced-motion:no-preference){
  .slab--reveal .slab__sheen{animation:sheen-sweep 900ms var(--ease) 1 both}
  .slab--reveal .slab__case{animation:slab-rise 520ms var(--ease) 1 both}
}
@keyframes sheen-sweep{from{background-position:120% 0}to{background-position:-30% 0}}
@keyframes slab-rise{from{transform:translateY(10px) scale(.985);opacity:.0}to{transform:none;opacity:1}}
.slab--skeleton .slab__case{background:#d6dbe3;box-shadow:none}
.slab--skeleton .slab__case::after{content:"";position:absolute;inset:0;border-radius:6cqi;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@media (prefers-reduced-motion:reduce){.slab--skeleton .slab__case::after{animation:none}}

/* ================= the split-flap price board ================= */
.flap{--flap-size:3.4rem;display:inline-flex;align-items:stretch;gap:.06em;font-family:var(--display);font-weight:800;font-size:var(--flap-size);line-height:1;padding:.1em;background:#070b22;border-radius:.14em;box-shadow:0 0 0 1px #000,0 .08em .16em rgba(11,18,48,.5) inset,var(--shadow-2)}
.flap--sm{--flap-size:2rem}
.flap--lg{--flap-size:clamp(3rem,2rem + 5vw,5.6rem)}
.flap__cell{position:relative;width:.62em;height:1.04em;background:#161f4a;color:#fff;border-radius:.07em;perspective:1.1em;flex:none}
.flap__cell--sym{width:.34em}
.flap__cell--dot{width:.24em}
.flap__cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.65);z-index:5}
.flap__h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:inherit;backface-visibility:hidden}
.flap__h>span{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center}
.flap__h--top{top:0;border-radius:.07em .07em 0 0;background:linear-gradient(#1a2558,#141c42)}
.flap__h--bot{bottom:0;border-radius:0 0 .07em .07em;background:linear-gradient(#10173a,#161f4a)}
.flap__h--top>span{top:0}
.flap__h--bot>span{bottom:0}
.flap__h.is-fall{z-index:4;transform-origin:50% 100%;animation:flap-fall var(--flip,110ms) cubic-bezier(.5,0,.8,.6) forwards}
.flap__h.is-rise{z-index:4;transform-origin:50% 0;transform:rotateX(90deg);animation:flap-rise var(--flip,110ms) cubic-bezier(.2,.6,.4,1) var(--flip,110ms) forwards}
@keyframes flap-fall{to{transform:rotateX(-90deg)}}
@keyframes flap-rise{to{transform:rotateX(0)}}
.flap.is-dropped{box-shadow:0 0 0 2px var(--tag),0 0 0 6px rgba(255,214,10,.35),var(--shadow-2)}
@media (prefers-reduced-motion:no-preference){.flap{transition:box-shadow var(--t-slow) var(--ease)}}
.flap--plain .flap__cell{background:#161f4a}

/* markdown sticker: yellow, die-cut corner. Used ONLY for a funded reduction. */
.sticker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tag);color:var(--tag-ink);padding:.32em .75em .32em .6em;font-family:var(--display);font-weight:900;line-height:.95;clip-path:polygon(0 0,calc(100% - .55em) 0,100% .55em,100% 100%,0 100%);transform:rotate(-3deg);box-shadow:0 2px 0 rgba(61,48,0,.35)}
.sticker small{font-family:var(--text);font-weight:700;font-size:.42em;letter-spacing:.01em}
.sticker b{font-size:1.5em;font-weight:900}

/* ================= funding ruler: budget shown as a measuring scale ================= */
.ruler{--p:0%;position:relative;height:20px;overflow:hidden}
.ruler__base,.ruler__fill{position:absolute;left:0;bottom:0;height:100%;background:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 5px) bottom/100% 9px no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 25px) bottom/100% 16px no-repeat}
.ruler__base{width:100%;color:var(--line-strong)}
.ruler__fill{width:var(--p);color:var(--ink);transition:width 700ms var(--ease);overflow:hidden}
.ruler--tag .ruler__fill{color:#b89a00}
.ruler--low .ruler__fill{color:var(--danger)}
.ruler-legend{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-2);margin-top:4px;gap:var(--s-2)}

/* ================= collectible tile (wall / explore / lists): borderless, the slab is the object ================= */
.tile{position:relative;display:grid;gap:var(--s-3);color:inherit;text-decoration:none;align-content:start}
.tile:hover{color:inherit}
.tile__slab{position:relative;display:block;view-transition-name:none}
.tile__slabwrap{position:relative}
.tile__slabwrap .sticker{position:absolute;z-index:3;bottom:-10px;right:-10px;font-size:1.25rem}
.skel--tile-a{width:80%;height:18px}.skel--tile-b{width:50%;height:30px}
.tile__fav{position:absolute;z-index:4;left:8px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink-2);box-shadow:0 1px 3px rgba(11,18,48,.3)}
.tile__fav[aria-pressed="true"]{color:var(--danger)}
.tile__fav svg{width:20px;height:20px}
.tile__name{color:var(--ink);text-decoration:none;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__name:hover{text-decoration:underline;color:var(--ink)}
.tile__sub{font-size:var(--fs-sm);color:var(--ink-2)}
.tile__price{display:grid;gap:6px;justify-items:start}
.tile__was{font-size:var(--fs-sm);color:var(--ink-3);text-decoration:line-through}
.tile__note{font-size:var(--fs-xs);color:var(--ink-2)}
.tile--gone .tile__slab{opacity:.45;filter:grayscale(1)}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-7) var(--s-5)}
@media (max-width:640px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-3)}.tile .flap--sm{--flap-size:1.45rem}.tile__slabwrap .sticker{font-size:1rem;right:-4px}}

/* ================= reservation ring and stamps ================= */
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .ring__track{stroke:var(--line)}
.ring .ring__arc{stroke:var(--ink);stroke-linecap:round}
.ring--low .ring__arc{stroke:var(--danger)}
.ring__time{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem}
.stamp{display:inline-block;border:3px solid var(--ok);color:var(--ok);font-family:var(--display);font-weight:900;font-size:1.7rem;padding:.05em .45em;border-radius:6px;transform:rotate(-6deg);letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.stamp--warn{border-color:var(--warn);color:var(--warn)}
@media (prefers-reduced-motion:no-preference){.stamp.is-new{animation:stamp-in 520ms cubic-bezier(.2,1.4,.4,1) both}}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-14deg) scale(2.1)}60%{opacity:1}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

/* ================= receipt: printed like a certificate ================= */
.receipt{position:relative;background:#fff;color:#0b1230;max-width:560px;margin-inline:auto;padding:var(--s-6) var(--s-6) var(--s-7);box-shadow:var(--shadow-2),0 0 0 1px var(--line);
  -webkit-mask:radial-gradient(circle 8px at 8px 100%,transparent 98%,#000) -8px 0/16px 100% repeat-x,none;mask:none}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle 6px at 8px 5px,var(--stock) 98%,transparent) 0 0/16px 10px repeat-x}
.receipt::before{top:-5px}.receipt::after{bottom:-5px;transform:scaleY(-1)}
.receipt__head{display:flex;justify-content:space-between;align-items:start;gap:var(--s-4);margin-bottom:var(--s-5)}
.receipt__rows{display:grid;gap:10px;font-size:var(--fs-sm)}
.receipt__row{display:flex;gap:var(--s-3);align-items:baseline}
.receipt__row::after{content:"";order:2;flex:1;border-bottom:2px dotted var(--line-strong);transform:translateY(-4px);min-width:12px}
.receipt__row>:first-child{order:1;color:var(--ink-2)}
.receipt__row>:last-child{order:3;font-weight:700;text-align:right;overflow-wrap:anywhere}
.receipt__total{margin-top:var(--s-5);padding-top:var(--s-4);border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:900;font-size:2.2rem}
.receipt__sig{font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
.checks{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm)}
.checks .pill{flex:none;margin-top:1px}