/* Simulate button + in-app PhET simulation overlay.
   Page-scoped (linked from know/topics.html + learn/lesson.html via {% block extra_head %});
   plain CSS so no Tailwind rebuild is needed. Mirrors the vocab "Train" pill but in a
   distinct amber so the two per-section actions don't read as the same control. */

/* ── Launch button (amber; layout utilities come from the template) ─────────────── */
.sim-launch {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
}
.sim-launch:hover { background: rgba(251, 191, 36, 0.20); color: #fde68a; }
.sim-launch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55);
}

/* ── "Animation" launch button (sky; our Manim concept clips — distinct from the
      amber Simulate + emerald Exercise buttons on the same row) ──────────────────── */
.anim-launch {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.10);
  color: #7dd3fc;
}
.anim-launch:hover { background: rgba(56, 189, 248, 0.18); color: #bae6fd; }
.anim-launch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55);
}

/* ── Overlay ─────────────────────────────────────────────────────────────────────── */
.sim-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sim-overlay[hidden] { display: none; }
.sim-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.74);
  backdrop-filter: blur(2px);
}

.sim-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(960px, 96vw);
  max-height: 92vh;
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sim-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.5rem 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sim-modal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-modal-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.sim-modal-newtab,
.sim-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: #94a3b8;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sim-modal-newtab svg,
.sim-modal-close svg { width: 1.1rem; height: 1.1rem; }
.sim-modal-newtab:hover,
.sim-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }

.sim-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* The sim itself: PhET's native aspect is ~834:504; black letterbox if capped. */
.sim-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 834 / 504;
  max-height: 78vh;
  background: #000;
}
.sim-frame-wrap[hidden] { display: none; }
.sim-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The animation itself: our clips are rendered 16:9 on the site's figure matte. */
.sim-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  background: #0b1020;
}
.sim-video-wrap[hidden] { display: none; }
.sim-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0b1020;
}

.sim-credit {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sim-credit a { color: #cbd5e1; text-decoration: underline; text-underline-offset: 2px; }
.sim-credit a:hover { color: #f1f5f9; }

/* ── Picker (only when a button matched >1 sim) ────────────────────────────────────── */
.sim-picker { padding: 1.25rem; }
.sim-picker[hidden] { display: none; }
.sim-picker-label {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
}
.sim-picker-list { display: grid; gap: 0.5rem; }
.sim-pick {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(251, 191, 36, 0.30);
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
  cursor: pointer;
  transition: background 0.15s;
}
.sim-pick:hover { background: rgba(251, 191, 36, 0.16); }
.sim-pick .sim-pick-note { font-size: 0.72rem; color: #94a3b8; }

/* ── Mobile: the modal goes (near) full-screen — sims are unusable when tiny. ──────── */
@media (max-width: 640px) {
  .sim-overlay { padding: 0; }
  .sim-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    /* Safe area: head (close button) clears the notch, sim bottom clears the
       home indicator. border-box keeps the padding inside the 100dvh. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sim-frame-wrap {
    flex: 1 1 auto;
    aspect-ratio: auto;
    max-height: none;
  }
  .sim-video-wrap {
    flex: 1 1 auto;
    aspect-ratio: auto;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sim-launch, .sim-modal-newtab, .sim-modal-close, .sim-pick { transition: none; }
}