/* ─── GenAI Mindset v1 — Mobile Styles ─────────────────────────────────────── */
/* Applies at max-width: 768px only. Never affects desktop (≥769px). */

/* ─── HIDE DESKTOP-ONLY ELEMENTS ───────────────────────────────────────── */
#attribution {
  display: none !important;
}

#hub-card {
  display: none !important;
}

#brain-region-note {
  display: none !important;
}

#floating-label.hub-landed {
  display: none !important;
}

/* ─── TOP CHROME ─────────────────────────────────────────────────────────── */
#chrome-bar {
  padding: 10px 16px;
  gap: 8px;
}

#progress-label {
  display: none;
}

#chrome-back {
  padding: 10px 12px;
  margin: -10px -12px;
}

.chrome-label--right {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── BRAIN CANVAS & CANVAS CONTAINER ───────────────────────────────────── */
#canvas-container {
  left: 0 !important;
  width: 100% !important;
}

/* ─── CHAPTER HINT LABELS ────────────────────────────────────────────────── */
.chapter-hint {
  display: none !important;
}

/* ─── BRAIN TOOLTIP ──────────────────────────────────────────────────────── */
#brain-tooltip {
  display: none !important;
}

/* ─── HUB HERO (BYB button + sub-label) ─────────────────────────────────── */
#hub-hero {
  bottom: 32px;
  padding: 0 20px;
  text-align: center;
}

#byb-btn {
  padding: 13px 28px;
  font-size: 10px;
}

/* ─── CHAPTER DRAWER (bottom sheet on mobile) ────────────────────────────── */
#left-panel {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  transform: translateY(100%) !important;
  border-radius: 20px 20px 0 0;
  max-height: 78dvh;
  overflow-y: auto;
  padding: 20px 24px 48px !important;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  background: rgba(22, 20, 32, 0.99) !important;
  border-top: 1px solid rgba(174, 153, 255, 0.2) !important;
  z-index: 500 !important;
}

/* Suppress CSS pseudo-element handle — real #drawer-handle div is used instead */
#left-panel::before {
  display: none;
}

/* Show real drag handle on mobile */
#drawer-handle {
  display: block !important;
}

#left-panel.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

#drawer-overlay {
  z-index: 45;
}

/* ─── DROP PANEL ─────────────────────────────────────────────────────────── */
#drop-panel {
  grid-template-columns: 100% !important;
}

#drop-nav {
  display: none !important;
}

#drop-visual {
  display: none !important;
}

/* Transparent background so the brain shows through on mobile */
/* Remove the top mask gradient — it hides content on mobile */
#drop-content {
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ─── DROP CONTENT SECTIONS ──────────────────────────────────────────────── */
.drop-section {
  padding: 60px 24px 48px !important;
  min-height: auto !important;
  background: rgba(26, 26, 29, 0.85) !important;
}

.drop-section-hero {
  min-height: 100dvh !important;
  padding: 88px 24px 64px !important;
  background: transparent !important;
}

/* ─── DROP TYPOGRAPHY ────────────────────────────────────────────────────── */
.drop-h1 {
  font-size: clamp(36px, 10vw, 52px);
}

.drop-h2 {
  font-size: clamp(26px, 7vw, 38px);
}

.drop-body {
  font-size: 16px;
  max-width: 100%;
}

/* ─── DROP LABEL ─────────────────────────────────────────────────────────── */
.drop-label {
  margin-bottom: 12px;
}

/* ─── DROP GRIDS (flip cards, comparison) ────────────────────────────────── */
.drop-flip-grid {
  grid-template-columns: 1fr;
}

.drop-compare-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.drop-journey-list {
  gap: 10px;
}

/* ─── PROGRAMME CARDS ────────────────────────────────────────────────────── */
.prog-cards {
  grid-template-columns: 1fr;
}

/* ─── SURVEY PILLS ───────────────────────────────────────────────────────── */
.pill-grid {
  flex-direction: column;
}

.survey-pill {
  width: 100%;
  text-align: left;
  padding: 13px 20px;
}

/* ─── TEXTAREAS ──────────────────────────────────────────────────────────── */
.drop-textarea {
  max-width: 100%;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* ─── CTA BUTTONS ────────────────────────────────────────────────────────── */
.drop-cta {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}

/* ─── SCROLL HINT ────────────────────────────────────────────────────────── */
#drop-scroll-hint {
  left: 24px !important;
  bottom: 28px !important;
}

/* ─── SIGNOFF ────────────────────────────────────────────────────────────── */
.drop-signoff {
  margin-top: 32px;
}

/* ─── SMALL PHONES (≤430px) ──────────────────────────────────────────────── */
@media (max-width: 430px) {
  .drop-section {
    padding: 48px 20px 40px;
  }

  .drop-section-hero {
    padding: 80px 20px 56px;
  }

  #byb-btn {
    padding: 12px 22px;
    font-size: 10px;
  }

  #chrome-bar {
    padding: 8px 14px;
  }

  .drop-h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .drop-h2 {
    font-size: clamp(24px, 6.5vw, 34px);
  }

  .drop-body {
    font-size: 15px;
  }
}

/* ─── LANDSCAPE / SHORT VIEWPORTS ────────────────────────────────────────── */
@media (max-height: 500px) {
  #drop-scroll-hint {
    display: none;
  }

  .drop-section-hero {
    min-height: auto;
    padding-top: 72px;
  }
}