/* ═══════════════════════════════════════════════════════════════════════════
   CODEX CARD SYSTEM — positional zone redesign (codex-card-redesign-prompt.md)

   Zones (nothing floats, one badge class per zone):
     poster TL: type badge (+ code stacked beneath in poster-only view)
     poster TR: stack — rating / WT / rewatch (and picker pill in poster-only)
     poster bottom edge: event strip (the event badge's ONLY home)
     between poster & metadata: 4px tracking-stripe barcode (picker→event→franchise)
     metadata: chip row → title → subtitle → flexible gap → footer rail

   Type voices: Cinzel 900 titles · Spectral 600 subtitles · Share Tech Mono machine.
   Colors come from tokens (--type-*) and per-user/event/franchise accent data.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer features {

/* ── Poster zone containers ── */
.cc-tl, .cc-tr {
  position:absolute; top:6px; z-index:4;
  display:flex; flex-direction:column; gap:4px;
}
.cc-tl { left:6px; align-items:flex-start; }
.cc-tr { right:6px; align-items:flex-end; }

/* Badge chassis — squared, dark translucent, mono */
.cc-badge {
  display:inline-flex; align-items:center; gap:0.25rem;
  background:rgba(13,13,18,0.88); border:1px solid rgba(255,255,255,0.08);
  border-radius:4px; padding:0 0.375rem; height:1.375rem;
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px;
  line-height:1; text-transform:uppercase; white-space:nowrap;
}
.cc-badge-type    { font-weight:700; }
.cc-badge-type.cc-ep     { color:var(--type-ep); }
.cc-badge-type.cc-film   { color:var(--type-film); }
.cc-badge-type.cc-season { color:var(--type-season); }
.cc-badge-wt      { color:var(--mist); }
.cc-badge-code    { color:var(--gold-pale); }
.cc-badge-rating  { color:var(--gold); }
.cc-badge-picker  { border-radius:999px; text-transform:none; }

/* ── Event strip — full-width bar docked inside the poster bottom edge ── */
.cc-event-strip {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:1.5rem; display:flex; align-items:center; gap:0.375rem;
  padding:0 0.5rem;
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px;
  text-transform:uppercase; white-space:nowrap;
  overflow:hidden;
}
.cc-event-strip .cc-evt-label { overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.cc-event-strip .cc-evt-more  { flex-shrink:0; opacity:.8; }
.cc-event-strip img { width:14px; height:14px; object-fit:contain; border-radius:2px; flex-shrink:0; }
/* bordered mode (default): translucent dark + colored top border, colored text */
.cc-event-strip.cc-evt-bordered { background:rgba(13,13,18,0.85); border-top:2px solid currentColor; }
/* solid mode: event color fill, text color set inline from event data */

/* Franchise chip inset above the strip (poster-only view) */
.cc-franchise-inset { position:absolute; left:6px; z-index:4; }

/* Occasion delete: inset above the strip instead of colliding with it */
.codex-occasion-delete-btn { bottom:2rem !important; }

/* ── Tracking-stripe barcode (Settings → Display toggle) ── */
.cc-stripe { height:4px; display:flex; flex-shrink:0; }
body.vc-stripe-off .cc-stripe { display:none; }
.cc-stripe > i { flex:1; display:block; }

/* ── Metadata block ── */
.cc-chips { display:flex; flex-wrap:wrap; gap:0.25rem; margin-bottom:0.375rem; }
.cc-chip {
  display:inline-flex; align-items:center; gap:0.25rem;
  border:1px solid; border-radius:999px;
  background:transparent;
  padding:0 0.4375rem; height:1.375rem; /* matches .cc-badge exactly */
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px;
  line-height:1; white-space:nowrap; max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
}
.cc-chip img { width:12px; height:12px; object-fit:contain; border-radius:2px; }
.cc-chip-done { color:var(--type-season); border-color:color-mix(in srgb, var(--type-season) 30%, transparent); }
/* Episode code — its own row pinned just above the footer, borderless muted
   mono. Same vertical position relative to the card bottom on every card. */
.cc-code-row {
  margin-top:auto; padding-top:0.25rem; margin-bottom:0.3125rem;
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px;
  color:var(--fog); line-height:1;
}
/* when the code row is present it owns the flexible gap; footer docks to it */
.cc-code-row + .cc-footer { margin-top:0; }
/* Ghost placeholder when nothing claims the chip row — a picked-by-shaped
   solid dim pill spanning most of the slot: marks out the space without
   asking to be read */
.cc-chip-ghost {
  border-color:transparent;
  width:100%; /* chip row is inset by the card padding, so the pill's right
                 gap mirrors its left gap exactly */
  background:color-mix(in srgb, var(--dust) 6%, transparent);
}
.cc-chip-picker, .cc-badge-picker {
  font-weight:700;
  padding:0 0.5625rem 1px; /* extra horizontal room; 1px bottom = optical
                              vertical centering (the mono sits low) */
  justify-content:center;
}

.cc-title {
  font-family:var(--font-occult); font-weight:600; letter-spacing:0.02em;
  font-size:0.8125rem; line-height:1.3; color:var(--static);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2lh;
}
.cc-subtitle {
  margin-top:0.125rem;
  font-family:var(--font-literary); font-weight:400; font-size:0.75rem;
  color:var(--mist); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Footer rail — pinned, ruled, machine voice; baselines align across the row */
.cc-footer {
  margin-top:auto; padding-top:0.375rem;
  border-top:1px solid color-mix(in srgb, var(--bronze) 14%, transparent);
  display:flex; justify-content:space-between; align-items:baseline; gap:0.5rem;
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px;
  white-space:nowrap; line-height:1;
}
.cc-footer .cc-rec { font-weight:700; }
.cc-rec.cc-ep     { color:var(--type-ep); }
.cc-rec.cc-film   { color:var(--type-film); }
.cc-rec.cc-season { color:var(--type-season); }
.cc-footer .cc-date { color:var(--fog); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.cc-footer .cc-time { color:var(--dust); font-weight:700; flex-shrink:0; }
.cc-footer .cc-code { color:var(--gold-pale); flex-shrink:0; }

/* The new structure supersedes these legacy slots inside redesigned cards */
.codex-card .codex-card-overlay-media,
.codex-card .codex-card-wt-badge,
.codex-card .codex-card-overlay-picker { display:none; }

/* Poster-only view: stripe forms the card's bottom edge (no metadata block
   in flow — the hover info overlay is absolute and unaffected) */
.codex-card-compact .cc-stripe { border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }

} /* end @layer features */