/* ============================================================
   deck.css — LUXE Color Deck, hub edition
   Every action routes into the hub's own forms.
   ============================================================ */

.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}

.deck-hero{padding-block:clamp(6rem,4rem+7vw,9rem) clamp(2rem,1rem+3vw,3rem);border-bottom:1px solid var(--line)}
.deck-hero .btn-row{margin-top:var(--sp-5)}
.deck__disclaimer{margin-top:var(--sp-5);font-size:.8125rem;color:var(--muted-2);max-width:70ch}

.deck{padding-top:var(--sp-6)}
.deck__controls{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.deck__search{width:100%;padding:14px 18px;border-radius:12px;font:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--line);outline:none}
.deck__search:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.deck__search::placeholder{color:var(--muted-2)}

.deck__chiprow{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.deck__chiprow::-webkit-scrollbar{display:none}
.deck__fchip{flex:0 0 auto;appearance:none;font:inherit;cursor:pointer;min-height:40px;padding:.5rem 1rem;
  border-radius:999px;font-size:.8125rem;font-weight:600;white-space:nowrap;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);transition:all var(--t-fast)}
.deck__fchip:hover{border-color:var(--gold-edge);color:var(--text)}
.deck__fchip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0B0B0C}
.deck__fchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.deck__count{color:var(--muted-2);font-size:.8125rem;letter-spacing:.04em;margin:0 0 var(--sp-4)}
.deck__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.deck__empty{color:var(--muted);text-align:center;padding:4rem 0}

.dtile{appearance:none;font:inherit;text-align:left;cursor:pointer;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.dtile:hover{transform:translateY(-4px);border-color:var(--gold-edge);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.dtile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dtile__sw{position:relative;width:100%;aspect-ratio:1/1;background-repeat:no-repeat;background-color:#141418}
.dtile__new{position:absolute;top:9px;left:9px;padding:4px 10px;border-radius:999px;font-size:.58rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;background:var(--gold);color:#0B0B0C}
.dtile__info{padding:10px 12px 12px}
.dtile__n{display:block;font-size:.8125rem;font-weight:700;line-height:1.28;color:var(--white)}
.dtile__c{display:block;font-size:.72rem;color:var(--gold);font-weight:800;margin-top:3px;letter-spacing:.05em}
.dtile__s{display:block;font-size:.62rem;color:var(--muted-2);margin-top:3px;text-transform:uppercase;letter-spacing:.09em}

/* modal */
.deckm{position:fixed;inset:0;z-index:9999;background:rgba(5,5,6,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.deckm[hidden]{display:none}
.deckm__panel{background:var(--surface);border:1px solid var(--gold-edge);border-radius:20px;max-width:820px;width:100%;
  max-height:92vh;overflow:auto;display:flex;flex-direction:column}
@media(min-width:680px){.deckm__panel{flex-direction:row}}
.deckm__swatch{flex:1 1 45%;min-height:260px;background-repeat:no-repeat;background-color:#141418}
.deckm__body{flex:1 1 55%;padding:28px;position:relative}
.deckm__close{position:absolute;top:12px;right:14px;appearance:none;cursor:pointer;width:40px;height:40px;font-size:24px;line-height:1;
  border-radius:10px;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.deckm__close:hover{color:var(--white)}
.deckm__sec{font-size:.68rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.14em}
.deckm__name{font-family:var(--font-display);font-size:1.6rem;font-weight:800;margin-top:.4rem;line-height:1.15;color:var(--white)}
.deckm__code{font-size:1rem;font-weight:800;color:var(--gold);margin-top:.5rem;letter-spacing:.05em}
.deckm__badge{display:inline-block;margin-top:.6rem;padding:5px 12px;border-radius:999px;font-size:.62rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;background:var(--gold);color:#0B0B0C}
.deckm__rows{margin-top:1.2rem;border-top:1px solid var(--line)}
.deckm__rows div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.deckm__rows dt{color:var(--muted)}
.deckm__rows dd{font-weight:700;color:var(--white);text-align:right}
.deckm__render{margin-top:1.2rem}
.deckm__rcap{font-size:.62rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.deckm__render img{width:100%;display:block;border-radius:12px;border:1px solid var(--gold-edge)}
.deckm__acts{margin-top:1.4rem;display:grid;gap:.6rem}
.deckm__trade{display:block;text-align:center;font-size:.8125rem;color:var(--gold);padding:.4rem}
.deckm__fine{margin-top:1rem;font-size:.72rem;color:var(--muted-2);line-height:1.6}

@media(max-width:720px){
  .deck__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .deckm{padding:0}
  .deckm__panel{max-height:100vh;border-radius:0;border:0}
  .deckm__body{padding:22px 18px 28px}
}

/* Swatch artwork unavailable — show the TPU code so the deck still reads as
   a catalogue rather than a grid of empty boxes. */
.deck-noart .dtile__sw::after,
.deck-noart .deckm__swatch::after{
  content:attr(data-fallback);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.8rem;font-weight:800;letter-spacing:.08em;
  color:var(--muted-2);background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px)}
.deck-noart .deckm__swatch{position:relative}