/* Cross-browser responsive layer. Keep this file last in the stylesheet order. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:280px}
button,input,textarea,select{font:inherit}
img,video,canvas,svg{max-width:100%}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Safari needs the prefixed form; the unprefixed declaration remains for others. */
.j-body,.j-modal-mask,.j-modal,.j-overview-panel,.j-cover-card,
.j-interaction-guide,.j-scene-location,.j-assessment-modal,.j-back-float,
.j-intro-skip,.j-cinematic-skip{
  -webkit-backdrop-filter:blur(16px);
}

/* Dynamic viewport units prevent mobile browser chrome from covering controls. */
@supports(height:100dvh){
  html,body,.j-shell,.j-boot{height:100dvh;min-height:100dvh}
  .j-platform-stage,.j-overview,.j-intro,.j-app-stage,.j-cover,.j-preintro,.j-cinematic{height:100dvh}
  .j-workspace{height:calc(100dvh - 86px)}
  .j-modal-scene-mode .j-workspace{height:calc(100dvh - 48px)}
  .j-overview-panel{max-height:calc(100dvh - 36px)}
  .j-assessment-modal{max-height:calc(100dvh - 90px)}
}

/* Tablet and narrow desktop. */
@media(max-width:900px){
  .j-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .j-workspace{width:calc(100% - 20px)}
  .j-body{padding:12px}
  .j-breadcrumb{min-width:0}
  .j-breadcrumb small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Phones: every primary view becomes a scrollable single-column layout. */
@media(max-width:600px){
  .j-cover{padding:16px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background-position:center}
  .j-hero{width:100%}
  .j-hero h1{margin:12px 0 6px;font-size:clamp(24px,8vw,34px);line-height:1.2}
  .j-cover-chips{gap:6px;margin:16px 0}
  .j-cover-chips span{padding:4px 9px;font-size:10px}
  .j-version{right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}

  .j-overview{align-items:flex-start;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .j-overview-panel{width:100%;max-height:none;padding:16px 12px;border-radius:14px}
  .j-overview-panel>header h2{font-size:20px}
  .j-overview-intro{grid-template-columns:1fr;gap:8px;padding:12px}
  .j-overview-label{padding-bottom:8px;border-right:0;border-bottom:1px solid var(--j-line)}
  .j-overview-grid{grid-template-columns:1fr}
  .j-overview-steps{grid-template-columns:repeat(2,minmax(0,1fr))}

  .j-hud{height:44px;gap:8px;padding:env(safe-area-inset-top) 10px 0}
  .j-hud-back{padding:8px 4px}
  .j-breadcrumb{font-size:11px}
  .j-breadcrumb i,.j-breadcrumb em,.j-breadcrumb small{display:none}
  .j-interaction-guide{top:50px;max-width:calc(100vw - 20px);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .j-workspace{width:calc(100% - 12px);height:calc(100vh - 76px)}
  .j-body{padding:8px;border-radius:12px;overflow:auto;-webkit-overflow-scrolling:touch}
  .j-scene-shell{grid-template-rows:minmax(180px,1fr) auto auto}
  .j-media-placeholder{min-height:180px}
  .j-scene-location{left:8px;top:8px;padding:7px 9px}
  .j-scene-location b{font-size:13px}
  .j-character{right:0;height:70%}
  .j-character>img{max-width:48vw}
  .j-story-strip{min-width:0}
  .j-hud-bottom{bottom:max(7px,env(safe-area-inset-bottom))}
  .j-back-float{left:10px;bottom:max(38px,calc(env(safe-area-inset-bottom) + 32px));padding:8px 12px}
  .j-toast-stack{left:10px;right:10px;top:54px}
  .j-toast{width:100%}
  .j-modal-mask{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .j-modal{width:100%;max-height:calc(100vh - 20px);padding:16px;border-radius:14px}
  .j-chat{height:min(270px,45vh)}
  .j-chat-input textarea{min-width:0}
  .j-assessment-modal,.j-assessment-modal:has(.j-question-head,.j-image-question,.j-sequence:not(.j-direct-operation)),.j-assessment-modal:has(.j-sequence-fill-mode),.j-assessment-modal:has(.j-rule-assessment),.j-assessment-modal:has(.j-ai-assessment){width:calc(100vw - 16px);max-height:calc(100vh - 20px)}
  .j-assessment-modal-body{overflow:auto!important;-webkit-overflow-scrolling:touch}
  .j-rule-eval,.j-ai-eval{grid-template-columns:1fr}
  .j-rule-eval>header,.j-rule-conclusion,.j-rule-eval>.j-actions,.j-ai-eval>header,.j-ai-conclusion,.j-ai-wait,.j-ai-eval>.j-actions{grid-column:1}
  .j-pack-mode .j-pack-workspace{grid-template-columns:1fr;height:auto;max-height:70vh;overflow:auto}
  .j-pack-mode .j-supply-shelf>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .j-pack-mode .j-emergency-bag{height:auto;min-height:180px}
  .j-report{width:calc(100% - 16px);margin:8px auto}
  .j-card{padding:14px}
  .j-event-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@supports(height:100dvh){
  @media(max-width:600px){
    .j-workspace{height:calc(100dvh - 76px)}
    .j-modal,.j-assessment-modal,.j-assessment-modal:has(.j-question-head,.j-image-question,.j-sequence:not(.j-direct-operation)),.j-assessment-modal:has(.j-sequence-fill-mode),.j-assessment-modal:has(.j-rule-assessment),.j-assessment-modal:has(.j-ai-assessment){max-height:calc(100dvh - 20px)}
  }
}

/* Short laptop windows and landscape phones. */
@media(max-height:560px){
  .j-cover{overflow:auto}
  .j-hero h1{margin:6px 0;font-size:24px}
  .j-cover-chips{margin:8px 0}
  .j-interaction-guide{display:none}
  .j-workspace{height:calc(100vh - 58px)}
  .j-body{padding:7px;overflow:auto}
  .j-scene-shell{grid-template-rows:minmax(150px,1fr) auto auto;gap:6px}
  .j-modal,.j-assessment-modal{max-height:calc(100vh - 12px)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}