/*
 * ========================================================================
 * ANALYTIC ENDEAVORS - PRESENTATION ORCHESTRATOR CSS
 * Copyright (c) 2024-2025 Analytic Endeavors Inc. All Rights Reserved.
 * Origin: analyticendeavors.com
 *
 * Styles for: Builder UI, part badges, loading states, nav transitions
 * ========================================================================
 */

/* ===== BUILDER MODE ===== */

.orch-builder {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 3rem;
  background: transparent;
  position: relative;
  z-index: 1;
}


/* ===== BUILDER HERO ===== */

.orch-builder-hero {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 4rem 2rem 3rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
  background: linear-gradient(135deg,
    var(--bg-dark) 0%,
    #1a1a3e 50%,
    var(--bg-dark) 100%
  );
}

/* Animated gradient overlay (same as guide heroes) */
.orch-builder-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 153, 153, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0, 88, 124, 0.1) 0%, transparent 50%);
  animation: orchHeroFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orchHeroFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2%, 2%); }
}

.orch-builder-hero > * {
  position: relative;
  z-index: 1;
}

.orch-hero-logo {
  height: 80px;
  width: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 25px rgba(0, 153, 153, 0.3));
  animation: orchLogoGlow 4s ease-in-out infinite;
}

@keyframes orchLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 25px rgba(0, 153, 153, 0.3)); }
  50% { filter: drop-shadow(0 0 45px rgba(0, 153, 153, 0.5)); }
}

.orch-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
  background: linear-gradient(135deg, var(--teal-light), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.orch-hero-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* Builder footer: auth badge + theme toggle, scrolls with page */
.orch-builder-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0 2rem;
}

/* Theme toggle -- inline in builder footer */
.orch-hero-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.orch-hero-toggle:hover {
  border-color: var(--teal-light);
  color: var(--teal-light);
  background: rgba(0, 184, 184, 0.12);
  transform: scale(1.05);
}

.orch-hero-toggle svg {
  width: 18px;
  height: 18px;
}


/* ===== BUILDER BODY ===== */

.orch-builder-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5rem;
}

.orch-catalog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.orch-catalog-label,
.orch-selected-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}


/* ===== GUIDE CARDS (catalog) ===== */

.orch-guide-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.15rem 1.4rem;
  background: linear-gradient(135deg, var(--card-surface) 0%, rgba(26, 26, 62, 0.4) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(0, 184, 184, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.25s ease, border-left-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.orch-guide-card:hover {
  border-color: var(--text-muted);
  border-left-color: var(--teal-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 184, 184, 0.06);
  background: linear-gradient(135deg, var(--card-surface) 0%, rgba(0, 153, 153, 0.06) 100%);
}

.orch-guide-card.selected {
  border-color: var(--teal);
  border-left-color: var(--teal);
  box-shadow: 0 0 16px rgba(0, 153, 153, 0.15), inset 0 0 0 1px rgba(0, 153, 153, 0.05);
  background: linear-gradient(135deg, var(--card-surface) 0%, rgba(0, 153, 153, 0.08) 100%);
}

.orch-guide-card-info {
  min-width: 0;
}

.orch-guide-card-info h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orch-guide-card-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card metadata (author + time) */
.orch-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.orch-meta-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-right: 3px;
}

/* Toggle button (+ / -) using SVG icons */
.orch-guide-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  padding: 0;
}

.orch-guide-toggle svg {
  width: 16px;
  height: 16px;
}

.orch-guide-toggle:hover {
  border-color: var(--teal-light);
  color: var(--teal-light);
  background: rgba(0, 184, 184, 0.08);
  transform: scale(1.08);
}

.orch-guide-toggle.active {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 153, 153, 0.3);
}

.orch-guide-toggle.active:hover {
  box-shadow: 0 3px 12px rgba(0, 153, 153, 0.4);
  transform: scale(1.08);
}


/* ===== SELECTED GUIDES PANEL ===== */

.orch-selected-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.orch-selected-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 120px;
}

.orch-selected-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}

.orch-selected-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.orch-selected-item:hover {
  border-color: var(--teal);
}

.orch-selected-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Selected item info (title + meta row) */
.orch-selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.orch-selected-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orch-selected-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orch-selected-controls {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.orch-selected-controls button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.orch-selected-controls button:hover:not(:disabled) {
  border-color: var(--teal-light);
  color: var(--teal-light);
}

.orch-selected-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

.orch-selected-controls button svg {
  width: 14px;
  height: 14px;
}


/* ===== TOTAL TIME DISPLAY ===== */

.orch-total-time {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  display: none;
}

.orch-total-time strong {
  color: var(--teal-light);
  font-weight: 600;
}


/* ===== LAUNCH CONTROLS ===== */

.orch-launch-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.orch-launch-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.orch-launch-option input[type="checkbox"] {
  accent-color: var(--teal);
  width: 16px;
  height: 16px;
}

.orch-launch-option label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.orch-launch-btn {
  width: 100%;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}

.orch-launch-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 153, 153, 0.35);
}

.orch-launch-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}


/* ===== AUTH BADGE ===== */

.orch-auth-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
}

.orch-auth-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.orch-auth-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  flex-shrink: 0;
}

.orch-auth-badge.authenticated .orch-auth-status::before {
  background: #00c853;
}

.orch-auth-btn {
  font-size: 0.75rem;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.orch-auth-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ===== CATEGORY PILLS ===== */

.orch-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 2rem;
  margin-bottom: 1rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.orch-category-pill {
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.orch-category-pill:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.orch-category-pill.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ===== CATEGORY HEADERS ===== */

.orch-category-group {
  margin-top: 0.75rem;
}
.orch-category-group:first-child {
  margin-top: 0;
}
.orch-category-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.5rem 0 0.25rem;
  cursor: pointer;
  font-family: inherit;
}
.orch-category-header:hover {
  color: var(--teal);
}
.orch-category-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.orch-category-group.collapsed .orch-category-chevron {
  transform: rotate(-90deg);
}
.orch-category-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 800px;
  overflow: hidden;
  padding-top: 0.5rem;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}
.orch-category-group.collapsed .orch-category-body {
  max-height: 0;
  padding-top: 0;
  opacity: 0;
}

/* ===== CATEGORY TAG ON CARDS ===== */

.orch-card-category {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-light, #00c8c8);
  opacity: 0.7;
}

/* ===== SESSIONS SECTION (right panel) ===== */

.orch-sessions-section {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.orch-sessions-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0;
  color: inherit;
  font-family: inherit;
}

.orch-sessions-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.orch-sessions-count {
  font-size: 0.7rem;
  color: var(--teal);
  font-weight: 500;
}

.orch-sessions-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.orch-sessions-section.collapsed .orch-sessions-chevron {
  transform: rotate(-90deg);
}

.orch-sessions-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 300px;
  overflow: hidden;
  scrollbar-width: thin;
  padding: 0.4rem 0;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}
.orch-sessions-section:not(.collapsed) .orch-sessions-body {
  overflow-y: auto;
}
.orch-sessions-section.collapsed .orch-sessions-body {
  max-height: 0;
  padding: 0;
  opacity: 0;
}

.orch-session-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--card-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.orch-session-card:hover {
  border-color: var(--teal);
  background: rgba(0, 153, 153, 0.06);
  transform: translateY(-1px);
}

.orch-session-card.active {
  border-color: var(--teal);
  background: rgba(0, 153, 153, 0.1);
  box-shadow: 0 0 0 1px var(--teal);
}

/* Confirm-delete state */
.orch-session-card.orch-session-confirming {
  border-color: #ff5050;
  background: rgba(255, 80, 80, 0.1);
}

.orch-session-card.orch-session-confirming .orch-session-name {
  color: #ff5050;
}

.orch-session-card.orch-session-confirming .orch-session-delete {
  opacity: 1;
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
}

/* Inline editing card */
.orch-session-card.orch-session-editing {
  border-color: var(--teal);
  background: rgba(0, 153, 153, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.orch-session-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  flex: 1;
  min-width: 0;
  padding: 0;
}

.orch-session-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.orch-session-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  background: rgba(0, 153, 153, 0.15);
  border: 1px solid var(--teal);
  border-radius: 4px;
  color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.orch-session-save-btn:hover {
  background: rgba(0, 153, 153, 0.3);
  transform: scale(1.05);
}
.orch-session-save-btn svg {
  width: 16px;
  height: 16px;
}

.orch-session-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.orch-session-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orch-session-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.orch-session-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.orch-session-card:hover .orch-session-delete {
  opacity: 1;
}

.orch-session-delete:hover {
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
}

.orch-session-delete svg {
  width: 12px;
  height: 12px;
}

/* ===== LAUNCH BUTTONS ROW ===== */

.orch-launch-buttons {
  display: flex;
  gap: 0.6rem;
}

.orch-save-btn {
  flex: 0 0 auto;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: transparent;
  color: var(--teal);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
}

.orch-save-btn:hover {
  background: rgba(0, 153, 153, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 153, 153, 0.2);
}

.orch-launch-buttons .orch-launch-btn {
  flex: 1 1 auto;
}

/* ===== LOADING STATE ===== */

.orch-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  z-index: 9999;
  gap: 1.5rem;
}

.orch-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--teal-light);
  border-radius: 50%;
  animation: orchSpin 0.8s linear infinite;
}

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

.orch-loading-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.orch-loading-progress {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.orch-loading-error {
  text-align: center;
  max-width: 400px;
}

.orch-loading-error p {
  color: var(--danger);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.orch-retry-btn {
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: transparent;
  color: var(--teal-light);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.orch-retry-btn:hover {
  background: rgba(0, 153, 153, 0.1);
}


/* ===== PART BADGE (on hero sections in multi-guide presentations) ===== */

.orch-part-badge {
  position: absolute;
  top: 5.5rem;
  left: 2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--teal-light);
  padding: 0.4rem 1rem;
  border: 1px solid rgba(0, 184, 184, 0.3);
  background: rgba(0, 184, 184, 0.08);
  border-radius: 20px;
  z-index: 10;
  pointer-events: none;
}


/* ===== GUIDE BOUNDARY NAV TRANSITION ===== */

.sticky-nav.orch-transitioning {
  animation: orchNavTransition 0.6s ease;
}

@keyframes orchNavTransition {
  0% { opacity: 1; transform: translateY(0); }
  30% { opacity: 0; transform: translateY(-100%); }
  70% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ===== ORCHESTRATOR MODE -- guide container ===== */

#guideContainer {
  position: relative;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Guard: constrain all non-hero sections to a readable max-width.
   Not every guide uses a .container child (or some content breaks out of it),
   so this section-level cap prevents full-viewport-width stretching.
   Individual guides can override via their own scoped CSS if wider layout is needed. */
/* Each section is wrapped in a [data-guide] div. Non-hero sections get a max-width
   constraint to prevent full-width stretching. Hero wrappers are excluded. */
#guideContainer > [data-guide]:not(.orch-hero-wrapper) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero sections fill the viewport in the orchestrator, matching standalone behavior.
   The hero is injected as the first step in the presentation config so it is part
   of the step flow (not a dead scroll zone). */
#guideContainer .hero {
  min-height: 100vh;
  /* Re-assert hero background at ID-level specificity (1-1-0) so scoped
     guide rules like [data-guide] section { background: transparent } (0-1-1)
     can't override it. Values mirror guide-hero.css with safe fallbacks. */
  background: linear-gradient(135deg,
    var(--bg-dark, #0d0d1a) 0%,
    var(--hero-gradient-mid, #1a1a3e) 50%,
    var(--bg-dark, #0d0d1a) 100%);
}

/* For heroes with a .step wrapper, use flex: 1 so the step fills the hero's 100vh
   without adding extra height (min-height: 100vh on BOTH parent + child would
   overshoot by the hero's 2rem padding).
   NOTE: Do NOT add position: relative here -- the .scroll-indicator uses
   position: absolute; bottom: 2rem and must reference the .hero section
   (which has position: relative from guide-layout.css) to land at the
   viewport bottom. */
#guideContainer .hero > .step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ===== LIGHT MODE ===== */

[data-theme="light"] #guideContainer .hero {
  background: linear-gradient(135deg, #e8e8f0 0%, #f5f5f7 50%, #e8e8f0 100%);
}

[data-theme="light"] .orch-builder {
  background: transparent;
}

[data-theme="light"] .orch-builder-hero {
  background: linear-gradient(135deg,
    #f5f5f7 0%,
    #e8ecf0 40%,
    #dfe8ee 60%,
    #f5f5f7 100%
  );
}

[data-theme="light"] .orch-builder-hero::before {
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 153, 153, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0, 88, 124, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .orch-hero-title {
  background: linear-gradient(135deg, #007a7a, #004a6e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .orch-hero-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .orch-hero-toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .orch-guide-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 248, 250, 0.9) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 153, 153, 0.2);
}

[data-theme="light"] .orch-guide-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  border-left-color: var(--teal);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 248, 0.95) 100%);
}

[data-theme="light"] .orch-guide-card.selected {
  border-color: var(--teal);
  border-left-color: var(--teal);
  box-shadow: 0 0 16px rgba(0, 153, 153, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(230, 248, 248, 0.9) 100%);
}

[data-theme="light"] .orch-guide-card-info h3 {
  color: #1a1a2e;
}

[data-theme="light"] .orch-guide-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  color: #666;
}

[data-theme="light"] .orch-guide-toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(0, 153, 153, 0.06);
}

[data-theme="light"] .orch-guide-toggle.active {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: var(--teal);
  color: #fff;
}

[data-theme="light"] .orch-selected-item {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .orch-selected-empty {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .orch-total-time strong {
  color: var(--teal);
}

[data-theme="light"] .orch-auth-btn {
  border-color: rgba(0, 0, 0, 0.15);
  color: #555;
}

[data-theme="light"] .orch-auth-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

[data-theme="light"] .orch-auth-status {
  color: #666;
}

[data-theme="light"] .orch-category-pill {
  border-color: rgba(0, 0, 0, 0.12);
  color: #666;
}

[data-theme="light"] .orch-category-pill:hover {
  border-color: var(--teal);
  color: var(--teal);
}

[data-theme="light"] .orch-category-pill.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

[data-theme="light"] .orch-category-header {
  color: #888;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .orch-sessions-section {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .orch-sessions-label {
  color: #888;
}

[data-theme="light"] .orch-session-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .orch-session-card:hover,
[data-theme="light"] .orch-session-card.active {
  background: rgba(0, 153, 153, 0.05);
}

[data-theme="light"] .orch-save-btn {
  border-color: var(--teal);
  color: var(--teal);
}

[data-theme="light"] .orch-launch-btn {
  box-shadow: 0 2px 8px rgba(0, 153, 153, 0.2);
}

[data-theme="light"] .orch-loading {
  background: #f5f5f7;
}

[data-theme="light"] .orch-part-badge {
  color: var(--teal);
  border-color: rgba(0, 153, 153, 0.3);
  background: rgba(0, 153, 153, 0.06);
}


/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .orch-builder {
    padding: 0 0 2rem;
  }

  .orch-builder-hero {
    padding: 3rem 1.25rem 2rem;
  }

  .orch-hero-logo {
    height: 60px;
  }

  .orch-builder-footer {
    flex-wrap: wrap;
  }

  .orch-category-bar {
    padding: 0 1rem;
  }

  .orch-launch-buttons {
    flex-direction: column;
  }

  .orch-builder-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .orch-guide-card-info p {
    display: none;
  }

  .orch-card-meta {
    display: none;
  }

  .orch-part-badge {
    top: 4.5rem;
    left: 1rem;
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orch-builder-hero::before {
    animation: none;
  }

  .orch-hero-logo {
    animation: none;
    filter: drop-shadow(0 0 25px rgba(0, 153, 153, 0.3));
  }

  .orch-loading-spinner {
    animation: none;
    border-top-color: var(--teal);
  }

  .sticky-nav.orch-transitioning {
    animation: none;
  }
}

/* ── Hide share buttons on presenter page only ── */
body[data-ae-page="presentation-orchestrator"] .share-buttons {
  display: none;
}