/* ============================================================
   snk-codes.css — page-specific styling for the public /codes page.
   Load AFTER snk-reward-chips.css. Hero/eyebrow/search/filter reuse the
   shared .snk-stats chrome
   (snacknap-ui.css) — brand-blue, house style. This file only adds
   the code-card "ticket" treatment. Gold (--snk-brand) is reserved
   for the Redeem CTA + the ticket accent (a reward affordance),
   never the hero. Built entirely on --snk-* tokens.
   ============================================================ */

/* ---------- how it works ---------- */
.cd-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1.25rem 0 .2rem; }
.cd-how-step{
  display:flex; gap:.6rem; align-items:flex-start;
  background:var(--snk-surface); border:1px solid var(--snk-border);
  border-radius:14px; padding:.7rem .8rem;
}
.cd-how-n{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; color:#fff; background:var(--snk-accent);
}
/* intro link — Snacknap accent (Bootstrap default is off-brand blue) */
.snk-stats .intro a{ color:var(--snk-accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.snk-stats .intro a:hover{ color:var(--snk-accent-2); }

.cd-how-b b{ display:block; font-size:.84rem; font-weight:700; color:var(--snk-text); }
.cd-how-b span{ display:block; font-size:.77rem; line-height:1.35; color:var(--snk-ink-500); margin-top:.1rem; }

/* ---------- controls (shared .nav-pills live in snacknap-ui.css) ---------- */
.cd-controls{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:1.3rem 0 1rem; }
.cd-result{ margin-left:auto; font-size:.82rem; font-weight:700; color:var(--snk-text-muted); }
.cd-result b{ color:var(--snk-text); }

/* ---------- code cards (the "ticket") ---------- */
.cd-list{ display:grid; grid-template-columns:1fr; gap:.85rem; }
@media (min-width:720px){ .cd-list{ grid-template-columns:1fr 1fr; } }

.cd-card{
  position:relative; overflow:hidden;
  background:var(--snk-surface); border:1px solid var(--snk-border);
  border-radius:var(--snk-radius,18px); padding:1rem 1.05rem 1.05rem;
  display:flex; flex-direction:column; gap:.7rem;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:border-color .15s, box-shadow .15s;
}
.cd-card:hover{ border-color:var(--snk-border-strong); box-shadow:0 10px 26px rgba(16,24,40,.09); }
/* gold spine = "claimable in the web store" signal (reward affordance) */
.cd-card.is-redeemable::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(var(--snk-brand,#f5d673), #e0b341);
}

.cd-top{ display:flex; align-items:center; gap:.5rem; }
.cd-title-row{ min-width:0; }
.cd-name{ font-size:.98rem; font-weight:800; color:var(--snk-text); line-height:1.2; letter-spacing:-.01em; }
.cd-source{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.12rem;
  font-size:.76rem; color:var(--snk-ink-500); text-decoration:none;
}
.cd-source i{ width:.85rem; height:.85rem; }
.cd-source:hover{ color:var(--snk-accent); }

/* status pill — semantic tokens */
.cd-pill{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  border-radius:999px; padding:.26rem .6rem; border:1px solid transparent;
}
.cd-pill .dot{ width:.42rem; height:.42rem; border-radius:50%; background:currentColor; }
.cd-pill.is-active{ color:var(--snk-success,#16a34a); background:color-mix(in srgb,var(--snk-success,#16a34a) 13%,var(--snk-surface)); border-color:color-mix(in srgb,var(--snk-success,#16a34a) 26%,transparent); }
.cd-pill.is-soon{ color:var(--snk-warning,#e0951a); background:color-mix(in srgb,var(--snk-warning,#e0951a) 15%,var(--snk-surface)); border-color:color-mix(in srgb,var(--snk-warning,#e0951a) 30%,transparent); }
.cd-pill.is-expired{ color:var(--snk-ink-500); background:var(--snk-surface-3); border-color:var(--snk-border); }
.cd-pill.is-planned{ color:var(--snk-accent); background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface)); border-color:color-mix(in srgb,var(--snk-accent) 28%,transparent); }

/* the code ticket row */
.cd-code{
  display:flex; align-items:stretch; gap:.5rem; position:relative;
  background:var(--snk-surface-3);
  border:1px dashed color-mix(in srgb,var(--snk-brand,#f5d673) 45%, var(--snk-border-strong));
  border-radius:12px; padding:.55rem .55rem .55rem .8rem;
}
/* ticket notches */
.cd-code::before, .cd-code::after{
  content:""; position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--snk-bg); border:1px solid var(--snk-border);
  top:50%; transform:translateY(-50%);
}
.cd-code::before{ left:-7px; }
.cd-code::after{ right:-7px; }
.cd-code-str{
  flex:1; min-width:0; align-self:center;
  font-family:ui-monospace,"SFMono-Regular","Cascadia Code",Menlo,Consolas,monospace;
  font-size:1.02rem; font-weight:700; letter-spacing:.05em; color:var(--snk-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cd-copy{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem;
  border:1.5px solid var(--snk-border-strong); background:var(--snk-surface);
  color:var(--snk-ink-700); border-radius:9px; padding:.4rem .6rem;
  font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; transition:.15s;
}
.cd-copy:hover{ border-color:var(--snk-slate-400); color:var(--snk-text); }
.cd-copy i{ width:.95rem; height:.95rem; }
.cd-copy.is-done{ color:var(--snk-success,#16a34a); border-color:color-mix(in srgb,var(--snk-success,#16a34a) 45%,transparent); }

/* rewards — REAL .reward-chip output (renderReward + renderRewardPokemonChips),
   codes-scoped to match the approved mockup: gold icon tint, pill radius, dark
   value, sentence-case label. Base .reward-chip styles come from snk-reward-chips.css.
   Scoped under .snk-stats-codes so the events page is untouched. */
.cd-rewards{ display:flex; flex-wrap:wrap; gap:.4rem; }
.snk-stats-codes .cd-rewards .reward-chip{
  border-radius:999px; background:var(--snk-surface-3); border:1px solid var(--snk-border);
  padding:.22rem .65rem .22rem .25rem; gap:.45rem; line-height:1.05;
}
.snk-stats-codes .cd-rewards .reward-chip:hover{ border-color:var(--snk-border-strong); box-shadow:none; }
.snk-stats-codes .cd-rewards .reward-chip .reward-chip-iconwrap{
  width:1.7rem; height:1.7rem; padding:0; border:1px solid var(--snk-border);
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--snk-brand,#f5d673) 24%,transparent), var(--snk-surface) 74%);
}
.snk-stats-codes .cd-rewards .reward-chip .reward-chip-icon{ width:88%; height:88%; }
.snk-stats-codes .cd-rewards .reward-chip .reward-chip-value{
  color:var(--snk-text); font-size:.82rem; font-weight:800; letter-spacing:normal;
}
.snk-stats-codes .cd-rewards .reward-chip .reward-chip-label{
  color:var(--snk-ink-500); font-size:.68rem; text-transform:none; letter-spacing:normal; font-weight:600;
}
/* Pokémon reward chip: name carries the meaning (real renderer hides value) */
.snk-stats-codes .cd-rewards .reward-chip-pokemon{ background:var(--snk-surface-3); border-color:var(--snk-border); }
.snk-stats-codes .cd-rewards .reward-chip-pokemon .reward-chip-label{ color:var(--snk-text); font-size:.74rem; font-weight:700; }

/* footer row */
.cd-foot{ display:flex; align-items:center; gap:.6rem; margin-top:.05rem; }
.cd-expiry{ font-size:.78rem; color:var(--snk-ink-500); display:inline-flex; align-items:center; gap:.35rem; }
.cd-expiry i{ width:.9rem; height:.9rem; }
.cd-expiry b{ color:var(--snk-text); font-weight:700; }
.cd-redeem{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  border-radius:10px; padding:.5rem .9rem; font:inherit; font-size:.85rem; font-weight:800;
  cursor:pointer; text-decoration:none; border:1px solid transparent;
  color:#4a3a08; background:linear-gradient(135deg, var(--snk-brand,#f5d673), #ffd873);
  box-shadow:0 4px 14px color-mix(in srgb,var(--snk-brand,#f5d673) 34%,transparent);
  transition:.15s;
}
.cd-redeem i{ width:1rem; height:1rem; }
.cd-redeem:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.cd-ingame{
  margin-left:auto; font-size:.76rem; font-weight:700; color:var(--snk-ink-500);
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px dashed var(--snk-border-strong); border-radius:9px; padding:.42rem .6rem;
}
.cd-ingame i{ width:.9rem; height:.9rem; }

/* ---------- expired archive ---------- */
.cd-archive{ margin-top:1.6rem; }
.cd-archive > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:700; color:var(--snk-ink-600);
  padding:.7rem .9rem; border:1px solid var(--snk-border); border-radius:12px;
  background:var(--snk-surface);
}
.cd-archive > summary::-webkit-details-marker{ display:none; }
.cd-archive > summary i.chev{ width:1rem; height:1rem; transition:transform .2s; margin-left:auto; }
.cd-archive[open] > summary i.chev{ transform:rotate(180deg); }
.cd-archive .cd-list{ margin-top:.85rem; }
.cd-card.is-dim{ opacity:.62; }
.cd-card.is-dim .cd-code{ border-style:solid; border-color:var(--snk-border); }

/* small print */
.cd-fine{
  margin-top:1.4rem; font-size:.78rem; line-height:1.5; color:var(--snk-ink-500);
  border-top:1px solid var(--snk-border); padding-top:.9rem;
}
.cd-fine a{ color:var(--snk-accent); text-decoration:none; }

@media (max-width:719px){
  .cd-how{ grid-template-columns:1fr; }
  .cd-result{ width:100%; margin-left:0; }
}