/* ============================================================
   GMAN.CITY — Neuromancer theme
   Colors: near-black bg, cyan + magenta neon accents
   ============================================================ */

/* Custom font from Google Fonts — Share Tech Mono feels very terminal */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* CSS variables — change these to retheme the whole site */
:root {
  --bg:        #050510;
  --cyan:      #00ffe7;
  --magenta:   #ff00aa;
  --blue:      #0044ff;
  --text:      #c8f0ff;
  --dim:       #3a6070;
  --font:      'Share Tech Mono', monospace;
}

/* Reset — remove browser default spacing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden; /* prevent horizontal scrollbars; vertical scroll allowed for small screens */
}

/* ============================================================
   CANVAS BACKGROUND
   The JS draws the cyberspace grid on this element
   ============================================================ */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* behind everything */
}

/* ============================================================
   CRT SCANLINES
   A transparent overlay of repeating horizontal lines
   gives the old-monitor feel
   ============================================================ */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* clicks pass through this layer */

  /* Repeating gradient creates the scanline stripes */
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );

  /* Subtle flicker animation on the whole screen */
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0%   { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.85; }
  94%  { opacity: 1; }
  96%  { opacity: 0.92; }
  100% { opacity: 1; }
}

/* ============================================================
   LAYOUT WRAPPER
   Centers content above the canvas
   ============================================================ */
.site-wrapper {
  position: relative;
  z-index: 2; /* above canvas and scanlines */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* anchor to top instead of center */
  min-height: 100vh;
  gap: 0.8rem;
  padding: 2rem 2rem 2rem; /* top padding pushes content down just a little */
}

/* ============================================================
   HEADER / TITLE
   ============================================================ */
.site-header {
  text-align: center;
}

.site-title {
  font-size: clamp(2.5rem, 8vw, 6rem); /* scales with screen width */
  letter-spacing: 0.15em;

  /* Base state: dark muted teal — like a neon tube at low power */
  color: #006e62;
  text-shadow:
    0 0 4px  rgba(0, 255, 231, 0.25),
    0 0 12px rgba(0, 255, 231, 0.10);

  animation: title-neon-pulse 6s infinite;
}

/* Neon sign effect — mostly dim, with intermittent bright flashes */
@keyframes title-neon-pulse {
  /* Long dim stretch */
  0%,  18%  { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* First yellow flicker */
  20%        { color: #ffe644; text-shadow: 0 0 8px #ffe644, 0 0 22px #ffaa00, 0 0 50px #ff8800; }
  21%        { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Dim stretch */
  25%,  38%  { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Quick cyan flash */
  40%        { color: var(--cyan); text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan), 0 0 60px var(--blue); }
  /* Drop back */
  42%        { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Dim stretch */
  45%,  55%  { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Second yellow flicker — double tap */
  57%        { color: #ffe644; text-shadow: 0 0 8px #ffe644, 0 0 22px #ffaa00, 0 0 50px #ff8800; }
  58%        { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  59%        { color: #ffe644; text-shadow: 0 0 8px #ffe644, 0 0 22px #ffaa00, 0 0 50px #ff8800; }
  60%        { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Dim stretch */
  63%,  72%  { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  /* Double cyan flash */
  74%        { color: var(--cyan); text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan), 0 0 60px var(--blue); }
  75%        { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
  77%        { color: var(--cyan); text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan), 0 0 60px var(--blue); }
  /* Settle back to dim */
  79%, 100%  { color: #006e62; text-shadow: 0 0 4px rgba(0,255,231,0.25), 0 0 12px rgba(0,255,231,0.10); }
}


/* ============================================================
   GLITCH EFFECT
   Applied to .site-title via the .glitch class.
   Uses ::before and ::after pseudo-elements that are
   slightly offset and use a clip-path animation to "tear".
   data-text must match the element's text content.
   ============================================================ */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text); /* copies the title text */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Cyan ghost — offset left */
.glitch::before {
  color: var(--cyan);
  text-shadow: none;
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  transform: translateX(-4px);
  animation: glitch-top 3s infinite steps(1);
  opacity: 0.7;
}

/* Magenta ghost — offset right */
.glitch::after {
  color: var(--magenta);
  text-shadow: none;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  transform: translateX(4px);
  animation: glitch-bottom 3s infinite steps(1);
  opacity: 0.7;
}

@keyframes glitch-top {
  0%,  90%  { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translateX(-4px); }
  91%        { clip-path: polygon(0 5%,  100% 5%,  100% 15%, 0 15%); transform: translateX( 3px); }
  92%        { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); transform: translateX(-6px); }
  93%        { clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); transform: translateX( 2px); }
  94%, 100%  { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translateX(-4px); }
}

@keyframes glitch-bottom {
  0%,  90%  { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX( 4px); }
  91%        { clip-path: polygon(0 30%, 100% 30%, 100% 45%, 0 45%); transform: translateX(-3px); }
  92%        { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translateX( 6px); }
  93%        { clip-path: polygon(0 75%, 100% 75%, 100% 85%, 0 85%); transform: translateX(-2px); }
  94%, 100%  { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX( 4px); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
  justify-content: center;
}

.nav-link {
  color: var(--magenta);
  text-decoration: none;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 6px  var(--magenta),
    0 0 20px var(--magenta);
  transition: color 0.2s, text-shadow 0.2s;
  padding: 0.4rem 0.8rem;
  border: 1px solid transparent;
}

.nav-link:hover {
  color: var(--cyan);
  text-shadow:
    0 0 8px  var(--cyan),
    0 0 30px var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* Active nav link — current page indicator */
.nav-active {
  color: var(--cyan);
  text-shadow:
    0 0 6px  var(--cyan),
    0 0 20px var(--cyan);
  border-color: rgba(0, 255, 231, 0.4);
}

/* ============================================================
   CONTENT PAGES
   Pages with scrollable content (blog, bio, projects) need
   overflow-y enabled — already allowed on landing page for small screens.
   ============================================================ */
body.page-scroll {
  overflow-y: auto;
}

/* Makes the GMAN.CITY title a clickable home link without breaking its look */
.site-title-link {
  text-decoration: none;
}

/* ============================================================
   TRANSMISSIONS (BLOG LISTING)
   ============================================================ */

/* Dark glass panel — city shows through behind the content */
.transmissions-panel {
  width: 100%;
  max-width: 720px;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: rgba(5, 5, 16, 0.88);
  border: 1px solid rgba(0, 255, 231, 0.55);
  box-shadow:
    0 0 18px rgba(0, 255, 231, 0.25),
    0 0 50px rgba(0, 255, 231, 0.08),
    inset 0 0 80px rgba(0, 0, 20, 0.4);
}

/* Section label — dim, small, terminal-style */
.transmissions-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--dim);
  margin-bottom: 1.8rem;
}

/* Individual post entry */
.transmission {
  padding: 1.4rem 0;
}

/* Date + ID row */
.transmission-meta {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.transmission-date {
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.15em;
}

.transmission-id {
  font-size: 0.72rem;
  color: rgba(0, 255, 231, 0.28);
  letter-spacing: 0.1em;
}

/* Post title — cyan glow */
.transmission-title {
  font-size: 1.15rem;
  font-weight: normal;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.35);
  margin-bottom: 0.6rem;
}

/* Excerpt text — slightly brighter than dim, readable but not loud */
.transmission-excerpt {
  font-size: 0.88rem;
  color: #7ab0c0;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

/* Read link — right-aligned, magenta */
.transmission-read {
  display: block;
  text-align: right;
  color: var(--magenta);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--magenta);
  transition: color 0.2s, text-shadow 0.2s;
}

.transmission-read:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

/* Thin divider between posts */
.transmission-divider {
  border: none;
  border-top: 1px solid rgba(0, 255, 231, 0.10);
}

/* Exit link — appears at top and bottom of the panel */
.panel-exit {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 255, 231, 0.10);
}

.panel-exit--top {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-top: 0;
  border-top: none;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 255, 231, 0.10);
}

.exit-link {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  transition: color 0.2s, text-shadow 0.2s;
}

.exit-link:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

/* ============================================================
   PROGRAMS (PROJECTS LISTING)
   ============================================================ */

/* Same glass panel style as transmissions */
.programs-panel {
  width: 100%;
  max-width: 720px;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: rgba(5, 5, 16, 0.88);
  border: 1px solid rgba(0, 255, 231, 0.55);
  box-shadow:
    0 0 18px rgba(0, 255, 231, 0.25),
    0 0 50px rgba(0, 255, 231, 0.08),
    inset 0 0 80px rgba(0, 0, 20, 0.4);
}

/* Section label */
.programs-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--dim);
  margin-bottom: 1.8rem;
}

/* Individual project entry — left cyan bar distinguishes it from blog posts */
.program {
  padding: 1.2rem 0 1.2rem 1.2rem;
  border-left: 2px solid rgba(0, 255, 231, 0.3);
  margin-bottom: 1.5rem;
}

/* Title + status badge on same row */
.program-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

/* Project name */
.program-title {
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.35);
}

/* [ ONLINE ] / [ OFFLINE ] / [ IN PROGRESS ] badge */
.program-status {
  font-size: 0.72rem;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  letter-spacing: 0.1em;
}

.program-status--wip {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

/* Project type label — dim terminal comment style */
.program-type {
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.2em;
  margin-bottom: 0.7rem;
}

/* Description body */
.program-desc {
  font-size: 0.88rem;
  color: #7ab0c0;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

/* Launch link — right-aligned, magenta like READ → on blog */
.program-launch {
  display: block;
  text-align: right;
  color: var(--magenta);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--magenta);
  transition: color 0.2s, text-shadow 0.2s;
}

.program-launch:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

/* ============================================================
   PHOTO FORTRESS (COLLECTION LISTING)
   Wider panel + grid of collection cards
   ============================================================ */

/* Fixed-height subwindow — fills most of the viewport below the header/nav.
   The collection list scrolls inside; the panel itself stays put. */
.fortress-panel {
  width: 100%;
  max-width: 1100px;
  /* height accounts for: wrapper padding (2rem) + title (~6rem) + nav (~2.5rem)
     + gaps (1.6rem) + panel margins (2.3rem) = ~14.5rem. Use 15rem to be safe. */
  height: calc(100vh - 15rem);
  margin-top: 0.3rem;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background: rgba(5, 5, 16, 0.88);
  /* full neon border on all four sides */
  border: 1px solid rgba(0, 255, 231, 0.55);
  box-shadow:
    0 0 18px rgba(0, 255, 231, 0.25),
    0 0 50px rgba(0, 255, 231, 0.08),
    /* bottom glow so the border reads clearly against the dark bg */
    0 6px 20px rgba(0, 255, 231, 0.2),
    inset 0 0 80px rgba(0, 0, 20, 0.4);
  /* flex column so the grid takes up all remaining space inside the panel */
  display: flex;
  flex-direction: column;
}

/* Section label */
.fortress-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--dim);
  margin-bottom: 1.8rem;
}

/* Stacked list — scrollable area inside the panel.
   flex: 1 means it fills whatever height is left after the heading and exit links. */
.collection-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  /* Subtle custom scrollbar to match the theme */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 231, 0.3) transparent;
}

/* Individual collection row — left magenta bar, horizontal layout */
.collection {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 0.8rem;
  border-left: 2px solid rgba(255, 0, 170, 0.5);
  border-bottom: 1px solid rgba(255, 0, 170, 0.12);
  background: rgba(10, 5, 20, 0.5);
  transition: background 0.2s;
}

.collection:hover {
  background: rgba(30, 5, 40, 0.7);
}

/* Small fixed thumbnail on the left */
.collection-thumb {
  flex-shrink: 0;
  width: 90px;
  height: 60px;
  background: rgba(0, 10, 30, 0.8);
  border: 1px solid rgba(255, 0, 170, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* "NO SIGNAL" label inside empty thumbnail */
.collection-thumb-label {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: rgba(255, 0, 170, 0.25);
  text-align: center;
}

/* Thumbnail image — add class="collection-img" to <img> when ready */
.collection-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text area — grows to fill available space */
.collection-body {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  min-width: 0;           /* allows text to truncate inside flex */
}

/* Collection title */
.collection-title {
  font-size: 0.92rem;
  font-weight: normal;
  color: var(--magenta);
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(255, 0, 170, 0.4);
  white-space: nowrap;
}

/* Category label */
.collection-type {
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* Short description — truncates with ellipsis if too long */
.collection-desc {
  font-size: 0.8rem;
  color: #5a8898;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Frame count + enter link — pinned to the right */
.collection-footer {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

/* Frame count */
.collection-count {
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Enter link */
.collection-enter {
  color: var(--magenta);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--magenta);
  transition: color 0.2s, text-shadow 0.2s;
  white-space: nowrap;
}

.collection-enter:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

/* ============================================================
   REPOSITORY PAGE
   White infinite library — complete aesthetic inversion.
   All neon effects stripped; replaced with clean cool grays.
   ============================================================ */

/* Title: dark ink on white — no glow, no animation */
.page-repo .site-title {
  color: #1a2535;
  text-shadow: none;
  animation: none;
}

/* Hide glitch ghost layers on the white page */
.page-repo .glitch::before,
.page-repo .glitch::after {
  opacity: 0;
}

/* Nav links: dark blue-gray, no neon glow */
.page-repo .nav-link {
  color: #4a6080;
  text-shadow: none;
  border-color: transparent;
}

.page-repo .nav-link:hover {
  color: #1a2a4a;
  text-shadow: none;
  border-color: rgba(50, 80, 140, 0.35);
  box-shadow: none;
}

.page-repo .nav-active {
  color: #1a2a4a;
  text-shadow: none;
  border-color: rgba(50, 80, 140, 0.45);
}

/* Exit links */
.page-repo .exit-link {
  color: #8aa0bb;
}

.page-repo .exit-link:hover {
  color: #1a2a4a;
  text-shadow: none;
}

.page-repo .panel-exit {
  border-top-color: rgba(150, 180, 220, 0.22);
}

.page-repo .panel-exit--top {
  border-bottom-color: rgba(150, 180, 220, 0.22);
}

/* Content panel — white glass */
.repo-panel {
  width: 100%;
  max-width: 720px;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(175, 200, 230, 0.65);
  box-shadow:
    0 4px 28px rgba(140, 170, 215, 0.18),
    0 1px 6px  rgba(100, 130, 180, 0.12);
  color: #1a2535;
}

.repo-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: #7a98b8;
  margin-bottom: 0.5rem;
}

.repo-subtitle {
  font-size: 0.82rem;
  color: #90a8c0;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}

/* Individual document entry */
.repo-entry {
  padding: 1.2rem 0 1.2rem 1.2rem;
  border-left: 2px solid rgba(80, 120, 185, 0.30);
  margin-bottom: 1.5rem;
}

.repo-entry-id {
  font-size: 0.72rem;
  color: #90a8c0;
  letter-spacing: 0.15em;
}

.repo-entry-title {
  font-size: 1.05rem;
  font-weight: normal;
  color: #1a2a4a;
  letter-spacing: 0.10em;
  margin: 0.3rem 0 0.5rem;
}

.repo-entry-desc {
  font-size: 0.88rem;
  color: #4a6080;
  line-height: 1.7;
}

/* ============================================================
   BIO PAGE
   ============================================================ */

.bio-panel {
  width: 100%;
  max-width: 680px;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: rgba(5, 5, 16, 0.88);
  border: 1px solid rgba(0, 255, 231, 0.55);
  box-shadow:
    0 0 18px rgba(0, 255, 231, 0.25),
    0 0 50px rgba(0, 255, 231, 0.08),
    inset 0 0 80px rgba(0, 0, 20, 0.4);
}

.bio-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--dim);
  margin-bottom: 1.8rem;
}

.bio-body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.bio-p {
  font-size: 0.92rem;
  color: #7ab0c0;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

/* Final line — slightly brighter, acts as a close */
.bio-p--closer {
  color: var(--text);
  padding-top: 0.4rem;
  border-top: 1px solid rgba(0, 255, 231, 0.10);
}

/* ============================================================
   CITY INTEL PAGE
   Event digest with city toggle, category tabs, neighborhood
   drill-down chips, and colour-coded event cards.
   ============================================================ */

/* Glass panel — wider than blog/projects to fit event cards */
.intel-panel {
  width: 100%;
  max-width: 860px;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: rgba(42, 42, 46, 0.94);
  border: 1px solid rgba(0, 255, 231, 0.55);
  box-shadow:
    0 0 18px rgba(0, 255, 231, 0.25),
    0 0 50px rgba(0, 255, 231, 0.08),
    inset 0 0 80px rgba(0, 0, 20, 0.15);
}

/* Header row: // CITY INTEL on left, weekend date on right */
.intel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.4rem;
}

.intel-heading {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: rgba(140, 190, 210, 0.75);
}

.intel-weekend {
  font-size: 0.72rem;
  color: rgba(140, 190, 210, 0.75);
  letter-spacing: 0.18em;
}

/* Last sync timestamp — sits in the top panel-exit row */
.intel-sync {
  font-size: 0.68rem;
  color: rgba(140, 190, 210, 0.55);
  letter-spacing: 0.12em;
}

/* ── City toggle ─────────────────────────────────────────── */

.city-toggle {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Reset browser button defaults, style as terminal bracket toggle */
.city-btn {
  background: none;
  border: 1px solid rgba(0, 255, 231, 0.2);
  color: var(--dim);
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s, box-shadow 0.2s;
}

.city-btn:hover {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.5);
  text-shadow: 0 0 8px var(--cyan);
}

.city-btn--active {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.6);
  text-shadow: 0 0 6px var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 231, 0.10);
}

/* ── Category tabs ───────────────────────────────────────── */

.category-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.cat-tab {
  background: none;
  border: 1px solid transparent;
  color: rgba(160, 205, 225, 0.65);
  font-family: var(--font);
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.cat-tab:hover {
  color: var(--text);
  border-color: rgba(200, 240, 255, 0.2);
}

.cat-tab--active {
  color: var(--text);
  border-color: rgba(200, 240, 255, 0.25);
  background: rgba(200, 240, 255, 0.04);
}

/* ── Day filter tabs ─────────────────────────────────────── */
/* Same visual pattern as .cat-tab; separate row below category tabs */

.day-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  align-items: center;
}

.day-tabs-label {
  font-size: 0.65rem;
  color: rgba(58, 96, 112, 0.45);
  letter-spacing: 0.2em;
  white-space: nowrap;
  flex-shrink: 0;
}

.day-tab {
  background: none;
  border: 1px solid transparent;
  color: rgba(58, 96, 112, 0.65);
  font-family: var(--font);
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.day-tab:hover {
  color: var(--text);
  border-color: rgba(200, 240, 255, 0.2);
}

.day-tab--active {
  color: var(--text);
  border-color: rgba(200, 240, 255, 0.25);
  background: rgba(200, 240, 255, 0.04);
}

/* ── Price filter tabs ───────────────────────────────────── */
/* Same visual pattern; uses cyan accent when active (free = good deal) */

.price-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  align-items: center;
}

.price-tabs-label {
  font-size: 0.65rem;
  color: rgba(58, 96, 112, 0.45);
  letter-spacing: 0.2em;
  white-space: nowrap;
  flex-shrink: 0;
}

.price-tab {
  background: none;
  border: 1px solid transparent;
  color: rgba(58, 96, 112, 0.65);
  font-family: var(--font);
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.price-tab:hover {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.3);
}

.price-tab--active {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.45);
  background: rgba(0, 255, 231, 0.04);
  text-shadow: 0 0 6px rgba(0, 255, 231, 0.35);
}

/* ── Neighborhood drill-down chips ───────────────────────── */

.neighborhood-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 255, 231, 0.10);
}

.nb-label {
  font-size: 0.65rem;
  color: rgba(160, 205, 225, 0.65);
  letter-spacing: 0.2em;
  white-space: nowrap;
  flex-shrink: 0;
}

.neighborhood-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.nb-chip {
  background: none;
  border: 1px solid transparent;
  color: rgba(58, 96, 112, 0.55);
  font-family: var(--font);
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nb-chip:hover {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.3);
}

.nb-chip--active {
  color: var(--cyan);
  border-color: rgba(0, 255, 231, 0.45);
  text-shadow: 0 0 6px rgba(0, 255, 231, 0.35);
}

/* ── Event sections ──────────────────────────────────────── */

.intel-section {
  margin-bottom: 2rem;
}

/* Section label row: title on left, event count on right */
.intel-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 255, 231, 0.12);
}

.intel-section-title {
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 0, 170, 0.5);
}

.intel-section-count {
  font-size: 0.62rem;
  color: rgba(160, 205, 225, 0.60);
  letter-spacing: 0.12em;
}

/* Empty state */
.intel-no-events {
  font-size: 0.80rem;
  color: var(--dim);
  letter-spacing: 0.2em;
  padding: 2rem 0;
  text-align: center;
}

/* ── Event cards ─────────────────────────────────────────── */

.event-card {
  padding: 0.9rem 0 0.9rem 1.2rem;
  border-left: 2px solid rgba(0, 255, 231, 0.2); /* overridden per-category below */
  margin-bottom: 1.1rem;
}

/* Colour-coded left border: cyan=music, magenta=art, amber=social */
.event-card--music  { border-left-color: rgba(0, 255, 231, 0.30); }
.event-card--art    { border-left-color: rgba(255, 0, 170, 0.30); }
.event-card--social { border-left-color: rgba(255, 170, 0,  0.30); }

/* Brighter border + subtle background glow for top picks */
.event-card--top.event-card--music  {
  border-left-color: rgba(0, 255, 231, 0.70);
  background: rgba(0, 255, 231, 0.03);
}
.event-card--top.event-card--art    {
  border-left-color: rgba(255, 0, 170, 0.70);
  background: rgba(255, 0, 170, 0.03);
}
.event-card--top.event-card--social {
  border-left-color: rgba(255, 170, 0, 0.70);
  background: rgba(255, 170, 0, 0.03);
}

/* Top row of the card: badges on left, day+time on right */
.event-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.event-badges {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Category badge pill */
.event-badge {
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  padding: 0.1rem 0.4rem;
  border: 1px solid;
}

.event-badge--music  { color: var(--cyan);    border-color: rgba(0, 255, 231, 0.30); }
.event-badge--art    { color: var(--magenta); border-color: rgba(255, 0, 170, 0.30); }
.event-badge--social { color: #ffaa00;        border-color: rgba(255, 170, 0,  0.30); }

/* ★ TOP PICK label */
.event-top-pick {
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  color: #ffe644;
  text-shadow: 0 0 6px rgba(255, 230, 68, 0.45);
}

/* SAT · 22:00 */
.event-time-badge {
  font-size: 0.68rem;
  color: rgba(200, 240, 255, 0.65);
  letter-spacing: 0.12em;
}

/* Event title */
.event-title {
  font-size: 1.02rem;
  font-weight: normal;
  color: var(--text);
  letter-spacing: 0.08em;
  margin-bottom: 0.22rem;
}

/* Venue + neighbourhood */
.event-venue {
  font-size: 0.70rem;
  color: rgba(140, 190, 210, 0.80);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

/* AI-generated summary — quoted, slightly brighter than the why line */
.event-summary {
  font-size: 0.82rem;
  color: #b0d8e8;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

/* Why interesting — dimmer, arrow-prefixed */
.event-why {
  font-size: 0.76rem;
  color: rgba(122, 176, 192, 0.85);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}

/* Footer: score + price + view link */
.event-footer {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

/* Score number — colour injected inline by JS based on score value */
.event-score {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

/* Score badge — compact glowing pill in card-top row.
   Colour (cyan vs dim) applied inline by JS based on score threshold. */
.event-score-badge {
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  /* opacity of border tracks the colour, so a dim score looks truly dim */
  border-color: inherit;
  white-space: nowrap;
}

/* Neighbourhood location tag — more prominent than the dim venue line */
.event-neighborhood-tag {
  display: inline-block;
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  color: rgba(200, 240, 255, 0.65);
  border: 1px solid rgba(200, 240, 255, 0.18);
  padding: 0.1rem 0.4rem;
  margin-bottom: 0.35rem;
}

/* Price — mid-dim, pushes VIEW → to the right */
.event-price {
  font-size: 0.70rem;
  color: rgba(140, 190, 210, 0.80);
  letter-spacing: 0.10em;
  flex: 1;
}

/* View source link */
.event-view {
  color: var(--magenta);
  text-decoration: none;
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--magenta);
  transition: color 0.2s, text-shadow 0.2s;
  white-space: nowrap;
}

.event-view:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}