/*
 * HYUNWOO V31.93
 * Platform full-width, sticky headers, multi-OX geometry recovery,
 * and explanation typography rollback.
 *
 * This file replaces V31.89 as the single final ownership layer. It keeps the approved full-width/sticky geometry and fixes the evaluation modal, OX support coordinates, feedback motion, and composite criterion density.
 */

:root {
  --hy-platform-gutter: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
  --hy-sticky-canvas: rgba(247, 248, 251, .97);
  --hy-sticky-line: rgba(218, 224, 234, .86);
}

/* --------------------------------------------------------------------------
   1. One viewport / one horizontal gutter
   -------------------------------------------------------------------------- */
html {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  background: var(--hy-player-canvas, #f7f8fb) !important;
}

html body {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

/* Document-style routes must scroll through the viewport itself.  Keeping the
   body as a secondary scroll container breaks position: sticky on iOS. */
html body:is(
  .study-home-active,
  .feature-page-active:not(.dedicated-ox-player):not(.storage-library-active),
  .profile-page-active,
  .hall-page-active,
  .review-dashboard-active:not(.dedicated-ox-player)
) {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* OX routes occupy exactly one dynamic viewport. */
html body:is(
  .exam-tab-active,
  .daily-learning-active.ox-player-active,
  .dedicated-ox-player,
  .ox-player-active
) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Beat the legacy 760px shell and the body's duplicate 10/12px inset. */
html body #appRoot#appRoot#appRoot.app,
html body #appRoot#appRoot#appRoot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: var(--hy-platform-gutter) !important;
  box-sizing: border-box !important;
}

html body:is(
  .study-home-active,
  .feature-page-active:not(.dedicated-ox-player):not(.storage-library-active),
  .profile-page-active,
  .hall-page-active,
  .review-dashboard-active:not(.dedicated-ox-player)
) #appRoot#appRoot#appRoot.app,
html body:is(
  .study-home-active,
  .feature-page-active:not(.dedicated-ox-player):not(.storage-library-active),
  .profile-page-active,
  .hall-page-active,
  .review-dashboard-active:not(.dedicated-ox-player)
) #appRoot#appRoot#appRoot {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

html body:is(
  .exam-tab-active,
  .daily-learning-active.ox-player-active,
  .dedicated-ox-player,
  .ox-player-active
) #appRoot#appRoot#appRoot.app,
html body:is(
  .exam-tab-active,
  .daily-learning-active.ox-player-active,
  .dedicated-ox-player,
  .ox-player-active
) #appRoot#appRoot#appRoot {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

html body #appRoot#appRoot#appRoot *,
html body #appRoot#appRoot#appRoot *::before,
html body #appRoot#appRoot#appRoot *::after {
  box-sizing: border-box;
}

html body #appRoot#appRoot#appRoot > *,
html body #appRoot#appRoot#appRoot [data-app-panel],
html body #appRoot#appRoot#appRoot [data-feature-panel] {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 600px) and (max-width: 1180px) {
  :root {
    --hy-platform-gutter: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (min-width: 1181px) {
  :root {
    --hy-platform-gutter: clamp(22px, 2.4vw, 38px);
  }

  html body:is(
    .study-home-active,
    .feature-page-active:not(.dedicated-ox-player):not(.storage-library-active),
    .profile-page-active,
    .hall-page-active,
    .review-dashboard-active:not(.dedicated-ox-player)
  ) #appRoot#appRoot#appRoot.app,
  html body:is(
    .study-home-active,
    .feature-page-active:not(.dedicated-ox-player):not(.storage-library-active),
    .profile-page-active,
    .hall-page-active,
    .review-dashboard-active:not(.dedicated-ox-player)
  ) #appRoot#appRoot#appRoot {
    width: min(96vw, 1440px) !important;
  }

  html body:is(
    .exam-tab-active,
    .daily-learning-active.ox-player-active,
    .dedicated-ox-player,
    .ox-player-active
  ) #appRoot#appRoot#appRoot.app,
  html body:is(
    .exam-tab-active,
    .daily-learning-active.ox-player-active,
    .dedicated-ox-player,
    .ox-player-active
  ) #appRoot#appRoot#appRoot {
    width: min(96vw, 1180px) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Route headers stay visible while the document content scrolls
   -------------------------------------------------------------------------- */
html body.study-home-active #appRoot#appRoot#appRoot > .topbar,
html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active) #appRoot#appRoot#appRoot > .study-feature-nav.canonical-player-topbar:not(.hidden),
html body.review-dashboard-active:not(.dedicated-ox-player) #appRoot#appRoot#appRoot > .study-feature-nav.canonical-player-topbar:not(.hidden) {
  position: sticky !important;
  top: 0 !important;
  z-index: 180100 !important;
  isolation: isolate !important;
  margin-top: 0 !important;
  background: var(--hy-sticky-canvas) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  box-shadow: 0 1px 0 var(--hy-sticky-line) !important;
}

/* Keep the approved breathing room below the canonical feature header. */
html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active) #appRoot#appRoot#appRoot > .study-feature-nav.canonical-player-topbar:not(.hidden) {
  margin-bottom: 10px !important;
}

html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active) #appRoot#appRoot#appRoot .review-dashboard-header-spacer:not(.hidden),
html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active) #appRoot#appRoot#appRoot .study-feature-header-spacer:not(.hidden) {
  width: 38px !important;
  min-width: 38px !important;
}

/* OX headers are a complete stage (title + status card), not a detached title. */
html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .exam-player-stage.exam-status-header,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell .daily-player-stage,
html body.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-stage.exam-player-stage.exam-status-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 180100 !important;
  flex: 0 0 auto !important;
  background: var(--hy-sticky-canvas) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

/* Avoid a nested sticky/fixed layer inside the sticky stage. */
html body.exam-tab-active #appRoot#appRoot#appRoot .exam-player-stage.exam-status-header > .canonical-player-topbar,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot .daily-player-stage > .canonical-player-topbar,
html body.dedicated-ox-player #appRoot#appRoot#appRoot .learning-stage.exam-player-stage.exam-status-header > .canonical-player-topbar {
  position: relative !important;
  top: auto !important;
}

/* --------------------------------------------------------------------------
   3. Non-evaluation OX header/status details
   -------------------------------------------------------------------------- */
html body.dedicated-ox-player #appRoot#appRoot#appRoot .learning-stage .learning-status-card.learning-status-text-only,
html body.ox-player-active:not(.exam-tab-active):not(.daily-learning-active) #appRoot#appRoot#appRoot .learning-stage .learning-status-card.learning-status-text-only {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body.dedicated-ox-player #appRoot#appRoot#appRoot .learning-stage .learning-status-card.learning-status-text-only .exam-status-badge,
html body.ox-player-active:not(.exam-tab-active):not(.daily-learning-active) #appRoot#appRoot#appRoot .learning-stage .learning-status-card.learning-status-text-only .exam-status-badge {
  display: none !important;
}

/* Evaluation keeps the approved three-dot control; no gear replacement. */
html body.exam-tab-active #appRoot#appRoot#appRoot .exam-kebab-menu > summary > .settings-gear-svg {
  display: none !important;
}

html body.exam-tab-active #appRoot#appRoot#appRoot .exam-kebab-menu > summary :is(.player-more-dots, .exam-kebab-dots) {
  display: block !important;
  width: 4px !important;
  min-width: 4px !important;
  height: 4px !important;
  min-height: 4px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: -8px 0 0 currentColor, 8px 0 0 currentColor !important;
  pointer-events: none !important;
}

/* The sticky stage uses backdrop-filter. On iOS that makes nested fixed modal
   children resolve against the sticky header instead of the visual viewport.
   Remove only that containing block while the evaluation menu is open. */
html body.exam-menu-open.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox,
html body.exam-menu-open.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .exam-player-stage.exam-status-header,
html body.exam-menu-open.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .exam-player-stage.exam-status-header > .player-topbar,
html body.exam-menu-open.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox .exam-kebab-menu[open] {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.exam-menu-open.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-panel {
  top: 50dvh !important;
  bottom: auto !important;
  max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

/* All non-evaluation players keep the evaluation support coordinates before
   and after answer submission. The answered compact rules must not shrink or
   re-anchor the bookmark/report buttons. */
html body:is(.dedicated-ox-player, .ox-player-active):not(.exam-tab-active):not(.daily-learning-active)
#appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) .exam-question-box.exam-chat-window {
  position: relative !important;
}

html body:is(.dedicated-ox-player, .ox-player-active):not(.exam-tab-active):not(.daily-learning-active)
#appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) .exam-question-head {
  position: static !important;
  padding-right: 70px !important;
}

html body:is(.dedicated-ox-player, .ox-player-active):not(.exam-tab-active):not(.daily-learning-active)
#appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) .exam-question-support {
  position: absolute !important;
  z-index: 4 !important;
  top: -1px !important;
  right: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body:is(.dedicated-ox-player, .ox-player-active):not(.exam-tab-active):not(.daily-learning-active)
#appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) .exam-question-support :is(.support-icon-btn, .tiny-btn) {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   4. Composite OX: remove stale flex growth and absolute overlays
   -------------------------------------------------------------------------- */
html body #appRoot#appRoot#appRoot .multi-learning-card > :is(.exam-question-box, .learning-chat-window) {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* The source label is sometimes rendered directly inside the flex box rather
   than in .exam-question-head.  It must never absorb the remaining height. */
html body #appRoot#appRoot#appRoot .multi-learning-card > :is(.exam-question-box, .learning-chat-window) > .question-label,
html body #appRoot#appRoot#appRoot .multi-learning-card .exam-question-head,
html body #appRoot#appRoot#appRoot .multi-learning-card .exam-question,
html body #appRoot#appRoot#appRoot .multi-learning-card .question,
html body #appRoot#appRoot#appRoot .multi-learning-card .multi-parent-summary,
html body #appRoot#appRoot#appRoot .multi-learning-card .multi-progress,
html body #appRoot#appRoot#appRoot .multi-learning-card .multi-chip-row {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-learning-card > :is(.exam-question-box, .learning-chat-window) > .question-label {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #appRoot#appRoot#appRoot .multi-learning-card > :is(.exam-multi-control-area, .learning-multi-control-area) {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body #appRoot#appRoot#appRoot .multi-learning-card .multi-bottom-actions {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html body #appRoot#appRoot#appRoot .multi-learning-card .multi-bottom-actions > :is(.multi-back-btn, .multi-next-btn, .multi-nav-btn) {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--hy-player-line, #e0e5ee) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--hy-player-ink, #101a35) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-learning-card .multi-bottom-actions > :is(.multi-back-btn, .multi-next-btn, .multi-nav-btn):disabled {
  opacity: .42 !important;
}

/* Evaluation's optional postpone row remains in normal flow too. */
html body.exam-tab-active #appRoot#appRoot#appRoot .multi-learning-card .exam-skip-button-row {
  position: static !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Composite criterion boxes: one small step down from V31.89, without
   changing the two-line content or tap flow. */
html body #appRoot#appRoot#appRoot :is(
  .multi-learning-card .multi-parent-summary,
  .multi-target-box
) {
  min-height: 0 !important;
  margin-top: 7px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
}

html body #appRoot#appRoot#appRoot .multi-target-box .question-label {
  margin-bottom: 3px !important;
}

html body #appRoot#appRoot#appRoot .multi-target-title {
  margin-bottom: 2px !important;
  font-size: clamp(15px, 3.7vw, 17px) !important;
  line-height: 1.28 !important;
}

html body #appRoot#appRoot#appRoot .multi-target-sub {
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

/* Mobile docks are edge-anchored in this layout. Their hidden state must keep
   x=0; otherwise the old centered -50% transform produces a diagonal entrance. */
@media (max-width: 760px) {
  html body:not(.feedback-dock-always).feedback-dock-hidden.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock {
    transform: translate3d(0, calc(100% + 30px), 0) !important;
  }
}

@media (min-width: 761px) {
  html body:not(.feedback-dock-always).feedback-dock-hidden.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock {
    transform: translate3d(-50%, calc(100% + 30px), 0) !important;
  }
}

/* --------------------------------------------------------------------------
   5. Explanation typography: exact V31.87 value
   -------------------------------------------------------------------------- */
html body #appRoot#appRoot#appRoot :is(
  .exam-feedback .exam-explanation,
  .exam-feedback .explanation,
  .feedback .exam-explanation,
  .feedback .explanation,
  .result-explanation,
  .explanation-text
) {
  font-size: clamp(11px, 2.65vw, 15px) !important;
  line-height: 1.75 !important;
}

/* Keep docks aligned to the expanded player canvas on larger screens. */
@media (min-width: 761px) {
  html body:is(.exam-tab-active, .daily-learning-active.ox-player-active, .dedicated-ox-player, .ox-player-active)
  #appRoot#appRoot#appRoot :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock) {
    left: 50% !important;
    right: auto !important;
    width: min(calc(96vw - (2 * var(--hy-platform-gutter))), 1104px) !important;
    max-width: 1104px !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* Route-specific legacy selectors carry extra class specificity. Reassert the
   single platform gutter at the end of the cascade. */
html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active) #appRoot#appRoot#appRoot,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot,
html body.exam-tab-active #appRoot#appRoot#appRoot,
html body.dedicated-ox-player #appRoot#appRoot#appRoot {
  padding-left: var(--hy-platform-gutter) !important;
  padding-right: var(--hy-platform-gutter) !important;
}

/* Fixed answer/feedback docks follow the same rail as the question surface. */
html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > :is(.exam-fixed-answer-dock, .exam-ox-feedback-dock),
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock),
html body.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock),
html body.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock) {
  left: var(--hy-platform-gutter) !important;
  right: var(--hy-platform-gutter) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
}

@media (min-width: 761px) {
  html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > :is(.exam-fixed-answer-dock, .exam-ox-feedback-dock),
  html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock),
  html body.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock),
  html body.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > :is(.exam-fixed-answer-dock, .floating-answer-dock, .exam-ox-feedback-dock) {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - (2 * var(--hy-platform-gutter))), calc(1180px - (2 * var(--hy-platform-gutter)))) !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* Extra class specificity is required because the legacy dock rules also use
   three repeated root IDs plus the panel ID. */
html body.dedicated-ox-player #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot#appRoot#appRoot #topicPanel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
html body.ox-player-active #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
html body.ox-player-active #appRoot#appRoot#appRoot #topicPanel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .daily-answer-area {
  left: var(--hy-platform-gutter) !important;
  right: var(--hy-platform-gutter) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
}

html body.dedicated-ox-player #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
html body.dedicated-ox-player #appRoot#appRoot#appRoot #topicPanel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
html body.ox-player-active #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
html body.ox-player-active #appRoot#appRoot#appRoot #topicPanel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock {
  left: var(--hy-platform-gutter) !important;
  right: var(--hy-platform-gutter) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
}

@media (min-width: 761px) {
  html body.dedicated-ox-player #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
  html body.dedicated-ox-player #appRoot#appRoot#appRoot #topicPanel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
  html body.ox-player-active #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
  html body.ox-player-active #appRoot#appRoot#appRoot #topicPanel.topic-panel > .exam-choice-area.exam-fixed-answer-dock.learning-player-dock.floating-answer-dock,
  html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .daily-answer-area,
  html body.dedicated-ox-player #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
  html body.dedicated-ox-player #appRoot#appRoot#appRoot #topicPanel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
  html body.ox-player-active #appRoot#appRoot#appRoot #reviewPanel.review-panel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
  html body.ox-player-active #appRoot#appRoot#appRoot #topicPanel.topic-panel > .learning-player-dock.exam-ox-feedback-dock,
  html body.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
  html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - var(--hy-platform-gutter) - var(--hy-platform-gutter)), calc(1180px - var(--hy-platform-gutter) - var(--hy-platform-gutter))) !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* Hall/record and profile use the same document viewport as the study home. */
html body:is(.profile-tab-active, .hall-tab-active) {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html body:is(.profile-tab-active, .hall-tab-active) #appRoot#appRoot#appRoot {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

@media (min-width: 1181px) {
  html body:is(.profile-tab-active, .hall-tab-active) #appRoot#appRoot#appRoot {
    width: min(96vw, 1440px) !important;
  }
}

/* The global app banner belongs to every non-player tab, not study only. */
html body:not(.exam-tab-active):not(.daily-learning-active):not(.dedicated-ox-player):not(.ox-player-active)
#appRoot#appRoot#appRoot > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 180100 !important;
  isolation: isolate !important;
  margin-top: 0 !important;
  background: var(--hy-sticky-canvas) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  box-shadow: 0 1px 0 var(--hy-sticky-line) !important;
}

/* --------------------------------------------------------------------------
   6. Final OX state locks
   -------------------------------------------------------------------------- */
/* Composite per-thinker result rows: reduce only the result-box density by one
   small step. This is shared by evaluation, topic, review, and daily OX. */
html body #appRoot#appRoot#appRoot :is(
  .exam-player-card.exam-chat-card,
  .learning-chat-card,
  #dailyQuizShell .quiz-card
) .multi-result-list {
  gap: 4px !important;
  margin: 5px 0 6px !important;
}

html body #appRoot#appRoot#appRoot :is(
  .exam-player-card.exam-chat-card,
  .learning-chat-card,
  #dailyQuizShell .quiz-card
) .multi-result-item {
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

html body #appRoot#appRoot#appRoot :is(
  .exam-player-card.exam-chat-card,
  .learning-chat-card,
  #dailyQuizShell .quiz-card
) .multi-result-top {
  gap: 6px !important;
  margin-bottom: 1px !important;
  font-size: 11.5px !important;
  line-height: 1.18 !important;
}

html body #appRoot#appRoot#appRoot :is(
  .exam-player-card.exam-chat-card,
  .learning-chat-card,
  #dailyQuizShell .quiz-card
) .multi-result-detail {
  font-size: 10.5px !important;
  line-height: 1.22 !important;
}

/* Keep the feedback dock's hidden transform last in the cascade. The mobile
   dock is edge-anchored, so x must remain zero throughout the reveal. */
@media (max-width: 760px) {
  html body:not(.feedback-dock-always).feedback-dock-hidden.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock {
    transform: translate3d(0, calc(100% + 30px), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 761px) {
  html body:not(.feedback-dock-always).feedback-dock-hidden.exam-tab-active #appRoot#appRoot#appRoot #examPracticeBox > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot #dailyQuizShell > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.dedicated-ox-player #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock,
  html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot#appRoot#appRoot :is(#topicPanel.topic-panel, #reviewPanel.review-panel) > .learning-player-dock.exam-ox-feedback-dock {
    transform: translate3d(-50%, calc(100% + 30px), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ========================================================================== 
   V31.92 — composite OX source/question position lock
   --------------------------------------------------------------------------
   One DOM contract is used by evaluation, daily, topic, and review composite
   questions. The source label, support icons, and question text keep the same
   coordinates before and after submission.
   ========================================================================== */

/* Source-level removal is in app.js. This final guard also prevents a stale
   cached fragment from flashing the retired control during a partial update. */
html body #appRoot#appRoot#appRoot :is(#multiCancelBtn, .multi-skip-btn) {
  display: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 16px 19px 21px !important;
  box-sizing: border-box !important;
  transform: none !important;
  overflow: visible !important;
}

/* Answered-state compacting may change card height, but never the internal
   top/left coordinates or the line-wrapping width of the question. */
html body #appRoot#appRoot#appRoot :is(
  #examPracticeBox.exam-has-feedback,
  #topicPanel.learning-has-feedback,
  #reviewPanel.learning-has-feedback,
  #dailyQuizShell .quiz-card.correct-pop,
  #dailyQuizShell .quiz-card.wrong-pop
) .multi-question-surface,
html body #appRoot#appRoot#appRoot .exam-player-card.exam-answered .multi-question-surface {
  padding: 16px 19px 21px !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > .exam-question-head {
  position: static !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 12px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 70px 0 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > .exam-question-head > .question-label {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > .exam-question-head > .exam-question-support {
  position: absolute !important;
  z-index: 4 !important;
  top: -1px !important;
  right: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > .exam-question-head > .exam-question-support :is(.support-icon-btn, .tiny-btn) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > :is(.exam-question, .question) {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot .multi-question-surface > :is(.multi-parent-summary, .multi-progress) {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body #appRoot#appRoot#appRoot .multi-question-surface,
  html body #appRoot#appRoot#appRoot :is(
    #examPracticeBox.exam-has-feedback,
    #topicPanel.learning-has-feedback,
    #reviewPanel.learning-has-feedback,
    #dailyQuizShell .quiz-card.correct-pop,
    #dailyQuizShell .quiz-card.wrong-pop
  ) .multi-question-surface,
  html body #appRoot#appRoot#appRoot .exam-player-card.exam-answered .multi-question-surface {
    padding: 13px 15px 18px !important;
  }

  html body #appRoot#appRoot#appRoot .multi-question-surface > :is(.exam-question, .question) {
    font-size: 18px !important;
    line-height: 1.48 !important;
  }
}

/* Final ownership: outrank the older dedicated/answered selectors. */
html body #appRoot#appRoot#appRoot#appRoot#appRoot .multi-question-surface,
html body #appRoot#appRoot#appRoot#appRoot#appRoot :is(
  #examPracticeBox.exam-has-feedback,
  #topicPanel.topic-panel.learning-has-feedback,
  #reviewPanel.review-panel.learning-has-feedback,
  #dailyQuizShell .quiz-card.correct-pop,
  #dailyQuizShell .quiz-card.wrong-pop
) .multi-question-surface,
html body #appRoot#appRoot#appRoot#appRoot#appRoot .exam-player-card.exam-answered .multi-question-surface {
  padding: 16px 19px 21px !important;
  gap: 14px !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot#appRoot#appRoot .multi-question-surface > .exam-question-head {
  margin: 0 !important;
  padding: 0 70px 0 0 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot#appRoot#appRoot .multi-question-surface > :is(.exam-question, .question) {
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body #appRoot#appRoot#appRoot#appRoot#appRoot .multi-question-surface,
  html body #appRoot#appRoot#appRoot#appRoot#appRoot :is(
    #examPracticeBox.exam-has-feedback,
    #topicPanel.topic-panel.learning-has-feedback,
    #reviewPanel.review-panel.learning-has-feedback,
    #dailyQuizShell .quiz-card.correct-pop,
    #dailyQuizShell .quiz-card.wrong-pop
  ) .multi-question-surface,
  html body #appRoot#appRoot#appRoot#appRoot#appRoot .exam-player-card.exam-answered .multi-question-surface {
    padding: 13px 15px 18px !important;
  }
}


/* --------------------------------------------------------------------------
   9. Daily OX route boundary
   --------------------------------------------------------------------------
   The study feature header shares .player-topbar with the OX header.  It must
   remain hidden when Daily OX opens, even if a previous feature route left its
   DOM mounted. */
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot > #studyFeatureNav.hidden,
html body.daily-learning-active.ox-player-active #appRoot#appRoot#appRoot > .study-feature-nav.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   10. V32.11 — OX dock gesture guard + route-specific scroll tails
   --------------------------------------------------------------------------
   - Keep page zoom available in the learning content.
   - Suppress double-tap zoom only on the fixed OX controls and bottom nav.
   - Topic list reserves only the exact fixed-nav footprint instead of the
     legacy 84px card margin plus the document's own bottom padding.
*/

/* OX / bottom-nav interaction surfaces only.  `manipulation` keeps one-finger
   panning and pinch zoom available while removing the double-tap zoom delay. */
html body #appRoot#appRoot#appRoot :is(
  .bottom-tabbar,
  .bottom-tabbar .bottom-tab-btn,
  .exam-choice-area.exam-fixed-answer-dock,
  .exam-choice-area.exam-fixed-answer-dock .answer-btn,
  .daily-answer-area,
  .daily-answer-area .answer-btn,
  .learning-player-dock.floating-answer-dock,
  .learning-player-dock.floating-answer-dock .answer-btn,
  .learning-player-dock.exam-ox-feedback-dock,
  .learning-player-dock.exam-ox-feedback-dock button
) {
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Topic: the root already contributes 22px of document bottom padding.  The
   remaining margin is just enough to clear the fixed tabbar (64px + 10px on
   mobile, 66px + 18px on larger screens), instead of stacking 84/86px on top. */
html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active)
#appRoot#appRoot#appRoot > [data-feature-panel="topic"].study-feature-card:not(.hidden) {
  margin-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 700px) {
  html body.feature-page-active:not(.dedicated-ox-player):not(.storage-library-active)
  #appRoot#appRoot#appRoot > [data-feature-panel="topic"].study-feature-card:not(.hidden) {
    margin-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
}


/* --------------------------------------------------------------------------
   11. V32.13 — canonical version/topic geometry/storage viewport
   --------------------------------------------------------------------------
   Topic single-question feedback used a compact answered-state padding that
   moved the same sentence and changed its wrapping after submission. Keep the
   pre-answer question geometry while leaving composite-question rules intact. */
html body.dedicated-ox-player
#appRoot#appRoot#appRoot#appRoot#appRoot
#topicPanel.topic-panel.learning-has-feedback
> .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card)
> .exam-question-box.exam-chat-window {
  margin: 0 !important;
  padding: 16px 19px 21px !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body.dedicated-ox-player
  #appRoot#appRoot#appRoot#appRoot#appRoot
  #topicPanel.topic-panel.learning-has-feedback
  > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card)
  > .exam-question-box.exam-chat-window {
    padding: 13px 15px 18px !important;
  }
}