/* ═══════════════════════════════════════════════════════════════════════════
   psa-slab.css — THE PSA SLAB, AS A STANDALONE COMPONENT.

   ⚠⚠ WHY THIS FILE EXISTS. Aaron, 2026-09-23, on the One Piece reveal: "No PSA
   card slab explosion." A valued pack has real PSA grades — `caps.grade` is
   true — and rip/CLAUDE.md's own rule is that a slab "is not a card frame with
   the grade removed: it is a cert label, a barcode, a cert number and the
   letters PSA". Pokémon has had one since launch; it lived inside packs.htm's
   inline <style>, so nothing else on the site could show one.

   ⚠ EVERY VALUE HERE IS COPIED FROM packs.htm, NOT REDESIGNED. The 10px red
   border, the 115px label, the 7.5px set line against the 13px name, the 80px
   barcode, the 4px art box — those are the proportions that make it read as a
   PSA holder rather than as a red rectangle. A "tidier" slab is a different
   object.

   ⚠⚠ WHAT IS DELIBERATELY DIFFERENT: THIS ONE DOES NOT FLIP. packs.htm's slab
   is one face of a 3D shell (`.psa-slab-shell` with `transform-style:
   preserve-3d`, a `.slab-back` that is the pack back, and a rotateY flip). A
   universe page already has its own pack — `.fp-pack` — which charges and is
   sucked in, so what it needs is the FRONT alone, as an ordinary block that
   `fpExplode` can explode. Copying the shell would mean two packs on one
   screen.

   ⚠ packs.htm STILL CARRIES ITS OWN INLINE COPY, AND THAT IS RECORDED RATHER
   THAN OVERLOOKED. Adopting this sheet there means re-proving the live pull
   page's flip, its awaiting glow, its holo sweep and its reveal flash — nine
   reverted "fixes" are on that page's record. It is a follow-up, not a
   passenger. Same shape as lib/card-modal.php vs ensureDom(), which this repo
   already accepts as two copies of one markup for a stated reason.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ⚠⚠ THE WHOLE SLAB SCALES, TYPE INCLUDED — AND THE FIRST VERSION SCALED ONLY
   THE BOX, WHICH CLIPPED THE CARD'S NAME OFF ITS OWN LABEL.

   Aaron, 2026-09-23, with two phone screenshots: "I don't understand how
   you're missing such basic differences." Measured on the live page at 390px:
   the reveal gives the slab **167px**, packs.htm gives its own **300**. The box
   followed (`aspect-ratio`, `height: 21.7%`); the TYPE did not — 7.5px set line
   and 13px name stayed fixed. So in a 75px-wide meta column "ONE PIECE JAPANESE
   500 YEARS IN THE FUTURE" wrapped to **four** lines instead of two, the meta
   block came out 72px tall inside a 58px label, and "CARINA #OP07-005" painted
   **15px below the label's bottom edge**, cut off by the art box.

   ⚠ NOTHING ERRORED AND THE SLAB STILL READ AS A SLAB, which is why it shipped:
   the overflow is only visible as `meta.bottom − label.bottom`, and the parity
   check written the same evening compared the pull's class SEQUENCE and never
   looked at the panel at all.

   ⚠⚠ SO EVERY VALUE IS IN `cqw` NOW — PERCENT OF THE SLAB'S OWN WIDTH — AND
   EACH ONE IS STILL packs.htm's, DIVIDED BY 300. That is what this file's
   header already meant by "every value here is copied from packs.htm": a ratio,
   applied to the type as well as the box, makes the slab a faithful scaled copy
   at ANY width, so the label holds exactly the number of lines it holds on the
   pack page and can never overflow. 7.5px → 2.5cqw, 13px → 4.333cqw, the 115px
   label → 38.333cqw, and so on.

   ⚠ EVERY cqw DECLARATION FOLLOWS ITS px TWIN, NEVER REPLACES IT. A browser
   without container queries drops the second line and keeps the first, i.e.
   exactly today's behaviour — duller, never broken. Same shape as the
   `color-mix()` fallback on the rarity chip.

   ⚠ AND `min-height` IS GONE. It was what pinned the label at 74px while the
   type inside it needed 88, i.e. the direct cause of the clip. With everything
   on one ratio there is nothing left for it to protect against.
   ═══════════════════════════════════════════════════════════════════════════ */

.psa-slab {
    /* ⚠ THE RATIO IS packs.htm's OWN BOX (its shell is 530px tall in a ~300px
       column), expressed as a ratio so the slab scales with whatever width the
       reveal gives it instead of being pinned to one viewport. */
    aspect-ratio: 300 / 530;
    width: 100%;
    /* ⚠ THIS IS WHAT MAKES EVERY `cqw` BELOW MEAN "percent of the slab". Without
       it they resolve against the nearest ancestor that HAS a container type,
       or the small viewport — which is a different number and silently wrong. */
    container-type: inline-size;
    border-radius: 14px;
    border-radius: 4.667cqw;
    overflow: hidden;
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
    border: 1px solid #444;
    padding: 10px;
    padding: 3.333cqw;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Its own red, so the component does not depend on a token defined in one
       page's <style>. Same hex as packs.htm's :root --psa-red. */
    --psa-red: #e31b23;
}

/* ── the white cert label ─────────────────────────────────────────────────── */
.psa-slab__label {
    background: #fff;
    border: 10px solid var(--psa-red);
    border-width: 3.333cqw;
    border-radius: 2px;
    padding: 8px;
    padding: 2.667cqw;
    margin-bottom: 8px;
    margin-bottom: 2.667cqw;
    font-family: var(--rip-display);
    color: #111;
    /* packs.htm's flat 115px, as a share of the slab's width (115/300). Its own
       label is 115 in a 300-wide slab; this is the same label at any width. */
    height: 21.7%;
    height: 38.333cqw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}
.psa-slab__top    { display: flex; justify-content: space-between; align-items: flex-start; }
.psa-slab__meta   { font-weight: 800; text-transform: uppercase; width: 70%; text-align: left; word-break: break-word; min-width: 0; }
.psa-slab__set    { display: block; font-size: 7.5px; font-size: 2.5cqw;   line-height: 1.35; color: #444; letter-spacing: .01em; }
.psa-slab__name   { display: block; font-size: 13px;  font-size: 4.333cqw; line-height: 1.12; margin-top: 2px; margin-top: .667cqw; letter-spacing: -.02em; }
.psa-slab__gradebox { text-align: right; line-height: 1; flex-shrink: 0; }
.psa-slab__word   { font-size: 8px;  font-size: 2.667cqw; font-weight: 800; display: block; }
.psa-slab__num    { font-size: 16px; font-size: 5.333cqw; font-weight: 800; display: block; margin-top: 1px; margin-top: .333cqw; }
.psa-slab__foot   {
    display: flex; justify-content: space-between; align-items: center;
    height: 22px; height: 7.333cqw;
    border-top: 1px solid #eee;
    padding-top: 4px; padding-top: 1.333cqw;
}
.psa-slab__barcode {
    height: 16px; width: 80px;
    height: 5.333cqw; width: 26.667cqw;
    background: repeating-linear-gradient(90deg, #111, #111 1px, #fff 1px, #fff 3px);
}
.psa-slab__logo     { display: flex; align-items: center; }
.psa-slab__logo img { height: 14px; height: 4.667cqw; width: auto; display: block; }
.psa-slab__cert     { font-size: 7.5px; font-size: 2.5cqw; font-weight: 800; color: #111; }

/* ── the card behind the holder ───────────────────────────────────────────── */
.psa-slab__art {
    background: #000;
    border-radius: 4px;
    border-radius: 1.333cqw;
    overflow: hidden;
    border: 1px solid #222;
    flex: 1;
    padding: 4px;
    padding: 1.333cqw;
    min-height: 0;            /* or the flex item refuses to shrink and overflows */
}
.psa-slab__inner {
    width: 100%; height: 100%;
    border-radius: 4px; border-radius: 1.333cqw;
    overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.psa-slab__inner img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* The sheen across the holder. Inert by itself — it is a static gradient, the
   same one packs.htm paints; the animated holo sweep is that page's own. */
.psa-slab__sheen {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    mix-blend-mode: overlay;
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .psa-slab__sheen { display: none; }
}