/* Demo Catalogue — Netflix-style cross-account browse.

   Visual language (redesigned):
   - The "showroom" surface — the most visually rich screen. Cards are
     "posters" with a category-themed gradient + custom SVG illustration,
     real depth (hairline border + layered shadow + hover lift), and a
     restrained per-category hue derived from cool neutrals.
   - Rows are horizontally scrollable tracks with edge-fade + hover
     scroll arrows driven by data-can-l/data-can-r.
   - The detail view slides in like a premium drawer: a cinematic hero
     (poster art as backdrop) followed by a faux-browser preview.

   Category palette + glow vars are set per-card via .dc-cat-<key>
   classes so the same primitives work for cards, hero, and chips. The
   palette is harmonized to the new dark canvas: deep, desaturated
   gradients + one restrained glow hue per category, with --accent
   reserved for the MongoDB-forward categories. */

.main-view-catalogue {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;   /* anchor for the slide-in detail panel + scrim */
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(0, 237, 100, 0.06), transparent 60%),
    radial-gradient(820px 480px at -8% 112%, rgba(0, 104, 74, 0.05), transparent 62%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ── Per-category palette tokens ─────────────────────────────────────
   Each card / hero / chip carries one of these classes; the rest of
   the styles read --cat-grad / --cat-glow / --cat-ink and stay generic.
   Refined: every gradient is a deep, low-chroma ramp into near-black so
   the grid reads as a curated set, not a rainbow. One muted glow hue
   per category; MongoDB-forward categories lean on --accent. */

.dc-cat-voyage         { --cat-grad: linear-gradient(150deg,#12414c 0%,#0c2730 55%,#08161b 100%); --cat-glow:#4cc6d6; --cat-ink:#def3f7; }
.dc-cat-vector_search  { --cat-grad: linear-gradient(150deg,#3a3358 0%,#241f3c 55%,#13111f 100%); --cat-glow:#9d8cf0; --cat-ink:#ece8fb; }
.dc-cat-atlas_search   { --cat-grad: linear-gradient(150deg,#0f4a40 0%,#0a2d28 55%,#071714 100%); --cat-glow:#3ddc84; --cat-ink:#d7f6e7; }
.dc-cat-time_series    { --cat-grad: linear-gradient(150deg,#1c3a5e 0%,#12233b 55%,#0a1320 100%); --cat-glow:#5ea0e0; --cat-ink:#dbeafe; }
.dc-cat-change_streams { --cat-grad: linear-gradient(150deg,#5a3320 0%,#341d12 55%,#1c0f09 100%); --cat-glow:#e0915a; --cat-ink:#f6e6d7; }
.dc-cat-ai_agents      { --cat-grad: linear-gradient(150deg,#542342 0%,#321529 55%,#1c0c17 100%); --cat-glow:#e07db0; --cat-ink:#f7e1ee; }
.dc-cat-availability   { --cat-grad: linear-gradient(150deg,#16482e 0%,#0d2a1c 55%,#071710 100%); --cat-glow:#4cd68a; --cat-ink:#d7f6e4; }
.dc-cat-scalability    { --cat-grad: linear-gradient(150deg,#2f335e 0%,#1d1f3c 55%,#111220 100%); --cat-glow:#8c92e8; --cat-ink:#e3e5fb; }
.dc-cat-mongodb_core   { --cat-grad: linear-gradient(150deg,#0e4a34 0%,#0a2c20 55%,#071712 100%); --cat-glow:#00ed64; --cat-ink:#d7f6e4; }
.dc-cat-security       { --cat-grad: linear-gradient(150deg,#323a42 0%,#1e242a 55%,#0e1316 100%); --cat-glow:#8fa0ad; --cat-ink:#e2e8ec; }
.dc-cat-performance    { --cat-grad: linear-gradient(150deg,#574121 0%,#332713 55%,#1b150a 100%); --cat-glow:#e0b45a; --cat-ink:#f6edd7; }
.dc-cat-other          { --cat-grad: linear-gradient(150deg,#363c40 0%,#202528 55%,#0e1214 100%); --cat-glow:#9aa6aa; --cat-ink:#e5eaeb; }

/* ── Header ─────────────────────────────────────────────────────────── */

.dc-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 60px 40px 38px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  isolation: isolate;
  overflow: hidden;
}
/* Atmosphere: an aurora glow + a faint dot-grid that fades downward,
   so the title sits in a lit "showroom marquee" rather than on flat black. */
.dc-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(680px 280px at 50% -40px, rgba(0, 237, 100, 0.12), transparent 70%),
    radial-gradient(420px 220px at 16% 0%, rgba(0, 104, 74, 0.10), transparent 72%),
    radial-gradient(420px 220px at 84% 4%, rgba(94, 232, 155, 0.07), transparent 72%);
  pointer-events: none;
}
.dc-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(560px 220px at 50% 18%, #000 0%, transparent 78%);
          mask: radial-gradient(560px 220px at 50% 18%, #000 0%, transparent 78%);
  opacity: 0.55;
  pointer-events: none;
}
.dc-header-titleblock { flex: none; max-width: 100%; }
.dc-header-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.dc-header-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--green-bright) 0%, var(--accent) 48%, var(--leaf) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
/* Huge, centered search bar. */
.dc-header-search {
  flex-shrink: 0;
  width: clamp(320px, 64%, 720px);
  position: relative;
}
.dc-header-search::before {
  content: '';
  position: absolute;
  left: 24px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: currentColor;
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.dc-header-search:focus-within::before { color: var(--accent); }
.dc-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  padding: 17px 26px 17px 56px;
  font-size: 16px;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.dc-search-input::placeholder { color: var(--muted); }
.dc-search-input:hover {
  border-color: var(--border);
  background: var(--surface-hover);
}
.dc-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow:
    var(--glow-accent),
    0 0 50px -10px rgba(0, 237, 100, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── Body / scroll container ────────────────────────────────────────── */

.dc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 0 52px;
}
.dc-rows { display: flex; flex-direction: column; gap: 40px; }
.dc-loading, .dc-empty, .dc-error {
  text-align: center;
  padding: 84px 32px;
  color: var(--text-secondary);
  font-size: 14px;
  font-family: var(--font-sans);
}
/* Loading: subtle pulsing shimmer so the wait reads as intentional. */
.dc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.dc-loading::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: dc-spin 0.8s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-error {
  color: var(--danger);
}
.dc-empty {
  font-size: 15px;
  color: var(--text-secondary);
}
.dc-empty a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: border-color var(--dur) var(--ease); }
.dc-empty a:hover { border-bottom-color: var(--accent); }

/* Honor visibility control: these are toggled via .hidden. */
.dc-loading.hidden, .dc-empty.hidden, .dc-error.hidden, .dc-search-hint.hidden { display: none; }

/* ── Row (one per category) ────────────────────────────────────────── */

.dc-row {
  padding: 0 40px;
  position: relative;
}
.dc-row-title {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  font-family: var(--font-display);
}
.dc-row-accent {
  width: 3px;
  height: 22px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--cat-glow, var(--accent)), color-mix(in srgb, var(--cat-glow, var(--accent)) 25%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--cat-glow, var(--accent)) 55%, transparent);
}
.dc-row-count {
  margin-left: 2px;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 2px 9px;
  border-radius: var(--r-full);
}

/* Track wrapper provides relative positioning for the edge-arrows. */
.dc-track-wrap {
  position: relative;
}
.dc-track-wrap::before,
.dc-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 14px;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.dc-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.dc-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.dc-track-wrap[data-can-l="1"]::before { opacity: 1; }
.dc-track-wrap[data-can-r="1"]::after  { opacity: 1; }

.dc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.dc-track::-webkit-scrollbar { display: none; }

/* Edge arrows — fade in only when the track has overflow. */
.dc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dc-arrow:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}
.dc-arrow:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--glow-accent);
}
.dc-arrow-l { left: 8px; }
.dc-arrow-r { right: 8px; }
.dc-track-wrap:hover .dc-arrow,
.dc-track-wrap:focus-within .dc-arrow { opacity: 1; }
.dc-track-wrap[data-can-l="0"] .dc-arrow-l,
.dc-track-wrap[data-can-r="0"] .dc-arrow-r { opacity: 0 !important; pointer-events: none; }

/* ── Card ──────────────────────────────────────────────────────────── */

.dc-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur) var(--ease);
  /* (no will-change: transform — it established a permanent containing
     block on every card; the hover transform animates fine without it.) */
}
.dc-card:hover {
  transform: translateY(-6px) scale(1.035);
  z-index: 4;
}
.dc-card:focus-visible {
  outline: none;
}
.dc-card:focus-visible .dc-card-poster {
  box-shadow: 0 0 0 2px var(--cat-glow, var(--accent)), var(--shadow-lg);
}

.dc-card-poster {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cat-grad, linear-gradient(150deg,#1e2528,#0e1214));
  isolation: isolate;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px var(--border-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow var(--dur) var(--ease);
}
.dc-card:hover .dc-card-poster {
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--cat-glow, var(--accent)) 45%, transparent),
    0 0 36px color-mix(in srgb, var(--cat-glow, var(--accent)) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Subtle film-grain noise overlay so gradients don't look flat. */
.dc-card-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
}
/* Top-sheen + bottom-fade so the title chip area reads even on bright art. */
.dc-card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 18%),
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

.dc-card-illu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.dc-card-illu svg {
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  transition: transform var(--dur-slow) var(--ease);
}
.dc-card:hover .dc-card-illu svg { transform: scale(1.06); }

.dc-card-cat-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cat-ink, #fff);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dc-card-studio {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
}

.dc-card-time-pill {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* "Unpacked" source badge — bottom-left of the poster on tiles that
   come from MongoDB Unpacked (vs deployed demos). A distinct accent
   tint to read as a separate source. Never coexists with the search
   provenance chip (which is demo-only), so they share the slot. */
.dc-card-source-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #fff 20%);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dc-card-unpacked:hover .dc-card-poster {
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.dc-card-info {
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dc-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}
.dc-card-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-card-meta-acct {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-card-meta-dot { opacity: 0.45; }
.dc-card-meta-author {
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dc-hero-meta-author {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dc-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.dc-card-chip {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Detail view (slide-in panel) ────────────────────────────────────
   The panel + scrim live as siblings of .dc-body inside
   .main-view-catalogue. They are position: absolute so they overlay
   the catalogue grid without unmounting it — clicking back simply
   slides the panel out to the right and the grid is already there. */

.dc-detail-scrim {
  position: absolute;
  inset: 0;
  z-index: 19;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.dc-detail-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dc-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1100px, 92%);
  z-index: 20;
  background:
    radial-gradient(900px 480px at 100% -5%, rgba(0, 237, 100, 0.05), transparent 60%),
    var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl), -1px 0 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  /* Visibility flips with a delayed transition so the panel disappears
     for assistive tech only AFTER the slide-out finishes. */
  transition:
    transform 0.42s var(--ease-out),
    visibility 0s linear 0.42s;
}
.dc-detail.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.42s var(--ease-out),
    visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .dc-detail, .dc-detail-scrim { transition-duration: 0.01ms !important; }
}

/* Sticky close strip — always visible at the top of the panel even
   while the user is scrolling through the preview. */
.dc-detail-close-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 70%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dc-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  font-family: var(--font-sans);
  cursor: pointer;
}
.dc-detail-back:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateX(-2px);
}

.dc-detail-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dc-detail-close:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--accent);
}

/* Hero — re-uses the same poster art, full-bleed at the top of the
   panel (right under the sticky close bar). */
.dc-hero {
  position: relative;
  min-height: 248px;
  padding: 28px 40px 30px;
  background: var(--cat-grad, linear-gradient(150deg,#1e2528,#0e1214));
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
}
.dc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}
.dc-hero-art {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.58;
  pointer-events: none;
  z-index: 0;
}
.dc-hero-art svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}
.dc-hero::after {
  /* Fade the right-side art into the hero so the text on the left stays
     legible regardless of category color. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 45%, transparent 75%),
    linear-gradient(180deg, transparent 64%, rgba(0, 0, 0, 0.48) 100%);
  pointer-events: none;
  z-index: 1;
}
.dc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-ink, #fff);
  opacity: 0.92;
  font-family: var(--font-mono);
}
.dc-hero-eyebrow .dc-hero-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cat-glow, var(--accent));
  box-shadow: 0 0 10px var(--cat-glow, var(--accent));
}
.dc-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.dc-hero-meta {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dc-hero-meta .dc-hero-meta-dot { opacity: 0.55; }
.dc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dc-hero-chip {
  padding: 3px 11px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cat-ink, #fff);
  font-size: 11px;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dc-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.dc-action-primary,
.dc-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dc-action-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  box-shadow: var(--glow-accent);
}
.dc-action-primary:hover {
  transform: translateY(-1px);
  background: var(--green-bright);
  border-color: var(--green-bright);
}
.dc-action-secondary {
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dc-action-secondary:hover {
  background: rgba(0, 0, 0, 0.66);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}

/* Brief callout under the hero. */
.dc-detail-body {
  padding: 26px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dc-detail-brief {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%),
    var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cat-glow, var(--accent));
  border-radius: var(--r-md);
  padding: 20px 24px;
  line-height: 1.62;
  font-size: 13.5px;
  color: var(--text);
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.dc-detail-brief > *:first-child { margin-top: 0; }
.dc-detail-brief > *:last-child { margin-bottom: 0; }
.dc-detail-brief p {
  margin: 0;
  color: var(--text-secondary);
}
.dc-detail-brief p strong,
.dc-detail-brief li strong {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Section subhead — small caps, category colour, tracking. */
.dc-brief-h {
  margin: 4px 0 -2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-glow, var(--accent));
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-brief-h::before {
  content: '';
  width: 14px;
  height: 1.5px;
  background: var(--cat-glow, var(--accent));
  border-radius: var(--r-full);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Category-coloured bullet list. */
.dc-brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dc-brief-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
}
.dc-brief-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat-glow, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--cat-glow, var(--accent)) 50%, transparent);
}

/* ── Browser-chrome iframe wrapper ─────────────────────────────────── */

.dc-preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.dc-preview-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: linear-gradient(180deg, var(--surface-hover), var(--surface));
  border-bottom: 1px solid var(--border);
}
.dc-preview-traffic {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.dc-tl-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.dc-tl-r { background: #ff5f57; }
.dc-tl-y { background: #febc2e; }
.dc-tl-g { background: #28c840; }
.dc-preview-url {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  padding: 6px 14px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dc-preview-url-lock {
  color: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
}
.dc-preview-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.dc-preview-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dc-preview-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border);
}
.dc-preview-iframe-wrap {
  position: relative;
  width: 100%;
  height: 72vh;
  background: var(--bg);
}
.dc-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  /* Dark canvas during load instead of a white flash; the demo paints over it. */
  background: var(--bg);
  display: block;
}
.dc-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 13.5px;
  font-family: var(--font-sans);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(0, 237, 100, 0.04), transparent 70%),
    var(--bg-elevated);
}

@media (max-width: 720px) {
  .dc-header { padding: 22px 18px 14px; flex-direction: column; align-items: stretch; }
  .dc-header-search { width: 100%; }
  .dc-row { padding: 0 18px; }
  .dc-track { grid-auto-columns: 240px; }
  .dc-hero { padding: 56px 22px 22px; min-height: 240px; }
  .dc-hero-art { width: 320px; height: 240px; opacity: 0.42; right: -60px; }
  .dc-detail-body { padding: 18px 18px 30px; }
  .dc-preview-iframe-wrap { height: 60vh; }
}

/* ── Semantic search results ─────────────────────────────────────── */

.dc-row-semantic .dc-row-title { color: var(--accent); }

/* Similarity-percentage chip painted onto the card's poster, used
   only in the semantic-results row. Position mirrors the time-pill
   but on the left so they don't collide. */
.dc-card-score-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #fff 18%);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Search hint (under the input) ──────────────────────────────── */

.dc-search-hint {
  /* Absolutely positioned below the input so it never grows the
     search wrapper (which would shift the centered search icon).
     Centered to match the big centered search bar. */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
  font-family: var(--font-sans);
}

/* ── Hybrid search results (single ranked row) ─────────────────── */

.dc-row-hybrid .dc-row-title { color: var(--accent); }
.dc-row-hybrid .dc-row-title::before {
  content: '\2728';
  margin-right: 6px;
  font-size: 14px;
}
.dc-row-empty {
  margin: 8px 4px 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
}

/* Provenance chip — tiny pill at the bottom-left of the poster,
   telling the SE which retrieval pipeline matched. Two-pipeline
   matches ("Keyword + Closest") wear the strongest visual weight
   because they are the highest-confidence rank-fused hits — the
   text index and the semantic reranker both agreed this card is
   relevant. The poster grid has top-left (.dc-card-cat-tag),
   top-right (.dc-card-studio), and bottom-right
   (.dc-card-time-pill) occupied; bottom-left is the open
   quadrant. */
.dc-card-prov-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.58);
  color: rgba(255, 255, 255, 0.86);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Keyword-only: calm neutral — lowest visual weight. */
.dc-card-prov-keyword {
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border-color: var(--border);
  color: var(--text-secondary);
}
/* Semantic-only: soft accent tint — a hint of green. */
.dc-card-prov-ai {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}
/* Both pipelines agreed: full accent — highest confidence. */
.dc-card-prov-both {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── "Forked from X" annotation on the detail-view hero ────────── */

.dc-hero-forked {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  width: fit-content;
}
.dc-hero-forked-icon {
  color: var(--cat-glow, var(--accent));
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}
.dc-hero-forked-source { color: #fff; }
.dc-hero-forked-link {
  color: var(--cat-glow, var(--accent));
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.dc-hero-forked-link:hover { border-bottom-color: var(--cat-glow, var(--accent)); }

/* ════════════════════════════════════════════════════════════════════
   BOLD layer — cinematic showroom.
   Signature motif: every poster is a "title card" you can press play on.
   On hover the art dims, a luminous play-disc rises in, and a thin
   category-tinted progress bar fills along the poster's bottom edge —
   the surface reads like a premium content platform mid-browse.
   ════════════════════════════════════════════════════════════════════ */

/* The play-disc + the "ready" progress bar live on the poster's ::after?
   No — ::after is already the sheen. We add a dedicated overlay via the
   .dc-card-illu wrapper's parent. Use a layered pseudo on .dc-card-poster
   won't free up a slot, so paint the play-disc with a radial + masked
   triangle behind the existing children using a new stacking element:
   .dc-card-poster gets a focal vignette on hover; the disc is drawn with
   box-shadow + clip-path on a generated layer keyed off .dc-card-illu. */
.dc-card-illu::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72) 60%, transparent 72%);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 30px color-mix(in srgb, var(--cat-glow, var(--accent)) 60%, transparent);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.dc-card-illu::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  /* play triangle, optically centred inside the disc */
  transform: translate(-44%, -50%) scale(0.6);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #0a0c0d;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.dc-card:hover .dc-card-illu::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.dc-card:hover .dc-card-illu::after {
  opacity: 1;
  transform: translate(-44%, -50%) scale(1);
}
/* The play-disc needs to spill slightly past the illustration box; the
   poster itself still clips, so the disc stays inside the rounded frame. */
.dc-card-poster .dc-card-illu { overflow: visible; }
/* On hover, deepen the poster's bottom scrim so the disc + title read. */
.dc-card:hover .dc-card-poster::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 18%),
    radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.42) 100%);
}

/* Card title — give it more presence and a hover brighten. */
.dc-card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: color var(--dur-fast) var(--ease);
}
.dc-card:hover .dc-card-title { color: var(--green-bright); }
.dc-card-chip {
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dc-card:hover .dc-card-chip {
  border-color: color-mix(in srgb, var(--cat-glow, var(--accent)) 35%, var(--border));
}

/* Staggered entrance for the rows — they rise + fade as the showroom
   loads, one beat after the next. */
@keyframes dc-row-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.dc-row {
  animation: dc-row-in 0.5s var(--ease-out) both;
}
.dc-row:nth-child(1) { animation-delay: 0.02s; }
.dc-row:nth-child(2) { animation-delay: 0.10s; }
.dc-row:nth-child(3) { animation-delay: 0.18s; }
.dc-row:nth-child(4) { animation-delay: 0.26s; }
.dc-row:nth-child(5) { animation-delay: 0.34s; }
.dc-row:nth-child(n+6) { animation-delay: 0.40s; }

/* Row title: a subtle baseline rail under the heading for structure. */
.dc-row-title { position: relative; }

/* Hybrid / semantic search header: a soft accent wash so a search result
   set visually separates from the curated rows. */
.dc-row-hybrid,
.dc-row-semantic {
  padding-top: 14px;
  padding-bottom: 6px;
  border-radius: var(--r-lg);
  margin: 0 22px;
  background:
    radial-gradient(700px 200px at 12% 0%, rgba(0, 237, 100, 0.06), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 60%);
}
.dc-row-hybrid .dc-row-title,
.dc-row-semantic .dc-row-title {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Loading / empty / error — lift them off plain text into refined cards. */
.dc-loading, .dc-empty, .dc-error {
  margin: 32px auto;
  max-width: 460px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background:
    radial-gradient(400px 160px at 50% 0%, rgba(0, 237, 100, 0.05), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg-elevated));
  box-shadow: var(--shadow-md);
  padding: 56px 32px;
}
.dc-error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background:
    radial-gradient(400px 160px at 50% 0%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg-elevated));
}

/* Primary CTA: a brighter ramp + lift so the green button truly pops. */
.dc-action-primary {
  background: linear-gradient(180deg, var(--green-bright), var(--accent));
}
.dc-action-primary:hover {
  box-shadow:
    var(--glow-accent),
    0 8px 28px -6px rgba(0, 237, 100, 0.5);
}

/* Drawer hero title: a touch more cinematic weight + a faint glow lift. */
.dc-hero-title {
  font-weight: 800;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--cat-glow, var(--accent)) 18%, transparent);
}
.dc-hero-eyebrow { opacity: 1; }
/* Seam where the hero meets the body — a hairline accent rule for depth. */
.dc-hero {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--cat-glow, var(--accent)) 22%, transparent);
}

/* Reduced-motion: kill the entrance + play-disc transitions. */
@media (prefers-reduced-motion: reduce) {
  .dc-row { animation: none; }
  .dc-card-illu::before,
  .dc-card-illu::after { transition: none; }
}