/* Active quizzes have three real layout regions. Only the middle scrolls:
   neither a long question nor an ad can move or pass beneath the actions. */
.quiz-focus-mode {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.quiz-focus-mode > .app-focus-header {
  flex: none;
}

.quiz-focus-mode > .focus-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-block: 24px;
  scroll-padding-block: 16px;
}

.quiz-action-dock {
  flex: none;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-block-start: 1px solid var(--pp-border);
  background: var(--pp-paper);
  box-shadow: 0 -4px 20px rgb(23 40 33 / 4%);
}

.quiz-action-dock-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 24px;
  max-width: 920px;
  margin-inline: auto;
}

.quiz-action-dock-shell > * {
  grid-column: 1;
  min-width: 0;
  margin: 0;
}

.quiz-action-dock :is(.quiz-answer-row, .quiz-inline-actions) {
  display: grid;
  margin: 0;
}

.quiz-action-dock .quiz-inline-actions {
  grid-template-columns: minmax(0, 1fr);
}

.quiz-action-dock .btn {
  width: 100%;
  min-height: 58px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The same persistent question map is used in practice and active exams. */
.quiz-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  align-items: start;
  gap: 24px;
}

.quiz-workspace > .question-card {
  grid-area: 1 / 1;
  min-width: 0;
}

.quiz-navigation {
  grid-area: 1 / 2;
  display: grid;
  gap: 24px;
  position: sticky;
  inset-block-start: 0;
  min-width: 0;
}

.question-map {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: var(--pp-paper);
}

.question-map-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-block-end: 12px;
}

.question-map-heading h2,
.question-map-heading p {
  margin: 0;
  font-size: var(--pp-text-xs);
  line-height: 1.5;
}

.question-map-heading p {
  color: var(--pp-muted);
}

.question-map .quiz-question-rail {
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
}

.question-map .quiz-nav-pill {
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: auto;
  font-size: .875rem;
}

/* Keep the answer-state border; a small marker identifies the current question. */
.question-map .quiz-nav-pill.current {
  position: relative;
}

.question-map .quiz-nav-pill.current::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  inline-size: 16px;
  block-size: 3px;
  margin-inline: auto;
  border-radius: var(--pp-radius-pill);
  background: currentColor;
  content: "";
}

.question-map-scroll-button {
  display: none;
}

.quiz-navigation .exam-submit-actions {
  margin: 0;
}

.quiz-navigation .exam-submit-actions .btn {
  width: 100%;
}

.quiz-workspace :is(#answer-feedback, #exam-submit-form) {
  scroll-margin-block-start: 16px;
}

@media (min-width: 901px) {
  .quiz-navigation {
    max-block-size: calc(100dvh - var(--quiz-header-height, 82px) - var(--quiz-action-dock-height, 83px) - 48px);
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .question-map {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }

  .question-map-scroll {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
  }

  .question-map .quiz-question-rail {
    /* Leave room for keyboard focus and native scrollbars without shrinking targets. */
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    grid-auto-rows: 44px;
    gap: 6px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scroll-padding-block: 4px;
  }
}

@media (max-width: 900px) {
  .quiz-focus-mode > .focus-main {
    padding-block: 16px;
  }

  .quiz-action-dock {
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .quiz-action-dock-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  .quiz-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .quiz-navigation {
    display: contents;
  }

  .question-map {
    grid-area: 1 / 1;
    position: sticky;
    inset-block-start: 0;
    z-index: 80;
    padding: 10px 8px;
    box-shadow: 0 4px 12px rgb(23 40 33 / 5%);
  }

  .question-map-heading {
    margin: 0 4px 6px;
  }

  .question-map-scroll {
    --quiz-map-rail-inset: 4px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  .question-map .quiz-question-rail {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: var(--quiz-map-rail-inset);
    scroll-padding-inline: 4px;
  }

  .question-map .quiz-nav-pill {
    flex: 0 0 44px;
  }

  .question-map-scroll-button:not([hidden]) {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    /* Match the rail's focus-ring inset, not its scrollbar-inclusive height. */
    margin-block-start: var(--quiz-map-rail-inset);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--pp-canvas);
    color: var(--pp-ink);
    cursor: pointer;
  }

  .question-map-scroll-button:disabled {
    opacity: .35;
    cursor: default;
  }

  .question-map-scroll-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .quiz-workspace > .question-card {
    grid-area: 2 / 1;
  }

  .quiz-navigation .exam-submit-actions {
    grid-area: 3 / 1;
    margin-block: 8px 16px;
  }

  .quiz-workspace :is(#answer-feedback, #exam-submit-form) {
    scroll-margin-block-start: calc(var(--quiz-map-height, 100px) + 16px);
  }
}

/* In landscape/short windows, let the map scroll away to preserve reading room. */
@media (max-width: 900px) and (max-height: 600px) {
  .question-map {
    position: static;
  }

  .quiz-workspace :is(#answer-feedback, #exam-submit-form) {
    scroll-margin-block-start: 16px;
  }
}

/* At extreme zoom/viewport heights, keep every control reachable instead of
   trapping the document between chrome taller than the available screen. */
@media (max-height: 280px) {
  .quiz-focus-mode {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .quiz-focus-mode > .app-focus-header,
  .quiz-navigation,
  .question-map {
    position: static;
  }

  .quiz-focus-mode > .focus-main {
    flex: none;
    overflow: visible;
  }

  .quiz-navigation {
    max-block-size: none;
  }
}