/* OMI Pro V36 — shared responsive contract, mobile chrome and precise question rendering.
   This stylesheet is loaded LAST on every page using the shared shell. */
:root{
  --omi-live-header:56px;
  --omi-live-bottom:68px;
  --omi-viewport-padding:clamp(12px,3vw,22px);
  --omi-touch-size:44px;
  --omi-calm-ease:cubic-bezier(.2,.7,.2,1);
}
html{max-width:100%;scroll-padding-top:calc(var(--omi-live-header) + 12px);scroll-padding-bottom:calc(var(--omi-live-bottom) + 16px);-webkit-text-size-adjust:100%}
body.omi-layout{width:100%;max-width:100%;min-width:0;min-height:100dvh;overflow-x:clip!important;overflow-y:auto!important}
body.omi-layout main,body.omi-layout section,body.omi-layout article,body.omi-layout .card,body.omi-layout .panel,
body.omi-layout .wrap,body.omi-layout .grid,body.omi-layout .question-editor,body.omi-layout .question-bank-layout,
body.omi-layout .student-preview,body.omi-layout .question-card,body.omi-layout .qeditor-section{min-width:0;max-width:100%}
body.omi-layout :where(p,h1,h2,h3,h4,small,strong,label,button,a,.option-content,.question-text,.prompt,.stimulus-block){overflow-wrap:anywhere}
body.omi-layout :where(input,textarea,select){max-width:100%;min-width:0;font-size:max(16px,1em)}
body.omi-layout :where(button,.btn,a[role="button"]){-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--omi-calm-ease),border-color .15s var(--omi-calm-ease),box-shadow .15s var(--omi-calm-ease)}
body.omi-layout :where(img,canvas,video,svg){max-width:100%}
body.omi-layout :where(img,video,canvas){height:auto}
body.omi-layout :where(.table-scroll,.table-responsive,.table-wrap,.responsive-table){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body.omi-layout :where(table){max-width:100%;border-collapse:collapse}
body.omi-layout :where(pre,code,.math,.katex-display,.MathJax_Display){max-width:100%;overflow-x:auto;overflow-wrap:normal}
body.omi-layout [id]{scroll-margin-top:calc(var(--omi-live-header) + 14px);scroll-margin-bottom:calc(var(--omi-live-bottom) + 16px)}

/* Shell uses measured element heights: no guessing about the phone's safe area. */
body.omi-layout>#omi-fixed-header{height:var(--omi-live-header)!important;min-height:var(--omi-live-header)!important;max-width:100vw!important;
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:6px!important;
  padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left))!important;
  z-index:180!important;overflow:hidden!important;isolation:isolate}
body.omi-layout>#omi-fixed-header .omi-brand-link{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;max-width:90px!important;white-space:nowrap!important}
body.omi-layout>#omi-fixed-header .omi-page-name{flex:1 1 0%!important;min-width:0!important;max-width:none!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;line-height:1.25!important;text-align:left!important}
body.omi-layout>#omi-fixed-header .omi-back,body.omi-layout>#omi-fixed-header .omi-sound-toggle,
body.omi-layout>#omi-fixed-header .omi-menu-toggle{flex:0 0 40px!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  display:grid!important;place-items:center!important;margin:0!important;padding:7px!important}
body.omi-layout>.omi-primary-nav{z-index:170!important;max-width:100vw!important;min-width:0!important;min-height:0!important;isolation:isolate}
body.omi-layout>.omi-primary-nav>a{min-width:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.omi-layout .omi-drawer{max-height:min(92dvh,760px)!important;max-width:calc(100vw - 16px)!important;overflow-y:auto!important;overscroll-behavior:contain}
body.omi-layout .omi-context-actions{max-width:100%!important;overflow-x:auto;flex-wrap:wrap;scrollbar-width:thin}
body.omi-layout .omi-context-actions>*{min-width:0}

@media (max-width:899px){
  body.omi-layout:not(.legacy-app){
    padding-top:var(--omi-live-header)!important;
    padding-bottom:calc(var(--omi-live-bottom) + 12px)!important;
  }
  body.omi-layout:not(.legacy-app)>main,body.omi-layout:not(.legacy-app)>section,
  body.omi-layout:not(.legacy-app)>article{max-width:100vw}
  body.omi-layout main.wrap,body.omi-layout main.omi-directory,body.omi-layout main.omi-page-shell{
    width:100%!important;min-width:0!important;max-width:100%!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    padding-top:8px!important;
  }
  body.omi-layout>#omi-fixed-header .omi-brand-link span{display:none!important}
  body.omi-layout>#omi-fixed-header .omi-page-name{font-size:clamp(.78rem,3.65vw,.96rem)!important}
  body.omi-layout>.omi-primary-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;
    transform:none!important;margin:0!important;width:100%!important;
    height:auto!important;min-height:58px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:3px max(5px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
    border-radius:14px 14px 0 0!important;background:#fff!important}
  body.omi-layout>.omi-primary-nav>a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:1px!important;min-height:50px!important;padding:3px 1px!important;font-size:clamp(.62rem,2.7vw,.72rem)!important}
  body.omi-layout>.omi-primary-nav .omi-nav-glyph{width:25px!important;height:25px!important}
  body.omi-layout.omi-flow-nav>.omi-primary-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;margin:0!important}
  body.omi-layout.omi-flow-nav:not(.legacy-app){padding-bottom:calc(var(--omi-live-bottom) + 12px)!important}
  body.omi-layout.omi-keyboard-open>.omi-primary-nav{display:none!important}
  body.omi-layout.omi-keyboard-open:not(.legacy-app){padding-bottom:max(24px,env(safe-area-inset-bottom))!important}
  body.omi-layout.omi-keyboard-open :where(.sticky-save,.fixed-action-bar){position:static!important;inset:auto!important}
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) .sticky-save{max-width:100%;bottom:calc(var(--omi-live-bottom) + 6px)!important}
  body.omi-layout :where(.grid,.form-grid,.settings-grid,.qbank-filter-row){min-width:0;max-width:100%}
  body.omi-layout :where(.image-import-actions,.editor-actions,.actions,.qeditor-head,.section-heading){flex-wrap:wrap;min-width:0}
  body.omi-layout .question-bank-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  body.omi-layout .question-list-panel{min-width:0!important;max-width:100%!important;max-height:min(48dvh,400px)!important;overflow-y:auto!important}
  body.omi-layout .question-editor{display:grid!important;gap:12px!important;width:100%!important}
  body.omi-layout .v23-qbank .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))!important}
  body.omi-layout .option-edit-row{grid-template-columns:auto minmax(0,1fr)!important;min-width:0!important}
  body.omi-layout .option-edit-row .option-edit-main{min-width:0!important}
  body.omi-layout .option-media-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  body.omi-layout .option-edit-row input{min-width:0!important;width:100%!important}
  body.omi-layout .student-preview{overflow:hidden!important}
  body.omi-layout .home-focus{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
  body.omi-layout .home-focus-card{min-width:0!important;max-width:100%!important}
  body.omi-layout .compact-links{grid-template-columns:repeat(auto-fit,minmax(min(100%,105px),1fr))!important}
  body.omi-layout .image-import-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.omi-layout .image-import-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important}
  body.omi-layout .image-import-key{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.omi-layout .image-import-key input,body.omi-layout .image-import-key select{min-width:0}
}
@media(max-width:480px){
  body.omi-layout .image-import-form{grid-template-columns:minmax(0,1fr)!important}
  body.omi-layout .image-import-file{grid-column:1!important}
  body.omi-layout .image-import-key>button{min-height:44px!important}
  body.omi-layout .qbank-filter-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  body.omi-layout .qeditor-head h2{font-size:1.08rem!important}
  body.omi-layout .home-intro h1{font-size:clamp(1.34rem,5.6vw,1.8rem)!important}
  body.omi-layout .home-focus-card{grid-template-columns:40px minmax(0,1fr)!important}
  body.omi-layout .image-import-key{gap:6px!important}
  body.omi-layout .image-import-key>label{min-width:0}
}

/* Precise WYSIWYG question preview and student rendering: same wrapping and aspect ratio. */
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card,.qbank-image,.question-visual,.stimulus-block,.prompt,.question-text){
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
body.omi-layout .student-preview{padding:clamp(12px,3vw,24px);background:#fff;border:1px solid #dce7e1;border-radius:16px;max-width:100%}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) :where(img,svg,video){display:block;max-width:100%;height:auto;object-fit:contain;margin-inline:auto}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) figure{max-width:100%;margin:10px auto}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) :where(table,.stim-table){width:100%;font-size:clamp(.8rem,2.65vw,1rem)}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) :where(td,th){padding:8px;vertical-align:middle;overflow-wrap:anywhere;border:1px solid #dae6e0}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) .table-scroll{overflow-x:auto;max-width:100%}
body.omi-layout :where(.student-preview,.question-card,.cbt-question-card) :where(.qbank-image,.question-visual) img{max-height:min(65dvh,820px);width:auto;object-fit:contain}
body.omi-layout .student-preview .preview-option{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;min-height:46px;
  padding:10px 12px;margin:8px 0;border:1px solid #dce6e0;border-radius:12px;background:#f9fbfa}
body.omi-layout .student-preview .preview-option>span{display:grid;place-items:center;min-width:32px;min-height:32px;font-weight:900;color:#075f4d;background:#eaf5f0;border-radius:9px}
body.omi-layout .student-preview .preview-option-body{min-width:0}
body.omi-layout .student-preview .preview-option-body img{max-width:100%;max-height:260px;margin:7px 0}
body.omi-layout .student-preview #previewPrompt{font-size:1.03rem;line-height:1.6;font-weight:650;margin-block:12px}
body.omi-layout .student-preview #previewStimulus{line-height:1.6}
body.omi-layout .student-preview :where(#previewPrompt,#previewStimulus)>:first-child{margin-top:0}
body.omi-layout .student-preview :where(#previewPrompt,#previewStimulus)>:last-child{margin-bottom:0}
body.omi-layout .question-image.image-page-question img{max-height:none;width:100%;height:auto;object-fit:contain}
body.omi-layout :where(.question-text,.stimulus-block,.preview-option-body) :where(sub,sup){line-height:0}
body.omi-layout :where(.question-text,.stimulus-block,#previewPrompt) :where(.math,math){max-width:100%;overflow-x:auto}
body.omi-layout .omi-inline-message{overflow-wrap:anywhere}

/* Keep modal content independently scrollable, and improve focus/scroll-to-editor behavior. */
body.omi-layout dialog{max-width:min(96vw,760px);max-height:calc(100dvh - 20px);overscroll-behavior:contain}
body.omi-layout dialog[open] :where(.dialog-body,.modal-body,.omi-dialog-content){max-height:calc(100dvh - 120px);overflow-y:auto}
body.omi-layout :where(.sticky-save,.editor-actions){scroll-margin-bottom:calc(var(--omi-live-bottom) + 12px)}
@media(prefers-reduced-motion:reduce){body.omi-layout *,body.omi-layout *::before,body.omi-layout *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{body.omi-layout>#omi-fixed-header,body.omi-layout>.omi-primary-nav,body.omi-layout .omi-context-actions{display:none!important}body.omi-layout{padding:0!important;overflow:visible!important}}

/* Explicit hidden contract for legacy card/section displays. */
body.omi-layout [hidden]{display:none!important}
body.omi-layout #structuredKeyEditor textarea{width:100%;min-height:120px;resize:vertical}
body.omi-layout #tier2Editor select,body.omi-layout #toleranceWrap input{width:100%;max-width:360px;min-height:44px}