/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==========================================================================
   Design Tokens - CSS Custom Properties
   Requirements: 5.1, 5.2, 5.3, 5.6, 6.1, 6.4, 10.4
   ========================================================================== */

:root {
  /* ==========================================================================
     MediaPulse Brand System - 2025 Retro Newsroom Edition
     Classic newspaper aesthetics meet modern SaaS dashboard design
     Inspired by 70s/80s newsrooms with warm, authoritative tones
     ========================================================================== */

  /* Brand Colors - Warm newsroom palette with vintage character */
  --color-brand-primary: #1a1a1a;    /* Ink black - classic print authority */
  --color-brand-accent: #c41e3a;     /* Cardinal red - vintage newspaper accent */
  --color-brand-secondary: #2c1810;  /* Dark sepia - warm depth */
  --color-brand-highlight: #8b4513;  /* Saddle brown - retro warmth */
  --color-brand-cream: #f5f0e6;      /* Aged paper cream */
  --color-brand-newsprint: #e8e4d9;  /* Newsprint off-white */

  /* Primary palette - Vintage newsroom with bold accents */
  --color-primary: #c41e3a;          /* Cardinal red - classic newspaper red */
  --color-primary-hover: #a01830;    /* Darker red for hover states */
  --color-primary-light: #fdf2f4;    /* Light rose for backgrounds */
  --color-success: #2d5a27;          /* Forest green - vintage success */
  --color-success-light: #e8f0e7;    /* Light green background */
  --color-warning: #b8860b;          /* Dark goldenrod - retro warning */
  --color-warning-light: #fdf8e8;    /* Light amber background */
  --color-error: #8b0000;            /* Dark red - classic error */
  --color-error-light: #fce8e8;      /* Light error background */
  --color-info: #1e3a5f;             /* Navy blue - trustworthy info */
  --color-info-light: #e8eef5;       /* Light blue background */

  /* Neutral scale - Warm, aged paper tones */
  --color-gray-50: #faf8f5;          /* Lightest cream */
  --color-gray-100: #f5f0e6;         /* Aged paper */
  --color-gray-200: #e8e4d9;         /* Newsprint */
  --color-gray-300: #d4cfc2;         /* Warm light gray */
  --color-gray-400: #a09a8c;         /* Muted warm gray */
  --color-gray-500: #6b6560;         /* Medium warm gray */
  --color-gray-600: #4a4640;         /* Dark warm gray */
  --color-gray-700: #363330;         /* Charcoal warm */
  --color-gray-800: #252320;         /* Near black warm */
  --color-gray-900: #1a1918;         /* Ink black */
  --color-gray-950: #0d0c0c;         /* Deep black */

  /* Semantic colors - Classic newspaper approach */
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-brand-cream);
  --color-background: var(--color-brand-cream);
  --color-surface: var(--color-brand-newsprint);
  --color-surface-elevated: #ffffff;
  --color-border: var(--color-gray-300);
  --color-border-light: var(--color-gray-200);
  --color-border-dark: var(--color-gray-400);

  /* Spacing scale (4px base) - Editorial newspaper spacing */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ==========================================================================
     Fizzy-Style Spacing System - Task 7.1 (Requirements 7.1, 7.2)
     Inline/block spacing patterns aligned with Fizzy design conventions
     ========================================================================== */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Layout dimensions - Fizzy-style responsive patterns */
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --main-width: 1400px;

  /* Typography - Classic editorial with retro newspaper feel */
  /* Headline font: Playfair Display for classic newspaper headlines */
  --font-family-headline: 'Playfair Display', 'Times New Roman', Georgia, 'Cambria', serif;
  /* Display font: DM Serif Display for impactful titles */
  --font-family-display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  /* Body font: Source Serif for readable body text */
  --font-family-body: 'Source Serif 4', 'Charter', Georgia, serif;
  /* UI font: Inter for interface elements */
  --font-family-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family: var(--font-family-body);
  --font-family-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Font sizes - Newspaper editorial scale */
  --font-size-xs: 0.75rem;     /* 12px - captions, fine print */
  --font-size-sm: 0.875rem;    /* 14px - metadata, bylines */
  --font-size-base: 1rem;      /* 16px - body text */
  --font-size-lg: 1.125rem;    /* 18px - lead paragraphs */
  --font-size-xl: 1.25rem;     /* 20px - subheadings */
  --font-size-2xl: 1.5rem;     /* 24px - section headers */
  --font-size-3xl: 2rem;       /* 32px - major headlines */
  --font-size-4xl: 2.5rem;     /* 40px - front page headlines */
  --font-size-5xl: 3.5rem;     /* 56px - banner headlines */
  --font-size-6xl: 4.5rem;     /* 72px - breaking news */

  /* ==========================================================================
     Fizzy-Style Typography Scale - Task 7.1 (Requirements 7.2)
     Text sizing pattern aligned with Fizzy design conventions
     ========================================================================== */
  --text-xx-small: 0.55rem;    /* 8.8px - tiny labels */
  --text-x-small: 0.7rem;      /* 11.2px - small captions */
  --text-small: 0.85rem;       /* 13.6px - secondary text */
  --text-medium: 1rem;         /* 16px - base text */
  --text-large: 1.15rem;       /* 18.4px - emphasis */
  --text-x-large: 1.45rem;     /* 23.2px - subheadings */
  --text-xx-large: 2.5rem;     /* 40px - headlines */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line heights - Optimized for print-style reading */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;

  /* Letter spacing - Classic newspaper tracking */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.12em;

  /* Border radius - Sharper, more editorial feel */
  --radius-none: 0;
  --radius-sm: 0.125rem;  /* 2px - subtle */
  --radius-md: 0.25rem;   /* 4px - cards */
  --radius-lg: 0.375rem;  /* 6px - buttons */
  --radius-xl: 0.5rem;    /* 8px - modals */
  --radius-2xl: 0.75rem;  /* 12px - large cards */
  --radius-full: 9999px;

  /* ==========================================================================
     Fizzy-Style Border Radius - Task 7.1 (Requirements 7.4)
     Element-specific radius values aligned with Fizzy design conventions
     ========================================================================== */
  --radius-card: 0.2em;   /* Fizzy card border-radius */
  --radius-btn: 99rem;    /* Fizzy pill-shaped buttons */
  --radius-input: 0.5em;  /* Fizzy input border-radius */
  --radius-dialog: 0.3em; /* Fizzy dialog/modal border-radius */

  /* Shadows - Subtle, print-inspired depth */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(26 25 24 / 0.04);
  --shadow-md: 0 2px 4px -1px rgb(26 25 24 / 0.06), 0 1px 2px -1px rgb(26 25 24 / 0.04);
  --shadow-lg: 0 4px 8px -2px rgb(26 25 24 / 0.08), 0 2px 4px -2px rgb(26 25 24 / 0.04);
  --shadow-xl: 0 8px 16px -4px rgb(26 25 24 / 0.1), 0 4px 8px -4px rgb(26 25 24 / 0.06);
  --shadow-2xl: 0 16px 32px -8px rgb(26 25 24 / 0.12);

  /* Card shadows with warm tint */
  --shadow-card: 0 1px 3px 0 rgb(26 25 24 / 0.05), 0 1px 2px 0 rgb(26 25 24 / 0.03);
  --shadow-card-hover: 0 4px 12px -2px rgb(26 25 24 / 0.1), 0 2px 4px -1px rgb(26 25 24 / 0.05);
  --shadow-primary: 0 4px 14px -3px rgb(196 30 58 / 0.3);
  /* Inset shadow for pressed/recessed elements */
  --shadow-inset: inset 0 2px 4px 0 rgb(26 25 24 / 0.06);

  /* ==========================================================================
     Fizzy-Style Shadows - Task 7.1 (Requirements 7.4)
     Elevated and hover shadows aligned with Fizzy visual language
     ========================================================================== */
  --shadow-elevated: 0 4px 8px -2px rgb(26 25 24 / 0.08), 0 2px 4px -2px rgb(26 25 24 / 0.04);
  --shadow-hover: 0 8px 16px -4px rgb(26 25 24 / 0.1), 0 4px 8px -4px rgb(26 25 24 / 0.06);

  /* Transitions - Smooth, professional animations */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     Fizzy-Style Easing Functions - Task 7.1 (Requirements 7.2)
     Animation easing aligned with Fizzy reactive UI patterns
     ========================================================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus ring - Accessible, warm branded */
  --focus-ring: 0 0 0 3px rgb(196 30 58 / 0.35);
  --focus-ring-offset: 0 0 0 2px var(--color-background);
  /* Fizzy-style focus ring size - Task 7.1 (Requirements 7.4) */
  --focus-ring-size: 2px;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 250;
  --z-modal: 300;
  --z-notification: 400;
  --z-tooltip: 500;

  /* Layout dimensions - Task 1.1: Sticky Footer (Requirements 1.1, 1.4) */
  --footer-height: 72px; /* Consistent footer height for spacing calculations */

  /* Decorative borders - Classic newspaper rules */
  --border-rule: 1px solid var(--color-gray-900);
  --border-rule-thick: 2px solid var(--color-gray-900);
  --border-rule-double: 4px double var(--color-gray-900);
  --border-rule-dotted: 1px dotted var(--color-gray-500);

  /* ==========================================================================
     Fizzy-Style Border - Task 7.1 (Requirements 7.4)
     Standard border pattern aligned with Fizzy visual language
     ========================================================================== */
  --border: 1px solid var(--color-border);
}

/* ==========================================================================
   Animation and Transition CSS Rules
   Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6 - Task 1.3
   ========================================================================== */

/* Button press state feedback - Requirement 10.6
   Provides immediate visual feedback with subtle scale transform */
button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
  transform: scale(0.98);
}

/* Dropdown expand/collapse animation - Requirement 10.3
   Smooth expand/collapse transitions for dropdown menus */
.dropdown-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.dropdown-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   Reduced Motion Preference
   Requirements: 10.5 - Respect prefers-reduced-motion system setting
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Layout Padding and Spacing - Main Content Area
   MediaPulse 2025 Flat Design - Clean, editorial spacing
   ========================================================================== */

/* Main content area wrapper - provides consistent responsive padding */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5); /* Mobile: 16px vertical, 20px horizontal */
  min-height: calc(100vh - 200px);
}

@media (min-width: 640px) {
  .main-content {
    padding: var(--space-5) var(--space-6); /* Small tablet: 20px/24px */
  }
}

@media (min-width: 768px) {
  .main-content {
    padding: var(--space-6) var(--space-8); /* Tablet: 24px/32px */
  }
}

@media (min-width: 1024px) {
  .main-content {
    padding: var(--space-6) var(--space-10); /* Desktop: 24px/40px */
  }
}

@media (min-width: 1280px) {
  .main-content {
    padding: var(--space-8) var(--space-12); /* Large desktop: 32px/48px */
  }
}

/* Main element - minimal padding since .main-content handles it */
/* Task 1.1: Updated padding-bottom to account for sticky footer (Requirement 1.4) */
main {
  padding-top: var(--space-4);
  padding-bottom: calc(var(--footer-height) + var(--space-6));
  background-color: var(--color-surface);
  min-height: calc(100vh - 64px);
}

/* ==========================================================================
   Typography and Heading Hierarchy
   Requirements: 4.1, 4.2, 4.3, 4.4, 4.5 - Task 1.2
   ========================================================================== */

/* Page Title - h1 for page titles with 2xl font size and --space-6 bottom margin
   Requirement 4.2 */
.page-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-6) 0;
}

/* Section Heading - h2 for sections with xl font size and consistent vertical spacing
   Requirement 4.3 */
.section-heading {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

/* First section heading after page title should not have top margin */
.page-title + .section-heading {
  margin-top: 0;
}

/* ==========================================================================
   Page Header Section - Consistent header for all pages
   ========================================================================== */

/* Page Header Section - wrapper with bottom border accent */
.page-header-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 3px solid var(--color-accent);
}

/* Page Header Title - large editorial display */
.page-header-title {
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Page Header Subtitle - secondary info */
.page-header-subtitle {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0 0;
}

/* Page Controls - actions bar below header */
.page-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Responsive: Stack controls on mobile */
@media (max-width: 640px) {
  .page-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .page-controls .btn-primary,
  .page-controls .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Base Typography and Element Styles
   Requirements: 5.3, 5.4 - Task 1.3
   ========================================================================== */

/* Global box-sizing reset for consistent sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Body element - Classic newspaper feel with warm paper background */
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Subtle paper texture feel */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.3) 0%, transparent 75%);
}

/* ==========================================================================
   Typography - Retro Newsroom Editorial Style
   Classic newspaper headlines with 70s/80s newsroom character
   ========================================================================== */

/* Headings - Classic serif newspaper headlines */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

/* H1 - Banner headline style like front page news */
h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  margin-top: 0;
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  /* Classic newspaper headline treatment */
  text-transform: none;
}

/* H2 - Section headlines */
h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

/* H3 - Subsection headlines */
h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* H4 - Minor headlines */
h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-ui);
}

/* H5, H6 - Small headlines, use UI font */
h5, h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-ui);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Paragraph styling */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Small text styling */
small {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Muted text utility class */
.text-muted {
  color: var(--color-text-muted);
}

/* Link styling - Clean, flat design approach */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Button base styling */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover {
  background-color: var(--color-surface);
  border-color: var(--color-gray-300);
}

button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Form input base styling */
input,
[type="text"],
[type="email"],
[type="password"],
[type="number"],
[type="url"],
[type="tel"],
[type="search"],
[type="date"],
[type="time"] {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus-visible,
[type="text"]:focus-visible,
[type="email"]:focus-visible,
[type="password"]:focus-visible,
[type="number"]:focus-visible,
[type="url"]:focus-visible,
[type="tel"]:focus-visible,
[type="search"]:focus-visible,
[type="date"]:focus-visible,
[type="time"]:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Textarea styling */
textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  width: 100%;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Select styling */
select {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  width: 100%;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Label styling */
label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
}

/* Breadcrumb Navigation Styles */
.breadcrumb {
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb-separator {
  margin: 0 var(--space-2);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.breadcrumb-link {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-text {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Status Badge Styles */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.status-pending {
  background-color: #e5e7eb;
  color: #4b5563;
}

.status-badge.status-collecting {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-badge.status-collected {
  background-color: #d1fae5;
  color: #047857;
}

.status-badge.status-failed {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Type Badge Styles */
.type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: #f3f4f6;
  color: #374151;
}

.type-badge.type-youtube {
  background-color: #fef3c7;
  color: #92400e;
}

.type-badge.type-substack {
  background-color: #fce7f3;
  color: #9d174d;
}

.type-badge.type-twitter {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-badge.type-linkedin {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-badge.type-web {
  background-color: #e5e7eb;
  color: #4b5563;
}

/* Loading Indicator Styles */
.loading-indicator {
  display: inline-block;
  margin-left: 0.5rem;
  color: #1e40af;
  font-size: 0.875rem;
}

.loading-indicator::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #dbeafe;
  border-top-color: #1e40af;
  border-radius: 50%;
  margin-right: 0.25rem;
  animation: spin 1s linear infinite;
}

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

/* Error Message Styles */
.error-message {
  color: #b91c1c;
  background-color: #fee2e2;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

/* Source Card Styles */
.source {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Task 9.1: Source Metadata Display Styles
   Requirements: 8.2 - Rich metadata display in source cards
   ========================================================================== */

/* Source Thumbnail Container */
.source-thumbnail {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
}

/* Source Thumbnail Image */
.source-thumbnail-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* Source Author Badge */
.source-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.source-author::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Source Publication Date */
.source-published-at {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.source-published-at::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Item Card Meta - enhanced for multiple metadata items */
.item-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   Accessibility Utilities - Task 1.4
   Requirements: 11.1, 11.2, 11.7 - Enhanced accessibility CSS utilities
   ========================================================================== */

/* Skip link for keyboard navigation - Requirement 11.1
   Allows keyboard users to bypass navigation and jump to main content */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-notification);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Enhanced focus-visible for all interactive elements - Requirement 11.2
   Provides visible focus indicator when element receives keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Screen reader only text - Requirement 11.7
   Visually hidden but accessible to screen readers for icon-only buttons */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Navigation Component Styles
   Retro Newsroom Masthead - Classic newspaper header aesthetic
   Inspired by 70s/80s newspaper mastheads and newsroom feel
   ========================================================================== */

/* Main navigation bar - newspaper masthead style */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface-elevated);
  border-bottom: var(--border-rule-thick);
  padding: 0 var(--space-4);
  /* Subtle aged paper texture */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}

/* Navigation container - flex layout for horizontal arrangement */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 80rem;
  margin: 0 auto;
  gap: var(--space-6);
  height: 72px;
}

/* Logo/brand styling - Classic newspaper masthead */
.nav-logo {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-2xl);
  color: var(--color-brand-primary);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
}

/* Masthead accent - Classic newspaper red rule */
.nav-logo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 32px;
  background-color: var(--color-primary);
  border-radius: 0;
}

/* Optional: Add "EST. 2025" style detail */
.nav-logo::after {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  position: absolute;
  bottom: -2px;
  left: calc(6px + var(--space-3));
  text-transform: uppercase;
}

.nav-logo:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Mobile menu toggle - hidden on desktop */
.nav-toggle {
  display: none;
  padding: var(--space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
}

.nav-toggle:hover {
  color: var(--color-primary);
  background: transparent;
}

/* Navigation menu - horizontal links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

/* Navigation link styling - Retro newsroom tabs */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  min-width: 44px;
  transition: all var(--transition-fast);
  position: relative;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.nav-link:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
  text-decoration: none;
}

.nav-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Active state - Classic underline accent like newspaper section tabs */
.nav-link--active {
  color: var(--color-primary);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-2);
  right: var(--space-2);
  height: 3px;
  background-color: var(--color-primary);
}

.nav-link--active:hover {
  color: var(--color-primary);
  background-color: transparent;
}

/* Navigation icon sizing */
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* User section in navigation */
.nav-user {
  position: relative;
  flex-shrink: 0;
}

.nav-user-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav-user-toggle:hover {
  background-color: var(--color-surface);
  border-color: var(--color-gray-300);
}

/* User dropdown menu */
.nav-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  min-width: 160px;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  display: none;
}

.nav-user-dropdown.is-open {
  display: block;
}

/* Dropdown items */
.nav-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-dropdown-item:hover {
  background-color: var(--color-surface);
  text-decoration: none;
}

.nav-dropdown-item:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

/* Responsive: Mobile navigation */
@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2);
    gap: var(--space-1);
    box-shadow: var(--shadow-md);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-search {
    display: none;
  }
}

/* ==========================================================================
   App Header Styles
   Task 4.1 - Requirements: 4.1, 4.7
   Replaces the old navigation bar with a minimal header containing:
   - Logo/branding on the left
   - Centered command palette trigger
   ========================================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface-elevated);
  border-bottom: var(--border-rule-thick);
  padding: 0 var(--space-4);
  /* Subtle aged paper texture - consistent with old nav style */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}

.app-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80rem;
  margin: 0 auto;
  gap: var(--space-6);
  height: 72px;
  position: relative;
}

/* Logo/brand styling - positioned on the left */
.app-header-logo {
  position: absolute;
  left: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-2xl);
  color: var(--color-brand-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Masthead accent - Classic newspaper red rule */
.app-header-logo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 32px;
  background-color: var(--color-primary);
  border-radius: 0;
}

.app-header-logo:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.app-header-logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Task 2.1: New Project button - positioned to the left of command palette trigger (Req 2.3) */
/* Task 7.2: Added visual feedback transition using --transition-fast (Req 7.3, 7.5) */
.app-header-new-project {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.app-header-new-project:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-default);
  color: var(--color-primary);
  text-decoration: none;
}

.app-header-new-project:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-header-new-project svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Center the command palette trigger */
.app-header #command-palette-container {
  display: flex;
  justify-content: center;
}

/* Enhanced command palette trigger for prominent visibility in header */
.app-header .command-palette-trigger {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  min-width: 200px;
  justify-content: center;
}

/* ==========================================================================
   User Section Styles (Tasks 2.1-2.3 user-login feature)
   Requirements: 3.1, 3.2, 3.3 (user context), 2.1-2.5 (sign out), 5.1-5.4 (accessibility)
   ========================================================================== */

/* User section container - positioned to the right of command palette */
.app-header-user {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Email display with truncation (Req 3.1, 3.3) */
.app-header-user__email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Sign out button (Req 2.1, 2.2) */
.app-header-user__signout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.app-header-user__signout:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-default);
  color: var(--color-danger, #dc3545);
}

/* Visible focus indicator (Req 5.2) */
.app-header-user__signout:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-header-user__signout svg {
  flex-shrink: 0;
  color: currentColor;
}

/* Responsive: On mobile, reduce the min-width */
@media (max-width: 640px) {
  .app-header-content {
    justify-content: space-between;
    padding: 0 var(--space-2);
  }

  .app-header-logo {
    position: static;
    font-size: var(--font-size-xl);
  }

  .app-header-logo::before {
    width: 4px;
    height: 24px;
  }

  /* Task 2.1: Hide text on mobile, show icon only */
  .app-header-new-project span {
    display: none;
  }

  .app-header-new-project {
    padding: var(--space-2);
  }

  .app-header .command-palette-trigger {
    min-width: auto;
    padding: var(--space-2) var(--space-3);
  }

  .app-header .command-palette-trigger-hint {
    display: none;
  }

  /* User section responsive - hide email on mobile (Req 4.1), ensure touch targets (Req 4.2) */
  .app-header-user {
    position: static;
    gap: var(--space-2);
  }

  .app-header-user__email {
    display: none;
  }

  /* Icon-only sign out on mobile with minimum touch target */
  .app-header-user__signout {
    padding: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .app-header-user__signout-text {
    display: none;
  }
}

/* ==========================================================================
   Global Search Input Styles
   Task 4.2 - Requirements: 3.8, 8.1
   ========================================================================== */

.nav-search {
  flex-shrink: 0;
}

.nav-search-input {
  width: 200px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.nav-search-input::placeholder {
  color: var(--color-text-muted);
}

.nav-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-background);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* ==========================================================================
   Keyboard Shortcuts Modal Styles
   Task 4.2, 5.3 - Requirements: 3.1, 3.7, 5.6, 6.2, 10.7
   ========================================================================== */

.keyboard-shortcuts-modal {
  position: fixed;
  z-index: var(--z-modal);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 90%;
  background: var(--color-background);
  /* Task 5.3: Entrance animation using keyframes for broad browser support */
  animation: modal-enter var(--transition-base) ease-out;
}

/* Task 5.3: Modal entrance animation keyframes */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.keyboard-shortcuts-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: backdrop-enter var(--transition-base) ease-out;
}

/* Task 5.3: Backdrop entrance animation keyframes */
@keyframes backdrop-enter {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.keyboard-shortcuts-modal .modal-content {
  padding: 0;
}

.keyboard-shortcuts-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.keyboard-shortcuts-modal .modal-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.keyboard-shortcuts-modal .modal-close {
  padding: var(--space-1);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.keyboard-shortcuts-modal .modal-close:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
}

.keyboard-shortcuts-modal .modal-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.keyboard-shortcuts-modal .modal-body {
  padding: var(--space-4) var(--space-6);
  max-height: 60vh;
  overflow-y: auto;
}

/* Shortcut sections */
.shortcut-section {
  margin-bottom: var(--space-6);
}

.shortcut-section:last-child {
  margin-bottom: 0;
}

.shortcut-section h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3) 0;
}

.shortcut-list {
  margin: 0;
  padding: 0;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-surface);
}

.shortcut-item:last-child {
  border-bottom: none;
}

.shortcut-item dt {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.shortcut-item dd {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Keyboard key styling */
kbd {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ==========================================================================
   Project Card Styles
   Retro Newsroom Edition - Classic newspaper article card aesthetic
   ========================================================================== */

/* Card container - Newspaper clipping style */
.project-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Classic newspaper rule on top - like a column divider */
.project-card::before {
  content: '';
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  top: 0;
  height: 3px;
  background-color: var(--color-gray-900);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* ==========================================================================
   Card interactive states - Newspaper clipping hover
   ========================================================================== */

/* Hover state - Lifted clipping effect */
.project-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-dark);
  transform: translateY(-3px) rotate(-0.5deg);
}

.project-card:hover::before {
  opacity: 1;
}

/* Focus-within state for keyboard navigation */
.project-card:focus-within {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* ==========================================================================
   Card content typography - Retro Newsroom Editorial Style
   ========================================================================== */

/* Card Header */
.card-header {
  margin: 0;
}

/* Card Title - Classic newspaper headline style */
.card-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
}

/* Card Title Link - Classic ink black */
.card-title-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Card Title Link - hover state */
.card-title-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Card Title Link - focus-visible for keyboard navigation */
.card-title-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Card Description - Readable body text like article excerpt */
.card-description {
  font-family: var(--font-family-body);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* Card Timestamp - Byline/dateline styling */
.card-timestamp {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--border-rule-dotted);
}

.card-timestamp small {
  font-family: var(--font-family-ui);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ==========================================================================
   Task 1.4: Card actions footer styles
   Requirements: 2.6, 7.1, 7.2
   ========================================================================== */

/* Card Actions Footer - action links container */
.card-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: auto; /* Push to bottom of card */
}

/* Card Action Link - individual action styling */
.card-action {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Card Action Link - hover state */
.card-action:hover {
  background-color: var(--color-surface);
  text-decoration: none;
}

/* Card Action Link - focus-visible for keyboard navigation */
.card-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Card Action Danger Variant - for delete actions */
.card-action--danger {
  color: var(--color-error);
}

.card-action--danger:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* ==========================================================================
   Task 1.5: Statistics badge styles
   Requirements: 4.1, 4.2, 4.3, 4.5
   ========================================================================== */

/* Card Stats Container - horizontal badge arrangement */
.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Stats Badge - pill-shaped compact badge */
.stats-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

/* Stats Badge Count - prominent count number */
.stats-badge-count {
  font-weight: 600;
  color: var(--color-text);
}

/* Stats Badge Label - category label in smaller text */
.stats-badge-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Stats Badge Muted Variant - for zero-count badges */
.stats-badge--muted {
  opacity: 0.6;
}

.stats-badge--muted .stats-badge-count {
  color: var(--color-text-muted);
}

/* Stats Badge Error Variant - for failed count badges (Task 4.1) */
.stats-badge--error {
  background-color: rgba(220, 38, 38, 0.1);
}

.stats-badge--error .stats-badge-count {
  color: var(--color-error);
}

.stats-badge--error .stats-badge-label {
  color: var(--color-error);
}

/* ==========================================================================
   Task 3.2: Index content wrapper (improve-ux-ui-pass-2)
   Requirements: 3.3, 3.4 - Visual alignment with navigation bar
   Note: Horizontal padding now handled by .main-content container
   ========================================================================== */

/* Index Content Container - wrapper for index views
   Padding is inherited from .main-content wrapper in layout */
.index-content {
  /* No additional padding needed - .main-content provides it */
}

/* ==========================================================================
   Task 1.6: Responsive grid layout styles
   Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 6.4
   ========================================================================== */

/* Projects Grid - responsive CSS Grid layout */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-height: 200px; /* Prevent layout shift during loading */
}

/* Medium screens (768px+) - 2 columns */
@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screens (1024px+) - 3 columns */
@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Task 1.7, 4.2: Empty state styles
   Requirements: 6.1, 6.2, 6.3, 7.1, 7.2, 7.3, 7.4, 7.5
   ========================================================================== */

/* Empty State Container - spans all grid columns, centered
   Requirement 7.1: Centered empty state message
   Requirement 7.4: Full width of the grid container
   Requirement 7.5: Muted colors and appropriate vertical padding (--space-12) */
.empty-state {
  grid-column: 1 / -1; /* Span all columns - Requirement 7.4 */
  text-align: center; /* Requirement 7.1 */
  padding: var(--space-12) var(--space-4); /* Requirement 7.5 */
}

/* Empty State Title - prominent heading for empty state
   Requirement 7.2: Descriptive text styling */
.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  margin-bottom: var(--space-2);
}

/* Empty State Message - muted explanatory text
   Requirement 7.2: Descriptive text styling for empty condition explanation */
.empty-state-message {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* Empty State Call-to-Action - prominent button-style link
   Requirement 7.3: Clear call-to-action button guiding users to create first item */
.empty-state-cta {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

/* Empty State CTA Hover - Requirement 7.3 */
.empty-state-cta:hover {
  background-color: var(--color-gray-700);
  text-decoration: none;
  color: var(--color-background);
}

/* Empty State CTA Focus - accessibility */
.empty-state-cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* ==========================================================================
   Task 4.2: Empty State with Guidance Variant
   Requirements: 7.1, 7.2, 7.3, 7.4, 7.5 - Enhanced empty state for pipeline stages
   ========================================================================== */

/* Guided Empty State Variant - for pipeline workflow empty states */
.empty-state--guided {
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 32rem;
  margin: 0 auto;
}

/* Empty State Content Container - groups title, message, and CTA */
.empty-state-content {
  margin-bottom: var(--space-4);
}

/* Empty State Workflow Hint - secondary guidance text
   Provides context about the workflow stage */
.empty-state-workflow-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.empty-state-workflow-hint .workflow-hint {
  margin: 0;
  font-style: italic;
}

/* ==========================================================================
   Task 1.1: Section Container Styles
   Requirements: 1.1, 1.2, 1.3, 1.4 - Section layout and visual hierarchy
   ========================================================================== */

/* Section Container - card-like wrapper for each section */
.section-container {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Section Header - flex layout for title and action positioning */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

/* Section Title - prominent heading style */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Section Count - item count in muted style */
.section-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ==========================================================================
   Task 1.2: Item Grid Responsive Layout Styles
   Requirements: 3.1, 3.2, 3.3, 3.4, 3.5 - Responsive grid layout
   ========================================================================== */

/* Item Grid - responsive CSS Grid layout for item cards */
.item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Medium screens (768px+) - 2 columns */
@media (min-width: 768px) {
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screens (1024px+) - 3 columns */
@media (min-width: 1024px) {
  .item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Item Card Styles - Flat Design 2.0
   Clean, elevated cards with subtle depth
   ========================================================================== */

/* Item Card - Flat design with subtle elevation */
.item-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--transition-base);
  position: relative;
}

/* Item Card - hover state with subtle lift */
.item-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border);
  transform: translateY(-2px);
}

/* Item Card - focus-within state for keyboard navigation */
.item-card:focus-within {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Item Card Title - Bold, readable headline */
.item-card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

/* Item Card Badges - flex container for status and type badges */
.item-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Item Card Actions - footer with action buttons */
.item-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Item Card Meta - metadata text styling */
.item-card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Item Card Description - truncated body text */
.item-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   Task 1.4: Button and Action Styles
   Requirements: 5.1, 5.2, 5.4, 5.5 - Button styles with touch targets
   ========================================================================== */

/* ==========================================================================
   Button Styles - Retro Newsroom Edition
   Classic, bold buttons with newspaper-inspired styling
   ========================================================================== */

/* Primary Button - Bold red CTA like a "BREAKING NEWS" banner */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-height: 44px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

/* Primary Button - hover state */
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
}

/* Primary Button - active pressed state */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inset);
}

/* Primary Button - focus-visible for keyboard navigation */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Secondary Button - Ink black outlined style */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-gray-900);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-height: 44px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Secondary Button - hover state - fills with ink */
.btn-secondary:hover {
  background-color: var(--color-gray-900);
  color: var(--color-text-inverse);
}

/* Secondary Button - focus-visible for keyboard navigation */
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* ==========================================================================
   Task 1.5: Collection Controls Container Styles
   Requirements: 9.2, 9.3, 9.5 - Bulk action container styling
   ========================================================================== */

/* Collection Controls - container for bulk action buttons */
.collection-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Task 1.6: Project Header Styles
   Requirements: 8.1, 8.2, 8.3, 8.4, 8.5 - Project header enhancement
   ========================================================================== */

/* Project Header - prominent display with editorial styling */
.project-header {
  margin-bottom: var(--space-6);
  padding: var(--space-5) 0 var(--space-6);
  border-bottom: 3px solid var(--color-accent);
  background: linear-gradient(to bottom, var(--color-surface), var(--color-surface-elevated));
}

/* Project Header Title - large, editorial display font */
.project-header-title {
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Project Header Description - muted text below title */
.project-header-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  margin-bottom: 0;
  max-width: 65ch;
  line-height: 1.6;
}

/* Project Header Actions - flex container for Edit/Delete/Back buttons */
.project-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Danger Button Variant - for Delete action button */
.btn-danger {
  color: var(--color-error);
  border-color: var(--color-error);
  background-color: var(--color-background);
}

/* Danger Button Variant - hover state */
.btn-danger:hover {
  background-color: var(--color-error);
  color: var(--color-background);
}

/* ==========================================================================
   Task 6.1: Search Container and Input Styles
   Requirements: 7.1, 7.3, 7.4, 7.5 - Search integration styling
   ========================================================================== */

/* Search Container - wrapper for proper positioning */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

/* Project Search Input - consistent with nav-search-input pattern */
.project-search-input {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.project-search-input::placeholder {
  color: var(--color-text-muted);
}

/* Requirement 7.5: Focus ring styling using --focus-ring property */
.project-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-background);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Requirement 7.4: Clear/reset link styling */
.search-clear-link {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.search-clear-link:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
  text-decoration: none;
}

.search-clear-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Requirement 7.3: Loading indicator during search operations */
.search-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

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

.search-loading::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   Task 8.1: Feed Card Styles
   Requirements: 6.1, 6.5 - Feed cards with health indicators
   ========================================================================== */

/* Feed Card - extends item-card with feed-specific styling */
.feed-card {
  position: relative;
}

/* Health Indicator - visual dot showing feed health status */
.health-indicator {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
  box-shadow: var(--shadow-sm);
}

/* Health OK - green dot for healthy feeds */
.health-indicator.health-ok {
  background-color: var(--color-success);
}

/* Health Active - blue dot for currently crawling feeds */
.health-indicator.health-active {
  background-color: var(--color-info);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Health Warning - amber dot for paused feeds */
.health-indicator.health-warning {
  background-color: var(--color-warning);
}

/* Health Error - red dot for failed feeds */
.health-indicator.health-error {
  background-color: var(--color-error);
}

/* Pulse animation for active health indicator */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Feed Card Title */
.feed-card-title {
  padding-right: var(--space-6); /* Space for health indicator */
}

/* Feed Card Metadata */
.feed-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.feed-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Feed Type Badge Variants */
.type-badge.type-rss {
  background-color: #fff7ed;
  color: #c2410c;
}

.type-badge.type-hackernews {
  background-color: #fef3c7;
  color: #92400e;
}

.type-badge.type-google_news {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-badge.type-blog {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.type-badge.type-newsletter {
  background-color: #fce7f3;
  color: #9d174d;
}

.type-badge.type-reddit {
  background-color: #fee2e2;
  color: #dc2626;
}

.type-badge.type-custom {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Crawl Status Badge Variants */
.status-badge.status-idle {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-badge.status-scheduled {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-badge.status-crawling {
  background-color: #cffafe;
  color: #0891b2;
}

.status-badge.status-error {
  background-color: #fee2e2;
  color: #dc2626;
}

.status-badge.status-paused {
  background-color: #fef3c7;
  color: #d97706;
}

/* ==========================================================================
   Task 8.2, 8.3: Form and View Additional Styles
   Requirements: 1.1, 1.2, 1.3, 1.6, 6.3, 6.5
   ========================================================================== */

/* Form Group - consistent form field spacing */
.form-group {
  margin-bottom: var(--space-4);
}

/* Form Help Text */
.form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Form Actions - button container */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Warning Message - for paused feeds */
.warning-message {
  background-color: #fef3c7;
  color: #92400e;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-warning);
  margin: var(--space-4) 0;
}

/* Success Message */
.success-message {
  background-color: #d1fae5;
  color: #047857;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-success);
  margin-bottom: var(--space-4);
}

/* Source Filters Container */
.source-filters {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Task 9.2: Health Dashboard Metrics Grid
   Requirements: 7.6 - System health metrics display
   ========================================================================== */

/* Health Metrics Grid - responsive layout for metric cards */
.health-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Medium screens (768px+) - 3 columns */
@media (min-width: 768px) {
  .health-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens (1024px+) - 5 columns */
@media (min-width: 1024px) {
  .health-metrics-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Health Metric Card */
.health-metric-card {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

/* Health Metric Value - large prominent number */
.health-metric-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

/* Health Metric Label */
.health-metric-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

/* Health Metric Description */
.health-metric-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Health Metric Card - Success variant */
.health-metric-success {
  border-color: var(--color-success);
  background-color: rgba(5, 150, 105, 0.05);
}

.health-metric-success .health-metric-value {
  color: var(--color-success);
}

/* Health Metric Card - Warning variant */
.health-metric-warning {
  border-color: var(--color-warning);
  background-color: rgba(217, 119, 6, 0.05);
}

.health-metric-warning .health-metric-value {
  color: var(--color-warning);
}

/* ==========================================================================
   Task 6.1: Pipeline Navigation Component Styles
   Requirements: 8.2, 8.6 - Workflow Navigation and UX
   ========================================================================== */

/* Pipeline Navigation Container */
.pipeline-nav {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Pipeline Stages Container - horizontal flex layout */
.pipeline-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Individual Pipeline Stage */
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 2px solid transparent;
  min-width: 100px;
  text-align: center;
  transition: all var(--transition-fast);
}

.pipeline-stage:hover {
  color: var(--color-text);
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  text-decoration: none;
}

.pipeline-stage:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Active Pipeline Stage */
.pipeline-stage--active {
  color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.1);
  border-color: var(--color-primary);
}

.pipeline-stage--active:hover {
  color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.15);
  border-color: var(--color-primary);
}

/* Stage Name */
.pipeline-stage-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Stage Count */
.pipeline-stage-count {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1;
}

/* Connector between stages */
.pipeline-connector {
  display: flex;
  align-items: center;
  color: var(--color-gray-300);
  flex-shrink: 0;
}

.pipeline-connector::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-gray-300);
}

/* Responsive: Stack stages vertically on mobile */
@media (max-width: 767px) {
  .pipeline-stages {
    flex-direction: column;
    gap: var(--space-3);
  }

  .pipeline-stage {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-3);
  }

  .pipeline-connector {
    transform: rotate(90deg);
  }

  .pipeline-connector::before {
    width: 16px;
  }
}

/* ==========================================================================
   Task 6.3: Pipeline Status Indicator Styles
   Requirements: 8.5, 8.6 - Non-blocking progress indicators
   ========================================================================== */

/* Pipeline Stage Status - small status text below count */
.pipeline-stage-status {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Status Indicator Base */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

/* Animated Status Indicator - for in-progress states */
.status-indicator--animated {
  background-color: rgba(8, 145, 178, 0.1);
  color: var(--color-info);
}

.status-indicator--animated::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-info);
  animation: pulse-indicator 1.5s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* Success Status Indicator */
.status-indicator--success {
  background-color: rgba(5, 150, 105, 0.1);
  color: var(--color-success);
}

.status-indicator--success::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
}

/* Error Status Indicator */
.status-indicator--error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-error);
}

.status-indicator--error::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-error);
}

/* Warning Status Indicator */
.status-indicator--warning {
  background-color: rgba(217, 119, 6, 0.1);
  color: var(--color-warning);
}

.status-indicator--warning::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-warning);
}

/* Stage-specific status styling */
.pipeline-stage-status.status-idle {
  color: var(--color-text-muted);
}

.pipeline-stage-status.status-crawling,
.pipeline-stage-status.status-collecting,
.pipeline-stage-status.status-generating,
.pipeline-stage-status.status-publishing {
  color: var(--color-info);
}

.pipeline-stage-status.status-error,
.pipeline-stage-status.status-failed {
  color: var(--color-error);
}

.pipeline-stage-status.status-paused {
  color: var(--color-warning);
}

.pipeline-stage-status.status-collected,
.pipeline-stage-status.status-ready,
.pipeline-stage-status.status-published {
  color: var(--color-success);
}

/* External Link Indicator for Published Content */
.pipeline-external-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
}

.pipeline-external-link::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Task 8.2: Pipeline Status Panel Styles
   Requirements: 9.1, 9.2, 9.3, 9.4 - Pipeline status dashboard display
   ========================================================================== */

/* ==========================================================================
   Pipeline Timeline - Horizontal Progress Display
   Task 8.2: Compact timeline showing content pipeline stages
   ========================================================================== */

/* Main Timeline Container */
.pipeline-timeline {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

/* Horizontal Track Container */
.pipeline-timeline__track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

/* Individual Stage */
.pipeline-timeline__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Timeline Node (the circle) */
.pipeline-timeline__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-gray-200);
  border: 3px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}

/* Completed stage node */
.pipeline-timeline__stage.is-complete .pipeline-timeline__node {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

/* Active stage node */
.pipeline-timeline__stage.is-active .pipeline-timeline__node {
  background-color: var(--color-info);
  border-color: var(--color-info);
}

/* Error stage node */
.pipeline-timeline__stage.stage-status--error .pipeline-timeline__node {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

/* Checkmark icon for completed stages */
.pipeline-timeline__check {
  width: 14px;
  height: 14px;
  color: white;
}

/* Error icon */
.pipeline-timeline__error-icon {
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* Pulse animation for active stages */
.pipeline-timeline__pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-info);
  animation: pipeline-pulse 1.5s ease-in-out infinite;
}

@keyframes pipeline-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

/* Connector line between nodes */
.pipeline-timeline__connector {
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 3px;
  background-color: var(--color-gray-200);
  z-index: 1;
}

.pipeline-timeline__connector.is-complete {
  background-color: var(--color-success);
}

/* Stage Info Section (below node) */
.pipeline-timeline__info {
  margin-top: var(--space-2);
  text-align: center;
  width: 100%;
  padding: 0 var(--space-1);
}

/* Stage Label */
.pipeline-timeline__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--space-1);
}

.pipeline-timeline__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* Activity indicator text */
.pipeline-timeline__activity {
  font-size: 10px;
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Metrics display */
.pipeline-timeline__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: 2px;
}

.pipeline-timeline__metric {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pipeline-timeline__metric strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.pipeline-timeline__metric--error {
  color: var(--color-error);
}

.pipeline-timeline__metric--error strong {
  color: var(--color-error);
}

.pipeline-timeline__metric--success {
  color: var(--color-success);
}

.pipeline-timeline__metric--success strong {
  color: var(--color-success);
}

/* Clickable metric link */
a.pipeline-timeline__metric {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

a.pipeline-timeline__metric:hover {
  text-decoration-style: solid;
}

/* Timestamp */
.pipeline-timeline__timestamp {
  font-size: 9px;
  color: var(--color-text-muted);
}

.pipeline-timeline__never {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Error Alert Banner */
.pipeline-timeline__alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(220, 38, 38, 0.1);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--font-size-xs);
}

.pipeline-timeline__alert-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pipeline-timeline__alert-link {
  margin-left: auto;
  color: var(--color-error);
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
}

.pipeline-timeline__alert-link:hover {
  color: var(--color-error-hover);
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 640px) {
  .pipeline-timeline {
    padding: var(--space-3);
  }

  .pipeline-timeline__track {
    flex-direction: column;
    gap: var(--space-3);
  }

  .pipeline-timeline__stage {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .pipeline-timeline__node {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .pipeline-timeline__connector {
    display: none;
  }

  .pipeline-timeline__info {
    margin-top: 0;
    text-align: left;
    flex: 1;
  }

  .pipeline-timeline__label {
    flex-direction: row;
    gap: var(--space-2);
    justify-content: flex-start;
  }

  .pipeline-timeline__metrics {
    justify-content: flex-start;
  }

  .pipeline-timeline__timestamp {
    text-align: left;
  }
}

/* ==========================================================================
   Footer Styles - Retro Newsroom Edition
   Classic newspaper footer with editorial character
   ========================================================================== */

/* Footer base styles - Newspaper footer treatment */
.footer {
  border-top: var(--border-rule-thick);
  padding: var(--space-4) var(--space-4);
  background-color: var(--color-surface-elevated);
  margin-top: var(--space-12);
}

/* Task 1.1: Sticky Footer Modifier (Requirements 1.1, 1.2, 1.3, 1.4)
   Fixed position footer that remains visible at viewport bottom during scroll */
.footer--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  margin-top: 0; /* Override base margin when sticky */
  height: var(--footer-height);
  display: flex;
  align-items: center;
}

/* Footer container - Centered with max-width */
.footer-container {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

/* Responsive: Horizontal layout on tablet+ (768px) */
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Footer branding - Classic masthead echo */
.footer-branding {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Masthead accent in footer */
.footer-branding::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--color-primary);
}

/* Footer links container */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Responsive: Horizontal links on tablet+ (768px) */
@media (min-width: 768px) {
  .footer-links {
    flex-direction: row;
    gap: var(--space-6);
  }
}

/* Footer link styling - Editorial style */
.footer-link {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-fast);
}

/* Footer link hover state */
.footer-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer link focus state for accessibility */
.footer-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Footer copyright - Fine print styling */
.footer-copyright {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   MediaPulse 2025 - Retro Newsroom Micro-interactions
   Classic newspaper feel with modern SaaS dashboard polish
   ========================================================================== */

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Selection styling - newspaper red highlight */
::selection {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Page Title Styles - Classic Newspaper Banner Headlines
   ========================================================================== */

.page-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -0.02em;
  /* Classic newspaper headline treatment */
  padding-bottom: var(--space-4);
  border-bottom: var(--border-rule-thick);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--font-size-5xl);
  }
}

/* Section Heading - Classic column header style */
.section-heading {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
  /* Newspaper section divider */
  padding-top: var(--space-4);
  border-top: var(--border-rule);
}

/* First section heading after page title should not have top margin or border */
.page-title + .section-heading {
  margin-top: var(--space-6);
  border-top: none;
  padding-top: 0;
}

/* ==========================================================================
   Retro Newsroom Visual Elements
   ========================================================================== */

/* Breaking News / Alert Banner Style */
.alert-banner {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-align: center;
  border-bottom: var(--border-rule-thick);
}

/* Ticker tape / marquee style info bar */
.info-ticker {
  background-color: var(--color-gray-900);
  color: var(--color-brand-cream);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  overflow: hidden;
}

/* Column rule - Vertical divider between content columns */
.column-rule {
  border-left: var(--border-rule);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
}

/* Pull quote - Highlighted quote from article */
.pull-quote {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  line-height: var(--line-height-snug);
}

/* Byline - Author and date styling */
.byline {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.byline-author {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Dateline - Location and date */
.dateline {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ==========================================================================
   Empty State - Retro Newsroom Edition
   ========================================================================== */

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background-color: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  /* Subtle aged paper texture */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.5) 0%, transparent 60%);
}

.empty-state-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

.empty-state-message {
  font-family: var(--font-family-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.empty-state-cta:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--color-text-inverse);
}

/* ==========================================================================
   SaaS Dashboard Patterns - Priority-Based Information Display
   Contextual data presentation and modular layouts
   ========================================================================== */

/* Metric Card - Key performance indicator display */
.metric-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-card-value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  line-height: 1;
}

.metric-card-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.metric-card-trend {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.metric-card-trend--up {
  color: var(--color-success);
}

.metric-card-trend--down {
  color: var(--color-error);
}

/* Dashboard Grid - Responsive metric layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Priority Badge - Highlights important items */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}

/* Activity Timeline - Recent actions list */
.activity-timeline {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-rule-dotted);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  margin-top: var(--space-2);
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

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

/* ==========================================================================
   Badge Enhancements - Flat Design 2.0
   Clean, readable status indicators
   ========================================================================== */

.status-badge,
.type-badge {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Stats Badge - Refined styling */
.stats-badge {
  font-family: var(--font-family-display);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-light);
}

.stats-badge-count {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.stats-badge-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Stats Badge Link Variant - clickable badge */
.stats-badge--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stats-badge--link:hover {
  background-color: var(--color-surface-hover, #f0f0f0);
  border-color: var(--color-primary);
}

.stats-badge--link:hover .stats-badge-count {
  color: var(--color-primary);
}

.stats-badge--link:hover .stats-badge-label {
  color: var(--color-primary);
}

/* ==========================================================================
   Section Container Enhancement - Flat Design 2.0
   ========================================================================== */

.section-container {
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-card);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}

.section-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Form Enhancement - Flat Design 2.0
   Clean, accessible form controls
   ========================================================================== */

.form-group {
  margin-bottom: var(--space-5);
}

label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  color: var(--color-text);
  width: 100%;
  transition: all var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

.form-help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Pipeline Navigation Enhancement - Flat Design 2.0
   ========================================================================== */

.pipeline-nav {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 2px solid transparent;
  min-width: 120px;
  text-align: center;
  transition: all var(--transition-fast);
}

.pipeline-stage:hover {
  color: var(--color-text);
  background-color: var(--color-background);
  border-color: var(--color-border);
  text-decoration: none;
  transform: translateY(-2px);
}

.pipeline-stage--active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.pipeline-stage--active:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.pipeline-stage-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pipeline-stage-count {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

/* ==========================================================================
   Loading States - Smooth, professional animations
   ========================================================================== */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Utility Classes - Flat Design 2.0
   ========================================================================== */

/* Text utilities */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

/* Font weight utilities */
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Card accent variants */
.card-accent-primary::before { background-color: var(--color-primary); opacity: 1; }
.card-accent-success::before { background-color: var(--color-success); opacity: 1; }
.card-accent-warning::before { background-color: var(--color-warning); opacity: 1; }
.card-accent-error::before { background-color: var(--color-error); opacity: 1; }
.card-accent-info::before { background-color: var(--color-info); opacity: 1; }

/* ==========================================================================
   Project Dashboard View - Compact Cards for Global Overview
   Optimized for scanning many items quickly
   ========================================================================== */

/* Project Header - Compact, newspaper masthead style */
.project-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-rule-thick);
}

.project-header-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--line-height-tight);
}

.project-header-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
  max-width: 60ch;
}

.project-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Section Container - Newspaper column style */
.section-container {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Section Header - Compact with inline count */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-rule);
}

/* Section Title - Bold, newspaper style */
.section-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

/* Section Count - Inline badge style */
.section-count {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Compact Item Grid - Denser layout for dashboard overview
   ========================================================================== */

/* Item Grid - More columns, tighter spacing */
.item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Small screens (480px+) - 2 columns */
@media (min-width: 480px) {
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium screens (768px+) - 3 columns */
@media (min-width: 768px) {
  .item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens (1024px+) - 4 columns */
@media (min-width: 1024px) {
  .item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra large screens (1280px+) - 5 columns */
@media (min-width: 1280px) {
  .item-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ==========================================================================
   Compact Item Card - Minimal footprint for scanning
   ========================================================================== */

/* Item Card - Compact newspaper clipping style */
.item-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: all var(--transition-fast);
  position: relative;
  min-height: auto;
}

/* Compact card hover */
.item-card:hover {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

/* Item Card Title - Compact, 2-line max */
.item-card-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-snug);
  color: var(--color-text);
  /* Allow 2 lines then truncate */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.item-card-title a {
  color: inherit;
  text-decoration: none;
}

.item-card-title a:hover {
  color: var(--color-primary);
}

/* Item Card Badges - Compact inline badges */
.item-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
}

/* Compact badge styling */
.type-badge,
.status-badge {
  font-family: var(--font-family-ui);
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
}

/* Type badges - Source types */
.type-badge {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.type-web { background-color: #dbeafe; color: #1e40af; }
.type-youtube { background-color: #fee2e2; color: #991b1b; }
.type-pdf { background-color: #fef3c7; color: #92400e; }
.type-rss { background-color: #ffedd5; color: #9a3412; }
.type-feed { background-color: #e0e7ff; color: #3730a3; }

/* Status badges */
.status-badge {
  border: 1px solid transparent;
}

.status-pending {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
}

.status-collecting {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border-color: var(--color-info);
}

.status-collected {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-failed {
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-color: var(--color-error);
}

.status-draft {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
}

.status-published {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}

/* ==========================================================================
   Task 4.3: Idea Visual State Styles
   Requirements: 5.3, 5.4 - Visual distinction for new vs viewed ideas
   ========================================================================== */

/* New (unviewed) ideas - prominent appearance to stand out */
.item-card.idea--new {
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-primary-light);
}

.item-card.idea--new::before {
  content: "New";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-family-ui);
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.item-card.idea--new .item-card-title {
  font-weight: var(--font-weight-extrabold);
}

/* Viewed ideas - reduced prominence, subtle treatment */
.item-card.idea--viewed {
  border-left: 3px solid transparent;
  opacity: 0.85;
}

.item-card.idea--viewed:hover {
  opacity: 1;
}

/* ==========================================================================
   Task 7.3: Idea Freshness Visual Treatments
   Requirements: 8.2, 8.3 - Visual treatment based on idea age

   Freshness States:
   - Fresh (< 24h): Prominent appearance with success indicator
   - Aging (24h - 7d): Subtle visual treatment indicating age
   - Stale (> 7d): More prominent treatment indicating staleness
   ========================================================================== */

/* Fresh ideas (< 24 hours old) - prominent, vibrant appearance */
.item-card.idea--fresh {
  border-left: 3px solid var(--color-success);
  background-color: var(--color-success-light);
  position: relative;
}

.item-card.idea--fresh::after {
  content: "Fresh";
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-family-ui);
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

.item-card.idea--fresh .item-card-title {
  color: var(--color-text);
}

.item-card.idea--fresh .idea-timestamp {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

/* Aging ideas (24h - 7d old) - subtle visual treatment indicating age */
.item-card.idea--aging {
  border-left: 3px solid var(--color-warning);
  background-color: var(--color-warning-light);
  opacity: 0.9;
}

.item-card.idea--aging .item-card-title {
  color: var(--color-text-secondary);
}

.item-card.idea--aging .idea-timestamp {
  color: var(--color-warning);
  font-style: italic;
}

.item-card.idea--aging:hover {
  opacity: 1;
}

/* Stale ideas (> 7 days old) - prominent treatment indicating staleness */
.item-card.idea--stale {
  border-left: 3px solid var(--color-gray-400);
  background-color: var(--color-gray-100);
  opacity: 0.75;
  position: relative;
}

.item-card.idea--stale::after {
  content: "Stale";
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-family-ui);
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-gray-400);
  color: var(--color-text-inverse);
}

.item-card.idea--stale .item-card-title {
  color: var(--color-text-muted);
}

.item-card.idea--stale .idea-timestamp {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

.item-card.idea--stale:hover {
  opacity: 0.9;
}

/* Freshness + Visual State Combinations */
/* When both freshness and visual state classes are applied, freshness takes precedence for border */
.item-card.idea--fresh.idea--new {
  border-left-color: var(--color-success);
}

.item-card.idea--fresh.idea--viewed {
  border-left-color: var(--color-success);
  opacity: 0.95;
}

.item-card.idea--aging.idea--new {
  border-left-color: var(--color-warning);
}

.item-card.idea--stale.idea--new {
  border-left-color: var(--color-gray-400);
}

/* Item Card Description - Hidden in compact view */
.item-card-description {
  display: none;
}

/* Item Card Meta - Compact metadata */
.item-card-meta {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Item Card Actions - Compact action links */
.item-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: var(--border-rule-dotted);
  margin-top: auto;
}

/* Card Action Links - Compact */
.card-action {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.card-action:hover {
  background-color: var(--color-primary-light);
  text-decoration: none;
}

.card-action--danger {
  color: var(--color-error);
}

.card-action--danger:hover {
  background-color: var(--color-error-light);
}

/* ==========================================================================
   Task 7.1: Vote Controls Styles
   Requirements: 7.1, 7.6 - Upvote/downvote controls for idea lifecycle
   ========================================================================== */

.vote-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.vote-controls--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.vote-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-2);
}

.vote-status--persisted,
.persisted-badge,
.vote-indicator {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
}

.vote-status--archived,
.archived-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-gray-400);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.vote-btn:hover {
  border-color: var(--color-border-dark);
  background-color: var(--color-surface);
}

.vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vote-btn--upvote:hover:not(:disabled) {
  border-color: var(--color-success);
  color: var(--color-success);
  background-color: var(--color-success-light);
}

.vote-btn--downvote:hover:not(:disabled) {
  border-color: var(--color-error);
  color: var(--color-error);
  background-color: var(--color-error-light);
}

.vote-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.vote-label {
  display: none;
}

@media (min-width: 640px) {
  .vote-label {
    display: inline;
  }
}

/* ==========================================================================
   Task 7.2: Idea Status Badges Styles
   Requirements: 1.5, 3.4, 6.4, 7.6 - Status and freshness indicators
   ========================================================================== */

.idea-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.idea-status-badges:empty {
  display: none;
}

.workflow-status--promoted,
.promoted-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-info);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
}

.selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
}

.archival-countdown,
.days-until-archival {
  color: var(--color-warning);
  font-style: italic;
}

.idea--archived {
  opacity: 0.6;
  border-left-color: var(--color-gray-400);
}

.idea--archived .item-card-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Task 7.3: Archive Filter Toggle Styles
   Requirements: 2.4 - Filter toggle for showing archived ideas
   ========================================================================== */

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-elevated);
  transition: all var(--transition-fast);
}

.filter-toggle:hover {
  border-color: var(--color-border-dark);
  background-color: var(--color-surface);
}

.filter-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.filter-toggle-label {
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Task 7.4: Project Metrics Panel Styles
   Requirements: 6.1, 6.2, 6.4 - Idea statistics display
   ========================================================================== */

.metrics-panel,
.project-metrics {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.metrics-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-4);
}

.metric-item,
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.metric-value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.metric-label,
.metrics-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.metric-total {
  color: var(--color-text);
}

.metric-active {
  color: var(--color-success);
}

.metric-archived {
  color: var(--color-gray-500);
}

.metric-promoted {
  color: var(--color-info);
}

.metric-selected {
  color: var(--color-primary);
}

.metric-avg-sources {
  color: var(--color-warning);
}

/* ==========================================================================
   Task 7.5: Status History Panel Styles
   Requirements: 6.5 - Status transition history with timestamps
   ========================================================================== */

.status-history,
.idea-status-history,
.workflow-history {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.status-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.status-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
}

.status-entry:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: -12px;
  width: 2px;
  background-color: var(--color-border);
}

.status-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background-color: var(--color-gray-400);
  border: 2px solid var(--color-surface-elevated);
}

.status-marker--origin {
  background-color: var(--color-info);
}

.status-marker--timestamp {
  background-color: var(--color-gray-500);
}

.status-active {
  background-color: var(--color-success);
}

.status-promoted {
  background-color: var(--color-info);
}

.status-selected {
  background-color: var(--color-primary);
}

.status-archived {
  background-color: var(--color-gray-400);
}

.status-persisted {
  background-color: var(--color-success);
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-name {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.status-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.status-action {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.status-timestamp {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.status-note {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-muted);
}

.archival-warning {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--color-warning-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  text-align: center;
}

.archival-imminent {
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.archival-soon {
  color: var(--color-warning);
  font-weight: var(--font-weight-semibold);
}

.idea-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.idea-workflow-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}

.idea-workflow-status.status-active {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.idea-workflow-status.status-promoted {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.idea-workflow-status.status-selected {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.idea-workflow-status.status-archived {
  background-color: var(--color-gray-200);
  color: var(--color-gray-600);
}

/* ==========================================================================
   Source Type Groups - Compact headers
   ========================================================================== */

.source-type-group {
  margin-bottom: var(--space-4);
}

.source-type-group:last-child {
  margin-bottom: 0;
}

.source-type-group h3 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-rule-dotted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.type-collection-stats {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Source Type Icons */
.source-type-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Collection Controls - Compact toolbar */
.collection-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.collection-controls .btn-secondary {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  min-height: 32px;
}

/* Collection Progress - Inline display */
.collection-progress {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.collection-progress-bar {
  width: 100px;
  height: 6px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.collection-progress-fill {
  height: 100%;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* ==========================================================================
   Loading and Status Indicators
   ========================================================================== */

.loading-indicator {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.error-message {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-error-light);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Search Container - Compact search bar
   ========================================================================== */

.search-container {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.search-container form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.project-search-input {
  flex: 1;
  min-width: 200px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  background-color: var(--color-surface-elevated);
}

.project-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.search-clear-link {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.search-loading {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-info);
}

/* ==========================================================================
   Pipeline Navigation - Compact horizontal tabs
   ========================================================================== */

.pipeline-nav {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-muted);
  background-color: transparent;
  border: 1px solid transparent;
  min-width: 80px;
  text-align: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.pipeline-stage:hover {
  color: var(--color-text);
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border);
  text-decoration: none;
}

.pipeline-stage--active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.pipeline-stage--active:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.pipeline-stage-name {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pipeline-stage-count {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
}

/* ==========================================================================
   Empty State - Compact for dashboard
   ========================================================================== */

.section-container .empty-state {
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
}

.section-container .empty-state-message {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.section-container .empty-state-cta {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   Page Actions - Button toolbar for page-level actions
   ========================================================================== */

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* Empty state actions - Multiple buttons in empty state */
.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ==========================================================================
   Filter Select - Dropdown styling for filters
   ========================================================================== */

.filter-select {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  min-width: 150px;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Flash Messages - Alert and Notice styling
   ========================================================================== */

.flash-alert {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.flash-notice {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Notification Banner - Task 4.1 (Requirements 5.1, 5.4)
   Real-time notification banners for ideas generation and updates
   ========================================================================== */

.notification-banner {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-notification);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  max-width: 400px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Entrance animation */
.notification-banner.notification--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Exit animation */
.notification-banner.notification--dismissed {
  opacity: 0;
  transform: translateX(100%);
}

/* Info variant for idea notifications */
.notification-banner--info {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border: 1px solid var(--color-info);
}

/* Success variant */
.notification-banner--success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

/* Warning variant */
.notification-banner--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

.notification-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
}

.notification-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.notification-message {
  flex: 1;
  line-height: var(--leading-normal);
}

.notification-link {
  color: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.notification-link:hover {
  text-decoration-thickness: 2px;
}

.notification-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  border-radius: var(--radius-sm);
}

.notification-dismiss:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.05);
}

.notification-dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.notification-dismiss svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   Command Palette Styles
   Task 1.1 - Requirements: 4.1, 4.2, 4.5, 4.6
   ========================================================================== */

/* Command Palette Trigger Button */
.command-palette-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.command-palette-trigger:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-dark);
  color: var(--color-text);
}

.command-palette-trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.command-palette-trigger-hint {
  display: flex;
  align-items: center;
}

.command-palette-trigger-hint kbd {
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Task 2.2 (improve-ux-ui-pass-2): Command Palette Trigger Logo and Branding
   Requirements: 2.1 (logo in trigger), 2.2 (MediaPulse text) */
.command-palette-logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.command-palette-brand {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* Hide brand text on smaller screens to maintain minimal design */
@media (max-width: 480px) {
  .command-palette-brand {
    display: none;
  }
}

/* Command Palette Dialog */
.command-palette-dialog {
  position: fixed;
  z-index: var(--z-modal);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  background: var(--color-surface-elevated);
  animation: modal-enter var(--transition-base) ease-out;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.command-palette-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: backdrop-enter var(--transition-base) ease-out;
}

.command-palette-content {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

/* Command Palette Header with Search */
.command-palette-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.command-palette-search {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  background: var(--color-surface);
  color: var(--color-text);
}

.command-palette-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.command-palette-search::placeholder {
  color: var(--color-text-muted);
}

.command-palette-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.command-palette-close:hover {
  background: var(--color-gray-100);
  color: var(--color-text);
}

.command-palette-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Command Palette Results Area */
.command-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

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

/* ==========================================================================
   Command Palette Quick Actions
   Task 1.2 - Requirements: 5.1, 5.2
   ========================================================================== */

.command-palette-quick-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.command-palette-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.command-palette-quick-action:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-dark);
}

.command-palette-quick-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.command-palette-quick-action kbd {
  padding: var(--space-1);
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Command Palette Sections (Projects, Settings)
   Task 1.2 - Requirements: 6.1, 7.1, 7.2
   ========================================================================== */

.command-palette-section {
  border-bottom: 1px solid var(--color-border);
}

.command-palette-section:last-child {
  border-bottom: none;
}

/* Task 7.2: Added visual feedback transition for hover/focus states (Req 7.3, 7.5) */
.command-palette-section-header {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* Task 7.2: Hover state for section headers (Req 7.5) */
.command-palette-section-header:hover {
  color: var(--color-text);
  background-color: var(--color-gray-100);
}

.command-palette-section-header::-webkit-details-marker {
  display: none;
}

.command-palette-section-header::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.command-palette-section[open] .command-palette-section-header::before {
  transform: rotate(45deg);
}

.command-palette-section-content {
  padding: 0 var(--space-4) var(--space-3);
}

.command-palette-section-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.command-palette-section-item:hover {
  background: var(--color-gray-100);
}

.command-palette-section-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.command-palette-section-item svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.command-palette-user-email {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   Command Palette Keyboard Navigation Active State
   Task 2.1 - Requirements: 10.2, 10.3, 10.5, 10.6
   ========================================================================== */

/* Active/selected item styling for keyboard navigation */
.command-palette-active,
.command-palette [aria-selected="true"] {
  background: var(--color-primary-light) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.command-palette-active:hover,
.command-palette [aria-selected="true"]:hover {
  background: var(--color-primary-light) !important;
}

/* Ensure scrollable content area for keyboard navigation */
.command-palette-content {
  overflow-y: auto;
}

/* Focus styles for items within command palette during keyboard nav */
.command-palette .command-palette-section-item:focus,
.command-palette .command-palette-quick-action:focus {
  outline: none;
}

/* Native dialog element uses .command-palette class */
dialog.command-palette {
  position: fixed;
  z-index: var(--z-modal);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  background: var(--color-surface-elevated);
  animation: modal-enter var(--transition-base) ease-out;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

dialog.command-palette::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: backdrop-enter var(--transition-base) ease-out;
}

/* ==========================================================================
   Command Palette Project Status Indicators
   Task 2.3 - Requirement 6.2: Status indicators next to project names
   ========================================================================== */

.command-palette-project-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}

/* Active status: project has recent activity */
.command-palette-project-status.status-active {
  background-color: var(--color-success);
}

/* Collecting status: project is currently collecting sources */
.command-palette-project-status.status-collecting {
  background-color: var(--color-warning);
  animation: pulse 2s ease-in-out infinite;
}

/* Empty status: project has no feeds or sources */
.command-palette-project-status.status-empty {
  background-color: var(--color-gray-300);
  border: 1px dashed var(--color-gray-400);
}

/* Idle status: project has no recent activity */
.command-palette-project-status.status-idle {
  background-color: var(--color-gray-400);
}

/* Pulse animation for collecting status */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ==========================================================================
   Command Palette Footer Branding
   Task 4.1 (improve-ux-ui-pass-2) - Requirements: 4.1, 4.2
   ========================================================================== */

/* Footer section at bottom of command palette with branding */
.command-palette-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--space-2);
}

/* Footer logo - small version for subtle branding */
.command-palette-footer-logo {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Footer branding text - subtle and muted */
.command-palette-footer-text {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   Command Palette Search Results
   Task 3.3 - Requirements: 9.3, 9.5, 6.6
   ========================================================================== */

/* Search results group container */
.search-results-group {
  margin-bottom: var(--space-3);
}

.search-results-group:last-child {
  margin-bottom: 0;
}

/* Search results group header */
.search-results-group-header {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
}

/* Search results group items container */
.search-results-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Individual search result item */
.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.search-result-item:hover {
  background: var(--color-gray-100);
}

.search-result-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.search-result-item svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-result-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* No matches message */
.search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

.search-no-results svg {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.search-no-results.search-error {
  color: var(--color-danger);
}

/* Loading indicator */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

.search-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Active state for search results during keyboard navigation */
.search-result-item.command-palette-active,
.search-result-item[aria-selected="true"] {
  background: var(--color-primary-light) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ==========================================================================
   Task 8.1: Tabs Controller Styles
   Requirements: 8.3 - Tab selection switches visible panels
   Requirements: 8.4 - Visual indication of currently active tab
   ========================================================================== */

/* Tabs Container - wrapper for tab bar and panels */
.tabs-container {
  margin-bottom: var(--space-6);
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tabs Bar - horizontal row of tab buttons */
.tabs-bar {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-bar::-webkit-scrollbar {
  display: none;
}

/* Individual Tab Button */
.tabs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

/* Tab Button - hover state */
.tabs-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}

/* Tab Button - active/selected state (Requirement 8.4) */
.tabs-tab.tabs-tab-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* Tab Button - focus state for keyboard navigation */
.tabs-tab:focus {
  outline: none;
}

.tabs-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tab Count Badge */
.tabs-tab-count {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: inherit;
  opacity: 0.8;
}

/* Tab Panel - content container */
.tabs-panel {
  /* Panels are shown/hidden via hidden attribute from Stimulus controller */
}

/* Hidden panel state - using hidden attribute */
.tabs-panel[hidden] {
  display: none;
}

/* ==========================================================================
   Task 8.4: Tab Filter Styles
   Requirements: 8.6 - Filter option to narrow down items in the current tab
   ========================================================================== */

/* Filter container within tab panels */
.tab-filter-container {
  margin-bottom: var(--space-4);
}

/* Filter input styling - matches project search container pattern */
.tab-filter-input {
  width: 100%;
  max-width: 400px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tab-filter-input::placeholder {
  color: var(--color-text-muted);
}

.tab-filter-input:hover {
  border-color: var(--color-border-dark);
}

.tab-filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* Hidden filterable items */
[data-filterable][hidden] {
  display: none;
}

/* ==========================================================================
   Task 5.1: Semantic Metadata Panel Styles
   Requirements: 6.1, 6.2, 6.3 - Theme info, type badge, confidence score
   ========================================================================== */

/* Panel container */
.semantic-metadata-panel {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

/* Panel title */
.semantic-metadata-panel .panel-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

/* Theme info section */
.semantic-metadata-panel .theme-info {
  margin-bottom: var(--space-3);
}

.semantic-metadata-panel .theme-name {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.semantic-metadata-panel .theme-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: var(--space-2) 0 0 0;
}

/* Theme type badge section */
.semantic-metadata-panel .theme-type-badge {
  margin-bottom: var(--space-3);
}

.semantic-metadata-panel .theme-type-badge span {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

/* Theme type variants - each type has distinct color */
.semantic-metadata-panel .theme-type-cluster {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.semantic-metadata-panel .theme-type-tension {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.semantic-metadata-panel .theme-type-momentum {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.semantic-metadata-panel .theme-type-convergence {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Confidence score section */
.semantic-metadata-panel .confidence-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.semantic-metadata-panel .confidence-score .label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.semantic-metadata-panel .score-bar {
  flex: 1;
  max-width: 200px;
  height: 8px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.semantic-metadata-panel .score-fill {
  display: block;
  height: 100%;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.semantic-metadata-panel .score-value {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  min-width: 3em;
  text-align: right;
}

/* ==========================================================================
   Idea Show Page Styles
   Two-column layout with readable typography and clear sections
   ========================================================================== */

/* Main container */
.idea-show {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--main-padding);
}

/* Two-column layout */
.idea-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

@media (max-width: 1024px) {
  .idea-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .idea-sidebar {
    order: -1;
  }
}

/* Main content area */
.idea-main {
  min-width: 0;
}

.idea-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.idea-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3) 0;
}

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

.idea-date {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.idea-theme-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.idea-theme-badge.theme-type-cluster {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.idea-theme-badge.theme-type-tension {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.idea-theme-badge.theme-type-momentum {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.idea-theme-badge.theme-type-convergence {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Idea body - markdown content in scrollable container */
.idea-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-height: 55vh;
  overflow-y: auto;
  padding-right: var(--space-3);
  /* Subtle scroll indicator */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.idea-body::-webkit-scrollbar {
  width: 6px;
}

.idea-body::-webkit-scrollbar-track {
  background: transparent;
}

.idea-body::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: var(--radius-full);
}

.idea-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

.idea-body p {
  margin: 0 0 var(--space-2) 0;
}

.idea-body p:last-child {
  margin-bottom: 0;
}

.idea-body strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.idea-body em {
  font-style: italic;
}

/* Horizontal rule - subtle section divider */
.idea-body .markdown-hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-3) 0;
}

/* Markdown headings - tighter spacing */
.idea-body .markdown-h3 {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-2) 0;
  line-height: var(--line-height-snug);
}

.idea-body .markdown-h4 {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-1) 0;
  line-height: var(--line-height-snug);
}

/* Markdown lists - compact */
.idea-body .markdown-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.idea-body .markdown-list li {
  margin-bottom: var(--space-1);
  line-height: var(--line-height-normal);
}

.idea-body ul.markdown-list {
  list-style-type: disc;
}

.idea-body ol.markdown-list {
  list-style-type: decimal;
}

/* Inline code */
.idea-body .inline-code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background-color: var(--color-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

/* Links in body */
.idea-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-light);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}

.idea-body a:hover {
  text-decoration-color: var(--color-primary);
}

/* Action buttons */
.idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* Sidebar */
.idea-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sections below main content */
.idea-section {
  max-width: 1200px;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.section-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-description {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

.section-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* Count badge */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.1em 0.5em;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-full);
}

/* Content generation form */
.generate-content-form .form-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.generate-content-form .form-select {
  flex: 1;
  max-width: 300px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
}

.generate-content-form .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.content-card {
  padding: var(--space-4);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.content-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.content-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.content-card-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--line-height-snug);
}

.content-card-title:hover {
  color: var(--color-primary);
}

.content-preview {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: var(--space-2) 0 0 0;
}

/* Button variants */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-danger {
  background-color: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-danger:hover {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-tertiary:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-border-dark);
}

/* Empty state improvements */
.idea-section .empty-state {
  text-align: center;
  padding: var(--space-6);
}

.idea-section .empty-state-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ==========================================================================
   Source Traceability Panel Styles
   Sidebar panel for displaying source references
   ========================================================================== */

.source-traceability-panel {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.source-traceability-panel .panel-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.source-traceability-panel .source-count {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.source-traceability-panel .source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-traceability-panel .source-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.source-traceability-panel .source-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.source-traceability-panel .source-item:first-child {
  padding-top: 0;
}

.source-traceability-panel .source-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.source-traceability-panel .source-header a {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--line-height-snug);
}

.source-traceability-panel .source-header a:hover {
  color: var(--color-primary);
}

.source-traceability-panel .source-header strong {
  font-weight: var(--font-weight-medium);
}

.source-traceability-panel .citation-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.source-traceability-panel .citation-supports {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.source-traceability-panel .citation-contradicts {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.source-traceability-panel .citation-provides_data {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.source-traceability-panel .source-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.source-traceability-panel .source-url {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  word-break: break-all;
}

.source-traceability-panel .source-date {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.source-traceability-panel .source-claim {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  line-height: var(--line-height-relaxed);
}

.source-traceability-panel .empty-state {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
  margin: 0;
}

/* ==========================================================================
   Semantic Metadata Panel Improvements
   Enhanced styling for sidebar context
   ========================================================================== */

.semantic-metadata-panel {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.semantic-metadata-panel .panel-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

/* Entities summary styling */
.semantic-metadata-panel .entities-summary {
  margin-top: var(--space-3);
}

.semantic-metadata-panel .entities-summary .label {
  display: block;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.semantic-metadata-panel .entity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.semantic-metadata-panel .entity-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Semantic details expandable section */
.semantic-metadata-panel .semantic-details {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.semantic-metadata-panel .semantic-details summary {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.semantic-metadata-panel .semantic-details summary::-webkit-details-marker {
  display: none;
}

.semantic-metadata-panel .semantic-details summary::before {
  content: "▶";
  font-size: 0.7em;
  transition: transform var(--transition-fast);
}

.semantic-metadata-panel .semantic-details[open] summary::before {
  transform: rotate(90deg);
}

.semantic-metadata-panel .semantic-full {
  margin-top: var(--space-3);
}

.semantic-metadata-panel .topic-tags,
.semantic-metadata-panel .all-entities,
.semantic-metadata-panel .claims-list {
  margin-bottom: var(--space-3);
}

.semantic-metadata-panel .topic-tags .label,
.semantic-metadata-panel .all-entities .label,
.semantic-metadata-panel .claims-list .label {
  display: block;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.semantic-metadata-panel .topic-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-info-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-info);
  margin-right: var(--space-1);
  margin-bottom: var(--space-1);
}

.semantic-metadata-panel .claims-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.semantic-metadata-panel .claims-list li {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
}

.semantic-metadata-panel .claims-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Content Show Page Styles
   Two-column layout similar to idea show page
   ========================================================================== */

/* Main container */
.content-show {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--main-padding);
}

/* Two-column layout */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .content-sidebar {
    order: -1;
  }
}

/* Main content area */
.content-main {
  min-width: 0;
}

.content-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.content-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3) 0;
}

.content-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.content-date {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Content body - scrollable like idea body */
.content-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-height: 55vh;
  overflow-y: auto;
  padding-right: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.content-body::-webkit-scrollbar {
  width: 6px;
}

.content-body::-webkit-scrollbar-track {
  background: transparent;
}

.content-body::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: var(--radius-full);
}

.content-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

.content-body p {
  margin: 0 0 var(--space-2) 0;
}

.content-body p:last-child {
  margin-bottom: 0;
}

.content-body strong {
  font-weight: var(--font-weight-semibold);
}

.content-body .markdown-hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-3) 0;
}

.content-body .markdown-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.content-body .markdown-list li {
  margin-bottom: var(--space-1);
  line-height: var(--line-height-normal);
}

/* Content actions */
.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* Sidebar */
.content-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sidebar panels */
.sidebar-panel {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sidebar-panel .panel-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

/* Publishing panel */
.postiz-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.indicator-success {
  background-color: var(--color-success);
}

.indicator-warning {
  background-color: var(--color-warning);
}

.indicator-error {
  background-color: var(--color-error);
}

.postiz-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.postiz-config-link {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  margin-left: auto;
}

.postiz-config-link:hover {
  text-decoration: underline;
}

.publishing-status {
  margin-bottom: var(--space-3);
}

.publishing-actions {
  margin-top: var(--space-3);
}

.publishing-hint {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.publishing-indicator {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-1);
}

.publishing-error-hint {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin: var(--space-2) 0;
}

/* Source idea panel */
.source-idea-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.source-idea-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--line-height-snug);
}

.source-idea-title:hover {
  color: var(--color-primary);
}

.source-idea-excerpt {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

.empty-state-small {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Details panel */
.details-list {
  margin: 0;
}

.details-list dt {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.details-list dd {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

.details-list dd:last-child {
  margin-bottom: 0;
}

.external-link {
  color: var(--color-primary);
  text-decoration: none;
}

.external-link:hover {
  text-decoration: underline;
}

/* Full-width button */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* Platform badges improvements */
.platform-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.platform-linkedin {
  background-color: #e7f3ff;
  color: #0077b5;
}

.platform-twitter {
  background-color: #e8f5fd;
  color: #1da1f2;
}

.platform-facebook {
  background-color: #e7f0ff;
  color: #1877f2;
}

.platform-instagram {
  background-color: #fce7f3;
  color: #e4405f;
}

.platform-tiktok {
  background-color: #f0f0f0;
  color: #000000;
}

.platform-youtube {
  background-color: #fee2e2;
  color: #ff0000;
}

.platform-threads {
  background-color: #f3f4f6;
  color: #000000;
}

/* Status badges improvements */
.status-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.status-draft {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-review {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-published {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-not-published,
.status-not_published {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}

.status-queued {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.status-publishing {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.status-failed {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* ==========================================================================
   Source Show Page Styles
   Two-column layout for source details and collected content
   ========================================================================== */

/* Main container */
.source-show {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--main-padding);
}

/* Two-column layout */
.source-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

@media (max-width: 1024px) {
  .source-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .source-sidebar {
    order: -1;
  }
}

/* Main content area */
.source-main {
  min-width: 0;
}

.source-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.source-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3) 0;
}

.source-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Error banner */
.error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.error-text {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* Collected content section */
.collected-content-section {
  margin-bottom: var(--space-4);
}

.collected-content-section .section-title {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

/* Scrollable collected content body */
.collected-content-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  max-height: 55vh;
  overflow-y: auto;
  padding-right: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.collected-content-body::-webkit-scrollbar {
  width: 6px;
}

.collected-content-body::-webkit-scrollbar-track {
  background: transparent;
}

.collected-content-body::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: var(--radius-full);
}

.collected-content-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

.collected-content-body p {
  margin: 0 0 var(--space-2) 0;
}

.collected-content-body p:last-child {
  margin-bottom: 0;
}

.collected-content-body .markdown-hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-3) 0;
}

.collected-content-body .markdown-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.collected-content-body .markdown-list li {
  margin-bottom: var(--space-1);
}

/* Subsection titles within collected content */
.collected-content-body .subsection-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: var(--space-4) 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}

.collected-content-body .subsection-title:first-child {
  margin-top: 0;
}

/* Video description and transcript sections */
.video-description,
.video-transcript {
  margin-bottom: var(--space-4);
}

/* Social engagement stats */
.social-engagement {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.engagement-stat {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Collected content footer */
.collected-content-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.collection-timestamp {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Empty state section */
.empty-state-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background-color: var(--color-gray-50);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state-section .empty-state-message {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

/* Loading spinner */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-3);
}

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

/* Source actions */
.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* Sidebar */
.source-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Notes section */
.notes-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.notes-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: var(--line-height-relaxed);
}

/* URL value in details */
.url-value {
  word-break: break-all;
}

/* Partial content warning */
.partial-warning {
  color: var(--color-warning);
  font-style: italic;
}

/* Related ideas list */
.related-ideas-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-idea-item {
  border-bottom: 1px solid var(--color-border-light);
}

.related-idea-item:last-child {
  border-bottom: none;
}

.related-idea-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.related-idea-link:hover {
  background-color: var(--color-gray-50);
  margin: 0 calc(var(--space-2) * -1);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  border-radius: var(--radius-sm);
}

.related-idea-link .idea-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

.related-idea-link:hover .idea-title {
  color: var(--color-primary);
}

/* Type badges */
.type-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.type-web {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.type-youtube {
  background-color: #fee2e2;
  color: #dc2626;
}

.type-twitter {
  background-color: #e8f5fd;
  color: #1da1f2;
}

.type-linkedin {
  background-color: #e7f3ff;
  color: #0077b5;
}

.type-substack {
  background-color: #fff7ed;
  color: #ea580c;
}

.type-rss {
  background-color: #fef3c7;
  color: #d97706;
}

/* Status badges for sources */
.status-pending {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-collecting {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.status-collected {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-failed {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* Loading indicator */
.loading-indicator {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-info);
  font-style: italic;
}

/* ==========================================================================
   Task 4.2: Pattern Card Styles
   Requirements: 1.2, 1.4, 5.1, 5.3, 6.1, 7.1, 7.2, 8.1
   Pattern card component with type-specific colors, icons, and styling
   ========================================================================== */

/* Pattern Type Color Variables (from design.md) */
:root {
  --color-cluster: #4A90D9;
  --color-cluster-light: #e8f2fc;
  --color-tension: #E74C3C;
  --color-tension-light: #fdeded;
  --color-momentum: #27AE60;
  --color-momentum-light: #e8f8ef;
  --color-convergence: #9B59B6;
  --color-convergence-light: #f4ebf8;
}

/* Pattern Card Base Styles */
.pattern-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pattern-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-dark);
}

.pattern-card:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Pattern Card Icon Container */
.pattern-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pattern-card-icon svg {
  width: 24px;
  height: 24px;
}

/* Pattern Card Header */
.pattern-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Pattern Card Title */
.pattern-card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Pattern Card Type Badge */
.pattern-card-type-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  width: fit-content;
}

/* Pattern Card Description */
.pattern-card-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Pattern Card Footer */
.pattern-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* Pattern Card Source Count */
.pattern-card-source-count {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Pattern Card Trend Indicator (Momentum patterns) */
.pattern-card-trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-momentum);
}

.pattern-card-trend-indicator .trend-arrow {
  display: flex;
  align-items: center;
}

.pattern-card-trend-indicator .trend-arrow svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Pattern Card Type-Specific Styles (Requirement 1.4)
   ========================================================================== */

/* Cluster Pattern Card (Requirements 5.1, 5.3) */
.pattern-card--cluster {
  border-left: 4px solid var(--color-cluster);
}

.pattern-card--cluster:hover {
  border-color: var(--color-cluster);
}

.pattern-card-icon--cluster {
  background-color: var(--color-cluster-light);
  color: var(--color-cluster);
}

.pattern-card-type-badge--cluster {
  background-color: var(--color-cluster-light);
  color: var(--color-cluster);
}

/* Tension Pattern Card (Requirement 6.1) */
.pattern-card--tension {
  border-left: 4px solid var(--color-tension);
}

.pattern-card--tension:hover {
  border-color: var(--color-tension);
}

.pattern-card-icon--tension {
  background-color: var(--color-tension-light);
  color: var(--color-tension);
}

.pattern-card-type-badge--tension {
  background-color: var(--color-tension-light);
  color: var(--color-tension);
}

/* Momentum Pattern Card (Requirements 7.1, 7.2) */
.pattern-card--momentum {
  border-left: 4px solid var(--color-momentum);
}

.pattern-card--momentum:hover {
  border-color: var(--color-momentum);
}

.pattern-card-icon--momentum {
  background-color: var(--color-momentum-light);
  color: var(--color-momentum);
}

.pattern-card-type-badge--momentum {
  background-color: var(--color-momentum-light);
  color: var(--color-momentum);
}

/* Convergence Pattern Card (Requirement 8.1) */
.pattern-card--convergence {
  border-left: 4px solid var(--color-convergence);
}

.pattern-card--convergence:hover {
  border-color: var(--color-convergence);
}

.pattern-card-icon--convergence {
  background-color: var(--color-convergence-light);
  color: var(--color-convergence);
}

.pattern-card-type-badge--convergence {
  background-color: var(--color-convergence-light);
  color: var(--color-convergence);
}

/* ==========================================================================
   Cluster Card Styles (Task 11.7)
   Requirements: 4.4 - Hierarchical cluster navigation with drill-down
   ========================================================================== */

/* Cluster Cards Grid */
.cluster-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

/* Cluster Card Base Styles */
.cluster-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cluster-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-dark);
  border-left-color: var(--color-primary);
}

/* Cluster Card Icon Container */
.cluster-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.cluster-card-icon svg {
  width: 24px;
  height: 24px;
}

/* Cluster Card Header */
.cluster-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Cluster Card Title */
.cluster-card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Cluster Card Type Badge */
.cluster-card-type-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  width: fit-content;
}

/* Cluster Card Metrics */
.cluster-card-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.cluster-card-member-count,
.cluster-card-quality {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cluster-card-member-count svg,
.cluster-card-quality svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Cluster Card Footer */
.cluster-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--space-2);
}

/* Cluster Expand Button */
.cluster-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background-color: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cluster-expand-btn:hover {
  background-color: var(--color-primary-light);
}

.cluster-expand-btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Cluster Expand Icon */
.cluster-expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.cluster-expand-icon svg {
  width: 16px;
  height: 16px;
}

.cluster-expand-icon--rotated {
  transform: rotate(180deg);
}

/* Cluster Card Children Container */
.cluster-card-children {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Cluster Children Loading State */
.cluster-children-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.loading-spinner--sm {
  width: 16px;
  height: 16px;
}

/* Cluster Children List */
.cluster-children-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Cluster Child Item */
.cluster-child-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.cluster-child-item:hover {
  border-color: var(--color-border-dark);
}

.cluster-child-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cluster-child-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.cluster-child-quality {
  font-size: var(--font-size-xs);
}

.cluster-child-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.cluster-child-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cluster-child-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.cluster-child-link:hover {
  text-decoration: underline;
}

/* Cluster Children Pagination */
.cluster-children-pagination {
  margin-top: var(--space-3);
  text-align: center;
}

/* Cluster Children Empty State */
.cluster-children-empty {
  padding: var(--space-3);
  text-align: center;
}

/* Quality Badge */
.quality-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.quality-badge--high {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.quality-badge--medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.quality-badge--low {
  background-color: var(--color-gray-100);
  color: var(--color-text-muted);
}

/* Unclustered Icon */
.pattern-section-icon--unclustered {
  background-color: var(--color-gray-200);
}

.pattern-section-icon--unclustered::before {
  content: "?";
  font-weight: bold;
}

/* Patterns Pagination */
.patterns-pagination {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .cluster-cards-grid {
    grid-template-columns: 1fr;
  }

  .cluster-card-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Patterns View Styles (Task 4.1)
   Requirements: 1.1, 2.1, 2.3, 10.1, 10.2, 11.2, 12.3
   ========================================================================== */

/* Patterns Panel Container */
.patterns-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Patterns Header */
.patterns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.patterns-header-title h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.patterns-header .project-context {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Patterns Count Display */
.patterns-count {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-elevated);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

/* Patterns Filter Controls */
.patterns-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

/* Filter Button Base */
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-border-dark);
}

.filter-btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Filter Button Active State */
.filter-btn--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.filter-btn--active:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Filter Button Type-Specific Colors (on active) */
.filter-btn--cluster.filter-btn--active {
  background-color: var(--color-cluster);
  border-color: var(--color-cluster);
}

.filter-btn--tension.filter-btn--active {
  background-color: var(--color-tension);
  border-color: var(--color-tension);
}

.filter-btn--momentum.filter-btn--active {
  background-color: var(--color-momentum);
  border-color: var(--color-momentum);
}

.filter-btn--convergence.filter-btn--active {
  background-color: var(--color-convergence);
  border-color: var(--color-convergence);
}

/* Patterns Loading State */
.patterns-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.patterns-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.patterns-loading p {
  margin-top: var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

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

/* Task 6.5: Patterns Error State (Requirement: 11.2) */
.patterns-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  text-align: center;
}

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

.patterns-error .error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-danger-light, #fef2f2);
  color: var(--color-danger, #dc2626);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.patterns-error .error-message {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.patterns-error .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Graph Canvas Area */
.graph-canvas-area {
  height: 400px;
  min-height: 400px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Patterns List (Card Grid) */
.patterns-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Pattern Group */
.pattern-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pattern-group-header {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

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

/* Empty Group Message */
.empty-group {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-3);
}

/* Patterns Empty State */
.patterns-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12);
  background-color: var(--color-surface-elevated);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.patterns-empty-state .empty-state-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.patterns-empty-state .empty-state-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.patterns-empty-state .empty-state-message {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 400px;
  margin: 0 0 var(--space-4);
}

/* Detail Panel (Slide-in) */
.patterns-detail-panel {
  position: fixed;
  top: 72px; /* Account for nav bar height */
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: calc(100vh - 72px); /* Fill remaining viewport below nav */
  background-color: var(--color-surface-elevated);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.patterns-detail-panel:not([hidden]) {
  transform: translateX(0);
}

.patterns-detail-panel.slide-panel[hidden] {
  display: block;
  visibility: hidden;
}

.patterns-detail-panel.slide-panel:not([hidden]) {
  visibility: visible;
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background-color: var(--color-surface-elevated);
  z-index: 1;
}

.detail-panel-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.detail-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.detail-panel-close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text);
}

.detail-panel-content {
  padding: var(--space-4);
}

/* ==========================================================================
   Task 5.2: Pattern Type Color Scheme for Graph Visualization
   Requirements: 1.4, 5.1, 6.1, 6.2, 7.1, 8.1
   Graph node styling variables and icon classes for vis-network
   ========================================================================== */

/* Graph Node Color Variables - used by GraphController for vis-network configuration */
:root {
  /* Node colors (same as pattern type colors for consistency) */
  --graph-node-cluster: var(--color-cluster);
  --graph-node-cluster-highlight: #3a7bc0;
  --graph-node-cluster-hover: #5ba0e6;

  --graph-node-tension: var(--color-tension);
  --graph-node-tension-highlight: #c0392b;
  --graph-node-tension-hover: #ec6b5e;

  --graph-node-momentum: var(--color-momentum);
  --graph-node-momentum-highlight: #1e8449;
  --graph-node-momentum-hover: #3dd97d;

  --graph-node-convergence: var(--color-convergence);
  --graph-node-convergence-highlight: #7d3c98;
  --graph-node-convergence-hover: #b370cf;

  /* Edge colors */
  --graph-edge-default: var(--color-gray-300);
  --graph-edge-highlight: var(--color-gray-600);
  --graph-edge-hover: var(--color-primary);

  /* Graph background */
  --graph-background: var(--color-surface);
}

/* Pattern Type Icon Classes - reusable SVG icon containers */
.pattern-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pattern-icon svg {
  width: 100%;
  height: 100%;
}

/* Cluster Icon - Group/nodes icon representing semantic similarity */
.pattern-icon--cluster {
  color: var(--color-cluster);
}

/* Tension Icon - Diverging arrows representing contrasting viewpoints */
.pattern-icon--tension {
  color: var(--color-tension);
}

/* Momentum Icon - Upward trend arrow representing growth */
.pattern-icon--momentum {
  color: var(--color-momentum);
}

/* Convergence Icon - Bridge/connection icon representing cross-domain links */
.pattern-icon--convergence {
  color: var(--color-convergence);
}

/* Pattern Icon Sizes */
.pattern-icon--sm {
  width: 16px;
  height: 16px;
}

.pattern-icon--md {
  width: 24px;
  height: 24px;
}

.pattern-icon--lg {
  width: 32px;
  height: 32px;
}

.pattern-icon--xl {
  width: 48px;
  height: 48px;
}

/* Pattern Icon Background Variants (for badges, buttons) */
.pattern-icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pattern-icon-bg--cluster {
  background-color: var(--color-cluster-light);
  color: var(--color-cluster);
}

.pattern-icon-bg--tension {
  background-color: var(--color-tension-light);
  color: var(--color-tension);
}

.pattern-icon-bg--momentum {
  background-color: var(--color-momentum-light);
  color: var(--color-momentum);
}

.pattern-icon-bg--convergence {
  background-color: var(--color-convergence-light);
  color: var(--color-convergence);
}

/* Graph Canvas Styles */
.graph-canvas-area {
  position: relative;
  width: 100%;
  background-color: var(--graph-background);
}

.graph-canvas-area[hidden] {
  display: none;
}

/* vis-network overrides */
.graph-canvas-area .vis-network {
  outline: none;
}

/* Graph Tooltip Styles */
.graph-tooltip {
  position: absolute;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-gray-900);
  color: var(--color-white);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  max-width: 250px;
  pointer-events: none;
}

.graph-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-gray-900);
}

/* Task 6.4: Graph Canvas Wrapper for positioning controls */
.graph-canvas-wrapper {
  position: relative;
}

/* Graph Controls (zoom, fit) */
.graph-controls {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 10;
}

.graph-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.graph-control-btn:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text);
  border-color: var(--color-border-dark);
}

.graph-control-btn:active {
  background-color: var(--color-gray-200);
}

.graph-control-btn svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Task 6.2: Graph Tooltip Content Styles
   Requirements: 9.1, 5.2 - Tooltip with cluster theme summary on hover
   ========================================================================== */

.graph-tooltip .tooltip-header {
  margin-bottom: var(--space-1);
}

.graph-tooltip .tooltip-type {
  display: inline-block;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.2);
}

.graph-tooltip .tooltip-type--cluster {
  color: var(--color-cluster-light);
}

.graph-tooltip .tooltip-type--tension {
  color: var(--color-tension-light);
}

.graph-tooltip .tooltip-type--momentum {
  color: var(--color-momentum-light);
}

.graph-tooltip .tooltip-type--convergence {
  color: var(--color-convergence-light);
}

.graph-tooltip .tooltip-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-tight);
}

.graph-tooltip .tooltip-meta {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
}

.graph-tooltip .tooltip-summary {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--line-height-relaxed);
}

/* Task 8.3: Momentum Pattern Tooltip Styles (Requirements 7.1, 7.2, 7.3)
   Display trend indicator with direction and traction period for momentum patterns */
.graph-tooltip .tooltip-trend {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-momentum-light);
  font-weight: var(--font-weight-medium);
}

/* Trend direction variants (Requirement 7.2) */
.graph-tooltip .tooltip-trend--rising {
  color: var(--color-momentum-light);
}

.graph-tooltip .tooltip-trend--falling {
  color: var(--color-tension-light);
}

.graph-tooltip .tooltip-trend--stable {
  color: rgba(255, 255, 255, 0.7);
}

/* Traction period display (Requirement 7.3) */
.graph-tooltip .tooltip-traction-period {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--font-size-xs);
}

.graph-tooltip .traction-label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}

.graph-tooltip .traction-dates {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Patterns Page - Improved Layout
   Clean, spacious layout with tab switching between graph and list views
   ========================================================================== */

/* Page Container - provides consistent padding */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
}

/* Patterns Page Main Container */
.patterns-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Page Header */
.page-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.page-subtitle {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Controls Bar - filters and view toggle */
.controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Filter Group */
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filter-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Filter Chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-border-dark);
}

.filter-chip:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.filter-chip--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.filter-chip--active:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Type-specific active states */
.filter-chip--cluster.filter-chip--active {
  background-color: var(--color-cluster);
  border-color: var(--color-cluster);
}

.filter-chip--tension.filter-chip--active {
  background-color: var(--color-tension);
  border-color: var(--color-tension);
}

.filter-chip--momentum.filter-chip--active {
  background-color: var(--color-momentum);
  border-color: var(--color-momentum);
}

.filter-chip--convergence.filter-chip--active {
  background-color: var(--color-convergence);
  border-color: var(--color-convergence);
}

/* View Toggle */
.view-toggle {
  display: flex;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}

.view-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-tab:hover {
  color: var(--color-text);
}

.view-tab--active {
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.view-tab-icon {
  width: 16px;
  height: 16px;
}

/* View Panel */
.view-panel {
  display: none;
}

.view-panel--active {
  display: block;
}

.view-panel[hidden] {
  display: none !important;
}

/* Graph Container - takes full available space */
.graph-container {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.graph-canvas {
  width: 100%;
  height: calc(100vh - 340px);
  min-height: 500px;
}

.graph-canvas[hidden] {
  display: none;
}

/* Patterns Grid (List View) */
.patterns-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Pattern Section */
.pattern-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pattern-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-light);
}

.pattern-section-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pattern-section-icon--cluster {
  background-color: var(--color-cluster);
}

.pattern-section-icon--tension {
  background-color: var(--color-tension);
}

.pattern-section-icon--momentum {
  background-color: var(--color-momentum);
}

.pattern-section-icon--convergence {
  background-color: var(--color-convergence);
}

.pattern-section-count {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  background-color: var(--color-gray-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  margin-left: auto;
}

/* Pattern Cards Grid in List View */
.pattern-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

/* Empty Section */
.empty-section {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Detail Panel - Slide-in */
.detail-panel {
  position: fixed;
  top: 72px; /* Account for nav bar height */
  right: 0;
  width: 450px;
  max-width: 90vw;
  height: calc(100vh - 72px); /* Fill remaining viewport below nav */
  background-color: var(--color-surface-elevated);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.detail-panel:not([hidden]) {
  transform: translateX(0);
}

.detail-panel[hidden] {
  display: block;
  visibility: hidden;
}

.detail-panel:not([hidden]) {
  visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-container {
    padding: var(--space-4);
  }

  .controls-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .view-toggle {
    align-self: stretch;
    justify-content: center;
  }

  .graph-canvas {
    height: calc(100vh - 400px);
    min-height: 400px;
  }

  .pattern-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Task 8.2: Tension Pattern Tooltip Styles (Requirement 6.2)
   Display contrasting viewpoints in tooltip for tension patterns */
.graph-tooltip .tooltip-viewpoints {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.graph-tooltip .tooltip-viewpoints-label {
  display: block;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-1);
}

.graph-tooltip .tooltip-viewpoint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs);
}

.graph-tooltip .tooltip-viewpoint--primary {
  border-left: 2px solid var(--color-tension-light);
  padding-left: var(--space-2);
}

.graph-tooltip .tooltip-viewpoint--opposing {
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  padding-left: var(--space-2);
}

.graph-tooltip .viewpoint-position {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.graph-tooltip .viewpoint-description {
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Task 6.3: Detail Panel Loading and Error States
   Requirements: 9.2, 4.1 - Node selection and detail panel loading
   ========================================================================== */

.detail-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.detail-panel-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.detail-panel-loading p {
  margin-top: var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

.detail-panel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.detail-panel-error p {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

/* Pattern Detail Panel Content Styles */
.pattern-detail-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pattern-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pattern-detail-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--line-height-tight);
}

.pattern-detail-type-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
}

.pattern-detail-type-badge--cluster {
  background-color: var(--color-cluster-light);
  color: var(--color-cluster);
}

.pattern-detail-type-badge--tension {
  background-color: var(--color-tension-light);
  color: var(--color-tension);
}

.pattern-detail-type-badge--momentum {
  background-color: var(--color-momentum-light);
  color: var(--color-momentum);
}

.pattern-detail-type-badge--convergence {
  background-color: var(--color-convergence-light);
  color: var(--color-convergence);
}

.pattern-detail-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.pattern-detail-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.pattern-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pattern-detail-meta-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pattern-detail-meta-value {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.pattern-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Task 8.3: Momentum Section for Detail Panel (Requirements 7.1, 7.2, 7.3)
   Display trend indicator and traction period for momentum patterns */
.pattern-detail-momentum-section {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-4);
}

.pattern-detail-momentum-section h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

/* Momentum Trend Indicator (Requirement 7.2) */
.momentum-trend-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-momentum-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.momentum-trend-indicator .trend-arrow {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.momentum-trend-indicator .trend-arrow--rising {
  color: var(--color-momentum);
}

.momentum-trend-indicator .trend-arrow--falling {
  color: var(--color-tension);
}

.momentum-trend-indicator .trend-arrow--stable {
  color: var(--color-text-muted);
}

.momentum-trend-indicator .trend-value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.momentum-trend-indicator .trend-value--rising {
  color: var(--color-momentum);
}

.momentum-trend-indicator .trend-value--falling {
  color: var(--color-tension);
}

.momentum-trend-indicator .trend-value--stable {
  color: var(--color-text-muted);
}

.momentum-trend-indicator .trend-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.momentum-trend-indicator .trend-unknown {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Traction Period Timeline (Requirement 7.3) */
.traction-period {
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.traction-period-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-momentum);
}

.traction-period-header svg {
  flex-shrink: 0;
}

.traction-period-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.traction-period-dates {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
}

.traction-start-date,
.traction-end-date {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.traction-date-separator {
  color: var(--color-text-muted);
}

.traction-duration {
  margin-top: var(--space-2);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Task 8.2: Contrasting Positions for Tension Patterns (Requirement 6.3)
   Display opposing viewpoints with their supporting sources */
.pattern-detail-contrasting-positions {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-4);
}

.pattern-detail-contrasting-positions h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.contrasting-positions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .contrasting-positions-grid {
    grid-template-columns: 1fr;
  }
}

.position-group {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.position-group--primary {
  border-left: 4px solid var(--color-tension);
}

.position-group--contrasting {
  border-left: 4px solid var(--color-cluster);
}

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

.position-indicator {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.position-indicator--primary {
  background-color: var(--color-tension);
}

.position-indicator--contrasting {
  background-color: var(--color-cluster);
}

.position-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.position-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.position-source-item {
  padding: var(--space-2);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.position-source-link {
  text-decoration: none;
  color: inherit;
}

.position-source-link:hover .position-source-title {
  color: var(--color-primary);
}

.position-source-title {
  display: block;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.position-source-excerpt {
  margin: var(--space-1) 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.position-empty {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* Task 8.4: Convergence Section for Detail Panel (Requirements 8.1, 8.2, 8.3)
   Display bridged domains and connecting entity for convergence patterns */
.pattern-detail-convergence-section {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-4);
}

.pattern-detail-convergence-section h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

/* Bridged Domains Display (Requirement 8.2) */
.bridged-domains {
  margin-bottom: var(--space-4);
}

.bridged-domains-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bridged-domains-header svg {
  color: var(--color-convergence);
  flex-shrink: 0;
}

.bridged-domains-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

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

.bridged-domain {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-convergence-light);
  border-left: 3px solid var(--color-convergence);
  border-radius: var(--radius-sm);
}

.bridged-domain-name {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-convergence);
}

.bridged-domain-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.bridged-domains-empty {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* Connecting Entity Display (Requirement 8.3) */
.connecting-entity {
  margin-bottom: var(--space-4);
}

.connecting-entity-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.connecting-entity-header svg {
  color: var(--color-convergence);
  flex-shrink: 0;
}

.connecting-entity-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.connecting-entity-content {
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-convergence);
  border-radius: var(--radius-md);
}

.connecting-entity-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-convergence);
  display: block;
}

.connecting-entity-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: var(--space-2) 0 0;
}

/* Related Entities Display */
.related-entities {
  margin-bottom: var(--space-2);
}

.related-entities-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.related-entities-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.related-entity-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-convergence-light);
  color: var(--color-convergence);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

/* Tooltip Styles for Convergence Patterns (Requirement 8.2) */
.tooltip-bridged-domains {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tooltip-bridged-domains-label {
  font-size: var(--font-size-xs);
  color: var(--color-convergence-light);
  display: block;
  margin-bottom: var(--space-1);
}

.tooltip-domains-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.tooltip-domain {
  display: inline-block;
  padding: 2px var(--space-1);
  background-color: rgba(155, 89, 182, 0.3);
  color: #ffffff;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-xs);
}

.tooltip-connecting-entity {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tooltip-connecting-entity-label {
  font-size: var(--font-size-xs);
  color: var(--color-convergence-light);
  display: block;
  margin-bottom: var(--space-1);
}

.tooltip-connecting-entity-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: #ffffff;
}

.pattern-detail-sources {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-4);
}

.pattern-detail-sources h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.pattern-detail-sources .source-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pattern-detail-sources .source-item {
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.pattern-detail-sources .source-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
}

.pattern-detail-sources .source-link:hover .source-title {
  color: var(--color-primary);
}

.pattern-detail-sources .source-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.pattern-detail-sources .source-type {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pattern-detail-sources .source-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pattern-detail-sources .source-relevance {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pattern-detail-sources .source-summary {
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.pattern-detail-sources .empty-sources-message {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
   Marketing Homepage Design System
   Task 2.2: CSS Design System with Custom Properties
   Task 2.3: Responsive Breakpoint System and Utility Classes
   Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 11.1, 11.2, 11.5
   ========================================================================== */

/* ==========================================================================
   Marketing Design Tokens - Professional Color Palette
   Distinct from vintage application theme (Requirement 9.1)
   ========================================================================== */

.marketing-page {
  /* ==========================================================================
     60s-70s NEWSROOM AESTHETIC - Vintage Journalism Color Palette
     Inspired by classic newspaper offices, typewriters, and print journalism
     ========================================================================== */

  /* Primary Palette - Ink & Paper */
  --marketing-primary: #1a1a1a;        /* Ink black - authoritative, classic */
  --marketing-primary-hover: #0d0d0d;  /* Deeper black for hover states */
  --marketing-primary-light: #f5f0e6;  /* Aged paper cream */
  --marketing-secondary: #8b4513;      /* Saddle brown - leather & wood */
  --marketing-accent: #c41e3a;         /* Cardinal red - vintage newspaper accent */
  --marketing-accent-hover: #a01830;   /* Darker red for hover states */
  --marketing-accent-light: #fdf2f4;   /* Light rose for backgrounds */

  /* Extended Vintage Palette */
  --marketing-violet: #4a3728;         /* Dark walnut */
  --marketing-violet-dark: #2c1810;    /* Deep sepia */
  --marketing-pink: #c41e3a;           /* Cardinal red */
  --marketing-pink-light: #fdf2f4;     /* Rose white */
  --marketing-cyan: #1e3a5f;           /* Navy ink */
  --marketing-green: #2d5a27;          /* Forest green - vintage success */
  --marketing-orange: #b8860b;         /* Dark goldenrod */

  /* Vintage Gradient Presets - Sepia & Dramatic Lighting */
  --marketing-gradient-primary: linear-gradient(135deg, #2c1810 0%, #4a3728 100%);
  --marketing-gradient-accent: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
  --marketing-gradient-hero: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 50%, #2c1810 100%);
  --marketing-gradient-cta: linear-gradient(135deg, #c41e3a 0%, #a01830 100%);

  /* Neutral Scale - Warm Aged Paper Tones */
  --marketing-gray-50: #faf8f5;        /* Lightest cream */
  --marketing-gray-100: #f5f0e6;       /* Aged paper */
  --marketing-gray-200: #e8e4d9;       /* Newsprint */
  --marketing-gray-300: #d4cfc2;       /* Warm light gray */
  --marketing-gray-400: #a09a8c;       /* Muted warm gray */
  --marketing-gray-500: #6b6560;       /* Medium warm gray */
  --marketing-gray-600: #4a4640;       /* Dark warm gray */
  --marketing-gray-700: #363330;       /* Charcoal warm */
  --marketing-gray-800: #252320;       /* Near black warm */
  --marketing-gray-900: #1a1918;       /* Ink black */
  --marketing-gray-950: #0d0c0c;       /* Deep black */

  /* Semantic Colors - Vintage Light Mode */
  --marketing-text: var(--marketing-gray-900);
  --marketing-text-secondary: var(--marketing-gray-700);
  --marketing-text-muted: var(--marketing-gray-500);
  --marketing-background: #f5f0e6;     /* Aged paper cream */
  --marketing-background-alt: #e8e4d9; /* Newsprint */
  --marketing-surface: #faf8f5;        /* Clean cream */
  --marketing-border: var(--marketing-gray-300);
  --marketing-border-light: var(--marketing-gray-200);

  /* Status Colors - Vintage Tones */
  --marketing-success: #2d5a27;        /* Forest green */
  --marketing-success-light: #e8f0e7;
  --marketing-warning: #b8860b;        /* Dark goldenrod */
  --marketing-warning-light: #fdf8e8;
  --marketing-error: #8b0000;          /* Dark red */
  --marketing-error-light: #fce8e8;

  /* ==========================================================================
     Typography Scale - Classic Newspaper Editorial Style
     Inspired by vintage newspaper headlines and print journalism
     ========================================================================== */

  /* Font Families - Classic Editorial */
  --marketing-font-display: 'Playfair Display', 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --marketing-font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --marketing-font-body: 'Source Serif 4', 'Charter', Georgia, serif;
  --marketing-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --marketing-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Font Sizes - Responsive Scale */
  --marketing-text-xs: 0.75rem;      /* 12px */
  --marketing-text-sm: 0.875rem;     /* 14px */
  --marketing-text-base: 1rem;       /* 16px */
  --marketing-text-lg: 1.125rem;     /* 18px */
  --marketing-text-xl: 1.25rem;      /* 20px */
  --marketing-text-2xl: 1.5rem;      /* 24px */
  --marketing-text-3xl: 1.875rem;    /* 30px */
  --marketing-text-4xl: 2.25rem;     /* 36px */
  --marketing-text-5xl: 3rem;        /* 48px */
  --marketing-text-6xl: 3.75rem;     /* 60px */
  --marketing-text-7xl: 4.5rem;      /* 72px */

  /* Font Weights */
  --marketing-font-normal: 400;
  --marketing-font-medium: 500;
  --marketing-font-semibold: 600;
  --marketing-font-bold: 700;
  --marketing-font-extrabold: 800;

  /* Line Heights */
  --marketing-leading-none: 1;
  --marketing-leading-tight: 1.25;
  --marketing-leading-snug: 1.375;
  --marketing-leading-normal: 1.5;
  --marketing-leading-relaxed: 1.625;
  --marketing-leading-loose: 2;

  /* ==========================================================================
     Spacing System (Requirement 9.3)
     Consistent spacing using CSS custom properties
     ========================================================================== */

  --marketing-space-0: 0;
  --marketing-space-1: 0.25rem;    /* 4px */
  --marketing-space-2: 0.5rem;     /* 8px */
  --marketing-space-3: 0.75rem;    /* 12px */
  --marketing-space-4: 1rem;       /* 16px */
  --marketing-space-5: 1.25rem;    /* 20px */
  --marketing-space-6: 1.5rem;     /* 24px */
  --marketing-space-8: 2rem;       /* 32px */
  --marketing-space-10: 2.5rem;    /* 40px */
  --marketing-space-12: 3rem;      /* 48px */
  --marketing-space-16: 4rem;      /* 64px */
  --marketing-space-20: 5rem;      /* 80px */
  --marketing-space-24: 6rem;      /* 96px */
  --marketing-space-32: 8rem;      /* 128px */

  /* Section Spacing */
  --marketing-section-padding-y: clamp(3rem, 8vw, 6rem);
  --marketing-section-padding-x: clamp(1rem, 5vw, 2rem);

  /* ==========================================================================
     Layout & Containers (Requirement 11.2)
     Task 2.3: Container classes for consistent content width
     ========================================================================== */

  --marketing-container-sm: 640px;
  --marketing-container-md: 768px;
  --marketing-container-lg: 1024px;
  --marketing-container-xl: 1280px;
  --marketing-container-2xl: 1536px;
  --marketing-container-max: 1400px;

  /* ==========================================================================
     Border Radius
     ========================================================================== */

  --marketing-radius-none: 0;
  --marketing-radius-sm: 0.25rem;   /* 4px */
  --marketing-radius-md: 0.375rem;  /* 6px */
  --marketing-radius-lg: 0.5rem;    /* 8px */
  --marketing-radius-xl: 0.75rem;   /* 12px */
  --marketing-radius-2xl: 1rem;     /* 16px */
  --marketing-radius-3xl: 1.5rem;   /* 24px */
  --marketing-radius-full: 9999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */

  --marketing-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --marketing-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --marketing-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --marketing-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --marketing-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ==========================================================================
     Transitions
     ========================================================================== */

  --marketing-transition-fast: 150ms ease;
  --marketing-transition-base: 200ms ease;
  --marketing-transition-slow: 300ms ease;
  --marketing-transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

/* ==========================================================================
   Dark Mode Colors - Night Edition Newsroom
   Deep sepia tones for late-night newsroom atmosphere
   ========================================================================== */

html.dark .marketing-page {
  --marketing-text: #f5f0e6;           /* Aged paper cream */
  --marketing-text-secondary: #d4cfc2; /* Warm light gray */
  --marketing-text-muted: #a09a8c;     /* Muted warm gray */
  --marketing-background: #0d0c0c;     /* Deep ink black */
  --marketing-background-alt: #1a1918; /* Warm near black */
  --marketing-surface: #252320;        /* Dark warm surface */
  --marketing-border: #4a4640;         /* Dark warm border */
  --marketing-border-light: #363330;   /* Charcoal warm */

  /* Primary colors - Cream on dark for vintage feel */
  --marketing-primary: #f5f0e6;        /* Cream text on dark */
  --marketing-primary-hover: #ffffff;
  --marketing-primary-light: rgba(245, 240, 230, 0.1);

  /* Accent colors - Muted vintage red */
  --marketing-accent: #e85d75;         /* Brighter vintage red for dark mode */
  --marketing-accent-hover: #f07d91;
  --marketing-accent-light: rgba(232, 93, 117, 0.15);
  --marketing-violet: #8b7355;         /* Warm brown */
  --marketing-violet-dark: #6b5a47;
  --marketing-pink: #e85d75;           /* Vintage red */
  --marketing-pink-light: rgba(232, 93, 117, 0.15);

  /* Status colors for dark mode - Muted vintage */
  --marketing-success: #6b9f65;        /* Muted forest green */
  --marketing-success-light: rgba(107, 159, 101, 0.15);
  --marketing-warning: #d4a656;        /* Warm amber */
  --marketing-warning-light: rgba(212, 166, 86, 0.15);
  --marketing-error: #cf6679;          /* Muted rose */
  --marketing-error-light: rgba(207, 102, 121, 0.15);

  /* Shadows for dark mode - Warm black shadows */
  --marketing-shadow-sm: 0 1px 2px 0 rgb(13 12 12 / 0.5);
  --marketing-shadow-md: 0 4px 6px -1px rgb(13 12 12 / 0.6), 0 2px 4px -2px rgb(13 12 12 / 0.4);
  --marketing-shadow-lg: 0 10px 15px -3px rgb(13 12 12 / 0.6), 0 4px 6px -4px rgb(13 12 12 / 0.4);
  --marketing-shadow-xl: 0 20px 25px -5px rgb(13 12 12 / 0.6), 0 8px 10px -6px rgb(13 12 12 / 0.4);
}

/* ==========================================================================
   Base Marketing Page Styles - Vintage Newsroom Atmosphere
   ========================================================================== */

.marketing-page {
  font-family: var(--marketing-font-body, var(--marketing-font-sans));
  font-size: var(--marketing-text-base);
  line-height: var(--marketing-leading-relaxed);
  color: var(--marketing-text);
  background-color: var(--marketing-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Subtle aged paper texture */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  background-size: 200px 200px;
}

.marketing-page main {
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
}

/* Vintage Film Grain Overlay - Applied to hero */
.marketing-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Marketing Container Classes (Requirement 11.2)
   Task 2.3: Container classes for consistent content width
   ========================================================================== */

.marketing-container {
  width: 100%;
  max-width: var(--marketing-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--marketing-section-padding-x);
  padding-right: var(--marketing-section-padding-x);
}

.marketing-container-sm {
  max-width: var(--marketing-container-sm);
}

.marketing-container-md {
  max-width: var(--marketing-container-md);
}

.marketing-container-lg {
  max-width: var(--marketing-container-lg);
}

.marketing-container-xl {
  max-width: var(--marketing-container-xl);
}

/* ==========================================================================
   Marketing Section Spacing
   ========================================================================== */

.marketing-section {
  padding-top: var(--marketing-section-padding-y);
  padding-bottom: var(--marketing-section-padding-y);
}

.marketing-section-sm {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.marketing-section-lg {
  padding-top: clamp(4rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

/* ==========================================================================
   Marketing Typography
   ========================================================================== */

.marketing-page h1,
.marketing-page h2,
.marketing-page h3,
.marketing-page h4,
.marketing-page h5,
.marketing-page h6 {
  font-family: var(--marketing-font-display);
  font-weight: var(--marketing-font-bold);
  line-height: var(--marketing-leading-tight);
  color: var(--marketing-text);
}

.marketing-page h1 {
  font-size: clamp(var(--marketing-text-4xl), 5vw, var(--marketing-text-6xl));
  letter-spacing: -0.025em;
}

.marketing-page h2 {
  font-size: clamp(var(--marketing-text-3xl), 4vw, var(--marketing-text-5xl));
  letter-spacing: -0.02em;
}

.marketing-page h3 {
  font-size: clamp(var(--marketing-text-2xl), 3vw, var(--marketing-text-4xl));
}

.marketing-page h4 {
  font-size: clamp(var(--marketing-text-xl), 2.5vw, var(--marketing-text-3xl));
}

.marketing-page p {
  color: var(--marketing-text-secondary);
  line-height: var(--marketing-leading-relaxed);
}

.marketing-page p.lead {
  font-size: clamp(var(--marketing-text-lg), 2vw, var(--marketing-text-xl));
  line-height: var(--marketing-leading-relaxed);
}

/* ==========================================================================
   Marketing Grid System (Requirement 11.2)
   Task 2.3: Grid and flexbox utility patterns
   ========================================================================== */

.marketing-grid {
  display: grid;
  gap: var(--marketing-space-6);
}

.marketing-grid-2 {
  grid-template-columns: repeat(1, 1fr);
}

.marketing-grid-3 {
  grid-template-columns: repeat(1, 1fr);
}

.marketing-grid-4 {
  grid-template-columns: repeat(1, 1fr);
}

/* Flexbox utilities */
.marketing-flex {
  display: flex;
}

.marketing-flex-col {
  flex-direction: column;
}

.marketing-flex-wrap {
  flex-wrap: wrap;
}

.marketing-items-center {
  align-items: center;
}

.marketing-items-start {
  align-items: flex-start;
}

.marketing-justify-center {
  justify-content: center;
}

.marketing-justify-between {
  justify-content: space-between;
}

.marketing-gap-4 {
  gap: var(--marketing-space-4);
}

.marketing-gap-6 {
  gap: var(--marketing-space-6);
}

.marketing-gap-8 {
  gap: var(--marketing-space-8);
}

/* ==========================================================================
   Marketing Buttons - Classic Newsroom Style
   Bold, authoritative buttons inspired by vintage print
   ========================================================================== */

.marketing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--marketing-space-2);
  padding: var(--marketing-space-3) var(--marketing-space-6);
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-sm);
  font-weight: var(--marketing-font-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--marketing-radius-sm);
  transition: var(--marketing-transition-colors), transform 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.marketing-btn:focus-visible {
  outline: 2px solid var(--marketing-accent);
  outline-offset: 2px;
}

.marketing-btn-primary {
  background-color: var(--marketing-accent);
  border-color: var(--marketing-accent);
  color: #ffffff;
}

.marketing-btn-primary:hover {
  background-color: var(--marketing-accent-hover);
  border-color: var(--marketing-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--marketing-shadow-md);
}

.marketing-btn-secondary {
  background-color: transparent;
  color: var(--marketing-text);
  border: 2px solid var(--marketing-text);
}

.marketing-btn-secondary:hover {
  background-color: var(--marketing-text);
  color: var(--marketing-background);
}

.marketing-btn-lg {
  padding: var(--marketing-space-4) var(--marketing-space-8);
  font-size: var(--marketing-text-base);
}

/* ==========================================================================
   Marketing Cards
   ========================================================================== */

.marketing-card {
  background-color: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-xl);
  padding: var(--marketing-space-6);
  transition: var(--marketing-transition-base);
}

.marketing-card:hover {
  border-color: var(--marketing-border);
  box-shadow: var(--marketing-shadow-lg);
}

/* ==========================================================================
   Responsive Breakpoints (Requirement 11.1, 11.2)
   Task 2.3: Mobile (< 640px), Tablet (640px-1024px), Desktop (> 1024px)
   ========================================================================== */

/* Tablet breakpoint (>= 640px) */
@media (min-width: 640px) {
  .marketing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .marketing-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .marketing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop breakpoint (>= 1024px) */
@media (min-width: 1024px) {
  .marketing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .marketing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Large desktop (>= 1280px) */
@media (min-width: 1280px) {
  .marketing-page {
    --marketing-text-base: 1.0625rem; /* 17px */
  }
}

/* ==========================================================================
   Smooth Layout Transitions (Requirement 11.5)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .marketing-page {
    scroll-behavior: smooth;
  }

  .marketing-page * {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: ease;
  }

  .marketing-page *:not(.marketing-btn):not(a) {
    transition-property: none;
  }
}

/* ==========================================================================
   Homepage Placeholder Styles (temporary)
   ========================================================================== */

.homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--marketing-section-padding-x);
  text-align: center;
}

.homepage h1 {
  font-family: var(--marketing-font-display);
  font-size: clamp(var(--marketing-text-5xl), 8vw, var(--marketing-text-7xl));
  font-weight: var(--marketing-font-bold);
  color: var(--marketing-text);
  margin-bottom: var(--marketing-space-4);
}

.homepage p {
  font-size: clamp(var(--marketing-text-lg), 2vw, var(--marketing-text-2xl));
  color: var(--marketing-text-secondary);
  max-width: 600px;
}

/* ==========================================================================
   Marketing Header (Task 4.1)
   Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7
   ========================================================================== */

/* ==========================================================================
   Marketing Header - Vintage Newspaper Masthead Style
   Classic editorial navigation with warm tones
   ========================================================================== */

.marketing-header {
  background-color: transparent;
  border-bottom: none;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.marketing-header--sticky {
  position: fixed;
  background-color: rgba(13, 12, 12, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 207, 194, 0.1);
}

.marketing-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--marketing-space-16);
  gap: var(--marketing-space-4);
}

/* Logo - Classic Newspaper Masthead */
.marketing-logo-link {
  text-decoration: none;
  flex-shrink: 0;
}

.marketing-logo {
  font-family: var(--marketing-font-headline, 'Playfair Display', Georgia);
  font-size: var(--marketing-text-2xl);
  font-weight: 900;
  color: #f5f0e6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
}

/* Decorative underline */
.marketing-logo::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--marketing-accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.marketing-logo-link:hover .marketing-logo {
  color: var(--marketing-accent);
}

.marketing-logo-link:hover .marketing-logo::after {
  transform: scaleX(1);
}

/* Navigation - Vintage Editorial Style */
.marketing-nav {
  display: flex;
  align-items: center;
}

.marketing-nav--desktop {
  gap: var(--marketing-space-1);
}

.marketing-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--marketing-space-2) var(--marketing-space-4);
  font-family: var(--marketing-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a09a8c;
  text-decoration: none;
  border-radius: 0;
  transition: color 0.2s ease;
  position: relative;
}

.marketing-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--marketing-accent);
  transition: all 0.2s ease;
}

.marketing-nav__link:hover {
  color: #f5f0e6;
  background-color: transparent;
}

.marketing-nav__link:hover::after {
  left: var(--marketing-space-4);
  right: var(--marketing-space-4);
}

.marketing-nav__link:focus-visible {
  outline: 2px solid var(--marketing-accent);
  outline-offset: 2px;
}

/* Header Actions */
.marketing-header__actions {
  display: flex;
  align-items: center;
  gap: var(--marketing-space-3);
}

/* Theme Toggle Button - Vintage Lamp Style */
.marketing-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--marketing-space-2);
  background: transparent;
  border: 1px solid rgba(160, 154, 140, 0.3);
  border-radius: 0;
  color: #a09a8c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.marketing-theme-toggle:hover {
  color: #f5f0e6;
  border-color: #f5f0e6;
  background-color: transparent;
}

.marketing-theme-toggle:focus-visible {
  outline: 2px solid var(--marketing-accent);
  outline-offset: 2px;
}

.marketing-theme-toggle__icon {
  width: 20px;
  height: 20px;
}

/* Hide/show theme icons based on current theme */
.marketing-theme-toggle__icon[data-theme="dark"] {
  display: none;
}

html.dark .marketing-theme-toggle__icon[data-theme="light"] {
  display: none;
}

html.dark .marketing-theme-toggle__icon[data-theme="dark"] {
  display: block;
}

/* Header CTA Button */
.marketing-header__cta {
  display: none;
}

/* Header Login Button - Force light colors on dark header background */
.marketing-header .marketing-btn-secondary {
  color: #f5f0e6;
  border-color: rgba(160, 154, 140, 0.5);
}

.marketing-header .marketing-btn-secondary:hover {
  background-color: #f5f0e6;
  color: #0d0c0c;
  border-color: #f5f0e6;
}

/* ==========================================================================
   Login Button - Task 1.1, 1.2, 1.3 (user-login feature)
   Requirements: 1.1, 1.2, 1.3, 1.4, 4.1, 4.2, 4.3, 5.1, 5.2, 5.3
   ========================================================================== */

/* Desktop Login Button - Hidden on mobile, shown on desktop */
.marketing-header__login {
  display: none;
}

/* Mobile Login Button - Styled in mobile menu with 44x44px touch target */
.marketing-nav__login {
  margin-top: var(--marketing-space-4);
  text-align: center;
  /* Requirement 4.2: Ensure 44x44px minimum touch target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu Toggle Button */
.marketing-mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--marketing-space-2);
  background: transparent;
  border: none;
  border-radius: var(--marketing-radius-md);
  color: var(--marketing-text-secondary);
  cursor: pointer;
  transition: var(--marketing-transition-colors);
}

.marketing-mobile-menu-btn:hover {
  color: var(--marketing-text);
  background-color: var(--marketing-background-alt);
}

.marketing-mobile-menu-btn:focus-visible {
  outline: 2px solid var(--marketing-primary);
  outline-offset: 2px;
}

.marketing-mobile-menu-btn__icon {
  width: 24px;
  height: 24px;
}

.marketing-mobile-menu-btn__icon--close {
  display: none;
}

/* Show close icon when menu is open */
.marketing-nav--mobile.is-open ~ .marketing-header__actions .marketing-mobile-menu-btn__icon--open,
.marketing-header:has(.marketing-nav--mobile.is-open) .marketing-mobile-menu-btn__icon--open {
  display: none;
}

.marketing-nav--mobile.is-open ~ .marketing-header__actions .marketing-mobile-menu-btn__icon--close,
.marketing-header:has(.marketing-nav--mobile.is-open) .marketing-mobile-menu-btn__icon--close {
  display: block;
}

/* Mobile Navigation Menu */
.marketing-nav--mobile {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--marketing-background);
  border-bottom: 1px solid var(--marketing-border-light);
  padding: var(--marketing-space-4) var(--marketing-section-padding-x);
  box-shadow: var(--marketing-shadow-lg);
}

.marketing-nav--mobile.is-open {
  display: flex;
}

.marketing-nav--mobile .marketing-nav__link {
  padding: var(--marketing-space-3) var(--marketing-space-4);
  font-size: var(--marketing-text-base);
  border-radius: var(--marketing-radius-lg);
}

.marketing-nav--mobile .marketing-nav__cta {
  margin-top: var(--marketing-space-4);
  text-align: center;
}

/* Desktop Styles */
@media (min-width: 768px) {
  .marketing-nav--desktop {
    display: flex;
  }

  /* Desktop Login Button - Task 1.1: Show login button on desktop (Requirement 1.2) */
  .marketing-header__login {
    display: inline-flex;
  }

  .marketing-header__cta {
    display: inline-flex;
  }

  .marketing-mobile-menu-btn {
    display: none;
  }

  .marketing-nav--mobile {
    display: none !important;
  }
}

/* Hide desktop nav on mobile */
@media (max-width: 767px) {
  .marketing-nav--desktop {
    display: none;
  }
}

/* ==========================================================================
   Marketing Footer (Task 4.2)
   Requirements: 8.1, 8.2, 8.3, 8.4, 8.5
   ========================================================================== */

.marketing-footer {
  background-color: var(--marketing-background-alt);
  border-top: 1px solid var(--marketing-border-light);
  padding: var(--marketing-section-padding-y) 0;
}

.marketing-footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-8);
}

.marketing-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-8);
}

/* Footer Brand */
.marketing-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
}

.marketing-footer__logo {
  font-family: var(--marketing-font-display);
  font-size: var(--marketing-text-xl);
  font-weight: var(--marketing-font-bold);
  color: var(--marketing-text);
  text-decoration: none;
}

.marketing-footer__logo:hover {
  color: var(--marketing-primary);
}

.marketing-footer__tagline {
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-muted);
  max-width: 280px;
  line-height: var(--marketing-leading-relaxed);
}

/* Footer Navigation */
.marketing-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marketing-space-6);
}

.marketing-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
  min-width: 140px;
}

.marketing-footer__nav-title {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-sm);
  font-weight: var(--marketing-font-semibold);
  color: var(--marketing-text);
  margin-bottom: var(--marketing-space-1);
}

.marketing-footer__nav-link {
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-muted);
  text-decoration: none;
  transition: var(--marketing-transition-colors);
}

.marketing-footer__nav-link:hover {
  color: var(--marketing-primary);
}

.marketing-footer__nav-link:focus-visible {
  outline: 2px solid var(--marketing-primary);
  outline-offset: 2px;
}

/* Footer Social Links */
.marketing-footer__social {
  display: flex;
  gap: var(--marketing-space-4);
}

.marketing-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--marketing-text-muted);
  text-decoration: none;
  border-radius: var(--marketing-radius-md);
  transition: var(--marketing-transition-colors);
}

.marketing-footer__social-link:hover {
  color: var(--marketing-primary);
  background-color: var(--marketing-background);
}

.marketing-footer__social-link:focus-visible {
  outline: 2px solid var(--marketing-primary);
  outline-offset: 2px;
}

.marketing-footer__social-icon {
  width: 20px;
  height: 20px;
}

/* Footer Bottom */
.marketing-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-4);
  padding-top: var(--marketing-space-6);
  border-top: 1px solid var(--marketing-border-light);
}

.marketing-footer__copyright {
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-muted);
}

.marketing-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marketing-space-4);
}

.marketing-footer__legal-link {
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-muted);
  text-decoration: none;
  transition: var(--marketing-transition-colors);
}

.marketing-footer__legal-link:hover {
  color: var(--marketing-primary);
}

/* Footer Desktop Layout */
@media (min-width: 768px) {
  .marketing-footer__top {
    flex-direction: row;
    justify-content: space-between;
  }

  .marketing-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .marketing-footer__nav {
    gap: var(--marketing-space-12);
  }
}

/* ==========================================================================
   Hero Section (Task 5.1)
   Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
   ========================================================================== */

.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--marketing-background) 0%,
    var(--marketing-background-alt) 100%
  );
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-12);
  align-items: center;
  text-align: center;
}

/* Hero Text Content */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--marketing-space-6);
  max-width: 800px;
}

/* Requirement 1.1: Prominent headline */
.hero-headline {
  font-family: var(--marketing-font-display);
  font-size: clamp(var(--marketing-text-4xl), 6vw, var(--marketing-text-6xl));
  font-weight: var(--marketing-font-bold);
  line-height: var(--marketing-leading-tight);
  letter-spacing: -0.025em;
  color: var(--marketing-text);
  margin: 0;
}

/* Requirement 1.2: Subheadline quantifying benefits */
.hero-subheadline {
  font-family: var(--marketing-font-sans);
  font-size: clamp(var(--marketing-text-lg), 2.5vw, var(--marketing-text-xl));
  line-height: var(--marketing-leading-relaxed);
  color: var(--marketing-text-secondary);
  margin: 0;
  max-width: 600px;
}

/* Requirement 1.3: CTA buttons */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-4);
  width: 100%;
  max-width: 400px;
}

.hero-cta {
  width: 100%;
}

.hero-secondary-cta {
  width: 100%;
}

/* Trust indicators below CTA */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--marketing-space-2);
  color: var(--marketing-text-muted);
  font-size: var(--marketing-text-sm);
}

.hero-trust-text {
  display: inline-flex;
  align-items: center;
}

.hero-trust-separator {
  color: var(--marketing-border);
}

/* Requirement 1.5: Visual element area */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 700px;
}

.hero-visual-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
}

/* Platform mockup visual */
.hero-visual-mockup {
  width: 100%;
  height: 100%;
  background-color: var(--marketing-surface);
  border: 1px solid var(--marketing-border);
  border-radius: var(--marketing-radius-xl);
  box-shadow: var(--marketing-shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-mockup-header {
  display: flex;
  gap: var(--marketing-space-2);
  padding: var(--marketing-space-3) var(--marketing-space-4);
  background-color: var(--marketing-background-alt);
  border-bottom: 1px solid var(--marketing-border-light);
}

.hero-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--marketing-radius-full);
  background-color: var(--marketing-border);
}

.hero-mockup-dot:first-child {
  background-color: var(--marketing-error);
  opacity: 0.7;
}

.hero-mockup-dot:nth-child(2) {
  background-color: var(--marketing-warning);
  opacity: 0.7;
}

.hero-mockup-dot:nth-child(3) {
  background-color: var(--marketing-success);
  opacity: 0.7;
}

.hero-mockup-content {
  display: flex;
  flex: 1;
  min-height: 0;
}

.hero-mockup-sidebar {
  width: 30%;
  max-width: 150px;
  padding: var(--marketing-space-4);
  background-color: var(--marketing-background-alt);
  border-right: 1px solid var(--marketing-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
}

.hero-mockup-item {
  height: 12px;
  background-color: var(--marketing-border-light);
  border-radius: var(--marketing-radius-sm);
}

.hero-mockup-item--active {
  background-color: var(--marketing-primary);
  opacity: 0.5;
}

.hero-mockup-main {
  flex: 1;
  padding: var(--marketing-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
  position: relative;
}

.hero-mockup-line {
  height: 12px;
  background-color: var(--marketing-border-light);
  border-radius: var(--marketing-radius-sm);
}

.hero-mockup-line--long {
  width: 100%;
}

.hero-mockup-line--medium {
  width: 75%;
}

.hero-mockup-line--short {
  width: 50%;
}

.hero-mockup-sparkle {
  position: absolute;
  bottom: var(--marketing-space-4);
  right: var(--marketing-space-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--marketing-primary) 0%, var(--marketing-accent) 100%);
  border-radius: var(--marketing-radius-lg);
  color: white;
  box-shadow: var(--marketing-shadow-lg);
}

.hero-mockup-sparkle svg {
  width: 20px;
  height: 20px;
}

/* Requirement 1.6: Responsive breakpoints */

/* Tablet (>= 640px) */
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .hero-cta,
  .hero-secondary-cta {
    width: auto;
  }

  .hero-trust {
    gap: var(--marketing-space-4);
  }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .hero-content {
    flex-direction: row;
    text-align: left;
    gap: var(--marketing-space-16);
    align-items: center;
  }

  .hero-text {
    flex: 1;
    align-items: flex-start;
    max-width: none;
  }

  .hero-headline {
    font-size: clamp(var(--marketing-text-5xl), 5vw, var(--marketing-text-7xl));
  }

  .hero-subheadline {
    max-width: none;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-trust {
    justify-content: flex-start;
  }

  .hero-visual {
    flex: 1;
    max-width: 600px;
  }
}

/* Large desktop (>= 1280px) */
@media (min-width: 1280px) {
  .hero-visual {
    max-width: 700px;
  }

  .hero-mockup-sparkle {
    width: 48px;
    height: 48px;
  }

  .hero-mockup-sparkle svg {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   Hero Section V2 - 60s-70s NEWSROOM ATMOSPHERE
   Dramatic lighting, sepia tones, vintage journalism feel
   ========================================================================== */

.hero-section-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Allow floating cards to extend beyond container */
  overflow: visible;
  overflow-x: clip; /* Prevent horizontal scrollbar */
  background: linear-gradient(180deg,
    #0d0c0c 0%,
    #1a1918 30%,
    #252320 60%,
    #2c1810 100%);
  padding-top: 100px;
  padding-bottom: 60px;
}

/* Dramatic Newsroom Lighting Background */
.hero-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Dramatic spotlight effect - like desk lamp in newsroom */
.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.hero-gradient-orb--1 {
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center,
    rgba(212, 166, 86, 0.4) 0%,
    rgba(139, 69, 19, 0.2) 40%,
    transparent 70%);
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  animation: spotlight-flicker 8s ease-in-out infinite;
}

/* Secondary warm light - like another desk lamp */
.hero-gradient-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse at center,
    rgba(245, 240, 230, 0.15) 0%,
    rgba(212, 166, 86, 0.1) 50%,
    transparent 70%);
  top: 10%;
  right: 10%;
  animation: spotlight-flicker 6s ease-in-out infinite;
  animation-delay: -2s;
}

/* Subtle vignette effect */
.hero-gradient-orb--3 {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(13, 12, 12, 0.6) 100%);
  top: 0;
  left: 0;
  filter: none;
  animation: none;
}

html.dark .hero-gradient-orb--1 {
  background: radial-gradient(ellipse at center,
    rgba(212, 166, 86, 0.25) 0%,
    rgba(139, 69, 19, 0.15) 40%,
    transparent 70%);
}

html.dark .hero-gradient-orb--2 {
  background: radial-gradient(ellipse at center,
    rgba(245, 240, 230, 0.1) 0%,
    rgba(212, 166, 86, 0.05) 50%,
    transparent 70%);
}

/* Vintage newspaper column lines pattern */
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 200px,
      rgba(212, 207, 194, 0.03) 200px,
      rgba(212, 207, 194, 0.03) 201px
    );
  opacity: 0.5;
}

html.dark .hero-grid-pattern {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 200px,
      rgba(245, 240, 230, 0.02) 200px,
      rgba(245, 240, 230, 0.02) 201px
    );
}

/* Subtle spotlight flicker animation */
@keyframes spotlight-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* Typewriter cursor blink */
@keyframes typewriter-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hero Container */
.hero-container-v2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-container-v2 {
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
  }
}

/* Hero Content */
.hero-content-v2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-content-v2 {
    text-align: left;
  }
}

/* Badge - "EXTRA! EXTRA!" Breaking News Style */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--marketing-accent);
  border: none;
  border-radius: 0;
  font-family: var(--marketing-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}

.hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.1) 50%,
    transparent 100%);
  animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

@media (min-width: 1024px) {
  .hero-badge {
    margin: 0;
  }
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Headline - Classic Newspaper Banner Style */
/* Hero section always has dark background, so text is always light */
.hero-section-v2 .hero-headline-v2,
.hero-headline-v2 {
  font-family: var(--marketing-font-headline, var(--marketing-font-display));
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f5f0e6 !important; /* Cream on dark background - always */
  margin: 0;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3);
  /* Ensure proper text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-fill-color: #f5f0e6;
}

/* Accent text - Vintage red highlight */
/* Uses explicit colors for both light and dark modes */
.hero-section-v2 .hero-gradient-text,
.hero-gradient-text {
  color: #c41e3a !important; /* Cardinal red - always visible on dark bg */
  position: relative;
  display: inline-block;
  /* Explicitly disable any gradient text inheritance */
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #c41e3a !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

/* Optional underline effect for accent text */
.hero-gradient-text::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: 0;
  right: 0;
  height: 4px;
  background: #c41e3a;
  opacity: 0.4;
}

/* Subheadline - Lead paragraph style */
/* Hero section always has dark background */
.hero-section-v2 .hero-subheadline-v2,
.hero-subheadline-v2 {
  font-family: var(--marketing-font-body, var(--marketing-font-sans));
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  line-height: 1.8;
  color: #d4cfc2 !important; /* Warm muted cream - always */
  max-width: 520px;
  margin: 0 auto;
  font-style: italic;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  -webkit-text-fill-color: #d4cfc2;
}

@media (min-width: 1024px) {
  .hero-subheadline-v2 {
    margin: 0;
  }
}

/* CTA Buttons - Bold Newsroom Style */
.hero-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .hero-actions-v2 {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .hero-actions-v2 {
    justify-content: flex-start;
  }
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  background: var(--marketing-accent);
  color: white;
  font-family: var(--marketing-font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  border: none;
}

.hero-btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  background: var(--marketing-accent-hover);
}

.hero-btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.hero-btn-primary svg {
  transition: transform 0.2s ease;
}

.hero-btn-primary:hover svg {
  transform: translateX(4px);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  background: transparent;
  color: #f5f0e6;
  font-family: var(--marketing-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  border: 2px solid #f5f0e6;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-btn-secondary:hover {
  background: #f5f0e6;
  color: #1a1918;
  border-color: #f5f0e6;
}

/* Trust Section - Vintage Testimonial Style */
.hero-trust-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 207, 194, 0.2);
}

@media (min-width: 640px) {
  .hero-trust-v2 {
    flex-direction: row;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .hero-trust-v2 {
    justify-content: flex-start;
  }
}

.hero-avatars {
  display: flex;
  margin-left: 8px;
}

.hero-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar-bg, linear-gradient(135deg, #8b4513 0%, #4a3728 100%));
  color: #f5f0e6;
  font-family: var(--marketing-font-display);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(212, 207, 194, 0.3);
  margin-left: -8px;
  /* Vintage photo border effect */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.hero-avatar:first-child {
  margin-left: 0;
}

.hero-avatar-more {
  background: rgba(245, 240, 230, 0.1);
  color: #d4cfc2;
  font-family: var(--marketing-font-sans);
  font-size: 10px;
  font-weight: 700;
}

.hero-trust-text-v2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #a09a8c;
  font-family: var(--marketing-font-sans);
}

.hero-stars {
  display: flex;
  gap: 2px;
  color: #d4a656; /* Warm amber gold */
}

.hero-trust-text-v2 strong {
  color: #f5f0e6;
}

/* Hero Visual - Vintage Newspaper Layout */
.hero-visual-v2 {
  position: relative;
  width: 100%;
  /* Ensure floating cards are visible */
  overflow: visible;
  z-index: 1;
}

.hero-app-preview {
  background: #f5f0e6; /* Aged paper */
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.3),
    0 20px 50px -12px rgba(0, 0, 0, 0.5);
  /* Aged paper effect */
  position: relative;
  z-index: 1;
}

.hero-app-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

/* Newspaper Header - Masthead Style */
.hero-app-chrome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 24px 16px;
  background: #f5f0e6;
  border-bottom: 3px double #1a1918;
  position: relative;
}

.hero-app-dots {
  display: none; /* Hide browser dots - not vintage */
}

.hero-app-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--marketing-font-headline, Georgia);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1918;
  flex: none;
  max-width: none;
  width: 100%;
  text-align: center;
}

.hero-app-url svg {
  display: none; /* Hide lock icon */
}

/* Date line under masthead */
.hero-app-chrome::after {
  content: 'The Future of Journalism';
  font-family: var(--marketing-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b6560;
}

/* App Content - Newspaper Column Layout */
.hero-app-content {
  display: flex;
  min-height: 280px;
  background: #f5f0e6;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .hero-app-content {
    min-height: 320px;
  }
}

/* Sidebar - Newspaper Index/Contents */
.hero-app-sidebar {
  width: 140px;
  padding: 16px;
  background: #f5f0e6;
  border-right: 1px solid #1a1918;
  display: none;
}

@media (min-width: 640px) {
  .hero-app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.hero-app-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0;
  font-family: var(--marketing-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6560;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.hero-app-nav-item svg {
  display: none; /* Hide icons for vintage feel */
}

.hero-app-nav-item--active {
  background: transparent;
  color: #1a1918;
  border-left-color: var(--marketing-accent);
}

/* Main Content - Article Area */
.hero-app-main {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-app-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #1a1918;
}

.hero-app-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-app-title {
  font-family: var(--marketing-font-headline, Georgia);
  font-size: 18px;
  font-weight: 700;
  color: #1a1918;
  letter-spacing: -0.02em;
}

.hero-app-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--marketing-font-mono, monospace);
  font-size: 10px;
  color: #6b6560;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-status-dot {
  width: 6px;
  height: 6px;
  background: var(--marketing-accent);
  border-radius: 0;
  animation: typewriter-blink 1s step-end infinite;
}

/* Editor Mockup - Typewriter Style */
.hero-app-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  /* Newspaper column text simulation */
  columns: 2;
  column-gap: 20px;
  column-rule: 1px solid #d4cfc2;
}

@media (max-width: 640px) {
  .hero-app-editor {
    columns: 1;
  }
}

.hero-editor-line {
  height: 10px;
  background: #d4cfc2;
  border-radius: 0;
  margin-bottom: 4px;
  break-inside: avoid;
}

.hero-editor-line--heading {
  width: 80%;
  height: 14px;
  background: #1a1918;
  margin-bottom: 8px;
  column-span: all;
}

.hero-editor-line--full {
  width: 100%;
}

.hero-editor-line--partial {
  width: 85%;
}

/* AI Suggestion - Vintage Editor's Note Style */
.hero-ai-suggestion {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fffef8;
  border: 2px solid #1a1918;
  border-radius: 0;
  max-width: 240px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  animation: slide-up 0.5s ease-out;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-ai-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marketing-accent);
  border-radius: 0;
  color: white;
  flex-shrink: 0;
}

.hero-ai-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-ai-label {
  font-family: var(--marketing-font-sans);
  font-size: 9px;
  font-weight: 800;
  color: var(--marketing-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-ai-content {
  font-family: var(--marketing-font-body, Georgia);
  font-size: 12px;
  font-style: italic;
  color: #4a4640;
  line-height: 1.5;
}

/* Floating Cards - Vintage Press Badge Style */
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f5f0e6;
  border: 2px solid #1a1918;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  animation: float-card 6s ease-in-out infinite;
  /* Ensure cards appear above the newspaper preview */
  z-index: 10;
}

html.dark .hero-float-card {
  background: #252320;
  border-color: #f5f0e6;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-float-card--stats {
  top: 20%;
  left: -30px;
  animation-delay: 0s;
}

.hero-float-card--time {
  bottom: 15%;
  right: -30px;
  animation-delay: -3s;
}

@media (max-width: 1023px) {
  .hero-float-card {
    display: none;
  }
}

.hero-float-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 2px solid currentColor;
}

.hero-float-icon--green {
  background: transparent;
  color: #2d5a27;
}

.hero-float-icon--blue {
  background: transparent;
  color: #1e3a5f;
}

html.dark .hero-float-icon--green {
  color: #6b9f65;
}

html.dark .hero-float-icon--blue {
  color: #7ba3c9;
}

.hero-float-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-float-value {
  font-family: var(--marketing-font-headline, Georgia);
  font-size: 22px;
  font-weight: 900;
  color: #1a1918;
}

html.dark .hero-float-value {
  color: #f5f0e6;
}

.hero-float-label {
  font-family: var(--marketing-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6560;
}

html.dark .hero-float-label {
  color: #a09a8c;
}

/* ==========================================================================
   Problem Statement Section (Task 6.1)
   Requirements: 2.1, 2.2, 2.3, 2.4, 2.5
   ========================================================================== */

.problems-section {
  background-color: var(--marketing-background-alt);
}

/* Section Header */
.problems-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--marketing-space-12);
}

.problems-title {
  margin-bottom: var(--marketing-space-4);
}

.problems-subtitle {
  color: var(--marketing-text-secondary);
  margin: 0;
}

/* Problem Cards Grid (Requirement 2.3) */
.problems-grid {
  gap: var(--marketing-space-6);
}

/* Problem Card (Requirement 2.2, 2.3) */
.problem-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--marketing-space-6);
  background-color: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-xl);
  transition: transform var(--marketing-transition-base),
              box-shadow var(--marketing-transition-base),
              border-color var(--marketing-transition-base);
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--marketing-shadow-lg);
  border-color: var(--marketing-border);
}

/* Problem Card Icon (Requirement 2.4) */
.problem-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--marketing-space-4);
  background: linear-gradient(135deg, var(--marketing-primary-light) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: var(--marketing-radius-xl);
  color: var(--marketing-primary);
}

.problem-card__icon svg {
  width: 28px;
  height: 28px;
}

/* Problem Card Title (Requirement 2.2) */
.problem-card__title {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-lg);
  font-weight: var(--marketing-font-semibold);
  color: var(--marketing-text);
  margin: 0 0 var(--marketing-space-2);
  line-height: var(--marketing-leading-tight);
}

/* Problem Card Description (Requirement 2.2) */
.problem-card__description {
  font-size: var(--marketing-text-base);
  color: var(--marketing-text-secondary);
  line-height: var(--marketing-leading-relaxed);
  margin: 0;
}

/* ==========================================================================
   Problem Section Responsive Breakpoints
   ========================================================================== */

/* Tablet (>= 640px) */
@media (min-width: 640px) {
  .problems-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-card__icon {
    width: 64px;
    height: 64px;
  }

  .problem-card__icon svg {
    width: 32px;
    height: 32px;
  }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .problems-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .problems-header {
    margin-bottom: var(--marketing-space-16);
  }
}

/* ==========================================================================
   Problem Section Dark Mode
   ========================================================================== */

html.dark .problems-section {
  background-color: var(--marketing-background);
}

html.dark .problem-card {
  background-color: var(--marketing-surface);
}

html.dark .problem-card__icon {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
}

/* ==========================================================================
   V2 Shared Styles - Modern Section Headers
   ========================================================================== */

.section-header-v2 {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}

.section-label {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--marketing-primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.section-title-v2 {
  font-family: var(--marketing-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--marketing-text);
  margin: 0 0 16px;
}

.section-subtitle-v2 {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--marketing-text-secondary);
  margin: 0;
}

/* ==========================================================================
   Problem Section V2 - Modern Redesign
   ========================================================================== */

.problems-section-v2 {
  padding: 100px 0;
  background: var(--marketing-background);
}

.problems-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .problems-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .problems-grid-v2 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.problem-card-v2 {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.problem-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: var(--marketing-border);
}

html.dark .problem-card-v2:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.problem-card-v2__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px;
}

.problem-card-v2__icon--orange {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
  color: #f97316;
}

.problem-card-v2__icon--red {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
  color: #ef4444;
}

.problem-card-v2__icon--purple {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #8b5cf6;
}

.problem-card-v2__icon--blue {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
  color: #3b82f6;
}

.problem-card-v2__content {
  flex: 1;
}

.problem-card-v2__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--marketing-text);
  margin: 0 0 10px;
  line-height: 1.4;
}

.problem-card-v2__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--marketing-text-secondary);
  margin: 0;
}

.problem-card-v2__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--marketing-border-light);
}

.problem-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--marketing-text);
}

.problem-stat-label {
  font-size: 0.8125rem;
  color: var(--marketing-text-muted);
}

/* ==========================================================================
   Benefits Section V2 - Modern Redesign
   ========================================================================== */

.benefits-section-v2 {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--marketing-background) 0%, var(--marketing-background-alt) 100%);
  position: relative;
  overflow: hidden;
}

.benefits-section-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.benefits-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .benefits-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits-grid-v2 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-card-v2 {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.benefit-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent, #667eea), var(--card-accent-end, #764ba2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.benefit-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.benefit-card-v2:hover::before {
  opacity: 1;
}

html.dark .benefit-card-v2:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.benefit-card-v2__number {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--card-accent, #667eea) 0%, var(--card-accent-end, #764ba2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.2;
  margin-bottom: 16px;
}

.benefit-card-v2__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--icon-bg-start, rgba(99, 102, 241, 0.1)) 0%, var(--icon-bg-end, rgba(118, 75, 162, 0.1)) 100%);
  color: var(--icon-color, #667eea);
}

.benefit-card-v2__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--marketing-text);
  margin: 0 0 12px;
  line-height: 1.3;
}

.benefit-card-v2__description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--marketing-text-secondary);
  margin: 0;
  flex: 1;
}

.benefit-card-v2__highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--marketing-primary);
}

.benefit-card-v2__highlight svg {
  width: 16px;
  height: 16px;
}

/* Benefits CTA */
.benefits-cta-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
  text-align: center;
}

.benefits-cta-v2__note {
  font-size: 0.875rem;
  color: var(--marketing-text-muted);
  margin: 0;
}

/* ==========================================================================
   Benefits Section - Task 7.1
   Requirements: 3.1, 3.2, 3.3, 3.4, 3.5
   ========================================================================== */

.benefits-section {
  background-color: var(--marketing-background);
}

/* Section Header */
.benefits-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--marketing-space-12);
}

.benefits-title {
  margin-bottom: var(--marketing-space-4);
}

.benefits-subtitle {
  color: var(--marketing-text-secondary);
  margin: 0;
}

/* Benefits Cards Grid (Requirement 3.3) */
.benefits-grid {
  gap: var(--marketing-space-6);
}

/* Benefit Card (Requirement 3.2) */
.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--marketing-space-6);
  background-color: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-xl);
  transition: transform var(--marketing-transition-base),
              box-shadow var(--marketing-transition-base),
              border-color var(--marketing-transition-base);
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--marketing-shadow-lg);
  border-color: var(--marketing-primary);
}

/* Benefit Card Icon (Requirement 3.2) */
.benefit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--marketing-space-4);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-radius: var(--marketing-radius-xl);
  color: var(--marketing-success);
}

.benefit-card__icon svg {
  width: 28px;
  height: 28px;
}

/* Benefit Card Title (Requirement 3.2) */
.benefit-card__title {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-lg);
  font-weight: var(--marketing-font-semibold);
  color: var(--marketing-text);
  margin: 0 0 var(--marketing-space-2);
  line-height: var(--marketing-leading-tight);
}

/* Benefit Card Description (Requirement 3.2) */
.benefit-card__description {
  font-size: var(--marketing-text-base);
  color: var(--marketing-text-secondary);
  line-height: var(--marketing-leading-relaxed);
  margin: 0;
}

/* Secondary CTA (Requirement 3.5) */
.benefits-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--marketing-space-12);
  text-align: center;
}

.benefits-cta__note {
  margin-top: var(--marketing-space-4);
  color: var(--marketing-text-muted);
  font-size: var(--marketing-text-sm);
}

/* ==========================================================================
   Benefits Section Responsive Breakpoints
   ========================================================================== */

/* Tablet (>= 640px) */
@media (min-width: 640px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-card__icon {
    width: 64px;
    height: 64px;
  }

  .benefit-card__icon svg {
    width: 32px;
    height: 32px;
  }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .benefits-header {
    margin-bottom: var(--marketing-space-16);
  }
}

/* ==========================================================================
   Benefits Section Dark Mode
   ========================================================================== */

html.dark .benefits-section {
  background-color: var(--marketing-background-alt);
}

html.dark .benefit-card {
  background-color: var(--marketing-surface);
}

html.dark .benefit-card__icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(16, 185, 129, 0.12) 100%);
}

/* ==========================================================================
   Features Section V2 - Bento Grid Layout
   ========================================================================== */

.features-section-v2 {
  padding: 100px 0;
  background: var(--marketing-background-alt);
}

html.dark .features-section-v2 {
  background: var(--marketing-background);
}

/* Bento Grid Layout */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }

  .bento-card--large {
    grid-column: span 1;
    grid-row: span 2;
  }

  .bento-card--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
  }

  .bento-card--large {
    grid-column: span 1;
    grid-row: span 2;
  }

  .bento-card--wide {
    grid-column: span 2;
  }

  .bento-card--medium {
    grid-column: span 1;
    grid-row: span 1;
  }

  .bento-card--small {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Bento Card Base */
.bento-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--marketing-surface);
  border: 1px solid var(--marketing-border);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-height: 200px;
}

/* Large card fills its 2-row space */
.bento-card--large {
  min-height: 420px;
  justify-content: space-between;
}

/* Wide card layout */
@media (min-width: 768px) {
  .bento-card--wide {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .bento-card--wide .bento-card__content {
    flex: 1;
  }

  .bento-card--wide .bento-card__visual {
    flex: 1;
    margin-top: 0;
    min-height: 120px;
  }
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--marketing-primary);
}

/* Dark mode bento cards */
html.dark .bento-card {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.dark .bento-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--marketing-primary);
}

/* Bento Card Content */
.bento-card__content {
  position: relative;
  z-index: 1;
}

.bento-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px;
  background: var(--bento-icon-bg, rgba(99, 102, 241, 0.1));
  color: var(--bento-icon-color, #667eea);
}

.bento-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--marketing-text);
  margin: 0 0 10px;
}

.bento-card__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--marketing-text-secondary);
  margin: 0;
}

.bento-card__features {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bento-card__features li {
  font-size: 0.875rem;
  color: var(--marketing-text-secondary);
  padding-left: 20px;
  position: relative;
}

.bento-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--bento-icon-color, #667eea);
  border-radius: 50%;
  opacity: 0.6;
}

/* Bento Card Visual */
.bento-card__visual {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 20px;
  min-height: 100px;
}

/* Color Variants */
.bento-card--purple {
  --bento-icon-bg: rgba(139, 92, 246, 0.1);
  --bento-icon-color: #8b5cf6;
}

.bento-card--blue {
  --bento-icon-bg: rgba(59, 130, 246, 0.1);
  --bento-icon-color: #3b82f6;
}

.bento-card--green {
  --bento-icon-bg: rgba(34, 197, 94, 0.1);
  --bento-icon-color: #22c55e;
}

.bento-card--orange {
  --bento-icon-bg: rgba(249, 115, 22, 0.1);
  --bento-icon-color: #f97316;
}

.bento-card--pink {
  --bento-icon-bg: rgba(236, 72, 153, 0.1);
  --bento-icon-color: #ec4899;
}

.bento-card--cyan {
  --bento-icon-bg: rgba(6, 182, 212, 0.1);
  --bento-icon-color: #06b6d4;
}

/* Dark mode color variants - increased opacity for visibility */
html.dark .bento-card--purple {
  --bento-icon-bg: rgba(139, 92, 246, 0.2);
  --bento-icon-color: #a78bfa;
}

html.dark .bento-card--blue {
  --bento-icon-bg: rgba(59, 130, 246, 0.2);
  --bento-icon-color: #60a5fa;
}

html.dark .bento-card--green {
  --bento-icon-bg: rgba(34, 197, 94, 0.2);
  --bento-icon-color: #4ade80;
}

html.dark .bento-card--orange {
  --bento-icon-bg: rgba(249, 115, 22, 0.2);
  --bento-icon-color: #fb923c;
}

html.dark .bento-card--pink {
  --bento-icon-bg: rgba(236, 72, 153, 0.2);
  --bento-icon-color: #f472b6;
}

html.dark .bento-card--cyan {
  --bento-icon-bg: rgba(6, 182, 212, 0.2);
  --bento-icon-color: #22d3ee;
}

/* Bento Visual - AI */
.bento-visual-ai {
  width: 100%;
  padding: 16px;
  background: var(--marketing-background-alt);
  border-radius: 12px;
}

.bento-ai-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--marketing-surface);
  border-radius: 8px;
  margin-bottom: 12px;
}

.bento-ai-cursor {
  width: 2px;
  height: 16px;
  background: var(--bento-icon-color);
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.bento-ai-text {
  font-size: 13px;
  color: var(--marketing-text-muted);
}

.bento-ai-output {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.bento-ai-line {
  height: 10px;
  background: linear-gradient(90deg, var(--bento-icon-color) 0%, transparent 100%);
  border-radius: 4px;
  opacity: 0.2;
  animation: expand 2s ease-in-out infinite;
}

.bento-ai-line--short {
  width: 60%;
}

@keyframes expand {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 100%; }
}

.bento-ai-sparkle {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--bento-icon-color);
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* Bento Visual - Research */
.bento-visual-research {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.bento-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--marketing-background-alt);
  border-radius: 8px;
  font-size: 12px;
  color: var(--marketing-text-secondary);
}

.bento-source-card--pending {
  opacity: 0.6;
}

.bento-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marketing-border);
}

.bento-source-dot--verified {
  background: #22c55e;
}

/* Bento Visual - Platforms */
.bento-visual-platforms {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.bento-platform-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marketing-background-alt);
  border-radius: 12px;
  color: var(--marketing-text-secondary);
  transition: all 0.3s ease;
}

.bento-card:hover .bento-platform-icon {
  transform: translateY(-4px);
}

.bento-card:hover .bento-platform-icon:nth-child(1) { color: #0077b5; }
.bento-card:hover .bento-platform-icon:nth-child(2) { color: var(--marketing-text); }
.bento-card:hover .bento-platform-icon:nth-child(3) { color: var(--marketing-text); }

/* Bento Visual - Chart */
.bento-visual-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
  width: 100%;
  padding: 16px;
  background: var(--marketing-background-alt);
  border-radius: 12px;
}

.bento-chart-bar {
  flex: 1;
  height: var(--bar-height, 50%);
  background: var(--bento-icon-color);
  border-radius: 4px 4px 0 0;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.bento-chart-bar--highlight {
  opacity: 1;
}

.bento-card:hover .bento-chart-bar {
  opacity: 0.5;
}

.bento-card:hover .bento-chart-bar--highlight {
  opacity: 1;
}

/* Dark mode visual elements */
html.dark .bento-visual-ai {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

html.dark .bento-ai-prompt {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

html.dark .bento-ai-line {
  opacity: 0.4;
}

html.dark .bento-source-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

html.dark .bento-platform-icon {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

html.dark .bento-visual-chart {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.3);
}

html.dark .bento-chart-bar {
  opacity: 0.5;
}

html.dark .bento-card:hover .bento-chart-bar {
  opacity: 0.7;
}

/* ==========================================================================
   Testimonials Section V2 - Modern card design with gradients
   ========================================================================== */

.testimonials-section-v2 {
  padding: var(--marketing-space-20) 0;
  background-color: var(--marketing-background);
  position: relative;
  overflow: hidden;
}

.testimonials-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--marketing-space-6);
  margin-top: var(--marketing-space-12);
}

@media (min-width: 768px) {
  .testimonials-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonials-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  .testimonial-card-v2--featured {
    grid-row: span 2;
  }
}

/* Testimonial Card V2 */
.testimonial-card-v2 {
  background: var(--marketing-surface);
  border: 1px solid var(--marketing-border);
  border-radius: var(--marketing-radius-2xl);
  padding: var(--marketing-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.testimonial-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--marketing-radius-2xl);
  padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

.testimonial-card-v2:hover::before {
  background: linear-gradient(135deg, var(--marketing-primary), var(--marketing-accent));
  opacity: 1;
}

html.dark .testimonial-card-v2:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Featured testimonial card */
.testimonial-card-v2--featured {
  padding: var(--marketing-space-8);
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.05) 0%,
    rgba(59, 130, 246, 0.05) 100%);
}

html.dark .testimonial-card-v2--featured {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.1) 100%);
}

.testimonial-card-v2--featured .testimonial-quote-v2 {
  font-size: var(--marketing-text-lg);
}

/* Star Rating */
.testimonial-rating {
  display: flex;
  gap: 2px;
  color: #fbbf24;
}

.testimonial-card-v2--featured .testimonial-rating svg {
  width: 20px;
  height: 20px;
}

/* Quote */
.testimonial-quote-v2 {
  font-size: var(--marketing-text-base);
  color: var(--marketing-text-secondary);
  line-height: var(--marketing-leading-relaxed);
  flex: 1;
  margin: 0;
  border: 0;
  padding: 0;
}

.testimonial-quote-v2 strong {
  color: var(--marketing-text);
  font-weight: var(--marketing-font-semibold);
}

/* Footer with avatar and info */
.testimonial-footer-v2 {
  display: flex;
  align-items: center;
  gap: var(--marketing-space-3);
  margin-top: auto;
  padding-top: var(--marketing-space-4);
  border-top: 1px solid var(--marketing-border);
}

/* Gradient Avatar */
.testimonial-avatar-v2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--avatar-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--marketing-font-bold);
  font-size: var(--marketing-text-sm);
  flex-shrink: 0;
}

/* Info container */
.testimonial-info-v2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-name-v2 {
  font-weight: var(--marketing-font-semibold);
  color: var(--marketing-text);
  font-style: normal;
  font-size: var(--marketing-text-base);
}

.testimonial-role-v2 {
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-muted);
}

.testimonial-metric-v2 {
  font-size: var(--marketing-text-xs);
  color: var(--marketing-primary);
  font-weight: var(--marketing-font-medium);
  margin-top: 2px;
}

/* ==========================================================================
   Final CTA Section V2 - Bold gradient background
   ========================================================================== */

/* ==========================================================================
   Final CTA Section - Vintage Newsroom Style
   Dark dramatic background matching the hero section
   ========================================================================== */
.final-cta-section-v2 {
  position: relative;
  padding: var(--marketing-space-24) 0;
  /* Dark newsroom background - matches hero section */
  background: linear-gradient(180deg,
    #2c1810 0%,
    #1a1918 30%,
    #0d0c0c 70%,
    #0d0c0c 100%);
  overflow: hidden;
}

/* Background orbs - Warm newsroom lighting */
.final-cta-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.final-cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
}

/* Warm desk lamp glow */
.final-cta-orb--1 {
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center,
    rgba(212, 166, 86, 0.4) 0%,
    rgba(139, 69, 19, 0.2) 50%,
    transparent 70%);
  top: -100px;
  right: 10%;
  animation: final-cta-float 12s ease-in-out infinite;
}

/* Secondary warm light */
.final-cta-orb--2 {
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse at center,
    rgba(196, 30, 58, 0.15) 0%,
    rgba(139, 0, 0, 0.1) 50%,
    transparent 70%);
  bottom: -100px;
  left: 5%;
  animation: final-cta-float 15s ease-in-out infinite reverse;
}

@keyframes final-cta-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(20px, -10px) scale(1.02);
    opacity: 0.4;
  }
}

/* Container */
.final-cta-container-v2 {
  position: relative;
  z-index: 1;
}

.final-cta-content-v2 {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

/* Headline - Classic newspaper banner style */
.final-cta-headline-v2 {
  font-family: var(--marketing-font-headline, var(--marketing-font-display));
  font-size: clamp(var(--marketing-text-3xl), 5vw, var(--marketing-text-5xl));
  font-weight: 900;
  color: #f5f0e6 !important; /* Cream on dark background */
  line-height: var(--marketing-leading-tight);
  margin-bottom: var(--marketing-space-6);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  -webkit-text-fill-color: #f5f0e6;
}

/* Accent text - Cardinal red highlight */
.final-cta-gradient-text {
  color: #c41e3a !important; /* Cardinal red */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #c41e3a !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

/* Supporting text - Warm muted cream */
.final-cta-text-v2 {
  font-family: var(--marketing-font-body);
  font-size: var(--marketing-text-lg);
  color: #d4cfc2 !important; /* Warm muted cream */
  line-height: var(--marketing-leading-relaxed);
  margin-bottom: var(--marketing-space-8);
  font-style: italic;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  -webkit-text-fill-color: #d4cfc2;
}

/* CTA Buttons */
.final-cta-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-4);
  align-items: center;
  margin-bottom: var(--marketing-space-8);
}

@media (min-width: 640px) {
  .final-cta-actions-v2 {
    flex-direction: row;
    justify-content: center;
  }
}

/* Primary CTA Button - Bold newsroom style */
.final-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--marketing-space-2);
  padding: var(--marketing-space-4) var(--marketing-space-8);
  background: #c41e3a; /* Cardinal red */
  color: #ffffff !important;
  font-family: var(--marketing-font-sans);
  font-weight: 800;
  font-size: var(--marketing-text-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0; /* Sharp corners - vintage style */
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  -webkit-text-fill-color: #ffffff;
}

.final-cta-btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
  background: #a01830;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.final-cta-btn-primary svg {
  transition: transform 0.2s ease;
}

.final-cta-btn-primary:hover svg {
  transform: translateX(4px);
}

/* Secondary CTA Button - Outlined vintage style */
.final-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--marketing-space-2);
  padding: var(--marketing-space-4) var(--marketing-space-8);
  background: transparent;
  color: #f5f0e6 !important; /* Cream text */
  font-family: var(--marketing-font-sans);
  font-weight: 700;
  font-size: var(--marketing-text-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0; /* Sharp corners */
  border: 2px solid #f5f0e6;
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-text-fill-color: #f5f0e6;
}

.final-cta-btn-secondary:hover {
  background: #f5f0e6;
  color: #1a1a1a !important;
  border-color: #f5f0e6;
  -webkit-text-fill-color: #1a1a1a;
}

/* Trust signals - Vintage style */
.final-cta-trust-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
  align-items: center;
}

@media (min-width: 640px) {
  .final-cta-trust-v2 {
    flex-direction: row;
    justify-content: center;
    gap: var(--marketing-space-6);
  }
}

.final-cta-trust-item {
  display: flex;
  align-items: center;
  gap: var(--marketing-space-2);
  color: #a09a8c !important; /* Muted warm gray */
  font-size: var(--marketing-text-sm);
  font-family: var(--marketing-font-sans);
  -webkit-text-fill-color: #a09a8c;
}

.final-cta-trust-item svg {
  color: #2d5a27; /* Forest green - vintage success */
}

/* ==========================================================================
   Features Section (Task 8.1)
   Requirements: 4.1, 4.2, 4.3, 4.4, 4.5
   ========================================================================== */

.features-section {
  background-color: var(--marketing-background);
}

.features-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--marketing-space-12);
}

.features-title {
  color: var(--marketing-text);
  margin-bottom: var(--marketing-space-4);
}

.features-subtitle {
  color: var(--marketing-text-secondary);
}

/* Features List - Container for all feature blocks */
.features-list {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-16);
}

/* ==========================================================================
   Feature Block - Individual feature with alternating layout
   ========================================================================== */

.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--marketing-space-8);
  align-items: center;
}

.feature-block__content {
  order: 1;
}

.feature-block__visual {
  order: 2;
}

/* Feature Block Content */
.feature-block__title {
  font-family: var(--marketing-font-display);
  font-size: clamp(var(--marketing-text-2xl), 3vw, var(--marketing-text-3xl));
  font-weight: var(--marketing-font-bold);
  color: var(--marketing-text);
  margin-bottom: var(--marketing-space-4);
  line-height: var(--marketing-leading-tight);
}

.feature-block__description {
  font-size: var(--marketing-text-lg);
  color: var(--marketing-text-secondary);
  line-height: var(--marketing-leading-relaxed);
  margin-bottom: var(--marketing-space-6);
}

/* Feature Capabilities List (Requirement 4.4) */
.feature-block__capabilities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-3);
}

.feature-block__capabilities li {
  display: flex;
  align-items: flex-start;
  gap: var(--marketing-space-3);
  color: var(--marketing-text-secondary);
  font-size: var(--marketing-text-base);
  line-height: var(--marketing-leading-relaxed);
}

.feature-block__capabilities li svg {
  flex-shrink: 0;
  color: var(--marketing-primary);
  margin-top: 0.25rem;
}

/* Feature Visual Area (Requirement 4.2) */
.feature-block__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual-placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--marketing-background-alt) 0%, var(--marketing-surface) 100%);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--marketing-space-6);
}

.feature-visual-mockup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--marketing-space-4);
}

/* Feature Mockup Elements */
.feature-mockup-sparkle,
.feature-mockup-icon {
  color: var(--marketing-primary);
  opacity: 0.8;
}

.feature-mockup-lines {
  display: flex;
  flex-direction: column;
  gap: var(--marketing-space-2);
  width: 80%;
}

.feature-mockup-line {
  height: 8px;
  background: var(--marketing-border);
  border-radius: var(--marketing-radius-sm);
  opacity: 0.6;
}

.feature-mockup-line--long {
  width: 100%;
}

.feature-mockup-line--medium {
  width: 75%;
}

.feature-mockup-line--short {
  width: 50%;
}

/* Research mockup cards */
.feature-mockup-cards {
  display: flex;
  gap: var(--marketing-space-2);
}

.feature-mockup-card {
  width: 40px;
  height: 50px;
  background: var(--marketing-border-light);
  border-radius: var(--marketing-radius-md);
  border: 1px solid var(--marketing-border);
}

.feature-mockup-card--verified {
  border-color: var(--marketing-primary);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

/* Publishing mockup platforms */
.feature-mockup-platforms {
  display: flex;
  gap: var(--marketing-space-4);
  margin-bottom: var(--marketing-space-4);
}

.feature-mockup-platform {
  width: 48px;
  height: 48px;
  background: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marketing-text-secondary);
}

.feature-mockup-arrow {
  color: var(--marketing-primary);
}

/* Analytics mockup chart */
.feature-mockup-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--marketing-space-2);
  height: 80px;
  margin-bottom: var(--marketing-space-2);
}

.feature-mockup-bar {
  width: 16px;
  background: linear-gradient(to top, var(--marketing-primary) 0%, rgba(34, 197, 94, 0.6) 100%);
  border-radius: var(--marketing-radius-sm) var(--marketing-radius-sm) 0 0;
}

.feature-mockup-bar--short {
  height: 30%;
}

.feature-mockup-bar--medium {
  height: 50%;
}

.feature-mockup-bar--tall {
  height: 75%;
}

.feature-mockup-bar--taller {
  height: 90%;
}

.feature-mockup-trend {
  color: var(--marketing-primary);
}

/* ==========================================================================
   Features Section Responsive Breakpoints
   ========================================================================== */

/* Tablet breakpoint (>= 640px) */
@media (min-width: 640px) {
  .feature-visual-placeholder {
    max-width: 350px;
  }

  .feature-block__capabilities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--marketing-space-3) var(--marketing-space-6);
  }
}

/* Desktop breakpoint (>= 1024px) - Alternating layouts */
@media (min-width: 1024px) {
  .features-header {
    margin-bottom: var(--marketing-space-16);
  }

  .features-list {
    gap: var(--marketing-space-20);
  }

  .feature-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--marketing-space-12);
  }

  /* Requirement 4.3: Alternating layout pattern */
  /* Left layout: content left, visual right (default) */
  .feature-block--left .feature-block__content {
    order: 1;
  }

  .feature-block--left .feature-block__visual {
    order: 2;
  }

  /* Right layout: visual left, content right */
  .feature-block--right .feature-block__content {
    order: 2;
  }

  .feature-block--right .feature-block__visual {
    order: 1;
  }

  .feature-visual-placeholder {
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  .feature-block__capabilities {
    grid-template-columns: 1fr;
  }
}

/* Large desktop (>= 1280px) */
@media (min-width: 1280px) {
  .feature-block {
    gap: var(--marketing-space-16);
  }

  .feature-block__capabilities {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Features Section Dark Mode
   ========================================================================== */

html.dark .features-section {
  background-color: var(--marketing-background);
}

html.dark .feature-visual-placeholder {
  background: linear-gradient(135deg, var(--marketing-surface) 0%, var(--marketing-background-alt) 100%);
  border-color: var(--marketing-border);
}

html.dark .feature-mockup-card {
  background: var(--marketing-background-alt);
  border-color: var(--marketing-border);
}

html.dark .feature-mockup-card--verified {
  border-color: var(--marketing-primary);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
}

html.dark .feature-mockup-platform {
  background: var(--marketing-background-alt);
  border-color: var(--marketing-border);
}

/* ==========================================================================
   Testimonials Section (Task 9.1)
   Requirements: 5.1, 5.2, 5.3, 5.4, 5.5
   ========================================================================== */

.testimonials-section {
  background-color: var(--marketing-background-alt);
}

/* Testimonials Header */
.testimonials-header {
  text-align: center;
  margin-bottom: var(--marketing-spacing-xl);
}

.testimonials-title {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-3xl);
  font-weight: var(--marketing-font-bold);
  color: var(--marketing-text-primary);
  margin: 0 0 var(--marketing-spacing-md) 0;
  line-height: var(--marketing-leading-tight);
}

.testimonials-subtitle {
  font-size: var(--marketing-text-lg);
  color: var(--marketing-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--marketing-leading-relaxed);
}

/* Testimonials Grid */
.testimonials-grid {
  gap: var(--marketing-spacing-lg);
}

/* Testimonial Card (Requirement 5.3) */
.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--marketing-spacing-lg);
  background-color: var(--marketing-surface);
  border: 1px solid var(--marketing-border-light);
  border-radius: var(--marketing-radius-xl);
  transition: transform var(--marketing-transition-base),
              box-shadow var(--marketing-transition-base),
              border-color var(--marketing-transition-base);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--marketing-shadow-lg);
  border-color: var(--marketing-primary);
}

/* Testimonial Content */
.testimonial-card__content {
  flex: 1;
  margin-bottom: var(--marketing-spacing-lg);
}

/* Decorative Quote Mark */
.testimonial-card__quote-mark {
  display: block;
  color: var(--marketing-primary);
  opacity: 0.3;
  margin-bottom: var(--marketing-spacing-sm);
}

.testimonial-card__quote-mark svg {
  width: 32px;
  height: 32px;
}

/* Quote Text (Requirement 5.2) */
.testimonial-card__quote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.testimonial-card__quote p {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-base);
  color: var(--marketing-text-primary);
  line-height: var(--marketing-leading-relaxed);
  margin: 0;
  font-style: normal;
}

/* Attribution Footer (Requirement 5.2) */
.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--marketing-spacing-md);
  padding-top: var(--marketing-spacing-md);
  border-top: 1px solid var(--marketing-border-light);
}

/* Avatar Placeholder */
.testimonial-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--marketing-primary) 0%, var(--marketing-accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.testimonial-card__avatar-placeholder {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-sm);
  font-weight: var(--marketing-font-semibold);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Attribution Text */
.testimonial-card__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-base);
  font-weight: var(--marketing-font-semibold);
  color: var(--marketing-text-primary);
  font-style: normal;
}

.testimonial-card__role {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-text-sm);
  color: var(--marketing-text-tertiary);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .testimonials-section {
    padding: var(--marketing-spacing-xl) var(--marketing-spacing-md);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--marketing-spacing-md);
  }

  .testimonials-title {
    font-size: var(--marketing-text-2xl);
  }

  .testimonial-card {
    padding: var(--marketing-spacing-md);
  }

  .testimonial-card__quote-mark svg {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   Testimonials Section Dark Mode
   ========================================================================== */

html.dark .testimonials-section {
  background-color: var(--marketing-background);
}

html.dark .testimonial-card {
  background-color: var(--marketing-surface);
  border-color: var(--marketing-border);
}

html.dark .testimonial-card:hover {
  border-color: var(--marketing-primary);
  box-shadow: var(--marketing-shadow-lg);
}

html.dark .testimonial-card__footer {
  border-top-color: var(--marketing-border);
}

html.dark .testimonial-card__quote-mark {
  opacity: 0.4;
}

/* ==========================================================================
   Auth Form Styles (Shared by Waitlist, Login, Password Reset)
   Task 2.2: Signup form view and success page styling
   Requirements: 1.1, 1.3, 4.1, 4.2, 4.3, 4.4, 4.5
   ========================================================================== */

/* Auth Form Container */
.waitlist-signup,
.auth-form {
  max-width: 32rem;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.waitlist-signup h1,
.auth-form h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  line-height: var(--line-height-tight);
  text-align: center;
}

.waitlist-signup > p,
.auth-form > p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-8);
  text-align: center;
  line-height: var(--line-height-relaxed);
}

/* Auth Form Inner */
.waitlist-form,
.auth-form-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Flash Messages */
.waitlist-signup .flash,
.auth-form .flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.waitlist-signup .flash--notice,
.auth-form .flash--notice {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border: 1px solid var(--color-info);
}

.waitlist-signup .flash--alert,
.auth-form .flash--alert {
  background-color: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* Form Errors Block */
.waitlist-form .form-errors,
.auth-form-inner .form-errors {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.waitlist-form .form-errors h2,
.auth-form-inner .form-errors h2 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
  margin: 0 0 var(--space-2);
}

.waitlist-form .form-errors ul,
.auth-form-inner .form-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}

.waitlist-form .form-errors li,
.auth-form-inner .form-errors li {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-bottom: var(--space-1);
}

/* Form Field Group */
.waitlist-form .form-field,
.auth-form-inner .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.waitlist-form .form-field label,
.auth-form-inner .form-field label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.waitlist-form .form-field input[type="text"],
.waitlist-form .form-field input[type="email"],
.auth-form-inner .form-field input[type="text"],
.auth-form-inner .form-field input[type="email"],
.auth-form-inner .form-field input[type="password"] {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.waitlist-form .form-field input[type="text"]:focus,
.waitlist-form .form-field input[type="email"]:focus,
.auth-form-inner .form-field input[type="text"]:focus,
.auth-form-inner .form-field input[type="email"]:focus,
.auth-form-inner .form-field input[type="password"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.waitlist-form .form-field input[type="text"]::placeholder,
.waitlist-form .form-field input[type="email"]::placeholder,
.auth-form-inner .form-field input[type="text"]::placeholder,
.auth-form-inner .form-field input[type="email"]::placeholder,
.auth-form-inner .form-field input[type="password"]::placeholder {
  color: var(--color-text-muted);
}

/* Inline Field Error */
.waitlist-form .field-error,
.auth-form-inner .field-error {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Form Actions */
.waitlist-form .form-actions,
.auth-form-inner .form-actions {
  margin-top: var(--space-2);
}

.waitlist-form .form-actions input[type="submit"],
.auth-form-inner .form-actions input[type="submit"] {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: white;
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.waitlist-form .form-actions input[type="submit"]:hover,
.auth-form-inner .form-actions input[type="submit"]:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
}

.waitlist-form .form-actions input[type="submit"]:active,
.auth-form-inner .form-actions input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inset);
}

.waitlist-form .form-actions input[type="submit"]:focus-visible,
.auth-form-inner .form-actions input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* Auth Note / Privacy Note */
.waitlist-signup .waitlist-note,
.auth-form .auth-note {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-6);
}

.auth-form .auth-note a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.auth-form .auth-note a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Waitlist Success Page Styles
   Requirements: 4.2, 4.3, 4.4, 4.5
   ========================================================================== */

/* Success Container */
.waitlist-success {
  max-width: 36rem;
  margin: var(--space-12) auto;
  padding: var(--space-10);
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.waitlist-success h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-tight);
}

/* Success Tagline - High demand message (Req 4.2) */
.waitlist-success .success-tagline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-relaxed);
  padding: var(--space-4);
  background-color: var(--color-success-light);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-success);
}

.waitlist-success .success-tagline strong {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

/* Success Message - Added to waitlist (Req 4.3) */
.waitlist-success .success-message {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

/* Next Steps - Onboarding expectation (Req 4.4) */
.waitlist-success .success-next-steps {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-relaxed);
}

/* Email Notice - Check inbox (Req 4.5) */
.waitlist-success .success-email-notice {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  padding: var(--space-4);
  background-color: var(--color-info-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-info);
}

.waitlist-success .success-email-notice strong {
  color: var(--color-info);
}

/* Success Actions */
.waitlist-success .success-actions {
  margin-top: var(--space-4);
}

.waitlist-success .success-actions .btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-btn);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.waitlist-success .success-actions .btn--secondary:hover {
  background-color: var(--color-gray-900);
  color: var(--color-text-inverse);
  border-color: var(--color-gray-900);
}

.waitlist-success .success-actions .btn--secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset), var(--focus-ring);
}

/* ==========================================================================
   Auth Forms Responsive Styles
   ========================================================================== */

@media (max-width: 640px) {
  .waitlist-signup,
  .auth-form {
    margin: var(--space-6) var(--space-4);
    padding: var(--space-6);
  }

  .waitlist-signup h1,
  .auth-form h1 {
    font-size: var(--font-size-2xl);
  }

  .waitlist-signup > p,
  .auth-form > p {
    font-size: var(--font-size-base);
  }

  .waitlist-success {
    margin: var(--space-6) var(--space-4);
    padding: var(--space-6);
  }

  .waitlist-success h1 {
    font-size: var(--font-size-3xl);
  }
}

/* ==========================================================================
   Daily Curation Widget (Task 8.1)
   Requirements: 4.5, 4.6 - Display daily curated ideas with selection date,
   score, and source count for each curated idea
   ========================================================================== */

.daily-curation-widget {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Widget Header */
.daily-curation-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.daily-curation-widget__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.daily-curation-widget__timestamp {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Widget Content */
.daily-curation-widget__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Ideas List */
.daily-curation-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.daily-curation-widget__idea {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.daily-curation-widget__idea:hover {
  border-color: var(--color-primary);
}

/* Curated Badge */
.daily-curation-widget__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
  background-color: var(--color-success-light);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Idea Title */
.daily-curation-widget__idea-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.daily-curation-widget__idea-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.daily-curation-widget__idea-title a:hover {
  color: var(--color-primary);
}

/* Idea Metadata */
.daily-curation-widget__idea-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.daily-curation-widget__score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.daily-curation-widget__sources {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Note about available ideas */
.daily-curation-widget__note {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

/* Empty State */
.daily-curation-widget__empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.daily-curation-widget__empty p {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.daily-curation-widget__empty-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* Responsive Styles */
@media (max-width: 640px) {
  .daily-curation-widget {
    padding: var(--space-3);
  }

  .daily-curation-widget__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .daily-curation-widget__idea-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   Task 9.1: Feedback UI Components
   Requirements: 7.1 - UI controls for rating idea quality
   ========================================================================== */

/* Feedback Section Container */
.idea-feedback-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.feedback-section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.feedback-section-description {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

/* Feedback Form */
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Rating Fieldset */
.feedback-rating {
  border: none;
  padding: 0;
  margin: 0;
}

.feedback-rating-label {
  display: block;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.feedback-rating-description {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

/* Rating Controls - Radio Button Group */
.feedback-rating-controls {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.feedback-rating-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.feedback-rating-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-rating-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-gray-100);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.feedback-rating-input:checked + .feedback-rating-value {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.feedback-rating-input:focus-visible + .feedback-rating-value {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.feedback-rating-option:hover .feedback-rating-value {
  border-color: var(--color-primary);
  background-color: var(--color-gray-50);
}

.feedback-rating-input:checked + .feedback-rating-value:hover {
  background-color: var(--color-primary-dark);
}

/* Rating Scale Labels */
.feedback-rating-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.scale-low,
.scale-high {
  opacity: 0.8;
}

/* Feedback Field (Notes, AI-tells) */
.feedback-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feedback-field-label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.feedback-field-description {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* AI-Tells Input */
.ai-tells-input {
  margin-top: var(--space-2);
}

.ai-tells-text-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast);
}

.ai-tells-text-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(66, 135, 245, 0.1);
}

.ai-tells-text-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Notes Textarea */
.feedback-notes-input {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--transition-fast);
}

.feedback-notes-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(66, 135, 245, 0.1);
}

/* Feedback Actions */
.feedback-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-2);
}

.feedback-submit-btn {
  min-width: 160px;
}

/* Feedback Error Message */
.feedback-error {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger-dark);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* Feedback Success State */
.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
}

.feedback-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-success-light);
  border-radius: var(--radius-full);
  color: var(--color-success);
  margin-bottom: var(--space-3);
}

.feedback-success-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.feedback-success-message {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Feedback Already Submitted State */
.feedback-already-submitted {
  background-color: var(--color-gray-50);
}

.feedback-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
}

.feedback-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-info-light);
  border-radius: var(--radius-full);
  color: var(--color-info);
  margin-bottom: var(--space-3);
}

.feedback-notice-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.feedback-notice-message {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Previous Feedback Display */
.feedback-previous-ratings {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: left;
  width: 100%;
}

.feedback-previous-title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.feedback-ratings-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.feedback-ratings-list li {
  padding: var(--space-1) 0;
}

.feedback-previous-notes {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* Disabled Form State */
.feedback-form--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive Styles */
@media (max-width: 640px) {
  .idea-feedback-section {
    padding: var(--space-4);
  }

  .feedback-rating-controls {
    gap: var(--space-1);
  }

  .feedback-rating-value {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  .feedback-actions {
    flex-direction: column;
  }

  .feedback-submit-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Task 11.5: Skeleton Loading State Component
   Requirement: 9.8 - Display skeleton placeholders during progressive loading
   ========================================================================== */

/* Skeleton Container */
.patterns-skeleton {
  width: 100%;
}

.patterns-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Skeleton Card - Matches pattern-card dimensions */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.skeleton-card--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Skeleton Pulse Animation */
.skeleton-pulse {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Skeleton Icon - Matches pattern-card-icon */
.skeleton-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Skeleton Header - Matches pattern-card-header */
.skeleton-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-badge {
  width: 60px;
  height: 20px;
  border-radius: var(--radius-full);
}

.skeleton-title {
  width: 80%;
  height: 18px;
  border-radius: var(--radius-sm);
}

/* Skeleton Description */
.skeleton-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
}

.skeleton-line:first-child {
  width: 100%;
}

.skeleton-line--short {
  width: 60%;
}

/* Skeleton Footer - Matches pattern-card-footer */
.skeleton-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-2);
}

.skeleton-meta {
  width: 80px;
  height: 14px;
  border-radius: var(--radius-sm);
}

/* Skeleton Hiding Animation */
.patterns-skeleton--hiding {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Content Reveal Animation */
.patterns-content--visible {
  animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Task 11.7: Cluster Drill-down Styles
   Requirement: 4.4 - Cluster drill-down with Turbo Frame
   ========================================================================== */

/* Cluster Children Container */
.cluster-children {
  padding: var(--space-2);
}

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

/* Cluster Child Item */
.cluster-child-item {
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cluster-child-item:hover {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-sm);
}

/* Cluster Child Header */
.cluster-child-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cluster-child-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quality Badge */
.cluster-child-quality {
  flex-shrink: 0;
}

.quality-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.quality-badge--high {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.quality-badge--medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.quality-badge--low {
  background-color: var(--color-gray-100);
  color: var(--color-text-muted);
}

/* Cluster Child Description */
.cluster-child-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-2) 0;
}

/* Cluster Child Meta */
.cluster-child-meta {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.cluster-child-type {
  text-transform: capitalize;
}

/* Cluster Child Link */
.cluster-child-link {
  display: inline-flex;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cluster-child-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Cluster Children Empty State */
.cluster-children-empty {
  padding: var(--space-4);
  text-align: center;
}

/* Cluster Children Pagination */
.cluster-children-pagination {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

/* Progressive Loading More Button */
.patterns-loading-more {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
}

.btn-load-more {
  min-width: 120px;
}

.patterns-end {
  padding: var(--space-4);
  text-align: center;
}

.patterns-more-results {
  display: contents;
}