/* ============================================
   FEATURE TOUR - COMPLETE REDESIGN v5
   ============================================
   Premium modal-based tour with:
   - Larger modal (680px) for clarity
   - Quick Tour vs Full Tour mode selection
   - Topic browser with clickable tabs
   - Section-based organization
   - Design system compliance
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - TOUR TOKENS
   ============================================ */
:root {
  /* Tour-specific tokens using design system vars */
  --tour-modal-width: 820px;
  --tour-modal-height: min(600px, 86vh);
  --tour-diagram-height: 140px;

  /* Colors from design system */
  --tour-primary: var(--primary-500, #14b8a6);
  --tour-primary-light: var(--primary-100, #ccfbf1);
  --tour-primary-dark: var(--primary-700, #0f766e);
  --tour-accent: var(--accent-500, #06b6d4);

  --tour-success: var(--success, #10b981);
  --tour-warning: var(--warning, #f59e0b);
  --tour-error: var(--error, #ef4444);

  --tour-surface: var(--surface-primary, #ffffff);
  --tour-surface-alt: var(--slate-50, #f8fafc);
  --tour-border: var(--slate-200, #e2e8f0);

  --tour-text: var(--slate-800, #1e293b);
  --tour-text-muted: var(--slate-500, #64748b);
  --tour-text-light: var(--slate-400, #94a3b8);
}

/* Dark mode tokens */
body.dark-mode {
  --tour-surface: var(--surface-primary, #0f172a);
  --tour-surface-alt: var(--slate-800, #1e293b);
  --tour-border: var(--slate-700, #334155);
  --tour-text: var(--slate-100, #f1f5f9);
  --tour-text-muted: var(--slate-400, #94a3b8);
  --tour-text-light: var(--slate-500, #64748b);
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.tour-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--transition-slow, 300ms) ease;
}

.tour-modal-overlay.active {
  opacity: 1;
}

body.dark-mode .tour-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

/* ============================================
   MODAL CONTAINER - LARGER SIZE
   ============================================ */
.tour-modal {
  position: relative;
  background: var(--tour-surface);
  border-radius: var(--radius-2xl, 24px);
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform var(--transition-bounce, 500ms cubic-bezier(0.34, 1.56, 0.64, 1));
}

.tour-modal-large {
  width: var(--tour-modal-width);
  max-width: calc(100vw - 32px);
  height: var(--tour-modal-height);
}

.tour-modal-overlay.active .tour-modal {
  transform: scale(1) translateY(0);
}

body.dark-mode .tour-modal {
  background: var(--tour-surface);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 80px rgba(20, 184, 166, 0.15);
}

/* Close button */
.tour-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-full, 9999px);
  color: var(--tour-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms) ease;
}

.tour-close-btn:hover {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
  color: var(--tour-primary);
  transform: rotate(90deg);
}

.tour-close-btn i {
  font-size: 14px;
}

/* ============================================
   TOUR CONTENT CONTAINER
   ============================================ */
/* Tour content fills the modal exactly */
.tour-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* ============================================
   MODE SELECTOR VIEW - COMPACT FOR NO SCROLL
   ============================================ */
.tour-selector {
  position: absolute;
  inset: 0;
  padding: 24px 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NOT justify-content:center. When the content is taller than the box (short
     phone viewports), centring overflows BOTH ends and the overflow above the
     top is unreachable by scrolling, which left the footer link off-screen.
     Start at the top and let the auto margins below centre it only when there
     is spare room. */
  justify-content: flex-start;
  gap: 16px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Centre the stack only when it FITS: auto margins absorb spare space but
   collapse to zero once the content overflows, so nothing is pushed out of
   reach. This is what justify-content:center was trying to do, done safely. */
.tour-selector > :first-child { margin-top: auto; }
.tour-selector > :last-child { margin-bottom: auto; }

.tour-selector-header {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tour-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  border-radius: var(--radius-md, 12px);
  flex-shrink: 0;
  box-shadow:
    0 4px 12px rgba(20, 184, 166, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tour-logo i {
  font-size: 20px;
  color: white;
}

.tour-selector-titles {
  text-align: left;
  /* Base (not media-scoped) so the 720-480px band, where the row is still
     horizontal but the logo is already 64px, can shrink instead of clipping.
     Flex children default to min-width:auto and refuse to go below their
     min-content width, which is what overflowed the header. */
  min-width: 0;
}

.tour-selector-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tour-text);
  margin: 0 0 2px;
  letter-spacing: -0.02em;
}

.tour-selector-header p {
  font-size: 0.875rem;
  color: var(--tour-text-muted);
  margin: 0;
}

/* Mode cards - compact */
.tour-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.tour-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--tour-surface-alt);
  border: 2px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-base, 200ms) ease;
  position: relative;
  overflow: hidden;
}

.tour-mode-card:hover {
  border-color: var(--tour-primary);
  background: var(--tour-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
}

/* Highlight the card with the Recommended badge (Full Tour) */
.tour-mode-card:last-child {
  border-color: var(--tour-primary);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
}

.tour-mode-card:last-child:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
}

.mode-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  border-radius: var(--radius-md, 12px);
  flex-shrink: 0;
}

.mode-card-icon i {
  font-size: 16px;
  color: white;
}

.mode-card-content {
  flex: 1;
}

.mode-card-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tour-text);
  margin: 0 0 2px;
}

.mode-card-content p {
  font-size: 0.8rem;
  color: var(--tour-text-muted);
  margin: 0;
}

.mode-card-time {
  font-size: 0.7rem;
  color: var(--tour-text-light);
  margin-top: 2px;
  display: block;
}

.mode-card-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
}

.tour-mode-card-browse {
  background: transparent;
  border-style: dashed;
}

.tour-mode-card-browse .mode-card-icon {
  background: var(--tour-border);
}

body.dark-mode .tour-mode-card-browse .mode-card-icon {
  background: var(--slate-600, #475569);
}

/* Progress banner - prominent with clear Continue button */
.tour-progress-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(20, 184, 166, 0.08) 100%);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg, 16px);
  width: 100%;
  max-width: 420px;
}

.tour-progress-banner i {
  color: var(--tour-success);
  font-size: 18px;
  flex-shrink: 0;
}

.tour-progress-banner span {
  flex: 1;
  font-size: 0.9rem;
  color: var(--tour-text);
  font-weight: 500;
}

.tour-continue-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--tour-success) 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md, 12px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms) ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  white-space: nowrap;
}

.tour-continue-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Skip button */
.tour-skip-all-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--tour-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color var(--transition-fast, 150ms) ease;
}

.tour-skip-all-btn:hover {
  color: var(--tour-text);
  text-decoration: underline;
}

/* ============================================
   TOPIC BROWSER VIEW
   ============================================ */
.tour-browser {
  padding: 24px 32px 32px;
}

.tour-browser-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.tour-back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
  color: var(--tour-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms) ease;
  flex-shrink: 0;
}

.tour-back-btn:hover {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
  color: var(--tour-primary);
}

.tour-browser-header h2 {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tour-text);
  margin: 0;
}

.tour-browser-progress {
  padding: 6px 14px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  color: var(--tour-text-muted);
}

/* Sections grid */
.tour-sections-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tour-section-card {
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.tour-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--tour-border);
}

.tour-section-header i {
  color: var(--tour-primary);
  font-size: 16px;
}

.tour-section-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tour-text);
  margin: 0;
}

.tour-topic-list {
  display: flex;
  flex-direction: column;
}

.tour-topic-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tour-border);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms) ease;
  width: 100%;
}

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

.tour-topic-item:hover {
  background: var(--tour-primary-light);
}

.tour-topic-item.viewed {
  opacity: 0.7;
}

.topic-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
  flex-shrink: 0;
}

.topic-item-icon i {
  font-size: 14px;
  color: var(--tour-primary);
}

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

.topic-item-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tour-text);
}

.topic-item-subtitle {
  display: block;
  font-size: 0.8rem;
  color: var(--tour-text-muted);
  margin-top: 2px;
}

.topic-viewed-check {
  color: var(--tour-success);
  font-size: 14px;
}

/* ============================================
   TOUR VIEW (MAIN CONTENT)
   ============================================ */
.tour-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tour-view-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  padding-right: 64px; /* clear the absolutely-positioned X close button */
  border-bottom: 1px solid var(--tour-border);
  box-sizing: border-box;
  background: var(--tour-surface);
  z-index: 1;
}

.tour-section-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--tour-primary-light);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tour-primary-dark);
}

.tour-section-badge i {
  font-size: 12px;
}

.tour-topic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  max-width: 45%;
  justify-content: flex-end;
}

.tour-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--tour-border);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms) ease;
  padding: 0;
}

.tour-nav-dot:hover {
  background: var(--tour-text-light);
  transform: scale(1.2);
}

.tour-nav-dot.viewed {
  background: var(--tour-primary-light);
}

.tour-nav-dot.active {
  background: var(--tour-primary);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2);
}

/* Topic content - side-by-side layout: diagram left, text right */
.tour-topic-content {
  position: absolute;
  top: 48px;
  bottom: 48px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.tour-diagram-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, var(--tour-surface-alt) 0%, var(--tour-surface) 100%);
  width: 44%;
  flex-shrink: 0;
  box-sizing: border-box;
  border-right: 1px solid var(--tour-border);
  overflow-y: auto;
}

/* Real-UI screenshot diagrams (drift-proof captures of the running app). */
.tour-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tour-shot-img {
  max-width: 100%;
  max-height: calc(var(--tour-diagram-height, 140px) + 180px);
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--tour-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  background: #fff;
}
.tour-shot-caption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tour-text-muted, #64748b);
  text-align: center;
  max-width: 320px;
}
.tour-shot-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  color: var(--tour-text-muted, #94a3b8);
  font-size: 28px;
}
/* Two stacked screenshots (e.g. Find Times form → results). */
.tour-shot-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.tour-shot-stack .tour-shot-img {
  max-height: 240px;
}

.tour-text-area {
  flex: 1;
  padding: 24px 24px 12px;
  overflow-y: auto;
  min-width: 0;
}

.tour-topic-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.tour-topic-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  border-radius: var(--radius-md, 12px);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.tour-topic-icon i {
  font-size: 16px;
  color: white;
}

.tour-topic-titles {
  flex: 1;
}

.tour-topic-titles h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tour-text);
  margin: 0 0 1px;
  letter-spacing: -0.01em;
}

.tour-topic-subtitle {
  font-size: 0.875rem;
  color: var(--tour-primary);
  font-weight: 500;
}

.tour-topic-description {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tour-text-muted);
  margin: 0;
}

/* Digestible format: a short lead sentence + scannable bullet points,
   replacing the big paragraph for topics that define lead/points. */
.tour-topic-lead {
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--tour-text);
  margin: 0 0 8px;
}
.tour-topic-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tour-topic-points li {
  position: relative;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--tour-text-muted);
}
.tour-topic-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tour-primary);
}

/* A bullet carrying real palette swatches drops the generic teal dot: two
   colour marks on one line would read as two signals. The swatches ARE the
   bullet. Colours come from the live --status-* tokens (see swatchFor), so the
   tour shows the palette instead of naming it in prose. */
.tour-topic-points li.has-swatch {
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tour-topic-points li.has-swatch::before { content: none; }
.tour-point-swatches {
  display: inline-flex;
  gap: 3px;
  flex: none;
  position: relative;
  top: 0.15em;
}
.tour-point-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

/* Tip callout */
.tour-topic-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(20, 184, 166, 0.08);
  border-left: 3px solid rgba(20, 184, 166, 0.5);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tour-text-muted);
}

.tour-topic-tip i {
  color: rgba(20, 184, 166, 0.8);
  font-size: 0.85rem;
  margin-top: 2px;
  flex-shrink: 0;
}

body.dark-mode .tour-topic-tip {
  background: rgba(20, 184, 166, 0.1);
  border-left-color: rgba(20, 184, 166, 0.4);
}

/* Navigation - pinned to bottom of modal */
.tour-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 28px 10px;
  border-top: 1px solid var(--tour-border);
  background: var(--tour-surface);
  box-sizing: border-box;
  z-index: 1;
}

.tour-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-md, 12px);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base, 200ms) ease;
}

.tour-nav-btn i {
  font-size: 12px;
}

.tour-nav-prev {
  background: var(--tour-surface-alt);
  color: var(--tour-text-muted);
  border: 1px solid var(--tour-border);
}

.tour-nav-prev:hover {
  background: var(--tour-border);
  color: var(--tour-text);
}


.tour-nav-primary {
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
}

.tour-nav-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

.tour-nav-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tour-text-muted);
}

/* ============================================
   COMPLETION VIEW
   ============================================ */
.tour-completion {
  position: absolute;
  inset: 0;
  padding: 48px 40px;
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
}

.tour-completion-graphic {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 32px;
}

.completion-check {
  width: 100%;
  height: 100%;
}

.completion-check svg {
  width: 100%;
  height: 100%;
}

.completion-circle {
  fill: none;
  stroke: var(--tour-success);
  stroke-width: 2;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: circleIn 0.6s ease forwards;
}

@keyframes circleIn {
  to { stroke-dashoffset: 0; }
}

.completion-path {
  fill: none;
  stroke: var(--tour-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkIn 0.4s ease 0.4s forwards;
}

@keyframes checkIn {
  to { stroke-dashoffset: 0; }
}

.completion-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  opacity: 0;
  animation: confettiBurst 1s ease calc(var(--delay) + 0.6s) forwards;
}

.confetti:nth-child(1) { background: var(--tour-primary); }
.confetti:nth-child(2) { background: var(--tour-warning); }
.confetti:nth-child(3) { background: #3b82f6; }
.confetti:nth-child(4) { background: #ec4899; }
.confetti:nth-child(5) { background: #8b5cf6; }

@keyframes confettiBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), -70px) rotate(360deg) scale(0);
  }
}

.tour-completion h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tour-text);
  margin: 0 0 12px;
}

.completion-subtitle {
  font-size: 1rem;
  color: var(--tour-text-muted);
  margin: 0 0 28px;
}

.completion-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--tour-text);
}

.stat-item i {
  color: var(--tour-success);
}

.stat-remaining i {
  color: var(--tour-text-light);
}

.completion-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-md, 12px);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base, 200ms) ease;
  min-width: 260px;
}

.tour-btn i {
  font-size: 16px;
}

.tour-btn-primary {
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
}

.tour-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

.tour-btn-secondary {
  background: var(--tour-surface-alt);
  color: var(--tour-text-muted);
  border: 1px solid var(--tour-border);
}

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

/* Quiet "just take me to the board" skip beneath the first-win CTA. Text-only
   so it doesn't compete with the primary Find Time action above it. */
.tour-completion-skip {
  background: none;
  border: none;
  color: var(--tour-text-light);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 12px;
  margin: 4px auto 0;
  display: block;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.tour-completion-skip:hover {
  color: var(--tour-text);
  background: var(--tour-surface-alt);
}

.completion-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--tour-text-light);
  margin: 0;
}

.completion-hint i {
  color: var(--tour-warning);
}

/* ============================================
   DIAGRAMS - SHARED STYLES
   ============================================ */
.tour-diagram-area > div {
  animation: diagramFadeIn 0.5s ease;
  max-width: 100%;
}

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

/* ============================================
   DIAGRAM: WELCOME - HORIZONTAL TIMELINE PREVIEW
   ============================================ */
.diagram-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 500px;
}

.welcome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.brand-logo i {
  font-size: 16px;
  color: white;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tour-text);
  letter-spacing: -0.02em;
}

.welcome-timeline-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Horizontal row layout - locations on LEFT */
.preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-label {
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-align: center;
  padding: 6px 10px;
  background: var(--tour-primary);
  border-radius: var(--radius-sm, 8px);
  min-width: 60px;
  flex-shrink: 0;
}

.preview-blocks-row {
  display: flex;
  flex: 1;
  gap: 2px;
  height: 28px;
}

.pblock {
  flex: 1;
  border-radius: 4px;
  animation: blockFadeIn 0.5s ease both;
}

.preview-row:nth-child(1) .pblock { animation-delay: 0.1s; }
.preview-row:nth-child(2) .pblock { animation-delay: 0.2s; }
.preview-row:nth-child(3) .pblock { animation-delay: 0.3s; }

@keyframes blockFadeIn {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

/* Actual app day cycle colors */
/* Welcome preview blocks - exact match to actual app atmospheric palette */
.pblock.night-late { background: rgba(28, 32, 58, 0.85); }         /* Midnight (0-2) - deep indigo */
.pblock.night-mid { background: rgba(62, 68, 110, 0.85); }         /* Pre-dawn (3-4) - twilight indigo */
.pblock.dawn { background: rgba(150, 165, 210, 0.85); }            /* Dawn (5) - periwinkle */
.pblock.morning-early { background: rgba(130, 185, 235, 0.85); }   /* Early morning (6-7) - azure */
.pblock.morning-mid { background: rgba(210, 225, 250, 0.85); }     /* Mid morning (8-9) - pale blue */
.pblock.midday { background: rgba(255, 242, 205, 0.85); }          /* Midday (10-12) - champagne */
.pblock.afternoon { background: rgba(250, 190, 195, 0.85); }       /* Afternoon (14-16) - soft rose */
.pblock.evening { background: rgba(238, 165, 190, 0.85); }         /* Golden hour (17) - dusty rose */
.pblock.twilight { background: rgba(195, 150, 195, 0.85); }        /* Twilight (19) - violet */
.pblock.night-early { background: rgba(92, 78, 138, 0.85); }       /* Night (21) - deep purple */

/* Scanner overlay on the welcome preview. Static: parked over the team's
   shared midday window. The old scannerMoveH animation changed left + width
   together, so it stretched as it slid ("jelly"). A still overlay reads as a
   real screenshot of the scanner resting on the best slot. */
.preview-scanner-h {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 38%;
  width: 22%;
  background: rgba(20, 184, 166, 0.2);
  border: 2px solid var(--tour-primary);
  border-radius: var(--radius-sm, 8px);
}

/* ============================================
   DIAGRAM: SCANNER BAR - SOLID UI-LIKE
   ============================================ */
.diagram-scanner {
  width: 100%;
  max-width: 420px;
}

.scanner-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scanner-hours {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--tour-text-light);
  padding: 0 4px;
}

.scanner-track {
  height: 44px;
  /* Exact match to app atmospheric palette: 6AM dawn > 9AM morning > 12PM noon > 3PM rose > 6PM violet */
  background: linear-gradient(to right,
    rgba(130, 185, 235, 0.85) 0%,       /* 6AM - dawn azure */
    rgba(210, 225, 250, 0.85) 20%,       /* 9AM - pale blue morning */
    rgba(255, 242, 205, 0.85) 40%,       /* 12PM - champagne midday */
    rgba(250, 190, 195, 0.85) 60%,       /* 3PM - soft rose afternoon */
    rgba(238, 165, 190, 0.85) 80%,       /* 5PM - dusty rose golden hour */
    rgba(195, 150, 195, 0.85) 100%       /* 7PM - violet twilight */
  );
  border-radius: 6px;
  padding: 4px;
  position: relative;
  border: 1px solid var(--tour-border);
}

.scanner-bar-demo {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 28%;
  margin-left: 30%;
  /* Static: the bar holds one position + size. The old scannerSlide animation
     changed width AND margin together, so the bar resized as it moved ("jelly").
     A still bar reads as a real screenshot and keeps focus on the explanation. */
}

/* Solid rectangular handles like the real scanner. Static teal (the live
   scanner bar is the app primary, not a cycling traffic light). */
.scanner-handle-solid {
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  background: var(--tour-primary);
}

.scanner-handle-solid.left {
  border-radius: 4px 0 0 4px;
}

.scanner-handle-solid.right {
  border-radius: 0 4px 4px 0;
}

.handle-grip {
  width: 3px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

.scanner-body-solid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  /* Static teal fill (was a cycling traffic-light animation that, combined with
     the moving bar, read as "jelly"). The bar represents the scanner itself,
     which is the app primary colour, not a per-status verdict. */
  background: color-mix(in srgb, var(--tour-primary) 85%, transparent);
  border-top: 2px solid var(--tour-primary);
  border-bottom: 2px solid var(--tour-primary);
}

.scanner-time-range {
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.scanner-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tour-text-muted);
}

.scanner-hint i {
  color: var(--tour-primary);
  animation: arrowsBounce 2s ease-in-out infinite;
}

@keyframes arrowsBounce {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.2); }
}

/* ============================================
   DIAGRAM: SCANNER ANATOMY - Labeled static
   ============================================ */
.diagram-scanner-anatomy {
  width: 100%;
  max-width: 440px;
}

.anatomy-container {
  position: relative;
  padding: 50px 20px 60px;
}

/* Timeline blocks background */
.anatomy-timeline {
  display: flex;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--tour-border);
}

.anatomy-block {
  flex: 1;
}

/* Scanner anatomy blocks - exact match to actual app atmospheric palette */
.anatomy-block.morning { background: rgba(120, 182, 235, 0.85); }    /* Early morning - azure */
.anatomy-block.midday { background: rgba(255, 242, 205, 0.85); }     /* Pre-noon - champagne */
.anatomy-block.afternoon { background: rgba(250, 190, 195, 0.85); }  /* Mid afternoon - soft rose */
.anatomy-block.evening { background: rgba(238, 165, 190, 0.85); }    /* Golden hour - dusty rose */

/* Average bar overlay */
.anatomy-team-bar {
  position: absolute;
  top: 50px;
  left: 20px;
  right: 20px;
  height: 44px;
  display: flex;
  pointer-events: none;
}

.anatomy-avg-shading {
  background: rgba(100, 116, 139, 0.15);
}

.anatomy-avg-shading.left {
  flex: 0.25;
  border-radius: 6px 0 0 6px;
}

.anatomy-avg-shading.right {
  flex: 0.35;
  border-radius: 0 6px 6px 0;
}

.anatomy-avg-center {
  flex: 0.4;
  border-top: 2px dashed var(--tour-primary);
  border-bottom: 2px dashed var(--tour-primary);
  background: rgba(20, 184, 166, 0.08);
}

/* Scanner bar */
.anatomy-scanner {
  position: absolute;
  top: 54px;
  left: calc(20px + 20%);
  width: 30%;
  height: 36px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.anatomy-handle {
  width: 14px;
  background: #16a34a;
}

.anatomy-handle.left { border-radius: 4px 0 0 4px; }
.anatomy-handle.right { border-radius: 0 4px 4px 0; }

.anatomy-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.85);
  border-top: 2px solid #16a34a;
  border-bottom: 2px solid #16a34a;
  color: white;
  font-size: 11px;
  font-weight: 600;
}

/* Labels with arrows */
.anatomy-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--tour-text);
  text-align: center;
  white-space: nowrap;
}

.anatomy-label span {
  background: var(--tour-surface);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--tour-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  line-height: 1.3;
}

.anatomy-label small {
  font-size: 9px;
  color: var(--tour-text-muted);
  display: block;
}

.label-arrow {
  width: 2px;
  height: 16px;
  background: var(--tour-text-light);
  position: relative;
}

.label-arrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--tour-text-light);
}

/* Position labels - spread apart to avoid overlap */
.label-handles {
  top: 0px;
  left: calc(20px + 8%);
}

.label-center {
  top: 0px;
  left: calc(20px + 38%);
}

.label-avgbar {
  bottom: 4px;
  right: calc(20px + 18%);
}

.label-avgbar .label-arrow {
  order: 1;
  transform: rotate(180deg);
}

/* ============================================
   DIAGRAM: ADD TEAMMATE
   ============================================ */
.diagram-add-teammate {
  width: 100%;
  max-width: 300px;
}

.add-demo-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.add-demo-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
}

.add-demo-search i {
  color: var(--tour-text-light);
}

.typing-container {
  flex: 1;
  display: flex;
  align-items: center;
}

/* The add-teammate diagram's search box is the Add-a-Timezone (reference
   clock) path, which resolves a CITY — not a person. Type a city name so the
   diagram doesn't imply the search adds a teammate (it doesn't; teammates come
   from the separate invite flow). Matches the result card below it. */
.typing-text::after {
  content: 'San Francisco';
  color: var(--tour-text);
  animation: typeText 3s steps(7) infinite;
}

@keyframes typeText {
  0%, 10% { content: ''; }
  25% { content: 'San'; }
  40% { content: 'San Fr'; }
  55% { content: 'San Franc'; }
  70%, 100% { content: 'San Francisco'; }
}

.typing-cursor {
  color: var(--tour-primary);
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.add-demo-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--tour-primary-light);
  border-radius: var(--radius-md, 12px);
  animation: resultSlide 0.5s ease 2s both;
  opacity: 0;
}

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

.result-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-primary);
  border-radius: var(--radius-full, 9999px);
}

.result-avatar i {
  color: white;
  font-size: 16px;
}

.result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.result-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tour-text);
}

.result-tz {
  font-size: 0.8rem;
  color: var(--tour-text-muted);
}

.result-add-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-primary);
  border: none;
  border-radius: var(--radius-full, 9999px);
  color: white;
  cursor: pointer;
}

/* ============================================
   DIAGRAM: WORKING HOURS - HORIZONTAL WITH DAY COLORS
   ============================================ */
/* ---- working-hours diagram: a TimeRangePicker-style track with the working
   window as a bracket + sleep overlay + drag handles (mirrors
   js/ui/time-range-picker.js). Replaces the dead legacy .wh-column-demo block. */
.diagram-working-hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.wh-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tour-text);
}
.wh-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
}
.wh-hours {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--tour-text-light);
  padding: 0 2px;
}
.wh-track {
  position: relative;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(to right,
    rgba(130, 185, 235, 0.5) 0%,
    rgba(255, 242, 205, 0.6) 45%,
    rgba(238, 165, 190, 0.5) 75%,
    rgba(92, 78, 138, 0.5) 100%);
  border: 1px solid var(--tour-border);
  overflow: hidden;
}
.wh-sleep {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--tour-status-sleep) 32%, transparent),
    color-mix(in srgb, var(--tour-status-sleep) 32%, transparent) 5px,
    transparent 5px, transparent 10px);
}
.wh-sleep-left  { left: 0; width: 29%; }      /* 0am to ~7am */
.wh-sleep-right { right: 0; width: 4%; }       /* 11pm onward */
.wh-bracket {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tour-primary);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tour-primary) 16%, transparent);
}
.wh-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--tour-primary-dark) 90%, black);
  white-space: nowrap;
}
.wh-handle {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 8px;
  background: var(--tour-primary);
  border-radius: 3px;
  cursor: ew-resize;
}
.wh-handle-left  { left: -4px; }
.wh-handle-right { right: -4px; }
.wh-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.66rem;
  color: var(--tour-text-muted);
}
.wh-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wh-key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.wh-key-work  { background: var(--tour-primary); }
.wh-key-sleep {
  background: repeating-linear-gradient(45deg,
    var(--tour-status-sleep), var(--tour-status-sleep) 3px,
    transparent 3px, transparent 6px);
  border: 1px solid color-mix(in srgb, var(--tour-status-sleep) 40%, transparent);
}
.wh-legend-drag { margin-left: auto; color: var(--tour-text-light); font-style: italic; }
.wh-legend-drag i { font-size: 0.6rem; }

/* ============================================
   DIAGRAM: DAY CYCLE - ACTUAL APP COLORS
   ============================================ */
.diagram-day-cycle {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cycle-24hr {
  display: flex;
  height: 48px;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hour-block {
  flex: 1;
}

/* Actual app colors for each time period */
/* Exact match to style.css data-hour colors (authoritative palette) */
.hour-block.h0 { background: linear-gradient(145deg, rgba(28, 32, 58, 0.85), rgba(42, 48, 85, 0.85)); }        /* Midnight - deep indigo */
.hour-block.h3 { background: linear-gradient(145deg, rgba(62, 68, 110, 0.85), rgba(98, 102, 148, 0.85)); }      /* Pre-dawn - twilight indigo */
.hour-block.h5 { background: linear-gradient(145deg, rgba(150, 165, 210, 0.85), rgba(200, 218, 245, 0.85)); }   /* Early dawn - periwinkle */
.hour-block.h7 { background: linear-gradient(145deg, rgba(120, 182, 235, 0.85), rgba(185, 218, 252, 0.85)); }   /* Early morning - azure */
.hour-block.h9 { background: linear-gradient(145deg, rgba(210, 225, 250, 0.85), rgba(255, 248, 238, 0.85)); }   /* Mid morning - pale blue to cream */
.hour-block.h11 { background: linear-gradient(145deg, rgba(255, 242, 205, 0.85), rgba(255, 242, 200, 0.85)); }  /* Pre-noon - champagne */
.hour-block.h13 { background: linear-gradient(145deg, rgba(255, 218, 145, 0.85), rgba(255, 205, 180, 0.85)); }  /* Early afternoon - amber to coral */
.hour-block.h15 { background: linear-gradient(145deg, rgba(250, 190, 195, 0.85), rgba(255, 220, 225, 0.85)); }  /* Mid afternoon - soft rose */
.hour-block.h17 { background: linear-gradient(145deg, rgba(238, 165, 190, 0.85), rgba(250, 205, 225, 0.85)); }  /* Golden hour - dusty rose */
.hour-block.h19 { background: linear-gradient(145deg, rgba(195, 150, 195, 0.85), rgba(225, 190, 225, 0.85)); }  /* Late sunset - violet */
.hour-block.h21 { background: linear-gradient(145deg, rgba(92, 78, 138, 0.85), rgba(138, 125, 182, 0.85)); }    /* Night - deep purple */
.hour-block.h23 { background: linear-gradient(145deg, rgba(35, 35, 72, 0.85), rgba(62, 62, 108, 0.85)); }       /* Late night - deep night */

.cycle-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--tour-text-muted);
  padding: 0 4px;
}

.cycle-period-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 2px;
  margin-bottom: 6px;
}

.period-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.period-label.night-label { color: rgba(62, 68, 110, 0.9); }
.period-label.morning-label { color: rgba(100, 160, 220, 0.9); }
.period-label.midday-label { color: rgba(200, 180, 100, 0.9); }
.period-label.evening-label { color: rgba(200, 140, 175, 0.9); }

.cycle-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--tour-text-muted);
}

.cycle-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* Legend dots - exact match to actual app atmospheric palette */
.leg-dot.night { background: linear-gradient(145deg, rgba(28, 32, 58, 0.85), rgba(62, 68, 110, 0.85)); }
.leg-dot.morning { background: linear-gradient(145deg, rgba(120, 182, 235, 0.85), rgba(210, 225, 250, 0.85)); }
.leg-dot.midday { background: linear-gradient(145deg, rgba(255, 242, 205, 0.85), rgba(255, 218, 145, 0.85)); }
.leg-dot.evening { background: linear-gradient(145deg, rgba(238, 165, 190, 0.85), rgba(195, 150, 195, 0.85)); }

/* ============================================
   DIAGRAM: EDGE HIGHLIGHTS
   ============================================ */
.diagram-edges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.edge-demo-column {
  display: flex;
  align-items: stretch;
  height: 100px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.edge-strip {
  width: 6px;
  animation: edgePulse 2s ease-in-out infinite;
}

.edge-strip.green {
  background: #16a34a;
}

.edge-strip.amber {
  background: #fbbf24;
  animation-delay: 0.5s;
}

.edge-strip.red {
  background: #dc2626;
  animation-delay: 1s;
}

@keyframes edgePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: 0 0 12px currentColor; }
}

.edge-content {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edge-content > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--tour-text);
}

.edge-blocks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edge-blocks .block {
  height: 16px;
  background: linear-gradient(to right, rgba(16, 185, 129, 0.2), transparent);
  border-radius: 3px;
}

.edge-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--tour-text-muted);
}

.edge-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.edge-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
}

.edge-legend .dot.green { background: #16a34a; }
.edge-legend .dot.amber { background: #fbbf24; }
.edge-legend .dot.red { background: #dc2626; }

/* ============================================
   DIAGRAM: FIND TIMES
   ============================================ */
.diagram-find-times {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.ft-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-full, 9999px);
  font-size: 13px;
  color: var(--tour-text-muted);
}

.ft-search-bar i {
  color: var(--tour-text-light);
}

.ft-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ft-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  color: var(--tour-text-muted);
}

.ft-filter i {
  font-size: 10px;
}

.ft-filter.active {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
  color: var(--tour-primary-dark);
}

.ft-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: ftResultsSlide 0.5s ease 0.3s both;
  opacity: 0;
}

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

.ft-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
}

.ft-result.best {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
  border-color: var(--tour-success);
}

.ft-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--tour-text);
}

.ft-match {
  font-size: 11px;
  color: var(--tour-text-muted);
}

.ft-result.best .ft-match {
  color: var(--tour-success);
  font-weight: 500;
}

/* ============================================
   DIAGRAM: STATUS PILLS
   ============================================ */
.diagram-status-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pills-container {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-full, 9999px);
}

.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full, 9999px);
  font-size: 14px;
  font-weight: 600;
  animation: pillPop 0.5s ease both;
}

.pill:nth-child(1) { animation-delay: 0.1s; }
.pill:nth-child(2) { animation-delay: 0.2s; }
.pill:nth-child(3) { animation-delay: 0.3s; }

@keyframes pillPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.pill-good {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.pill-neutral {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

.pill-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.pills-labels {
  display: flex;
  gap: 32px;
  font-size: 11px;
  color: var(--tour-text-muted);
}

/* ============================================
   DIAGRAM: REVIEW CENTER (Propose)
   ============================================ */
.diagram-review-center {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.rc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tour-border);
}

.rc-header i {
  color: var(--tour-primary);
  font-size: 16px;
}

.rc-header span {
  font-size: 14px;
  font-weight: 600;
  color: var(--tour-text);
}

/* Legacy Review Center "tabs + proposal header" markup (.rc-tabs/.rc-tab/
   .rc-count/.rc-proposal/.rc-title/.rc-status[old]/.rc-meta/.rc-tag/.rc-votes/
   .rc-leading/.rc-schedule-btn) deleted: the propose diagram renders the
   ranked rc-header/rc-options/rc-option family (consolidated lower in this
   file), so this block was orphaned and carried a raw #f59e0b literal. */

/* ============================================
   DIAGRAM: FAIRNESS
   ============================================ */
.diagram-fairness {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 300px;
}

.fairness-gauge {
  width: 100%;
  text-align: center;
}

.gauge-track {
  width: 100%;
  height: 14px;
  background: var(--tour-border);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  margin-bottom: 10px;
}

.gauge-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--tour-success) 0%, var(--tour-primary) 100%);
  border-radius: var(--radius-full, 9999px);
  animation: gaugeFill 1.5s ease 0.5s forwards;
}

@keyframes gaugeFill {
  to { width: 78%; }
}

.gauge-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tour-primary);
}

.burden-scale {
  display: flex;
  gap: 4px;
  width: 100%;
}

.burden-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: var(--radius-sm, 8px);
  animation: burdenPop 0.5s ease both;
}

.burden-item:nth-child(1) {
  background: rgba(16, 185, 129, 0.15);
  animation-delay: 0.3s;
}

.burden-item:nth-child(2) {
  background: rgba(245, 158, 11, 0.15);
  animation-delay: 0.5s;
}

.burden-item:nth-child(3) {
  background: rgba(99, 102, 241, 0.15);
  animation-delay: 0.7s;
}

@keyframes burdenPop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.burden-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--tour-text);
}

.burden-label {
  font-size: 10px;
  color: var(--tour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   DIAGRAM: FAIRNESS V2 - Team-centric view
   ============================================ */
.diagram-fairness-v2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 280px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.fairness-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tour-border);
}

.fairness-header i {
  color: var(--tour-primary);
  font-size: 16px;
}

.fairness-header span {
  font-size: 14px;
  font-weight: 600;
  color: var(--tour-text);
}

/* Legacy fairness-v2 "team member list" markup (.fairness-team/.fairness-member/
   .member-avatar/.member-indicator/.fairness-insight) deleted: the fairness-gauge
   diagram renders the score-ring + period-tabs + dimension-bars family, so this
   block (and its raw-hex member-indicator colours) was orphaned. */

/* ============================================
   DIAGRAM: VOTING
   ============================================ */
.diagram-voting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 260px;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.vote-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tour-surface);
  border: 2px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
  transition: all 0.3s ease;
}

.vote-option.selected {
  border-color: var(--tour-primary);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, transparent 100%);
}

.vote-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-primary);
  border-radius: var(--radius-full, 9999px);
  color: white;
  font-size: 12px;
}

.vote-check.empty {
  background: var(--tour-border);
}

.vote-content {
  flex: 1;
}

.vote-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--tour-text);
}

.vote-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.vote-badge {
  padding: 3px 8px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-sm, 8px);
  font-size: 11px;
  color: var(--tour-text-muted);
}

.vote-badge.weighted {
  background: var(--tour-primary-light);
  color: var(--tour-primary);
  font-weight: 600;
}

.vote-hint {
  font-size: 12px;
  color: var(--tour-text-light);
}

/* ============================================
   DIAGRAM: VOTING V2 - Simple vote view
   ============================================ */
.diagram-voting-v2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 260px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.voting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tour-border);
}

.voting-header i {
  color: var(--tour-primary);
  font-size: 14px;
}

.voting-header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--tour-text);
}

.voting-options {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voting-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-md, 12px);
}

.voting-option.leading {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, transparent 100%);
  border: 1px solid var(--tour-primary);
}

.voting-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--tour-text);
}

.voting-votes {
  margin-left: auto;
  font-size: 11px;
  color: var(--tour-text-muted);
}

.voting-option.leading .voting-votes {
  color: var(--tour-primary);
  font-weight: 600;
}

.voting-option i {
  color: #f59e0b;
  font-size: 12px;
}

.voting-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--tour-border);
}

.voting-factor {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--tour-surface-alt);
  border-radius: var(--radius-full, 9999px);
  font-size: 10px;
  color: var(--tour-text-muted);
}

.voting-factor i {
  font-size: 9px;
  color: var(--tour-primary);
}

/* ============================================
   DIAGRAM: CALENDAR SYNC
   ============================================ */
.diagram-calendar-sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sync-providers {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync-provider {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: var(--radius-md, 12px);
}

.sync-provider i {
  font-size: 24px;
}

.sync-provider.google i {
  color: #ea4335;
}

.sync-provider.microsoft i {
  color: #00a4ef;
}

.sync-arrow {
  color: var(--tour-primary);
  animation: syncRotate 2s ease-in-out infinite;
}

@keyframes syncRotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

.sync-center {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
}

.sync-center i {
  font-size: 28px;
  color: white;
}

/* The real brand mark (icons/icon.svg), not a stand-in scales glyph. Its bars
   are teal/green/amber/red on TRANSPARENT, so it needs a white plate rather
   than the teal gradient underneath (logo-on-white rule). */
.sync-center {
  background: #fff;
  border: 1px solid var(--tour-border);
}
.sync-center-logo {
  width: 34px;
  height: 34px;
  display: block;
}

.sync-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sync-benefits span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tour-text-muted);
}

.sync-benefits i {
  color: var(--tour-success);
  font-size: 12px;
}

/* ============================================
   DIAGRAM: GOLDEN MARKERS
   ============================================ */
.diagram-golden-markers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 280px;
}

.gm-timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gm-hours {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.gm-hours span {
  font-size: 10px;
  color: var(--tour-text-muted);
  font-weight: 500;
}

.gm-blocks-row {
  display: flex;
  gap: 2px;
  position: relative;
}

.gm-block {
  flex: 1;
  height: 32px;
  border-radius: 4px;
  position: relative;
}

/* Golden-markers diagram - using actual atmospheric RGBA palette */
.gm-block.morning {
  background: linear-gradient(180deg, rgba(130, 185, 235, 0.9) 0%, rgba(180, 220, 250, 0.9) 100%);
}

.gm-block.morning-mid {
  background: linear-gradient(180deg, rgba(210, 225, 250, 0.9) 0%, rgba(235, 238, 248, 0.9) 100%);
}

.gm-block.midday {
  background: linear-gradient(180deg, rgba(255, 245, 200, 0.9) 0%, rgba(255, 238, 175, 0.9) 100%);
}

.gm-block.afternoon {
  background: linear-gradient(180deg, rgba(255, 218, 145, 0.9) 0%, rgba(255, 195, 175, 0.9) 100%);
}

.gm-marker {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  animation: markerPulse 2s ease-in-out infinite;
}

.gm-marker.teal {
  color: var(--tour-primary);
}

.gm-marker.orange {
  color: #f97316;
}

@keyframes markerPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }
}

.gm-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.gm-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tour-text-muted);
}

.gm-icon {
  font-size: 10px;
}

.gm-icon.teal {
  color: var(--tour-primary);
}

.gm-icon.orange {
  color: #f97316;
}

/* ============================================
   DIAGRAM: PLACEHOLDER
   ============================================ */
.diagram-placeholder {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tour-surface-alt);
  border: 2px dashed var(--tour-border);
  border-radius: var(--radius-lg, 16px);
}

.diagram-placeholder i {
  font-size: 32px;
  color: var(--tour-text-light);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 720px) {
  .tour-modal-large {
    width: calc(100vw - 24px);
    /* 100vh excludes the mobile URL bar, so the panel ran taller than the
       visible viewport and the "I'll explore on my own" footer link sat under
       the browser chrome. dvh tracks the actual visible height; the vh line is
       the fallback for browsers without dvh. Same fix as board-modals.css and
       day-detail-panel.css. */
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    border-radius: var(--radius-xl, 20px);
  }

  .tour-selector {
    padding: 40px 24px 32px;
    gap: 24px;
  }

  /* Clear the absolutely-positioned X close button, which is out of flow and
     reserves no space of its own (same idiom as .tour-view-header below). Put
     the reserve on the HEADER, not on .tour-selector: the selector also holds
     the cards, and a one-sided pad there would shove all three off-centre. */
  .tour-selector-header {
    padding-right: 40px;
  }

  .tour-logo {
    width: 64px;
    height: 64px;
  }

  .tour-logo i {
    font-size: 28px;
  }

  .tour-selector-header h2 {
    font-size: 1.5rem;
  }

  .tour-mode-cards {
    max-width: 100%;
  }

  .tour-mode-card {
    padding: 16px 20px;
  }

  .mode-card-icon {
    width: 42px;
    height: 42px;
  }

  .tour-browser {
    padding: 20px 20px 24px;
  }

  .tour-view-header {
    padding: 14px 20px;
    padding-right: 60px;
    flex-wrap: nowrap;
  }

  .tour-topic-content {
    /* Single header row on mobile (nav dots hidden below), so a tight, fixed
       inset is safe and the content can never be covered by the header. */
    top: 52px;
    bottom: 64px;
    flex-direction: column;
    overflow-y: auto;
  }

  /* Hide the per-topic dot strip on phones — with a dozen-plus topics it
     wrapped into a tall row that overlapped the diagram/text ("tabs
     obscuring the info"). Navigation on mobile is the footer Prev/Next +
     the "X / N" progress counter, which stay visible and unambiguous. */
  .tour-topic-nav {
    display: none;
  }

  .tour-diagram-area {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--tour-border);
    padding: 20px 20px;
    overflow-y: visible;
  }

  .tour-text-area {
    padding: 20px 24px;
    overflow-y: visible;
  }

  .tour-topic-icon {
    width: 44px;
    height: 44px;
  }

  .tour-topic-icon i {
    font-size: 18px;
  }

  .tour-topic-titles h2 {
    font-size: 1.2rem;
  }

  .tour-topic-description {
    font-size: 0.95rem;
  }

  .tour-navigation {
    padding: 16px 20px 24px;
    flex-wrap: wrap;
  }

  .tour-browse-link {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .tour-nav-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .tour-completion {
    padding: 40px 24px;
  }

  .tour-btn {
    min-width: 100%;
    padding: 12px 24px;
  }

  /* Diagram adjustments */
  .scanner-track {
    height: 48px;
  }

  .cycle-timeline {
    height: 56px;
  }

  .edge-demo-column {
    height: 80px;
  }

  .pills-container {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Stack the chooser header on phones: icon above centred title/subtitle. The
     horizontal row could not fit at this width (64px logo + gap + an
     unwrappable subtitle), so it overflowed and was clipped on the right. This
     mirrors what .tour-topic-header already does below. */
  .tour-selector-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    /* Stacked, so the title no longer runs at the X: drop the row's reserve
       and let the block centre in the full width. */
    padding-right: 0;
  }

  .tour-selector-titles {
    text-align: center;
  }

  /* Stacking costs vertical room, so give some back: the <=720px block grows
     the logo to 64px for roomier tablets, which is oversized once it sits on
     its own line above the text on a phone. */
  .tour-logo {
    width: 52px;
    height: 52px;
  }

  .tour-logo i {
    font-size: 24px;
  }

  .tour-selector {
    padding: 24px 20px 24px;
    gap: 16px;
  }

  /* Last-resort break so a long word (or a longer translation) can never
     re-clip the header. */
  .tour-selector-header h2,
  .tour-selector-header p {
    overflow-wrap: anywhere;
  }

  .tour-mode-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }

  .mode-card-badge {
    position: static;
    margin-top: 8px;
    border-radius: var(--radius-sm, 8px);
  }

  .tour-topic-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tour-topic-titles {
    text-align: center;
  }

  .tour-navigation {
    gap: 8px;
  }

  .tour-nav-btn {
    flex: 1;
    justify-content: center;
  }

  .tour-nav-prev span,
  .tour-nav-next span {
    display: none;
  }

  .tour-nav-prev,
  .tour-nav-next {
    min-width: 48px;
    padding: 12px;
  }

  .completion-stats {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */
body.dark-mode .tour-mode-card:first-child {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
}

body.dark-mode .tour-mode-card:first-child:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(6, 182, 212, 0.12) 100%);
}

body.dark-mode .add-demo-card,
body.dark-mode .edge-demo-column,
body.dark-mode .suggestion {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

body.dark-mode .pill-good {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

body.dark-mode .pill-neutral {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

body.dark-mode .pill-warning {
  background: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}

body.dark-mode .vote-badge {
  background: var(--slate-700, #334155);
}

body.dark-mode .burden-value {
  color: var(--slate-100, #f1f5f9);
}

body.dark-mode .gauge-track {
  background: var(--slate-700, #334155);
}

/* ============================================
   v6 — DIAGRAM TOKENS + NEW DIAGRAMS
   ============================================
   Realigned with shipped product:
   - 8 canonical STATUS_PRESENTATION colors
   - 5-step scanner gradient (excellent → bad)
   - 4-mode picker chips
   - Real status bar (counts + summary pills)
   - Polls, Insights, refreshed Propose
   ============================================ */
:root {
  /* STATUS palette for the tour diagrams.
     ⚠️THESE NOW *READ* THE CANONICAL TOKENS RATHER THAN COPYING THEM
     (2026-08-23). This block used to be a private fork of hardcoded hexes
     that merely claimed to "mirror" the canon, and it drifted twice for
     exactly that reason: the 2026-08-17 note below records the busy bulb
     teaching a colour the board had stopped painting, and by 2026-08-22 the
     away bulb had done the same thing one status over (still fuchsia after
     leave moved to orange). A copy cannot follow a recolour; an alias can.
     The literal after each comma is a load-order safety net only — if you
     find yourself editing one of those, the token moved and the fix belongs
     in css/view-mode-strip.css, not here. */
  --tour-status-available: var(--status-available, #22c55e);
  --tour-status-working: var(--status-working, #16a34a);
  --tour-status-flex: var(--status-flex, #fbbf24);
  --tour-status-tentative: var(--status-tentative, #f59e0b);
  --tour-status-busy: var(--status-busy, #dc2626);
  /* Away = the deep-orange the away cells and the team-bar strip paint. Was
     #d946ef fuchsia, which no board surface uses for leave any more. */
  --tour-status-away: var(--status-away-scan, #d97706);
  --tour-status-off: var(--status-off, #fbbf24);
  --tour-status-sleep: var(--status-sleep, #7c3aed);

  /* Scanner 5-step grade gradient. 2026-07-16 (user: "Scanner grade key —
     inaccurate colours"): repointed off a hand-rolled ramp
     (#16a34a/#65a30d/#ca8a04/#ea580c/#dc2626 — an olive "good" and an ochre
     "OK" that appear nowhere on the board) to five anchors of the CANONICAL
     fairness ramp (--fv-l*, css/fairness-view.css), the same green→amber→red
     scale the scanner/team-bar actually paints. Fallbacks are the light-mode
     --fv-l* literals so the key still renders if the ramp file isn't loaded. */
  --tour-grade-excellent: var(--fv-l2, #15803d);  /* deep green */
  --tour-grade-good:       var(--fv-l4, #22c55e);  /* green */
  --tour-grade-acceptable: var(--fv-l5, #fbbf24);  /* the one amber — midpoint */
  --tour-grade-poor:       var(--fv-l6, #f97316);  /* orange */
  --tour-grade-bad:        var(--fv-l8, #dc2626);  /* canonical busy red */
}

/* ---- scanner grade strip ---- */
.scanner-grade-strip {
  display: flex;
  width: 100%;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
}
.scanner-grade-strip .grade-step {
  flex: 1;
}
.grade-step.grade-excellent { background: var(--tour-grade-excellent); }
.grade-step.grade-good       { background: var(--tour-grade-good); }
.grade-step.grade-acceptable { background: var(--tour-grade-acceptable); }
.grade-step.grade-poor       { background: var(--tour-grade-poor); }
.grade-step.grade-bad        { background: var(--tour-grade-bad); }
.scanner-grade-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--tour-text-muted);
}

/* ---- coach-mark scanner key ----
   Discrete-chip variant of the scanner grade legend, used by the
   "scanner-drag" hint. Sits inside a small popover hovering over the
   real timeline, where the bar variant's gradient row reads as another
   teammate row. Chips + explicit heading defeat that collision. */
.diagram-scanner-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 2px;
}

.scanner-key-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tour-text-muted);
}

.scanner-key-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.scanner-key-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--tour-text);
}

.scanner-key-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scanner-key-dot[data-grade="excellent"]  { background: var(--tour-grade-excellent); }
.scanner-key-dot[data-grade="good"]       { background: var(--tour-grade-good); }
.scanner-key-dot[data-grade="acceptable"] { background: var(--tour-grade-acceptable); }
.scanner-key-dot[data-grade="poor"]       { background: var(--tour-grade-poor); }
.scanner-key-dot[data-grade="bad"]        { background: var(--tour-grade-bad); }

/* ---- coach-mark day-cycle key ----
   Four-chip variant of the day-cycle diagram. Used by the
   'add-teammate' hint so the popover doesn't show a full mini-timeline
   row that competes with the real board behind it. */
.diagram-cycle-key,
.diagram-edges-key,
.diagram-gm-key,
.diagram-avgbar-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 2px;
}

.cycle-key-heading,
.edges-key-heading,
.gm-key-heading,
.avgbar-key-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tour-text-muted);
}

.cycle-key-chips,
.edges-key-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.cycle-key-chips li,
.edges-key-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--tour-text);
}

.cycle-key-dot,
.edges-key-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Day-cycle dots — mirror the canonical period colours used elsewhere in
   the tour (.cycle-legend .leg-dot.*). Kept literal here so the key reads
   correctly even if --tour-* aren't loaded yet. */
.cycle-key-dot[data-period="night"]   { background: #312e81; }
.cycle-key-dot[data-period="morning"] { background: rgba(120, 182, 235, 0.85); } /* azure, matches .leg-dot.morning */
.cycle-key-dot[data-period="midday"]  { background: #fde68a; }
.cycle-key-dot[data-period="evening"] { background: #fb7185; }

/* Edges key dots — canonical STATUS_PRESENTATION colours. */
.edges-key-dot[data-status="working"]   { background: var(--tour-status-working); }
.edges-key-dot[data-status="flex"]      { background: var(--tour-status-flex); }
.edges-key-dot[data-status="tentative"] {
  background: repeating-linear-gradient(45deg,
    var(--tour-status-tentative), var(--tour-status-tentative) 3px,
    var(--tour-status-flex) 3px, var(--tour-status-flex) 6px);
}
.edges-key-dot[data-status="busy"]      { background: var(--tour-status-busy); }
.edges-key-dot[data-status="off"]       { background: var(--tour-status-off); }
.edges-key-dot[data-status="sleep"]     { background: var(--tour-status-sleep); }

.edges-key-note,
.gm-key-note {
  font-size: 0.7rem;
  color: var(--tour-text-muted);
  font-style: italic;
}

/* ---- coach-mark best-time markers key ----
   Stand the two markers up as labelled rows; no surrounding "blocks-row"
   of cells. */
.gm-key-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gm-key-rows li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--tour-text);
}

.gm-key-marker {
  width: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

.gm-key-marker.teal   { color: var(--tour-primary-dark); }
.gm-key-marker.orange { color: var(--tour-grade-poor); }

/* ---- coach-mark team-bar key ----
   A two-cell stack (avg cell on top of a member cell) plus a short
   explanation. Communicates "same colour, same meaning" without
   imitating a row. */
.avgbar-key-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avgbar-key-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.avgbar-key-cell {
  display: block;
  width: 28px;
  height: 14px;
  border-radius: 3px;
}

.avgbar-key-top {
  border: 1.5px solid rgba(15, 23, 42, 0.25);
}

/* The two cells deliberately share a colour to make the lesson land. */
.avgbar-key-cell[data-status="sleep"] { background: #7c3aed; }

.avgbar-key-text {
  font-size: 0.75rem;
  color: var(--tour-text);
  line-height: 1.4;
}

.avgbar-key-text strong {
  display: block;
  margin-bottom: 2px;
}

/* ---- 8-status legend (replaces 3-color edge-highlights) ---- */
.diagram-edges .edge-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  width: 100%;
  padding: 6px 8px 0;
}
.edge-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--tour-text);
}
.edge-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}
.edge-swatch.striped {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0 4px,
    rgba(255,255,255,0.55) 4px 8px
  );
}
.status-available .edge-swatch { background: var(--tour-status-available); }
.status-working   .edge-swatch { background: var(--tour-status-working); }
.status-flex      .edge-swatch { background: var(--tour-status-flex); }
.status-tentative .edge-swatch { color: var(--tour-status-tentative); background: var(--tour-status-tentative); }
.status-busy      .edge-swatch { background: var(--tour-status-busy); }
.status-away      .edge-swatch { color: var(--tour-status-away); background: var(--tour-status-away); }
.status-off       .edge-swatch { background: var(--tour-status-off); }
.status-sleep     .edge-swatch { background: var(--tour-status-sleep); }
.edge-priority-note {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--tour-text-muted);
  text-align: center;
  font-style: italic;
}

/* Compact status grid: only the categorical reads not in the traffic light
   above (Sleep, Away), centred rather than a full 4-column legend. */
.edge-status-grid.edge-status-grid-compact {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 8px 22px;
}

/* Working / sleeping hours bracket cue: a 3-segment bar showing the day split
   into sleep | working | sleep, so the per-person working-hours window reads
   at a glance. Sleep segments use the canonical sleep hue, lightly. */
.edge-hours-bracket {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 3px;
  width: 100%;
  margin: 4px 0 2px;
}
.ehb-seg {
  font-size: 0.6rem;
  font-weight: 600;
  text-align: center;
  padding: 4px 4px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ehb-working {
  background: color-mix(in srgb, var(--tour-status-available) 22%, transparent);
  color: color-mix(in srgb, var(--tour-status-working) 75%, black);
  border: 1px solid color-mix(in srgb, var(--tour-status-available) 45%, transparent);
}
.ehb-sleep {
  background: color-mix(in srgb, var(--tour-status-sleep) 18%, transparent);
  color: color-mix(in srgb, var(--tour-status-sleep) 80%, black);
  border: 1px solid color-mix(in srgb, var(--tour-status-sleep) 38%, transparent);
}
body.dark-mode .ehb-working { color: #4ade80; }
body.dark-mode .ehb-sleep { color: #c4b5fd; }

/* ---- v10 traffic-light hero strip (sits above the palette legend) ---- */
.traffic-light-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}
.tl-bulb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tour-surface-alt);
  border: 1.5px solid var(--tour-border);
}
.tl-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 0 6px currentColor;
}
.tl-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.tl-word {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tour-text);
}
.tl-meaning {
  font-size: 0.62rem;
  color: var(--tour-text-muted);
}
.tl-bulb.tl-green .tl-dot { background: var(--tour-status-available); color: var(--tour-status-available); }
.tl-bulb.tl-green          { border-color: color-mix(in srgb, var(--tour-status-available) 35%, var(--tour-border)); }
.tl-bulb.tl-amber .tl-dot { background: var(--tour-status-flex); color: var(--tour-status-flex); }
.tl-bulb.tl-amber          { border-color: color-mix(in srgb, var(--tour-status-flex) 35%, var(--tour-border)); }
/* `tl-red` is a FROZEN internal class name, not a colour claim: this bulb has
   painted slate since 2026-08-17 (busy is slate; red is reserved for
   conflicts). The visible word in feature-tour.js reads "Slate" to match. */
.tl-bulb.tl-red   .tl-dot { background: var(--tour-status-busy); color: var(--tour-status-busy); }
.tl-bulb.tl-red            { border-color: color-mix(in srgb, var(--tour-status-busy) 35%, var(--tour-border)); }
.tl-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 4px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tour-text-muted);
}
.tl-divider span { padding: 0 8px; }
body.dark-mode .tl-bulb {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

/* ---- 4-mode picker chips ---- */
.diagram-mode-chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.mode-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  font-size: 0.78rem;
  color: var(--tour-text);
}
.mode-chip i { font-size: 0.85rem; }
.mode-chip.active {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
  color: var(--tour-primary-dark);
  font-weight: 600;
}
.mode-default {
  margin-left: 4px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tour-primary);
  color: #fff;
  font-weight: 700;
}
.mode-chip.mode-daynight    i { color: var(--tour-status-flex); }
.mode-chip.mode-availability i { color: var(--tour-status-available); }
.mode-chip.mode-overlap     i { color: var(--tour-accent); }
.mode-chip.mode-fairness    i { color: var(--tour-status-working); }
/* Clean plane (added 2026-08-25 with the 5th pill in 'mode-chips-compact').
   Its canonical accent is a QUIET SLATE, not a mode hue — the mode is "no
   colour on the grid" (view-mode-strip.css), so a tinted icon would
   misrepresent it. --tour-text-muted is the same slate family and is already
   theme-aware (slate-500 light / slate-400 dark). */
.mode-chip.mode-clean       i { color: var(--tour-text-muted); }
.mode-chip-hint {
  font-size: 0.7rem;
  color: var(--tour-text-muted);
  font-style: italic;
}

/* ---- status bar mock (real layout: counts left, summary pills right) ---- */
.status-bar-mock {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  gap: 12px;
}
.status-bar-left-mock,
.status-bar-right-mock {
  display: flex;
  gap: 8px;
  align-items: center;
}
.status-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
}
.status-count i { font-size: 0.7rem; }
.count-available i { color: var(--tour-status-available); }
.count-flex      i { color: var(--tour-status-flex); }
.count-busy      i { color: var(--tour-status-busy); }
.count-sleep     i { color: var(--tour-status-sleep); }

.summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  color: var(--tour-text);
}
.summary-pill i { font-size: 0.7rem; }
.summary-fairness i { color: var(--tour-primary); }
.summary-reachable i { color: var(--tour-accent); }
.summary-besttime i { color: var(--tour-warning); }

/* ---- propose / vote (ranked slot list, mirrors live Review Center) ----
   Vertical-stack slot: time row (trophy on leader) + full-width vote bar +
   meta row (first-choice count left, reachable "X/6 free" chip right). The
   second .rc-status / .rc-option-bar / .rc-option-fill / .rc-foot block lower
   in this file was removed; everything is consolidated here. */
.diagram-review-center {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
  font-weight: 600;
  font-size: 0.78rem;
}
.rc-header i { color: var(--tour-primary); }
.rc-status {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  color: var(--tour-text-muted);
}
.rc-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rc-option {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
}
.rc-option.leading {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
}
.rc-option-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--tour-text);
}
.rc-trophy {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--tour-warning);
}
.rc-option-bar {
  margin: 6px 0 5px;
  height: 5px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: 999px;
  overflow: hidden;
}
.rc-option-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tour-primary);
}
.rc-option.leading .rc-option-fill {
  background: linear-gradient(90deg, var(--tour-primary) 0%, var(--tour-accent) 100%);
}
.rc-option-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--tour-text-muted);
}
.rc-votes { font-weight: 600; color: var(--tour-text); }
.rc-reachable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-weight: 600;
}
.rc-reachable-all  { color: var(--tour-status-available); }
.rc-reachable-some { color: var(--tour-status-flex); }
.rc-reachable-none { color: var(--tour-status-busy); }
.rc-foot {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--tour-text-muted);
}
.rc-foot i { color: var(--tour-primary); }

/* ---- polls ---- */
.diagram-polls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.polls-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
  font-weight: 600;
  font-size: 0.78rem;
}
.polls-link {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--tour-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.polls-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.polls-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  font-size: 0.72rem;
}
.polls-slot.suggested {
  background: var(--tour-primary-light);
  border-color: var(--tour-primary);
}
.polls-slot-time { font-weight: 600; }
.polls-slot-count { margin-left: auto; color: var(--tour-text-muted); font-size: 0.68rem; }
.polls-suggest-tag {
  font-size: 0.62rem;
  color: var(--tour-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
.polls-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--tour-text-muted);
  font-style: italic;
}

/* ---- polls v11: real-poll layout (deadline meta + two-line vote-bar slots) ----
   These OVERRIDE the base .polls-slot row above (now a column card) and add the
   meta row + per-slot vote bar, mirroring poll-creator.css .poll-slot-option. */
.polls-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--tour-text-muted);
}
.polls-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.polls-meta-item i { color: var(--tour-primary); }
.polls-meta-dot { color: var(--tour-text-light); }
.polls-slot {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-lg, 10px);
}
.polls-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.polls-slot-vote {
  display: flex;
  align-items: center;
  gap: 8px;
}
.polls-vote-track {
  flex: 1;
  height: 8px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: 999px;
  overflow: hidden;
}
.polls-vote-fill {
  height: 100%;
  background: var(--tour-primary);
  border-radius: 999px;
}
.polls-slot.suggested .polls-vote-track { background: rgba(255, 255, 255, 0.6); }
.polls-slot-count {
  margin-left: 0;
  flex: 0 0 auto;
  min-width: 48px;
  text-align: right;
}
.polls-suggest-tag { margin-left: auto; }

/* ---- insights (Pro/Team) ---- */
.diagram-insights {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insights-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--tour-text);
}
.insights-header i { color: var(--tour-primary); }
.insights-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.insights-bar {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
}
.insights-bar-label { color: var(--tour-text-muted); }
.insights-bar-value { text-align: right; font-weight: 600; }
.insights-bar-track {
  height: 8px;
  background: var(--tour-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.insights-bar-fill {
  height: 100%;
  background: var(--tour-status-working);
  border-radius: 999px;
}
.insights-bar-fill.mid  { background: var(--tour-status-flex); }
.insights-bar-fill.high { background: var(--tour-status-busy); }
.insights-footer {
  margin-top: 2px;
}
.insights-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--tour-status-busy);
}

/* ---- dark mode passes ---- */
body.dark-mode .status-bar-mock,
body.dark-mode .status-count,
body.dark-mode .summary-pill,
body.dark-mode .rc-option,
body.dark-mode .polls-slot,
body.dark-mode .insights-bar-track {
  background: var(--slate-800, #1e293b);
}
body.dark-mode .rc-option.leading,
body.dark-mode .polls-slot.suggested,
body.dark-mode .polls-header,
body.dark-mode .mode-chip.active {
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.5);
}
body.dark-mode .polls-suggest-tag {
  background: rgba(255,255,255,0.08);
}
/* polls v11 dark-mode: vote bars + meta */
body.dark-mode .polls-meta-item i { color: #5eead4; }
body.dark-mode .polls-vote-track { background: var(--slate-700, #334155); }
body.dark-mode .polls-slot.suggested .polls-vote-track { background: rgba(255, 255, 255, 0.1); }
body.dark-mode .polls-vote-fill { background: #2dd4bf; }

/* ---- review-incoming diagram: a Review Center "Scheduled" card with an
   impact chip + the real Accept / Suggest / Decline / more action row ---- */
.diagram-review-incoming {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ri-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tour-text-muted);
}
.ri-header > i { color: var(--tour-primary); }
.ri-header > span:nth-child(2) { color: var(--tour-text); margin-right: auto; }
.ri-tab {
  font-size: 0.64rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--tour-text-muted);
}
.ri-tab.active {
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
}
.ri-card {
  border: 1px solid var(--tour-border);
  border-radius: 10px;
  background: var(--tour-surface-alt);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ri-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ri-card-when { display: flex; flex-direction: column; gap: 1px; }
.ri-card-title { font-size: 0.76rem; font-weight: 600; color: var(--tour-text); }
.ri-card-time { font-size: 0.64rem; color: var(--tour-text-muted); }
.ri-impact {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.ri-impact-notable {
  background: color-mix(in srgb, var(--tour-status-flex) 22%, transparent);
  color: color-mix(in srgb, var(--tour-status-flex) 72%, black);
}
.ri-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ri-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--tour-border);
  color: var(--tour-text);
  background: var(--tour-surface);
}
.ri-btn i { font-size: 0.6rem; }
.ri-btn-accept {
  background: var(--tour-primary);
  border-color: var(--tour-primary);
  color: #fff;
}
.ri-btn-decline { color: var(--tour-status-busy); border-color: color-mix(in srgb, var(--tour-status-busy) 40%, var(--tour-border)); }
.ri-btn-more { padding: 4px 7px; color: var(--tour-text-muted); }
.ri-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  color: var(--tour-text-muted);
}
.ri-foot i { color: var(--tour-primary); }
body.dark-mode .ri-card { background: var(--slate-800, #1e293b); border-color: var(--slate-700, #334155); }
body.dark-mode .ri-btn { background: var(--slate-800, #1e293b); border-color: var(--slate-700, #334155); }
body.dark-mode .ri-btn-accept { background: var(--tour-primary); color: #fff; }
body.dark-mode .ri-impact-notable { color: #fbbf24; }

/* ---- create-event diagram: the #event-modal Create/Propose tabs + title +
   smart visibility suggestion + the visibility selector ---- */
.diagram-create-event {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--tour-border);
  border-radius: 12px;
  background: var(--tour-surface);
}
.ce-tabs { display: flex; align-items: center; gap: 6px; }
.ce-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--tour-text-muted);
}
.ce-tab.active { background: var(--tour-primary-light); color: var(--tour-primary-dark); }
.ce-tab i { font-size: 0.66rem; }
.ce-vis {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--tour-warning) 75%, black);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--tour-border);
  background: var(--tour-surface-alt);
}
.ce-vis-caret { font-size: 0.55rem; color: var(--tour-text-light); }
.ce-field { display: flex; }
.ce-input {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tour-text);
  padding: 7px 10px;
  border: 1px solid var(--tour-border);
  border-radius: 8px;
  background: var(--tour-surface-alt);
}
.ce-suggest {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  color: var(--tour-text-muted);
  padding: 5px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tour-primary) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--tour-primary) 35%, transparent);
}
.ce-suggest > i { color: var(--tour-primary); }
.ce-suggest strong { color: var(--tour-text); }
.ce-suggest-apply {
  margin-left: auto;
  font-weight: 700;
  color: var(--tour-primary-dark);
  cursor: pointer;
}
.ce-meta { display: flex; gap: 12px; font-size: 0.66rem; color: var(--tour-text-muted); }
.ce-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.ce-meta-item i { color: var(--tour-text-light); }
.ce-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  color: var(--tour-text-muted);
  font-style: italic;
}
.ce-foot i { color: var(--tour-primary); }
body.dark-mode .diagram-create-event { background: var(--slate-800, #1e293b); border-color: var(--slate-700, #334155); }
body.dark-mode .ce-input,
body.dark-mode .ce-vis { background: var(--slate-900, #0f172a); border-color: var(--slate-700, #334155); }
body.dark-mode .ce-vis { color: #fbbf24; }
body.dark-mode .ce-suggest strong { color: var(--slate-100, #f1f5f9); }

/* ============================================
   v8 ADDITIONS (2026-05-21) — diagram tweaks to
   match the shipped UI: 6-row welcome, scanner
   badge readouts, richer find-times, mode chips
   with subtitles, status-pills labels, propose
   bars, fairness band pill.
   ============================================ */

/* ---- 6-row welcome diagram ---- */
/* Two extra rows on top of the original four — match the actual demo team
   in js/features/demo-mode.js. Tighten typography + block height so all
   six rows fit inside the tour-diagram-area without scrolling. */
.preview-row:nth-child(4) .pblock { animation-delay: 0.4s; }
.preview-row:nth-child(5) .pblock { animation-delay: 0.5s; }
.preview-row:nth-child(6) .pblock { animation-delay: 0.6s; }
.welcome-timeline-preview .preview-row { gap: 6px; }
.welcome-timeline-preview .preview-label {
  font-size: 10px;
  padding: 4px 8px;
  min-width: 54px;
}
.welcome-timeline-preview .preview-blocks-row { height: 18px; }
/* Speed the scanner-block fade so the first 200ms of the screenshot don't
   capture an empty diagram. The visible storytelling is "blocks appear",
   not a slow choreography. */
@keyframes blockFadeIn {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
.pblock { animation-duration: 0.25s !important; }

/* ---- Scanner badge readouts row ---- */
.scanner-badge-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.scanner-badge-sample {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
}
.scanner-badge-sample[data-scanner="daynight"]     { border-color: rgba(20, 184, 166, 0.5); }
.scanner-badge-sample[data-scanner="fairness"]     { border-color: rgba(99, 102, 241, 0.5); }
.scanner-badge-sample[data-scanner="availability"] { border-color: rgba(34, 197, 94, 0.5); }
.scanner-badge-sample[data-scanner="overlap"]      { border-color: rgba(245, 158, 11, 0.5); }
.scanner-badge-name {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tour-text-muted);
}
.scanner-badge-readout {
  font-size: 0.78rem;
  color: var(--tour-text);
}
.scanner-badge-readout strong {
  color: var(--tour-primary);
  font-weight: 700;
}
.scanner-badge-foot {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--tour-text-muted);
  text-align: center;
  font-style: italic;
}

/* ---- Find-times: priority + optimize + ranked results ---- */
.diagram-find-times {
  width: 100%;
  max-width: 440px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  border-radius: 12px;
  padding: 12px;
}
.ft-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tour-text);
}
.ft-header-row .ft-title { flex: 1; }
.ft-header-row i { color: var(--tour-primary); }
.ft-range-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
}

/* Search / Recommend / Results pill tab bar — mirrors the column-settings modal */
/* .ft-tabs / .ft-tab removed: the live FindBestTimeModal dropped the
   Recommend / Pick-manually tab row, so the diagram no longer renders it. */
.ft-priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ft-person {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border-radius: 999px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  font-size: 0.7rem;
  color: var(--tour-text);
}
.ft-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}
.ft-priority-tag {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.ft-priority-tag.flex {
  background: rgba(100, 116, 139, 0.15);
  color: var(--tour-text-muted);
}
.ft-optimize-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.ft-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--tour-border);
  border-radius: 8px;
  background: var(--tour-surface);
  color: var(--tour-text-muted);
}
.ft-opt.active {
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
  border-color: var(--tour-primary);
  font-weight: 600;
}
.ft-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ft-result {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: 8px;
  font-size: 0.78rem;
}
.ft-result.best {
  border-color: var(--tour-primary);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}
.ft-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tour-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--tour-text-muted);
  font-size: 0.7rem;
}
.ft-result.best .ft-rank {
  background: var(--tour-primary);
  color: #fff;
}
.ft-result .ft-time {
  font-weight: 600;
  color: var(--tour-text);
}
.ft-fairness {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ft-fairness.fairness-excellent {
  background: color-mix(in srgb, var(--tour-status-working) 15%, transparent);
  color: color-mix(in srgb, var(--tour-status-working) 75%, black);
}
.ft-fairness.fairness-good {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tour-primary-dark);
}
.ft-fairness.fairness-fair {
  background: color-mix(in srgb, var(--tour-status-flex) 15%, transparent);
  color: color-mix(in srgb, var(--tour-status-flex) 70%, black);
}
.ft-attend {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tour-text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--tour-surface-alt);
}
.ft-attend.full {
  background: color-mix(in srgb, var(--tour-status-working) 12%, transparent);
  color: color-mix(in srgb, var(--tour-status-working) 75%, black);
}

/* ---- Mode-chip vertical stack with descriptions ---- */
.mode-chip-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.mode-chip-stack .mode-chip {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 12px;
  text-align: left;
}
.mode-chip-stack .mode-chip i {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 14px;
}
.mode-chip-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tour-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mode-chip-desc {
  font-size: 0.7rem;
  color: var(--tour-text-muted);
}
.mode-chip-stack .mode-chip.active .mode-chip-desc {
  color: var(--tour-primary-dark);
}

/* ---- v10 mode-comparison grid (4 cards × same 6-cell slot) ---- */
.mode-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.mode-comparison .mode-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tour-surface-alt);
  border: 1.5px solid var(--tour-border);
}
.mode-comparison .mode-card.active {
  border-color: var(--tour-primary);
  background: var(--tour-primary-light);
}
.mode-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mode-card-head i { font-size: 0.85rem; }
.mode-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tour-text);
  display: flex;
  align-items: center;
  gap: 4px;
}
.mode-card-question {
  font-size: 0.65rem;
  color: var(--tour-text-muted);
  font-style: italic;
  min-height: 1.6em;
}
.mode-comparison .mm-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-top: 2px;
}
.mm-cell {
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}
.mm-cell.c-good     { background: var(--tour-status-available); }
.mm-cell.c-caution  { background: var(--tour-status-flex); }
.mm-cell.c-bad      { background: var(--tour-status-busy); }
/* Overlap mode-chip cells: the SAME strict red→amber→green ramp the live board
   paints (--overlap-cell-* in view-mode-strip.css), so Overlap reads as its own
   % scale (red = low overlap, green = good overlap), not a clone of Fairness.
   Fallback hex = the color-mix result over a white surface, in case the tokens
   are out of scope inside the tour modal. 2026-06-17. */
.mm-cell.c-ov-none  { background: var(--overlap-cell-none, #f5bebe); }
.mm-cell.c-ov-low   { background: var(--overlap-cell-low,  #ed8e8e); }
.mm-cell.c-ov-med   { background: var(--overlap-cell-med,  #fcd161); }
.mm-cell.c-ov-high  { background: var(--overlap-cell-high, #7adc9e); }
.mm-cell.c-ov-all   { background: var(--overlap-cell-all,  #3bb267); }
/* Local Time cells resampled from the tour's own atmospheric sky palette
   (matches .pblock / .hour-block / .leg-dot) so every sky surface agrees. */
.mm-cell.c-sky-day  { background: rgb(255, 242, 205); }
.mm-cell.c-sky-dusk { background: rgb(238, 165, 190); }
.mm-cell.c-sky-dawn { background: rgb(130, 185, 235); }
.mm-cell.c-sky-night{ background: #312e81; }
.mode-comparison .mode-card.mode-fairness    i { color: var(--tour-status-working); }
.mode-comparison .mode-card.mode-availability i { color: var(--tour-status-available); }
.mode-comparison .mode-card.mode-overlap     i { color: var(--tour-accent, var(--tour-primary)); }
.mode-comparison .mode-card.mode-daynight    i { color: var(--tour-status-flex); }
body.dark-mode .mode-comparison .mode-card {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

/* ---- Status pills: count-label + summary-bracket ---- */
/* Match shipped .status-bar-left .indicator-label: 10.4px / weight 500 /
   sentence-case (no uppercase transform). */
.count-label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: none;
  color: var(--tour-text-muted);
  margin-left: 2px;
}
.count-num {
  font-weight: 700;
  color: var(--tour-text);
}
.summary-bracket {
  font-size: 0.62rem;
  font-weight: 700;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}
body.dark-mode .count-label,
body.dark-mode .summary-bracket {
  color: var(--slate-300, #cbd5e1);
}

/* Propose / Review Center CSS consolidated into the single block above
   (~the "propose / vote (ranked slot list)" comment); the old duplicate
   .rc-status / .rc-option-bar / .rc-option-fill / .rc-foot rules were removed
   here so they no longer override the consolidated version by source order. */

/* ---- Fairness Dashboard diagram (Pro view) ---- */
.diagram-fairness-v2 {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #312e81 0%, #1e1b4b 12%, #ffffff 12%);
  border: 1px solid var(--tour-border);
  border-radius: 12px;
}
.diagram-fairness-v2 .fairness-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 6px;
}
.diagram-fairness-v2 .fairness-header i { color: #c4b5fd; }
.fairness-pro-pill {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tour-warning);
  color: white;
}
.fairness-period-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0 0 8px;
  padding: 0 4px;
}
.fairness-period-tab {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.fairness-period-tab.active {
  background: white;
  color: #312e81;
}
.fairness-summary-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 6px;
  margin: 0 0 4px;
}
.fairness-summary-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
}
.fairness-summary-card.score {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: white;
  border-color: transparent;
}
.fairness-summary-card.stat {
  flex-direction: column;
  text-align: center;
  gap: 1px;
}
.fairness-summary-card.stat i {
  font-size: 14px;
  color: var(--tour-primary);
}
.fairness-stat-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tour-text);
}
.fairness-stat-label {
  font-size: 0.6rem;
  color: var(--tour-text-muted);
}
.fairness-score-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.fairness-score-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
}
.fairness-score-info { display: flex; flex-direction: column; }
.fairness-score-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.fairness-score-band {
  font-size: 0.78rem;
  font-weight: 700;
}
.fairness-dimensions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.fairness-dim {
  display: grid;
  grid-template-columns: 96px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
}
.fairness-dim-name { color: var(--tour-text); }
.fairness-dim-track {
  height: 6px;
  background: var(--tour-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.fairness-dim-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tour-primary);
}
.fairness-dim-fill[data-band="excellent"]  { background: var(--tour-status-working); }
.fairness-dim-fill[data-band="balanced"]   { background: var(--tour-primary); }
.fairness-dim-fill[data-band="mixed"]      { background: var(--tour-status-flex); }
.fairness-dim-fill[data-band="stretched"]  { background: #f97316; } /* deliberate orange mid-step, no canonical token */
.fairness-dim-fill[data-band="overloaded"] { background: var(--tour-status-busy); }
.fairness-dim-val {
  text-align: right;
  font-weight: 700;
  color: var(--tour-text);
}

/* ---- Fairness band pill ---- */
.fairness-band-pill {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.fairness-band-pill.band-excellent  { background: rgba(22, 163, 74, 0.15);  color: #15803d; }
.fairness-band-pill.band-balanced   { background: rgba(20, 184, 166, 0.15); color: var(--tour-primary-dark); }
.fairness-band-pill.band-mixed      { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.fairness-band-pill.band-stretched  { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
.fairness-band-pill.band-overloaded { background: rgba(220, 38, 38, 0.15);  color: #b91c1c; }

/* ---- Status-bar diagram: stack halves so 4 counts + 3 pills + labels fit ---- */
.diagram-status-pills { width: 100%; max-width: 460px; }
/* ONE row, three zones (counts | day-nav | pills), matching the real
   team-status-bar. Was previously flex-direction:column, which stacked the
   counts above the pills and read as two rows. */
.diagram-status-pills .status-bar-mock {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.diagram-status-pills .status-bar-left-mock,
.diagram-status-pills .status-bar-right-mock {
  flex-wrap: wrap;
  gap: 5px;
}
.status-bar-center-mock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--tour-text);
}
.status-bar-center-mock i {
  font-size: 0.62rem;
  color: var(--tour-text-muted);
}
.center-day { white-space: nowrap; }
.diagram-status-pills .status-count { font-size: 0.64rem; padding: 2px 6px; }
.diagram-status-pills .summary-pill { font-size: 0.66rem; padding: 2px 7px; }
.pills-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 0.6rem;
  color: var(--tour-text-muted);
  font-style: italic;
}

/* ---- Dark mode pass for v8 additions ---- */
body.dark-mode .scanner-badge-sample,
body.dark-mode .ft-result,
body.dark-mode .ft-person,
body.dark-mode .ft-opt,
body.dark-mode .ft-attend,
body.dark-mode .rc-status,
body.dark-mode .rc-option-bar {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}
body.dark-mode .ft-opt.active,
body.dark-mode .ft-result.best {
  background: rgba(20, 184, 166, 0.18);
}

/* ============================================
   v9 ADDITIONS — Privacy & Sharing diagram +
   updated Calendar Sync (two-way arrow pairs
   with read / write labels)
   ============================================ */

/* Updated Calendar Sync — provider names + bidirectional arrows */
.sync-provider {
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 8px 10px;
  gap: 4px;
  min-width: 92px;
}
/* 2026-08-08: width/height:auto above collapses the 52x52 square from the base
   .sync-provider rule down to its content box. With the rounded border-radius
   still applied, the wide fa-google glyph rendered as a RED ELLIPSE (user:
   "random red blobs"). Give the glyph its own square, independent of the label
   width, so the brand marks read as icons rather than blobs. */
.sync-provider i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex: none;
}
.sync-provider-name {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--tour-text);
}
.sync-arrow-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--tour-text-muted);
}
.sync-arrow-line {
  font-size: 0.62rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sync-arrow-in  { color: var(--tour-primary); }
.sync-arrow-out { color: var(--tour-warning); }
/* Outlook is read-only import (Beta): no write arrow, a muted "read-only" note. */
.sync-arrow-note {
  font-size: 0.56rem;
  font-style: italic;
  color: var(--tour-text-light);
}
.sync-beta {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tour-warning) 18%, transparent);
  color: var(--tour-warning);
  vertical-align: middle;
}
.sync-center {
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}
.sync-center-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}

/* Privacy & Sharing diagram */
.diagram-privacy-sharing {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-border);
  border-radius: 12px;
}
.privacy-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tour-text-muted);
}
/* ---- v11 who-sees-what stacked per-level cards (replaces the v10 4-column
       table that overhung ~460px and wrapped jumbled, and the dead pre-v10
       .privacy-cards/.privacy-card* block). ---- */
.wsw-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 8px;
}
.wsw-card {
  border-radius: 10px;
  border: 1.5px solid var(--tour-border);
  background: var(--tour-surface-alt);
  border-left-width: 4px;
  padding: 8px 10px;
}
.wsw-card-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.wsw-card-head i { font-size: 0.82rem; align-self: center; }
.wsw-card-name {
  font-size: 0.78rem;
  font-weight: 700;
}
.wsw-card-gist {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--tour-text-muted);
}
.wsw-reveals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.wsw-reveals li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wsw-aud {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tour-text-muted);
  white-space: nowrap;
}
.wsw-aud i { font-size: 0.58rem; }
.wsw-val {
  font-size: 0.64rem;
  line-height: 1.15;
  padding: 4px 6px;
  border-radius: 6px;
  word-break: break-word;
}
/* per-level rail + heading colours (canonical Private / Busy / Shared) */
.wsw-card.vis-private                 { border-left-color: #8b5cf6; }
.wsw-card.vis-private .wsw-card-head  { color: #6d28d9; }
.wsw-card.vis-private .wsw-card-head i { color: #8b5cf6; }
.wsw-card.vis-busy                    { border-left-color: var(--tour-warning); }
.wsw-card.vis-busy .wsw-card-head     { color: #b45309; }
.wsw-card.vis-busy .wsw-card-head i   { color: var(--tour-warning); }
.wsw-card.vis-shared                  { border-left-color: var(--tour-status-available); }
.wsw-card.vis-shared .wsw-card-head   { color: #15803d; }
.wsw-card.vis-shared .wsw-card-head i { color: var(--tour-status-available); }
.wsw-none {
  background: rgba(139, 92, 246, 0.10);
  color: #6d28d9;
  font-style: italic;
}
.wsw-partial {
  background: color-mix(in srgb, var(--tour-warning) 12%, transparent);
  color: #b45309;
}
.wsw-full {
  background: color-mix(in srgb, var(--tour-status-available) 12%, transparent);
  color: #15803d;
}
body.dark-mode .wsw-card {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}
body.dark-mode .wsw-card.vis-private { border-left-color: #8b5cf6; }
body.dark-mode .wsw-card.vis-busy    { border-left-color: var(--tour-warning); }
body.dark-mode .wsw-card.vis-shared  { border-left-color: var(--tour-status-available); }
body.dark-mode .wsw-aud { color: var(--slate-400, #94a3b8); }
body.dark-mode .wsw-card.vis-private .wsw-card-head { color: #a78bfa; }
body.dark-mode .wsw-card.vis-busy .wsw-card-head    { color: #fbbf24; }
body.dark-mode .wsw-card.vis-shared .wsw-card-head  { color: #4ade80; }
body.dark-mode .wsw-none    { color: #c4b5fd; }
body.dark-mode .wsw-partial { color: #fbbf24; }
body.dark-mode .wsw-full    { color: #4ade80; }

.privacy-defaults-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.privacy-default {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tour-surface-alt);
  border: 1px solid var(--tour-border);
  font-size: 0.72rem;
}
.privacy-default i { color: var(--tour-text-muted); font-size: 0.72rem; }
.privacy-default-name { flex: 1; color: var(--tour-text); font-weight: 600; }
.privacy-default-pill {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vis-private-pill { background: rgba(139, 92, 246, 0.15); color: #6d28d9; }
.vis-busy-pill    { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.vis-full-pill    { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.privacy-audit-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tour-primary-light);
  color: var(--tour-primary-dark);
  font-size: 0.7rem;
  font-weight: 600;
}
.privacy-audit-foot i { font-size: 0.78rem; }

body.dark-mode .diagram-privacy-sharing,
body.dark-mode .privacy-default {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}