/*
 * Nurse AI Career Lab — Mobile orientation scene visibility
 * Scope: member orientation, Opportunity Board, Application Tracker,
 * Career Assistant, Interview Lab, and Resume Lab.
 * Do not change desktop orientation choreography or narration.
 */
@media (max-width: 800px) {
body .npo-overlay,
body .obo-overlay,
body .ato-overlay,
body .cao-overlay,
body .ito-overlay,
body .rlo-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}
body .npo-shell,
body .obo-shell,
body .ato-shell,
body .cao-shell,
body .ito-shell,
body .rlo-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}
body .npo-top,
body .obo-top,
body .ato-top,
body .cao-top,
body .ito-top,
body .rlo-top {
  min-height: 45px !important;
  padding: max(6px, env(safe-area-inset-top)) 9px 6px !important;
  gap: 7px !important;
}
body .npo-top > span,
body .obo-top > span,
body .ato-top > span,
body .cao-top > span,
body .ito-top > span,
body .rlo-top > span {
  font-size: 11px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
body .npo-top-actions,
body .obo-top-actions,
body .ato-top-actions,
body .cao-top-actions,
body .ito-top-actions,
body .rlo-top-actions {
  flex: none !important;
  gap: 6px !important;
}
body .npo-expand,
body .obo-expand,
body .ato-expand,
body .cao-expand,
body .ito-expand,
body .rlo-expand {
  min-height: 37px !important;
  padding: 6px 7px !important;
  font-size: 11px !important;
}
body .npo-close,
body .obo-close,
body .ato-close,
body .cao-close,
body .ito-close,
body .rlo-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}
body .npo-stage,
body .obo-stage,
body .ato-stage,
body .cao-stage,
body .ito-stage,
body .rlo-stage {
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 10px 10px 17px !important;
  display: flex !important;
  flex-direction: column !important;
}
body .npo-stage > .npo-head,
body .obo-stage > .obo-scene-head,
body .ato-stage > .ato-scene-head,
body .cao-stage > .cao-head,
body .ito-stage > .ito-head,
body .rlo-stage > .rlo-scene-head {
  order: 2 !important;
  flex: none !important;
  padding: 13px 5px 0 !important;
  margin: 0 !important;
  display: block !important;
}
body .npo-stage > .npo-demo,
body .obo-stage > .obo-demo,
body .ato-stage > .ato-demo,
body .cao-stage > .cao-demo,
body .ito-stage > .ito-demo,
body .rlo-stage > .rlo-demo {
  order: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: none !important;
  border-radius: 11px !important;
}
body .npo-demo-bar,
body .obo-demo-bar,
body .ato-demo-bar,
body .cao-demo-bar,
body .ito-demo-bar,
body .rlo-demo-bar {
  padding: 9px 10px !important;
  line-height: 1.25 !important;
  font-size: 11px !important;
}
body .npo-demo-body,
body .obo-demo-body,
body .ato-demo-body,
body .cao-demo-body,
body .ito-demo-body,
body .rlo-demo-body {
  padding: 11px !important;
}
body .npo-footer,
body .obo-footer,
body .ato-footer,
body .cao-footer,
body .ito-footer,
body .rlo-footer {
  flex: none !important;
  min-width: 0 !important;
  padding: 6px 8px max(7px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-auto-rows: auto !important;
  gap: 5px !important;
  overflow: hidden !important;
}
body .npo-controls,
body .obo-controls,
body .ato-controls,
body .cao-controls,
body .ito-controls,
body .rlo-controls {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(36px, auto)) !important;
  gap: 5px !important;
  grid-column: 1 !important;
}
body .npo-controls button,
body .obo-controls button,
body .ato-controls button,
body .cao-controls button,
body .ito-controls button,
body .rlo-controls button {
  box-sizing: border-box !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 5px 3px !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body .npo-controls button:nth-child(1),
body .obo-controls button:nth-child(1),
body .ato-controls button:nth-child(1),
body .cao-controls button:nth-child(1),
body .ito-controls button:nth-child(1),
body .rlo-controls button:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
body .npo-controls button:nth-child(3),
body .obo-controls button:nth-child(3),
body .ato-controls button:nth-child(3),
body .cao-controls button:nth-child(3),
body .ito-controls button:nth-child(3),
body .rlo-controls button:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; }
body .npo-controls button:nth-child(4),
body .obo-controls button:nth-child(4),
body .ato-controls button:nth-child(4),
body .cao-controls button:nth-child(4),
body .ito-controls button:nth-child(4),
body .rlo-controls button:nth-child(4) { grid-column: 3 !important; grid-row: 1 !important; }
body .npo-controls button:nth-child(2),
body .obo-controls button:nth-child(2),
body .ato-controls button:nth-child(2),
body .cao-controls button:nth-child(2),
body .ito-controls button:nth-child(2),
body .rlo-controls button:nth-child(2) { grid-column: 1 / 2 !important; grid-row: 2 !important; }
body .npo-controls button:nth-child(5),
body .obo-controls button:nth-child(5),
body .ato-controls button:nth-child(5),
body .cao-controls button:nth-child(5),
body .ito-controls button:nth-child(5),
body .rlo-controls button:nth-child(5) { grid-column: 2 / 4 !important; grid-row: 2 !important; }
body .npo-audio-status,
body .obo-audio-status,
body .ato-audio-status,
body .cao-audio-status,
body .ito-audio,
body .rlo-audio-status {
  grid-column: 1 !important;
  min-width: 0 !important;
  padding: 0 2px !important;
  font-size: 11px !important;
}
body .npo-audio-status > div,
body .obo-audio-status > div,
body .ato-audio-status > div,
body .cao-audio-status > div,
body .ito-audio > div,
body .rlo-audio-status > div { min-width: 0 !important; }
body .npo-time,
body .obo-time-label,
body .ato-time-label,
body .cao-time-label,
body .ito-time,
body .rlo-time { font-size: 10px !important; }
body .npo-counter,
body .obo-counter,
body .ato-counter,
body .cao-counter,
body .ito-counter,
body .rlo-counter,
body .rlo-screen-label { display: none !important; }
body .npo-progress,
body .obo-progress,
body .ato-progress,
body .cao-progress,
body .ito-progress,
body .rlo-progress {
  height: 3px !important;
  min-height: 3px !important;
  min-width: 0 !important;
  grid-column: 1 !important;
}
body .npo-caption,
body .obo-caption,
body .ato-caption,
body .cao-caption,
body .ito-caption,
body .rlo-caption {
  grid-column: 1 !important;
  min-width: 0 !important;
  max-height: 36px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  overflow-y: auto !important;
}
body .npo-transcript,
body .obo-transcript,
body .ato-transcript,
body .cao-transcript,
body .ito-transcript,
body .rlo-transcript {
  order: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 16px !important;
}
body .npo-head h2,
body .obo-head h2,
body .ato-head h2,
body .cao-head h2,
body .ito-head h2,
body .rlo-head h2,
body .npo-scene-head h2,
body .obo-scene-head h2,
body .ato-scene-head h2,
body .cao-scene-head h2,
body .ito-scene-head h2,
body .rlo-scene-head h2 {
  font-size: 18px !important;
  line-height: 1.28 !important;
  margin: 0 0 6px !important;
}
body .npo-head p,
body .obo-head p,
body .ato-head p,
body .cao-head p,
body .ito-head p,
body .rlo-head p,
body .npo-scene-head p,
body .obo-scene-head p,
body .ato-scene-head p,
body .cao-scene-head p,
body .ito-scene-head p,
body .rlo-scene-head p {
  font-size: 12px !important;
  line-height: 1.48 !important;
}
}
@media (max-width: 480px) {
body .npo-demo,
body .obo-demo,
body .ato-demo,
body .cao-demo,
body .ito-demo,
body .rlo-demo { box-shadow: none !important; }
body .npo-card,
body .obo-card,
body .ato-card,
body .cao-card,
body .ito-card,
body .rlo-card { padding: 10px !important; }
body .npo-grid,
body .obo-grid,
body .ato-grid,
body .cao-grid,
body .ito-grid,
body .rlo-grid { gap: 7px !important; }
}
@media (max-width: 800px) and (max-height: 610px) {
body .npo-caption,
body .obo-caption,
body .ato-caption,
body .cao-caption,
body .ito-caption,
body .rlo-caption { max-height: 26px !important; }
body .npo-top,
body .obo-top,
body .ato-top,
body .cao-top,
body .ito-top,
body .rlo-top { padding-top: 4px !important; padding-bottom: 4px !important; }
}


/* Clinical AI Foundations course orientation has its own scene structure. */
@media (max-width: 800px) {
  body .orientation-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
  }
  body .orientation-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    overflow: hidden !important;
  }
  body .orientation-top {
    min-height: 45px !important;
    padding: max(6px,env(safe-area-inset-top)) 10px 6px !important;
    gap: 8px !important;
  }
  body .orientation-brand {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
  }
  body .orientation-close {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    flex: none !important;
  }
  body .orientation-stage {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 10px 17px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  body .orientation-stage > .orientation-visual {
    display: block !important;
    order: 1 !important;
    flex: none !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .orientation-stage > .orientation-copy {
    display: block !important;
    order: 2 !important;
    flex: none !important;
    padding: 8px 3px 0 !important;
  }
  body .orientation-copy h2 {
    font-size: 19px !important;
    line-height: 1.27 !important;
    margin: 0 0 7px !important;
  }
  body .orientation-copy p {
    font-size: 12px !important;
    line-height: 1.47 !important;
  }
  body .orientation-kicker { font-size: 10px !important; margin-bottom: 5px !important; }
  body .orientation-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }
  body .orientation-footer {
    min-width: 0 !important;
    padding: 6px 8px max(7px,env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    overflow: hidden !important;
  }
  body .orientation-controls {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: repeat(2,minmax(36px,auto)) !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  body .orientation-controls button {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 3px !important;
    font-size: clamp(10px,2.8vw,12px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  body .orientation-controls button:nth-child(1){grid-column:1!important;grid-row:1!important}
  body .orientation-controls button:nth-child(2){grid-column:2!important;grid-row:1!important}
  body .orientation-controls button:nth-child(3){grid-column:3!important;grid-row:1!important}
  body .orientation-controls button:nth-child(4){grid-column:1/-1!important;grid-row:2!important}
  body .orientation-progress{height:3px!important;grid-column:1!important}
  body .orientation-counter{display:none!important}
  body .orientation-caption {
    grid-column:1!important;
    min-height:0!important;
    max-height:36px!important;
    padding:5px 8px!important;
    font-size:11px!important;
    line-height:1.25!important;
    overflow-y:auto!important;
  }
  body .orientation-transcript-panel {
    width:100%!important;
    max-height:none!important;
    padding:15px!important;
    min-height:0!important;
  }
}