/*
 * PRESS PLAY — INSTRUMENT PAPER
 * JarganApiDemo Operations Console
 *
 * Design System: Monochrome industrial interface
 * Inspired by: Bloomberg Terminal, Apollo mission control, e-ink displays
 *
 * Core Principles:
 * - Paper First: Works in pure black and white
 * - 95% Neutral Tones: Monochrome grayscale palette
 * - Color is Signal: Color only for alerts, selection, state changes
 * - Typography as Structure: Size, weight, spacing create hierarchy
 * - Lines Over Surfaces: Rules, dividers, grids instead of filled panels
 * - Calm Density: High information density without chaos
 * - Tool Not Product: Feels like operating an instrument
 * - Theme Independent: Works identically in light and dark
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* ========== MONOCHROME BASE (95% of UI) ========== */
  /* Higher contrast - deeper blacks per user request */
  --ip-black: #000000;           /* Pure black for text */
  --ip-gray-900: #0d0d0d;        /* Darker gray (deeper black) */
  --ip-gray-800: #1a1a1a;        /* Darker than before */
  --ip-gray-700: #2d2d2d;        /* Dark gray */
  --ip-gray-600: #4d4d4d;        /* Mid-dark gray (higher contrast) */
  --ip-gray-500: #666666;        /* Mid gray */
  --ip-gray-400: #999999;
  --ip-gray-300: #cccccc;
  --ip-gray-200: #e0e0e0;
  --ip-gray-100: #f0f0f0;
  --ip-gray-50: #f8f8f8;
  --ip-white: #ffffff;           /* Pure white for background */

  /* ========== SIGNAL COLORS - USER'S PALETTE ========== */
  /* ["#9d4edd","#ff6d07","#646e3a","#000000","#ffffff"] */
  --ip-signal-alert: #cc0000;    /* Red for errors/critical */
  --ip-signal-warn: #ff6d07;     /* Orange (user's color) */
  --ip-signal-active: #9d4edd;   /* Purple (user's color) for selection/active */
  --ip-signal-success: #646e3a;  /* Olive/green (user's color) for success */

  /* ========== SEMANTIC MAPPING ========== */
  /* Backgrounds */
  --bg-primary: var(--ip-white);
  --bg-secondary: var(--ip-gray-50);
  --bg-tertiary: var(--ip-gray-100);
  --bg-input: var(--ip-white);
  --bg-hover: var(--ip-gray-50);
  --bg-active: var(--ip-black);

  /* Text */
  --text-primary: var(--ip-black);
  --text-secondary: var(--ip-gray-600);
  --text-muted: var(--ip-gray-400);

  /* Borders */
  --border-default: var(--ip-gray-300);
  --border-heavy: var(--ip-gray-700);

  /* Accent Colors (mapped to signal colors - LAW 3) */
  --accent-primary: var(--ip-signal-active);    /* Blue for selections */
  --accent-secondary: var(--ip-signal-success); /* Green for secondary */
  --accent-jargan: var(--ip-signal-active);     /* Blue for brand */

  /* Status Colors (mapped to signal colors - LAW 3) */
  --success: var(--ip-signal-success);  /* Green */
  --warning: var(--ip-signal-warn);     /* Orange */
  --error: var(--ip-signal-alert);      /* Red */

  /* Platform Colors - Monochrome (no decorative color) */
  --instagram: var(--ip-gray-600);
  --facebook: var(--ip-gray-600);

  /* Chart Colors - Grayscale only */
  --chart-1: var(--ip-gray-900);  /* Near black */
  --chart-2: var(--ip-gray-700);  /* Dark gray */
  --chart-3: var(--ip-gray-500);  /* Mid gray */
  --chart-4: var(--ip-gray-300);  /* Light gray */

  /* ========== TYPOGRAPHY SYSTEM (LAW 4) ========== */
  /* Industrial Typewriter Aesthetic */
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
               'Roboto Mono', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;

  /* Type Scale - Hierarchy via Size Only */
  --text-xs: 9px;    /* Fine print, timestamps */
  --text-sm: 11px;   /* Labels, secondary info */
  --text-base: 13px; /* Body text, form inputs */
  --text-md: 15px;   /* Subheadings */
  --text-lg: 18px;   /* Section headers */
  --text-xl: 24px;   /* Page titles */

  /* Weights - Minimal Variation */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Line Heights - Tight, Dense */
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ========== SPACING SYSTEM (LAW 8 - Calm Density) ========== */
  /* Grid-Based Spacing - 8px base for better alignment */
  --space-unit: 8px;
  --space-0: 0;
  --space-1: 8px;   /* 1 unit - tight */
  --space-2: 16px;  /* 2 units - comfortable */
  --space-3: 24px;  /* 3 units - section spacing */
  --space-4: 32px;  /* 4 units - major sections */
  --space-6: 48px;  /* 6 units - large gaps */
  --space-8: 64px;  /* 8 units - page sections */

  /* ========== LINE WEIGHTS (LAW 5 - Lines Over Surfaces) ========== */
  /* Border System */
  --line-hairline: 1px;  /* Fine rules, subtle dividers */
  --line-normal: 2px;    /* Standard borders */
  --line-heavy: 3px;     /* Emphasis, headers */
  --line-bold: 4px;      /* Active states */
}

/* ========== DARK MODE - toggled via DevTools drawer ========== */
[data-theme="dark"] {
  --bg-primary: var(--ip-black);
  --bg-secondary: var(--ip-gray-900);
  --bg-tertiary: var(--ip-gray-800);
  --bg-input: var(--ip-gray-900);
  --bg-hover: var(--ip-gray-900);
  --bg-active: var(--ip-white);

  --text-primary: var(--ip-white);
  --text-secondary: var(--ip-gray-400);
  --text-muted: var(--ip-gray-600);

  --border-default: var(--ip-gray-700);
  --border-heavy: var(--ip-gray-300);

  --accent-primary: var(--ip-signal-active);  /* Purple stays */
  --accent-jargan: var(--ip-signal-active);
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

/* Universal Reset - Remove All Decorative Elements */
* {
  box-shadow: none !important;      /* LAW 5: No shadows */
  text-shadow: none !important;     /* LAW 5: No shadows */
  border-radius: 0 !important;      /* LAW 9: Sharp corners (industrial) */
  transition: none !important;      /* LAW 7: No smooth animations */
}

/* Exception: State Changes (Instant Feedback) */
.state-change {
  transition: background-color 50ms linear !important,
              color 50ms linear !important;
}

/* Base HTML Elements */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* ============================================================
   LAYOUT STRUCTURE
   ============================================================ */

/* App Container */
.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
  background: var(--bg-primary);
}

/* Overlay (when pack detail open) */
.app-container.overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ip-black);
  opacity: 0.3;
  z-index: 50;
}

/* Main Content (Left Sidebar) - LAW 8: Calm Density */
.main-content {
  /* SP-126: Use flex: 1 instead of width: 100% to fill remaining space in flex row */
  box-sizing: border-box;  /* SP-060: include border-right in width so children don't overflow */
  background: var(--bg-primary);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;  /* Prevent horizontal scroll */
  flex: 1;  /* Fill available space in parent flex container */
  min-width: 0;  /* Allow flex item to shrink below content size */
  scrollbar-gutter: stable;  /* Reserve space for scrollbar to prevent layout shift */
  display: flex;
  flex-direction: column;  /* Stack sections vertically */
}

/* Hide scrollbar when content fits */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--border-heavy);
}

/* Form Sections */
.form-section {
  padding: 12px;  /* Reduced from 16px to fit on standard monitors without scroll */
  border-bottom: var(--line-hairline) solid var(--border-default);
}

.section-label {
  /* SP-265: bumped to 14px/text-primary so the section header sits clearly
     above the 12px goal names and domain buttons it introduces. */
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: block;
}

/* Results Panel (Right Side) */

/* ============================================================
   COMPONENT STYLES (Preserving all 582 CSS classes)
   ============================================================ */


/* ============================================================
   UNICODE/ASCII ICON REPLACEMENTS
   ============================================================ */
/* Lucide icons enabled - all display rules removed */

/* Smart mode sparkles - shown inline before text */
.mode-btn[data-mode="smart"]::before {
  content: '✦ ';
  margin-right: 4px;
  font-size: 14px;
}

/* Hide <i> tags once Lucide replaces them with SVG */
i[data-lucide] {
  display: none !important;
}

/* Ensure SVG icons from Lucide are visible */
svg.lucide {
  display: inline-block !important;
}

/* Chevron arrows for navigation and toggles - fallback only */
i[data-lucide="chevron-down"]::before { content: '∨'; display: inline-block; font-size: 14px; }
i[data-lucide="chevron-up"]::before { content: '∧'; display: inline-block; font-size: 14px; }
i[data-lucide="chevron-left"]::before { content: '‹'; display: inline-block; font-size: 16px; }
i[data-lucide="chevron-right"]::before { content: '›'; display: inline-block; font-size: 16px; }

/* Close buttons - prominent X symbol */
i[data-lucide="x"]::before {
  content: '×';
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

/* Menu/hamburger icon */
i[data-lucide="menu"]::before {
  content: '≡';
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
}

/* Theme toggle icons */
i[data-lucide="sun"]::before { content: '☀'; display: inline-block; font-size: 16px; }
i[data-lucide="moon"]::before { content: '☾'; display: inline-block; font-size: 16px; }

/* Code/braces for JSON viewer */
i[data-lucide="braces"]::before {
  content: '{}';
  display: inline-block;
  font-family: monospace;
  font-size: 14px;
}

/* List icon for tab navigation */
i[data-lucide="list"]::before { content: '☰'; display: inline-block; font-size: 16px; }

/* Calendar icon */
i[data-lucide="calendar"]::before { content: '⬚'; display: inline-block; font-size: 16px; }

/* Clipboard icon for copy button */
i[data-lucide="clipboard"]::before {
  content: '⎘';
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

/* Bar chart icon */
i[data-lucide="bar-chart-2"]::before {
  content: '▬';
  display: inline-block;
  font-size: 16px;
}

.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Draggable title bar area — Electron only
   In web browsers this blocks click events on toolbar buttons.
   Only apply when running inside Electron (navigator.userAgent contains 'Electron'). */
.app-container.electron-app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  -webkit-app-region: drag;
  z-index: 50;
}

.app {
  width: 30%;
  min-width: 280px;
  max-width: 60vw;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  padding: 12px clamp(10px, 2vw, 24px);
  padding-top: 8px; /* Minimal top padding in web SPA */
  overflow: visible; /* No scroll */
  height: 100vh; /* Full viewport height */
  box-sizing: border-box;
}

/* SP-016c: Sidebar resize handle */
.sidebar-resize-handle {
  width: 5px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--accent-primary, #000);
}

/* ============================================
   Header
   ============================================ */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  -webkit-app-region: drag;
  position: relative;
  /* SP-331 raise account dropdown above sidebar loader: header needs to beat
     .sidebar-splash (z-index:100 in splash.css) so the account/BADMIN dropdown
     (z-index:1000 in auth-modal.css, but scoped to this header's stacking context)
     paints over the in-sidebar 3-dot loader. 200 stays well below modals (10000+),
     hero splash (9999), and tour overlays (9998). Supersedes SP-061's value of 20. */
  z-index: 200;
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 16px;
  font-weight: 600;
  overflow: visible;
  -webkit-app-region: no-drag;
}

.logo {
  color: var(--text-primary);
  font-weight: 700; /* Ensure strong visibility */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jargan-lockup {
  height: 18px;
  width: auto;
  flex-shrink: 0;
  overflow: visible;
}

.logo {
  display: inline-flex;
  flex-shrink: 0;
  overflow: visible;
}

.header-center {
  -webkit-app-region: no-drag;
}

/* Desktop: hide header-center (connection status moved to results panel via JS) */
@media (min-width: 769px) {
  .header-center {
    display: none;
  }
}

/* Mobile: center between logo and account */
@media (max-width: 768px) {
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.header-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  -webkit-app-region: no-drag;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Desktop connection status in results header */
.desktop-connection-status {
  display: none;
}
@media (min-width: 769px) {
  .desktop-connection-status {
    display: flex;
    font-size: 10px;
    opacity: 0.7;
    margin-right: 4px;
  }
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
  position: relative;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

/* Riziki Mode Toggle */
.riziki-mode-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1.5px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(none);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.riziki-mode-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.riziki-mode-toggle.active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
  color: white;
}

.riziki-mode-toggle.active .riziki-icon {
  filter: brightness(0) invert(1);
}

.riziki-icon {
  font-size: 12px;
}

.riziki-label {
  line-height: 1;
}

.theme-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-primary);
}

.theme-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(none), transform var(none);
}

.theme-icon svg {
  width: 16px;
  height: 16px;
}

/* Light theme: show sun, hide moon */
.theme-icon.light {
  opacity: 1;
  transform: scale(1);
}

.theme-icon.dark {
  opacity: 0;
  transform: scale(0.5);
}

/* Dark theme: show moon, hide sun */
body.dark-theme .theme-icon.light {
  opacity: 0;
  transform: scale(0.5);
}

body.dark-theme .theme-icon.dark {
  opacity: 1;
  transform: scale(1);
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all var(none);
}

.menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--ip-black);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--warning);
  transition: background var(none);
}

.status-dot.connected {
  background: var(--success);
}

.status-dot.starting {
  background: var(--warning);
  animation: pulse 1s ease-in-out infinite;
}

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

.status-dot.error {
  background: var(--error);
}

/* ============================================
   Settings Dropdown
   ============================================ */

.settings-dropdown {
  position: absolute;
  top: 70px;
  right: var(--space-3);
  width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  z-index: 100;
  display: none;
}

.settings-dropdown.open {
  display: block;
}

.settings-content {
  padding: var(--space-3);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
}

/* ============================================
   Mode Toggle (Smart vs Manual)
   ============================================ */

.mode-toggle {
  display: flex;
  gap: 0;
  border: 2px solid var(--border-default);  /* Heavy border - industrial */
  border-radius: 0;
  overflow: hidden;
}

.mode-btn {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-primary);
  border: none;
  border-right: 1px solid var(--border-default);  /* Hairline divider */
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: none;  /* No smooth transitions */
}

.mode-btn:last-child {
  border-right: none;
}

.mode-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.mode-btn.active {
  background: var(--accent-primary);  /* Black background */
  color: var(--bg-primary);  /* White text */
  font-weight: 700;
}

/* ============================================
   Objective Grid (Smart Mode)
   ============================================ */

/* Objective section expands to fill available space */
#objectiveSection {
  border-bottom: none;
  flex: 1;  /* Grow to fill space freed by sticky buttons at bottom */
  display: flex;
  flex-direction: column;
  min-height: 0;  /* Allow flex shrinking */
}


/* ── Goal Throne — elected goal display ── */

.goal-throne {
  margin-bottom: var(--space-2);
  position: relative;
}

.throne-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.throne-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 2px solid var(--border-heavy);
  position: relative;
  overflow: hidden;
  animation: throneReveal 0.35s ease-out;
}

@keyframes throneReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.throne-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}

.throne-icon svg,
.throne-icon i {
  width: 16px;
  height: 16px;
}

.throne-content {
  flex: 1;
  min-width: 0;
}

.throne-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.throne-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.throne-change {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-default);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.throne-change:hover {
  border-color: var(--border-heavy);
  color: var(--text-primary);
}

.throne-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.goal-throne.preview-open .throne-chevron {
  transform: rotate(90deg);
}

.throne-preview {
  border: 1px solid var(--border-default);
  border-top: none;
  padding: 8px 14px;
  background: var(--bg-primary);
}

.throne-preview-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.objective-grid {
  display: flex;
  flex-direction: column;  /* Stack vertically, no grid */
  gap: var(--space-1);  /* Tighter spacing between cards */
  flex: 1;  /* Expand to fill parent section */
  overflow-y: auto;  /* Scroll if needed */
  overflow-x: hidden;
}

/* Fade the grid once a goal has been elected.
   User can still glance, hover to restore, or click × on the throne card to change. */
.objective-grid.has-elected {
  opacity: 0.45;
  /* SP-261: !important required to override the universal `* { transition: none !important }` reset at line 157. */
  transition: opacity 120ms ease-out !important;
}
.objective-grid.has-elected:hover {
  opacity: 1;
}

.objective-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 2px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  /* SP-264: allow transform to animate so the FLIP slide-to-top reads smoothly.
     !important required to override the universal `* { transition: none !important }` reset at line 157. */
  transition: transform 260ms ease-out !important;
  width: 100%;
  box-sizing: border-box;
  flex: 1;  /* Grow to fill available space in objective grid */
}

/* SP-264: elected card jumps to the first slot in the flex/grid order. */
.objective-grid .objective-card.elected-top {
  order: -1;
}

@media (prefers-reduced-motion: reduce) {
  .objective-card {
    transition: none !important;
  }
}

.objective-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-heavy);
}

.objective-card.active {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}

.objective-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

/* Icon + name on same line */
.objective-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.objective-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.objective-card.active .objective-icon {
  color: var(--accent-primary);
}

.objective-icon svg,
.objective-icon i {
  width: 14px;
  height: 14px;
}

.objective-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.objective-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Selection indicator — radio button style (only one goal can be elected) */
.objective-selection-indicator {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border-heavy);
  border-radius: 50%;
  position: relative;
}

.objective-card.active .objective-selection-indicator {
  background: var(--bg-primary);
  border-color: #22c55e;
}

.objective-card.active .objective-selection-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

/* Chevron for inline preview */
.objective-chevron {
  margin-left: 2px;
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
}

.objective-card.active .objective-chevron {
  color: var(--text-primary);
}

.objective-card.preview-open .objective-chevron {
  transform: rotate(90deg);
}

/* Inline preview drawer per objective */
.objective-preview-drawer {
  display: none;
  border: 1px solid var(--border-default);
  border-top: none;
  background: var(--bg-secondary);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
}

.objective-preview-drawer.open {
  display: block;
}

/* Shared preview pack styles — used in both grid drawers and throne preview */
.preview-section-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

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

.preview-section-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-top: 3px;
}

.preview-section-icon svg {
  width: 12px;
  height: 12px;
}

.preview-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.preview-pack {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.preview-pack:hover {
  border-color: var(--text-primary);
  background: var(--bg-secondary, #f5f5f5);
}

.preview-adjustments {
  font-size: 10px;
  margin-top: 6px;
  color: var(--text-secondary);
}

.objective-preview-drawer .preview-loading,
.throne-preview .preview-loading {
  padding: var(--space-1);
  font-size: 11px;
  color: var(--text-muted);
}

/* SP-058: Visible preload progress indicator on goal grid */
.objective-grid.previews-loading {
  position: relative;
}
.objective-grid.previews-loading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-primary, #9d4edd), transparent);
  animation: preload-shimmer 1.5s ease-in-out infinite;
}
@keyframes preload-shimmer {
  0% { opacity: 0.3; transform: translateX(-100%); }
  50% { opacity: 1; }
  100% { opacity: 0.3; transform: translateX(100%); }
}

/* SP-058: "No partner selected" message in drawer */
.preview-no-partner {
  padding: var(--space-2);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Pack detail body - description text */
.pack-objective-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* ============================================
   Dev Tools Drawer
   ============================================ */

.btn-devtools {
  width: 100%;  /* Full width within parent padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);  /* Reduced from space-2 (16px) to space-1 (8px) */
  padding: 10px;  /* Reduced from space-3 (12px) to 10px */
  margin-top: var(--space-1);  /* Reduced from space-2 (16px) to space-1 (8px) */
  background: var(--bg-secondary);
  border: 2px solid var(--border-heavy);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  transition: all var(none);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.btn-devtools:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
  color: var(--text-primary);
}

.btn-devtools.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.devtools-icon {
  font-size: 14px;
}

.devtools-label {
  line-height: 1;
}

.devtools-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;  /* Full width of sidebar */
  max-height: 60vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-left: none;
  border-top-right-radius: var(--line-hairline);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.devtools-drawer.open {
  display: flex;
}

.devtools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.devtools-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.devtools-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all var(none);
}

.devtools-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.devtools-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.devtools-footer {
  display: flex;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

.devtools-footer-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all var(none);
}

.devtools-footer-save {
  color: var(--text-primary);
  border-right: 1px solid var(--border-default);
}

.devtools-footer-save:hover {
  background: var(--bg-hover);
}

.devtools-footer-close {
  color: var(--text-secondary);
}

.devtools-footer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* O&R Branding in DevTools */
.devtools-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  opacity: 0.3;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.devtools-branding:hover {
  opacity: 0.6;
}

.or-icon {
  width: 14px;
  height: 15px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.or-text {
  font-family: 'STIXGeneral', 'Times New Roman', Georgia, serif;
  font-size: 11px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Tier Override — Dev Tools */
.tier-override-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.tier-current-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #444;
  color: #aaa;
  margin-bottom: 8px;
  align-self: flex-start;
}

.tier-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.tier-btn {
  flex: 1 1 auto;
  min-width: 54px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--tier-color, #555);
  background: transparent;
  color: var(--tier-color, #aaa);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tier-btn:hover {
  background: var(--tier-color, #555);
  color: #fff;
}

.tier-btn.tier-btn-active {
  background: var(--tier-color, #555);
  color: #fff;
}

.tier-override-msg {
  font-size: 11px;
  min-height: 16px;
  color: #aaa;
}

.devtools-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.devtools-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.devtools-row {
  display: flex;
  gap: var(--space-1);
}

.devtools-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
}

.devtools-item-half {
  flex: 1;
  min-width: 0;
}

.devtools-item:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.devtools-item.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.devtools-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-primary);
}

.devtools-item-icon svg {
  width: 16px;
  height: 16px;
}

.devtools-item.active .devtools-item-icon {
  color: white;
}

.devtools-item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.devtools-toggle-item {
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.devtools-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.devtools-toggle-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.devtools-toggle-hint {
  font-size: 10px;
  color: var(--text-muted);
}

.devtools-checkbox {
  margin-right: var(--space-1);
}

/* ============================================
   Collapsible Section Header
   ============================================ */

/* ============================================
   Domain Tabs (Demo Mode Selector)
   ============================================ */

.domain-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;  /* Hairline gap */
  border: 2px solid var(--border-default);  /* Heavy outer border - industrial */
  border-radius: 0;
  background: var(--border-default);  /* Gap color */
  padding: 2px;
  transition: opacity 200ms ease, max-height 200ms ease;
  overflow: hidden;
}

.domain-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 8px;  /* Reduced from 12px to 8px vertical */
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: none;  /* No smooth transitions */
  position: relative;
}

.domain-tab:hover {
  background: var(--bg-secondary);
}

.domain-tab.active {
  background: #000000 !important;  /* Force pure black background */
  color: #ffffff !important;  /* Force pure white text */
}

.domain-tab.active::before {
  /* Signal dot - color indicator for active state */
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 0;  /* Square dot */
  background: var(--success);  /* Green signal */
}

.domain-tab.active .domain-name {
  color: #ffffff !important;  /* Force pure white text */
}

.domain-tab.active .domain-icon {
  color: #ffffff !important;  /* Force pure white icon */
}

.domain-tab.active svg {
  color: #ffffff !important;  /* Force white for Lucide SVG icons */
  stroke: #ffffff !important;
  fill: none !important;
}

.domain-tab.active i {
  color: #ffffff !important;
}

.domain-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);  /* Match text color for inactive state */
}

/* Ensure Lucide SVG icons match the gray text in inactive state */
.domain-tab:not(.active) .domain-icon svg {
  color: var(--text-secondary);
  stroke: var(--text-secondary);
}

.domain-name {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* Domain Icons - Hide fallback glyphs since Lucide provides SVG icons */
.domain-tab[data-domain="Restaurant"] .domain-icon::before,
.domain-tab[data-domain="Real Estate"] .domain-icon::before,
.domain-tab[data-domain="Music"] .domain-icon::before,
.domain-tab[data-domain="Filmmaker"] .domain-icon::before {
  display: none !important;
}

/* Domain-specific accent colors */
.domain-tab[data-domain="Restaurant"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.domain-tab[data-domain="Real Estate"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.domain-tab[data-domain="Music"].active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.domain-tab[data-domain="Filmmaker"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

/* ============================================
   Form Elements
   ============================================ */

.form-section {
  margin-bottom: 6px;
}

/* Collapsed domain section — shows split toggle bar + hide-demo toggle; hides everything else.
   SP-265: .section-label is kept visible so the "Select Your Domain" header stays on screen
   even when the domain drawer is collapsed (it's the H3 for the whole region). */
.form-section.section-collapsed > *:not(.domain-section-summary):not(.domain-drawer):not(.hide-demo-toggle):not(.section-label) {
  display: none !important;
}
/* When section is collapsed, hide the grid/partner panels inside the drawer but keep the split bar */
.form-section.section-collapsed .domain-drawer-body,
.form-section.section-collapsed .domain-partner-body {
  display: none !important;
}

.domain-section-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  min-height: 40px;
}

.domain-section-summary:hover {
  color: var(--accent-primary);
}

/* Caret rotates when section is expanded */
.form-section:not(.section-collapsed) .domain-section-summary .domain-caret {
  transform: rotate(180deg);
}

.domain-switcher {
  position: relative;
  display: inline-block;
}

.section-label.domain-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--bg-secondary);
  transition: background 0.15s, border-color 0.15s;
}

.section-label.domain-trigger:hover {
  border-color: var(--text-muted);
  background: var(--bg-tertiary, #e8e8e8);
}

.domain-icon {
  display: flex;
  align-items: center;
  width: 13px;
  height: 13px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.domain-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.domain-label-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.domain-caret {
  width: 7px;
  height: 4px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}

.section-label.domain-trigger.open .domain-caret {
  transform: rotate(180deg);
}

@keyframes domain-switch-pop {
  0%   { transform: scale(0.93); opacity: 0.6; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1);    opacity: 1;  }
}

.section-label.domain-trigger.switched {
  animation: domain-switch-pop 0.22s ease-out;
}

.domain-dropdown {
  position: absolute;
  z-index: 100;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  min-width: 148px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.domain-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.domain-option svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2;
  opacity: 0.55;
}

.domain-option:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.domain-option:hover svg {
  opacity: 1;
}

.domain-option.active {
  color: var(--text-primary);
  font-weight: 600;
}

.domain-option.active svg {
  opacity: 1;
  color: var(--accent-primary);
}

.domain-used-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary, #000);
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.5;
}

.domain-option.active .domain-used-dot {
  opacity: 1;
}

.custom-partner-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 6px;
}

.custom-partner-link:hover {
  color: var(--text-secondary);
}

.custom-partner-input {
  margin-top: 8px;
}

.custom-partner-name-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.custom-partner-name-row .text-input {
  flex: 1;
  min-width: 0;
}
.custom-partner-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid #DD5100;
  border-radius: 4px;
  background: transparent;
  color: #DD5100;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.custom-partner-confirm:hover {
  background: rgba(221, 81, 0, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(221, 81, 0, 0.2);
}
.custom-partner-confirm.confirmed {
  background: #DD5100;
  color: #fff;
}

.custom-partner-back {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}

.custom-partner-back:hover {
  color: var(--text-secondary);
}

/* Domain Drawer (SP-017) */
.domain-drawer {
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.domain-drawer.open {
  border-color: var(--accent-primary, #000);
}
/* SP-094: Cancel cascadeIn re-evaluation when drawer opens.
   Cards get .cascade-child on page load (while drawer is hidden).
   When drawer opens, browser re-evaluates the animation and replays
   it from opacity:0. Override forces cards visible immediately. */
.domain-drawer.open .domain-card {
  animation: none;
  opacity: 1;
  transform: none;
}
.domain-drawer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  text-align: left;
}
.domain-drawer-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.domain-drawer-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.domain-drawer-caret {
  width: 7px;
  height: 4px;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.domain-drawer.open .domain-drawer-caret {
  transform: rotate(180deg);
}
.domain-drawer-body {
  container-type: inline-size;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, height 0s linear 0.2s;
  padding: 0 12px;
}
/* SP-113: open-domain replaces legacy .open class for domain grid */
.domain-drawer.open .domain-drawer-body,
.domain-drawer.open-domain .domain-drawer-body {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, height 0s;
  padding: 0 12px 12px;
}
/* SP-113: Partner dropdown panel — mirrors domain-drawer-body transitions */
.domain-partner-body {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, height 0s linear 0.2s;
  padding: 0 12px;
}
.domain-drawer.open-partner .domain-partner-body {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, height 0s;
  padding: 0 12px 12px;
}
.domain-drawer-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
/* DomainExpanion: search + sort toolbar */
.domain-drawer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.domain-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.domain-search-icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.domain-search {
  width: 100%;
  padding: 5px 8px 5px 24px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-input, var(--bg-primary));
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.domain-search::placeholder { color: var(--text-muted); }
.domain-search:focus { border-color: var(--border-heavy); }
/* Hide browser-native clear button — we handle Escape ourselves */
.domain-search::-webkit-search-cancel-button { display: none; }
.domain-sort-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.domain-sort-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.domain-sort-btn:hover {
  border-color: var(--border-heavy);
  color: var(--text-primary);
}
.domain-sort-btn.sort-active {
  border-color: var(--border-heavy);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
}

/* DomainExpanion v3: vertical list — structurally immune to orphan problems.
   A list has no column-count. Every row is full-width. Rhythm is uniform.
   Scales to 1 or 1000 items with no layout math. Color accent as left stripe
   creates a visual color column down the left edge — scannable at a glance. */
.domain-drawer-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  padding-right: 2px; /* breathing room for scrollbar */
}
.domain-drawer-grid::-webkit-scrollbar { width: 4px; }
.domain-drawer-grid::-webkit-scrollbar-track { background: transparent; }
.domain-drawer-grid::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: 2px;
}

/* No-results empty state */
.domain-no-results {
  padding: 12px 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* DomainExpanion v3: list-row card — full width, icon | name | checkmark slot.
   The left accent stripe forms a continuous color column down the list,
   turning "which domain is which" into a peripheral-vision read. */
.domain-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 9px;
  width: 100%;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--domain-accent, var(--border-default));
  border-radius: 0 4px 4px 0;
  background: var(--bg-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: border-color 0.12s, background 0.12s, padding-left 0.12s;
  text-align: left;
  user-select: none;
  min-height: 30px;
  box-sizing: border-box;
}

/* Accent bar replaced by border-left — hide the absolute element */
.domain-card-accent-bar {
  display: none;
}

.domain-card-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--domain-accent, var(--text-secondary));
  transition: color 0.12s;
}

.domain-card-name {
  flex: 1;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  transition: color 0.12s;
}

/* Checkmark slot — reserved width, visible only on .active so row height
   stays stable as selection changes */
.domain-card::after {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--domain-accent, var(--accent-primary, #000));
}

.domain-card:hover {
  border-color: var(--domain-accent, var(--accent-primary, #000));
  border-left-width: 4px;
  padding-left: 8px; /* compensate for thicker border so text doesn't shift */
  background: color-mix(in srgb, var(--domain-accent, var(--accent-primary, #9d4edd)) 6%, var(--bg-primary));
}

.domain-card.active {
  border-color: var(--domain-accent, var(--accent-primary, #000));
  border-left-width: 4px;
  padding-left: 8px;
  background: color-mix(in srgb, var(--domain-accent, var(--accent-primary, #9d4edd)) 11%, var(--bg-primary));
  font-weight: 600;
}

.domain-card.active::after {
  opacity: 1;
}

.domain-card.active .domain-card-icon,
.domain-card.active .domain-card-name {
  color: var(--domain-accent, var(--accent-primary, #000));
}

/* B&W / print / forced-colors — left stripe still visible in monochrome */
@media (forced-colors: active) {
  .domain-card { border-left-color: ButtonText; }
  .domain-card.active { border-color: Highlight; background: Highlight; color: HighlightText; }
  .domain-card.active::after { color: HighlightText; }
  .domain-card.active .domain-card-name,
  .domain-card.active .domain-card-icon,
  .domain-card-icon { color: inherit; }
}
@media print {
  .domain-drawer-grid { max-height: none; overflow: visible; }
  .domain-card { border-left-color: #000 !important; }
}

/* Custom partner highlight (SP-017) */
.custom-partner-input.highlight {
  border: 2px solid var(--accent-primary, #DD5100);
  border-radius: 6px;
  padding: 10px;
  background: rgba(221, 81, 0, 0.03);
  animation: custom-partner-pulse 0.6s ease;
}
@keyframes custom-partner-pulse {
  0% { box-shadow: 0 0 0 0 rgba(221, 81, 0, 0.25); }
  70% { box-shadow: 0 0 0 8px rgba(221, 81, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 81, 0, 0); }
}
.custom-partner-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent-primary, #DD5100);
  background: rgba(221, 81, 0, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Upsell prompt (SP-017) */
.upsell-prompt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.04);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.upsell-prompt-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.upsell-prompt-body {
  flex: 1;
}
.upsell-prompt-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.upsell-prompt-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #f59e0b;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.upsell-prompt-cta:hover {
  background: #d97706;
}

.form-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.form-col {
  flex: 1 1 160px;   /* Wrap naturally when container can't fit two 160px children */
  min-width: 0;
}

.form-col-wide {
  flex: 1 1 180px;   /* Duration column needs more room for 4 buttons (30d/60d/90d/120d) */
  min-width: 0;
}

.form-col .slider {
  width: 100%;
}

.section-label {
  /* SP-265: match the canonical rule at line ~248 so we don't silently drop
     back to 10px/--text-secondary. Duplicate rule kept for historical ordering;
     values are now aligned with the canonical block so headers read as H3. */
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hint {
  font-weight: 400;
  text-transform: none;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 12px;  /* Reduced from 16px to eliminate scroll on standard monitors */
}

.form-group label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Inputs */
.text-input,
.select-input,
.date-input,
.settings-content input {
  width: 100%;
  padding: 10px clamp(6px, 1.5vw, 12px);  /* Responsive horizontal padding */
  background: var(--bg-input);
  border: 2px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-size: clamp(11px, 1.8vw, 13px);
  font-family: var(--font-sans);
  line-height: 1.4;
  transition: all var(none);
  box-sizing: border-box;
  min-width: 0;
  height: 40px;  /* Fixed height for alignment */
}

.text-input:focus,
.select-input:focus,
.date-input:focus,
.settings-content input:focus {
  outline: none;
  border-color: var(--ip-black);
  background: var(--bg-secondary);
}

.select-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.date-input {
  color-scheme: light;
  min-width: 130px;  /* Prevent date text (03/24/2026) + calendar icon from clipping */
}

/* Duration Toggle - Industrial radio button group */
.duration-toggle {
  display: flex;
  gap: 0;
  border: 2px solid var(--border-default);
  border-radius: 0;
  overflow: hidden;
  height: 40px;  /* Match date-input height */
  box-sizing: border-box;
}

.duration-btn {
  flex: 1 0 auto;     /* Grow to share space but never shrink below content */
  padding: 0 clamp(2px, 0.5vw, 4px);
  font-size: clamp(8px, 1.5vw, 10px);
  font-weight: 600;
  background: var(--bg-primary);
  border: none;
  border-right: 1px solid var(--border-default);  /* Hairline dividers */
  border-radius: 0;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
}

.duration-btn:last-child {
  border-right: none;
}

.duration-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.duration-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 700;
}

@keyframes duration-select-flash {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

.duration-btn.active {
  animation: duration-select-flash 0.18s ease-out;
}

/* ============================================================
   SP-060: MID-NARROW DESKTOP — 1100-1316px
   Sidebar is ~330-395px; generate-controls needs slightly
   reduced padding to keep button comfortably within bounds.
   ============================================================ */
@media (min-width: 1101px) and (max-width: 1316px) {
  .generate-controls {
    padding: 14px 12px;
  }

  .btn-primary {
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Narrow desktop: date/duration fields need breathing room */
/* ============================================================
   NARROW DESKTOP — left panel gets squeezed (769px–1100px)
   Aggressively scale typography + spacing in the .app panel
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {

  /* ---- Global panel text scaling ---- */
  .app .section-label {
    font-size: 9px;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }

  .app .select-input {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* ---- Goal Throne: compact at narrow widths ---- */
  .throne-card {
    padding: 6px 8px;
    gap: 6px;
  }

  .throne-icon {
    width: 24px;
    height: 24px;
  }

  .throne-icon svg,
  .throne-icon i {
    width: 13px;
    height: 13px;
  }

  .throne-name {
    font-size: 11px;
  }

  .throne-desc {
    font-size: 9px;
  }

  .throne-badge {
    font-size: 8px;
    margin-bottom: 2px;
  }

  .throne-change {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .throne-chevron {
    font-size: 10px;
  }

  .goal-throne {
    margin-bottom: 4px;
  }

  /* ---- Objective grid cards ---- */
  .objective-card {
    padding: 4px 8px;
    gap: 6px;
  }

  .objective-card .objective-name {
    font-size: 11px;
  }

  .objective-card .objective-desc {
    font-size: 9px;
  }

  .objective-card .objective-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  /* ---- Generate controls ---- */
  /* SP-060: reduce generate-controls padding at narrow desktop to prevent
     double-padding squeeze (parent .app already has clamp padding) */
  .generate-controls {
    padding: 12px 10px;
  }

  .generate-controls .form-row {
    gap: 4px;
    /* SP-060 redo: removed flex-direction:column — row wraps naturally via flex-wrap + flex-basis */
  }

  .generate-controls .section-label {
    font-size: 8px;
  }

  .duration-btn {
    font-size: clamp(8px, 1.5vw, 10px);
    padding: 0 2px;
    min-height: 28px;
  }

  .date-input {
    padding: 4px 4px;
    font-size: clamp(10px, 1.8vw, 12px);
  }

  .btn-primary {
    font-size: clamp(10px, 1.8vw, 13px);
    min-height: 36px;
    padding: 10px 12px;  /* SP-060: reduced from 16px to prevent overflow at narrow widths */
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  .btn-devtools {
    font-size: 11px;
    min-height: 32px;
    padding: 4px 8px;
  }

  /* ---- Results panel header: tighter at narrow desktop ---- */
  .schedule-name-input-compact {
    font-size: 14px;
    padding: 1px 4px;
  }

  .results-meta-compact {
    font-size: 10px;
    gap: 3px;
  }

  .results-header-top {
    gap: var(--space-1);
  }

  .icon-btn {
    width: 28px;
    height: 28px;
  }

  .icon-btn svg, .icon-btn i {
    width: 14px;
    height: 14px;
  }

  .view-tab-compact {
    width: 28px;
    height: 28px;
  }

  .desktop-connection-status {
    font-size: 9px;
  }
}

/* ============================================================
   VERY NARROW DESKTOP — browser ≤950px, panel at ~280px min-width
   Items 9-13 from element audit: duration, date, generate button
   ============================================================ */
@media (min-width: 769px) and (max-width: 950px) {
  /* SP-060: tighter generate-controls padding at very narrow desktop */
  .generate-controls {
    padding: 10px 8px;
  }

  /* #9: Duration buttons — "120d" must not truncate */
  .duration-btn {
    font-size: 8px;
    padding: 0 1px;
    min-height: 26px;
    letter-spacing: -0.02em;
  }

  /* #11: Date input — full date must be visible */
  .date-input {
    font-size: 10px;
    padding: 4px 2px;
  }

  /* #13: Generate button — must stay 1 line, stay within container */
  .btn-primary {
    font-size: 9px;
    letter-spacing: 0.04em;
    min-height: 32px;
    padding: 6px 8px;          /* SP-060: reduced from 12px to prevent overflow at narrowest */
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  /* #6: Throne — tighter at extreme squeeze */
  .throne-card {
    padding: 4px 6px;
    gap: 4px;
  }
  .throne-icon {
    width: 22px;
    height: 22px;
  }
  .throne-icon svg, .throne-icon i {
    width: 12px;
    height: 12px;
  }
  .throne-name {
    font-size: 10px;
  }
  .throne-desc {
    font-size: 8px;
  }
  .throne-change, .throne-chevron {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  /* #7: Grid cards tighter */
  .objective-card .objective-name {
    font-size: 10px;
  }
  .objective-card .objective-desc {
    font-size: 8px;
  }

  /* #15: Auth modal logo smaller to prevent top cutoff */
  .auth-logo {
    width: 28px;
    height: 28px;
  }
  .auth-modal-header h2 {
    font-size: 16px;
  }
  .auth-modal-header p {
    font-size: 11px;
  }
}

/* ============================================================
   SP-016c: Sidebar narrow state (≤360px drag width)
   Applied via JS class toggle during sidebar resize.
   Duplicates media query rules so they apply when the sidebar
   is dragged narrow on a wide viewport.
   ============================================================ */

.sidebar-narrow .section-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.sidebar-narrow .select-input {
  font-size: 12px;
  padding: 6px 8px;
}

.sidebar-narrow .throne-card {
  padding: 4px 6px;
  gap: 4px;
}

.sidebar-narrow .throne-icon {
  width: 22px;
  height: 22px;
}

.sidebar-narrow .throne-icon svg,
.sidebar-narrow .throne-icon i {
  width: 12px;
  height: 12px;
}

.sidebar-narrow .throne-name {
  font-size: 10px;
}

.sidebar-narrow .throne-desc {
  font-size: 8px;
  display: none;
}

.sidebar-narrow .throne-badge {
  font-size: 8px;
  margin-bottom: 2px;
}

.sidebar-narrow .throne-change,
.sidebar-narrow .throne-chevron {
  width: 16px;
  height: 16px;
  font-size: 9px;
}

.sidebar-narrow .goal-throne {
  margin-bottom: 4px;
}

.sidebar-narrow .objective-card {
  padding: 4px 8px;
  gap: 6px;
}

.sidebar-narrow .objective-card .objective-name {
  font-size: 10px;
}

.sidebar-narrow .objective-card .objective-desc {
  font-size: 8px;
}

.sidebar-narrow .objective-card .objective-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
}

/* SP-060: reduce generate-controls padding when sidebar is narrow */
.sidebar-narrow .generate-controls {
  padding: 10px 8px;
}

.sidebar-narrow .generate-controls .form-row {
  gap: 4px;
  flex-wrap: wrap;
}

.sidebar-narrow .generate-controls .form-col,
.sidebar-narrow .generate-controls .form-col-wide {
  flex: 1 1 160px;  /* Same basis as base — wraps naturally in narrow sidebar */
  min-width: 0;
}

.sidebar-narrow .generate-controls .section-label {
  font-size: 8px;
}

.sidebar-narrow .duration-btn {
  font-size: 8px;
  padding: 0 1px;
  min-height: 26px;
  letter-spacing: -0.02em;
}

.sidebar-narrow .date-input {
  padding: 4px 2px;
  font-size: 10px;
}

.sidebar-narrow .btn-primary {
  font-size: 9px;
  letter-spacing: 0.04em;
  min-height: 32px;
  padding: 6px 8px;            /* SP-060: match very-narrow media query fix */
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-narrow .checkbox-grid {
  grid-template-columns: 1fr;
}

/* ============================================
   Checkbox & Radio
   ============================================ */

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  max-height: 140px;  /* ~4 rows */
  overflow-y: auto;
  padding-right: var(--space-1);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
  font-size: 11px;
}

.checkbox-label:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.checkbox-label input {
  accent-color: var(--text-primary);
}

.checkbox-label.checked {
  background: var(--bg-hover);
}

/* Channel Groups - Row per Platform with Scroll */
.channel-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 88px;
  overflow-y: auto;
  padding-right: 4px;
}

.channel-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-group-header {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 70px;
  flex-shrink: 0;
}

.channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Channel Chips */
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
  user-select: none;
  color: var(--text-secondary);
}

.channel-chip:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.channel-chip.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.channel-chip input[type="checkbox"] {
  display: none;
}

.channel-chip .chip-check {
  font-size: 8px;
}

.channel-chip:not(.selected) .chip-check {
  display: none;
}

.no-channels {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-2);
}

/* ============================================
   Slider
   ============================================ */

.slider-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.slider-label {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 30px;
}

.slider-label:last-child {
  text-align: right;
}

.slider {
  width: 100%;
  height: 16px;  /* Match thumb height for proper centering */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--border-default);
  border-radius: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--text-primary);
  border-radius: 0;
  cursor: pointer;
  margin-top: -6px;  /* Center: -(14 - 3) / 2 ≈ -6 */
  transform: rotate(45deg);
}

.slider::-webkit-slider-thumb:hover {
  transform: rotate(45deg) scale(1.15);
}

.slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--text-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transform: rotate(45deg);
}

.slider::-moz-range-track {
  height: 3px;
  background: var(--border-default);
  border: none;
}

.intensity-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px clamp(8px, 2vw, 16px);
  border: 2px solid var(--accent-primary);  /* Heavy border - industrial */
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: none;  /* No smooth transitions */
  box-sizing: border-box;
  font-size: clamp(9px, 2.5vw, 13px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none; /* SP-072: belt-and-suspenders — blocks touch on mobile */
  border-color: var(--border-default);
  color: var(--text-muted);
}

/* SP-072: Explicit disabled styling for generate button — visually obvious */
#generateBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
  background: var(--bg-tertiary, #e0e0e0);
  color: var(--text-muted, #999);
  border-color: var(--border-default, #ccc);
  box-shadow: none;
  transform: none;
}

#generateBtn:not(:disabled) {
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

/* Generate controls group — visual cohesion for Duration/Start Date/Intensity/Generate */
/* SP-062: Hidden by default until workflow prerequisites are met (.workflow-ready) */
.generate-controls {
  border-top: 2px solid var(--border-default);
  padding: 0;
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;  /* SP-060: prevent padding from overflowing parent */
  max-width: 100%;         /* SP-060: never exceed parent width */
  overflow: hidden;        /* SP-060: clip any child overflow at container edge */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  border-top-width: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease 0.05s, padding 0.35s ease, gap 0.35s ease, border-top-width 0.2s ease, visibility 0s linear 0.35s;
}

.generate-controls.workflow-ready {
  max-height: 500px; /* generous upper bound — content is ~200-300px */
  opacity: 1;
  visibility: visible;
  padding: var(--space-2);
  gap: var(--space-1);
  border-top-width: 2px;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, padding 0.35s ease, gap 0.35s ease, border-top-width 0.2s ease, visibility 0s linear 0s;
}

.generate-controls .form-section {
  padding: 0;
  border-bottom: none;
}

/* Sticky button container pinned to bottom */
.sticky-buttons {
  position: sticky;
  bottom: 0;
  background: var(--bg-primary);
  border-top: var(--line-normal) solid var(--border-heavy);
  padding: var(--space-2);  /* Consistent 16px padding */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);  /* Tighter gap between buttons */
  z-index: 10;
  margin-top: auto;  /* Push to bottom in flex layout */
  flex-shrink: 0;  /* Prevent shrinking */
  box-sizing: border-box;  /* SP-060: include padding in width calculation */
  /* Shadow removed for cleaner instrument aesthetic */
}

/* SP-060: When sticky-buttons is inside generate-controls, the parent already
   provides horizontal padding — avoid double-padding that pushes button overflow */
.generate-controls .sticky-buttons {
  padding-left: 0;
  padding-right: 0;
  border-top: none;  /* Parent already has border-top */
}

.btn-primary {
  background: var(--accent-primary);  /* Black background */
  color: var(--bg-primary);  /* White text */
  border-color: var(--accent-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--bg-primary);  /* Invert on hover */
  color: var(--accent-primary);
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-default);
}

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

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

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 0;
  animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Jargan 3-Circle Loading Animation
   ============================================ */

.jargan-loader {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.jargan-loader-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent-primary, #667eea);
  border-radius: 50%;
}

/* Circle 1: starts top-right */
.jargan-loader-c1 {
  top: 6px;
  left: 17px;
  animation: jLoad1 2.5s ease-in-out infinite;
}

/* Circle 2: starts bottom-right */
.jargan-loader-c2 {
  top: 17px;
  left: 17px;
  animation: jLoad2 2.5s ease-in-out infinite;
}

/* Circle 3: starts bottom-left */
.jargan-loader-c3 {
  top: 17px;
  left: 6px;
  animation: jLoad3 2.5s ease-in-out infinite;
}

@keyframes jLoad1 {
  0% { top: 6px; left: 17px; }
  25%, 50%, 75% { top: 6px; left: 6px; }
  100% { top: 17px; left: 6px; }
}

@keyframes jLoad2 {
  0%, 25% { top: 17px; left: 17px; }
  50%, 75%, 100% { top: 6px; left: 17px; }
}

@keyframes jLoad3 {
  0%, 25%, 50% { top: 17px; left: 6px; }
  75%, 100% { top: 17px; left: 17px; }
}

/* White dots when inside primary button */
.btn-primary .jargan-loader-dot {
  background: var(--ip-white, #fff);
}

/* Small variant: scales the 32px loader down to 14px */
.jargan-loader-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}

.jargan-loader-sm .jargan-loader {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.4375);
  transform-origin: 0 0;
}

/* ============================================
   Divider
   ============================================ */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

/* ============================================
   Schedule List
   ============================================ */

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 100px;
  overflow-y: auto;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border-radius: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.schedule-item::before {
  content: '•';
  color: var(--text-muted);
}

.schedule-item.active {
  color: var(--accent-secondary);
}

.schedule-item.active::before {
  color: var(--accent-secondary);
}

/* ============================================
   Results Section
   ============================================ */

.results-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.results-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

.results-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.results-count {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
}

.copy-btn {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
}

.copy-btn:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

/* Results Table */
.table-container {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.results-table th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.results-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}

.results-table tr:last-child td {
  border-bottom: none;
}

.results-table tr:hover td {
  background: var(--bg-hover);
}

.results-table tr.selected td {
  background: var(--bg-tertiary);
}

/* Expandable deliverable detail rows */
.deliverable-detail-row {
  display: none;
}

.deliverable-detail-row.visible {
  display: table-row;
}

.deliverable-detail-row td {
  background: var(--bg-secondary);
  padding: var(--space-2) var(--space-3);
}

.deliverable-detail {
  font-size: 12px;
  line-height: 1.6;
}

.deliverable-detail-field {
  margin-bottom: var(--space-1);
}

.deliverable-detail-field:last-child {
  margin-bottom: 0;
}

.deliverable-detail-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.deliverable-detail-value {
  color: var(--text-primary);
}

/* Platform badge in deliverable detail */
.deliverable-platform-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.deliverable-row {
  cursor: pointer;
}

.deliverable-row.expanded td {
  border-bottom-color: transparent;
}

/* Brief Preview */
.brief-preview {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.brief-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brief-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* JGN Viewer */
.jgn-toggle {
  margin-top: var(--space-3);
}

.jgn-viewer {
  margin-top: var(--space-2);
  max-height: 200px;
  overflow: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.jgn-viewer pre {
  padding: var(--space-3);
  margin: 0;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================
   Scrollbar
   ============================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ip-black);
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  font-size: 12px;
  color: var(--text-primary);
  opacity: 0;
  transition: all var(none);
  z-index: 1000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.success {
  border-color: var(--success);
  background: rgba(153, 153, 153, 0.1);
}

.toast.error {
  border-color: var(--error);
  background: rgba(204, 204, 204, 0.1);
}

.toast-action-btn {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: #DD5100;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: background 0.15s;
}
.toast-action-btn:hover {
  background: #b34400;
}

/* SP-116: stale calendar assignment indicator */
.gcal-status-dot.stale {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* ============================================
   Results Drawer Panel
   ============================================ */

/* right-panel: positioning context so hero overlay sits on top of calendar */
.right-panel {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.results-panel {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: hide results until explicitly shown */
@media (max-width: 768px) {
  .results-panel {
    display: none;
  }
  .results-panel.visible {
    display: flex;
  }
}

/* Compact Header */
.results-panel-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  -webkit-app-region: drag;
  padding: var(--space-1) var(--space-3);
  padding-top: var(--space-1); /* Tight top padding in web SPA */
}

/* Electron: extra top padding for traffic lights */
.electron-app .results-panel-header {
  padding-top: 36px;
}

.results-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.results-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.results-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  -webkit-app-region: no-drag;
}

/* Plan title wrapper — contains input + chevron + dropdown */
.plan-title-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.plan-title-chevron {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.plan-title-chevron:hover { color: var(--text-primary); }
.plan-title-chevron.open { transform: rotate(180deg); color: var(--text-primary); }

/* Saved plans dropdown */
.saved-plans-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 260px;
  max-width: 360px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  margin-top: 4px;
}
.saved-plans-dropdown.visible { display: block; }

.saved-plans-list { padding: 4px 0; }

.saved-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.12s;
}
.saved-plan-item:hover { background: var(--bg-secondary); }
.saved-plan-item .plan-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-plan-item .plan-item-meta { font-size: 11px; color: var(--text-muted); margin-left: 8px; white-space: nowrap; }
.saved-plan-item .plan-item-delete {
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-size: 14px; padding: 0 4px; margin-left: 6px;
  opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.saved-plan-item:hover .plan-item-delete { opacity: 1; }
.saved-plan-item .plan-item-delete:hover { color: #c0392b; }

.saved-plans-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Save button dirty state */
.icon-btn.dirty {
  color: #DD5100 !important;
  border: 2px solid #DD5100;
}

.schedule-name-input-compact {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 2px 4px;
  transition: all 0.2s ease;
  width: 100%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-name-input-compact::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
  font-style: italic;
}

.schedule-name-input-compact:hover {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}

.schedule-name-input-compact:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-primary);
}

.results-meta-compact {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Align left edge with plan title text (offset = chevron button width + wrapper gap) */
  padding-left: 22px;
}

.results-meta-compact #resultsCount {
  font-weight: 600;
  color: var(--text-secondary);
}

.view-tabs-compact {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 0;
}

.view-tab-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
  color: var(--text-primary);
}

.view-tab-compact:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
  color: var(--text-primary);
}

.view-tab-compact.active {
  background: var(--accent-primary);
  color: var(--ip-white);
  border-color: var(--accent-primary);
}

.view-tab-compact .tab-icon {
  line-height: 1;
}

/* SP-016b: Inline view tabs above calendar/table content */
.view-tabs-inline {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.results-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.results-header-info .results-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.results-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.results-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  -webkit-app-region: no-drag;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-primary);
  border: 2px solid var(--border-default);  /* Heavy border */
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: none;  /* No smooth transitions */
  color: var(--text-primary);
}

.icon-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.results-panel-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

/* Results Layout - Stacked (Schedule + Viz Drawer) */
.results-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.results-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: var(--space-2) var(--space-3);
}

.schedule-name-header {
  text-align: center;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
  padding-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
  border-bottom: 1px solid var(--border-default);
}

.schedule-name-input {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 600px;
  letter-spacing: -0.02em;
}

.schedule-name-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.schedule-name-input:hover {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}

.schedule-name-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-primary);
}

/* Viz Drawer (collapsible) */
.viz-drawer {
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.viz-drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(none);
}

.viz-drawer-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.viz-toggle-icon {
  font-size: 14px;
}

.viz-toggle-text {
  text-align: left;
}

.viz-toggle-arrow {
  font-size: 10px;
  transition: transform var(none);
}

.viz-drawer.open .viz-toggle-arrow {
  transform: rotate(180deg);
}

.viz-drawer-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(none);
}

.viz-drawer.open .viz-drawer-content {
  max-height: 600px;
  overflow-y: auto;
}

/* Inline Metrics in Toggle */
.viz-metrics-inline {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: var(--space-1);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 0;
}

.viz-metrics-inline span {
  font-weight: 600;
  color: var(--text-primary);
}

/* Funnel Section - Prominent */
.funnel-section {
  padding: var(--space-3);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
}

.funnel-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.funnel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.funnel-subtitle {
  font-size: 10px;
  color: var(--text-muted);
}

.funnel-bar {
  display: flex;
  height: 24px;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.funnel-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  transition: all var(none);
  min-width: 0;
  cursor: default;
  overflow: hidden;
  position: relative;
}

.funnel-segment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

.funnel-segment:hover {
  filter: brightness(1.1);
}

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

.funnel-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
}

.funnel-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Analytics Grid - Clean 3-column layout */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
}

.pie-panel .pie-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.pie-panel .pie-container {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.pie-panel .pie-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  min-width: 0;
  overflow: hidden;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pie-legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 0;
  flex-shrink: 0;
}

.pie-legend-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pie-legend-value {
  color: var(--text-muted);
}

.analytics-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  min-height: 80px;
}

.analytics-panel.pie-panel {
  justify-content: center;
}

.panel-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-default);
}

/* Heatmap */
.heatmap-panel {
  min-width: 0;
  overflow: hidden;
}

/* Breakdown panels */
.breakdown-panel {
  min-width: 120px;
}

.heatmap-container {
  display: grid;
  gap: 2px;
  font-size: 9px;
  min-width: 0;
  width: 100%;
}

.heatmap-row {
  display: contents;
}

.heatmap-cell {
  padding: 4px 6px;
  text-align: center;
  border-radius: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-header {
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  font-size: 9px;
}

.heatmap-label {
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  background: transparent;
  font-size: 9px;
}

.heatmap-value {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
}

.heatmap-value.heat-1 { background: rgba(102, 102, 102, 0.1); color: var(--chart-1); }
.heatmap-value.heat-2 { background: rgba(102, 102, 102, 0.1); color: var(--chart-1); }
.heatmap-value.heat-3 { background: rgba(102, 102, 102, 0.1); color: white; }
.heatmap-value.heat-4 { background: var(--chart-1); color: white; }

/* Weekly Chart */
.weekly-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  padding: var(--space-1) 0;
}

.weekly-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.weekly-bar {
  width: 100%;
  max-width: 40px;
  background: var(--bg-secondary);
  border-radius: 0;
  min-height: 3px;
  transition: all var(none);
}

.weekly-bar:hover {
  filter: brightness(1.15);
  transform: scaleY(1.05);
  transform-origin: bottom;
}

.weekly-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}

.weekly-value {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================
   Health Score System (NEW)
   ============================================ */

/* Health Badge in Toggle Bar */
.health-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  margin-left: auto;
  margin-right: var(--space-1);
}

.health-badge.excellent {
  background: var(--text-secondary);
  color: white;
}

.health-badge.good {
  background: var(--text-primary);
  color: white;
}

.health-badge.fair {
  background: var(--text-secondary);
  color: white;
}

.health-badge.poor {
  background: var(--text-secondary);
  color: white;
}

/* Health Hero Section */
.health-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

/* Health Score Ring */
.health-score-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.health-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.health-ring-bg {
  fill: none;
  stroke: var(--bg-tertiary);
  stroke-width: 6;
}

.health-ring-fill {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease;
}

.health-ring-fill.excellent { stroke: var(--text-secondary); }
.health-ring-fill.good { stroke: var(--text-primary); }
.health-ring-fill.fair { stroke: var(--text-secondary); }
.health-ring-fill.poor { stroke: var(--text-secondary); }

.health-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.health-score-value.excellent { color: var(--text-secondary); }
.health-score-value.good { color: var(--text-primary); }
.health-score-value.fair { color: var(--text-secondary); }
.health-score-value.poor { color: var(--text-secondary); }

/* Health Summary (header) */
.health-summary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.health-toggle {
  font-size: 10px;
  color: var(--text-secondary);
  user-select: none;
}

/* Health Details (collapsible body) */
.health-details {
  padding: var(--space-3);
  padding-top: 0;
}

.health-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.health-factor {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.factor-icon {
  font-size: 10px;
  flex-shrink: 0;
}

.factor-label {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factor-value {
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.factor-value.excellent { color: var(--text-secondary); }
.factor-value.good { color: var(--text-primary); }
.factor-value.fair { color: var(--text-secondary); }
.factor-value.poor { color: var(--text-secondary); }

/* Content Gaps Alert */
.content-gaps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 4px 8px;
  border-radius: 0;
  font-size: 10px;
  background: var(--bg-tertiary);
}

.content-gaps.success {
  background: rgba(153, 153, 153, 0.1);
  color: var(--text-secondary);
}

.content-gaps.info {
  background: rgba(102, 102, 102, 0.1);
  color: var(--text-primary);
}

.content-gaps.warning {
  background: rgba(179, 179, 179, 0.1);
  color: var(--text-secondary);
}

.gaps-icon {
  font-size: 12px;
}

.gaps-text {
  font-weight: 500;
}

/* Hide inline metrics when health badge is shown */
.viz-drawer-toggle .viz-metrics-inline {
  display: none;
}

@media (min-width: 500px) {
  .viz-drawer-toggle .viz-metrics-inline {
    display: inline;
  }
}

/* Heatmap improvements */
.heatmap-more {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
  font-style: italic;
}

.heatmap-empty {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3);
}

/* Analytics Grid Layout Rules */
.heatmap-panel {
  grid-column: span 1;
}

.breakdown-panel {
  grid-column: span 1;
}

/* Platform bar specific styling */
.platform-bar .mini-bar-fill {
  transition: width 0.4s ease-out;
}

/* Mini Bars (Channel/Voice/Platform breakdown) */
.mini-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.mini-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.mini-bar-track-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mini-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease-out;
}

.mini-bar-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
}

/* Pie Charts (hidden but keep for compatibility) */
.pie-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-3);
}

.pie-container {
  width: 64px;
  height: 64px;
  position: relative;
  flex-shrink: 0;
}

.pie-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

.pie-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-secondary);
}

.pie-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Pie chart SVG styling */
.pie-container svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pie-segment {
  fill: none;
  stroke-width: 20;
  transition: opacity var(none);
}

.pie-segment:hover {
  opacity: 0.8;
}

.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.pie-center-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.pie-center-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* View Tabs (old - hidden, using compact version in header) */
.view-tabs {
  display: none;
}

.view-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(none);
}

.view-tab:hover {
  color: var(--text-primary);
}

.view-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.tab-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure Lucide icons are properly sized */
.tab-icon svg,
.tab-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Global Lucide icon sizing fix */
i[data-lucide] {
  display: inline-block;
  width: 16px;
  height: 16px;
}

i[data-lucide] svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* View Content */
.view-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.view-content.hidden {
  display: none;
}

/* Table Scroll - FIXED */
.table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  max-height: calc(100vh - 180px);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

/* Calendar Layout with Detail Sidebar */
.calendar-layout {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.calendar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto; /* Allow vertical scrolling when expanded cells exceed height */
  overflow-x: hidden;
}

/* Calendar Detail Sidebar */
.calendar-detail {
  width: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  transition: width var(none);
}

.calendar-detail.visible {
  width: 240px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.detail-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 0;
  transition: all var(none);
}

.detail-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.detail-field {
  margin-bottom: var(--space-2);
}

.detail-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.detail-value {
  font-size: 12px;
  color: var(--text-primary);
}

.detail-brief {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.detail-brief-content {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.detail-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.btn-copy-prompt {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-heavy);
  border-radius: 0;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-copy-prompt:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-copy-prompt.copied {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-fiverr-fastpass {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-heavy);
  border-radius: 0;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.btn-fiverr-fastpass:hover {
  background: #1dbf73;
  border-color: #1dbf73;
  color: #ffffff;
  text-decoration: none;
}

/* Fiverr FastPass Banner */
.fiverr-banner {
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.fiverr-banner-accent {
  width: 3px;
  background: #1dbf73;
  flex-shrink: 0;
}

.fiverr-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  flex: 1;
  min-width: 0;
}

.fiverr-banner-text {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fiverr-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  color: #1dbf73;
  border: 1.5px solid #1dbf73;
  border-radius: 0;
  font-size: 10px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.fiverr-banner-btn i,
.fiverr-banner-btn svg {
  width: 12px;
  height: 12px;
}

.fiverr-banner-btn:hover {
  background: #1dbf73;
  color: #ffffff;
}

/* ============================================
   SP-297 Review Decision Bar (replaces .guest-decision-bar-*)
   ============================================ */

.review-bar {
  /* hardcoded tokens — theme-immune */
  --rb-orange: #DD5100;
  --rb-orange-hover: #c44700;
  --rb-orange-tint: #fff4ed;
  --rb-orange-border: #f5c6a5;
  --rb-orange-text: #9e3800;
  --rb-olive: #646e3a;
  --rb-olive-tint: #f6f8f0;
  --rb-olive-border: #dde4c8;
  --rb-olive-text: #3d4620;
  --rb-danger: #d64545;
  --rb-danger-tint: #fef0ef;
  --rb-danger-text: #8b2323;

  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid var(--rb-orange);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
  box-sizing: border-box;
}

.review-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px 6px 14px;
  box-sizing: border-box;
}

.review-bar__label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #4a4a4a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.review-bar__label-icon {
  width: 14px;
  height: 14px;
  color: #4a4a4a;
  flex-shrink: 0;
}

.review-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Base button shared by top-row + drawer buttons */
.review-bar__btn,
.review-bar__drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out;
}

.review-bar__btn--ghost,
.review-bar__drawer-btn--ghost {
  background: transparent;
  color: #333333;
  border-color: #d0d0d0;
}

.review-bar__btn--ghost:hover:not(:disabled),
.review-bar__drawer-btn--ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: #999999;
  color: #1a1a1a;
}

.review-bar__btn--ghost:focus-visible,
.review-bar__drawer-btn--ghost:focus-visible {
  outline: 2px solid var(--rb-orange);
  outline-offset: 2px;
}

.review-bar__btn--approve,
.review-bar__drawer-btn--submit {
  background: var(--rb-orange);
  color: #ffffff;
  border-color: var(--rb-orange);
}

.review-bar__btn--approve:hover:not(:disabled),
.review-bar__drawer-btn--submit:hover:not(:disabled) {
  background: var(--rb-orange-hover);
  border-color: var(--rb-orange-hover);
}

.review-bar__btn--approve:focus-visible,
.review-bar__drawer-btn--submit:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.review-bar__btn:disabled,
.review-bar__drawer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.review-bar__drawer-btn--submit:disabled {
  background: #e8e8e8;
  color: #999999;
  border-color: #e8e8e8;
  opacity: 1;
}

.review-bar__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
}

.review-bar__icon--chevron {
  transition: transform 180ms ease-out;
  transform: rotate(0deg);
}

.review-bar[data-expanded="true"] .review-bar__icon--chevron {
  transform: rotate(180deg);
}

/* Drawer */
.review-bar__drawer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px 0 18px;
  background: #fafafa;
  border-top: 1px solid transparent;
  transition:
    max-height 220ms ease-out 60ms,
    opacity 160ms ease-out 0ms,
    padding-top 220ms ease-out,
    padding-bottom 220ms ease-out,
    border-top-color 0ms linear 220ms;
}

.review-bar[data-expanded="true"] .review-bar__drawer {
  max-height: 320px;
  opacity: 1;
  padding-top: 12px;
  padding-bottom: 14px;
  border-top-color: #e8e8e8;
  transition:
    max-height 220ms ease-out 0ms,
    opacity 180ms ease-out 40ms,
    padding-top 220ms ease-out,
    padding-bottom 220ms ease-out,
    border-top-color 0ms linear 0ms;
}

.review-bar__textarea {
  width: 100%;
  min-height: 80px;
  max-height: 160px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #ffffff;
  color: #1a1a1a;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
  outline: none;
  transition: border-color 120ms ease-out, outline-color 120ms ease-out;
}

.review-bar__textarea::placeholder {
  color: #999999;
}

.review-bar__textarea:focus-visible {
  outline: 2px solid var(--rb-orange);
  outline-offset: 0;
  border-color: transparent;
}

.review-bar__textarea:disabled {
  background: #f5f5f5;
  color: #999999;
  cursor: not-allowed;
}

.review-bar__counter {
  font-size: 11px;
  color: #999999;
  text-align: right;
  margin-top: -4px;
}

.review-bar__drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-bar__drawer-actions-left {
  display: inline-flex;
}

.review-bar__drawer-actions-right {
  display: inline-flex;
}

/* Inline error row */
.review-bar__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--rb-danger-tint);
  border-left: 3px solid var(--rb-danger);
  color: var(--rb-danger-text);
  font-size: 12px;
  line-height: 1.4;
  border-radius: 0 2px 2px 0;
  animation: review-bar-error-in 150ms ease-out;
}

.review-bar__error-icon {
  width: 14px;
  height: 14px;
  color: var(--rb-danger);
  flex-shrink: 0;
  margin-top: 1px;
}

.review-bar__error a {
  color: var(--rb-danger-text);
  text-decoration: underline;
}

@keyframes review-bar-error-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Post-decision states */
.review-bar--approved {
  background: var(--rb-olive-tint);
  border: 1px solid var(--rb-olive-border);
  border-left: 4px solid var(--rb-olive);
  animation: review-bar-swap-in 200ms ease-out;
}

.review-bar--changes-requested {
  background: var(--rb-orange-tint);
  border: 1px solid var(--rb-orange-border);
  border-left: 4px solid var(--rb-orange);
  animation: review-bar-swap-in 200ms ease-out;
}

@keyframes review-bar-swap-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.review-bar__confirmation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.review-bar--approved .review-bar__confirmation {
  color: var(--rb-olive-text);
}

.review-bar--changes-requested .review-bar__confirmation {
  color: var(--rb-orange-text);
}

.review-bar__confirmation-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.review-bar--approved .review-bar__confirmation-icon {
  color: var(--rb-olive);
}

.review-bar--changes-requested .review-bar__confirmation-icon {
  color: var(--rb-orange);
}

.review-bar__undo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: var(--rb-olive-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: none;
}

.review-bar__undo:hover {
  text-decoration: underline;
}

.review-bar__undo:focus-visible {
  outline: 2px solid var(--rb-olive);
  outline-offset: 2px;
}

.review-bar__progress {
  height: 1px;
  width: 100%;
  background: var(--rb-orange);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 5000ms linear;
}

.review-bar--approved[data-undo-running="true"] .review-bar__progress {
  transform: scaleX(0);
}

/* In-flight */
.review-bar[data-submitting="true"] .review-bar__textarea,
.review-bar[data-submitting="true"] .review-bar__btn,
.review-bar[data-submitting="true"] .review-bar__drawer-btn {
  pointer-events: none;
}

.review-bar__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

/* ---- Mobile (≤480px) ---- */
@media (max-width: 480px) {
  .review-bar {
    position: fixed;
    /* sp-name-gate-fix-r2: lift the bar above the bottom .mobile-nav
       (height 44px, z-index 300, also fixed at bottom: 0). Without this
       the bottom row of the review bar — including the Last name input
       at the very bottom of the expanded identity row — sits BEHIND the
       mobile nav and is invisible to the reviewer. The original bug
       report ("only First name visible") was the Last name being
       occluded, not the field being missing from the DOM. */
    bottom: calc(var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    top: auto;
    margin: 0;
    border-left: 0;
    border-top: 4px solid var(--rb-orange);
    border-right: 0;
    border-bottom: 0;
    z-index: 50;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  }

  .review-bar--approved,
  .review-bar--changes-requested {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .review-bar--approved { border-top: 4px solid var(--rb-olive); }
  .review-bar--changes-requested { border-top: 4px solid var(--rb-orange); }

  .review-bar__row {
    min-height: 56px;
    padding: 6px 12px;
    gap: 8px;
  }

  .review-bar__label {
    flex: 0 0 auto;
    font-size: 11px;
  }

  .review-bar__actions {
    flex: 1;
    justify-content: flex-end;
    gap: 8px;
  }

  .review-bar__btn {
    flex: 1;
    max-width: 160px;
    height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* Drawer expands UPWARD on mobile — achieved by ordering drawer BEFORE row via flex-direction: column-reverse */
  .review-bar {
    flex-direction: column-reverse;
  }

  .review-bar__drawer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .review-bar[data-expanded="true"] .review-bar__drawer {
    max-height: 60vh;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 0;
    border-bottom: 1px solid #e8e8e8;
  }

  .review-bar__textarea {
    min-height: 120px;
    max-height: 40vh;
    font-size: 14px;
  }

  .review-bar__drawer-btn {
    height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* SP-297: reduced-motion overrides for review-bar (spec §9) */
@media (prefers-reduced-motion: reduce) {
  .review-bar,
  .review-bar__drawer,
  .review-bar__icon--chevron,
  .review-bar__progress,
  .review-bar--approved,
  .review-bar--changes-requested,
  .review-bar__error {
    transition: none !important;
    animation: none !important;
  }
  .review-bar__progress {
    display: none !important;
  }
}

/* Detail sidebar Fiverr footer (pinned to bottom) */
.detail-fiverr-footer {
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid var(--border-default);
  margin-top: auto;
}

.btn-fiverr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: #1dbf73;
  border: 1.5px solid #1dbf73;
  border-radius: 0;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-fiverr-cta i,
.btn-fiverr-cta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.btn-fiverr-cta:hover {
  background: #1dbf73;
  color: #ffffff;
  text-decoration: none;
}

/* FastPass Modal */
.fastpass-modal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.fastpass-modal.open {
  display: flex;
}

.fastpass-modal-inner {
  background: var(--bg-primary);
  border: 2px solid var(--border-heavy);
  width: min(480px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.fastpass-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
}

.fastpass-modal-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fastpass-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  padding: 4px;
}

.fastpass-modal-close:hover {
  color: var(--text-primary);
}

.fastpass-modal-desc {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 10px 16px 4px;
  margin: 0;
}

.fastpass-modal-body {
  padding: 8px 16px 16px;
}

.fastpass-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
  gap: 12px;
}

.fastpass-category:last-child {
  border-bottom: none;
}

.fastpass-category-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fastpass-category-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fastpass-category-count {
  font-size: 10px;
  color: var(--text-secondary);
}

.fastpass-category-link {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border: 2px solid var(--border-heavy);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.fastpass-category-link:hover {
  background: #1dbf73;
  border-color: #1dbf73;
  color: #ffffff;
  text-decoration: none;
}

/* Pack detail — Fiverr Pro CTA (Tier 3) */
.pack-fiverr-pro {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.pack-fiverr-pro-link {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 6px 0;
}

.pack-fiverr-pro-link:hover {
  color: #1dbf73;
  text-decoration: none;
}

/* JGN Plugin CTA Modal */
.jgn-cta-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.jgn-cta-modal.open {
  display: flex;
  animation: ctaFadeIn 0.25s ease-out;
}

@keyframes ctaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.jgn-cta-inner {
  background: #231f20;
  border: 2px solid #3a3a3a;
  width: min(420px, 90vw);
  padding: 32px 28px 24px;
  position: relative;
  text-align: center;
}

.jgn-cta-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  padding: 4px;
}

.jgn-cta-close:hover {
  color: #fff;
}

.jgn-cta-icon {
  margin-bottom: 16px;
}

.jgn-cta-icon svg {
  width: 48px;
  height: 48px;
}

.jgn-cta-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  color: #fff;
}

.jgn-cta-desc {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0 0 20px;
}

.jgn-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #DD5100;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s;
}

.jgn-cta-btn:hover {
  background: #f06000;
}

.jgn-cta-btn svg {
  width: 16px;
  height: 16px;
}

.jgn-cta-legal {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin: 14px 0 0;
  line-height: 1.4;
}

.jgn-cta-dismiss {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  padding: 4px 8px;
}

.jgn-cta-dismiss:hover {
  color: rgba(255,255,255,0.7);
}

/* JGN Modal */
.jgn-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.jgn-modal.visible {
  display: flex;
}

.jgn-modal-content {
  width: 90%;
  max-width: 600px;
  max-height: 80%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jgn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.jgn-modal-content pre {
  flex: 1;
  overflow: auto;
  padding: var(--space-3);
  margin: 0;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Temporary: instrument-paper.css !important override (remove when SP-133 lands) */
.fastpass-modal-inner { border-radius: 8px !important; }
.jgn-cta-inner { border-radius: 8px !important; }
.jgn-modal-content { border-radius: 8px !important; }

/* Visualization Cards */
.viz-card {
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-3);
}

.viz-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

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

/* Bar Chart Rows */
.chart-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-label {
  font-size: 11px;
  color: var(--text-secondary);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-container {
  flex: 1;
  height: 18px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.chart-bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

.chart-bar.platform-instagram {
  background: var(--bg-secondary);
}

.chart-bar.platform-facebook {
  background: var(--text-primary);
}

.chart-bar.voice {
  background: var(--accent-jargan);
}

.chart-bar.channel {
  background: var(--accent-secondary);
}

.chart-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Stacked Bar Chart Layout */
.chart-row-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.chart-label-full {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.legend-dot.channel { background: var(--accent-secondary); }
.legend-dot.voice { background: var(--accent-jargan); }

/* ============================================
   Calendar View
   ============================================ */

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-radius: 0;
  min-width: 560px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cal-nav-left,
.cal-nav-center,
.cal-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cal-nav-right {
  margin-left: auto;
}

/* Month/Week mode toggle — mobile only (injected by mobile-calendar.js) */
.mobile-cal-mode-toggle {
  display: none;  /* SP-083: hidden on desktop; shown via styles-mobile.css at ≤768px */
  gap: 0;
  border: 1px solid var(--border-default);
  margin-left: auto;
}

.mobile-cal-mode-btn {
  padding: 2px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.4;
}

.mobile-cal-mode-btn.active {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* SP-083: Week view, grid-hiding, and infinite scroll are mobile-only.
   Scoped to min-width:769px so mobile @media rules can override freely. */
@media (min-width: 769px) {
  .calendar-grid.hidden-by-week {
    display: block !important;  /* Desktop: grid can never be hidden by week mode */
  }

  .mobile-week-view,
  .mobile-week-view.active {
    display: none !important;  /* Desktop: week view never shows */
  }

  .mobile-month-scroll,
  .mobile-month-scroll.active {
    display: none !important;  /* Desktop: infinite month scroll never shows */
  }
}

/* Week view rows — desktop defaults (mobile overrides in styles-mobile.css) */
.mobile-week-row {
  border-bottom: var(--line-hairline) solid var(--border-default);
}

.mobile-week-header {
  display: flex;
  align-items: center;
  padding: 6px var(--space-2);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 3;
}

.mobile-day-row {
  display: flex;
  align-items: stretch;
  min-height: 36px;
  border-bottom: var(--line-hairline) solid var(--border-default);
}

.mobile-day-label {
  width: 56px;
  flex-shrink: 0;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: var(--line-hairline) solid var(--border-default);
  font-family: var(--font-mono);
}

.mobile-day-name {
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.mobile-day-num {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
}

.mobile-day-row.today .mobile-day-num {
  color: var(--accent-primary);
}

.mobile-day-row.other-month .mobile-day-num {
  color: var(--text-muted);
}

.mobile-day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px var(--space-1);
}

.mobile-day-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.mobile-day-event:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-primary);
}

.day-event-channel {
  font-size: 11px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-event-voice {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-event-stage {
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.mobile-day-empty {
  color: var(--text-muted);
  font-size: 11px;
  padding: 6px;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(none);
}

.cal-nav-btn:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.cal-month {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  width: 150px;  /* Fixed width to fit longest month ("September 2026") */
  text-align: center;
  flex-shrink: 0;
}

/* Today button in calendar nav */
.cal-today-btn {
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
  margin-left: 8px;
}

.cal-today-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Plan date range badge in calendar nav */
.cal-date-range {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.calendar-grid {
  display: grid;
  /* F-036 (2026-04-25): drop the 80px-per-cell floor + the 560px grid
     min-width. The parent .calendar-main has overflow-x: hidden, so the
     old "trigger horizontal scroll" intent never applied — instead the
     right-most columns just got clipped on viewports narrower than the
     grid's hard floor. minmax(0, 1fr) lets cells shrink to whatever
     width is available; deliverable tiles already handle narrow widths
     via truncation + the +N "more" chip. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0;
  overflow: visible; /* Allow expanded cells to extend beyond grid */
  flex: 1;
  min-height: min-content; /* Allow grid to grow with expanded cells */
  position: relative; /* SP-058: anchor for empty overlay */
}

.cal-header {
  background: var(--bg-secondary);
  padding: var(--space-2);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}

.cal-body {
  display: contents;
}

.cal-day {
  background: var(--bg-primary);
  min-height: 70px;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clip overflow in normal state */
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.cal-day:nth-child(7n) {
  border-right: none;
}

.cal-day.other-month {
  background: var(--bg-secondary);
}

.cal-day.other-month .cal-day-num {
  color: var(--text-muted);
}

.cal-day.today {
  background: rgba(102, 102, 102, 0.1);
}

.cal-day-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.cal-day.today .cal-day-num {
  color: var(--accent-primary);
  font-weight: 600;
}

.cal-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.cal-event {
  font-size: 9px;
  padding: 3px 4px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 3px;
  border-left: 2px solid transparent;
}

.cal-event-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cal-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event:hover {
  opacity: 0.8;
}

/* Platform-specific calendar event colors */
.cal-event.platform-instagram {
  background: rgba(225, 48, 108, 0.1);
  color: #e1306c;
  border-left-color: #e1306c;
}

.cal-event.platform-facebook {
  background: rgba(24, 119, 242, 0.1);
  color: #1877f2;
  border-left-color: #1877f2;
}

.cal-event.platform-email {
  background: rgba(234, 67, 53, 0.1);
  color: #EA4335;
  border-left-color: #EA4335;
}

.cal-event.platform-linkedin {
  background: rgba(10, 102, 194, 0.1);
  color: #0A66C2;
  border-left-color: #0A66C2;
}

.cal-event.platform-tiktok {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
  border-left-color: #000;
}

.cal-event.platform-youtube {
  background: rgba(255, 0, 0, 0.08);
  color: #cc0000;
  border-left-color: #FF0000;
}

.cal-event.platform-blog {
  background: rgba(255, 107, 53, 0.1);
  color: #FF6B35;
  border-left-color: #FF6B35;
}

.cal-event.platform-twitter {
  background: rgba(29, 161, 242, 0.08);
  color: #1DA1F2;
  border-left-color: #1DA1F2;
}

.cal-event.platform-sms {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
  border-left-color: #34c759;
}

.cal-event.platform-spotify {
  background: rgba(29, 185, 84, 0.1);
  color: #1DB954;
  border-left-color: #1DB954;
}

.cal-event.platform-default {
  background: rgba(102, 102, 102, 0.1);
  color: var(--text-secondary);
  border-left-color: #999;
}

.cal-event-more {
  font-size: 9px;
  color: var(--accent-primary);
  padding: 2px 4px;
  cursor: pointer;
  font-weight: 500;
}

.cal-event-more:hover {
  text-decoration: underline;
}

/* Expanded calendar day */
.cal-day.expanded {
  min-height: auto;
  height: auto;
  max-height: none;
  z-index: 10;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cal-day.expanded .cal-events {
  height: auto;
  max-height: none;
  overflow: visible;
  flex: none;
  gap: 2px;
}

.cal-day.expanded .cal-events::-webkit-scrollbar {
  width: 4px;
}

.cal-day.expanded .cal-events::-webkit-scrollbar-track {
  background: transparent;
}

.cal-day.expanded .cal-events::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 0;
}

.cal-day.expanded .cal-event {
  padding: 3px 4px;  /* Maintain same padding as collapsed state */
  font-size: 9px;  /* Maintain same font size as collapsed state */
}

.cal-event-collapse {
  font-size: 9px;
  color: var(--text-muted);
  padding: 4px;
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  border-top: 1px solid var(--border-default);
}

.cal-event-collapse:hover {
  color: var(--accent-primary);
}

/* SP-058: Empty calendar overlay — sits on top of rendered grid */
.cal-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 5;
}

.cal-empty-text {
  font-size: 13px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.02em;
}

/* ============================================
   API Call Viewer
   ============================================ */

.api-viewer-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(none);
}

.api-viewer-toggle:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.api-viewer-toggle.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.api-icon {
  font-family: monospace;
  font-weight: bold;
}

.api-viewer {
  position: absolute;
  top: 48px;
  right: 0;
  width: 480px;
  max-width: calc(100vw - 440px);
  max-height: calc(100vh - 80px);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.api-viewer.visible {
  display: flex;
}

.api-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.api-viewer-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.api-viewer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.api-viewer-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 0;
}

.api-viewer-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.api-viewer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.api-viewer-close:hover {
  color: var(--error);
}

.api-viewer-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 11px;
}

.api-viewer-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 32px;
  font-style: italic;
}

.api-call {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  margin-bottom: 8px;
  overflow: hidden;
}

.api-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--bg-tertiary);
}

.api-call-header:hover {
  background: var(--bg-hover);
}

.api-call-method {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 0;
  font-size: 10px;
  text-transform: uppercase;
}

.api-call-method.get {
  background: rgba(102, 102, 102, 0.1);
  color: var(--accent-primary);
}

.api-call-method.post {
  background: rgba(22, 163, 74, 0.15);
  color: var(--success);
}

.api-call-method.put {
  background: rgba(255, 109, 7, 0.15);
  color: var(--warning);
}

.api-call-endpoint {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-call-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0;
}

.api-call-status.success {
  background: rgba(22, 163, 74, 0.15);
  color: var(--success);
}

.api-call-status.error {
  background: rgba(220, 38, 38, 0.15);
  color: var(--error);
}

.api-call-status.pending {
  background: rgba(255, 109, 7, 0.15);
  color: var(--warning);
}

.api-call-time {
  font-size: 10px;
  color: var(--text-muted);
}

.api-call-details {
  display: none;
  padding: 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.api-call.expanded .api-call-details {
  display: block;
}

.api-call-section {
  margin-bottom: 10px;
}

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

.api-call-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.api-call-section-content {
  background: var(--bg-secondary);
  padding: 8px;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-primary);
}

/* ============================================
   Pack Detail Panel (Master Plan Drawer)
   ============================================ */

.pack-detail-panel {
  width: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  transition: width 250ms ease;
  flex-shrink: 0;
  position: relative;
  z-index: 60;
  box-sizing: border-box;  /* Include borders in width calculation */
}

.pack-detail-panel.open {
  width: 340px;
  overflow-x: auto;  /* Allow horizontal scroll if content is too wide */
  overflow-y: hidden;  /* Body handles vertical scroll */
}

.pack-detail-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  flex-shrink: 0;
  touch-action: none;
}

.pack-detail-resize-handle:hover,
.pack-detail-resize-handle.dragging {
  background: var(--accent-jargan, #9d4edd);
  opacity: 0.35;
}

.pack-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  width: 100%;  /* Take full width of parent */
  box-sizing: border-box;  /* Include padding in width */
}

.pack-detail-icon {
  font-size: 16px;
}

.pack-detail-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 0;
  transition: background var(none);
  line-height: 1;
}

.pack-detail-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pack-detail-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;  /* Prevent horizontal scroll within body */
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;  /* Take full width of parent */
  box-sizing: border-box;  /* Include padding in width */
}

.pack-detail-body::-webkit-scrollbar {
  width: 4px;
}

.pack-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.pack-detail-body::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

/* KPI Strip */
.pack-kpi-strip {
  display: flex;
  gap: var(--space-2);
}

.pack-kpi-item {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.pack-kpi-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.pack-kpi-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Section Title */
.pack-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pack-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Channel List */
.pack-channel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pack-channel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.pack-channel-platform-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.pack-channel-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}

.pack-channel-freq {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Voice List */
.pack-voice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pack-voice-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.pack-voice-name {
  flex: 1;
  font-size: 12px;
  color: var(--accent-jargan);
  font-weight: 500;
}

.pack-voice-position {
  font-size: 9px;
  padding: 0;
  background: none;
  color: var(--text-muted, #999);
  border-radius: 0;
  white-space: nowrap;
}

/* ============================================
   Expandable Items (Channels & Voices in Detail)
   ============================================ */
.expandable-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expandable-item {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.expandable-item.expanded {
  border-color: var(--accent-primary);
}

.expandable-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.expandable-header:hover {
  background: var(--bg-hover);
}

.expandable-header .expand-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.expandable-item.expanded .expand-arrow {
  transform: rotate(90deg);
}

.expandable-content {
  display: none;
  padding: var(--space-3);
  padding-top: 0;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.expandable-item.expanded .expandable-content {
  display: block;
}

/* Item detail grid */
.item-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-2);
}

.item-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.item-detail-label {
  font-size: 10px;
  color: var(--text-muted);
  width: 70px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.item-detail-value {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
}

/* Editable channel inputs - subtle, refined Instrument Paper style */
.editable-row {
  margin: 6px 0;
}

.editable-row .item-detail-label {
  color: var(--text-muted);
  font-size: 9px;
}

.channel-name-input {
  flex: 1;
  font-size: 11px;
  padding: 2px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color 150ms ease;
}

.channel-name-input:hover {
  border-bottom-color: var(--border-default);
}

.channel-name-input:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

/* FREQUENCY EDITING STYLES (SHELVED)
   These styles are preserved for when API supports channel frequency overrides.
   Currently only name editing is active - frequency displays as read-only text.
*/
.frequency-edit-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.channel-freq-input {
  width: 36px;
  font-size: 11px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  text-align: right;
  transition: border-color 150ms ease;
}

.channel-freq-input:hover {
  border-bottom-color: var(--border-default);
}

.channel-freq-input:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

.freq-separator {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: lowercase;
}

.channel-unit-select {
  font-size: 10px;
  padding: 2px 4px 2px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="8" viewBox="0 0 12 8" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 14px;
  transition: border-color 150ms ease;
}

.channel-unit-select:hover {
  border-bottom-color: var(--border-default);
}

.channel-unit-select:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

/* Edited indicator */
.edited-indicator {
  font-size: 8px;
  color: var(--accent-primary);
  margin-left: 4px;
}

/* Reset button */
.channel-reset-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  transition: color 150ms ease;
}

.channel-reset-btn:hover {
  color: var(--text-primary);
}

.item-stages {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.item-stage-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 0;
  color: white;
  font-weight: 500;
}

.platform-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 0;
  color: white;
  font-weight: 500;
}

/* Voice expandable content - only show when expanded */
.expandable-item.expanded .voice-expandable {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-definition {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border-radius: 0;
  border-left: 3px solid var(--accent-jargan);
}

.voice-stages-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: var(--space-1);
}

.voice-viz-container {
  margin-top: 0;
  background: white;
  border-radius: 0;
  padding: 6px 8px 4px;
  position: relative;
}

.voice-viz-container .voice-viz-diagram {
  max-width: 100%;
  overflow: hidden;
}

.voice-viz-container .voice-viz-diagram svg {
  width: 100%;
  height: auto;
  max-height: 160px;
}

/* Fullscreen expand button */
.viz-fullscreen-btn {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 2;
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 14px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.voice-viz-container:hover .viz-fullscreen-btn {
  opacity: 1;
}
.viz-fullscreen-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Fullscreen overlay */
.viz-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.viz-fullscreen-chrome {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: max(16px, env(safe-area-inset-right, 16px));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.viz-fullscreen-close {
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.viz-fullscreen-close:hover,
.viz-fullscreen-close:active {
  background: rgba(221,81,0,0.8);
  border-color: #DD5100;
}
.viz-fullscreen-body {
  width: 90vw;
  max-width: 800px;
  height: 80vh;
  max-height: 700px;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.viz-fullscreen-body svg {
  width: 100%;
  height: 100%;
  max-height: none;
}
.viz-fullscreen-attr-detail {
  margin-top: 12px;
  width: 100%;
  max-width: 400px;
}
.viz-fullscreen-footer {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}
.viz-fullscreen-close-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}

.voice-attrs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.voice-attr-group {
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: var(--space-2);
}

.voice-attr-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.voice-attr-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
}

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

.voice-attr-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.voice-attr-desc {
  font-size: 10px;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

/* Platform bar chart */
.pack-platform-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pack-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pack-bar-label {
  width: 72px;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-bar-container {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.pack-bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease;
}

.pack-bar-value {
  font-size: 10px;
  color: var(--text-muted);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Active state for clickable pack chips in inline preview */
.preview-pack.active {
  background: var(--accent-primary);
  color: white;
}

/* Mini funnel visualization in pack/objective detail */
.pack-funnel-bar {
  display: flex;
  height: 8px;
  border-radius: 0;
  overflow: hidden;
  gap: 2px;
  margin: var(--space-1) 0;
}

.pack-funnel-segment {
  border-radius: 0;
  transition: flex 0.3s ease;
  min-width: 4px;
}

.pack-funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pack-funnel-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-secondary);
}

.pack-funnel-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  flex-shrink: 0;
}

.pack-funnel-count {
  color: var(--text-muted);
}

/* Pack loading / error states */
.pack-state-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  padding: var(--space-6) 0;
}

/* ============================================
   Voice Pack Cards (Rich Display)
   ============================================ */

.pack-voice-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pack-voice-card {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
}

.pack-voice-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 5px;
}

/* Position type badge color variants */
/* SP-147: Position type as plain text — no pill backgrounds */
.pack-voice-position.coin,
.pack-voice-position.flywheel,
.pack-voice-position.hub-and-spoke,
.pack-voice-position.barbell,
.pack-voice-position.pyramid { background: none; color: var(--text-muted, #999); }

.pack-voice-definition {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 6px;
}

.pack-voice-stages {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.voice-stage-badge {
  font-size: 9px;
  font-weight: 700;
  color: white;
  padding: 1px 5px;
  border-radius: 0;
  letter-spacing: 0.3px;
}

/* Voice attributes (Insight Language structure) */
.pack-voice-attrs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border-default);
  padding-top: 6px;
  margin-top: 2px;
}

.pack-voice-attr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pack-attr-role {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Flywheel roles */
.pack-attr-role.driver { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.node { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
/* Coin roles */
.pack-attr-role.side-a,
.pack-attr-role.side-b { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
/* Hub and Spoke roles */
.pack-attr-role.hub { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
.pack-attr-role.spoke { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
/* Barbell roles */
.pack-attr-role.fulcrum { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.weight-a,
.pack-attr-role.weight-b { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
/* Pyramid roles */
.pack-attr-role.base { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.tier { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.apex { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }

.pack-attr-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pack-attr-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.pack-attr-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   Voice Viz Panel (Insight Language SVG)
   ============================================ */

.voice-viz-tabs {
  display: flex;
  gap: 4px;
  padding: var(--space-2) var(--space-3) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
}

.voice-viz-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.voice-viz-tab:hover { color: var(--text-primary); }

.voice-viz-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}

.voice-viz-panel { display: none; }
.voice-viz-panel.active { display: block; }

.voice-viz-header {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.voice-viz-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.voice-viz-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* SVG diagram container — takes as much vertical height as available */
.voice-viz-diagram {
  padding: 12px 8px 8px;
  border-bottom: 1px solid var(--border-default);
}

.viz-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Active node highlight */
.viz-node-circle[data-active] {
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 6px currentColor);
}

/* v2: hover state for viz nodes */
.viz-svg g.viz-node {
  cursor: pointer;
}
.viz-svg g.viz-node:hover .viz-node-circle {
  filter: brightness(1.1) drop-shadow(0 0 7px rgba(221,81,0,0.35));
}

/* v3: Coin — two halves breathe gently out of phase */
@keyframes viz-coin-breathe-a {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.78; }
}
@keyframes viz-coin-breathe-b {
  0%, 100% { opacity: 0.78; }
  50%       { opacity: 1; }
}
.voice-viz-container:hover .viz-coin-half-a {
  animation: viz-coin-breathe-a 3s ease-in-out infinite;
}
.voice-viz-container:hover .viz-coin-half-b {
  animation: viz-coin-breathe-b 3s ease-in-out infinite;
}

/* v3: Hub & Spoke — orbit ring rotates slowly on hover */
@keyframes viz-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.viz-hs-orbit {
  transform-box: fill-box;
  transform-origin: center;
}
.voice-viz-container:hover .viz-hs-orbit {
  animation: viz-orbit-spin 22s linear infinite;
}

/* v3: Barbell — plate stacks pulse with opposite phase */
@keyframes viz-bb-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.82; transform: scale(0.975); }
}
.viz-bb-plate-l,
.viz-bb-plate-r {
  transform-box: fill-box;
}
.voice-viz-container:hover .viz-bb-plate-l {
  animation: viz-bb-pulse 4s ease-in-out infinite;
  transform-origin: 132px 220px;
}
.voice-viz-container:hover .viz-bb-plate-r {
  animation: viz-bb-pulse 4s ease-in-out 2s infinite;
  transform-origin: 568px 220px;
}

/* Attribute detail card */
.voice-viz-attr-detail {
  padding: 10px var(--space-3) 6px;
}

.viz-attr-card {
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: 8px 10px;
}

.viz-attr-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.viz-attr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* SP-147: Override inline styles — plain text, no pill */
.viz-attr-role-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 !important;
  border-radius: 0;
  flex-shrink: 0;
  background: none !important;
  color: #999 !important;
}
.viz-attr-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.viz-attr-close:hover,
.viz-attr-close:active {
  color: var(--text-primary);
}

.viz-attr-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.viz-attr-hint {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  margin: 4px 0 10px;
  letter-spacing: 0.2px;
}

/* SP-191: Position type glossary */
.viz-glossary-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
.viz-glossary-btn:hover,
.viz-glossary-btn.active {
  opacity: 1;
  color: #DD5100;
}
.viz-glossary-card {
  margin: 4px 0 6px 0;
  background: #FFF3ED;
  border-left: 3px solid #DD5100;
  border-radius: 0 4px 4px 0;
  padding: 8px 10px;
}
.viz-glossary-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.viz-glossary-type {
  font-size: 11px;
  font-weight: 700;
  color: #DD5100;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.viz-glossary-tagline {
  font-size: 11px;
  color: #6B7280;
  font-style: italic;
  flex: 1;
}
.viz-glossary-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.viz-glossary-close:hover { color: #1a1a1a; }
.viz-glossary-body {
  font-size: 12px;
  color: #374151;
  line-height: 1.55;
  margin: 0;
}

/* ============================================
   Editable Channels (Pack Detail)
   ============================================ */

/* Editable channel rows — same layout as original pack-channel-item */
.pack-channel-item.channel-editable {
  position: relative;
  transition: opacity 0.2s ease;
}

/* Checkmark indicator for active channels */
.channel-check-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--success, #2e7d32);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}

.channel-check-indicator::after {
  content: '✓';
}

.pack-channel-item.channel-editable .channel-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 150ms ease, color 150ms ease;
  flex-shrink: 0;
}

.pack-channel-item.channel-editable:hover .channel-remove-btn,
.pack-channel-item.channel-editable .channel-remove-btn:focus {
  opacity: 1;
}

.pack-channel-item.channel-editable .channel-remove-btn:hover {
  color: var(--error, #d32f2f);
  opacity: 1;
}

/* Removed channel row — keep pointer-events so restore btn works */
.pack-channel-item.channel-removed {
  opacity: 0.4;
  text-decoration: line-through;
}

/* Restore button for removed channels */
.channel-restore-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0 5px;
  line-height: 16px;
  flex-shrink: 0;
  transition: color 150ms ease, border-color 150ms ease;
}

.channel-restore-btn:hover {
  color: var(--success, #2e7d32);
  border-color: var(--success, #2e7d32);
}

/* Click-to-edit frequency — cursor hint */
.channel-freq-display {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 150ms ease;
}

.pack-channel-item.channel-editable:hover .channel-freq-display {
  border-bottom-color: var(--text-muted);
}

/* Inline frequency editor (appears on click) */
.channel-freq-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.channel-freq-confirm {
  background: none;
  border: 1px solid var(--border-default);
  color: #22c55e;
  cursor: pointer;
  font-size: 12px;
  padding: 1px 4px;
  line-height: 1;
  margin-left: 2px;
}

.channel-freq-confirm:hover {
  border-color: #22c55e;
  background: #22c55e;
  color: white;
}

.channel-freq-inline {
  width: 36px;
  font-size: 10px;
  padding: 1px 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  text-align: right;
}

.channel-freq-inline:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.channel-unit-inline {
  font-size: 9px;
  padding: 1px 12px 1px 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="6" viewBox="0 0 12 8" width="8" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.channel-unit-inline:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Revert / Save action bar */
.channel-actions-bar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

.channel-action-btn {
  font-size: 10px;
  padding: 4px 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: background 150ms ease, color 150ms ease;
}

.channel-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.channel-save-btn {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.channel-save-btn:hover {
  background: var(--accent-primary);
  color: white;
}

.channel-save-btn--saved {
  background: #4CAF50 !important;
  border-color: #4CAF50 !important;
  color: #fff !important;
  pointer-events: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* ============================================
   Voice Replace Picker (Voice Pack Detail)
   ============================================ */

.voice-pack-actions {
  display: flex;
  gap: 4px;
  padding: var(--space-1) 0;
}

.voice-replace-btn,
.voice-undo-btn {
  font-size: 9px;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: 0;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background 150ms ease, color 150ms ease;
}

.voice-replace-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.voice-undo-btn {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.voice-undo-btn:hover {
  background: var(--accent-primary);
  color: white;
}

/* Voice replaced bullet — left-side indicator in accordion header */
.voice-replaced-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50% !important;  /* Override LAW 9 — indicator dots must be round */
  background: transparent;
  flex-shrink: 0;
  /* Reserve the column space so names stay aligned */
  margin-right: 2px;
}

.voice-replaced-bullet.active {
  background: var(--accent-primary);
}

.voice-replace-picker {
  margin: 4px 0;
}

.voice-replace-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.voice-replace-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.voice-replace-option:hover {
  background: var(--bg-hover);
}

.voice-replace-option .pack-voice-name {
  flex: 1;
  font-size: 11px;
}

.voice-replace-option .pack-voice-position {
  font-size: 8px;
}

/* ============================================
   Health Score Card (in results panel)
   ============================================ */

#healthScoreCard {
  border-bottom: 1px solid var(--border-default);
}

/* ============================================
   SP-019: Content Education System
   Brief Lightboxes, Workflow, Glossary, Tutorial
   ============================================ */

.brief-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
  transition: color 0.15s;
}
.brief-term:hover, .brief-term:focus {
  color: var(--text-primary);
  text-decoration-style: solid;
  outline: none;
}
.term-popover {
  position: fixed;
  z-index: 10000;
  background: var(--bg-primary);
  border: var(--line-regular, 2px) solid var(--border-heavy);
  padding: var(--space-2);
  max-width: 280px;
  font-family: var(--font-mono);
  animation: popover-in 0.15s ease-out;
}
@keyframes popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.term-popover-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.term-popover-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Workflow wrapper: flex row with vertical sidebar + main content */
.workflow-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.workflow-wrapper > .main-content {
  flex: 1;
  min-width: 0;
}
/* Workflow Indicator — vertical sidebar rail */
/* SP-028: entire drawer area is clickable to toggle open/close */
.workflow-indicator {
  position: relative;
  padding: 4px 0;
  border-right: var(--line-hairline) solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
  width: clamp(72px, 9vw, 88px);
  overflow: visible;
  cursor: pointer;
}

.workflow-indicator.collapsed {
  width: 18px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.workflow-expand-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px 4px;
  line-height: 1;
  font-family: var(--font-mono);
  transition: color 0.15s;
}

.workflow-expand-btn:hover {
  color: var(--accent-primary);
}

.workflow-collapse-btn {
  position: absolute;
  top: -2px;
  right: -6px;
  background: var(--bg-primary);
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px 3px;
  line-height: 1;
  font-family: var(--font-mono);
  z-index: 2;
  transition: color 0.15s;
  border-radius: 2px;
}

.workflow-collapse-btn:hover {
  color: var(--accent-primary);
}

.workflow-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-default);
  z-index: 0;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 0;
  min-width: unset;
  transition: opacity 0.2s;
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
  cursor: pointer;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}
.workflow-step.pending { opacity: 0.55; }
.workflow-step.active { opacity: 1; position: relative; }
.workflow-step.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent-primary, #9d4edd);
  border-radius: 0 2px 2px 0;
}
.workflow-step.done { opacity: 0.9; }
.workflow-step-icon {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1;
}
.workflow-step.active .workflow-step-icon { color: var(--accent-primary); }
.workflow-step.done .workflow-step-icon { color: #9b59b6; }
.workflow-step-label {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-align: center;
}
.workflow-step.active .workflow-step-label {
  color: var(--accent-primary);
  font-weight: var(--weight-bold);
}
.workflow-step.done .workflow-step-label {
  color: #9b59b6;
}
/* Hover states only on devices with a real pointer (not touch) */
@media (hover: hover) and (pointer: fine) {
  .workflow-step:hover {
    background: rgba(157, 78, 221, 0.08);
    border-radius: 4px;
    transition: background 0.15s ease;
  }
  .workflow-step:hover .workflow-step-label {
    color: var(--accent-primary);
  }
  .workflow-step:hover .workflow-step-icon {
    color: var(--accent-primary);
  }
}

/* Workflow step tooltip — JS-driven, appended to document.body */
.wf-tooltip {
  position: fixed;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font-mono);
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Help trigger button — fixed bottom-left */
.help-trigger-btn {
  display: none !important; /* SP-078: hidden while tutorial is deactivated */
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 8000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: var(--line-hairline) solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.help-trigger-btn:hover {
  background: var(--bg-active);
  color: var(--ip-white, #fff);
}

/* Logo Panel */
.logo-panel {
  position: fixed;
  top: 48px;
  left: 8px;
  z-index: 9000;
  width: 360px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 64px);
  background: var(--bg-primary);
  border: var(--line-regular, 2px) solid var(--border-heavy);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: panel-slide-in 0.2s ease-out;
}
@keyframes panel-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.logo-panel.open { display: flex; }
.logo-panel-tabs {
  display: flex;
  border-bottom: var(--line-hairline) solid var(--border-default);
  flex-shrink: 0;
}
.logo-tab {
  flex: 1;
  padding: var(--space-1);
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.logo-tab:hover { color: var(--text-primary); }
.logo-tab.active {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  border-bottom-color: var(--accent-primary);
}
.logo-panel-body {
  overflow-y: auto;
  padding: var(--space-2);
  flex: 1;
}
.logo-tab-content { display: none; }
.logo-tab-content.active { display: block; }

.guide-steps { display: flex; flex-direction: column; gap: var(--space-2); }
.guide-step { display: flex; gap: var(--space-1); align-items: flex-start; }
.guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px; min-width: 24px;
  border: var(--line-hairline) solid var(--border-heavy);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-top: 1px;
}
.guide-step div {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.guide-step strong { color: var(--text-primary); }

.philosophy-content p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1) 0;
}
.philosophy-content strong {
  color: var(--text-primary);
  font-size: var(--text-base);
  display: block;
  margin-top: var(--space-2);
}
.philosophy-content p:first-child strong { margin-top: 0; }

.glossary-list { display: flex; flex-direction: column; gap: 0; }
.glossary-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-1) 0;
  border-bottom: var(--line-hairline) solid var(--border-default);
}
.glossary-item:last-child { border-bottom: none; }
.glossary-term {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.glossary-def {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Tooltips */
.has-tooltip { position: relative; }
.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--ip-gray-900);
  color: var(--ip-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  max-width: 220px;
  white-space: normal;
  z-index: 8000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  border: var(--line-hairline) solid var(--border-heavy);
}
.has-tooltip:hover::after { opacity: 1; }

/* Tutorial Overlay — SP-078: deactivated via CSS as safety net */
.tutorial-overlay {
  display: none !important; /* SP-078 */
  position: fixed; inset: 0; z-index: 12;
  background: rgba(0, 0, 0, 0.5);
}
.tutorial-spotlight {
  position: fixed;
  border: 2px solid var(--accent-primary);
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  z-index: 13;
  pointer-events: none;
}
.tutorial-card {
  position: fixed; z-index: 14;
  width: 290px;
  background: var(--bg-primary);
  border: var(--line-regular, 2px) solid var(--border-heavy);
  padding: var(--space-2);
  font-family: var(--font-mono);
  animation: popover-in 0.2s ease-out;
}
.tutorial-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tutorial-card-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}
.tutorial-card-actions {
  display: flex; justify-content: space-between; align-items: center;
}
.tutorial-card-nav { display: flex; align-items: center; gap: var(--space-1); }
.tutorial-progress { font-size: var(--text-xs); color: var(--text-muted); }
.tutorial-next {
  background: var(--bg-active); color: var(--ip-white); border: none;
  padding: 4px 12px;
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--weight-bold); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tutorial-next:hover { opacity: 0.85; }
.tutorial-skip {
  background: none; border: none;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.tutorial-skip:hover { color: var(--text-secondary); }

/* Mobile tutorial — thumb-reachable card in lower screen */
@media (max-width: 768px) {
  .tutorial-card {
    width: auto !important;
    max-width: calc(100vw - 32px);
  }
  .tutorial-card-actions {
    flex-direction: column-reverse;
    gap: 8px;
    align-items: stretch;
  }
  .tutorial-card-nav {
    justify-content: space-between;
  }
  .tutorial-next {
    padding: 10px 20px;
    font-size: var(--text-base, 14px);
    min-height: 44px;
  }
  .tutorial-skip {
    padding: 8px 0;
    font-size: var(--text-sm, 12px);
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .workflow-indicator { padding: var(--space-1) 2px; }
  .workflow-step { min-width: unset; padding: 2px 1px; }
  .help-trigger-btn { width: 28px; height: 28px; bottom: 12px; left: 12px; font-size: var(--text-sm); }
  .logo-panel { width: calc(100vw - 16px); top: 44px; left: 8px; }
  .tutorial-card { width: calc(100vw - 32px); left: 16px !important; }
  .has-tooltip::after { display: none; }
}

/* ============================================
   Account Menu Button (header, anon users)
   ============================================ */

.account-menu-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary, #666);
  transition: color 150ms ease, border-color 150ms ease;
  position: relative;
}
.account-menu-btn:hover {
  color: var(--accent-color, #DD5100);
  border-color: var(--accent-color, #DD5100);
}

/* ============================================
   Hide Demo Partners Toggle
   ============================================ */

.hide-demo-toggle {
  display: none; /* hidden until user has custom partners */
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #555);
  cursor: pointer;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: var(--bg-tertiary, #f0f0f0);
  border-radius: 4px;
  user-select: none;
  transition: background 0.15s;
}
.hide-demo-toggle:hover {
  background: var(--bg-secondary, #e8e8e8);
}
.hide-demo-toggle input[type="checkbox"] {
  accent-color: #DD5100;
  margin: 0;
  width: 16px;
  height: 16px;
}
.hide-demo-toggle span {
  opacity: 1;
}

/* ============================================
   Upsell Ticker (SP-021)
   Stock-ticker-style scrolling marquee for free/anonymous users.
   Anchored below the calendar section.
   ============================================ */

.upsell-ticker {
  width: 100%;
  height: 28px;
  background: #DD5100;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.upsell-ticker:hover {
  background: #c44800;
}

.upsell-ticker.hidden {
  display: none;
}

.upsell-ticker .upsell-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 0;
  overflow: visible;
  animation: sp21-ticker-scroll 45s linear infinite;
  will-change: transform;
  pointer-events: none;
}

.upsell-ticker:hover .upsell-ticker-track {
  animation-play-state: paused;
}

/* SP-158: Pause ticker when modals are open to save GPU */
body.modal-open .upsell-ticker-track {
  animation-play-state: paused;
  will-change: auto;
}

.upsell-ticker-msg {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.02em;
  padding: 0 8px;
  line-height: 28px;
}

.upsell-ticker-sep {
  color: rgba(255,255,255,0.5);
  padding: 0 6px;
  font-size: 10px;
  line-height: 28px;
}

.upsell-ticker-cta {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 6px;
}

@keyframes sp21-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: slightly smaller text */
@media (max-width: 768px) {
  .upsell-ticker {
    height: 24px;
  }
  .upsell-ticker-msg {
    font-size: 11px;
    line-height: 24px;
  }
  .upsell-ticker-sep {
    line-height: 24px;
  }
}

/* SP-NESTED: child attributes indented under their parent */
.voice-attr-children {
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border-color, #ccc);
}
.voice-attr-child {
  padding: 3px 0 3px 8px;
  border-bottom: none !important;
  opacity: 0.88;
}
.voice-attr-child .voice-attr-name { font-size: 10px; font-weight: 500; }
.voice-attr-child .voice-attr-desc { font-size: 9px; }