/* ============================================================================
   OMI Pro V20 — Responsive Runtime Layout
   ---------------------------------------------------------------------------
   Final compatibility layer for V17–V19 pages. The goals are deliberately
   structural: one native page scroller, reliable mouse-wheel/trackpad/touch
   scrolling, persistent exam actions on every viewport, and predictable
   responsive containers. No assessment/scoring/authentication logic lives here.
   ============================================================================ */
:root{
  --omi20-page-x:clamp(14px,2.2vw,24px);
  --omi20-content:1180px;
  --omi20-wide:1440px;
  --omi20-action-h:76px;
  --omi20-shadow:0 10px 28px rgba(24,45,59,.08);
  --omi20-shadow-float:0 16px 42px rgba(20,43,57,.15);
  --omi20-line:#dce5eb;
  --omi20-ink:#17283d;
  --omi20-muted:#6c7d90;
  --omi20-panel:#fff;
  --omi20-bg:#f6f8fa;
  --omi20-blue:#168fc8;
  --omi20-blue-strong:#0a76b0;
  --omi20-green:#075f4d;
  --omi20-success:#0a9c70;
  --omi20-danger:#b83e4f;
  --omi20-gold:#d29b18;
}

/* 1. SCROLL CONTRACT --------------------------------------------------------
   Root/document scrolling is native everywhere. Overflow locks are reserved
   only for an actually-open modal/drawer. This fixes desktop mouse-wheel and
   trackpad scrolling that was previously trapped inside nested fixed viewports.
*/
html{
  width:100%;
  min-height:100%;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  scrollbar-gutter:auto!important;
  scroll-behavior:auto;
}
body,
body.omi-layout,
body.legacy-app,
body.omi-page{
  width:100%;
  min-height:100vh!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom!important;
}
body.omi-drawer-open,
body.omi-palette-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body:not(.omi-drawer-open):not(.omi-palette-open){
  overflow-y:auto!important;
}
main,.wrap,.shell,.screen,.home-main,.home-main-v5,.archive-main,.guidance-main{
  min-width:0;
}
body.omi-layout main,
body.omi-layout .wrap,
body.omi-layout .shell{
  width:min(100%,var(--omi20-content));
  margin-inline:auto;
}
body.omi-layout img,body.omi-layout video,body.omi-layout canvas,body.omi-layout svg{
  max-width:100%;
}
.table-scroll,.table-wrap{
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* Setup/login/student pages should never be viewport-locked. */
body.omi-setup-active{
  min-height:100dvh!important;
  height:auto!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
}
body.omi-setup-active .setup{
  min-height:calc(100dvh - var(--omi-header,60px));
  height:auto!important;
  overflow:visible!important;
}
body.omi-setup-active .hero,
body.omi-setup-active .pick-card{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* 2. GLOBAL RESPONSIVE POLISH ---------------------------------------------- */
body.omi-layout{
  background:var(--omi20-bg);
  color:var(--omi20-ink);
}
body.omi-layout .card,
body.omi-layout .omi-card,
body.omi-layout .portal-section,
body.omi-layout .progress-item,
body.omi-layout .progress-stat,
body.omi-layout .student-concepts,
body.omi-layout .learning-secondary{
  border-color:var(--omi20-line)!important;
  box-shadow:var(--omi20-shadow)!important;
}
body.omi-layout input,
body.omi-layout select,
body.omi-layout textarea,
body.omi-layout button{
  max-width:100%;
}
body.omi-layout input,
body.omi-layout select,
body.omi-layout textarea{
  min-height:44px;
}
body.omi-layout textarea{height:auto;min-height:104px;resize:vertical}
body.omi-layout button,
body.omi-layout .btn,
body.omi-layout a.btn{
  min-height:44px;
}
body.omi-layout .btn{white-space:normal;line-height:1.25}

/* Stable header/nav across wide desktop, laptop, tablet and phone. */
#omi-fixed-header{
  padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))!important;
}
.omi-primary-nav a{min-width:0}

/* Tables remain usable on desktop while still degradable to horizontal scroll. */
body.omi-admin table,body.omi-monitor table{width:100%;border-collapse:separate;border-spacing:0}
body.omi-admin .table-wrap,body.omi-monitor .table-wrap{
  border:1px solid var(--omi20-line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--omi20-shadow);
}
body.omi-admin .actions,body.omi-monitor .actions,
body.omi-admin .filters,body.omi-monitor .filters{
  min-width:0;
  flex-wrap:wrap;
}

/* 3. OFFICIAL EXAM — ONE NATIVE PAGE SCROLLER -----------------------------
   The previous fixed 100dvh shell created nested scrolling. V20 deliberately
   uses the document as the vertical scroller on ALL devices. The action bar is
   fixed and the status/palette use sticky positioning where appropriate.
*/
body.omi-layout.omi-exam-active,
body.omi-layout.omi-secure-exam,
body.omi-exam-active,
body.omi-secure-exam{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-x pan-y pinch-zoom!important;
  padding-bottom:0!important;
}
body.omi-layout.omi-exam-active #omi-fixed-header,
body.omi-layout.omi-secure-exam #omi-fixed-header,
body.omi-layout.omi-exam-active .omi-primary-nav,
body.omi-layout.omi-secure-exam .omi-primary-nav{display:none!important}

#examScreen.exam-fixed.active{
  display:block!important;
  width:min(100%,var(--omi20-wide))!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:10px var(--omi20-page-x) calc(var(--omi20-action-h) + 28px + env(safe-area-inset-bottom))!important;
  overflow:visible!important;
  background:var(--omi20-bg)!important;
}
#examScreen .exam-status{
  position:sticky!important;
  top:8px!important;
  z-index:900!important;
  width:100%;
  margin:0 0 12px!important;
  border-radius:18px!important;
  box-shadow:0 8px 24px rgba(14,64,72,.16)!important;
}
#examScreen .exam-body{
  display:grid!important;
  grid-template-columns:minmax(220px,272px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:14px!important;
  min-height:0!important;
  overflow:visible!important;
}
#examScreen .palette-drawer{
  position:sticky!important;
  top:88px!important;
  align-self:start!important;
  width:100%!important;
  max-height:calc(100dvh - 112px)!important;
  padding:16px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:22px!important;
  box-shadow:var(--omi20-shadow)!important;
  overscroll-behavior:contain!important;
}
#examScreen .palette-head{gap:10px}
#examScreen .palette-head>div{min-width:0}
#examScreen .palette-head small{display:block;margin-top:4px;line-height:1.35;color:var(--omi20-muted)}
#examScreen .palette{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
}
#examScreen .palette button{
  min-width:0!important;
  min-height:46px!important;
  aspect-ratio:auto!important;
  border-radius:13px!important;
}
#examScreen .exam-main{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
#examScreen .question-card{
  width:100%!important;
  min-height:clamp(460px,65vh,760px)!important;
  height:auto!important;
  max-height:none!important;
  padding:clamp(20px,2.5vw,34px)!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
  scrollbar-gutter:auto!important;
  border:1.5px solid #cfe1eb!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:var(--omi20-shadow)!important;
}
#examScreen .question-inner{
  width:100%;
  height:auto!important;
  max-height:none!important;
  transform:none!important;
}
#examScreen .prompt{font-size:clamp(1rem,1.2vw,1.15rem)!important;line-height:1.62!important}
#examScreen .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px!important}
#examScreen .option{min-width:0;min-height:68px!important;border-radius:18px!important}
#examScreen .assessment-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#examScreen .assessment-controls label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Always-visible, always-complete exam action bar. */
#examScreen .exam-actions{
  position:fixed!important;
  z-index:1080!important;
  left:50%!important;
  right:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  width:min(1080px,calc(100vw - 24px))!important;
  min-height:68px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-areas:"prev review submit next"!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid #d9e4eb!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:var(--omi20-shadow-float)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#examScreen #prev{grid-area:prev!important}
#examScreen #reviewBtn{grid-area:review!important;display:inline-flex!important}
#examScreen #submitFixed{grid-area:submit!important;display:inline-flex!important;background:#5140e6!important;color:#fff!important;border-color:#5140e6!important}
#examScreen #next{grid-area:next!important;display:inline-flex!important;background:var(--omi20-success)!important;color:#fff!important}
#examScreen .exam-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  margin:0!important;
  padding:10px 12px!important;
  border-radius:15px!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:.86rem!important;
  line-height:1.18!important;
}
#examScreen .exam-actions .btn[disabled]{opacity:.5}

/* 4. LEGACY PRACTICE/ASSESSMENT EXAM PAGES --------------------------------
   These pages also stop using a fixed nested viewport. Existing V19 visual
   styling is retained; only scroll and action reliability are normalized.
*/
body.legacy-app.omi-exam-active,
body.legacy-app.omi-secure-exam{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  padding-bottom:96px!important;
}
body.legacy-app.omi-exam-active .screen.exam-layout.active,
body.legacy-app.omi-secure-exam .screen.exam-layout.active,
body.legacy-app.omi-exam-active .screen.active,
body.legacy-app.omi-secure-exam .screen.active{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.legacy-app.omi-exam-active .exam-main,
body.legacy-app.omi-secure-exam .exam-main,
body.legacy-app.omi-exam-active .question-card,
body.legacy-app.omi-secure-exam .question-card{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.legacy-app.omi-exam-active .q-nav,
body.legacy-app.omi-secure-exam .q-nav{
  position:fixed!important;
  z-index:1080!important;
  left:50%!important;
  right:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  width:min(900px,calc(100vw - 24px))!important;
  margin:0!important;
  border:1px solid #dde5eb!important;
  border-radius:20px!important;
  box-shadow:var(--omi20-shadow-float)!important;
}

/* 5. RESULT SCREEN ---------------------------------------------------------- */
#resultScreen.result.active{
  width:min(100%,1040px)!important;
  min-height:100dvh!important;
  height:auto!important;
  margin:0 auto!important;
  padding:clamp(20px,4vw,48px) var(--omi20-page-x) calc(36px + env(safe-area-inset-bottom))!important;
  overflow:visible!important;
}
#resultScreen .result-card{
  width:100%;
  padding:clamp(22px,4vw,42px)!important;
  border-radius:28px!important;
  border:1px solid var(--omi20-line)!important;
  box-shadow:var(--omi20-shadow)!important;
}
.result-receipt{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:12px 0 20px;
  padding:16px 18px;
  border:1px solid #cde4da;
  border-radius:18px;
  background:#f0f8f4;
}
.result-receipt strong{display:block;color:var(--omi20-green);font-size:1.06rem}
.result-receipt small{display:block;margin-top:4px;color:var(--omi20-muted)}
.result-actions-v20{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:18px 0;
}
.result-actions-v20 .btn{flex:1 1 190px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.result-panel-v20{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e3e9ee;
}
.result-panel-v20[hidden]{display:none!important}
.answer-review-list{display:grid;gap:10px;margin-top:14px}
.answer-review-item{
  border:1px solid #dfe6ec;
  border-radius:17px;
  background:#fff;
  overflow:hidden;
}
.answer-review-item>summary{
  min-height:52px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:850;
  list-style:none;
}
.answer-review-item>summary::-webkit-details-marker{display:none}
.answer-review-item[data-status="correct"]>summary{color:#087454;background:#f1faf6}
.answer-review-item[data-status="partial"]>summary{color:#8b620d;background:#fff9ea}
.answer-review-item[data-status="incorrect"]>summary{color:#9d3043;background:#fff4f6}
.answer-review-body{padding:14px 16px 17px;border-top:1px solid #e8edf1;color:#34475d;line-height:1.55}
.answer-review-body p{margin:.45rem 0}
.answer-review-body .review-prompt{color:var(--omi20-ink);font-weight:700}
.answer-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 9px;margin:3px 4px 3px 0;border-radius:10px;background:#f2f5f7;border:1px solid #dfe6ec;color:#30455b;font-weight:750}
.result-policy-note{padding:14px 16px;border-radius:15px;background:#fff8e7;border:1px solid #ead8a7;color:#71541a;line-height:1.5}

/* 6. OVERLAYS --------------------------------------------------------------- */
.omi-drawer,.omi-menu-dialog,.scanner-panel,dialog.omi-modal{
  scrollbar-gutter:auto!important;
}
.omi-drawer[open]{overscroll-behavior:contain}
.omi-drawer .omi-menu-section a{overflow-wrap:anywhere}

/* 7. BREAKPOINTS ------------------------------------------------------------ */
@media(min-width:1180px){
  #omi-fixed-header{padding-inline:max(20px,calc((100vw - 1480px)/2))!important}
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) main.wrap,
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) .shell{padding-inline:22px!important}
}

@media(max-width:1100px){
  #examScreen .exam-body{grid-template-columns:210px minmax(0,1fr)!important}
  #examScreen .options{grid-template-columns:1fr!important}
}

@media(max-width:900px){
  #examScreen.exam-fixed.active{padding:8px 10px calc(142px + env(safe-area-inset-bottom))!important}
  #examScreen .exam-status{top:6px!important;grid-template-columns:auto minmax(0,1fr) auto!important}
  #examScreen .menu-number{display:inline-flex!important}
  #examScreen .status-person{display:none!important}
  #examScreen .progress-wrap{grid-column:1/-1!important}
  #examScreen .exam-body{display:block!important}
  #examScreen .palette-drawer{
    position:fixed!important;
    inset:auto 0 0!important;
    z-index:1200!important;
    width:100%!important;
    height:min(76dvh,720px)!important;
    max-height:76dvh!important;
    padding:18px 16px calc(22px + env(safe-area-inset-bottom))!important;
    border-radius:28px 28px 0 0!important;
    transform:translateY(110%)!important;
    transition:transform .24s cubic-bezier(.22,.8,.22,1)!important;
    box-shadow:0 -24px 70px rgba(22,38,53,.22)!important;
  }
  #examScreen .palette-drawer::before{content:"";display:block;width:92px;height:7px;border-radius:999px;background:#d4dfe7;margin:-4px auto 14px}
  #examScreen .palette-drawer.open{transform:none!important}
  #examScreen .close-palette{display:inline-flex!important}
  #examScreen .question-card{min-height:0!important;padding:20px 16px 26px!important;border-radius:24px!important}
  #examScreen .exam-actions{
    width:min(760px,calc(100vw - 16px))!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:"prev next" "review submit"!important;
    min-height:118px!important;
    border-radius:20px!important;
  }
  #examScreen .exam-actions .btn{min-height:48px!important;font-size:.8rem!important}
  body.legacy-app.omi-exam-active .q-nav,body.legacy-app.omi-secure-exam .q-nav{width:calc(100vw - 16px)!important}
}

@media(max-width:760px){
  body.omi-layout{padding-left:0!important;padding-right:0!important}
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) main,
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) .wrap,
  body.omi-layout:not(.omi-exam-active):not(.omi-secure-exam) .shell{
    width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .omi-primary-nav{height:calc(70px + env(safe-area-inset-bottom))!important}
  .omi-primary-nav a{min-height:54px!important}
  .result-receipt{grid-template-columns:1fr}
  #resultScreen .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #resultScreen .profiles,#resultScreen .profiles.juknis-profiles{grid-template-columns:1fr!important}
}

@media(max-width:520px){
  #examScreen.exam-fixed.active{padding-inline:7px!important}
  #examScreen .exam-status{border-radius:14px!important;padding:7px!important}
  #examScreen .status-field small{display:none}
  #examScreen .status-timer b{font-size:1rem!important}
  #examScreen .question-card{padding:17px 12px 22px!important;border-radius:20px!important}
  #examScreen .prompt{font-size:1rem!important;line-height:1.58!important}
  #examScreen .option{min-height:66px!important}
  #examScreen .assessment-controls{align-items:stretch}
  #examScreen .assessment-controls>*{width:100%}
  #examScreen .assessment-controls label{justify-content:space-between}
  #examScreen .exam-actions{bottom:max(5px,env(safe-area-inset-bottom))!important;width:calc(100vw - 10px)!important;padding:6px!important;gap:6px!important;border-radius:17px!important}
  #examScreen .exam-actions .btn{min-height:46px!important;padding:7px 5px!important;font-size:.74rem!important}
  .result-actions-v20{display:grid;grid-template-columns:1fr}
  .result-actions-v20 .btn{width:100%}
  #resultScreen .summary-grid{grid-template-columns:1fr!important}
}

@media(max-width:360px){
  #examScreen .palette{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #examScreen .exam-actions .btn{font-size:.68rem!important}
  #omi-fixed-header .omi-page-name{max-width:38vw}
}

@media(pointer:coarse){
  html,body{scroll-behavior:auto!important}
  #examScreen .option,#examScreen .btn{touch-action:manipulation!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  #examScreen .palette-drawer{transition:none!important}
}

/* 8. V20 RESULT + EXACT DEVICE WIDTH FINISHING ------------------------------ */
#examScreen .exam-actions{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:#fff!important;
}
.result-receipt{grid-template-columns:auto minmax(0,1fr)!important}
.result-receipt-icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  flex:none;background:#0a9c70;color:#fff;font-size:1.35rem;font-weight:950;
  box-shadow:0 0 0 7px rgba(10,156,112,.10);
}
#resultScreen .result-card-v20>h1{margin:.45rem 0 .4rem;font-size:clamp(1.7rem,4vw,2.6rem)}
#resultScreen .result-card-v20>#resultMessage{margin:.45rem 0;color:var(--omi20-muted);line-height:1.55}
#resultScreen .result-panel-v20{scroll-margin-top:18px}
.answer-review-head{
  min-height:52px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid #e8edf1;font-weight:850;
}
.answer-review-item.is-correct .answer-review-head{background:#f1faf6;color:#087454}
.answer-review-item.is-wrong .answer-review-head{background:#fff4f6;color:#9d3043}
.answer-review-question{margin-bottom:10px;color:var(--omi20-ink);font-weight:760;line-height:1.55}
.answer-explanation{padding:10px 12px;border-radius:12px;background:#f7f9fb}

/* User-requested verification widths. Layout remains fluid between them. */
@media(max-width:430px){
  :root{--omi20-page-x:10px}
  #examScreen .exam-actions{width:calc(100vw - 8px)!important}
  #examScreen .palette-drawer{height:min(80dvh,720px)!important;max-height:80dvh!important}
  #resultScreen.result.active{padding-inline:10px!important}
}
@media(max-width:412px){
  #examScreen .exam-actions .btn{padding-inline:6px!important;font-size:.72rem!important}
  #examScreen .status-field b{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:390px){
  #examScreen .question-card{padding-inline:10px!important}
  #examScreen .palette{gap:6px!important}
  .result-receipt{padding:14px!important;gap:12px!important}
}
@media(max-width:320px){
  #examScreen .palette{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #examScreen .exam-actions{grid-template-areas:"prev next" "review submit"!important;gap:4px!important;padding:5px!important}
  #examScreen .exam-actions .btn{min-height:44px!important;font-size:.64rem!important;padding:5px 3px!important}
  #examScreen.exam-fixed.active{padding-bottom:calc(136px + env(safe-area-inset-bottom))!important}
  #resultScreen .result-card{padding:18px 12px!important}
}
.answer-review-item.is-partial .answer-review-head{background:#fff9ea;color:#8b620d}