/* ==========================================================================
   Eterniseed HTML port — Picker component CSS
   --------------------------------------------------------------------------
   Skin-aware styling via existing CSS variables. Two modes — modal (full
   screen on mobile, centered on desktop) and inline (anchored under tile,
   half-sheet on mobile).
   ========================================================================== */

.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 200ms ease-out;
  padding: var(--space-7);
  pointer-events: auto;
}
.picker-overlay--entered { opacity: 1; }
.picker-overlay--leaving { opacity: 0; pointer-events: none; }

.picker-shell {
  /* #18 mobile fix (Joe screenshot 2026-06-12): min-width:0 lets the shell
     shrink below content min-content. Without it, one long unbreakable
     token (the Biblica(R) full titles) inflates the flex item past
     max-width, and justify-content:center on the overlay clips BOTH edges
     off-screen. min-width beats max-width in flex sizing - this is the
     load-bearing line. */
  min-width: 0;
  max-width: min(560px, 100vw);
  background: var(--skin-surface);
  border: 1px solid var(--skin-border, var(--skin-divider));
  border-radius: var(--radius-2xl);
  box-shadow: var(--skin-shadow-elevated);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-12));
  overflow: hidden;
  align-self: center;
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms ease-out;
}
.picker-overlay--entered .picker-shell {
  transform: translateY(0) scale(1);
}

/* Inline mode: half-sheet on mobile, anchored expansion on desktop */
.picker-shell--inline {
  max-width: 480px;
}

@media (max-width: 767px) {
  .picker-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .picker-shell {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
  }
  .picker-overlay--entered .picker-shell {
    transform: translateY(0);
  }
}

/* Header */
.picker-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7);
  border-bottom: 1px solid var(--skin-divider);
}
.picker-title {
  flex: 1;
  margin: 0;
  font-family: var(--skin-font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--skin-ink-primary);
}
.picker-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--skin-ink-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-close:hover { background: var(--skin-surface-sunken); color: var(--skin-ink-primary); }

/* Search */
.picker-search {
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--skin-divider);
  background: var(--skin-surface-sunken);
}
.picker-search__input {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--skin-divider);
  border-radius: var(--radius-pill);
  background: var(--skin-surface);
  color: var(--skin-ink-primary);
  font-family: var(--skin-font-body);
  font-size: var(--text-sm);
  outline: 0;
}
.picker-search__input:focus {
  border-color: var(--skin-accent);
  box-shadow: 0 0 0 3px var(--skin-accent-tint-bg);
}

/* List */
.picker-list-host {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: var(--space-5);
}
.picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Phase C.3 picker UX — two header levels.
   .picker-section-label  — language-class header (top of section).
   .picker-group-label    — tradition-class header (subordinate, indented). */
.picker-section-label {
  overflow-wrap: anywhere;
  margin: var(--space-6) 0 var(--space-3) 0;
  font-family: var(--skin-font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--skin-ink-secondary);
}
.picker-section-label:first-child { margin-top: 0; }
.picker-group-label {
  overflow-wrap: anywhere;
  margin: var(--space-4) 0 var(--space-2) var(--space-4);
  font-family: var(--skin-font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--skin-ink-tertiary, var(--skin-ink-secondary));
  opacity: 0.85;
}
.picker-group-label:first-child { margin-top: 0; }

/* Collapsible tradition accordion (Joe 2026-06-16) — opt-in via
   EterniseedPicker.open({collapsible:true}); used by the "Pick your curriculum"
   teacher picker so traditions roll up and the user expands one at a time. */
.picker-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-2) 0 0 0;
  padding: var(--space-4) var(--space-4);
  background: var(--skin-surface-sunken, transparent);
  border: 1px solid var(--skin-border, transparent);
  border-radius: var(--radius-lg, 12px);
  font-family: var(--skin-font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--skin-ink-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast, 0.15s) var(--easing, ease);
}
.picker-group-toggle:first-child { margin-top: 0; }
.picker-group-toggle:hover,
.picker-group-toggle:focus { background: var(--skin-accent-tint-bg, var(--skin-surface)); outline: none; }
.picker-group-toggle__chevron {
  flex: 0 0 auto;
  font-size: var(--text-md);
  color: var(--skin-ink-tertiary, var(--skin-ink-secondary));
  transition: transform var(--motion-fast, 0.15s) var(--easing, ease);
}
.picker-group-toggle--open .picker-group-toggle__chevron { transform: rotate(90deg); }
.picker-group-toggle__label { flex: 1 1 auto; overflow-wrap: anywhere; }
.picker-group-toggle__count {
  flex: 0 0 auto;
  min-width: 1.5em;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill, 999px);
  background: var(--skin-accent-tint-bg, var(--skin-surface-sunken));
  color: var(--skin-ink-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}
.picker-group-body { padding-left: var(--space-3); }
.picker-group-body[hidden] { display: none; }
.picker-list--collapsible .picker-option { margin-left: 0; }

.picker-option {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--skin-surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--skin-font-body);
  font-size: var(--text-sm);
  color: var(--skin-ink-primary);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.picker-option:hover, .picker-option:focus {
  background: var(--skin-surface-sunken);
  outline: 0;
}
.picker-option:focus-visible {
  border-color: var(--skin-accent);
}
.picker-option--selected {
  background: var(--skin-accent-tint-bg);
  border-color: var(--skin-accent);
}

.picker-option__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.picker-option__icon {
  flex: 0 0 auto;
  font-size: var(--text-xl);
  width: 40px;
  text-align: center;
  opacity: 0.7;
}
.picker-option__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.picker-option__label {
  font-weight: 600;
  color: var(--skin-ink-primary);
  overflow-wrap: anywhere;
}
.picker-option__secondary {
  font-size: var(--text-xs);
  color: var(--skin-ink-secondary);
  overflow-wrap: anywhere;
}
.picker-option__description {
  font-size: var(--text-xs);
  color: var(--skin-ink-secondary);
  line-height: var(--leading-relaxed);
}
.picker-option__check {
  flex: 0 0 auto;
  color: var(--skin-accent-strong);
  font-weight: 700;
}

.picker-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--skin-ink-secondary);
  font-size: var(--text-sm);
}