/* Shared searchable-switcher component — powers BOTH the Products switcher
 * (_product_switcher.html) AND the Subjects switcher (_subject_switcher.html).
 *
 * Class-based (BEM-ish `.product-switcher__*`) so BOTH instances share the
 * exact layout/appearance while carrying distinct ids (product-* vs subject-*);
 * accents are driven by `.is-accent-<token>` custom-property rules, NOT fragile
 * positional/index selectors. The compiled tailwind-main.css omits many of the
 * utility classes the markup would otherwise need (backdrop-blur, arbitrary
 * widths, slim scrollbars), so this file supplies the full layout + glass
 * appearance and renders correctly regardless of Tailwind's build state.
 *
 * No inline styles / scripts anywhere — CSP-safe. Colour contrast targets
 * WCAG 2.2 AA on the dark (#0b1020-ish) glass panel.
 */

/* Two adjacent switchers (Products + Subjects) share one navbar flex group so
 * `justify-between` can't push them apart; this gap survives even when the
 * compiled Tailwind omits `gap-2`. */
.nav-switcher-group {
  align-items: center;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Accent tokens — one rule-set per allowed accent drives `--accent`
 * (a bright hue for icons/borders/rings) + `--accent-soft` (translucent fill).
 * ------------------------------------------------------------------------- */
.is-accent-green  { --accent: #34d399; --accent-soft: rgba(52, 211, 153, 0.16); }
.is-accent-purple { --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.16); }
.is-accent-blue   { --accent: #60a5fa; --accent-soft: rgba(96, 165, 250, 0.16); }
.is-accent-amber  { --accent: #fbbf24; --accent-soft: rgba(251, 191, 36, 0.16); }
.is-accent-pink   { --accent: #f472b6; --accent-soft: rgba(244, 114, 182, 0.16); }
.is-accent-teal   { --accent: #2dd4bf; --accent-soft: rgba(45, 212, 191, 0.16); }
.is-accent-slate  { --accent: #94a3b8; --accent-soft: rgba(148, 163, 184, 0.16); }

/* Sensible fallback if an item somehow lacks an accent class. */
.product-switcher__item,
.mobile-nav-product {
  --accent: #34d399;
  --accent-soft: rgba(52, 211, 153, 0.16);
}

/* ---------------------------------------------------------------------------
 * Container + trigger
 * ------------------------------------------------------------------------- */
.product-switcher {
  position: relative;
}

.product-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;         /* 44px tap target */
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  background-color: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.9);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.product-switcher__trigger:hover {
  background-color: rgba(55, 65, 81, 0.9);
  border-color: rgba(52, 211, 153, 0.55);
}

.product-switcher__trigger:focus-visible {
  /* SC 1.4.11 focus-indicator contrast: composited over the bg-gray-800 navbar
   * a 0.45-alpha mint ring only reached 2.70:1. 0.9 alpha -> 6.47:1 (>= 3:1),
   * an unambiguous focus indicator. */
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.9);
}

.product-switcher__trigger-glyph {
  width: 1.05rem;
  height: 1.05rem;
  color: #6ee7b7;
  flex-shrink: 0;
}

.product-switcher__chevron {
  width: 1rem;
  height: 1rem;
  margin-inline-start: 0.125rem;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.product-switcher__trigger[aria-expanded="true"] .product-switcher__chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Full-screen frosted backdrop behind the open dropdown.
 * ------------------------------------------------------------------------- */
#product-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(17, 24, 39, 0.6);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

#product-dropdown-backdrop.hidden {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Dropdown panel (glass).
 * ------------------------------------------------------------------------- */
#product-dropdown,
.product-switcher__panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.75rem);
  width: 26rem;
  max-width: calc(100vw - 2rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(55, 65, 81, 0.85);
  background-image: linear-gradient(
    to bottom,
    rgba(17, 24, 39, 0.94),
    rgba(3, 7, 18, 0.97)
  );
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transform-origin: top;
  animation: product-switcher-in 0.16s ease-out;
}

@keyframes product-switcher-in {
  from { opacity: 0; transform: translateY(-0.375rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------------------
 * Sticky search header.
 * ------------------------------------------------------------------------- */
.product-switcher__search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid rgba(55, 65, 81, 0.6);
  background-image: linear-gradient(
    to right,
    rgba(52, 211, 153, 0.10),
    rgba(96, 165, 250, 0.10)
  );
}

.product-switcher__search-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.product-switcher__search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.375rem 0.25rem;
  font-size: 1rem;              /* >=16px: no iOS zoom */
  color: #f8fafc;
  background: transparent;
  border: none;
  outline: none;
}

.product-switcher__search-input::placeholder {
  color: #94a3b8;
}

.product-switcher__search-input:focus-visible {
  outline: none;
}

.product-switcher__search:focus-within {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5);
}

/* ---------------------------------------------------------------------------
 * Scrollable list.
 * ------------------------------------------------------------------------- */
.product-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  overflow-y: auto;
  max-height: min(60vh, 30rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.product-switcher__list::-webkit-scrollbar {
  width: 8px;
}

.product-switcher__list::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
}

.product-switcher__list::-webkit-scrollbar-track {
  background: transparent;
}

.product-switcher__row {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
 * Compact item rows.
 * ------------------------------------------------------------------------- */
.product-switcher__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;         /* 44px tap target */
  color: #f1f5f9;
  text-decoration: none;
  border-radius: 0.625rem;
  border-inline-start: 2px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* Hover + JS-driven "active option" share the same highlight. */
.product-switcher__item:hover,
.product-switcher__item.is-active {
  background-color: var(--accent-soft);
  border-inline-start-color: var(--accent);
}

.product-switcher__item:focus-visible,
.product-switcher__item.is-active {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Current-subject marker ("you are here" on the Subjects switcher). Shares the
 * `is-active` class the roving keyboard highlight uses (the client re-seeds it
 * on open so it persists), and a thicker accent bar + solid accent name make
 * the currently-open subject stand out from its siblings. */
.product-switcher__item.is-active {
  border-inline-start-width: 3px;
}

.product-switcher__item.is-active .product-switcher__item-name {
  color: var(--accent);
}

.product-switcher__item-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  color: var(--accent);
  background-color: var(--accent-soft);
  border: 1px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.product-switcher__icon-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.product-switcher__item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.product-switcher__item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f8fafc;
}

.product-switcher__item-subtitle {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #cbd5e1;              /* AA on dark glass */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-switcher__item-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #64748b;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.product-switcher__item:hover .product-switcher__item-chevron,
.product-switcher__item.is-active .product-switcher__item-chevron {
  color: var(--accent);
  transform: translateX(2px);
}

/* ---------------------------------------------------------------------------
 * Empty state + live status.
 * ------------------------------------------------------------------------- */
.product-switcher__empty {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #94a3b8;
}

.product-switcher__status {
  margin: 0;
  padding: 0.375rem 0.875rem 0.625rem;
  font-size: 0.6875rem;
  color: #94a3b8;
  border-top: 1px solid rgba(55, 65, 81, 0.5);
}

/* ---------------------------------------------------------------------------
 * Mobile drawer product rows (reuses the accent tokens above).
 * ------------------------------------------------------------------------- */

/* Small muted section heading in the mobile drawer (e.g. "Subjects" above the
 * subject rows). Uppercase + tracked, consistent with the drawer's muted text. */
.mobile-nav-section-label {
  margin: 0.5rem 0 0.25rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.mobile-nav-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mobile-nav-product__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--accent);
  background-color: var(--accent-soft);
  border: 1px solid var(--accent);
}

.mobile-nav-product__icon .product-switcher__icon-svg {
  width: 1rem;
  height: 1rem;
}

.mobile-nav-product__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mobile-nav-product__name {
  font-weight: 600;
  line-height: 1.2;
}

.mobile-nav-product__subtitle {
  font-size: 0.6875rem;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Utility: honour the [hidden] attribute even when display utilities load.
 * ------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Reduced motion: kill entrance animation + transforms/transitions.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #product-dropdown,
  .product-switcher__panel {
    animation: none;
  }

  .product-switcher__trigger,
  .product-switcher__chevron,
  .product-switcher__item,
  .product-switcher__item-chevron {
    transition: none;
  }

  .product-switcher__trigger[aria-expanded="true"] .product-switcher__chevron {
    transform: none;
  }

  .product-switcher__item:hover .product-switcher__item-chevron,
  .product-switcher__item.is-active .product-switcher__item-chevron {
    transform: none;
  }
}

/* ===========================================================================
 * Subjects switcher — master/detail hover+active flyout (SUBJECTS ONLY).
 *
 * A pure-CSS, CSP-safe detail panel that reveals each subject's tagline +
 * description + a static "5 AI teachers per topic" line to the RIGHT of the
 * dropdown, on pointer :hover AND on the JS-driven `.is-active` option (the
 * roving keyboard highlight AND the server-marked current subject). DOM focus
 * never lands on a row — the ARIA combobox keeps focus on #subject-search — so
 * `:focus-within` cannot fire; `.is-active` is the keyboard/current channel.
 *
 * EVERY selector below is scoped under #subject-dropdown / #subject-list, so the
 * Products switcher (#product-*) is completely untouched. The flyout inherits
 * `--accent` / `--accent-soft` from its `.is-accent-*` parent item, so it is
 * tinted with the subject's own hue and reads correctly on the dark glass.
 * ========================================================================= */

/* The flyout is absolutely positioned against #subject-dropdown (already a
 * positioned box via .product-switcher__panel — DO NOT change its position, or
 * the panel stops anchoring below the trigger). The panel must not CLIP the
 * flyout, so override the shared `overflow: hidden` here. The inner
 * .product-switcher__list keeps its own `overflow-y: auto` scroll, but because
 * the list is NOT positioned it is not the flyout's containing block, so the
 * absolutely-positioned flyout escapes the list's clipping and is bounded only
 * by this (now visible) panel. */
#subject-dropdown {
  overflow: visible;
}

#subject-dropdown .subject-switcher__detail {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  z-index: 60;
  width: min(20rem, 32vw);
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(55, 65, 81, 0.85);
  border-left: 3px solid var(--accent, #60a5fa);
  background-image: linear-gradient(
    to bottom,
    rgba(17, 24, 39, 0.97),
    rgba(3, 7, 18, 0.98)
  );
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  text-align: start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    visibility 0.22s ease;
}

/* Left-pointing caret bridging the flyout back toward the panel: an accent
 * outer triangle with a surface-coloured inner triangle laid over it. */
#subject-dropdown .subject-switcher__detail::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--accent, #60a5fa);
}

#subject-dropdown .subject-switcher__detail::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgba(17, 24, 39, 0.97);
}

#subject-dropdown .subject-switcher__detail-tagline {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent, #60a5fa);
}

#subject-dropdown .subject-switcher__detail-desc {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  color: #cbd5e1;              /* AA muted body on the dark glass */
}

#subject-dropdown .subject-switcher__detail-teachers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(55, 65, 81, 0.6);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent, #60a5fa);
}

#subject-dropdown .subject-switcher__detail-teachers i {
  flex: 0 0 auto;
  font-size: 0.8rem;
}

/* Reveal on pointer hover (mouse) AND on the JS-active option (keyboard nav +
 * the server-marked current subject). The row never receives DOM focus, so
 * :focus-within is intentionally NOT part of this selector. Kept non-interactive
 * (pointer-events: none) — it is a description, not a target. */
#subject-list .product-switcher__row:hover .subject-switcher__detail,
#subject-list .product-switcher__item.is-active .subject-switcher__detail {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translateX(0);
}

/* Reduced motion: reveal instantly — no slide, no transition. */
@media (prefers-reduced-motion: reduce) {
  #subject-dropdown .subject-switcher__detail {
    transition: none;
    transform: none;
  }

  #subject-list .product-switcher__row:hover .subject-switcher__detail,
  #subject-list .product-switcher__item.is-active .subject-switcher__detail {
    transform: none;
  }
}