/*
 * Manabi Video Navi V276
 * Phone-safe visibility contract for the "dekiru route" learning screen.
 * Presentation only: player events, forms, diagnosis state and navigation URLs
 * remain owned by their existing JavaScript and PHP implementations.
 */

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .dekiru-focus-card > .dekiru-reason {
  border-color: #1876d2 !important;
  background: #eef6ff !important;
  color: #17324f !important;
  -webkit-text-fill-color: #17324f !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .dekiru-focus-card > .dekiru-reason :is(strong, b, span) {
  color: #102d4a !important;
  -webkit-text-fill-color: #102d4a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls :is(.player-tool, .player-speed-control) {
  border-color: rgba(116, 200, 255, .48) !important;
  background: #0b2b58 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls
  :is(.player-tool, .player-speed-control) :is(span, label, select, svg) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: currentColor !important;
  text-shadow: none !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-speed-control select {
  border-color: rgba(255, 255, 255, .38) !important;
  background: #071f45 !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-speed-control select option {
  background: #071f45 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Disabled playback actions remain visibly unavailable without disappearing. */
body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-tool:disabled,
body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-speed-control select:disabled {
  cursor: wait !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-tool:disabled,
body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
  #main-content .unified-player-controls .player-tool:disabled :is(span, svg) {
  color: #b8cce2 !important;
  -webkit-text-fill-color: #b8cce2 !important;
  stroke: currentColor !important;
}

@media (max-width: 780px) {
  /* The route map belongs to document flow and never follows over the player. */
  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-rail {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 18px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-rail > ol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-rail li {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 62px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(105, 184, 245, .18) !important;
    border-radius: 14px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-rail li::after {
    display: none !important;
    content: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-step-copy {
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-step-copy :is(strong, small) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  /* Support launchers stay available after the lesson instead of covering it. */
  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route .future-utility-dock {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    display: flex !important;
    width: min(calc(100% - 24px), 1040px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 16px auto calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    .future-utility-dock > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    pointer-events: auto !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route #main-content {
    padding-bottom: 24px !important;
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 390px) {
  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content .mf-journey-step-copy small {
    display: none !important;
  }
}

@media (forced-colors: active) {
  body.app-shell.future-ui.mnv-future-ui.page-dekiru_route
    #main-content :is(.dekiru-reason, .player-tool, .player-speed-control, .mf-journey-rail li) {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    forced-color-adjust: auto !important;
  }
}