/* oc-terminal.css — Offline Comedy shared night terminal design system
   Link before inline <style> in every HTML page. Inline rules override these. */

:root {
  --green: #00ff41;
  --green-dim: #00b32c;
  --green-dark: #003b0f;
  --yellow: #C4A840;
  --red: #ff4444;
  --bg: #050505;
  --card-bg: #050505;
  --input-bg: #0a0a0a;
  --placeholder: #1c4827;
  --scanline: rgba(0,255,65,.025);
  --green-glow: rgba(0,255,65,.18);
  --tile-bg: rgba(0,255,65,.02);
  --tile-bg-hover: rgba(0,255,65,.05);
  /* Added for the free-Reservation-tier flow (public/reservation-flow.js)
     per design_handoff_free_reservation_flow — reusable across any future
     gold/teal/off-white accent use, not page-specific. */
  --gold: #FFD700;
  --gold-dim: #C4A840;
  --teal: #22d3ee;
  --off-white: #F2F2F2;
  --green-mid: #008f20;
  --glow-gold: rgba(255,210,60,.5);
  /* Added for the show-card tag system (design_handoff_show_card_tags) —
     the two tones the existing palette had no token for yet. */
  --neon-green: #39FF14;
  --orange: #ff8c1a;
  --acid-yellow: #FAD803;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,var(--scanline) 0px,var(--scanline) 1px,transparent 1px,transparent 2px); pointer-events:none; z-index:999; }

.terminal-bar { background:var(--green-dark); border-bottom:1px solid var(--green-dim); padding:8px 14px; display:flex; align-items:center; gap:10px; }
.dots { display:flex; gap:6px; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--green-dim); opacity:.45; }
.dot-close { cursor:pointer; transition:background .15s, opacity .15s; }
.dot-close:hover { background:var(--red); opacity:1; }
.terminal-title { flex:1; text-align:center; font-size:.68rem; color:var(--green-dim); letter-spacing:.18em; }

.ln { font-size:.82rem; line-height:1.65; }
.dim { color:var(--green-dim); }
.bright { color:var(--green); text-shadow:0 0 8px var(--green-glow); }

.btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:inherit; font-size:.8rem; padding:.55rem 1rem; cursor:pointer; letter-spacing:.15em; text-transform:uppercase; width:100%; transition:background .18s, color .18s; }
.btn:hover { background:var(--green); color:var(--bg); }

.input-pfx { padding:.5rem .65rem; color:var(--green-dim); font-size:.85rem; }

.flash { font-size:.76rem; padding:.5rem .7rem; border:1px solid; margin:.5rem 0; display:none; }
.flash.show { display:block; }
.flash.ok { border-color:var(--green); color:var(--green); }
.flash.err { border-color:var(--red); color:var(--red); }

.cur { display:inline-block; width:8px; height:.9em; background:var(--green); vertical-align:text-bottom; animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.btn.ghost { border-color:var(--green-dark); color:var(--green-dim); background:transparent; }
.btn.ghost:hover { background:transparent; color:var(--red); border-color:var(--red); }

.section-label { font-size:.72rem; color:var(--green-dim); letter-spacing:.15em; margin:1rem 0 .4rem; text-transform:uppercase; }
.sep { border:none; border-top:1px solid var(--green-dark); margin:1rem 0; }
.back-link { display:inline-block; margin-top:1.2rem; font-size:.75rem; color:var(--green-dim); text-decoration:none; letter-spacing:.1em; }
.back-link:hover { color:var(--green); }

/* Pixel run-cycle banner (offline-run-banner.js) — reserves height via CSS so the
   canvas never causes layout shift while it sizes itself. */
.run-banner { position:relative; width:100%; height:150px; background:#000; overflow:hidden; contain:layout paint; }
@media (min-width:768px) { .run-banner { height:200px; } }

.run-banner__canvas { position:absolute; inset:0; display:block; }

.run-banner__hud { position:absolute; z-index:2; font-family:'Courier New', monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); text-shadow:0 0 6px var(--green-glow); pointer-events:none; white-space:nowrap; }
.run-banner__hud--tl { top:8px; left:10px; }
.run-banner__hud--tr { top:8px; right:10px; color:var(--red); text-shadow:0 0 6px rgba(255,68,68,.35); }
.run-banner__hud--bl { bottom:8px; left:10px; opacity:.7; }

/* White-silhouette treatment matches #zone-logo's mask on the comedy-show
   img-zone (brightness(0) invert(1) recolors any opaque pixel pure white,
   leaving transparency alone) so the offline mark reads the same way Paul
   Elia's page does. Only applied while the offline mark itself is showing
   (--rb-mono set via .run-banner__logo--mono, toggled in JS) — a sponsor
   logo in the rotation keeps its own brand colors, just with the same
   chromatic-split glow. */
.run-banner__logo { --rb-mono: ; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:192%; max-height:288px; width:auto; z-index:3; pointer-events:none; filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
.run-banner__logo--mono { --rb-mono: brightness(0) invert(1); }

.run-banner__logo.is-glitching { animation:oc-run-glitch .42s steps(1, end); }

@keyframes oc-run-glitch {
  0%   { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
  8%   { clip-path:inset(10% 0 60% 0); transform:translate(calc(-50% - 3px), calc(-50% + 1px)); filter:var(--rb-mono) drop-shadow(-2px 0 0 var(--red)) drop-shadow(2px 0 0 var(--green)); }
  16%  { clip-path:inset(40% 0 10% 0); transform:translate(calc(-50% + 2px), calc(-50% - 2px)); opacity:.6; }
  24%  { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(2px 0 0 #00e5ff) drop-shadow(-2px 0 0 var(--yellow)); opacity:1; }
  32%  { clip-path:inset(65% 0 5% 0); transform:translate(calc(-50% + 4px), -50%); opacity:.4; }
  40%  { clip-path:inset(5% 0 45% 0); transform:translate(calc(-50% - 1px), calc(-50% + 3px)); filter:var(--rb-mono) drop-shadow(-2px 0 0 #00e5ff) drop-shadow(2px 0 0 var(--yellow)); }
  48%  { clip-path:inset(0 0 0 0); opacity:.8; transform:translate(-50%,-50%); }
  60%  { clip-path:inset(20% 0 30% 0); transform:translate(calc(-50% + 2px), calc(-50% - 1px)); filter:var(--rb-mono) drop-shadow(-1px 0 0 var(--red)) drop-shadow(1px 0 0 var(--green)); }
  72%  { clip-path:inset(0 0 0 0); opacity:1; transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); }
  100% { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  .run-banner__logo.is-glitching { animation:none; }
}

/* Show-card tag row (design_handoff_show_card_tags) — tag_type + venue
   pills under the title line, replacing the old "Offline Comedy, City"
   subtitle. Tone (color/background/border) is resolved per-tag by
   tag-registry.js and applied inline, same convention as .oc-tag-solid's
   eventTagPill; this class only carries the shared shape/type. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.tag-pill {
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .26rem .55rem;
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
}
/* Per-section LARGE size + vibrant-only idle blink
   (design_handoff_card_tags_levels). Scramble is JS — tag-registry.js. */
.tag-pill--L { font-size: .74rem; padding: .36rem .72rem; letter-spacing: .14em; }
.tag-pill--blink { animation: tagIdleBlink 9s linear infinite; }
@keyframes tagIdleBlink { 0%, 90%, 100% { opacity: 1 } 91% { opacity: .35 } 92.5% { opacity: 1 } 93.5% { opacity: .55 } 95% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .tag-pill { animation: none !important; } }

/* Header-line SHARE button (design_handoff_event_tile) — a flex sibling
   of the title block inside .title-row, replacing the old per-timeslot
   button that used to sit beside the CTA. .title-row itself flexes
   (align-items:flex-start; gap:14px) on each page that uses it; the
   title/date block takes a flex:1 wrapper (.title-block) so this button
   stays flush right without wrapping under the date. */
.title-block { flex: 1; min-width: 0; }
/* Wraps the button + its aria-live announcer as one html() fragment
   without becoming its own flex item — the button itself stays the
   flex-shrink:0 sibling .title-row lays out against. */
.oc-share-unit { display: contents; }
.oc-share-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5ch;
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: .3rem .5rem;
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--green-dim);
  line-height: 1;
  transition: color .12s steps(2), border-color .12s steps(2);
}
.oc-share-btn:hover {
  color: var(--neon-green);
  border-color: var(--green-dim);
  text-shadow: 0 0 8px rgba(57,255,20,.5);
}
.oc-share-btn:active { filter: brightness(.95); transform: translateY(1px); }
.oc-share-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--neon-green), 0 0 12px rgba(57,255,20,.4);
}
.oc-share-btn--copied { color: var(--neon-green); border-color: var(--green-dim); }
.oc-share-glyph { font-size: .8rem; line-height: 1; }
/* Visually-hidden aria-live sibling for the copy-confirm announcement —
   same pattern as inline-purchase.css's .ip-live-region. The visible
   feedback is a color/label swap on the button itself; aria-label alone
   only reaches assistive tech if the button still holds focus, which a
   mouse click doesn't guarantee in every browser. */
.oc-share-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Offline Presents event tile (design_handoff_event_tile) ──────────
   Curated-event card variant — film screenings, dinner parties, art
   shows. Shares the standard show-card shell; adds a label, a glitching
   banner image, title+subtitle, an expandable long-form description,
   and an inverted (filled) CTA. Scoped under .show-card--presents so it
   layers cleanly alongside the existing .show-card--gold (404) modifier. */
.show-card--presents .presents-label {
  font-family: var(--font-terminal, 'Share Tech Mono', monospace);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--green-dim);
  margin: 18px 0 8px;
}
.show-card--presents .presents-label .cur-blink {
  animation: oc-blink 1.06s steps(1) infinite;
}
@keyframes oc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.show-card--presents .event-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #000;
}
.show-card--presents .event-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.show-card--presents .event-banner .banner-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,255,65,.07) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.show-card--presents .event-banner .banner-glitch {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 42%, rgba(57,255,20,.14) 42% 46%, transparent 46%),
    linear-gradient(to bottom, transparent 71%, rgba(255,68,68,.12) 71% 73%, transparent 73%);
  animation: oc-banner-glitch 5.5s steps(1) infinite;
}
@keyframes oc-banner-glitch {
  0%, 86%  { opacity: 0; transform: translateX(0); }
  87%      { opacity: 1; transform: translateX(-6px); }
  89%      { opacity: 1; transform: translateX(5px); }
  91%      { opacity: 0; }
  95%      { opacity: 1; transform: translateX(3px); }
  96%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .show-card--presents .presents-label .cur-blink { animation: none; }
  .show-card--presents .event-banner .banner-glitch { animation: none; opacity: 0; }
}

.show-card--presents .event-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--off-white);
  margin-top: 14px;
}
@media (max-width: 420px) {
  .show-card--presents .event-title { font-size: 1.45rem; }
}
.show-card--presents .event-subtitle {
  font-family: var(--font-terminal, 'Share Tech Mono', monospace);
  font-size: .92rem;
  color: var(--green);
  letter-spacing: .03em;
  margin-top: 5px;
}

.show-card--presents .event-desc {
  font-family: var(--font-terminal, 'Share Tech Mono', monospace);
  font-size: .9rem;
  font-style: italic;
  color: var(--off-white);
  line-height: 1.6;
  margin: 12px 0 14px;
  text-wrap: pretty;
}
.show-card--presents .event-desc p { margin: 0; }
.show-card--presents .event-desc p + p { margin-top: 1em; }
.show-card--presents .event-desc .section-label {
  font-style: normal;
  color: var(--green-dim);
  letter-spacing: .06em;
}
.show-card--presents .event-desc .desc-ellipsis { color: var(--green-mid); }
.show-card--presents .event-desc .desc-more { display: none; }
.show-card--presents .event-desc.is-open .desc-more { display: block; }
.show-card--presents .event-desc.is-open .desc-collapsed { display: none; }
.show-card--presents .event-desc .desc-toggle-btn {
  display: block;
  margin-top: .4em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-terminal, 'Share Tech Mono', monospace);
  font-size: .9rem;
  font-style: italic;
  color: var(--green);
  text-decoration: underline;
}
.show-card--presents .event-desc .desc-toggle-btn:hover {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(57,255,20,.5);
}

/* No new CTA styling needed — every purchase CTA on the site already
   renders via inline-purchase.js's ctaMarkup(), which is unconditionally
   .crt-cta--inverted (solid neon fill, black label; crt-buttons.css).
   The handoff's "inverted CTA" is describing the existing site-wide
   default, not a Presents-tile-specific treatment. */