/* tab-indicator.css — sliding indicator for the .questions-mode-tabs segmented
   control (Topic Questions | Multiple Choice). Paired with tab-indicator.js and
   loaded on both the Topic Questions and MCQ pages so the glide is consistent
   across the content-type switcher. Self-contained (was previously embedded in
   grader.css, which only loads on the Topic Questions page). The base
   .questions-mode-tabs skin lives in noteviewer.css; this only adds the
   indicator layer + the tactile press. */
.questions-mode-tabs { position: relative; }
.questions-mode-tab { position: relative; z-index: 1; }
.qmt-indicator {
  position: absolute;
  top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: 9px;
  background: var(--accent-soft, rgba(91, 140, 255, 0.16));
  border: 1px solid var(--accent-border, rgba(169, 190, 255, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(91, 140, 255, 0.16);
  pointer-events: none;
  z-index: 0;
  will-change: left, width; /* hint for the one-shot entrance glide */
}
.questions-mode-tabs.has-indicator .questions-mode-tab.is-active,
.questions-mode-tabs.has-indicator .questions-mode-tab--topic.is-active,
.questions-mode-tabs.has-indicator .questions-mode-tab--mcq.is-active {
  background: transparent; border-color: transparent; box-shadow: none;
}

/* Light theme: glossier top edge (mirrors the dark/light --tq-edge-top the
   indicator used when it lived in grader.css). */
html.theme-light .qmt-indicator {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 10px rgba(91, 140, 255, 0.16);
}

/* Tactile press — pure CSS, replacing the old JS press that ran on pointerdown
   and raced the click->navigate handler. Transform-only, reduced-motion-safe. */
@media (prefers-reduced-motion: no-preference) {
  .questions-mode-tab { transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
  .questions-mode-tab:active { transform: scale(0.97); }
}