/**
 * Guide — extractable column (accordion + voice). Ask is components/ask/.
 * Scope: under .guide-wrap
 *
 * Design language matches navigator dock:
 *   glass frost surface · white/70% idle controls · solid ink when active · 2px ink stroke
 * Host shell provides design tokens (--card, --ink, --line, …).
 */

.guide-wrap {
  /* Prefer tutor-wide :root --glass-* / --float-* from shell.css */
  --guide-glass-bg: var(--glass-bg, rgb(255 253 248 / 0.4));
  --guide-glass-border: var(--glass-border, rgb(26 26 26 / 0.1));
  --guide-glass-blur: var(--glass-filter, blur(18px) saturate(1.15));
  --guide-btn-fill: var(--float-btn-fill, rgb(255 255 255 / 0.7));
  --guide-ink: var(--ink, #1a1a1a);
  --guide-radius: var(--float-surface-radius, 22px);
  --guide-control-h: var(--float-control-h, var(--touch, 44px));
  --guide-stroke: var(--float-stroke, 2px);
  --guide-label-size: var(--float-label-size, 0.85rem);

  position: relative;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  z-index: 2;
}
/* While voice menu is open, sit above main media so the list isn’t under the frame */
.guide-wrap:has(.voice-picker[data-open="true"]) {
  z-index: 40;
}
@media (max-width: 959px) {
  .guide-wrap {
    margin-top: 0 !important;
  }
}

/* Guide accordion — glass frost panel (same idea as nav-dock-surface) */
.guide {
  background: var(--guide-glass-bg);
  backdrop-filter: var(--guide-glass-blur);
  -webkit-backdrop-filter: var(--guide-glass-blur);
  border: 1px solid var(--guide-glass-border);
  border-radius: var(--guide-radius);
  box-shadow: var(
    --glass-shadow,
    0 1px 0 rgb(255 255 255 / 0.35) inset,
    0 4px 6px rgb(0 0 0 / 0.04),
    0 10px 28px rgb(0 0 0 / 0.1)
  );
  flex-shrink: 0;
  /* visible so voice dropdown can escape the card (was hidden → clipped) */
  overflow: visible;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  /* Above .tts-status so voice menu never paints under the error line */
  z-index: 2;
}
@media (min-width: 960px) {
  .guide {
    max-height: calc(100dvh - 7rem);
  }
  .guide[data-open="true"] .guide-panel {
    overflow: auto;
    min-height: 0;
  }
}
/* Tablet/phone column: guide uses full height (no fixed bottom Back/Next) */
@media (max-width: 959px) {
  .guide[data-open="true"] {
    max-height: calc(100dvh - 5.5rem);
  }
  .guide[data-open="true"] .guide-panel {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    max-height: none;
  }
}

/* Header row: title accordion + voice pill — pad matches nav/ask */
.guide-head {
  display: flex;
  align-items: center;
  gap: var(--float-control-gap, 0.4rem);
  width: 100%;
  min-width: 0;
  padding: var(--float-pad-y, 0.45rem) var(--float-pad-x, 0.55rem);
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  overflow: visible;
}
.guide-summary {
  display: flex;
  align-items: center;
  gap: var(--float-control-gap, 0.4rem);
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--guide-control-h);
  height: var(--guide-control-h);
  padding: 0 0.35rem 0 0.45rem;
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--guide-ink);
  box-sizing: border-box;
}
/* No hover wash on the title row — only the voice chip reacts to hover */
.guide-summary:focus-visible {
  outline: 2px solid var(--guide-ink);
  outline-offset: -2px;
}
.guide-chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-left: 0.1rem;
  transition: transform 0.2s;
}
/* Compact: hide chevron — "Guide" is a CTA pill like Ask me anything */
.guide[data-open="false"] .guide-chevron {
  display: none;
}
/* Expanded: chevron down to collapse */
.guide[data-open="true"] .guide-chevron {
  display: block;
  transform: rotate(90deg);
}
.guide-label,
.guide-title {
  flex: 1;
  min-width: 0;
  font-size: var(--guide-label-size);
  font-weight: var(--float-label-weight, 700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Compact: fixed "Guide" only; expanded: slide title only */
.guide-label {
  display: none;
}
.guide-title {
  display: block;
}
.guide[data-open="false"] .guide-label {
  display: block;
}
.guide[data-open="false"] .guide-title {
  display: none;
}
.guide[data-open="true"] .guide-label {
  display: none;
}
.guide[data-open="true"] .guide-title {
  display: block;
}

/* Transcript only when expanded — no divider line; spacing does the job */
.guide-panel {
  display: none;
  padding: 0.55rem 0.85rem 0.75rem;
  border-top: none;
  min-height: 0;
  overflow: auto;
}
.guide[data-open="true"] .guide-panel {
  display: block;
}

.guide-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--guide-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*
 * Outside the white card; absolute so wrap height = card only.
 * z-index MUST stay below .guide (and its voice menu). Equal/higher
 * z-index + later DOM order made the error paint through the dropdown.
 */
.tts-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.4rem 0 0;
  padding: 0 0.15rem;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--muted);
  font-style: italic;
  z-index: 0;
  pointer-events: none; /* never block voice menu clicks */
}
.tts-status[hidden] {
  display: none;
}
.tts-status.is-error {
  color: var(--amber);
  font-style: normal;
}
/* When voice list is open, keep error fully under the menu stack */
.guide-wrap:has(.voice-picker[data-open="true"]) .tts-status {
  z-index: 0;
}

/*
 * Voice picker — mockup C short chip in header
 * (waveform icon + short name; no list chevron)
 */
.guide-head .voice-picker {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  z-index: 4;
}
.voice-picker[data-open="true"] {
  z-index: 50;
}

.guide-head .voice-trigger,
.voice-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  height: var(--guide-control-h, var(--float-control-h, 44px));
  min-height: var(--guide-control-h, var(--float-control-h, 44px));
  min-width: var(--guide-control-h, var(--float-control-h, 44px));
  margin: 0;
  padding: 0 0.7rem;
  border-radius: var(--radius-pill, 999px);
  border: var(--guide-stroke, 2px) solid var(--guide-ink);
  background: var(--guide-btn-fill);
  color: var(--guide-ink);
  font-family: inherit;
  font-size: var(--guide-label-size, 0.85rem);
  font-weight: var(--float-label-weight, 700);
  cursor: pointer;
  line-height: 1.15;
  text-align: left;
  transition: background 0.15s ease;
}
.guide-head .voice-trigger:hover,
.voice-trigger:hover {
  background: rgb(255 255 255 / 0.85);
}
.voice-trigger:focus {
  outline: none;
}
.voice-trigger:focus-visible {
  outline: 2px solid var(--guide-ink);
  outline-offset: 2px;
}
.voice-trigger-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
  display: block;
}
.voice-trigger-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
/* Loading lives in the voice pill — keep dropdown usable so user can switch voice mid-load */
.voice-picker[data-loading="true"] .voice-trigger-label {
  color: var(--muted, #4a463f);
  font-style: italic;
}
/*
 * Voice list = shared .tm-panel (components/menu/menu.css).
 * Host .voice-picker gets data-menu-side from positionMenu().
 */
.voice-menu.tm-panel {
  min-width: max(100%, 11rem);
}

.guide audio { display: none; }