/* The mobile training header leaves the diagram most of the landscape viewport. */
body.dxz-mobile-preplanning-host > header { min-height: 56px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); flex-wrap: nowrap; gap: 8px; }
body.dxz-mobile-preplanning-host > header .header-left { flex: 1; min-width: 0; display: flex; }
body.dxz-mobile-preplanning-host > header .brand { display: none; }
body.dxz-mobile-preplanning-host > header .tabs { display: flex; min-width: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 2px; padding: 0; scrollbar-width: none; }
body.dxz-mobile-preplanning-host > header .tabs::-webkit-scrollbar { display: none; }
body.dxz-mobile-preplanning-host > header .tabs button { flex: 0 0 auto; min-width: 68px; min-height: 44px; padding: 8px 10px; font-size: 13px; }
body.dxz-mobile-preplanning-host > header .header-right { flex: 0 0 auto; gap: 6px; }
body.dxz-mobile-preplanning-host > header .header-right > :is(.paid-status, .announcement-bell, .header-download-btn) { display: none; }
body.dxz-mobile-preplanning-host > header .header-right :is(#partnerBtn, #themeSettingsBtn, #staticActivateBtn) { min-height: 44px; padding: 8px 10px; font-size: 13px; }
body.dxz-mobile-preplanning-host > main { padding: 0; margin: 0; max-width: none; min-height: 0; }
body.dxz-mobile-preplanning-host #preFrame { display: block; width: 100%; min-height: 0; }
@media (orientation: portrait) { body.dxz-mobile-preplanning-host > header { flex-wrap: wrap; } body.dxz-mobile-preplanning-host > header .header-left { flex-basis: 100%; } }

body.dxz-mobile-preplanning-host > header .header-right { width: auto; flex-wrap: nowrap; }
body.dxz-mobile-preplanning-host > header .header-right #staticActivateBtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 60px; white-space: nowrap; }

/* Browser-compatible landscape fallback. The DOM stays in place so a live iframe is not reloaded; only the training viewport is rotated. */
#mobileOrientationCompatAction { border: 1px solid #4d8fb9; color: #fff; background: #397aa2; }
#mobileOrientationCompatAction[hidden] { display: none !important; }
#mobileOrientationCompatControls[hidden] { display: none !important; }
#mobileOrientationCompatControls { display: inline-flex; gap: 6px; align-items: center; margin-right: 4px; }
#mobileOrientationCompatControls button { min-height: 44px; padding: 6px 9px; border: 1px solid rgba(117,98,180,.38); border-radius: 9px; color: #4c427c; background: rgba(255,255,255,.9); font: inherit; font-size: 12px; white-space: nowrap; }
body.dxz-mobile-compat-landscape { overflow: hidden !important; width: 100vw; height: 100vh; }
body.dxz-mobile-compat-landscape > header { box-sizing: border-box; position: fixed !important; z-index: 30; left: 0; top: 0; width: var(--dxz-compat-width); max-width: none !important; height: 56px; min-height: 56px; margin: 0 !important; padding: 4px 10px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow: visible !important; align-items: center; gap: 8px; transform-origin: 0 0; transform: translateX(var(--dxz-compat-height)) rotate(90deg); transition: none !important; }
body.dxz-mobile-compat-landscape > header .header-left { display: flex; flex: 1 1 0; min-width: 0; flex-basis: auto !important; flex-wrap: nowrap !important; gap: 8px; }
body.dxz-mobile-compat-landscape > header .brand { display: none; }
body.dxz-mobile-compat-landscape > header .tabs { display: flex !important; flex-direction: row !important; min-width: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap !important; white-space: nowrap; gap: 4px; scrollbar-width: none; }
body.dxz-mobile-compat-landscape > header .tabs button { flex: 0 0 auto; width: auto !important; min-width: 62px; min-height: 40px; padding: 6px 8px !important; font-size: 12px; }
body.dxz-mobile-compat-landscape > header .header-right { display: flex; width: auto !important; flex: 0 0 auto; flex-wrap: nowrap !important; gap: 5px; }
body.dxz-mobile-compat-landscape > header .header-right :is(.paid-status, .account-expiry-status, .header-download-btn, .announcement-bell, #staticActivateBtn, #androidDownloadBtn) { display: none !important; }
body.dxz-mobile-compat-landscape > header .header-right :is(#partnerBtn, #themeSettingsBtn) { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
body.dxz-mobile-compat-landscape > header .theme-settings-panel { right: 0 !important; left: auto !important; max-height: calc(var(--dxz-compat-height) - 72px); overflow-y: auto; overscroll-behavior: contain; }
body.dxz-mobile-compat-landscape.dxz-mobile-compat-reverse > header { transform: translateY(var(--dxz-compat-width)) rotate(-90deg); }
body.dxz-mobile-compat-landscape > main { box-sizing: border-box; position: fixed; z-index: 1; left: 0; top: 0; width: var(--dxz-compat-width); height: calc(var(--dxz-compat-height) - var(--dxz-compat-header)); min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; transform-origin: 0 0; transform: translateX(calc(var(--dxz-compat-height) - var(--dxz-compat-header))) rotate(90deg); transition: none !important; }
body.dxz-mobile-compat-landscape.dxz-mobile-compat-reverse > main { transform: translate(var(--dxz-compat-header), var(--dxz-compat-width)) rotate(-90deg); }
body.dxz-mobile-compat-landscape > main > iframe:not(.hidden) { display: block; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; border: 0; }
body.dxz-mobile-compat-landscape > main > #mobileOrientationPrompt { display: none !important; }
body.dxz-mobile-compat-landscape > .site-footer { display: none !important; }
@media (max-width: 1100px) and (pointer: coarse) {
  .dxz-orientation-actions { gap: 10px; }
  .dxz-orientation-actions #mobileOrientationCompatAction { order: 0; }
  .dxz-orientation-actions #mobileOrientationAction { order: 1; }
}


/* A session starts with a choice; portrait is a supported non-blocking option. */
#mobileOrientationPrompt[hidden], #mobileOrientationSettingsEntry[hidden] { display: none !important; }
.dxz-orientation-prompt { box-sizing: border-box; margin: 12px auto 18px; padding: 20px; max-width: 540px; border: 1px solid rgba(139, 123, 202, .35); border-radius: 16px; background: linear-gradient(135deg, #ffffff 0%, #f5f9fc 100%); color: var(--ink, #182433); }
.dxz-orientation-heading { display: flex; align-items: center; gap: 12px; }
.dxz-orientation-heading svg { width: 40px; height: 40px; flex: 0 0 auto; color: #7562b4; }
.dxz-orientation-heading h2 { margin: 0; color: var(--ink, #182433); font-size: 19px; line-height: 1.4; }
.dxz-orientation-prompt p { margin: 10px 0; color: var(--ink, #182433); font-size: 14px; line-height: 1.7; }
.dxz-orientation-prompt .dxz-orientation-hint { color: var(--muted, #b4b2c6); }
.dxz-orientation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dxz-orientation-actions button { min-height: 44px; min-width: 100px; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 14px; cursor: pointer; }
#mobileOrientationAction { background: #7562b4; border: 1px solid #9681d6; color: #fff; }
#mobileOrientationAction:disabled { cursor: wait; opacity: .7; }
.dxz-orientation-actions button:focus-visible { outline: 3px solid #b9a5f6; outline-offset: 3px; }
body.dxz-mobile-preplanning-host.dxz-mobile-orientation-prompt > main { padding: 0 12px; }


/* Mobile mode picker and a stable single-layer login mark. */
@media (max-width: 1100px) and (pointer: coarse) {
  body.dxz-mobile-orientation-prompt { overflow: hidden; }
  .dxz-orientation-prompt {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    background: rgba(19, 24, 42, .62);
    backdrop-filter: blur(12px) saturate(.88);
    -webkit-backdrop-filter: blur(12px) saturate(.88);
  }
  .dxz-orientation-card {
    box-sizing: border-box;
    width: min(100%, 430px);
    padding: 24px 22px 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 22px;
    color: #1b2140;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,242,255,.96));
    box-shadow: 0 24px 70px rgba(7, 12, 34, .34), 0 2px 0 rgba(255,255,255,.8) inset;
  }
  .dxz-orientation-heading { gap: 11px; }
  .dxz-orientation-heading svg { color: #7562b4; }
  .dxz-orientation-heading h2 { color: #1b2140; font-size: 21px; }
  .dxz-orientation-card > p { color: #3d4660; }
  .dxz-orientation-card .dxz-orientation-hint { color: #68728b; }
  .dxz-orientation-actions { margin-top: 20px; }
  .dxz-orientation-actions button { width: 100%; min-height: 50px; }
  #mobileOrientationCompatAction { border-color: #7562b4; background: #7562b4; box-shadow: 0 8px 18px rgba(117,98,180,.24); }
  #mobileOrientationAction { border-color: rgba(117,98,180,.35); background: transparent; color: #625092; box-shadow: none; }

  /* Keep the login screen calm on small touch devices. */
  .lock-screen,
  .lock-screen::before,
  .lock-screen::after { animation: none !important; }
  .lock-screen::before,
  .lock-screen::after,
  .lock-screen .particle-background { display: none !important; }
  .lock-screen .brand-mark--intro::before,
  .lock-screen .brand-mark--intro::after { display: none !important; content: none !important; }
  .lock-screen .brand-mark--intro .brand-mark__face {
    color: #ffffff;
    opacity: 1;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    will-change: auto;
  }
  .lock-screen.lock-intro-active .brand-mark--intro .brand-mark__face { text-shadow: none !important; }
}


/* Mode controls use the existing lavender palette and never cover a live question. */
#mobileOrientationCompatControls button[hidden], #mobileOrientationPortraitAction[hidden], #mobileOrientationAction[hidden] { display: none !important; }
#mobileOrientationCompatControls button[aria-pressed="true"] { background: #7562b4; border-color: #7562b4; color: #fff; }
#mobileOrientationCompatControls button:focus-visible { outline: 3px solid #b9a5f6; outline-offset: 2px; }
#mobileOrientationPortraitAction { background: #fff; color: #625092; border: 1px solid rgba(117,98,180,.5); }
.dxz-orientation-system-action { margin-top: 12px; }
.dxz-orientation-system-action button { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.dxz-orientation-system-action button:focus-visible { outline: 3px solid #b9a5f6; outline-offset: 2px; }
@media (max-width: 1100px) and (pointer: coarse) {
  body.dxz-mobile-display-options:not(.dxz-mobile-compat-landscape) > header { flex-wrap: wrap; }
  body.dxz-mobile-display-options:not(.dxz-mobile-compat-landscape) > header .header-right { flex-wrap: wrap; }
  .dxz-orientation-prompt #mobileOrientationStatus:empty { display: none; }
}