/*
 * Manabi Video Navi V248 — final usability and contrast repair
 *
 * This removable last layer addresses the deployed V247 screenshots:
 * - explicit foreground colours for pale chips and day badges;
 * - intrinsic separation between editorial copy and card grids;
 * - visible icon carriers on dark panels;
 * - a genuinely interactive, independently scrollable learner rail;
 * - non-sticky public and dashboard top navigation.
 *
 * It intentionally does not target protected media elements or change routes,
 * forms, permissions, data attributes or application ownership.
 */

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248 {
  --mnv-v248-ink: #f7fbff;
  --mnv-v248-copy: #cfddf0;
  --mnv-v248-muted: #b8cbe1;
  --mnv-v248-cyan: #7eeaff;
  --mnv-v248-violet: #9d82ff;
  --mnv-v248-chip-bg: #edf8ff;
  --mnv-v248-chip-ink: #0b2947;
  --mnv-v248-icon-bg: #0b3b70;
}

/* -------------------------------------------------------------------------
   Public editorial layout: every block contributes to normal document flow.
   ------------------------------------------------------------------------- */

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-section {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(48px, 5vw, 76px) !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-section .koto-learning-range-intro {
  position: relative !important;
  inset: auto !important;
  align-self: stretch !important;
  width: min(1120px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 0 12px !important;
  overflow: visible !important;
  transform: none !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-section .koto-learning-range-intro > p {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-grid {
  position: relative !important;
  inset: auto !important;
  clear: both !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index :is(
  .koto-learning-range-grid,
  .koto-pain-grid,
  .koto-feature-grid,
  .koto-experience-track,
  .koto-scene-grid,
  .mnv-v243-impact-grid
) > :is(article, li) {
  height: auto !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
   Screenshot-specific contrast repairs. Explicit text fill avoids inherited
   WebKit text-fill values from the former light-card design.
   ------------------------------------------------------------------------- */

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-grid > article > ul li {
  border-color: #9fc9e5 !important;
  background: var(--mnv-v248-chip-bg) !important;
  color: var(--mnv-v248-chip-ink) !important;
  -webkit-text-fill-color: var(--mnv-v248-chip-ink) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-experience-track > article > b {
  border-color: #9fc9e5 !important;
  background: var(--mnv-v248-chip-bg) !important;
  color: var(--mnv-v248-chip-ink) !important;
  -webkit-text-fill-color: var(--mnv-v248-chip-ink) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-experience-track > article.is-goal > b {
  border-color: #b79bff !important;
  background: #f1ecff !important;
  color: #3f248e !important;
  -webkit-text-fill-color: #3f248e !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-experience-track > article > span,
body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-flow-board li > span {
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(126, 234, 255, .44) !important;
  border-radius: 14px !important;
  background: var(--mnv-v248-icon-bg) !important;
  color: var(--mnv-v248-cyan) !important;
  -webkit-text-fill-color: var(--mnv-v248-cyan) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-flow-board li > span {
  width: 38px !important;
  height: 38px !important;
  line-height: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-scene-art {
  color: #7047ee !important;
  -webkit-text-fill-color: #7047ee !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-scene-art > b {
  border: 1px solid #d8ccff !important;
  background: #f9f7ff !important;
  color: #6338e4 !important;
  -webkit-text-fill-color: #6338e4 !important;
  box-shadow: 0 12px 30px rgba(52, 31, 133, .18) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .mnv-v243-manifesto-facts li {
  align-content: start !important;
  gap: 32px !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .mnv-v243-impact-grid > li > span {
  color: var(--mnv-v248-copy) !important;
  -webkit-text-fill-color: var(--mnv-v248-copy) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .mnv-v243-impact-grid > li > span > strong {
  color: var(--mnv-v248-ink) !important;
  -webkit-text-fill-color: var(--mnv-v248-ink) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index :is(
  .koto-learning-range-grid,
  .koto-pain-grid,
  .koto-feature-grid,
  .koto-experience-track,
  .koto-scene-grid,
  .mnv-v243-impact-grid
) > :is(article, li) :is(h3, p, small, strong) {
  text-shadow: none !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Navigation ownership and operability.
   ------------------------------------------------------------------------- */

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app:is(.shell-public, .shell-auth) .site-header,
body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app:is(.shell-public, .shell-auth).mobile-nav-open .site-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
}

body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.shell-learner .dash-layout > :is(.desktop-dash-nav, .mobile-mypage-menu) {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  z-index: auto !important;
}

@media (min-width: 1181px) {
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header,
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header-inner {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header .site-nav-area,
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header .site-nav-area.open {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 6px 10px 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(126, 234, 255, .78) rgba(4, 19, 45, .62) !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
  }

  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header .site-nav,
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header .nav-actions {
    flex: 0 0 auto !important;
    pointer-events: auto !important;
  }

  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header :is(
    .site-nav a,
    .site-nav button,
    .nav-actions a,
    .nav-actions button,
    .nav-actions summary
  ) {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

@media (max-width: 1180px) {
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive) .site-header,
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248:is(.shell-learner, .shell-immersive).mobile-nav-open .site-header {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
  }
}

@media (max-width: 680px) {
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-section {
    gap: 36px !important;
  }
}

@media (forced-colors: active) {
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index :is(
    .koto-learning-range-grid > article > ul li,
    .koto-experience-track > article > b,
    .koto-experience-track > article > span,
    .koto-flow-board li > span,
    .koto-scene-art > b
  ) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    forced-color-adjust: auto !important;
  }
}

@media print {
  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-section {
    display: block !important;
  }

  body.app-shell.future-ui.mnv-future-ui.mnv-world-v248.public-app.shell-public.page-index .koto-learning-range-grid {
    margin-top: 24px !important;
  }
}