/* rip/account.css — the member-area stylesheet.
 *
 * Lifted VERBATIM out of the 435-line inline <style> in rip/account.php so the
 * pages the account page is splitting into (binder, stats, history, badges,
 * prizes) can share it instead of each carrying a copy. Not a restyle: byte for
 * byte the same rules, in the same order, so this change cannot alter a pixel.
 *
 * It carries its own :root token set (--bg / --surface-1..3 / --accent / --gold
 * / --green / --red) and does NOT use rip-ui.css. Migrating it onto the rip-ui
 * tokens is a separate, visible job — deliberately not bundled in here, where it
 * would hide behind a refactor.
 */
    /* ── Tokens ────────────────────────────────────────────────────────────
       These are now ALIASES onto rip-ui.css, not their own palette. The member
       area used to run a second design system in parallel with the pack app —
       its own ink, its own greys, and red as the action colour. rip-ui.css
       reserves red for destructive actions only, so an account page where
       every button, focus ring and active tab was red said "careful" on
       everything and "click me" on nothing.

       Aliasing rather than find-and-replacing 433 rules means the whole member
       area moves when rip-ui.css moves, and there is exactly one place to look
       when a colour is wrong. rip-ui.css MUST be linked first — see
       rip/lib/member-page.php.

       --accent is the one that changes meaning: red -> holo cyan. Every use of
       it was an action, a focus ring or an active state; none were
       destructive. The genuinely destructive rules (.btn.danger, .danger-zone)
       keep red, which is what makes red mean something again. */
    :root{
        --bg:var(--rip-bg);
        --surface-1:var(--rip-panel);--surface-2:var(--rip-panel-2);--surface-3:var(--rip-panel-3);
        --border:var(--rip-line-2);--border-soft:var(--rip-line);
        --text:var(--rip-fg);--text-2:var(--rip-fg-2);--text-3:var(--rip-fg-3);
        --accent:var(--rip-act);--accent-2:var(--rip-act-2);--accent-soft:var(--rip-act-soft);
        --accent-line:var(--rip-act-line);--accent-ink:var(--rip-act-ink);
        --shadow-1:0 1px 2px rgba(0,0,0,0.4);--shadow-2:0 4px 14px rgba(0,0,0,0.4);
        --green:var(--rip-up);--red:var(--rip-down);--gold:var(--rip-val);
        --danger:var(--rip-danger);
    }
    /* Headings take the display face, as they do on the pack app. account.css
       never set one, so every heading silently inherited the body font — which
       is why the member area read as a different product even before the
       colours diverged. */
    h1,h2,h3,.profile-name,.stat-value,.hsum-val,.panel-title{
        font-family:var(--rip-display);font-weight:800;letter-spacing:-.02em;
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{background:var(--bg);color:var(--text);font-family:var(--rip-body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
    .global-bg{position:fixed;inset:0;z-index:-2;pointer-events:none}
    /* The same ground as the pack app. This was a cabinet photograph under a
       heavy scrim — the app dropped it for a gradient, and keeping it here was
       the single biggest reason the member area still read as a different site
       even once the palette matched. */
    #cabinet-bg{width:100%;height:100%;position:relative;background:
        radial-gradient(1200px 660px at 50% -8%, rgba(46,230,214,0.10), transparent 62%),
        radial-gradient(900px 560px at 84% 8%, rgba(46,230,214,0.045), transparent 58%),
        linear-gradient(180deg, var(--rip-bg) 0%, #080c12 46%, var(--rip-bg-2) 76%, #04070b 100%)}
    /* .wrap is gone. Member pages and settings use .rip-wrap now — the same
       1120px every other /rip/ page uses. Aaron, on a PC: "the page width is
       capped ... Make your mind up, make everything uniform." */

    /* ⚠ THE PAGE HEADING LIVED HERE TWICE. This was .mp-head + three
       .mp-head__* rules — a second type scale (10.5px eyebrow in var(--rip-act),
       15.5px sub) running alongside the shared one (11px muted, 16px .rip-lede).
       That is the "blue subheader" on /binder against the "grey subheader" on
       /leaderboard. Member pages emit .rip-page-head now, so these are deleted
       rather than left to drift again. */

    /* ── Top bar ── */
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 0 16px;border-bottom:1px solid var(--border-soft);margin-bottom:22px}
    .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;padding:8px 0;min-height:44px;transition:color .12s}
    .back-link:hover{color:var(--text)}
    .admin-link{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--rip-val);text-decoration:none;padding:6px 12px;border-radius:8px;border:1px solid rgba(242,177,52,0.3);background:rgba(242,177,52,0.06);transition:all .12s;min-height:36px}
    .admin-link:hover{background:rgba(242,177,52,0.12);border-color:rgba(242,177,52,0.5)}
    .topbar-right{display:flex;align-items:center;gap:10px}
    .email-badge{font-size:11px;color:var(--text-3);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    /* ── Profile hero ── */
    .profile-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--surface-1) 0%,rgba(46,230,214,0.05) 100%);border:1px solid var(--border-soft);border-radius:16px;padding:20px 22px;margin-bottom:6px;position:relative;overflow:hidden}
    .profile-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(46,230,214,0.07) 0%,transparent 70%);pointer-events:none}
    .avatar{flex:0 0 auto;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#9f1239);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:-0.02em;box-shadow:0 0 0 3px rgba(46,230,214,0.22),var(--shadow-2);flex-shrink:0}
    /* ⚠ THE PICTURE IS A LAYER OVER THE INITIALS, NEVER A REPLACEMENT FOR THEM.
       .avatar keeps its gradient and its two letters; the <img> covers them when
       there is one. So a removed or 404ing picture reveals a correct tile with
       nothing to re-render, and setting one after an upload is one src plus one
       `hidden` — no rebuild, no layout shift, no second code path for "has a
       photo" vs "does not".
       position:relative is added here rather than in the markup because the
       .avatar rule is the one that owns this box. */
    .avatar{position:relative;overflow:hidden}
    .avatar > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
    /* [hidden] needs saying: `display:block` above would otherwise beat the UA
       sheet's [hidden]{display:none} on specificity and paint a broken image. */
    .avatar > img[hidden]{display:none}

    /* The settings-panel preview. Same layering contract, its own size — bigger
       than the hero because this is the surface where somebody is deciding
       whether the crop looks right. */
    .av-prev{position:relative;overflow:hidden;flex:0 0 auto;width:84px;height:84px;border-radius:50%;
        background:linear-gradient(135deg,var(--accent),#9f1239);color:#fff;font-weight:800;font-size:28px;
        display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:-0.02em;
        box-shadow:0 0 0 3px rgba(46,230,214,0.22),var(--shadow-2)}
    .av-prev > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
    .av-prev > img[hidden]{display:none}
    /* While an upload is in flight — the tile is the progress indicator, so
       there is no spinner to place and nothing moves. */
    .av-prev.is-busy{opacity:.55}
    .profile-info{flex:1;min-width:0}
    .profile-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
    .profile-name{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-0.01em;line-height:1.2}
    /* ⚠ 40px MINIMUM, NOT 28. This is a real control — it moves focus into the
       display-name field — and at 28px tall it was the smallest tap target on
       the page, sitting beside a name you read on a phone mid-stream. The type
       stays 11px; only the box grows, so the row reads the same. */
    .edit-name-btn{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:6px;padding:4px 11px;font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .12s;min-height:40px;font-family:var(--rip-body)}
    .edit-name-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border)}
    .profile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--text-2);line-height:1.5}
    .meta-sep{color:var(--text-3)}
    .social-link{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:4px}
    .social-link:hover{text-decoration:underline}
    .add-social{color:var(--text-3);text-decoration:none;font-size:12px}
    .add-social:hover{color:var(--text-2);text-decoration:underline}
    /* hero summary ribbon */
    .hero-summary{display:flex;background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border-soft);border-radius:14px;margin-top:10px;overflow:hidden}
    /* .hsum became an <a> when the ribbon started linking to real pages
       instead of switching tabs. display:block + the colour/underline reset
       are what an anchor needs that a button did not. */
    .hsum{flex:1;display:block;text-align:center;padding:13px 8px;border-right:1px solid var(--border-soft);background:none;border-top:none;border-bottom:none;border-left:none;cursor:pointer;font-family:var(--rip-body);transition:background .12s;color:inherit;text-decoration:none}
    .hsum:last-child{border-right:none}
    .hsum:hover{background:rgba(255,255,255,0.03)}
    .hsum-val{font-family:var(--rip-data);font-weight:800;font-size:clamp(16px,4.6vw,22px);color:var(--text);line-height:1.05;display:flex;align-items:baseline;justify-content:center;gap:4px}
    .hsum-val.gold{color:var(--gold)} .hsum-val.fire{color:#fb923c}
    .hsum-lab{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:6px}

    /* ── Tab strip ── */
    .tab-bar{position:sticky;top:0;z-index:30;background:rgba(12,13,20,0.9);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);margin:16px -16px 0;padding:10px 16px;border-bottom:1px solid var(--border-soft)}
    .tabs{display:flex;gap:6px;flex-wrap:wrap}
    .tab-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;background:var(--surface-1);border:1px solid var(--border-soft);border-radius:999px;color:var(--text-2);font-family:var(--rip-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;min-height:38px;white-space:nowrap}
    .tab-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
    .tab-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--rip-act);box-shadow:0 0 0 2px rgba(46,230,214,0.1)}
    .tab-badge{padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.6;background:var(--surface-3);color:var(--text-3)}
    .tab-badge.fire{background:rgba(251,146,60,0.18);color:#fdba74}
    .tab-badge.gold{background:rgba(242,177,52,0.22);color:var(--rip-val)}
    /* .tabpanel / .tabpanel.active removed with the tab strip — this page has
       one section now, and it must not depend on JS to become visible. */
    .acct-settings{padding-top:20px}
    /* ── ONE STEP DOWN THE SETTINGS STACK, SET HERE AND NOWHERE ELSE ──────
       The four blocks in this stack each carried their own `margin-top` — three
       as an inline `style="margin-top:24px"` in account.php and .danger-zone as
       20px in this sheet — so the gap was a fresh choice per block and the last
       one had already drifted. Same shape as rip-ui.css's `.rip-wrap > * + *`:
       zero them all, re-add one step between siblings, and a block added later
       inherits the rhythm by existing rather than by remembering a number.
       24px, not the 28/36 page step: these are panels inside one section, and
       they must read as tighter than the sections either side of them. */
    .acct-settings > * + *{margin-top:24px}
    /* ⚠ A SETTING YOU TOGGLE IS A CONTROL, AND THE LABEL IS THE TARGET. The
       checkbox itself is 15px; what you actually press is the row around it,
       and that measured 21px — half a thumb. Sizing lives here rather than in
       the inline style so both toggles can never drift apart. */
    .setting-toggle{min-height:42px}

    /* ── Stat cards ── */
    /* Was 11px JetBrains Mono, all-caps, .15em tracked — which read as a tiny
       system label rather than a section heading, and is what made these pages
       look like a different product from /rip/. Display face, sentence case. */
    .stats-heading{font-family:var(--rip-display);font-size:clamp(19px,4.4vw,23px);
        font-weight:800;letter-spacing:-.022em;color:var(--text);text-transform:none;
        line-height:1.15;margin:30px 0 13px}
    .stats-heading:first-of-type{margin-top:0}
    .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    @media(min-width:520px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
    .stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .stat-card{background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border-soft);border-radius:16px;padding:14px 12px;text-align:center;transition:transform .15s ease,border-color .15s ease}
    .stat-card:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:var(--shadow-1)}
    .stat-label{font-family:var(--rip-data);font-size:10px;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase;margin-bottom:9px;line-height:1.5}
    .stat-value{font-family:var(--rip-data);font-weight:800;font-size:clamp(14px,3.5vw,20px);color:var(--text);line-height:1.2;word-break:break-word}
    .stat-value.gold{color:var(--gold)}
    .stat-value.profit{color:var(--green)}
    .stat-value.loss{color:var(--red)}
    .stat-sub{font-size:11.5px;color:var(--text-3);margin-top:5px;line-height:1.45}
    .stats-divider{height:1px;background:var(--border-soft);margin:16px 0}
    /* ⚠ THE DIVIDER IS THE BREAK — THE HEADING UNDER IT MUST NOT ADD A SECOND
       ONE. Without this the identical construct (hairline, then a section
       heading) measured 33px in #tab-stats and 47px in #streak on the same
       page: `.stats-heading:first-of-type` keys on TAG type, so it zeroed the
       30px top margin where the <p> happened to be the first <p> of its
       container and did nothing where a plain <p> came first. One visual
       pattern must not have two gaps because of where a paragraph sits. */
    .stats-divider + .stats-heading{margin-top:0}
    /* The P&L card follows a stat grid whose own cells are 10px apart, so the
       12px it used to be given (as an inline margin-bottom on the grid) read as
       another row of that grid rather than as the next surface down. 16px is
       the in-section step this sheet already uses either side of .stats-divider. */
    .stats-grid + .pl-card,.stats-grid-3 + .pl-card{margin-top:16px}

    /* ── P&L bar card ── */
    .pl-card{background:linear-gradient(180deg,var(--surface-1) 0%,rgba(20,16,30,1) 100%);border:1px solid var(--border-soft);border-radius:12px;padding:16px 18px}
    .pl-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
    .pl-card-title{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase}
    .pl-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--rip-data);font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px}
    .pl-badge.profit{background:rgba(74,222,128,0.12);color:var(--green);border:1px solid rgba(74,222,128,0.28)}
    .pl-badge.loss{background:rgba(248,113,113,0.12);color:var(--red);border:1px solid rgba(248,113,113,0.28)}
    .pl-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
    .pl-bar-label{width:42px;flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
    .pl-bar-track{flex:1;height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
    .pl-bar-fill{height:100%;border-radius:4px}
    .spent-fill{background:rgba(148,163,184,0.35)}
    .value-fill-profit{background:linear-gradient(90deg,#22c55e,var(--rip-up))}
    .value-fill-loss{background:linear-gradient(90deg,#dc2626,#f87171)}
    .pl-bar-amount{width:68px;flex:0 0 auto;text-align:right;font-family:var(--rip-data);font-size:12px;font-weight:700;color:var(--text-2)}
    .pl-bar-amount.profit{color:var(--green)}
    .pl-bar-amount.loss{color:var(--red)}
    .pl-bar-note{font-size:11.5px;color:var(--text-3);margin-top:4px;text-align:center}

    /* ── History ── */
    .history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .history-count{font-size:13px;color:var(--text-2);font-weight:600}
    .tier-filter{display:flex;gap:5px;flex-wrap:wrap}
    .tier-filter-btn{padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;background:var(--surface-1);border:1px solid var(--border-soft);color:var(--text-2);cursor:pointer;transition:all .12s;font-family:var(--rip-body)}
    .tier-filter-btn:hover{background:var(--surface-2);color:var(--text)}
    .tier-filter-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--rip-act)}
    .tbl-wrap{background:transparent}
    .pull-list{display:flex;flex-direction:column;gap:10px}
    .pull-card{display:flex;gap:13px;align-items:stretch;background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border-soft);border-left-width:3px;border-radius:14px;padding:12px 14px;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
    .pull-card:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:var(--shadow-1)}
    .pull-thumb{width:62px;height:87px;flex:0 0 auto;object-fit:contain;border-radius:7px;background:#0a0a0a;box-shadow:0 2px 8px rgba(0,0,0,0.5)}
    .pull-thumb-ph{width:62px;height:87px;flex:0 0 auto;border-radius:7px;background:var(--surface-3);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;opacity:.5}
    .pull-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
    .pull-name{font-size:15.5px;font-weight:700;color:var(--text);line-height:1.25;word-break:break-word}
    .pull-meta{font-size:12px;color:var(--text-3);line-height:1.45}
    .pull-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
    .pull-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;text-align:right;padding-left:4px}
    .pull-val{font-family:var(--rip-data);font-weight:800;font-size:18px;color:var(--gold);white-space:nowrap;line-height:1}
    .pull-date{font-size:11px;color:var(--text-3);white-space:nowrap}
    .pull-atpull{font-size:10.5px;color:var(--text-3);white-space:nowrap}
    /* Per-row share. Small, quiet and inside the row's existing right-hand
       column — a utility, not a call to action competing with the value. */
    /* ⚠ 44px MINIMUM, and it is the height that was wrong: the button painted
       25px tall, on the page Aaron scrolls through on a phone while streaming.
       Nothing about the row changes — inline-flex centres the same label inside
       a taller box, and the pill keeps its own width. */
    .pull-share{margin-top:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
                color:var(--text-2);border-radius:7px;padding:5px 12px;font-size:11px;font-weight:700;
                cursor:pointer;font-family:'Outfit',sans-serif;line-height:1.2;white-space:nowrap;
                min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .pull-share:hover{background:rgba(255,255,255,.12);color:var(--text)}
    .chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
    .chip-starter   {background:rgba(124,58,237,0.16);color:#c4b5fd;border-color:rgba(124,58,237,0.45)}
    .chip-silver    {background:rgba(148,163,184,0.16);color:#e2e8f0;border-color:rgba(148,163,184,0.45)}
    .chip-gold      {background:rgba(245,158,11,0.16);color:var(--rip-val);border-color:rgba(245,158,11,0.45)}
    .chip-sensei    {background:rgba(46,230,214,0.16);color:var(--rip-act);border-color:rgba(46,230,214,0.45)}
    .chip-platinum  {background:rgba(192,204,216,0.16);color:#dde6f0;border-color:rgba(192,204,216,0.45)}
    .chip-diamond   {background:rgba(56,189,248,0.16);color:#bae6fd;border-color:rgba(56,189,248,0.45)}
    .chip-lunar     {background:rgba(129,140,248,0.16);color:#c7d2fe;border-color:rgba(129,140,248,0.45)}
    .chip-neutronium{background:rgba(239,68,68,0.16);color:var(--rip-act);border-color:rgba(239,68,68,0.45)}
    .chip-starter.active   {background:rgba(124,58,237,0.40);border-color:rgba(124,58,237,0.85);box-shadow:0 0 0 2px rgba(124,58,237,0.28)}
    .chip-silver.active    {background:rgba(148,163,184,0.35);border-color:rgba(148,163,184,0.85);box-shadow:0 0 0 2px rgba(148,163,184,0.22)}
    .chip-gold.active      {background:rgba(245,158,11,0.38);border-color:rgba(245,158,11,0.85);box-shadow:0 0 0 2px rgba(245,158,11,0.28)}
    .chip-sensei.active    {background:rgba(46,230,214,0.38);border-color:rgba(46,230,214,0.85);box-shadow:0 0 0 2px rgba(46,230,214,0.28)}
    .chip-platinum.active  {background:rgba(192,204,216,0.35);border-color:rgba(192,204,216,0.85);box-shadow:0 0 0 2px rgba(192,204,216,0.22)}
    .chip-diamond.active   {background:rgba(56,189,248,0.38);border-color:rgba(56,189,248,0.85);box-shadow:0 0 0 2px rgba(56,189,248,0.28)}
    .chip-lunar.active     {background:rgba(129,140,248,0.38);border-color:rgba(129,140,248,0.85);box-shadow:0 0 0 2px rgba(129,140,248,0.28)}
    .chip-neutronium.active{background:rgba(239,68,68,0.38);border-color:rgba(239,68,68,0.85);box-shadow:0 0 0 2px rgba(239,68,68,0.28)}
    /* ⚠ EVERY PILL IS WHITE. Aaron, 2026-08-07 and again 2026-08-08: "make every
       pill have white text, not cyan" / "I also said to make this text white on
       the pills."

       The .chip-* classes below each tint their own text, which is right on a
       chip stamped over card art — there the colour IS the tier. As a row of
       filter pills, or as a tier badge on a history row, it produced eight
       different text colours in one control, two of them cyan — and cyan means
       "the thing you click" everywhere else in rip-ui. The tier still reads
       from the pill's fill and border.

       Placed AFTER the .chip-* rules so it wins on source order at equal
       specificity, and applied to the chip classes themselves so it covers the
       filter rows, the history rows, the binder and the modal at once. */
    .chip,
    .chip-starter, .chip-silver, .chip-gold, .chip-sensei,
    .chip-platinum, .chip-diamond, .chip-lunar, .chip-neutronium,
    .chip-starter.active, .chip-silver.active, .chip-gold.active, .chip-sensei.active,
    .chip-platinum.active, .chip-diamond.active, .chip-lunar.active, .chip-neutronium.active,
    .tier-filter .tier-filter-btn, .tier-filter .tier-filter-btn.active { color: var(--text); }

    /* ── Tier PILLS are labels, not colour-coded data ──────────────────────
       The .chip-* rules above tint their own text, which is right on a chip
       stamped over a card (the colour IS the tier there). As a row of filter
       buttons it produced eight different text colours in one control — cyan,
       gold, lilac, near-white — and two of them (sensei, neutronium) came out
       cyan, which everywhere else in rip-ui means "the thing you click".
       Aaron, 2026-08-07: "make every pill have white text, not cyan."
       The tier still reads from the pill's fill and border. (0,2,0) so it
       beats the .chip-* classes without !important. */
    .tier-filter .tier-filter-btn,
    .tier-filter .tier-filter-btn.active{color:var(--text)}
    .psa-chip{background:#fff;color:#111;font-family:var(--rip-data);font-size:9px;padding:4px 8px;border-radius:5px;border:none;white-space:nowrap}
    /* load more */
    .load-more-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px}
    .lm-status{font-size:12px;color:var(--text-3)}
    /* empty */
    .empty-state{text-align:center;padding:48px 20px;color:var(--text-3);line-height:1.6}
    .empty-icon{font-size:38px;margin-bottom:14px}
    .empty-state p{font-size:15px;margin:0}
    .empty-state a{color:var(--accent);text-decoration:none;font-weight:700}
    .empty-state a:hover{text-decoration:underline}

    /* ── Profile edit ── */
    .field{margin-bottom:16px}
    .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--text-2);text-transform:uppercase;margin-bottom:7px}
    .field input,.field select{width:100%;background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--rip-body);font-size:15px;padding:11px 14px;outline:none;transition:border-color .12s,box-shadow .12s}
    .field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,230,214,0.12)}
    .field input::placeholder{color:var(--text-3)}
    .field select option{background:#1a1d2e}
    .save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
    .save-status{font-size:13px;font-weight:600}
    .save-status.ok{color:var(--green)}
    .save-status.err{color:var(--red)}
    /* buttons */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#fb2f5a 0%,var(--rip-act) 55%,var(--rip-act-2) 100%);color:#fff;font-family:var(--rip-body);font-size:13px;font-weight:800;padding:11px 22px;border-radius:12px;border:none;cursor:pointer;min-height:42px;letter-spacing:.01em;box-shadow:0 6px 22px rgba(46,230,214,0.42);transition:filter .15s,transform .1s,box-shadow .2s}
    /* <a class="btn"> is as common as <button class="btn"> across the member
       area, and every one of them came out underlined. */
    a.btn,a.btn:hover{text-decoration:none}
    .btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 9px 30px rgba(46,230,214,0.52)}
    .btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
    .btn.outline{background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:none}
    .btn.outline:hover{background:var(--surface-2);transform:none;filter:none;box-shadow:none}
    .btn.danger{background:transparent;border:1px solid rgba(239,68,68,0.45);color:#f87171;box-shadow:none}
    .btn.danger:hover{background:rgba(239,68,68,0.09);transform:none;filter:none;box-shadow:none}
    /* danger zone */
    /* No margin-top: it is the last block of the .acct-settings stack and takes
       that stack's step. Its own 20px sat at the same (0,1,0) as the step rule
       and won purely on source order, so the last gap on the page was 20 where
       every other was 24 — the exact drift the one-step rule exists to stop.
       (Only host is account.php, inside .acct-settings — grep-checked.) */
    .danger-zone{background:linear-gradient(180deg,rgba(127,29,29,0.12) 0%,rgba(127,29,29,0.06) 100%);border:1px solid rgba(239,68,68,0.22);border-radius:14px;padding:20px 22px}
    .danger-title{font-family:var(--rip-data);font-size:11px;color:#ef4444;letter-spacing:.04em;margin:0 0 10px}
    .danger-zone p{font-size:14px;color:var(--text-2);line-height:1.6;margin:0 0 14px}
    /* modal */
    .modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}
    .modal-back.show{display:flex}
    .modal-card{background:#0f1021;border:1px solid var(--border);border-radius:16px;padding:24px;max-width:440px;width:100%;box-shadow:var(--shadow-2)}
    .modal-card h3{font-family:var(--rip-data);font-size:12.5px;color:var(--rip-act);margin:0 0 14px;letter-spacing:.04em;line-height:1.5}
    .modal-card p{font-size:14px;color:var(--text-2);line-height:1.6;margin:0 0 14px}
    .modal-footer{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
    /* footer */

    /* ── Badges ── */
    /* ⚠ THE BOTTOM MARGIN IS NOT DECORATION. .badge-filters that follows is a
       chip row with only 2px of top padding, so without this the chips sat
       flush against the panel's border at every width (measured 390/768/1280).
       Same defect class as the trades stat grid — a block that assumes whatever
       follows it will provide the space. */
    .badge-summary{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:12px;
        padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
        margin:0 0 16px}
    .badge-summary__v{font-family:var(--rip-data);font-size:30px;font-weight:800;
        color:#2ee6d6;line-height:1;font-variant-numeric:tabular-nums}
    .badge-summary__v span{color:var(--text-3);font-size:.55em}
    .badge-summary__l{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
    .badge-prog{flex:1;min-width:90px;height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
    .badge-prog i{display:block;height:100%;border-radius:4px;
        background:linear-gradient(90deg,#14b8a6,#2ee6d6);box-shadow:0 0 14px rgba(46,230,214,.45)}
    /* Difficulty filter row. Doubles as the progress readout — every chip
       carries its own earned/total, so the numbers are on screen without a
       second panel competing for the same space. At 80 badges the unfiltered
       list is nine phone-screens tall, which is why this exists. */
    .badge-filters{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;margin-bottom:4px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .badge-filters::-webkit-scrollbar{display:none}
    .badge-chip{flex:0 0 auto;background:var(--surface-1);border:1px solid var(--border-soft);
        border-radius:999px;padding:7px 13px;font-size:12px;font-weight:800;color:var(--text-2);
        cursor:pointer;white-space:nowrap;min-height:36px;display:flex;align-items:center;gap:6px}
    .badge-chip b{font-family:var(--rip-data);font-weight:700;font-size:11px;color:var(--text-3)}
    .badge-chip.on{border-color:rgba(46,230,214,.55);color:#2ee6d6;background:rgba(46,230,214,.1)}
    .badge-chip.on b{color:#2ee6d6}
    .badge-chip--legend.on{border-color:rgba(242,177,52,.6);color:#f2b134;background:rgba(242,177,52,.1)}
    .badge-chip--legend.on b{color:#f2b134}
    .badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
    /* Difficulty pip. Gold for legends only — the whole point of the band is
       that it reads differently from across the room. */
    .badge-card{position:relative}
    .badge-card__tier{position:absolute;top:8px;right:9px;font-family:var(--rip-data);
        font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
    .badge-card--legend .badge-card__tier{color:#f2b134}
    .badge-card--legend.earned{border-color:rgba(242,177,52,.5);
        background:linear-gradient(180deg,rgba(242,177,52,.13),var(--surface-1) 62%)}
    .badge-card--legend.earned .badge-card__icon{background:rgba(242,177,52,.16);
        box-shadow:0 0 22px rgba(242,177,52,.28)}
    .badge-card--legend.earned .badge-card__rar{color:#f2b134}
    .badge-empty{text-align:center;padding:30px 18px;color:var(--text-3);font-size:13.5px}
    .badge-card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:11px;
        padding:15px 12px;text-align:center}
    .badge-card__icon{width:46px;height:46px;margin:0 auto 9px;border-radius:13px;background:var(--surface-3);
        display:flex;align-items:center;justify-content:center;font-size:23px}
    .badge-card__name{font-size:13.5px;font-weight:800;line-height:1.28;color:var(--text)}
    .badge-card__desc{font-size:11.5px;color:var(--text-3);margin-top:4px;line-height:1.4}
    .badge-card__rar{font-family:var(--rip-data);font-size:10px;font-weight:700;
        letter-spacing:.07em;color:var(--text-3);margin-top:9px;padding-top:8px;border-top:1px solid var(--border-soft)}
    .badge-card.earned{border-color:rgba(46,230,214,.42);
        background:linear-gradient(180deg,rgba(46,230,214,.11),var(--surface-1) 62%)}
    .badge-card.earned .badge-card__icon{background:rgba(46,230,214,.14);box-shadow:0 0 20px rgba(46,230,214,.22)}
    .badge-card.earned .badge-card__rar{color:#2ee6d6}
    .badge-card.locked{opacity:.45}
    .badge-card.locked .badge-card__icon{filter:grayscale(1)}

    /* ── Collection ── */
    /* ⚠ ONE STEP BETWEEN THE THREE STRIPS ABOVE THE BINDER. Stats bar, view
       switch and pack picker each chose their own gap — 16 / 12 / 14 — three
       numbers for one job, and whichever strip is absent (the picker is empty
       until the tier bar builds) changed the rhythm again. 14px, set on all
       three, so the stack reads the same however many of them are on screen. */
    .col-stats-bar{display:flex;align-items:center;gap:14px;background:var(--surface-1);border:1px solid var(--border-soft);border-radius:12px;padding:14px 18px;margin-bottom:14px;flex-wrap:wrap}
    .col-disc{font-family:var(--rip-data);font-size:22px;font-weight:800;color:var(--text);white-space:nowrap;flex:0 0 auto;line-height:1}
    .col-disc-sep{color:var(--text-3);font-size:16px;font-weight:400;margin:0 2px}
    .col-disc-den{font-family:var(--rip-data);font-size:18px;color:var(--text-3)}
    .col-disc-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:700;white-space:nowrap;flex:0 0 auto;margin-left:2px}
    .col-prog-wrap{flex:1;min-width:80px;height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
    .col-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--rip-act-2))}
    .col-pct-badge{font-family:var(--rip-data);font-size:12px;font-weight:700;color:var(--text-2);flex:0 0 auto;white-space:nowrap}
    .col-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}

    /* ── view switch + gaps switch ── */
    .col-viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .viewseg{position:relative;display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-soft);gap:2px}
    /* ⚠ 44px, AND THE PILL IS THE TARGET. Binder/Grid painted 29px tall and the
       gaps switch 34 — the two controls that decide what the whole page shows,
       both under a thumb's worth of height. Only the box grows; the type, the
       icon and the padding either side are untouched, so the bar reads the
       same. The switch keeps its label as part of the target (one element). */
    .viewseg-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;min-height:44px;border:none;border-radius:999px;
        background:transparent;color:var(--text-3);font-family:var(--rip-body);font-size:12.5px;font-weight:800;
        letter-spacing:.01em;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s;white-space:nowrap}
    .viewseg-btn svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:.6;opacity:.9}
    .viewseg-btn:hover{color:var(--text-2)}
    .viewseg-btn.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--rip-act-2));
        box-shadow:0 2px 10px rgba(46,230,214,.38)}
    .viewseg-btn:focus-visible{outline:2px solid var(--rip-act);outline-offset:2px}

    .gapsw{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;min-height:44px;border-radius:999px;
        background:var(--surface-2);border:1px solid var(--border-soft);cursor:pointer;
        font-family:var(--rip-body);transition:border-color .15s,background .15s}
    .gapsw:hover{border-color:var(--text-3)}
    .gapsw:focus-visible{outline:2px solid var(--rip-act);outline-offset:2px}
    .gapsw-track{position:relative;width:34px;height:20px;border-radius:999px;background:var(--surface-3);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .18s;flex:0 0 auto}
    .gapsw-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#8b93a7;
        transition:transform .18s cubic-bezier(.4,1.4,.5,1),background .18s}
    .gapsw.on .gapsw-track{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(46,230,214,.55)}
    .gapsw.on .gapsw-knob{transform:translateX(14px);background:var(--accent)}
    .gapsw-lab{font-size:12.5px;font-weight:800;color:var(--text-3);transition:color .15s;white-space:nowrap}
    .gapsw.on .gapsw-lab{color:var(--text)}

    /* ══ BINDER ══ */
    .binder{position:relative;border-radius:16px;padding:14px 14px 12px;
        background:linear-gradient(160deg,#241017,#14070c 60%),
                   repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 5px);
        border:1px solid #3d1a24;
        box-shadow:0 30px 70px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 14px rgba(0,0,0,.6)}
    .binder::before{content:'';position:absolute;inset:6px;border-radius:11px;pointer-events:none;border:1px dashed rgba(255,255,255,.07)}
    .binder-stage{position:relative;perspective:5200px;perspective-origin:50% 50%}
    .spread{display:flex;align-items:stretch;justify-content:center;position:relative}
    .spine{flex:0 0 30px;align-self:stretch;position:relative;border-radius:3px;
        background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 40%,rgba(0,0,0,.85));
        display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:22px 0;z-index:6}
    .ring{width:24px;height:24px;border-radius:50%;border:3px solid #b9c2cf;border-right-color:#5c6675;
        border-bottom-color:#79828f;box-shadow:0 1px 3px rgba(0,0,0,.8),inset 0 0 4px rgba(0,0,0,.5);background:transparent}
    .slot-page{flex:1 1 0;min-width:0;display:flex}
    .slot-page.mobile-hidden{display:none}
    .page{flex:1 1 0;min-width:0;position:relative;padding:12px;border-radius:6px;
        background:linear-gradient(180deg,#161c29,#0e131d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
        backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint style}
    .page.left{border-radius:6px 2px 2px 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset -22px 0 34px -22px rgba(0,0,0,.95)}
    .page.right{border-radius:2px 6px 6px 2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 22px 0 34px -22px rgba(0,0,0,.95)}
    .page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .page-no{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-family:var(--rip-data);font-size:9px;color:var(--text-3);letter-spacing:.06em}
    .page-head{display:flex;align-items:center;gap:7px;margin-bottom:9px;min-height:16px}
    .page-head .ph-tier{font-family:var(--rip-data);font-size:9px;padding:3px 7px;border-radius:4px;color:#0b0d12;white-space:nowrap}
    .page-head .ph-sub{font-size:10px;color:var(--text-3);font-weight:700;letter-spacing:.05em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* pocket */
    /* ⚠ The pocket is now TWO parts: .pk-art (the sleeve, which owns the 5:7
       ratio and every absolute child) and .pk-meta (the caption, underneath).
       They used to be one box with the caption absolutely positioned over the
       card — three nowrap items in a ~94px pocket, so the value clipped
       mid-figure and the stack buried the art. Anything absolutely positioned
       inside a pocket belongs to .pk-art; .pocket itself is now a plain flex
       column and positions nothing. */
    .pocket{position:relative;display:flex;flex-direction:column;min-width:0}
    .pk-art{position:relative;aspect-ratio:5/7;border-radius:7px;overflow:hidden;
        background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 45%,rgba(0,0,0,.28));
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 2px 6px rgba(0,0,0,.5)}
    .pk-art::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:7px;
        background:linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 16%,transparent 34%,transparent 72%,rgba(255,255,255,.07) 100%);
        mix-blend-mode:screen;opacity:.75}
    .pocket .card{position:absolute;inset:3px;border-radius:5px;overflow:hidden;border:1.5px solid var(--tc,#333);background:var(--surface-2)}
    .pocket.owned{cursor:pointer;transition:transform .14s}
    .pocket.owned:hover{transform:translateY(-2px)}
    .pocket.owned:hover .card{filter:brightness(1.12)}
    .pocket.owned:focus-visible{outline:3px solid var(--accent);outline-offset:2px;transform:translateY(-2px)}
    .pocket .card img{width:100%;height:100%;object-fit:cover;display:block}

    /* Only things that CANNOT grow are allowed on the art: a grade is one or
       two digits, a duplicate count three characters at most. */
    .pk-badge{position:absolute;z-index:5;pointer-events:none;
        font-family:var(--rip-data);font-weight:800;line-height:1;white-space:nowrap;
        border-radius:4px;padding:3px 4px;font-size:8.5px}
    .pk-grade{left:5px;bottom:5px;color:#111}
    .pk-count{right:5px;top:5px;color:#fff;background:rgba(7,10,16,.86);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
    .pk-off{left:5px;top:5px;font-size:7px;letter-spacing:.06em;color:#0b0d12;background:#8b93a7}
    /* Moved tier is good news — it is worth more than it was. Amber is the
       money colour everywhere else in rip-ui, and this is a value story. */
    .pk-moved{left:5px;top:5px;font-size:7px;letter-spacing:.06em;color:#0b0d12;background:var(--gold)}
    /* ── The Post Office's two pocket states ──────────────────────────────
       ⚠ BOTH SIT BOTTOM-RIGHT, WHICH IS THE ONLY FREE CORNER. .pk-off and
       .pk-moved own top-left, .pk-count top-right, .pk-grade bottom-left. A
       card that is simultaneously MOVED and picked would otherwise stack two
       badges in one corner. They are mutually exclusive with each other, and
       neither can grow: one is a tick, the other a padlock, both 11px. */
    .pk-picked{right:5px;bottom:5px;width:16px;height:16px;padding:0;display:grid;place-items:center;
        color:#04121a;background:var(--accent)}
    .pk-lock{right:5px;bottom:5px;width:16px;height:16px;padding:0;display:grid;place-items:center;
        color:var(--text-3);background:rgba(7,10,16,.86);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
    /* The picked pocket reads as picked from across the room: the sleeve takes
       the action colour, not a subtle tint. One glance, no counting. */
    .pocket.is-picked .pk-art{box-shadow:inset 0 0 0 2px var(--accent),0 0 18px rgba(45,212,191,.32)}
    .pocket.is-lock{opacity:.42;cursor:default}
    .pocket.is-lock:hover{transform:none}
    /* Why a card cannot be sent goes in the CAPTION, never on the art — at
       8.5px on a 112px pocket a reason is unreadable and a wall of text. */
    .pk-why{flex:0 0 auto;font-family:var(--rip-data);font-size:9px;font-weight:700;
        color:var(--text-3);white-space:nowrap}

    /* The caption, with the whole pocket width to itself. It ellipsises now
       instead of being clipped by the sleeve's overflow:hidden. */
    /* ⚠ EVERY POCKET RESERVES THE CAPTION ROW, FILLED OR NOT, OR THE BINDER
       CHANGES HEIGHT AS YOU TURN THE PAGE. Aaron, 2026-08-25: "it adds a new
       line of text when a Pokémon has been caught, meaning the binder height
       changes size on each page. not good." Only `.pocket.owned` rendered a
       .pk-meta, so a caught card was 17.9px taller than an empty or filler
       pocket and each sheet was as tall as its tallest ROW. Measured at 390px
       before this: owned 187.8px vs empty 169.9px, and four sheets of 9 pockets
       came out 573.4 / 555.5 / 537.6 / 519.6px depending only on how many cards
       you had caught.

       ⚠ ONE NUMBER, ONE PLACE. --pk-cap is the caption's font size; the
       reserved height is derived from it, so the two cannot drift the way two
       hand-tuned pixel values would. Change the size and the reservation
       follows. */
    .pocket{--pk-cap:9.5px}
    .pk-meta{display:flex;align-items:baseline;gap:5px;margin-top:4px;min-width:0;
        min-height:calc(var(--pk-cap) * 1.25)}
    .pk-name{flex:1;min-width:0;font-size:var(--pk-cap);font-weight:700;color:var(--text-2);
        line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .pk-val{flex:0 0 auto;font-family:var(--rip-data);font-size:var(--pk-cap);font-weight:800;
        color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}

    .pocket.empty .pk-art{background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(0,0,0,.35));cursor:default}
    .pocket.empty .pslot{position:absolute;inset:3px;border-radius:5px;border:1px dashed rgba(255,255,255,.10);
        background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 6px,transparent 6px 12px);
        display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
    .pocket.empty .pslot .q{font-size:26px;font-weight:900;color:rgba(255,255,255,.13);line-height:1}
    .pocket.empty .pslot .tag{font-family:var(--rip-data);font-size:7.5px;padding:2px 5px;border-radius:3px;opacity:.55;color:#0b0d12}
    .pocket.filler{opacity:.28}
    .pocket.filler .pslot{position:absolute;inset:3px;border-radius:5px;border:1px solid rgba(255,255,255,.05)}
    /* turning leaf */
    .leaf{position:absolute;top:0;z-index:20;transform-style:preserve-3d;will-change:transform;pointer-events:none}
    .leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:6px}
    .leaf .face.back{transform:rotateY(180deg)}
    .leaf .face .page{height:100%}
    .leaf .shade{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0;border-radius:6px;z-index:9}
    .leaf .gloss{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,0) 45%)}
    .leaf .face.back .gloss{background:linear-gradient(270deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%)}
    .sheet-back{height:100%;border-radius:6px;padding:12px;background:linear-gradient(180deg,#131926,#0c111a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
    .sheet-back .sbg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%}
    .sheet-back .sbg i{display:block;border-radius:7px;background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
    .reveal-shade{position:absolute;top:0;bottom:0;z-index:15;pointer-events:none;opacity:0;border-radius:6px}
    /* contents sheet */
    .contents-title{font-family:var(--rip-data);font-size:10.5px;color:var(--rip-act);letter-spacing:.04em;margin:2px 0 4px}
    .contents-sub{font-size:11px;color:var(--text-3);line-height:1.5;margin-bottom:12px}
    .toc{display:flex;flex-direction:column;gap:7px}
    /* ⚠ EIGHT OF THESE ARE THE ONLY WAY TO REACH A SECTION OF THE BINDER, and
       they were 36px in a list of eight — the row above and the row below are
       both live targets, so a miss goes to the wrong pack. 44px, with the
       padding unchanged so a row with a longer label still fits its content. */
    .toc-row{display:flex;align-items:center;gap:9px;padding:8px 10px;min-height:44px;border-radius:9px;cursor:pointer;text-align:left;
        background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);transition:.14s;font-family:var(--rip-body)}
    .toc-row:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
    .toc-row:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
    .toc-chip{font-family:var(--rip-data);font-size:8.5px;padding:4px 6px;border-radius:4px;color:#0b0d12;flex:0 0 auto;min-width:56px;text-align:center}
    .toc-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;min-width:40px}
    .toc-bar i{display:block;height:100%;border-radius:3px}
    .toc-num{font-family:var(--rip-data);font-size:10.5px;font-weight:800;color:var(--text-2);flex:0 0 auto;white-space:nowrap}
    .toc-pg{font-size:9px;color:var(--text-3);flex:0 0 auto;white-space:nowrap;font-weight:700}
    .toc-empty{opacity:.42;cursor:default}
    /* binder nav */
    .bd-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap}
    .bd-arrow{appearance:none;width:44px;height:44px;border-radius:50%;cursor:pointer;background:var(--surface-2);
        border:1px solid var(--border);color:var(--text);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
    .bd-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
    .bd-arrow:disabled{opacity:.3;cursor:default}
    .bd-counter{font-family:var(--rip-data);font-size:13px;font-weight:800;color:var(--text-2);min-width:120px;text-align:center}
    .bd-counter small{display:block;font-family:var(--rip-body);font-size:9.5px;color:var(--text-3);font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
    /* ⚠ THE SLIDER'S BOX IS THE GRAB AREA, AND IT WAS 16px TALL. A range input
       is only as tall as its track unless it is told otherwise, so skimming 449
       pages meant landing on a 16px line while holding the phone one-handed.
       44px box, same 8px track — the thumb stays centred in it and nothing
       about the control's behaviour or its value changes. */
    .bd-jump{width:100%;max-width:420px;height:44px;margin:0;accent-color:var(--accent);cursor:pointer}
    .bd-hint{text-align:center;font-size:11px;color:var(--text-3);margin-top:8px}
    .bd-share{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;min-height:44px;border-radius:999px;cursor:pointer;
        background:rgba(46,230,214,0.16);border:1px solid rgba(46,230,214,0.5);color:var(--rip-act);
        font-family:var(--rip-body);font-size:13px;font-weight:800;transition:.15s;min-width:210px;justify-content:center}
    .bd-share:hover{background:rgba(46,230,214,0.28);color:#fff;border-color:var(--accent)}
    .bd-share:focus-visible{outline:2px solid var(--rip-act);outline-offset:2px}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    @media(max-width:760px){
        /* Aaron, 2026-08-07: "make the 9 cards in the binder bigger if
           possible." Nothing here changes the layout — it takes the padding out
           from between the viewport edge and the card. At 390px the chain was
           16 wrap + 10 binder + 20 spine + 12 page + 2x6 gaps, leaving 94px a
           pocket; this recovers ~14 of that (a ~15% larger card) by bleeding
           the binder past the wrap's gutter and trimming each cushion. */
        .binder{padding:8px 8px 7px;border-radius:13px;margin-inline:-12px}
        .spine{flex:0 0 16px;padding:14px 0;order:-1}
        .ring{width:13px;height:13px;border-width:2.5px}
        .page{padding:8px}
        .page.left{border-radius:2px 6px 6px 2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 22px 0 30px -22px rgba(0,0,0,.95)}
        .page-grid{gap:5px}
        /* One token, so the reserved row shrinks with the text it reserves. */
        .pocket{--pk-cap:9px}
        .bd-counter{min-width:96px;font-size:12px}
        .viewseg-btn{padding:7px 13px;font-size:12px}
    }
    @media (prefers-reduced-motion: reduce){
        .pocket.owned,.pocket.owned:hover{transition:none;transform:none}
        .gapsw-knob{transition:none}
    }
    .col-owned-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;user-select:none;white-space:nowrap}
    .col-owned-toggle input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
    .col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
    .col-tile{position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--tc,#333);aspect-ratio:5/7;background:var(--surface-2);transition:transform .15s,filter .15s}
    .col-tile.owned{cursor:pointer}
    .col-tile.owned:hover{transform:translateY(-2px);filter:brightness(1.1)}
    .col-tile.locked{background:#080a10;border-color:rgba(255,255,255,0.07);cursor:default}
    /* The "showing the first N" rung. ⚠ grid-column:1/-1 and no aspect-ratio:
       it is a sibling of .col-tile inside the same grid, so without the span it
       would be squeezed into one 108px column and cropped to a 5:7 box. */
    .col-tile-more{
        grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;
        padding:22px 16px;margin-top:4px;text-align:center;
        border:1px dashed var(--line,rgba(255,255,255,.14));border-radius:12px;
        background:var(--surface-2,rgba(255,255,255,.03));
    }
    .col-tile-more p{margin:0;font-size:14px;color:var(--muted,#9aa8b8)}
    .col-tile-more .rip-btn{min-width:0}
    .col-tile img{width:100%;height:100%;object-fit:cover;display:block}
    .col-img-ph{width:100%;height:100%;background:var(--surface-3)}
    .col-footer{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent 0%,rgba(0,0,0,0.92) 100%);padding:24px 7px 7px;pointer-events:none}
    .col-card-name{font-size:9px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .col-grade-row{display:flex;align-items:center;gap:4px}
    .col-count-badge{font-size:9px;font-weight:800;color:rgba(255,255,255,0.6);font-family:var(--rip-data)}
    .col-val{font-family:var(--rip-data);font-size:9px;font-weight:800;color:var(--gold);margin-left:auto;white-space:nowrap}
    .col-mystery-q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:900;color:rgba(255,255,255,0.22);user-select:none;pointer-events:none}
    .col-tier-hint{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
    /* card detail modal */
    .col-dm-back{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;display:none;align-items:center;justify-content:center;padding:12px}
    .col-dm-back.show{display:flex}
    .col-dm{position:relative;width:calc(100vw - 24px);max-width:360px;aspect-ratio:5/7;max-height:90vh;border-radius:18px;overflow:hidden;border:2px solid var(--border);box-shadow:0 0 40px rgba(0,0,0,0.8);background:#080a10 center/cover no-repeat}
    .col-dm-mystery-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:900;color:rgba(255,255,255,0.1);z-index:1;user-select:none}
    .col-dm-close{position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.65);border:none;color:#fff;border-radius:50%;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
    .col-dm-overlay{position:absolute;bottom:0;left:0;right:0;z-index:5;background:linear-gradient(transparent 0%,rgba(0,0,0,0.72) 18%,rgba(0,0,0,0.92) 50%,rgba(0,0,0,0.97) 100%);padding:56px 18px 20px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:70%}
    .col-dm-name{font-family:var(--rip-data);font-size:10.5px;color:#fff;line-height:1.6}
    .col-dm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
    .col-dm-meta{font-size:12px;color:rgba(255,255,255,0.65);line-height:1.7}
    .col-dm-market{font-family:var(--rip-data);font-size:15px;font-weight:800;color:var(--gold)}
    .col-dm-updown{font-size:11px;font-weight:700;margin-left:6px}
    .col-dm-updown.up{color:var(--rip-up)}.col-dm-updown.down{color:#f87171}.col-dm-updown.flat{color:rgba(255,255,255,0.5)}
    .col-dm-divider{border:none;border-top:1px solid rgba(255,255,255,0.12);margin:2px 0}
    .col-dm-pulls-title{font-size:10px;font-weight:700;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.08em}
    .col-dm-pull{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.07)}
    .col-dm-pull:last-child{border-bottom:none}
    .col-dm-pull-date{font-size:11px;color:rgba(255,255,255,0.55);flex:1}
    .col-dm-pull-val{font-family:var(--rip-data);font-size:11px;font-weight:700;color:var(--gold)}
    .col-dm-locked-msg{font-size:13px;color:rgba(255,255,255,0.55);text-align:center;padding:4px 0 2px;line-height:1.6}

    /* ── Mobile ≤ 560px ── */
    @media(max-width:560px){
        .col-dm{max-width:calc(100vw - 24px)}
        .pull-thumb,.pull-thumb-ph{width:54px;height:76px}
        .pull-name{font-size:14.5px}
        .pull-val{font-size:16px}
        .profile-hero{padding:16px}
        .avatar{width:50px;height:50px;font-size:17px}
        .profile-name{font-size:17px}
        .stats-grid{grid-template-columns:repeat(2,1fr)}
        .stats-grid-3{grid-template-columns:repeat(3,1fr)}
        .tab-btn{padding:7px 12px;font-size:12px}
        .pl-bar-amount{width:58px;font-size:11px}
    }
    @media(max-width:380px){
        .stats-grid-3{grid-template-columns:repeat(1,1fr)}
        .tab-btn{padding:5px 9px;font-size:11px}
    }

/* ══ THE SHELF: ONE BINDER PER SET ════════════════════════════════════════
   Aaron, on the first attempt (a set index inside one book): "it can't be one
   binder. the user is scrolling forever… I thought you were going to create a
   separate binder for each set… the gifting system is beautiful. something
   beautiful like that."

   So the motion is borrowed from rip/trades.css rather than invented: 220ms on
   cubic-bezier(.2,1.05,.4,1), the same curve the gift sheet rises on. And the
   same discipline — prefers-reduced-motion gets a DIFFERENT path, not a slower
   one: no transform, no transition, the binder is simply there. */
.bd-shelf{outline:none}
.bd-shelf__head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.bd-shelf__n{font-family:var(--rip-display,inherit);font-weight:800;font-size:15px;color:var(--text)}
.bd-shelf__hint{font-size:12px;color:var(--text-3)}
.bd-shelf__empty,.bd-shelf__rest{font-size:12.5px;color:var(--text-3);margin:14px 2px 0;line-height:1.5}

/* auto-fill, so the shelf is two covers wide on a phone and as many as fit on a
   desktop without a breakpoint per size. */
.bd-shelf__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}

/* ⚠ THE COVER IS THE WHOLE TILE, THE PACK IS NEVER CROPPED, AND THE CAPTION
   NEVER SITS ON IT.

   Three rounds of Aaron on this tile, and the third one undoes half of the
   second, so all three are here:

   1. "make the pack image fit properly on the shelf and binder. consider making
      it the entire background image of the binder and how to do that whilst
      keeping the text readable" — the pack was a 5:8.8 shot inside a 1:1 box at
      74% width, so a third of every tile was gutter.
   2. "make each set selection taller so that the image fills on the width too."
   3. "you can't see the full pack because the text is covering it, and the name
      of the pack usually sits at the bottom of the image/pack."

   (3) is the cost of (1) coming due, and he is right: a booster pack prints its
   set name across its FOOT, so a caption overlaid on the bottom strip hides the
   one thing that identifies the pack. "Over the logo band, never the art" was
   wrong — on a pack the logo band IS the identifying part.

   So the layers split by job rather than by position:

     .bdc__bg    object-fit:COVER, blurred — fills the whole tile, caption band
                 included, so there is still no dead space anywhere.
     .bdc__art   its own row, sized so a width-filling pack fits inside it. The
                 pack is CONTAIN and untouched: cropping it was rejected once
                 already on the clips.
     .bdc__body  a row BELOW the art, over the blur. Nothing is covered.

   ⚠ THE ART ROW'S ASPECT IS DERIVED FROM THE PACK, NOT PICKED. A trimmed pack
   is ~0.57 wide-to-tall, so filling the tile's width needs (width − insets) /
   0.57 of height; at a 173px tile that is 275px of pack in a 288px row. 3/5 is
   that number. Retune it with pack-trim.php, never alone — a looser trim leaves
   border in the image and the pack stops filling the width at the same ratio.

   ⚠ THE NAME RESERVES TWO LINES WHETHER IT USES THEM OR NOT. Grid rows size to
   their tallest tile, so a one-line name beside a two-line one ("Japanese
   Terastal Festival") makes a ragged shelf and moves every tile below it. Same
   discipline as the binder pocket's caption row. */
.bdc{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;
  background:var(--panel-2,#141a24);border:1px solid var(--line,#243044);border-radius:12px;
  overflow:hidden;cursor:pointer;color:inherit;font:inherit;
  transition:transform 220ms cubic-bezier(.2,1.05,.4,1),border-color 150ms,box-shadow 220ms}
.bdc:hover,.bdc:focus-visible{transform:translateY(-3px);border-color:var(--bdc-c);
  box-shadow:0 10px 26px -12px var(--bdc-c)}
/* the spine: the tier colour, down the hinge edge, so a shelf reads as a shelf */
.bdc__spine{position:absolute;left:0;top:0;bottom:0;width:6px;z-index:3;background:var(--bdc-c);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.35)}
/* The backdrop is on the TILE, not the art row, so the caption band sits on the
   pack's own colours instead of a flat panel. */
.bdc__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;
  transform:scale(1.18);filter:blur(16px) saturate(1.25) brightness(.5);opacity:.85}
.bdc__art{position:relative;z-index:1;flex:0 0 auto;aspect-ratio:3/5;
  display:grid;place-items:center;overflow:hidden}
/* Insets kept tight — 5px, and 11px on the hinge side to clear the spine — so
   "fills the width" is true rather than nearly true. */
.bdc__fg{position:absolute;inset:5px 5px 5px 11px;width:auto;height:auto;
  max-width:calc(100% - 16px);max-height:calc(100% - 10px);margin:auto;
  object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
/* A card nobody owns yet is the thing to go and get, so it is present but dimmed
   rather than absent — an empty cover says nothing about the set. */
.bdc__art img.is-missing{filter:grayscale(1) brightness(.55);opacity:.75}
.bdc__noart{font-family:var(--rip-display,inherit);font-size:30px;font-weight:800;color:#fff;opacity:.35}
.bdc__body{position:relative;z-index:2;flex:1 1 auto;
  padding:8px 10px 10px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:rgba(4,7,11,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.bdc__name{font-family:var(--rip-display,inherit);font-weight:800;font-size:12.5px;line-height:1.25;
  min-height:2.5em;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Count and bar share one row: two stacked rows of chrome under every tile is
   ~13px per tile that the pack could have had instead. */
.bdc__prog{display:flex;align-items:center;gap:8px}
.bdc__num{flex:0 0 auto;font-family:var(--rip-data,inherit);font-variant-numeric:tabular-nums;
  font-weight:800;font-size:13px;color:var(--bdc-c)}
.bdc__num span{color:rgba(255,255,255,.55);font-weight:400}
.bdc__bar{flex:1 1 auto;min-width:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.16);overflow:hidden}
.bdc__bar i{display:block;height:100%;background:var(--bdc-c);border-radius:2px}

/* the way back out of an open binder */
.bd-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:7px 12px;
  background:var(--panel-2,#141a24);border:1px solid var(--line,#243044);border-radius:999px;
  color:var(--text-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:border-color 150ms,color 150ms}
.bd-back:hover,.bd-back:focus-visible{color:var(--text);border-color:var(--rip-act,#22d3ee)}

/* the binder flowing in as it opens — the gift sheet's curve, on the stage */
.binder-stage.bd-in{animation:bdFlowIn 220ms cubic-bezier(.2,1.05,.4,1) both}
@keyframes bdFlowIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

/* ── the inside front cover ──────────────────────────────────────────────
   ⚠ PAGE 1 IS EXACTLY AS TALL AS EVERY OTHER PAGE, AND IT IS MEASURED, NOT
   GUESSED (Aaron, 2026-08-28: "I've told you many times to not have any binder
   pages at different heights. make the first page of the binder the same height
   as the other pages." — the third time this class of bug has reached him;
   the .pk-meta rule above is the first two).

   The height of a sheet is 3 pocket rows + 2 gaps, and a pocket is 5:7 art plus
   a reserved caption row — a number that changes with the column width, the
   font and any future pocket change. Recomputing it here in a min-height would
   be a SECOND copy of that arithmetic, silently wrong the next time a pocket
   changes. So the cover renders a REAL .page-grid of nine real filler pockets,
   hidden, and the cover art is laid over it. The page is then the same height
   as a sheet by construction, at every viewport, forever — and if a pocket ever
   changes height the cover follows it without anyone remembering to. */
.bdcov-wrap{position:relative}
.bdcov-ghost{visibility:hidden;pointer-events:none}
/* ⚠ THE ART IS A FLEX ROW, NOT AN ABSOLUTE BOX WITH A GUESSED BOTTOM INSET.
   It was `inset:10px 10px 92px` — 92px reserved for the caption — while the
   caption's own box measured ~142px, so the pack ran 50px underneath it and the
   binder's name printed across the pack's name. A reserved constant cannot
   track a block whose height comes from its content; `flex:1` and `flex:0 0
   auto` cannot disagree. Same fault, same fix, as the shelf tile above. */
.bdcov{position:absolute;inset:0;overflow:hidden;border-radius:6px;
  display:flex;flex-direction:column;text-align:center}
/* Same two layers as the shelf tile: a blurred COVER backdrop fills the page in
   the pack's own colours, the real pack sits over it CONTAINED and uncropped. */
.bdcov__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;
  transform:scale(1.2);filter:blur(22px) saturate(1.25) brightness(.42)}
/* ⚠ THE IMAGE IS ABSOLUTELY POSITIONED, AND A PERCENTAGE HEIGHT HERE IS NOT.
   `max-height:100%` on a child of a `flex:1` item resolves against an
   INDEFINITE height, so the browser is entitled to ignore it and paint the
   image at its natural size — which it did: measured at 390px the pack ran
   59.5px past the caption's top edge, i.e. exactly the bug this round is
   fixing, reintroduced one element lower down. Absolute insets against a
   positioned parent always resolve, at any viewport. Measured after: −16.6px
   at 390, −75.6 at 1280 (negative = clear). */
.bdcov__art{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:grid;place-items:center}
.bdcov__art img{position:absolute;inset:10px 10px 6px;width:auto;height:auto;margin:auto;
  max-width:calc(100% - 20px);max-height:calc(100% - 16px);object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.65))}
.bdcov__art img.is-missing{filter:grayscale(1) brightness(.55);opacity:.75}
.bdcov__noart{font-family:var(--rip-display,inherit);font-size:38px;font-weight:800;color:#fff;opacity:.35}
.bdcov__meta{position:relative;z-index:2;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 14px 14px;background:rgba(4,7,11,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.bdcov__name{font-family:var(--rip-display,inherit);font-weight:800;font-size:17px;line-height:1.2;
  color:#fff}
.bdcov__num{font-family:var(--rip-data,inherit);font-variant-numeric:tabular-nums;
  font-weight:800;font-size:20px;color:var(--bdc-c)}
.bdcov__num span{color:rgba(255,255,255,.62);font-weight:400;font-size:15px}
.bdcov__bar{width:min(76%,220px);height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.bdcov__bar i{display:block;height:100%;background:var(--bdc-c);border-radius:2px}
.bdcov__sub{font-size:11.5px;color:rgba(255,255,255,.68);line-height:1.45}

@media (prefers-reduced-motion:reduce){
  .bdc,.bd-back{transition:none}
  .bdc:hover,.bdc:focus-visible{transform:none}
  .binder-stage.bd-in{animation:none}
}