/*
 * KT1.6 per-lesson glossary side panel styles.
 *
 * Pairs with glossary-panel.js. Reuses the lesson.css theme tokens
 * (--accent, --bg, --bg-2, --ink, --ink-faint, --rule, --mono, --serif),
 * so it inverts correctly under html[data-theme="dark"] with no new color
 * tokens. No standalone hex.
 *
 * Layout: a fixed side panel anchored bottom-right on wide viewports; on
 * narrow viewports it spans the bottom of the screen. The header toggle
 * collapses the whole panel (data-collapsed="true") to a compact tab; the
 * "Also used" disclosure collapses independently.
 */

.lesson-glossary-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 6px 24px var(--accent-glow);
  font-family: var(--serif);
  overflow: hidden;
}

.lgp-toggle {
  flex: 0 0 auto;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: var(--accent-wash);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lgp-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.lesson-glossary-panel[data-collapsed="true"] {
  box-shadow: none;
}

.lesson-glossary-panel[data-collapsed="true"] .lgp-toggle {
  border-bottom: none;
}

.lgp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
}

.lgp-heading {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lgp-new-list,
.lgp-also-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lgp-term {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}

.lgp-new-list .lgp-term:first-child,
.lgp-also-list .lgp-term:first-child {
  border-top: none;
}

.lgp-term-name {
  display: block;
  font-weight: 600;
  color: var(--accent);
}

.lgp-term-def {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}

.lgp-empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.lgp-also {
  margin-top: 14px;
}

.lgp-also-toggle {
  width: 100%;
  text-align: left;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--rule);
  background: none;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.lgp-also-toggle::before {
  content: "\25B8 "; /* right-pointing triangle, collapsed */
}

.lgp-also-toggle[aria-expanded="true"]::before {
  content: "\25BE "; /* down-pointing triangle, expanded */
}

.lgp-also-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lgp-also-list {
  margin-top: 6px;
}

/* Narrow viewports: span the bottom of the screen, mobile-collapsible. */
@media (max-width: 720px) {
  .lesson-glossary-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: 50vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-glossary-panel {
    box-shadow: 0 2px 8px var(--rule);
  }
}