/* =============================================================================
   css/depot-redesign.css - THE DEPOT REDESIGN, FOUNDATION LAYER (Phase 1)

   Source of truth: build_package/README.md (the constitution) +
   build_package/"Depot - Complete Design.dc.html" chapters 00/01/02/12 +
   build_package/exports/desktop/{01-nav-header,02-login,12-states}.png and the
   true-390 renders under build_package/exports/mobile-390/.

   SCOPING RULE (deliberate, so nothing not-yet-redesigned moves): every selector
   in this sheet is either a `.rd-` prefixed class, an `.rd-`/`--rd-` custom
   property, or an `@keyframes rd-*`. There is not one bare element selector and
   not one selector that can reach existing markup. Surfaces opt IN by wearing
   the classes. See PR notes for the CSSOM no-move check.

   The six override rules from the README are acceptance criteria, and three of
   them are enforceable in CSS and are enforced here:
     #4 Placeholders are designed  -> .rd-ph / .rd-scan-slot, never an <img> alt.
     #5 390 is first-class         -> its own layout block, 44px targets.
     #6 Locked says why            -> .rd-btn.is-locked always pairs with .rd-reason.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Press+Start+2P&family=VT323&display=swap');

:root{
  /* ---- palette (chapter 00, verbatim) ---------------------------------- */
  --rd-sky:#2eb2e6;          /* page sky                                     */
  --rd-navy:#10456b;         /* primary navy - ALL borders + hard shadows    */
  --rd-navy-deep:#072c47;    /* deep navy - scoreboard, on-dark borders      */
  --rd-bar:#0d2b4d;          /* the header bar fill (ch01 shot)              */
  --rd-hairline:rgba(255,255,255,.14); /* the ONLY separator in the one-bar header */
  --rd-dim:#5f89a8;      /* 8-bit LOG OUT / season chip on the bar */
  --rd-bar-h:60px;       /* rule 7: one line, 60px */
  --rd-step:20px;        /* rule 8: one spacing unit */
  --rd-cream:#fff7df;        /* trays, cautions                              */
  --rd-gold:#ffd23e;         /* coins, rewards                               */
  --rd-gold-deep:#e8a90f;    /* the cream caution card's hard shadow         */
  --rd-orange:#f4823c;       /* hot actions                                  */
  --rd-green:#7be36b;        /* confirm                                      */
  --rd-green-deep:#2e9e46;   /* VT323 record numerals, tile gradient foot    */
  --rd-red:#e2543e;          /* outs, danger                                 */
  --rd-blue:#3a7bd5;         /* info                                         */
  --rd-grass:#41a14b;
  --rd-tint:#f2f9fd;         /* field tint - filled inputs, sub panels       */
  --rd-tint-line:#cde6f4;    /* the tint's own border                        */
  --rd-tint-deep:#dff1fb;    /* dividers, placeholder fill                   */
  --rd-muted:#5b7f97;        /* muted text                                   */
  --rd-muted-2:#8fb2c6;      /* muted text, lighter / locked label           */
  --rd-ink-gold:#7a5b00;     /* text on gold                                 */
  --rd-ink-red:#c9560f;      /* error headline                               */
  --rd-ink-red-2:#a33f2c;    /* error body                                   */
  --rd-ink-green:#1d6b2a;    /* text on the pale green chip                  */

  /* ---- type ------------------------------------------------------------ */
  --rd-ui:'Baloo 2',system-ui,sans-serif;          /* ALL UI text            */
  --rd-micro:'Press Start 2P',monospace;           /* micro labels ONLY      */
  --rd-num:'VT323',monospace;                      /* every scoreboard/stat  */

  /* ---- shape ----------------------------------------------------------- */
  --rd-bd:4px;               /* panel border                                 */
  --rd-bd-sub:3px;           /* sub-card / control border                    */
  --rd-r:20px;               /* panel radius                                 */
  --rd-r-sub:13px;           /* sub-card radius (12-14 band)                 */
  --rd-r-pill:999px;
  /* HARD shadows. Never a blur radius anywhere in this sheet. */
  --rd-sh:0 7px 0 var(--rd-navy);
  --rd-sh-sub:0 4px 0 var(--rd-navy);
  --rd-sh-press:0 2px 0 var(--rd-navy);
  --rd-sh-deep:0 4px 0 var(--rd-navy-deep);
  --rd-sh-deep-press:0 2px 0 var(--rd-navy-deep);

  /* the one gloss: a white wash over the top 45% of any filled pill */
  --rd-gloss:linear-gradient(#fff8,#fff0 45%);
  /* the scan-placeholder stripe */
  --rd-stripe:repeating-linear-gradient(45deg,rgba(16,69,107,.09) 0 9px,transparent 9px 18px);
}

/* One scoped reset. The shells disagree about box-sizing (index.html sets it
   globally, game/shop.html does not), and a 100%-wide pill with a 3px border
   overflows its panel on the sheet that does not. Scoped to rd- classes so it
   cannot reach anything else. */
[class^="rd-"],[class*=" rd-"]{box-sizing:border-box}


/* =============================================================================
   MOTION VOCABULARY
   Keyframe names are the design's names with an `rd-` prefix so they can never
   collide with a keyframe already defined in depot-style.css / pack-shop-v2.css
   (a duplicate @keyframes name silently wins by source order - exactly the kind
   of quiet breakage AGENTS.md 4 is about). Every animation is exposed as a
   utility class so the reduced-motion override below can reach ALL of them in
   one rule instead of chasing them per component.
   ========================================================================== */
@keyframes rd-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rd-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
@keyframes rd-cardpop{0%{transform:translateY(46px) scale(.6);opacity:0}60%{transform:translateY(-10px) scale(1.05)}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes rd-tearoff{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(90px,-140px) rotate(38deg);opacity:0}}
@keyframes rd-ripshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes rd-starburst{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes rd-bannerpop{0%{transform:scale(.4) rotate(-4deg);opacity:0}60%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes rd-outshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@keyframes rd-windup{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg) translateY(-4px)}60%{transform:rotate(10deg)}}
@keyframes rd-pitchfly{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:1}100%{transform:translateY(150px) scale(1.15);opacity:1}}
@keyframes rd-baselight{0%{box-shadow:0 0 0 rgba(255,210,62,.9)}50%{box-shadow:0 0 16px rgba(255,210,62,.9)}100%{box-shadow:0 0 6px rgba(255,210,62,.6)}}
@keyframes rd-coinspin{0%,72%{transform:rotateY(0)}86%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes rd-coinglint{0%,70%,100%{opacity:0}78%,92%{opacity:1}}
@keyframes rd-ledblink{0%,92%,100%{opacity:1}96%{opacity:.35}}
@keyframes rd-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes rd-spin{to{transform:rotate(360deg)}}
@keyframes rd-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
/* the reduced-motion substitute: everything becomes this */
@keyframes rd-crossfade{from{opacity:0}to{opacity:1}}

.rd-m-floaty{animation:rd-floaty 3.4s ease-in-out infinite}
.rd-m-twinkle{animation:rd-twinkle 1.8s ease-in-out infinite}
.rd-m-cardpop{animation:rd-cardpop .46s cubic-bezier(.2,.9,.3,1.2) both}
.rd-m-tearoff{animation:rd-tearoff .55s ease-in both}
.rd-m-ripshake{animation:rd-ripshake .5s ease-in-out}
.rd-m-starburst{animation:rd-starburst .7s ease-out both}
.rd-m-bannerpop{animation:rd-bannerpop .42s cubic-bezier(.2,.9,.3,1.2) both}
.rd-m-outshake{animation:rd-outshake .4s ease-in-out}
.rd-m-windup{animation:rd-windup .5s ease-in-out}
.rd-m-pitchfly{animation:rd-pitchfly .55s ease-in both}
.rd-m-baselight{animation:rd-baselight .8s ease-out both}
.rd-m-coinspin{animation:rd-coinspin 4.5s ease-in-out infinite}
.rd-m-coinglint{animation:rd-coinglint 4.5s infinite}
.rd-m-ledblink{animation:rd-ledblink 4s steps(1) infinite}
.rd-m-marquee{animation:rd-marquee 18s linear infinite}
.rd-m-spin{animation:rd-spin .9s linear infinite}
.rd-m-shimmer{background:linear-gradient(90deg,#eef5fa 25%,#dfeaf3 37%,#eef5fa 63%);background-size:400% 100%;animation:rd-shimmer 1.3s linear infinite}
/* staggered reveal - 0.12s apart, per the tokens */
.rd-m-stagger > *{animation:rd-cardpop .46s cubic-bezier(.2,.9,.3,1.2) both}
.rd-m-stagger > :nth-child(1){animation-delay:0s}
.rd-m-stagger > :nth-child(2){animation-delay:.12s}
.rd-m-stagger > :nth-child(3){animation-delay:.24s}
.rd-m-stagger > :nth-child(4){animation-delay:.36s}
.rd-m-stagger > :nth-child(5){animation-delay:.48s}
.rd-m-stagger > :nth-child(6){animation-delay:.60s}
.rd-m-stagger > :nth-child(7){animation-delay:.72s}
.rd-m-stagger > :nth-child(8){animation-delay:.84s}
.rd-m-stagger > :nth-child(9){animation-delay:.96s}

/* card flip - 0.5-0.7s, backface hidden, per the tokens */
.rd-flip{perspective:1200px}
.rd-flip__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.rd-flip.is-flipped .rd-flip__inner{transform:rotateY(180deg)}
.rd-flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rd-flip__face--back{transform:rotateY(180deg)}

/* -----------------------------------------------------------------------------
   THE REDUCED-MOTION RULE (README tokens, last line): everything degrades to a
   cross-fade, and nothing is communicated by movement alone. This is ONE rule
   over the whole vocabulary rather than a per-component opt-out, so a motion
   added in a later phase is covered the moment it uses the .rd-m-* names.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [class*="rd-m-"],
  .rd-m-stagger > *{
    animation:rd-crossfade .26s ease-out both !important;
    transform:none !important;
  }
  .rd-m-shimmer{background:var(--rd-tint-deep) !important}
  .rd-flip__inner{transition:none !important}
  .rd-flip.is-flipped .rd-flip__inner{transform:none !important}
  .rd-flip.is-flipped .rd-flip__face--front{opacity:0;transition:opacity .26s ease-out}
  .rd-flip.is-flipped .rd-flip__face--back{transform:none !important;opacity:1}
  .rd-flip__face--back{opacity:0}
  .rd-btn,.rd-tile,.rd-pill{transition:none !important}
}

/* =============================================================================
   THE FOUR SHAPE PARTS
   "Every screen here is those four parts rearranged." - build order, README.
   PART 1 BUTTON  .rd-btn        PART 2 PANEL  .rd-panel
   PART 3 TILE    .rd-tile       PART 4 STAT   .rd-stat
   ========================================================================== */

/* ---- PART 1: the pill button ---------------------------------------------
   Pills with a gloss gradient over the fill; hover presses DOWN 2px and the
   hard shadow shrinks 4px -> 2px, so the button keeps its footprint and only
   the depth changes. No blur, ever. 44px targets are a 390 rule and live in
   the mobile block - forcing min-height:44px on desktop would fatten every
   pill past its drawn height in 01-nav-header.png. */
.rd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.42em;
  font-family:var(--rd-ui);font-weight:800;font-size:13px;line-height:1.15;
  color:var(--rd-navy);
  background:var(--rd-gloss),#fff;
  border:var(--rd-bd-sub) solid var(--rd-navy);
  border-radius:var(--rd-r-pill);
  box-shadow:var(--rd-sh-sub);
  padding:9px 18px;cursor:pointer;text-decoration:none;
  -webkit-appearance:none;appearance:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.rd-btn:hover,.rd-btn:focus-visible{transform:translateY(2px);box-shadow:var(--rd-sh-press)}
.rd-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--rd-navy)}
.rd-btn:focus-visible{outline:3px solid var(--rd-orange);outline-offset:3px}
.rd-btn--primary{background:var(--rd-gloss),var(--rd-green)}
.rd-btn--hot{background:var(--rd-gloss),var(--rd-orange)}
.rd-btn--gold{background:var(--rd-gloss),var(--rd-gold)}
.rd-btn--danger{color:#fff;background:var(--rd-red)}
.rd-btn--ghost{background:#fff;font-weight:700;font-size:12px;padding:7px 15px}
.rd-btn--quiet{color:var(--rd-muted);background:#fff;border-color:var(--rd-tint-line);box-shadow:none}
.rd-btn--sm{font-size:12px;padding:7px 15px;box-shadow:0 3px 0 var(--rd-navy)}
.rd-btn--sm:hover{box-shadow:var(--rd-sh-press)}
.rd-btn--lg{font-size:15px;padding:11px 24px}
.rd-btn--block{display:flex;width:100%}
/* on the dark header bar the borders + shadows switch to deep navy */
.rd-on-dark .rd-btn{border-color:var(--rd-navy-deep);box-shadow:var(--rd-sh-deep)}
.rd-on-dark .rd-btn:hover{box-shadow:var(--rd-sh-deep-press)}

/* LOCKED. Override rule 6: a disabled control always carries its reason.
   .is-locked is the drawn treatment (12-states.png, panel 1); the reason node
   is NOT optional - js/depot-redesign.js refuses to lock without one and says
   so in the console (AGENTS.md 4, no silent guards). */
.rd-btn.is-locked,.rd-btn[disabled],.rd-btn[aria-disabled="true"]{
  color:var(--rd-muted-2);background:var(--rd-tint);
  border-color:var(--rd-tint-line);box-shadow:none;
  cursor:not-allowed;transform:none;
}
.rd-reason{
  display:flex;gap:7px;align-items:flex-start;
  background:var(--rd-cream);border:2px solid var(--rd-gold);border-radius:10px;
  padding:7px 9px;
  font-family:var(--rd-ui);font-weight:700;font-size:11px;line-height:1.35;
  color:var(--rd-ink-gold);
}
.rd-reason::before{content:"\01F512";font-size:12px;line-height:1.2}
.rd-reason--plain::before{content:none}

/* micro-label + numeral helpers, used everywhere below */
.rd-micro{font-family:var(--rd-micro);font-size:9px;line-height:1.6;color:var(--rd-navy)}
.rd-micro--orange{color:var(--rd-orange)}
.rd-micro--sm{font-size:8px;line-height:1.7}
.rd-num{font-family:var(--rd-num);line-height:1}

/* ---- PART 2: the panel ----------------------------------------------------
   4px navy border, radius 20, hard shadow 0 7px 0. Sub-cards step down to 3px,
   radius 12-14, 0 4px 0. */
.rd-panel{
  background:#fff;border:var(--rd-bd) solid var(--rd-navy);
  border-radius:var(--rd-r);box-shadow:var(--rd-sh);padding:14px;
  font-family:var(--rd-ui);color:var(--rd-navy);
}
.rd-panel--pad{padding:18px}
.rd-panel--sub{border-width:var(--rd-bd-sub);border-radius:var(--rd-r-sub);box-shadow:var(--rd-sh-sub);padding:12px}
.rd-panel--tint{background:var(--rd-tint);border-color:var(--rd-tint-line);border-width:var(--rd-bd-sub);border-radius:14px;box-shadow:none}
.rd-panel--dashed{background:var(--rd-tint);border:var(--rd-bd-sub) dashed var(--rd-tint-line);border-radius:14px;box-shadow:none}
.rd-panel--caution{background:var(--rd-cream);border-color:var(--rd-gold);border-radius:18px;box-shadow:0 6px 0 var(--rd-gold-deep);color:var(--rd-ink-gold)}
.rd-panel--error{background:#fdecea;border-color:var(--rd-red);border-width:var(--rd-bd-sub);border-radius:14px;box-shadow:none}
.rd-panel--dark{background:var(--rd-navy-deep);border-color:var(--rd-navy-deep);color:#fff}
.rd-panel__h{font-family:var(--rd-micro);font-size:9px;color:var(--rd-orange);margin-bottom:9px}
.rd-panel__note{font-family:var(--rd-ui);font-weight:600;font-size:11px;line-height:1.4;color:var(--rd-muted);margin-top:9px}

/* ---- PART 3: the card tile ------------------------------------------------
   Real art is the hero. Override rule 4: when there is no scan the tile paints
   the DESIGNED placeholder (band + year + name) - there is no broken-image
   state anywhere, so this sheet never relies on an <img> alt. Badges ride the
   corners, never the player's face. */
.rd-tile{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:var(--rd-bd-sub) solid var(--rd-navy);
  border-radius:var(--rd-r-sub);box-shadow:var(--rd-sh-sub);
  overflow:hidden;cursor:pointer;font-family:var(--rd-ui);
  transition:transform .12s ease,box-shadow .12s ease;
}
.rd-tile:hover,.rd-tile:focus-visible{transform:translateY(2px);box-shadow:var(--rd-sh-press)}
.rd-tile__art{display:block;width:100%;aspect-ratio:5/7;object-fit:cover;background:var(--rd-tint-deep)}
.rd-tile__art--land{object-fit:contain;background:var(--rd-navy-deep)}
/* the designed placeholder: stripe field, year band, name */
.rd-tile__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:100%;aspect-ratio:5/7;text-align:center;padding:8px;
  background:var(--rd-tint-deep);
  background-image:var(--rd-stripe);
  border-bottom:2px dashed var(--rd-tint-line);
  font-weight:700;font-size:8.5px;line-height:1.3;color:var(--rd-muted-2);
}
.rd-tile__ph-year{font-family:var(--rd-micro);font-size:6px;color:var(--rd-muted-2)}
.rd-tile__ph-name{font-weight:800;font-size:10px;color:var(--rd-navy);letter-spacing:.02em}
.rd-tile__body{padding:7px 8px 8px;display:flex;flex-direction:column;gap:2px}
.rd-tile__name{font-weight:800;font-size:12.5px;color:var(--rd-navy);line-height:1.2}
.rd-tile__meta{font-weight:600;font-size:10.5px;color:var(--rd-muted-2);line-height:1.25}
.rd-tile__grade{
  position:absolute;right:5px;bottom:5px;z-index:2;
  font-family:var(--rd-micro);font-size:6.5px;line-height:1.5;color:var(--rd-navy);
  background:var(--rd-gold);border:2px solid var(--rd-navy);border-radius:6px;padding:3px 5px;
}
.rd-tile__star{
  position:absolute;left:5px;top:5px;z-index:2;font-size:12px;line-height:1;
  background:var(--rd-gold);border:2px solid var(--rd-navy);border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
}
/* the generic scan slot (chapter 00, "scan slot") */
.rd-scan-slot{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  border-radius:9px;background:var(--rd-stripe);border:2px dashed var(--rd-navy);
  font-family:var(--rd-ui);font-weight:700;font-size:10px;color:var(--rd-navy);
}

/* ---- PART 4: the stat cell ------------------------------------------------
   Press Start 2P key on a navy cap, VT323 value in the field tint below it.
   Every numeral in the product is VT323 - that is the rule, not a suggestion. */
.rd-stat{display:inline-flex;flex-direction:column;text-align:center;min-width:44px}
.rd-stat__k{
  font-family:var(--rd-micro);font-size:7px;line-height:1.5;color:#fff;
  background:var(--rd-navy);border-radius:5px 5px 0 0;padding:5px 9px;
}
.rd-stat__v{
  font-family:var(--rd-num);font-size:19px;line-height:1.15;color:var(--rd-navy);
  background:var(--rd-tint);border:2px solid var(--rd-tint-line);border-top:none;
  border-radius:0 0 5px 5px;padding:2px 9px;
}
.rd-stat--lg .rd-stat__v{font-size:26px}
.rd-stat--good .rd-stat__v{color:var(--rd-green-deep)}
.rd-stat--hot .rd-stat__v{color:var(--rd-ink-red)}
.rd-statrow{display:flex;flex-wrap:wrap;gap:6px}

/* =============================================================================
   CHAPTER 01 (REVISED) - ONE BAR
   Target: exports/desktop/01a-header-one-bar.png +
           exports/desktop/01b-header-signedout-and-390.png.
   Values are read off the ch01 markup in the design document (lines 183-284),
   not eyeballed off the PNG. See docs/RD_CH01_ONE_BAR_SCOPE.md for the table.

   Rule 7: ONE 60px navy line carries D tile / THE DEPOT / nav / club status /
   account / the single Add. No page title below it - the gold pill is the label.
   Rule 8: 20px between the bar, the first control row and the content panel.

   The bar is #10456b (primary navy) in the revised design - not the #0d2b4d the
   two-row header used - and nothing on it carries a border or a hard shadow
   except the one green Add button. Separation is hairline rules only.
   ========================================================================== */
.rd-header{
  box-sizing:border-box;display:flex;align-items:center;gap:18px;
  width:100%;height:var(--rd-bar-h);padding:0 20px;
  background:var(--rd-navy);font-family:var(--rd-ui);
}
.rd-header__left{display:flex;align-items:center;gap:10px;flex:none}
.rd-logo{
  width:30px;height:30px;border-radius:8px;background:var(--rd-gold);
  border:0;box-shadow:none;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--rd-micro);font-size:11px;color:var(--rd-navy);
}
.rd-wordmark{font-weight:800;font-size:19px;color:#fff;letter-spacing:.2px;white-space:nowrap}
.rd-wordmark b,.rd-wordmark .rd-wordmark__hi{color:var(--rd-gold);font-weight:800}

/* the only separators in the bar */
.rd-hair{width:1px;height:24px;background:var(--rd-hairline);flex:none}
.rd-hair--sm{height:18px;margin:0 3px}
.rd-header__spacer{flex:1 1 auto;min-width:8px}

/* NAV IS TEXT, NOT BUTTONS. Only the active surface wears a gold pill; four
   outlined pills in a row is what made the old bar loud. */
.rd-nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;flex-wrap:nowrap;padding:0;margin:0;min-width:0}
.rd-nav .spacer{display:none}
.rd-pagetitle{display:none}
.rd-navpill{
  display:inline-flex;align-items:center;
  font-family:var(--rd-ui);font-weight:700;font-size:13px;color:#c8ecfb;
  background:transparent;border:0;box-shadow:none;
  border-radius:var(--rd-r-pill);padding:7px 16px;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}
.rd-navpill:hover{color:#fff;background:rgba(255,255,255,.09);transform:none;box-shadow:none}
.rd-navpill.is-active,.rd-navpill[aria-current="true"]{
  font-weight:800;color:var(--rd-navy);background:var(--rd-gold);
}
.rd-navpill.is-active:hover,.rd-navpill[aria-current="true"]:hover{
  color:var(--rd-navy);background:var(--rd-gold);
}

/* CLUB STATUS: bare numerals directly on the navy. No white card, no "MY CLUB"
   heading, no boxed panel - hairlines separate the groups instead of borders. */
.rd-header__mid{display:flex;align-items:center;gap:7px;flex:none;white-space:nowrap}
.rd-plate{
  background:transparent;border:0;box-shadow:none;padding:0;
  display:flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
}
.rd-plate__team{display:none}
.rd-plate__id{display:flex;flex-direction:row;align-items:center}
.rd-plate__line{display:flex;align-items:center;gap:7px}
.rd-plate__rec{font-family:var(--rd-num);font-size:17px;line-height:1;color:var(--rd-green)}
.rd-plate__season{font-family:var(--rd-micro);font-weight:400;font-size:7px;color:var(--rd-dim)}
.rd-plate__streak{font-family:var(--rd-micro);font-weight:400;font-size:7px;color:var(--rd-orange)}
.rd-plate__streak.is-empty{display:none}
.rd-plate__rule{width:1px;height:18px;margin:0 3px;background:var(--rd-hairline);align-self:center}

/* the coin + balance. The coin keeps its 4.5s flip but drops to a plain rim at
   19px - the detailed ring and the pixel highlights read as noise below 24px. */
.rd-wallet{display:flex;align-items:center;gap:7px;background:none;border:0;box-shadow:none;padding:0}
.rd-wallet__val{display:flex;align-items:baseline;gap:0}
.rd-wallet__amt{font-family:var(--rd-num);font-size:19px;line-height:1;color:var(--rd-gold)}
.rd-wallet__unit{display:none}
.rd-wallet.is-anon .rd-wallet__amt{font-size:19px}
.rd-coin{display:inline-block;perspective:200px;width:19px;height:19px;flex:none}
.rd-coin__spin{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.rd-coin__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe98a 0 22%,#ffd23e 40%,#f0b41c 62%,#cf8f0a 82%,#a86f06 100%);
  border:2px solid #6b4a00;box-shadow:inset 0 0 0 1.5px #ffe98a;
}
.rd-coin__face--b{transform:rotateY(180deg)}
.rd-coin__ring,.rd-coin__px,.rd-coin__glint{display:none}

/* EMAIL AND LOG OUT ARE 8-BIT. The pixel type is what makes an email address
   feel like part of the game instead of an account setting. */
.rd-header__right{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap}
.rd-header__email{
  font-family:var(--rd-micro);font-weight:400;font-size:8px;line-height:1.5;
  letter-spacing:-.3px;color:var(--rd-muted-2);
}
.rd-logout{
  font-family:var(--rd-micro);font-weight:400;font-size:7px;line-height:1.5;
  color:var(--rd-dim);background:none;border:0;box-shadow:none;padding:0;
  text-transform:uppercase;cursor:pointer;transition:color .12s ease;
}
.rd-logout:hover{color:#fff;transform:none;box-shadow:none}

/* "+ Add a card" is the ONLY filled button and the only green in the bar. */
.rd-addbtn{
  display:inline-flex;align-items:center;flex:none;
  font-family:var(--rd-ui);font-weight:800;font-size:13px;color:var(--rd-navy);
  background:linear-gradient(#fff8,#fff0 45%),var(--rd-green);
  border:2px solid var(--rd-navy-deep);border-radius:var(--rd-r-pill);
  box-shadow:0 3px 0 var(--rd-navy-deep);padding:7px 15px;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.rd-addbtn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--rd-navy-deep)}

/* SIGNED OUT: record, coins, email and Add all drop; one gold LOG IN pill takes
   their place. Nav stays - browsing is public. */
.rd-loginpill{
  display:none;align-items:center;
  font-family:var(--rd-micro);font-weight:400;font-size:8px;line-height:1.5;
  color:var(--rd-navy);background:var(--rd-gold);
  border:0;box-shadow:none;border-radius:var(--rd-r-pill);padding:8px 14px;
  white-space:nowrap;cursor:pointer;
}
.rd-header.is-signed-out .rd-loginpill{display:inline-flex}
.rd-header.is-signed-out .rd-header__mid,
.rd-header.is-signed-out .rd-hair--mid,
.rd-header.is-signed-out .rd-header__email,
.rd-header.is-signed-out .rd-addbtn,
.rd-header.is-signed-out [data-rd-signedin-only]{display:none}

/* RULE 8 - one spacing unit. The bar, then 20px, then the surface's own first
   control row, then 20px, then the content panel. The shell wrapper owns the
   first step so every surface inherits it from one place. */
.rd-shell{display:block;width:auto;max-width:none;margin:0 0 var(--rd-step);padding-bottom:0}
.rd-shell > .depot-stage:empty{display:none}
.rd-shell > .depot-stage{margin-top:var(--rd-step)}
/* stop the stage-s first child collapsing its own margin THROUGH the stage and
   turning the one 20px step into 18 or 38. */
.rd-shell > .depot-stage > :first-child{margin-top:0}
/* the surface control row: whatever a page parked in the mode row lands here,
   one 20px step under the bar. Play Ball pins the bar (position:fixed), so its
   row clears the bar height as well. */
.rd-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 20px;margin:0 0 var(--rd-step)}
.rd-controls--clearbar{margin-top:calc(var(--rd-bar-h) + var(--rd-step))}
.rd-binderwrap > .rd-binder__controls{margin:0 0 var(--rd-step)}
.rd-shell .depot-stage:empty{display:none}
.rd-rhythm > * + *{margin-top:var(--rd-step)}

/* the 390 account sheet: on desktop these two are just inline members of the
   right cluster (display:contents), on 390 the same nodes become the sheet. */
.rd-header{position:relative}
.rd-header__acct{display:contents}
.rd-acct-toggle{display:none}

/* MARKETPLACE - designed "coming soon", never a dead door (chapter 14 is
   roadmap: browse and detail are drawn, listing creation is not designed). */
.rd-page{background:var(--rd-sky);min-height:100vh}
.rd-page__body{padding:0 var(--rd-step) var(--rd-step)}
.rd-soon{max-width:680px;margin:0 auto;text-align:center}
.rd-soon__k{
  display:inline-block;font-family:var(--rd-micro);font-size:8px;line-height:1.6;
  color:var(--rd-ink-gold);background:var(--rd-gold);border-radius:var(--rd-r-pill);padding:7px 13px;
}
.rd-soon__t{font-family:var(--rd-ui);font-weight:800;font-size:26px;color:var(--rd-navy);margin:14px 0 8px}
.rd-soon__s{font-family:var(--rd-ui);font-weight:600;font-size:14px;line-height:1.5;color:var(--rd-muted)}
.rd-soon__list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.rd-soon__item{
  font-family:var(--rd-ui);font-weight:700;font-size:12.5px;color:var(--rd-navy);
  background:var(--rd-tint);border:2px solid var(--rd-tint-line);border-radius:var(--rd-r-sub);padding:8px 13px;
}

/* ---- 390: the same line, nav dropped to a strip beneath it ---------------- */
@media (max-width:640px){
  .rd-header{flex-wrap:wrap;height:auto;gap:10px;padding:0 12px;align-content:flex-start}
  .rd-header__left{gap:10px;min-height:54px}
  .rd-logo{width:28px;height:28px;border-radius:8px;font-size:10px}
  .rd-wordmark{font-size:16px}
  .rd-hair{display:none}
  .rd-header__mid{gap:5px}
  .rd-plate__id{display:none}
  .rd-wallet{gap:5px}
  .rd-wallet__amt{font-size:16px}
  .rd-coin{width:16px;height:16px}
  .rd-header__right{gap:8px}
  .rd-header__email,.rd-logout{display:none}
  .rd-acct-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;
    font-family:var(--rd-micro);font-size:11px;color:var(--rd-muted-2);
    background:none;border:0;box-shadow:none;padding:0;cursor:pointer;
  }
  .rd-addbtn{width:44px;height:44px;padding:0;justify-content:center;border-radius:10px;font-size:0}
  .rd-addbtn::before{content:"+";font-family:var(--rd-ui);font-weight:800;font-size:19px;color:var(--rd-navy)}
  .rd-header.is-acct-open .rd-header__acct{
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
    position:absolute;top:100%;right:12px;z-index:40;
    background:#0c3556;padding:12px 14px;border-radius:0 0 var(--rd-r-sub) var(--rd-r-sub);
  }
  .rd-header.is-acct-open .rd-header__email,
  .rd-header.is-acct-open .rd-logout{display:inline-flex}
  .rd-header.is-acct-open .rd-logout{min-height:44px;align-items:center}
  .rd-nav{
    order:9;flex-basis:100%;width:auto;margin:0 -12px;padding:7px 12px;gap:3px;
    background:#0c3556;overflow-x:auto;flex-wrap:nowrap;
  }
  /* 01b: the strip shortens to Binder | Shop | Play | Market so four pills fit
     at 390 without a horizontal scroller. */
  .rd-navpill{min-height:44px;flex:0 0 auto;font-size:0}
  .rd-navpill::before{content:attr(data-rd-short);font-family:var(--rd-ui);font-weight:700;font-size:13px}
  .rd-navpill.is-active::before,.rd-navpill[aria-current="true"]::before{font-weight:800}
  .rd-loginpill{min-height:44px}
  .rd-soon__t{font-size:21px}
  .rd-page__body{padding:0 12px 20px}
}
.rd-navrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* =============================================================================
   CHAPTER 02 - LOG IN & LOCKED COLLECTION
   Target: exports/desktop/02-login.png
   ========================================================================== */
.rd-scrim{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:22px;overflow:auto;
  background:rgba(7,44,71,.4);
}
.rd-scrim::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 22px,transparent 22px 44px);
}
.rd-modal{
  position:relative;z-index:2;width:400px;max-width:100%;
  background:#fff;border:var(--rd-bd) solid var(--rd-navy);border-radius:22px;
  box-shadow:0 10px 0 var(--rd-navy);overflow:hidden;font-family:var(--rd-ui);
}
.rd-modal__bar{background:var(--rd-navy);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd-modal__id{display:flex;align-items:center;gap:10px}
.rd-modal__logo{
  width:34px;height:34px;border-radius:9px;background:var(--rd-gold);
  border:3px solid var(--rd-navy-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--rd-micro);font-size:12px;color:var(--rd-navy);
}
.rd-modal__title{font-weight:800;font-size:19px;color:#fff}
.rd-modal__x{
  width:30px;height:30px;border-radius:9px;background:#fff;
  border:3px solid var(--rd-navy-deep);box-shadow:0 3px 0 var(--rd-navy-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--rd-ui);font-weight:800;font-size:15px;color:var(--rd-navy);cursor:pointer;
}
.rd-modal__body{padding:18px;display:flex;flex-direction:column;gap:12px}
.rd-modal__lede{font-weight:600;font-size:13px;color:var(--rd-muted);line-height:1.4}
.rd-modal__foot{font-weight:700;font-size:12px;color:var(--rd-muted);text-align:center}
.rd-modal__foot a,.rd-link-hot{color:var(--rd-orange);font-weight:800;cursor:pointer}

/* filled inputs with Press Start 2P micro-labels */
.rd-field{display:block}
.rd-field__k{font-family:var(--rd-micro);font-size:8px;color:var(--rd-navy);margin-bottom:6px}
.rd-input{
  width:100%;box-sizing:border-box;
  font-family:var(--rd-ui);font-weight:600;font-size:14px;color:var(--rd-navy);
  background:var(--rd-tint);border:3px solid var(--rd-navy);border-radius:12px;
  padding:9px 12px;box-shadow:0 3px 0 var(--rd-navy);
}
.rd-input:focus{outline:3px solid var(--rd-orange);outline-offset:2px}
.rd-input::placeholder{color:var(--rd-muted-2)}

/* the locked collection: a gold CAUTION card that says what to do next.
   Override rule 6 again - this is deliberately not an error treatment. */
.rd-locked-card{
  width:400px;max-width:100%;margin:16px auto 0;
  background:var(--rd-cream);border:var(--rd-bd) solid var(--rd-gold);border-radius:18px;
  box-shadow:0 6px 0 var(--rd-gold-deep);padding:14px 16px;text-align:center;
  font-family:var(--rd-ui);
}
.rd-locked-card__k{font-family:var(--rd-micro);font-size:9px;color:var(--rd-ink-gold);line-height:1.7;margin-bottom:6px}
.rd-locked-card__t{font-weight:600;font-size:12.5px;color:var(--rd-ink-gold);line-height:1.4}

/* login button, loading transient ("Signing you in...") + the error bar that
   names the cause and keeps the credentials */
.rd-modal .rd-btn.is-busy{pointer-events:none}
.rd-spinner{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:3px solid var(--rd-tint-line);border-top-color:var(--rd-navy);
}
.rd-errorbar{
  display:flex;gap:8px;align-items:flex-start;
  background:#fdecea;border:3px solid var(--rd-red);border-radius:12px;padding:9px 11px;
  font-family:var(--rd-ui);font-weight:700;font-size:12px;line-height:1.4;color:var(--rd-ink-red);
}

/* =============================================================================
   CHAPTER 12 - THE STATE LIBRARY (shared classes, no bespoke variants)
   Target: exports/desktop/12-states.png. Every surface in phases 2-5 picks from
   this set. The five the phase-1 brief names are marked; the other four
   (zero-art, cooldown, reduced-motion, no-results) ship with them because they
   are the same nine states in the same panel and splitting them would guarantee
   a bespoke variant later.
   ========================================================================== */

/* 1. LOCKED - REASON VISIBLE  (.rd-btn.is-locked + .rd-reason, above) -------- */
.rd-state--locked-with-reason{display:flex;flex-direction:column;gap:8px}

/* 2. CHECKING / LOADING ------------------------------------------------------ */
.rd-state--checking{
  display:flex;gap:8px;align-items:center;
  background:var(--rd-tint);border:3px solid var(--rd-tint-line);border-radius:12px;
  padding:10px 12px;
  font-family:var(--rd-ui);font-weight:700;font-size:12px;color:var(--rd-muted);
}
.rd-shim{height:64px;border-radius:9px}
.rd-shimrow{display:flex;gap:7px}
.rd-shimrow > *{flex:1}

/* 3. EMPTY - always offers the next action ----------------------------------- */
.rd-state--empty{
  background:var(--rd-tint);border:3px dashed var(--rd-tint-line);border-radius:14px;
  padding:16px;text-align:center;font-family:var(--rd-ui);
}
.rd-state--empty .rd-state__icon{font-size:26px;margin-bottom:6px}
.rd-state--empty .rd-state__t{font-weight:800;font-size:14px;color:var(--rd-navy)}
.rd-state--empty .rd-state__s{font-weight:600;font-size:11.5px;line-height:1.4;color:var(--rd-muted-2);margin:4px 0 10px}

/* 4. NO RESULTS - say WHY, and offer the reset ------------------------------- */
.rd-state--no-results{
  background:var(--rd-tint);border:3px dashed var(--rd-tint-line);border-radius:14px;
  padding:16px;text-align:center;font-family:var(--rd-ui);
}
.rd-state--no-results .rd-state__t{font-weight:800;font-size:14px;color:var(--rd-navy)}
.rd-state--no-results .rd-state__s{font-weight:600;font-size:11.5px;line-height:1.4;color:var(--rd-muted-2);margin:4px 0 9px}

/* 5. ZERO-ART SET - the designed placeholder, never a broken image ----------- */
.rd-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:9px;background:var(--rd-tint-deep);border:2px dashed var(--rd-tint-line);
  text-align:center;font-family:var(--rd-ui);font-weight:700;font-size:8.5px;line-height:1.3;
  color:var(--rd-muted-2);padding:6px;min-height:74px;
}
.rd-ph__year{font-family:var(--rd-micro);font-size:6px;margin-bottom:3px;color:var(--rd-muted-2)}
.rd-ph__name{font-weight:800;font-size:9.5px;color:var(--rd-navy)}

/* 6. ERROR - the consequence FIRST, then retry ------------------------------- */
.rd-state--error{
  background:#fdecea;border:3px solid var(--rd-red);border-radius:14px;padding:13px;
  font-family:var(--rd-ui);
}
.rd-state--error .rd-state__t{font-weight:800;font-size:13.5px;color:var(--rd-ink-red);margin-bottom:4px}
.rd-state--error .rd-state__s{font-weight:600;font-size:11.5px;line-height:1.4;color:var(--rd-ink-red-2);margin-bottom:9px}
.rd-state--error .rd-state__acts{display:flex;gap:7px;flex-wrap:wrap}

/* 7. SIGNED OUT - content browsable, the committing action becomes a log-in pill */
.rd-state--signed-out{display:flex;flex-direction:column;gap:8px;font-family:var(--rd-ui)}
.rd-state--signed-out .rd-state__browsable{
  min-height:72px;border-radius:9px;background:var(--rd-stripe);border:2px dashed var(--rd-navy);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  font-weight:700;font-size:11px;line-height:1.35;color:var(--rd-navy);
}
.rd-chip-anon{
  font-family:var(--rd-ui);font-weight:800;font-size:12.5px;color:var(--rd-muted-2);
  background:var(--rd-tint);border:3px solid var(--rd-tint-line);border-radius:var(--rd-r-pill);
  padding:8px 14px;display:inline-flex;align-items:center;gap:.35em;
}

/* 8. COOLDOWN - the wait is legible, never a bare disabled button ------------ */
.rd-state--cooldown{
  background:var(--rd-tint);border:3px solid var(--rd-tint-line);border-radius:14px;padding:12px;
  font-family:var(--rd-ui);
}
.rd-state--cooldown .rd-cool__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.rd-state--cooldown .rd-cool__t{font-weight:800;font-size:13px;color:var(--rd-navy)}
.rd-state--cooldown .rd-cool__clock{font-family:var(--rd-num);font-size:20px;color:var(--rd-ink-red)}
.rd-bar{height:12px;border-radius:var(--rd-r-pill);background:var(--rd-tint-deep);border:2px solid var(--rd-tint-line);overflow:hidden}
.rd-bar__fill{height:100%;background:var(--rd-gloss),var(--rd-gold);transition:width .5s linear}

/* 9. REDUCED MOTION - documented as a state, enforced in the media query above */
.rd-state--reduced{display:flex;gap:9px;font-family:var(--rd-ui)}

/* the state-library gallery wrapper, used by the phase-1 verification page */
.rd-stategrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}

/* =============================================================================
   390 IS FIRST-CLASS (override rule 5)
   Its own layout, not a squeezed desktop, and 44px minimum on every control.
   Verified against exports/mobile-390/*.png.
   ========================================================================== */
@media (max-width:640px){

  /* 44px minimum touch targets - the rule, applied once, here */
  .rd-btn,.rd-modal__x,.rd-chip-anon{min-height:44px}
  .rd-btn--sm{min-height:44px;padding:10px 16px}
  .rd-navrow{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}

  .rd-panel{border-radius:16px;padding:12px}
  .rd-modal{width:100%;border-radius:18px}
  .rd-locked-card{width:100%}
  .rd-stategrid{grid-template-columns:1fr}
  .rd-statrow{gap:5px}
  .rd-stat{flex:1;min-width:0}
  .rd-stat__k{padding:5px 4px}
  .rd-stat__v{padding:2px 4px}
}

/* Windows/Chrome forced-colors: the hard shadow is decoration, the border is
   the affordance - keep the border, drop the shadow, never lose the reason. */
@media (forced-colors: active){
  .rd-btn,.rd-panel,.rd-tile,.rd-plate,.rd-wallet,.rd-modal{box-shadow:none}
}

/* =============================================================================
   ENHANCER GLUE - the few classes js/depot-redesign.js needs to re-dress the
   existing shell in place. Same scoping rule: .rd-* only.
   ========================================================================== */
.rd-hide{display:none !important}
/* Signed out (chapter 01 states): the RECORD PLATE hides, but the wallet stays
   and reads an em-dash - "wallet reads --" is a state, not a disappearance.
   So the plate sheds its own chrome and keeps the coin chip. */
/* the signed-out gate (#loginGate), dressed as the sky + one panel */
.rd-gate__card{max-width:460px;width:100%;text-align:center;padding:26px 22px}
.rd-gate__title{font-family:var(--rd-ui);font-weight:800;font-size:26px;color:var(--rd-navy);margin-bottom:8px}
.rd-gate__title .rd-wordmark__hi{color:var(--rd-gold)}
.rd-gate__sub{font-family:var(--rd-ui);font-weight:600;font-size:14px;line-height:1.45;color:var(--rd-muted);margin-bottom:18px}
/* the auth modal's message line, kept from index.html and re-dressed */
.rd-modal__msg:empty{display:none}
.rd-modal__msg{
  font-family:var(--rd-ui);font-weight:700;font-size:12px;line-height:1.4;
  color:var(--rd-ink-red);background:#fdecea;border:3px solid var(--rd-red);
  border-radius:12px;padding:9px 11px;
}
.rd-modal__msg.ok{color:var(--rd-ink-green);background:#e8fbe4;border-color:var(--rd-green)}
@media (max-width:640px){
}

/* ---- chapter 01: one wallet, not two --------------------------------------
   depot-wallet.js mounts its legacy chip into whatever carries
   [data-depot-franchise] -- which is now the redesigned plate -- and it
   re-mounts asynchronously on every auth change, so a JS-time hide would race
   it. The chip stays in the DOM (depot-wallet.js keeps writing to it, and its
   own mount logging keeps working); it just stops painting a second balance
   beside .rd-wallet, which is the drawn readout. */
.rd-plate .depot-wallet-chip{display:none}