/* ============================================================
   STYLE.CSS — raiveFlier Design System
   ============================================================

   DESIGN AESTHETIC
   ================
   Dark underground rave aesthetic inspired by warehouse parties,
   photocopied zines, and nightclub culture. The visual language
   evokes dimly-lit bunkers and neon-lit dancefloors.

   COLOR SYSTEM — "Bunker Palette"
   ================================
   - Primary surface: Near-black tones (--bunker-900 through --bunker-500)
   - Text: Warm parchment tones (--bunker-100: #d8d5cd)
   - Primary accent: Amethyst purple (#6a4a8a) — used for interactive elements
   - Secondary accent: Verdigris teal (#4a8a7a) — used for venue-related content
   - Tertiary accent: Amber gold (#b89a50) — used for promoter-related content
   - All accent text colors are WCAG AA compliant (>= 4.5:1 contrast ratio)

   TYPOGRAPHY — Three-Family System
   =================================
   - --font-display (Space Grotesk): Bold geometric sans for titles and headings
   - --font-body (Inter): Clean humanist sans for body text and UI elements
   - --font-mono (IBM Plex Mono): Monospaced for captions, badges, and technical labels
   - Type scale uses Major Third ratio (1.25x per step)

   COMPONENT ARCHITECTURE
   =======================
   Styles are organized into these major sections:
     1. Base Reset & Design Tokens (CSS custom properties)
     2. Layout (container, header, footer)
     3. Upload View (drop zone, preview, buttons)
     4. Confirm View (entity cards, genre chips)
     5. Progress View (phase pipeline, progress bar)
     6. Results View (artist/venue/promoter cards, interconnections, citations)
     7. Expandable Cards (shared accordion pattern)
     8. Text Utilities & Accessibility
     9. Film Grain Overlay (decorative)
    10. Q&A Drawer (right slide-in panel)
    11. Corpus Sidebar (left slide-in panel)
    12. Rating Widgets (thumbs up/down)
    13. Recommendations Panel (bottom-anchored)
    14. Responsive Breakpoints & Print Styles

   NAMING CONVENTION
   =================
   BEM-like: .block__element--modifier (e.g., .drop-zone__content, .phase-step--active)
   ============================================================ */

/* ---- Base Reset ---- */
/* Universal box-sizing + margin/padding reset for predictable layouts */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  color-scheme: dark;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-accent-text);
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ---- Design Tokens ----
   All visual properties are defined as CSS custom properties on :root.
   This makes the entire design system themeable — change a token value here
   and it propagates everywhere. Organized into: palette, semantics, typography,
   spacing, motion, and layout categories. */
:root {
  /* Bunker Palette (Primary Dark System) — Numbered from darkest (900) to lightest (100) */
  --bunker-900: #0a0a0c;
  --bunker-800: #14141a;
  --bunker-700: #1e1e24;
  --bunker-600: #2a2a30;
  --bunker-500: #3a3a40;
  --bunker-400: #6a6a70;
  --bunker-300: #9a9a9e;
  --bunker-100: #d8d5cd;

  /* Semantic Colors */
  --color-bg: #0a0a0c;
  --color-surface: #14141a;
  --color-surface-raised: #1e1e24;
  --color-border: #2a2a30;
  --color-border-subtle: #1e1e24;

  --color-text-primary: #d8d5cd;
  --color-text-secondary: #9a9a9e;
  --color-text-muted: #6a6a70;

  /* Verdigris (venue/secondary accent) */
  --color-verdigris: #4a8a7a;
  --color-verdigris-text: #6ab0a0;
  --color-verdigris-muted: rgba(74, 138, 122, 0.15);

  /* Amber (promoter/tertiary accent) */
  --color-amber: #b89a50;
  --color-amber-text: #d0b468;
  --color-amber-muted: rgba(184, 154, 80, 0.15);

  /* Amethyst Accent */
  --color-accent: #6a4a8a;
  --color-accent-hover: #8a6aaa;
  --color-accent-text: #a080c0;   /* WCAG AA safe on --color-bg (~5.5:1) */
  --color-accent-muted: #2a1e3a;
  --color-accent-glow: rgba(106, 74, 138, 0.25);

  /* Semantic — interactive */
  --color-interactive: var(--color-accent);
  --color-focus-ring: var(--color-accent-hover);
  --color-link: var(--color-accent-text);

  /* Status */
  --color-success: #3a7a60;
  --color-success-text: #5aaa80;  /* WCAG AA safe on --color-bg (~5.3:1) */
  --color-error: #8a4050;
  --color-error-text: #c87080;    /* WCAG AA safe on --color-bg (~5.2:1) */
  --color-warning: #9a7a4a;
  --color-warning-text: #c0a060;  /* WCAG AA safe on --color-bg (~5.5:1) */
  --color-info: #7a9cc4;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Type Scale — Major Third (1.25)
     Each step is 1.25x the previous: 0.64 -> 0.8 -> 1 -> 1.25 -> 1.563 -> ... */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  /* Motion — Custom easing curves for natural-feeling transitions.
     ease-out is used for most UI transitions (elements settling into place).
     Durations are tiered: fast (150ms) for micro-interactions, normal (300ms)
     for view transitions, slow (600ms) for dramatic reveals. */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* Layout */
  --max-content-width: 1000px;
  --content-padding: clamp(1.25rem, 4vw, 3rem);
}


/* ---- Body ---- */
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ---- Layout ---- */
.container {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}


/* ---- Header ---- */
.site-header {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.site-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.site-subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Analysis count badge — small mono label shown when a flier has been
   analyzed more than once. Sits below the subtitle in the header. */
.analysis-count-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  opacity: 0.7;
}


/* ---- Main ---- */
#app {
  flex: 1;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}


/* ---- Views ----
   The SPA view switching pattern: all views are <section class="view"> inside <main>.
   App.showView() sets the hidden attribute on all views except the active one.
   The .view[hidden] rule ensures hidden views are display:none (the HTML hidden
   attribute alone only suggests hiding — this CSS enforces it). Each visible
   view fades in via the fadeIn keyframe animation. */
.view {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.view[hidden] {
  display: none;
}


/* ---- Upload View ----
   Center all content so the browse button and actions don't overlap
   the fixed corpus-toggle button anchored at the bottom-left. */
#upload-view {
  text-align: center;
}

/* ---- Drop Zone ----
   The main interactive area of the upload view. Supports three interaction states:
   - Default: dashed border, dark surface background
   - Hover / focus: amethyst accent border + muted background
   - Drag-over: glowing amethyst border with inset glow (set via JS class .drag-over)
   The drop zone also functions as a click target (opens file picker via JS). */
.drop-zone {
  position: relative;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  background: var(--color-surface);
  outline: none;
}

.drop-zone:hover,
.drop-zone:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.drop-zone:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.drop-zone.drag-over {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-muted);
  box-shadow: 0 0 24px var(--color-accent-glow), inset 0 0 24px var(--color-accent-glow);
}

.drop-zone__icon {
  margin: 0 auto var(--space-4);
  color: var(--color-text-muted);
  transition: color var(--duration-normal) var(--ease-out);
}

.drop-zone:hover .drop-zone__icon,
.drop-zone.drag-over .drop-zone__icon {
  color: var(--color-accent-hover);
}

.drop-zone__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

.drop-zone__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top: var(--space-2);
}


/* ---- Drop Zone Preview ---- */
.drop-zone__preview {
  position: relative;
  display: inline-block;
}

.drop-zone__preview-img {
  max-height: 280px;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  object-fit: contain;
}

.btn-clear {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.btn-clear:hover {
  background: var(--color-error);
  color: var(--color-text-primary);
}

.btn-clear:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* ---- Browse Button ---- */
.btn-browse {
  display: inline-block;
  margin-top: var(--space-4);
  cursor: pointer;
}


/* ---- Upload Actions ---- */
.upload-actions {
  margin-top: var(--space-5);
  text-align: center;
}


/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.btn-secondary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}


/* ---- Upload Error ---- */
.upload-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(138, 64, 80, 0.15);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  color: #c87080;
  font-size: var(--text-sm);
  text-align: center;
}

.upload-error[hidden] {
  display: none;
}


/* ---- Duplicate Flier Notice (non-blocking) ---- */
.duplicate-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(154, 122, 74, 0.10);
  border-left: 3px solid var(--color-warning);
  border-radius: 2px;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.duplicate-notice[hidden] {
  display: none;
}

.duplicate-notice__icon {
  color: var(--color-warning-text);
  flex-shrink: 0;
}

.duplicate-notice__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}


/* ---- Loading Overlay ---- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.loading-overlay[hidden] {
  display: none;
}

.loading-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top: var(--space-5);
}


/* ---- Spinner ---- */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ---- Entity Cards (Confirm View) ----
   Editable cards for reviewing OCR-extracted entities (artists, venue, date, etc.).
   Each card contains a header (entity type label + confidence badge + optional remove
   button) and a text input for editing the entity value. Built dynamically by
   confirmation.js via _entityCardHTML(). */
.entity-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.entity-card:hover {
  border-color: var(--color-accent);
}

.entity-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.entity-card__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent-text);
}

.entity-card__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-primary);
}

.entity-card input[type="text"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.entity-card input[type="text"]:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}


/* ---- Confidence Badges ----
   Color-coded inline badges showing OCR/research confidence scores.
   Three tiers: high (green, >= 80%), medium (amber, >= 50%), low (red, < 50%).
   Used across entity cards, artist cards, and relationship items. */
.confidence-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  border: 1px solid;
}

.confidence-high {
  color: var(--color-success-text);
  border-color: var(--color-success);
  background: rgba(58, 122, 96, 0.12);
}

.confidence-medium {
  color: var(--color-warning-text);
  border-color: var(--color-warning);
  background: rgba(154, 122, 74, 0.12);
}

.confidence-low {
  color: var(--color-error-text);
  border-color: var(--color-error);
  background: rgba(138, 64, 80, 0.12);
}


/* ---- Progress Bar (Progress View) ----
   Thin horizontal bar showing pipeline completion percentage.
   The fill width is updated dynamically by websocket.js via inline style. */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-surface-raised);
  border-radius: 2px;
  overflow: hidden;
  margin: var(--space-4) 0;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width var(--duration-normal) var(--ease-out);
}


/* ---- Confirm View Layout ---- */
.confirm-header {
  margin-bottom: var(--space-5);
}

.confirm-header__info h2 {
  margin-bottom: var(--space-3);
}

.ocr-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ocr-summary__provider {
  color: var(--color-text-muted);
}

.confirm-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
}

.confirm-section {
  margin-bottom: var(--space-5);
}

.confirm-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.confirm-section__title {
  margin-bottom: var(--space-3);
}

.confirm-section__header .confirm-section__title {
  margin-bottom: 0;
}

/* Entity card actions area */
.entity-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.entity-card__remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.entity-card__remove:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-text-primary);
}

.entity-card__remove:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.entity-card__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.entity-card__input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}

/* Add button (small, inline) */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-accent-text);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.btn-add:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.btn-add:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn-add--small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

/* Genre chips */
.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.genre-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  color: var(--color-accent-text);
}

.genre-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.genre-chip__remove:hover {
  color: var(--color-error-text);
}

.genre-chip__remove:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.genre-add {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.genre-add__input {
  flex: 1;
  max-width: 200px;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}

.genre-add__input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}

.genre-add__input::placeholder {
  color: var(--color-text-muted);
}

/* Flier reference image in confirm view */
.confirm-flier-ref {
  position: sticky;
  top: var(--space-5);
}

.confirm-flier-ref__frame {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  margin-top: var(--space-3);
}

.confirm-flier-ref__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Confirm actions */
.confirm-actions {
  margin-top: var(--space-6);
  text-align: center;
}

.confirm-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(138, 64, 80, 0.15);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  color: var(--color-error-text);
  font-size: var(--text-sm);
  text-align: center;
}

.confirm-error[hidden] {
  display: none;
}


/* ---- Progress View ---- */
.phase-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: var(--space-6) 0;
  flex-wrap: wrap;
}

.phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.phase-step__number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.phase-step__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  transition: color var(--duration-normal) var(--ease-out);
}

.phase-connector {
  width: 40px;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-2);
  margin-bottom: calc(var(--space-2) + var(--text-xs) * 1.6);
  transition: background-color var(--duration-normal) var(--ease-out);
}

/* Phase states — Three visual states applied by websocket.js:
   --active: current phase (amethyst fill + glow + pulse animation)
   --completed: past phase (green fill)
   --pending: future phase (hollow, muted text) */
.phase-step--active .phase-step__number {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-primary);
  box-shadow: 0 0 16px var(--color-accent-glow);
}

.phase-step--active .phase-step__label {
  color: var(--color-accent-text);
}

.phase-step--completed .phase-step__number {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-text-primary);
}

.phase-step--completed .phase-step__label {
  color: var(--color-success-text);
}

.phase-step--pending .phase-step__number {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

.phase-connector--completed {
  background: var(--color-success);
}

.phase-connector--active {
  background: linear-gradient(90deg, var(--color-success), var(--color-accent));
}

/* Progress section */
.progress-section {
  margin: var(--space-5) 0;
}

.progress-info {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.progress-pct {
  color: var(--color-accent-text);
  font-weight: 500;
}

/* Progress status text */
.progress-status {
  text-align: center;
  margin-top: var(--space-5);
}

.progress-status__phase {
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.progress-status__message {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  min-height: 1.6em;
}

/* Progress error */
.progress-error {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: rgba(138, 64, 80, 0.15);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  color: var(--color-error-text);
  font-size: var(--text-sm);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.progress-error[hidden] {
  display: none;
}

/* Progress bar fill animation */
@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.phase-step--active .phase-step__number {
  animation: progressPulse 2s ease-in-out infinite;
}


/* ============================================================
   RESULTS VIEW
   The main output display. Contains multiple sections rendered
   by results.js: event summary, artist cards (expandable),
   venue/promoter cards, event history, date context panels,
   interconnection graph, citations, and export.
   ============================================================ */

/* ---- Results Summary (Section 1) ---- */
.results-summary {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: var(--space-6);
}

.results-summary__thumb {
  flex-shrink: 0;
  width: 100px;
}

.results-summary__thumb-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  object-fit: contain;
}

.results-summary__info {
  flex: 1;
  min-width: 0;
}

.results-summary__title {
  margin-bottom: var(--space-3);
}

.results-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.results-summary__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
}

.results-summary__tag-label {
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.results-summary__stats {
  display: flex;
  gap: var(--space-4);
}

.results-summary__stat {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
}

/* ---- Results Sections ---- */
.results-section {
  margin-bottom: var(--space-7);
}

.results-section__title {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.results-subsection__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  margin-top: var(--space-5);
}

/* ---- Results Loading & Error ---- */
.results-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
  gap: var(--space-4);
}

.results-error {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-error-text);
}

.results-error .btn-secondary {
  margin-top: var(--space-4);
}


/* ---- Expandable Cards ----
   A shared accordion/disclosure pattern used by artist cards, venue cards,
   promoter cards, and event history groups. The pattern works like this:
   1. .expandable wraps the card (outer container)
   2. .expandable__trigger is a full-width <button> that toggles open/close
   3. .expandable__content is hidden (display:none) by default
   4. When the JS adds .expandable--open to the card:
      - .expandable__content becomes display:block
      - .expandable__chevron rotates 180 degrees
   results.js attaches click handlers via _initExpandables(). */
.expandable__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary);
  gap: var(--space-3);
}

.expandable__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  border-radius: 4px;
}

.expandable__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal) var(--ease-out);
}

.expandable--open .expandable__chevron {
  transform: rotate(180deg);
}

.expandable__content {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

.expandable--open .expandable__content {
  display: block;
}


/* ---- Artist Cards (Section 2) ----
   Primary result cards, one per researched artist. Left border uses the
   amethyst accent color. Contains expandable content with profile summary,
   releases, labels, external links (Discogs, MusicBrainz, Bandcamp, Beatport),
   Q&A trigger button, and rating widget. */
.artist-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.artist-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.artist-card:hover {
  border-color: var(--color-accent-hover);
  border-left-color: var(--color-accent-hover);
}

.artist-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.artist-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-card__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.artist-card__stat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.artist-card__link {
  margin-bottom: var(--space-4);
}

.artist-card__link a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
}

.artist-card__subsection {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.artist-card__subsection-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.artist-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.artist-card__list-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
}

.artist-card__ext-link {
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  margin-left: var(--space-1);
}

.artist-card__article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.artist-card__article-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}

.artist-card__article-item.tier-gold {
  border-left-color: #c8a040;
}

.artist-card__article-item.tier-silver {
  border-left-color: #9a9aa0;
}


/* ---- Venue & Promoter Cards (Section 3) ----
   Side-by-side grid cards for venue and promoter research. Left border uses
   verdigris teal for both (venue and promoter share the secondary accent).
   Both use the expandable pattern from above. */
.venue-promoter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.venue-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-verdigris);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.venue-card:hover {
  border-color: var(--color-verdigris);
}

.venue-card__name,
.promoter-card__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}

.venue-card__section,
.promoter-card__section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.venue-card__section h4,
.promoter-card__section h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.venue-card__section p,
.promoter-card__section p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.venue-card__section ul,
.promoter-card__section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.venue-card__section li,
.promoter-card__section li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
}

.promoter-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-verdigris);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.promoter-card:hover {
  border-color: var(--color-verdigris);
}


/* ---- Date Context (Section 4) ---- */
.context-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.context-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-5);
}

.context-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.context-panel p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.context-panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.context-panel li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
}


/* ---- Narrative Prose (Section 5: Interconnections) ----
   A styled text block for the LLM-generated interconnection narrative.
   Uses wider line spacing (--leading-loose) for readability. Inline [n] citation
   references are stripped from display; citations are tracked in the citation
   log panel below the interconnections section. */
.narrative-prose {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}

.narrative-prose p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.narrative-prose p:last-child {
  margin-bottom: 0;
}

/* Inline citation superscripts  [n] */
.cite-ref {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--color-accent);
  opacity: 0.85;
  vertical-align: super;
  cursor: default;
  transition: opacity 0.15s;
}

.cite-ref:hover {
  opacity: 1;
}


/* ---- Citation Log (collapsible panel) ----
   A table-based panel listing all structured citations for later analysis.
   Collapsed by default; toggled via the header button. */
.citation-log {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  overflow: hidden;
}

.citation-log__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}

.citation-log__toggle:hover {
  color: var(--color-text-primary);
}

.citation-log__chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.citation-log__body {
  padding: 0 var(--space-4) var(--space-4);
  overflow-x: auto;
}

.citation-log__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.citation-log__th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.citation-log__td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  vertical-align: top;
}

.citation-log__td a {
  color: var(--color-accent);
  text-decoration: none;
}

.citation-log__td a:hover {
  text-decoration: underline;
}

.citation-log__claim {
  color: var(--color-text-secondary);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.citation-log__tier {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

.citation-log__tier--high {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent);
}

.citation-log__tier--mid {
  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
  color: var(--color-text-secondary);
}

.citation-log__tier--low {
  background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
  color: var(--color-text-secondary);
  opacity: 0.7;
}


/* ---- Relationship List ---- */
.relationship-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.relationship-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: var(--text-sm);
}

.relationship-item__edge {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
}

.relationship-item__type {
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.relationship-item__citation {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* ---- Relationship Dismiss Button ---- */
.relationship-item__dismiss {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.relationship-item__dismiss:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-text-primary);
}

.relationship-item__dismiss:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.relationship-item--dismissed {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}


/* ---- Pattern Cards ---- */
.pattern-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.pattern-card {
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: var(--space-4) var(--space-5);
}

.pattern-card__type {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--color-accent-text);
}

.pattern-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.pattern-card__entities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pattern-card__entity {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-secondary);
}


/* ---- Relationship Graph (SVG) ----
   A circular-layout SVG graph rendered by results.js renderRelationshipGraph().
   Nodes are colored by entity type (amethyst=artist, verdigris=venue, amber=promoter).
   Edges are lines between connected nodes, thickness proportional to confidence.
   Interactive: hover/focus on a node highlights its connections and dims others. */
.relationship-graph {
  margin-top: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-4);
  overflow: hidden;
}

.relationship-graph__svg {
  width: 100%;
  height: auto;
}

.graph-node {
  opacity: 0.85;
  stroke: var(--color-bg);
  stroke-width: 2;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    r var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.graph-node-group:hover .graph-node,
.graph-node-group:focus .graph-node,
.graph-node-group--highlighted .graph-node {
  opacity: 1;
  filter: drop-shadow(0 0 8px currentColor);
}

.graph-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--color-text-secondary);
  pointer-events: none;
}

.graph-edge {
  stroke: var(--color-border);
  opacity: 0.5;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    stroke var(--duration-fast) var(--ease-out);
}

.graph-edge--highlighted {
  stroke: var(--color-accent-text);
  opacity: 1;
}

.graph-edge--dimmed {
  opacity: 0.15;
}


/* ---- Citation List (Section 6) ----
   Citations grouped by tier (1-6). Higher tiers (1-2) have gold/silver left borders.
   Each citation item shows: accessibility status icon, text, source name, and link.
   Tier badges use the same pattern as confidence badges but with tier-specific colors. */
.citation-tier-group {
  margin-bottom: var(--space-5);
}

.citation-tier-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.citation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.citation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 4px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.citation-item--tier-1 {
  border-left-color: #c8a040;
}

.citation-item--tier-2 {
  border-left-color: #9a9aa0;
}

.citation-item--tier-3 {
  border-left-color: var(--bunker-400);
}

.citation-item--tier-4 {
  border-left-color: var(--bunker-400);
}

.citation-item--tier-5 {
  border-left-color: var(--bunker-400);
}

.citation-item--tier-6 {
  border-left-color: var(--bunker-400);
}

.citation-item__status {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  border-radius: 50%;
  line-height: 1;
}

.citation-item__status--ok {
  color: var(--color-success-text);
  background: rgba(58, 122, 96, 0.2);
}

.citation-item__status--fail {
  color: var(--color-error-text);
  background: rgba(138, 64, 80, 0.2);
}

.citation-item__status--unknown {
  color: var(--color-text-muted);
}

.citation-item__text {
  flex: 1;
  color: var(--color-text-primary);
}

.citation-item__source {
  flex-shrink: 0;
}

.citation-item__link {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}

/* ---- Citation Tier Badges ---- */
.citation-tier-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  border: 1px solid;
}

.citation-tier-1 {
  color: #c8a040;
  border-color: #c8a040;
  background: rgba(200, 160, 64, 0.12);
}

.citation-tier-2 {
  color: #b0b0b8;
  border-color: #9a9aa0;
  background: rgba(154, 154, 160, 0.12);
}

.citation-tier-3,
.citation-tier-4,
.citation-tier-5,
.citation-tier-6 {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: rgba(106, 106, 112, 0.08);
}


/* ---- Citation Export ---- */
.citation-export {
  margin-top: var(--space-5);
  text-align: center;
}


/* ---- Text Utilities ---- */
.text-display {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  font-weight: 700;
}

.text-heading {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 300;
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
}

.text-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ---- Visually Hidden (Accessibility) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ---- Focus States ---- */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ---- Film Grain Overlay ----
   Decorative noise texture overlaid on the entire page at very low opacity (0.04).
   Uses an inline SVG with feTurbulence filter to generate fractal noise, then
   animates its position in discrete steps to simulate film grain flicker.
   The mix-blend-mode: overlay blends it with the page content.
   Completely non-interactive (pointer-events: none) and hidden from screen readers. */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  animation: grainShift 0.5s steps(4) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5%, -5%); }
  50%  { transform: translate(5%, 0); }
  75%  { transform: translate(0, 5%); }
  100% { transform: translate(0, 0); }
}


/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  text-align: center;
}


/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ---- Reduced Motion ----
   WCAG 2.1 compliance: Respects the user's OS-level preference for reduced motion.
   All animations and transitions are effectively disabled (0.01ms duration).
   The grain overlay animation is fully removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .grain-overlay {
    animation: none;
  }
}


/* ---- Responsive ---- */
@media (max-width: 768px) {
  .confirm-layout {
    grid-template-columns: 1fr;
  }

  .confirm-flier-ref {
    position: static;
    order: -1;
  }

  .confirm-flier-ref__img {
    max-height: 200px;
    object-fit: contain;
    margin: 0 auto;
  }

  .phase-connector {
    width: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-2xl: 1.953rem;
    --text-lg:  1.25rem;
  }

  .drop-zone {
    padding: var(--space-6) var(--space-4);
  }

  .site-title {
    font-size: var(--text-xl);
  }
}

@media (max-width: 768px) {
  .results-summary {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .results-summary__meta {
    justify-content: center;
  }

  .results-summary__stats {
    justify-content: center;
  }

  .venue-promoter-grid {
    grid-template-columns: 1fr;
  }

  .context-panels {
    grid-template-columns: 1fr;
  }

  .relationship-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .citation-item {
    flex-direction: column;
  }
}

@media (max-width: 320px) {
  :root {
    --content-padding: 0.75rem;
  }

  .site-title {
    font-size: var(--text-lg);
  }
}


/* ---- Print Styles ---- */
@media print {
  body {
    background: #fff;
    color: #111;
  }

  .grain-overlay,
  .site-footer,
  #upload-view,
  #confirm-view,
  #progress-view,
  .expandable__chevron,
  .citation-export,
  .btn-clear,
  .btn-browse {
    display: none !important;
  }

  .site-header {
    border-bottom: 2px solid #111;
    padding: 0.5rem 0;
  }

  .site-title {
    color: #111;
    font-size: 1.5rem;
  }

  .site-subtitle {
    color: #666;
  }

  /* Expand all cards for print */
  .expandable__content {
    display: block !important;
  }

  .expandable__trigger {
    cursor: default;
    padding: 0.5rem 0;
  }

  /* Card styling for print */
  .artist-card,
  .venue-card,
  .promoter-card,
  .context-panel,
  .narrative-prose,
  .relationship-item,
  .citation-item,
  .pattern-card {
    background: #fff;
    border: 1px solid #ccc;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .artist-card {
    border-left: 3px solid #6a4a8a;
  }

  .venue-card,
  .promoter-card {
    border-left: 3px solid #4a8a7a;
  }

  .citation-item--tier-1 {
    border-left-color: #c8a040;
  }

  .citation-item--tier-2 {
    border-left-color: #999;
  }

  /* Text colours for print */
  .artist-card__name,
  .venue-card__name,
  .promoter-card__name,
  .results-section__title,
  .results-subsection__title,
  .narrative-prose p,
  .citation-item__text,
  .relationship-item__edge {
    color: #111;
  }

  .text-caption,
  .artist-card__stat,
  .results-summary__tag,
  .citation-item__source {
    color: #666;
  }

  a {
    color: #333;
    text-decoration: underline;
  }

  /* Graph styling for print */
  .relationship-graph {
    border: 1px solid #ccc;
    background: #fff;
  }

  .graph-edge {
    stroke: #999;
  }

  .graph-label {
    fill: #333;
  }

  .graph-node {
    stroke: #fff;
  }

  /* Results summary for print */
  .results-summary {
    background: #fff;
    border: 1px solid #ccc;
  }

  .results-summary__stat {
    color: #333;
  }

  /* Confidence badges for print */
  .confidence-badge {
    border: 1px solid #999;
    color: #333;
    background: transparent;
  }

  .citation-tier-badge {
    border: 1px solid #999;
    color: #333;
    background: transparent;
  }
}


/* ============================================================
   Q&A DRAWER
   ============================================================ */

/* ---- Q&A Drawer ---- */
.qa-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

.qa-drawer--open {
  transform: translateX(0);
}

.qa-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.qa-drawer__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qa-drawer__icon {
  color: var(--color-accent-text);
  flex-shrink: 0;
}

.qa-drawer__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.qa-drawer__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.qa-drawer__close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
}

.qa-drawer__context {
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.qa-drawer__context[hidden] {
  display: none;
}

.qa-context__badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(106, 74, 138, 0.3);
}

.qa-drawer__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qa-message {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 95%;
}

.qa-message p {
  margin-bottom: 0.5rem;
}

.qa-message p:last-child {
  margin-bottom: 0;
}

.qa-message--user {
  background: var(--color-accent-muted);
  border: 1px solid rgba(106, 74, 138, 0.25);
  color: var(--color-text-primary);
  align-self: flex-end;
}

.qa-message--assistant {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  align-self: flex-start;
}

.qa-message--loading {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  align-self: flex-start;
  padding: 1rem 1.25rem;
}

.qa-loading-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.qa-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: qa-dot-pulse 1.4s ease-in-out infinite;
}

.qa-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.qa-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes qa-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Citations inline */
.qa-citations {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.qa-citations__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}

.qa-citation {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  cursor: default;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-citation--high {
  background: rgba(52, 211, 153, 0.1);
  color: #6ab0a0;
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.qa-citation--mid {
  background: rgba(184, 154, 80, 0.1);
  color: var(--color-amber-text);
  border: 1px solid rgba(184, 154, 80, 0.2);
}

.qa-citation--low {
  background: rgba(106, 106, 112, 0.1);
  color: var(--color-text-muted);
  border: 1px solid rgba(106, 106, 112, 0.15);
}

.qa-citation__tier {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Related facts */
.qa-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

.qa-facts--initial {
  padding: 0;
}

.qa-facts__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  margin-bottom: 0.2rem;
}

.qa-fact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.qa-fact:hover {
  background: var(--color-accent-muted);
  border-color: rgba(106, 74, 138, 0.4);
  color: var(--color-text-primary);
}

.qa-fact:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

.qa-fact__category {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Input bar */
.qa-drawer__input-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--bunker-800);
  flex-shrink: 0;
}

.qa-drawer__input {
  flex: 1;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}

.qa-drawer__input::placeholder {
  color: var(--color-text-muted);
}

.qa-drawer__input:focus {
  border-color: var(--color-accent);
}

.qa-drawer__send {
  background: var(--color-accent);
  border: none;
  color: var(--color-text-primary);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.qa-drawer__send:hover {
  background: var(--color-accent-hover);
}

.qa-drawer__send:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* "Ask about this" trigger buttons (on entity cards) */
.qa-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-accent-text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qa-trigger:hover {
  background: var(--color-accent-muted);
  border-color: rgba(106, 74, 138, 0.4);
}

.qa-trigger:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

.qa-trigger__icon {
  width: 12px;
  height: 12px;
}

/* Responsive */
@media (max-width: 480px) {
  .qa-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}


/* ============================================================
   CORPUS SEARCH SIDEBAR
   Left-side panel for searching the RAG knowledge base
   ============================================================ */

/* ---- Toggle Button (fixed bottom-left) ---- */
.corpus-toggle {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  cursor: pointer;
  z-index: 800;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.corpus-toggle:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.corpus-toggle:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

.corpus-toggle--hidden {
  display: none;
}

.corpus-toggle--disabled {
  opacity: 0.5;
  cursor: default;
}

.corpus-toggle--disabled:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  transform: none;
}

/* ---- Sidebar Panel ---- */
.corpus-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 900;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
}

.corpus-sidebar--open {
  transform: translateX(0);
}

/* ---- Drag Handle (right edge for resizing) ---- */
.corpus-sidebar__drag-handle {
  position: absolute;
  top: 0;
  right: -2px;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background var(--duration-fast);
}

.corpus-sidebar__drag-handle:hover,
.corpus-sidebar__drag-handle--active {
  background: var(--color-accent);
}

/* ---- Header ---- */
.corpus-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.corpus-sidebar__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.corpus-sidebar__icon {
  color: var(--color-accent-text);
  flex-shrink: 0;
}

.corpus-sidebar__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.corpus-sidebar__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.corpus-sidebar__close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
}

/* ---- Search Bar ---- */
.corpus-sidebar__search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.corpus-sidebar__search-input {
  flex: 1;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: border-color var(--duration-fast);
}

.corpus-sidebar__search-input::placeholder {
  color: var(--color-text-muted);
}

.corpus-sidebar__search-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.corpus-sidebar__search-btn {
  background: var(--color-accent);
  border: none;
  color: var(--color-text-primary);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast);
  flex-shrink: 0;
}

.corpus-sidebar__search-btn:hover {
  background: var(--color-accent-hover);
}

.corpus-sidebar__search-btn:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* ---- Filters Row ---- */
.corpus-sidebar__filters {
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.corpus-sidebar__filters-toggle {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--duration-fast);
}

.corpus-sidebar__filters-toggle:hover {
  color: var(--color-accent-text);
}

.corpus-sidebar__filters-body {
  display: none;
  padding-top: 0.5rem;
  gap: 0.5rem;
  flex-direction: column;
}

.corpus-sidebar__filters-body--open {
  display: flex;
}

.corpus-sidebar__filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.corpus-sidebar__filter-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.corpus-sidebar__filter-select,
.corpus-sidebar__filter-input {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xs);
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}

.corpus-sidebar__filter-select:focus,
.corpus-sidebar__filter-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Multi-select dropdown — constrained height so it doesn't dominate
   the filter panel while still showing enough options to be useful. */
.corpus-sidebar__filter-select[multiple] {
  min-height: 3.5rem;
  max-height: 5rem;
}

/* Range slider (tier and similarity filters) — custom track and thumb
   styled to match the dark-themed corpus sidebar aesthetic. */
.corpus-sidebar__filter-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-surface-raised);
  border-radius: 2px;
  outline: none;
  margin-top: 0.25rem;
}

.corpus-sidebar__filter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: 2px solid var(--color-surface);
}

.corpus-sidebar__filter-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: 2px solid var(--color-surface);
}

/* Result count header — displayed above results to show total matches */
.corpus-sidebar__result-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Load More button — appears at the bottom of results when has_more=true */
.corpus-sidebar__load-more {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.corpus-sidebar__load-more:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.corpus-sidebar__load-more:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* ---- Results Container ---- */
.corpus-sidebar__results {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Stats Footer ---- */
.corpus-sidebar__stats {
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  flex-shrink: 0;
}

/* ---- Construction Notice (toggle off when search is fully operational) ---- */
.corpus-sidebar__notice {
  padding: 0.5rem 1.25rem;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  font-style: italic;
  border-left: 2px solid var(--color-accent);
  margin: 0.25rem 1rem 0.5rem;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ---- Loading Indicator ---- */
.corpus-sidebar__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--color-text-muted);
}

/* ---- Empty/Unavailable States ---- */
.corpus-sidebar__empty,
.corpus-sidebar__unavailable {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
}

.corpus-sidebar__empty-title,
.corpus-sidebar__unavailable-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.corpus-sidebar__unavailable-text,
.corpus-sidebar__empty-text {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ---- Result Card ---- */
.corpus-result {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast);
  cursor: pointer;
}

.corpus-result:hover {
  border-color: var(--color-accent);
}

.corpus-result__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.corpus-result__source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.corpus-result__source-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpus-result__tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  width: 1.4em;
  height: 1.4em;
  border-radius: 3px;
  flex-shrink: 0;
}

.corpus-result__tier--1,
.corpus-result__tier--2 {
  background: rgba(106, 74, 138, 0.3);
  color: var(--color-accent-text);
}

.corpus-result__tier--3,
.corpus-result__tier--4 {
  background: rgba(74, 138, 122, 0.2);
  color: var(--color-verdigris-text);
}

.corpus-result__tier--5,
.corpus-result__tier--6 {
  background: rgba(154, 154, 158, 0.15);
  color: var(--color-text-muted);
}

.corpus-result__author {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.corpus-result__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.corpus-result__text--expanded {
  display: block;
  -webkit-line-clamp: unset;
}

.corpus-result__score {
  width: 100%;
  height: 2px;
  background: var(--bunker-700);
  border-radius: 1px;
  margin-top: var(--space-2);
  overflow: hidden;
}

.corpus-result__score-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 1px;
  transition: width var(--duration-normal);
}

.corpus-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.corpus-result__tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: var(--tracking-wider);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.corpus-result__tag--entity {
  border-color: rgba(106, 74, 138, 0.3);
  color: var(--color-accent-text);
}

.corpus-result__tag--geo {
  border-color: rgba(74, 138, 122, 0.3);
  color: var(--color-verdigris-text);
}

.corpus-result__tag--genre {
  border-color: rgba(184, 154, 80, 0.25);
  color: var(--color-amber-text);
}

/* ---- Synthesized Answer Section ---- */
/* Cohesive NL answer generated by the LLM from retrieved passages.
   Displayed prominently at the top of the results area, above the
   raw source chunks.  Uses a subtle left border accent. */
.corpus-answer {
  padding: 0.75rem 1rem 0.5rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--color-accent, #6a4a8a);
  background: rgba(106, 74, 138, 0.04);
  border-radius: 0 4px 4px 0;
}

.corpus-answer__body {
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1.65;
  color: var(--color-text, #e0dce4);
}

.corpus-answer__body p {
  margin: 0 0 0.6rem 0;
}

.corpus-answer__body p:last-child {
  margin-bottom: 0.25rem;
}

/* Inline citation badges — clickable [N] markers in the answer text */
.corpus-answer__cite {
  display: inline;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-accent-text, #c4a6e0);
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  padding: 0 1px;
  transition: color var(--duration-fast, 150ms);
}

.corpus-answer__cite:hover {
  color: var(--color-accent, #6a4a8a);
  text-decoration: underline;
}

/* Source bibliography below the answer text */
.corpus-answer__sources {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.corpus-answer__sources-label {
  font-size: var(--text-xs, 0.6875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.04em);
  color: var(--color-text-muted, #8a8592);
  margin-bottom: 0.35rem;
}

.corpus-answer__source-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: var(--text-xs, 0.6875rem);
  color: var(--color-text-muted, #8a8592);
  padding: 0.2rem 0;
  transition: background var(--duration-fast, 150ms);
  border-radius: 2px;
}

.corpus-answer__source-item--highlight {
  background: rgba(106, 74, 138, 0.15);
}

.corpus-answer__source-num {
  font-weight: 600;
  color: var(--color-accent-text, #c4a6e0);
  flex-shrink: 0;
}

.corpus-answer__source-title {
  font-weight: 500;
  color: var(--color-text, #e0dce4);
}

.corpus-answer__source-author {
  color: var(--color-text-muted, #8a8592);
}

.corpus-answer__source-page {
  color: var(--color-text-muted, #8a8592);
  font-style: italic;
}

/* Linked citation source titles (for web sources) */
.corpus-answer__source-title--link {
  color: var(--color-accent-text, #c4a6e0);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms);
}

.corpus-answer__source-title--link:hover {
  color: var(--color-accent, #6a4a8a);
  text-decoration: underline;
}

/* ---- Tier provenance badges in citation list ---- */
/* Small label showing which search tier produced the citation:
   RA_EXCHANGE (purple), BOOK (teal), CORPUS (default), WEB (amber) */
.corpus-answer__tier-badge {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.corpus-answer__tier-badge--ra_exchange {
  background: rgba(106, 74, 138, 0.25);
  color: var(--color-accent-text, #c4a6e0);
}

.corpus-answer__tier-badge--book {
  background: rgba(74, 138, 122, 0.25);
  color: var(--color-secondary-text, #7dc4b4);
}

.corpus-answer__tier-badge--event {
  background: rgba(204, 138, 45, 0.25);
  color: var(--color-warning-text, #e0b870);
}

.corpus-answer__tier-badge--corpus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted, #8a8592);
}

.corpus-answer__tier-badge--web {
  background: rgba(184, 154, 80, 0.25);
  color: var(--color-tertiary-text, #d4b96a);
}

/* ---- Inline web citation badge ---- */
/* Web citation markers in the answer text get an amber accent */
.corpus-answer__cite--web {
  color: var(--color-tertiary-text, #d4b96a);
  text-decoration: none;
}

.corpus-answer__cite--web:hover {
  color: var(--color-tertiary, #b89a50);
  text-decoration: underline;
}

/* ---- Web Results Section ---- */
/* Compact cards for web search results (tier 4), displayed between the
   synthesized answer and the raw source passages accordion. */
.corpus-web-results {
  padding: 0.5rem 1rem 0.35rem;
  margin-bottom: 0.25rem;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.corpus-web-results__label {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--text-xs, 0.6875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.04em);
  color: var(--color-tertiary-text, #d4b96a);
  margin-bottom: 0.35rem;
}

.corpus-web-result {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.corpus-web-result:last-child {
  border-bottom: none;
}

.corpus-web-result__header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.corpus-web-result__domain {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-tertiary-text, #d4b96a);
  background: rgba(184, 154, 80, 0.15);
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
}

.corpus-web-result__title {
  display: block;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--color-accent-text, #c4a6e0);
  text-decoration: none;
  line-height: 1.3;
  transition: color var(--duration-fast, 150ms);
}

.corpus-web-result__title:hover {
  color: var(--color-accent, #6a4a8a);
  text-decoration: underline;
}

.corpus-web-result__snippet {
  font-size: var(--text-xs, 0.6875rem);
  color: var(--color-text-muted, #8a8592);
  line-height: 1.4;
  margin-top: 0.15rem;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Sources Accordion Toggle ---- */
/* Expandable/collapsible toggle between the synthesized answer and
   the raw source chunk cards.  Defaults to collapsed. */
.corpus-sources-toggle {
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.corpus-sources-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--color-text-muted, #8a8592);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.6875rem);
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color var(--duration-fast, 150ms);
}

.corpus-sources-toggle__btn:hover {
  color: var(--color-accent-text, #c4a6e0);
}

.corpus-sources-toggle__icon {
  transition: transform var(--duration-fast, 150ms);
}

.corpus-sources-toggle__icon--open {
  transform: rotate(180deg);
}

/* Collapsible chunks list */
.corpus-sources__list {
  /* No special styles when expanded — just a container */
}

.corpus-sources__list--collapsed {
  display: none;
}

/* ---- Smart Search: Result Highlighting ---- */
/* Wraps matched query terms in result text snippets with an amethyst
   tinted background so they stand out visually.  Uses <mark> tags
   inserted by _highlightText() in corpus.js. */
.corpus-result__text mark {
  background: rgba(106, 74, 138, 0.25);
  color: var(--color-accent-text);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: inherit;
}

/* ---- Smart Search: Auto-Detected Filter Badge ---- */
/* Small "auto" badge appended to filter labels when the parse-query
   endpoint detects a structured signal in the free-text query and
   auto-fills the corresponding filter control. */
.corpus-filter__auto-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  background: rgba(106, 74, 138, 0.15);
  border: 1px solid rgba(106, 74, 138, 0.35);
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1;
}

/* ---- Smart Search: Autocomplete Dropdown ---- */
/* Absolutely-positioned dropdown rendered below entity and geographic
   filter text inputs.  Combines prefix, substring, and fuzzy matches
   from the /api/v1/corpus/suggest endpoint. */
.corpus-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.corpus-autocomplete__item {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.corpus-autocomplete__item:hover,
.corpus-autocomplete__item--active {
  background: rgba(106, 74, 138, 0.2);
  color: var(--color-accent-text);
}

/* ---- Corpus Sidebar Responsive ---- */
@media (max-width: 768px) {
  .corpus-sidebar {
    width: 100vw !important;
    max-width: 100vw;
  }
  .corpus-sidebar__drag-handle {
    display: none;
  }
}

@media print {
  .corpus-sidebar,
  .corpus-toggle {
    display: none !important;
  }
}


/* ================================================================
   RATING WIDGET (Thumbs Up / Down)
   ================================================================ */

.rating-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  flex-shrink: 0;
}

.rating-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.rating-btn:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

.rating-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.rating-btn--up:hover {
  background: rgba(58, 122, 96, 0.25);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.rating-btn--down:hover {
  background: rgba(138, 64, 80, 0.25);
  border-color: var(--color-error);
  color: var(--color-error-text);
}

.rating-btn--up.rating-btn--active {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-bg);
}

.rating-btn--down.rating-btn--active {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-bg);
}

/* Context-specific placement */
.artist-card .rating-widget,
.venue-card .rating-widget,
.promoter-card .rating-widget {
  margin-top: var(--space-3);
  display: flex;
}

.relationship-item .rating-widget {
  margin-left: var(--space-2);
}

.pattern-card .rating-widget {
  margin-top: var(--space-2);
  justify-content: flex-end;
}

.qa-message--assistant .rating-widget {
  margin-top: var(--space-2);
  justify-content: flex-end;
}

.corpus-result .rating-widget {
  margin-top: var(--space-2);
  justify-content: flex-end;
}

.context-panels .rating-widget {
  margin-top: var(--space-3);
}

.event-history__header .rating-widget {
  margin-left: auto;
}

/* Inline rating widgets within release & label list items */
.artist-card__list-item--rated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.artist-card__list-item-text {
  flex: 1;
  min-width: 0;
}

.artist-card__list-item--rated .rating-widget {
  margin-top: 0;
  margin-left: var(--space-2);
}

.artist-card__list-item--rated .rating-btn {
  width: 20px;
  height: 20px;
}

.artist-card__list-item--rated .rating-btn svg {
  width: 11px;
  height: 11px;
}

/* Dimmed state for thumbs-downed releases/labels */
.artist-card__list-item--dimmed .artist-card__list-item-text {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: var(--color-error, #8a4050);
}

.artist-card__list-item--dimmed .artist-card__ext-link {
  opacity: 0.35;
  pointer-events: none;
}

@media print {
  .rating-widget {
    display: none !important;
  }
}


/* ============================================================
   RECOMMENDATIONS PANEL
   Bottom-anchored floating panel for discovering new artists.
   Collapsed: toggle bar at viewport bottom.
   Expanded: scrollable content grows upward (max 60vh).
   ============================================================ */

.reco-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  max-width: calc(100vw - 2rem);
  z-index: 850;
  display: flex;
  flex-direction: column-reverse;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.reco-panel--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Toggle Bar ---- */
.reco-panel__toggle-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
  padding: 0.625rem 1rem;
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  color: inherit;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.reco-panel__toggle-bar:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

.reco-panel__toggle-bar:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

.reco-panel__icon {
  color: var(--color-accent-text);
  flex-shrink: 0;
}

.reco-panel__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.reco-panel__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  margin-left: auto;
}

.reco-panel__chevron {
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.reco-panel--open .reco-panel__chevron {
  transform: rotate(180deg);
}

/* ---- Body ---- */
.reco-panel__body {
  max-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reco-panel--open .reco-panel__body {
  max-height: 60vh;
  overflow-y: auto;
}

/* ---- Recommendation Cards ---- */
.reco-card {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast);
}

.reco-card:hover {
  background: var(--color-surface-raised);
}

.reco-card:last-child {
  border-bottom: none;
}

.reco-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.reco-card__rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 1.5rem;
}

.reco-card__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.reco-card__connection-type {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-left: auto;
  white-space: nowrap;
}

/* Tier badge colors */
.reco-card__tier--label-mate {
  color: var(--color-verdigris-text);
  background: var(--color-verdigris-muted);
}

.reco-card__tier--shared-flier {
  color: var(--color-amber-text);
  background: var(--color-amber-muted);
}

.reco-card__tier--shared-lineup {
  color: var(--color-info);
  background: rgba(122, 156, 196, 0.15);
}

.reco-card__tier--llm {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}

.reco-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.reco-card__genre {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-verdigris-text);
  background: var(--color-verdigris-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
}

.reco-card__reason {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: 0.5rem;
}

.reco-card__connected-to {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.reco-card__connected-to strong {
  color: var(--color-accent-text);
}

.reco-card__strength {
  height: 2px;
  background: var(--color-border);
  border-radius: 1px;
  margin-top: 0.375rem;
}

.reco-card__strength-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 1px;
  transition: width 0.3s ease;
}

.reco-card__footer {
  margin-top: 0.5rem;
}

/* ---- Loading & Error ---- */
.reco-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
}

.reco-panel__loading-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.reco-panel__error {
  padding: 1.5rem;
  text-align: center;
}

.reco-panel__error-text {
  font-size: var(--text-sm);
  color: var(--color-error-text);
  margin-bottom: 0.75rem;
}

.reco-panel__retry {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  background: none;
  border: 1px solid var(--color-accent);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.reco-panel__retry:hover {
  background: var(--color-accent-muted);
}

.reco-panel__empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Deep-loading indicator — shown below quick results while the full
   pipeline (Discogs + RAG + LLM) is still running in the background. */
.reco-panel__deep-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* ---- Scrollbar (matching corpus sidebar) ---- */
.reco-panel__body::-webkit-scrollbar {
  width: 6px;
}

.reco-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.reco-panel__body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.reco-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .reco-panel {
    width: 100%;
    max-width: 100vw;
    left: 0;
    transform: none;
    border-radius: 0;
  }

  .reco-panel__toggle-bar {
    border-radius: 0;
  }

  .reco-panel--open .reco-panel__body {
    max-height: 50vh;
  }
}

/* Backfill indicator — shown while full results load in background */
.reco-panel__backfill-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #999);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.spinner--small {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

@media print {
  .reco-panel {
    display: none !important;
  }
}