/*
 * Manabi Video Navi V250 — transition and semantic-chip legibility
 *
 * Final presentation guard for the reported transition overlay and public
 * introduction cards.  It intentionally owns foreground, background, border,
 * opacity and WebKit text fill together so older light-theme declarations
 * cannot leave pale glyphs on pale controls.
 *
 * This file changes no route, state, form, media, permission or event logic.
 */

body.future-ui.mnv-world-v250 {
  --mnv-v250-ink: #f8fbff;
  --mnv-v250-copy: #dce9f8;
  --mnv-v250-muted: #c6d8ec;
  --mnv-v250-cyan: #7eeaff;
  --mnv-v250-blue: #4b8fff;
  --mnv-v250-violet: #b69aff;
  --mnv-v250-green: #73f0d0;
  --mnv-v250-panel: #08254f;
  --mnv-v250-panel-strong: #0b3264;
  --mnv-v250-line: rgba(126, 234, 255, .58);
}

/* -------------------------------------------------------------------------
   Page-transition overlay
   ------------------------------------------------------------------------- */

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-card {
  gap: 14px !important;
  padding: clamp(24px, 3.2vw, 35px) !important;
  border-color: rgba(126, 234, 255, .58) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(89, 216, 255, .15), transparent 17rem),
    linear-gradient(145deg, rgba(5, 22, 49, .99), rgba(8, 42, 80, .98)) !important;
  color: var(--mnv-v250-ink) !important;
  -webkit-text-fill-color: var(--mnv-v250-ink) !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-kicker {
  color: var(--mnv-v250-cyan) !important;
  -webkit-text-fill-color: var(--mnv-v250-cyan) !important;
  text-shadow: 0 0 16px rgba(126, 234, 255, .26) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-copy h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .38) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-copy p {
  color: var(--mnv-v250-copy) !important;
  -webkit-text-fill-color: var(--mnv-v250-copy) !important;
  font-weight: 750 !important;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .30) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-journey > div {
  color: var(--mnv-v250-copy) !important;
  -webkit-text-fill-color: var(--mnv-v250-copy) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-journey > div > b {
  border: 1px solid var(--mnv-v250-line) !important;
  background: #0b3971 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .12) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-journey > div.is-active > b {
  border-color: #a3f3ff !important;
  background: linear-gradient(145deg, #147dcc, #5549e8) !important;
  box-shadow: 0 0 0 3px rgba(126, 234, 255, .12), 0 0 22px rgba(75, 143, 255, .35) !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-journey > div > span {
  color: #f5f9ff !important;
  -webkit-text-fill-color: #f5f9ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .36) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-journey > i {
  border: 0 !important;
  background: #456d99 !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-live,
body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-health,
body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-phrase {
  border: 1px solid rgba(126, 234, 255, .31) !important;
  background: #0b2c58 !important;
  color: var(--mnv-v250-ink) !important;
  -webkit-text-fill-color: var(--mnv-v250-ink) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-live :is(b, small),
body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-health b,
body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-phrase {
  color: var(--mnv-v250-ink) !important;
  -webkit-text-fill-color: var(--mnv-v250-ink) !important;
  font-weight: 850 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-live > span > i,
body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-health > span {
  background: var(--mnv-v250-green) !important;
  box-shadow: 0 0 0 4px rgba(115, 240, 208, .12), 0 0 14px rgba(115, 240, 208, .42) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards {
  gap: 11px !important;
  margin: 4px 0 8px !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span {
  min-height: 88px !important;
  gap: 7px !important;
  padding: 13px 10px !important;
  border: 1px solid rgba(126, 234, 255, .42) !important;
  background: #0a2b56 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .07) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span > b {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(126, 234, 255, .72) !important;
  border-radius: 12px !important;
  background: #10437f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: 0 0 18px rgba(89, 216, 255, .20) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span:nth-child(2) > b {
  border-color: rgba(182, 154, 255, .86) !important;
  background: #43327f !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span:nth-child(3) > b {
  border-color: rgba(115, 240, 208, .82) !important;
  background: #0d5a58 !important;
}

body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span > small {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .32) !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Public-home card copy, category chips and day badges
   ------------------------------------------------------------------------- */

body.future-ui.mnv-world-v250.public-app.page-index :is(
  .koto-learning-range-grid > article,
  .koto-pain-grid > article,
  .koto-feature-grid > article,
  .koto-experience-track > article,
  .koto-scene-grid > article,
  .koto-role-grid > article,
  .homepage-trust-grid > article,
  .mnv-v243-impact-grid > li
) {
  border-color: rgba(89, 216, 255, .34) !important;
  background: #08254f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.future-ui.mnv-world-v250.public-app.page-index :is(
  .koto-learning-range-grid > article,
  .koto-pain-grid > article,
  .koto-feature-grid > article,
  .koto-experience-track > article,
  .koto-scene-grid > article,
  .koto-role-grid > article,
  .homepage-trust-grid > article,
  .mnv-v243-impact-grid > li
) :is(h3, h4, strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250.public-app.page-index :is(
  .koto-learning-range-grid > article,
  .koto-pain-grid > article,
  .koto-feature-grid > article,
  .koto-experience-track > article,
  .koto-scene-grid > article,
  .koto-role-grid > article,
  .homepage-trust-grid > article,
  .mnv-v243-impact-grid > li
) :is(p, small) {
  color: var(--mnv-v250-copy) !important;
  -webkit-text-fill-color: var(--mnv-v250-copy) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250.public-app.page-index .koto-learning-range-grid > article > ul > li {
  border: 1px solid #66dfff !important;
  background: #0b3a72 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250.public-app.page-index .koto-experience-track > article > b {
  border: 1px solid #66dfff !important;
  background: #0b3a72 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 950 !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 3px rgba(102, 223, 255, .07) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250.public-app.page-index .koto-experience-track > article.is-goal > b {
  border-color: #c2aeff !important;
  background: #49338c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(182, 154, 255, .09) !important;
}

body.future-ui.mnv-world-v250.public-app.page-index :is(
  .koto-learning-range-grid > article > span,
  .koto-pain-grid > article > span,
  .koto-feature-grid > article > span,
  .koto-experience-track > article > span
) {
  border: 1px solid rgba(126, 234, 255, .62) !important;
  background: #0b3a72 !important;
  color: var(--mnv-v250-cyan) !important;
  -webkit-text-fill-color: var(--mnv-v250-cyan) !important;
  opacity: 1 !important;
}

body.future-ui.mnv-world-v250.public-app.page-index :is(
  .koto-learning-range-grid > article > span,
  .koto-pain-grid > article > span,
  .koto-feature-grid > article > span,
  .koto-experience-track > article > span
) svg {
  color: var(--mnv-v250-cyan) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

@media (max-height: 820px) and (min-width: 681px) {
  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-card {
    gap: 10px !important;
    padding-block: 20px !important;
  }

  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-mark {
    width: 78px !important;
    height: 78px !important;
  }

  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span {
    min-height: 72px !important;
    padding-block: 9px !important;
  }
}

@media (max-width: 680px) {
  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-card {
    gap: 11px !important;
    padding: 20px 15px 24px !important;
  }

  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span {
    min-height: 72px !important;
    padding: 10px 5px !important;
  }

  body.future-ui.mnv-world-v250 .page-transition-overlay .page-loader-cards > span > small {
    font-size: 10.5px !important;
  }
}

/* V259 — index-only white-surface label contrast.
   Keep every surface, border, layout and interaction unchanged; only make the
   text painted inside the reported white labels explicitly black. */
body.future-ui.public-app.page-index .koto-learning-range-grid > article > ul > li,
body.future-ui.public-app.page-index .koto-experience-track > article > b,
body.future-ui.public-app.page-index .koto-experience-track > article.is-goal > b {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.public-app.page-index .org-path-grid > .org-path-card,
body.future-ui.public-app.page-index .org-path-grid > .org-path-card > :is(span, h3, p, b) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* V259 — the learning journey belongs to the document on the study screen.
   It remains fully visible at its original position but no longer follows the
   learner over the video controls while the page is scrolled. */
body.future-ui.mnv-future-ui.page-study_session .mf-journey-rail {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  z-index: 20 !important;
}

/* V259 — video cockpit contrast. These selectors stop at the player-owned
   controls; playback state, events, iframe and full-screen owners are intact. */
body.future-ui.mnv-future-ui:is(.page-watch, .page-study_session)
  .unified-player-controls :is(.player-tool, .player-speed-control) {
  border-color: rgba(116, 200, 255, .42) !important;
  background: #0b2b58 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui:is(.page-watch, .page-study_session)
  .unified-player-controls :is(.player-tool, .player-speed-control) :is(span, label, select, svg) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui:is(.page-watch, .page-study_session)
  .unified-player-controls .player-speed-control select {
  border-color: rgba(255, 255, 255, .36) !important;
  background: #071f45 !important;
}

body.future-ui.mnv-future-ui:is(.page-watch, .page-study_session)
  .unified-player-controls .player-speed-control select option {
  background: #071f45 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.future-ui.mnv-future-ui:is(.page-watch, .page-study_session)
  .unified-player-controls .player-tool svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* V259 — practice preparation: remove only the obsolete light orbit that was
   painted across the current dark card and keep every progress element above
   the card surface. */
body.future-ui.mnv-future-ui.page-practice_lab
  .practice-prepare-shell .practice-processing-card::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

body.future-ui.mnv-future-ui.page-practice_lab
  .practice-prepare-shell .practice-processing-card > * {
  position: relative;
  z-index: 1;
}

body.future-ui.mnv-future-ui.page-practice_lab
  .practice-prepare-shell .practice-processing-card :is(h1, h2, h3, strong, .eyebrow) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui.page-practice_lab
  .practice-prepare-shell .practice-processing-card :is(p, small) {
  color: #dbe9f8 !important;
  -webkit-text-fill-color: #dbe9f8 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* V259 — the pen controls stay in their workspace flow instead of floating
   over the question, ruled paper or submit action. */
body.future-ui.mnv-future-ui.page-practice_lab
  .future-question-renderer .handwriting-toolbar {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  z-index: auto !important;
}

/* V259 — isolated foreground repairs for the reported pale practice labels. */
body.future-ui.mnv-future-ui.page-practice_lab
  .practice-question-head .practice-step-badge {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui.page-practice_lab
  .handwriting-problem-print > span:first-child {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui.page-practice_lab .practice-choice-assurance {
  color: #10243e !important;
  -webkit-text-fill-color: #10243e !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.future-ui.mnv-future-ui.page-practice_lab
  .practice-result-card .notice.warning,
body.future-ui.mnv-future-ui.page-practice_lab
  .practice-result-card .notice.warning :is(strong, span, small, b) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* V259 — wide-screen sidebar: zero-basis flex sizing is required here so the
   navigation actually overflows its own pane and accepts wheel/touch scroll,
   rather than expanding below a clipped fixed header. */
@media (min-width: 1181px) {
  body.future-ui.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header,
  body.future-ui.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header-inner {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.future-ui.mnv-future-ui:is(.shell-learner, .shell-immersive)
    .site-header .site-nav-area,
  body.future-ui.mnv-future-ui:is(.shell-learner, .shell-immersive)
    .site-header .site-nav-area.open {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    flex: 1 1 0 !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (forced-colors: active) {
  body.future-ui.mnv-world-v250 .page-transition-overlay :is(
    .page-loader-card,
    .page-loader-journey > div > b,
    .page-loader-live,
    .page-loader-health,
    .page-loader-phrase,
    .page-loader-cards > span,
    .page-loader-cards > span > b
  ),
  body.future-ui.mnv-world-v250.public-app.page-index :is(
    .koto-learning-range-grid > article,
    .koto-experience-track > article,
    .koto-learning-range-grid > article > ul > li,
    .koto-experience-track > article > b
  ) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
}

@media print {
  body.future-ui.mnv-world-v250 .page-transition-overlay {
    display: none !important;
  }
}