/* 50-codes.css — CODES / GIVEAWAYS section (#sec-codes).
   Campaign cards read as punched tickets: the code word sits in a dashed
   amber-ghost well on a ticket strip, a perforation rule (with punched
   notches) separates it from the campaign body. Base card / badge / chip /
   switch styling comes from 30-panels.css + 20-console.css; only the
   codes-specific dress lives here. Red never appears — ON AIR only. */

/* ---- toolbar over the grid ---- */
.codes-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:14px;
}
.codes-bar .spacer{ flex:1; }

#sec-codes .btn .ico{
  width:13px; height:13px;
  vertical-align:-2px;
  margin-right:6px;
}

/* ---- campaign card: ticket strip + body ---- */
.code-card{
  background:var(--panel-face);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--bezel), var(--shadow-1);
  overflow:hidden;                     /* clips the punched notches */
  display:flex; flex-direction:column;
  transition:box-shadow .15s, border-color .15s, opacity .15s;
}
.code-card:hover{ border-color:var(--line-strong); box-shadow:var(--bezel), var(--shadow-2); }
.code-card.disabled{ opacity:.55; }
.code-card.disabled:hover{ opacity:.8; }

/* the flagship live campaign wears an amber keyline + tag — never red */
.code-card.flagship{
  border-color:var(--accent-dim);
  box-shadow:var(--bezel), 0 0 0 1px rgba(245,165,36,.22), 0 0 18px rgba(245,165,36,.07), var(--shadow-1);
}
.code-flag{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px 0;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.code-flag::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  flex:none;
}

/* ticket strip: code word in a dashed amber-ghost well, perforation below */
.code-ticket{
  position:relative;
  padding:14px 16px 13px;
  background:linear-gradient(180deg, rgba(245,165,36,.05), rgba(245,165,36,.015));
  border-bottom:1px dashed var(--line-strong);
}
/* punched notches astride the perforation */
.code-ticket::before,
.code-ticket::after{
  content:"";
  position:absolute; bottom:-8px;
  width:15px; height:15px; border-radius:50%;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.code-ticket::before{ left:-8px; }
.code-ticket::after{ right:-8px; }

.code-word{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:29px;
  line-height:1.1;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--accent);
  text-shadow:0 0 18px var(--accent-glow);
  background:var(--accent-ghost);
  border:1px dashed rgba(245,165,36,.38);
  border-radius:var(--radius);
  padding:10px 12px;
  overflow-wrap:anywhere;
}
/* catch-all: quieter, machined, no glow — it is a mode, not a word */
.code-word.catchall{
  color:var(--text);
  font-size:20px;
  letter-spacing:.24em;
  text-shadow:none;
  background:var(--input-bg);
  border-color:var(--line-strong);
  box-shadow:var(--well-inset);
}
.code-ticket-sub{
  margin-top:7px;
  text-align:center;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---- card body ---- */
.code-body{
  display:flex; flex-direction:column; gap:9px;
  padding:12px 16px 14px;
}
.code-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.code-meta .spacer{ flex:1; }

/* action badges — distinct hues from the sanctioned secondary set */
.badge.act-shoutout   { color:var(--accent); border-color:var(--accent-line); background:rgba(245,165,36,.06); }
.badge.act-web-entry  { color:var(--blue);   border-color:var(--blue-line); }
.badge.act-doge-payout{ color:var(--gold);   border-color:var(--warn-line); }
.badge.act-drawing    { color:var(--ok);     border-color:var(--ok-line); }
.badge.act-none       { color:var(--muted);  border-color:var(--line-strong); }

/* state chips (chip base in 30-panels.css) — amber/green language only */
.chip.armed  { color:var(--ok);    border-color:var(--ok-line); }
.chip.off    { color:var(--muted); border-color:var(--line-strong); }
.chip.expired,
.chip.capped,
.chip.needs  { color:var(--warn);  border-color:var(--warn-line); }

.code-when{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--muted);
  white-space:nowrap;
}
.code-when .ico{ width:13px; height:13px; color:var(--accent-dim); }

.code-expiry{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--warn);
}
.code-expiry .ico{ width:13px; height:13px; }
.code-expiry.dead{ color:var(--muted); text-decoration:line-through; }

/* reveal-script preview — recessed well, {code} highlighted */
.code-script{
  font-size:12.5px; color:var(--muted);
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--well-inset);
  padding:8px 10px;
}
.code-var{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:.92em;
  color:var(--accent);
}

/* stats row */
.code-stats{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--text);
}
.code-stats .cs{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.code-stats .ico{ width:14px; height:14px; color:var(--accent-dim); flex:none; }

/* global-cap progress — amber fill in a machined well */
.code-progress{
  height:6px; border-radius:3px;
  background:var(--input-bg);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  overflow:hidden;
}
.code-progress i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width .3s ease;
}

.code-limits-line{ font-size:12px; color:var(--muted); }

.code-actions{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-top:2px;
}
.code-actions .spacer{ flex:1; }

/* ---- inline create / edit form ---- */
.code-form{
  border-top:1px solid var(--hairline);
  padding-top:12px;
  margin-top:4px;
}
.code-new-panel{ margin-bottom:16px; }
.code-new-panel .code-form{ border-top:none; padding-top:0; margin-top:0; }

.code-form .form-grid{ align-items:start; }
.code-form .form-grid > label{ margin-top:9px; }
.code-form .help{ margin-top:5px; }

.code-input{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  width:100%;
}

.code-trig{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trig-unit{ font-size:12.5px; color:var(--muted); }

.code-limits{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.code-limits .cl{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--muted);
  white-space:nowrap;
}
.code-limits input[type=number]{ width:76px; }
.code-limits .help{ flex-basis:100%; margin-top:0; }

/* datetime-local matches the token wells (tokens file styles other inputs) */
#sec-codes input[type=datetime-local],
#sec-codes input[type=time]{
  color-scheme:dark;
  background:var(--input-bg);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--radius);
  padding:8px 10px;
  font-family:var(--font-body);
  font-size:14px;
  max-width:100%;
  box-shadow:var(--well-inset);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
#sec-codes input[type=datetime-local]:focus-visible,
#sec-codes input[type=time]:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--well-inset), 0 0 0 3px var(--accent-glow);
}

/* ---- empty state: reveal → redeem → reward ---- */
.code-empty{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  padding:30px 26px 26px;
}
.ce-mark{ color:var(--accent-dim); }
.ce-mark svg{ width:96px; height:60px; }
/* generated ticket art (assets/empty-codes.png). While it is present the
   procedural svg glyph steps aside; if the image fails its onerror removes
   it and the glyph returns — the stand-in is always the fallback. */
.ce-mark .ce-art{
  display:block;
  width:min(340px,100%);
  aspect-ratio:16/9;
  object-fit:cover;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  background:var(--bg-deep);
}
.ce-mark:has(.ce-art) svg{ display:none; }
.ce-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:10px 0 8px;
}
.ce-lede{
  color:var(--muted);
  font-size:13.5px;
  max-width:520px;
  margin:0 auto 20px;
}
.ce-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  text-align:left;
}
.ce-step{
  display:flex; flex-direction:column; gap:5px;
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--well-inset);
  padding:13px 14px;
}
.ce-ico{ color:var(--accent); }
.ce-ico svg{ width:26px; height:26px; }
.ce-step b{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ce-step span:last-child{ font-size:12.5px; color:var(--muted); }
.ce-cta{ margin-top:20px; }

/* ---- responsive: single column through tablet width — two-up card flow
   left voids and broke reading order at 768 ---- */
@media (max-width:820px){
  .codes-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .code-word{ font-size:24px; letter-spacing:.08em; }
  .ce-steps{ grid-template-columns:1fr; }
  .code-stats{ gap:10px; }
}

/* large desk: let the word breathe */
@media (min-width:1280px){
  .code-word{ font-size:32px; }
}