/* =========================================
   spin2choose — Explore Hub Styles
   ========================================= */

/* --- Explore Button (Header) --- */
.btn--explore {
  background: var(--gradient-primary);
  color: #ffffff;
  border: none;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn--explore:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(167, 139, 250, 0.6);
  color: #ffffff;
}

/* --- Modal Layout --- */
.modal--explore {
  max-width: 1000px;
  width: 95%;
  height: 85vh;
  display: flex;
  flex-direction: column;
  /* -webkit-tap-highlight-color is inherited, so setting it here kills the
     mobile blue flash on every clickable descendant (cards, chips, filters,
     close button, AI chips, etc.). */
  -webkit-tap-highlight-color: transparent;
}

.modal--explore button,
.modal--explore .tpl-card,
.modal--explore .input {
  touch-action: manipulation;
}

.explore-modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.explore-modal-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
}

.modal-explore__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
}

/* --- Filters --- */
.explore-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.explore-filter-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.explore-filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
}

.explore-filter-chip.active {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.3);
  color: var(--accent-purple);
}

/* --- Search --- */
.explore-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  margin-bottom: var(--space-xl);
}

.explore-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
  flex-shrink: 0;
}

.explore-search-input {
  width: 100%;
  padding: 11px 38px 11px 38px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.explore-search-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}

.explore-search-input::placeholder {
  color: var(--text-tertiary);
}

.explore-search-clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--glass-bg-hover);
  border: none;
  border-radius: 50%;
  color: var(--text-muted, var(--text-tertiary));
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.explore-search-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* --- Grid & Cards --- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.tpl-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
}

.tpl-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: var(--glass-bg-hover);
}

.tpl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

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

.tpl-icon {
  font-size: 32px;
  margin-bottom: var(--space-xs);
}

.tpl-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.tpl-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.tpl-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

.tpl-count {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

.tpl-use-btn {
  background: var(--glass-bg);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tpl-card:hover .tpl-use-btn {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

/* --- Split "Use" button (for templates with team subsets) --- */
.tpl-split-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.tpl-split-btn__main {
  background: var(--glass-bg);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  border-right: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tpl-split-btn__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: var(--glass-bg);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tpl-split-btn__toggle svg {
  transition: transform var(--transition-fast);
}

.tpl-split-btn--open .tpl-split-btn__toggle svg {
  transform: rotate(180deg);
}

.tpl-card:hover .tpl-split-btn__main,
.tpl-card:hover .tpl-split-btn__toggle {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

.tpl-card:hover .tpl-split-btn__main {
  border-right-color: rgba(255, 255, 255, 0.2);
}

.tpl-split-btn__main:hover {
  background: rgba(139, 92, 246, 0.85) !important;
  color: #fff !important;
}

.tpl-split-btn__toggle:hover {
  background: rgba(139, 92, 246, 0.85) !important;
  color: #fff !important;
}

.tpl-split-btn__menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 200;
  overflow: hidden;
}

.tpl-split-btn--open .tpl-split-btn__menu {
  display: block;
}

.tpl-split-btn__option {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tpl-split-btn__option:last-child {
  border-bottom: none;
}

.tpl-split-btn__option:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.tpl-split-btn__option:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
}

/* =========================================
   AI Wheel Builder
   ========================================= */

.ai-hero {
  position: relative;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg,
      rgba(167, 139, 250, 0.12),
      rgba(244, 114, 182, 0.10));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 30px rgba(167, 139, 250, 0.12);
}

.ai-hero__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.ai-hero__sparkle {
  font-size: 1.1em;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.6));
}

.ai-hero__row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.ai-hero__prompt {
  flex: 1;
  min-width: 0;
}

.ai-hero__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  font-size: 0.95em;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.6));
  cursor: help;
  opacity: 0.75;
  position: relative;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.ai-hero__info:hover,
.ai-hero__info:focus {
  opacity: 1;
  color: var(--text-primary);
  outline: none;
}

.ai-hero__info[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated, rgba(20, 20, 30, 0.95));
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: var(--text-primary);
  font-size: var(--text-xs, 0.7rem);
  font-weight: 400;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 10;
}

.ai-hero__info:hover::after,
.ai-hero__info:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ai-hero__count {
  width: 64px;
  flex: 0 0 auto;
  background-color: var(--bg-secondary);
}

.ai-hero__count:hover,
.ai-hero__count:focus {
  background-color: var(--bg-elevated);
}

.ai-hero__count option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.ai-hero__generate {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0 18px;
  white-space: nowrap;
  justify-content: center;
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ai-hero__generate:hover {
  transform: scale(1.04);
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.6);
}

.ai-hero__generate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-md);
}

.ai-chip {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.30);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.ai-chip:hover {
  background: rgba(167, 139, 250, 0.22);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* --- AI Result Card (variant of .tpl-card) --- */
.tpl-card--ai {
  position: relative;
  grid-column: 1 / -1;
  /* full-width across the explore-grid */
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(135deg,
      rgba(167, 139, 250, 0.08),
      rgba(244, 114, 182, 0.06));
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.15);
}

.tpl-card--ai__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ai-result__list {
  list-style: none;
  margin: var(--space-sm) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
}

.ai-result__list li {
  font-size: var(--text-sm);
  color: var(--text-primary);
  padding: 4px 8px;
  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
  border-radius: 6px;
}

.ai-result__refine {
  display: flex;
  gap: 6px;
  margin-top: var(--space-sm);
}

.ai-result__refine-input {
  flex: 1;
}

.ai-result__footer {
  margin-top: var(--space-sm);
}

.ai-result__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ai-result__use {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  font-weight: 700;
}

/* --- Skeleton / shimmer --- */
.tpl-card--ai-skeleton .ai-skeleton__title {
  height: 18px;
  width: 60%;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

.ai-skeleton__row {
  display: inline-block;
  width: 100%;
  height: 14px;
  border-radius: 4px;
}

.ai-skeleton__status {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

.shimmer {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(167, 139, 250, 0.18) 50%,
      rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.4s ease-in-out infinite;
}

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

  100% {
    background-position: -200% 0;
  }
}

.tpl-card--ai-error {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
}

/* --- Undo toast --- */
.ai-undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
}

.ai-undo-toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ai-undo-toast__btn {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Sidebar AI shortcut */
.btn--ai-shortcut {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(244, 114, 182, 0.18));
  border: 1px solid rgba(167, 139, 250, 0.45);
  color: var(--text-primary);
}

.btn--ai-shortcut:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.30), rgba(244, 114, 182, 0.30));
}

/* =========================================
   Explore modal — Mobile adjustments
   ========================================= */
@media (max-width: 768px) {

  /* Give the modal more screen real estate and tighter body padding so
     the AI hero has room to breathe on narrow viewports. dvh tracks the
     visible viewport (collapsing iOS chrome) so the modal doesn't overflow
     above and below its overlay. */
  .modal--explore {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Push the title + close button below the iOS notch / status bar. */
  .modal--explore .modal__header {
    padding-top: max(var(--space-lg), env(safe-area-inset-top));
  }

  .modal-explore__body {
    padding: 0 var(--space-md) var(--space-md);
  }

  /* Keep the title on one line; let the subtitle drop below as a second
     line instead of pushing the title to wrap awkwardly. */
  .explore-modal-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .explore-modal-subtitle {
    font-size: var(--text-xs);
  }

  /* AI hero: stack vertically so the prompt gets a full-width row and
     the count + Generate button share a second row. Reading the prompt
     placeholder ("Describe a wheel…") is the single most important
     affordance in this section — it must not get squeezed to 140px. */
  .ai-hero {
    padding: var(--space-md);
  }

  .ai-hero__row {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .ai-hero__prompt {
    flex: 1 1 100%;
  }

  .ai-hero__count {
    /* Slightly wider so the number + dropdown caret aren't cramped */
    width: 72px;
  }

  .ai-hero__generate {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
  }

  /* Prevent tooltip overflow off the right edge of the modal — anchor
     the info tooltip to the left of the icon instead of centered. */
  .ai-hero__info[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-4px);
  }

  .ai-hero__info:hover::after,
  .ai-hero__info:focus::after {
    transform: translateX(0) translateY(0);
  }

  /* Chips — allow horizontal scroll on very narrow viewports so they
     don't blow out to three+ rows. */
  .ai-hero__chips {
    margin-top: var(--space-sm);
  }

  /* Explore grid — single column with tighter gaps below the AI hero. */
  .explore-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}