/* App reading and disclosure layer. Desktop keeps the existing page layouts. */
.mu-fold-heading { display: none; }

@media (max-width: 900px) {
  html:has(.app-body), body:has(.app-body) { min-width: 0; width: 100%; overflow-x: clip; }
  .app-body { min-width: 0; width: 100%; }
  .app-body .container { width: 100%; min-width: 0; max-width: 100%; padding: 22px 20px calc(112px + env(safe-area-inset-bottom, 0px)); }
  .app-body .view { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .app-body .view > *, .app-body .tool-main, .app-body .tool-side { min-width: 0; max-width: 100%; }
  .app-body .page-title { font-size: 24px; line-height: 1.4; }
  .app-body .page-desc { font-size: 14px; line-height: 1.7; }
  .app-body .tool-layout, .app-body .bd-top, .app-body .af-map-split { grid-template-columns: minmax(0, 1fr); }
  .app-body .af-map-split { min-width: 0; }
  .app-body .tool-side { position: static; }
  .app-body .af-head { flex-wrap: wrap; }
  .app-body .af-head-main, .app-body .af-head-benefits { width: 100%; flex-basis: 100%; }
  .app-body .rc2-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 8px; scrollbar-width: thin; }
  .app-body .rc2-tab { flex: 0 0 auto; min-height: 46px; padding: 10px 13px; font-size: 14px; white-space: nowrap; }
  .app-body :is(.rs-tabs, .bs-tabs, .rank-gametabs, .rkm-tabs, .bd-nav) { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .app-body :is(.bd-tab, .rs-fil-tab, .bs-tab, .bs-sub, .lg-sub, .lg-tab, .wnx-toolbar-btn, .wnx-cabinet-tab, .wnx-test-launch) { min-height: 44px; }
  .app-body :is(.mi-table, .rc2-table-wrap, .ec-heatmap) { max-width: 100%; overflow-x: auto; }
  .app-body :is(.panel, .pcard, .rc2-paper) { border-radius: 16px; }
  .app-body :is(button, a, input, select, textarea):focus-visible { outline: 3px solid #4f72f2; outline-offset: 3px; }
  .app-body :is(input, select, textarea) { max-width: 100%; }

  .app-body .mu-fold { scroll-margin-top: 20px; }
  .app-body .mu-fold-heading { display: block; position: relative; z-index: 1; margin: 0 0 14px; padding: 0; }
  .app-body .mu-fold-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #e4eaf3; border-radius: 12px; background: #f7f9fc; color: #17233c; text-align: left; font: inherit; font-size: 16px; font-weight: 750; box-shadow: none; cursor: pointer; touch-action: manipulation; transition: background .15s, transform .15s; }
  .app-body .mu-fold-toggle:hover { background: #eef0ff; }
  .app-body .mu-fold-toggle:active { background: #e3e9ff; transform: scale(.985); }
  .app-body .mu-fold-title { flex: 1; min-width: 0; line-height: 1.45; }
  .app-body .mu-fold-state { color: #65738a; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .app-body .mu-fold-arrow { width: 9px; height: 9px; flex: 0 0 9px; margin: 0 3px 3px; border: solid #4f72f2; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .18s; }
  .app-body .mu-fold[data-mu-open="true"] > .mu-fold-heading .mu-fold-arrow { transform: rotate(225deg); margin-bottom: -4px; }
  .app-body .mu-fold[data-mu-open="false"] > :not(.mu-fold-heading), .app-body .mu-fold-source-title { display: none !important; }
  .app-body .mu-fold[data-mu-open="false"] > .mu-fold-heading { margin-bottom: 0; }
  .app-body .mu-fold[data-mu-open="false"] { min-height: 0; }
  .app-body .mu-fold .pcard-step { margin-bottom: 12px; }
  .app-body .mu-fold .pcard-step-n { flex-shrink: 0; }

  body.mu-dialog-open { overflow: hidden; }
  :is(.auth-gate, .cash-modal, .dash-modal, .sup-modal, .pc-modal, .lg-modal, .store-modal, .wnx-test-backdrop, .wnx-practice-backdrop) { box-sizing: border-box; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  :is(.auth-card, .cash-modal-box, .dash-modal-box, .sup-modal-box, .pc-box, .lg-modal-box, .store-modal-box, .wnx-test-card, .wnx-practice-card, .ch-pick) { box-sizing: border-box; min-width: 0; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  :is(.store-modal-body, .cash-modal-body) { min-height: 0; overscroll-behavior: contain; }
  :is(.store-modal-head, .cash-modal-head) { flex-shrink: 0; gap: 12px; }
  :is(.store-modal-foot, .cash-modal-foot) { flex-shrink: 0; flex-wrap: wrap; }
  :is(.auth-close, .cash-close, .sup-modal-x, .pc-x, .lg-modal-x, .store-modal-x, .wnx-test-close, .wnx-practice-close, .ch-pick-x, .gm-close) { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 10px; touch-action: manipulation; }
  :is(.sup-modal-title, .lg-modal-title, .wnx-test-card h2, .wnx-practice-card h2) { padding-right: 34px; }
  :is(.store-modal-x, .cash-close, .sup-modal-x, .pc-x, .lg-modal-x):active { background: #e4eaff; transform: scale(.94); }
}

@media (max-width: 640px) {
  .app-body .container { padding: 18px 14px calc(112px + env(safe-area-inset-bottom, 0px)); }
  .app-body .view :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea), :is(.store-modal, .sup-modal, .cash-modal) :is(input, select, textarea) { font-size: 16px; }
  .app-body :is(.panel, .pcard, .rc2-paper) { padding: 18px 14px; }
  .app-body :is(.rs-tabs, .bs-tabs) { display: flex; flex-wrap: nowrap; gap: 6px; }
  .app-body :is(.bd-tab, .bs-tab) { flex: 0 0 auto; white-space: nowrap; padding: 10px 13px; font-size: 14px; }
  .app-body :is(.vr-row, .lg-form-grid, .dash-main, .dash-bottom, .mi-kpis, .mi-bottom) { grid-template-columns: minmax(0, 1fr); }
  .app-body :is(.md-tools, .md-sec-h, .md-sort, .lg-search, .rkm-filters) { flex-wrap: wrap; }
  .app-body .md-search { width: 100%; min-width: 0; }
  .app-body .rkm-sel select { min-width: 0; max-width: 100%; }
  .app-body .rkm-sel { flex: 1 1 140px; min-width: 0; }
  .app-body .rkm-sel select { width: 100%; }
  .app-body .post-body { font-size: 16px; line-height: 1.8; }
  .app-body .mu-fold-toggle { font-size: 15px; }
  .app-body .rc2-head h1 { font-size: 23px; }
  .app-body .rc2-head p { font-size: 14px; line-height: 1.6; }
  .wnx-test-card, .wnx-practice-card { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-body .mu-fold-toggle, .app-body .mu-fold-arrow { transition: none; }
}

/* Keep the existing full-height analysis studio above the mobile navigation. */
@media (max-width: 900px) {
  .app-shell.nn-studio-mode { height: calc(100vh - 84px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px)); min-height: 0; }
  .app-shell.nn-studio-mode .app-body { height: 100%; min-height: 0; }
}