:root {
  --dmr-focus-canvas: #fbe9f2;
  --dmr-focus-panel: #fffcf0;
  --dmr-focus-ink: #212121;
  --dmr-focus-gutter: clamp(14px, 2.4vmin, 32px);
}

[data-dmr-focus-frame] {
  --dmr-focus-frame-max-width: 1220px;
  --dmr-focus-frame-max-height: 800px;
}

[data-dmr-focus-frame="compact"] {
  --dmr-focus-frame-max-width: 1180px;
  --dmr-focus-frame-max-height: 760px;
}

[data-dmr-focus-frame="visual"] {
  --dmr-focus-frame-max-width: 1280px;
  --dmr-focus-frame-max-height: 820px;
}

[data-dmr-focus-frame="dense"] {
  --dmr-focus-frame-max-width: 1360px;
  --dmr-focus-frame-max-height: 800px;
}

[data-dmr-focus-host]:fullscreen::backdrop,
[data-dmr-focus-host]:-webkit-full-screen::backdrop {
  background: var(--dmr-focus-canvas);
}

/*
 * Some practice apps request native full screen while others keep an in-page
 * fallback class on the body. A host without a frame is the full-screen canvas;
 * its child frame remains centred at its useful, natural size.
 */
body[class*="-fullscreen-active"] [data-dmr-focus-host]:not([data-dmr-focus-frame]),
body.dmr-practice-focus-mode-active [data-dmr-focus-host]:not([data-dmr-focus-frame]),
[data-dmr-focus-host].dmr-practice-focus-host--fallback:not([data-dmr-focus-frame]),
[data-dmr-focus-host]:fullscreen:not([data-dmr-focus-frame]),
[data-dmr-focus-host]:-webkit-full-screen:not([data-dmr-focus-frame]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--dmr-focus-gutter) !important;
  border: 0 !important;
  overflow: hidden !important;
  background: var(--dmr-focus-canvas) !important;
}

body[class*="-fullscreen-active"] [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
body.dmr-practice-focus-mode-active [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
[data-dmr-focus-host].dmr-practice-focus-host--fallback:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
[data-dmr-focus-host]:fullscreen:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
[data-dmr-focus-host]:-webkit-full-screen:not([data-dmr-focus-frame]) [data-dmr-focus-frame] {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: min(
    var(--dmr-focus-frame-max-width),
    calc(100vw - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: var(--dmr-focus-frame-max-width) !important;
  max-height: min(
    var(--dmr-focus-frame-max-height),
    calc(100dvh - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
  margin: 0 !important;
  border: 6px solid var(--dmr-focus-ink) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--dmr-focus-panel) !important;
}

/* Compatibility for a future or legacy page that combines host and frame. */
body[class*="-fullscreen-active"] [data-dmr-focus-host][data-dmr-focus-frame],
body.dmr-practice-focus-mode-active [data-dmr-focus-host][data-dmr-focus-frame],
[data-dmr-focus-host][data-dmr-focus-frame]:fullscreen,
[data-dmr-focus-host][data-dmr-focus-frame]:-webkit-full-screen {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 10000 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  width: min(
    var(--dmr-focus-frame-max-width),
    calc(100vw - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: var(--dmr-focus-frame-max-width) !important;
  max-height: min(
    var(--dmr-focus-frame-max-height),
    calc(100dvh - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
  margin: 0 !important;
  padding: clamp(10px, 1.4vw, 18px) !important;
  border: 6px solid var(--dmr-focus-ink) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--dmr-focus-panel) !important;
}

body[class*="-fullscreen-active"] [data-dmr-focus-host][data-dmr-focus-frame="dense"],
body.dmr-practice-focus-mode-active [data-dmr-focus-host][data-dmr-focus-frame="dense"],
[data-dmr-focus-host][data-dmr-focus-frame="dense"]:fullscreen,
[data-dmr-focus-host][data-dmr-focus-frame="dense"]:-webkit-full-screen {
  height: min(
    var(--dmr-focus-frame-max-height),
    calc(100dvh - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
}

body[class*="-fullscreen-active"] [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame="dense"],
body.dmr-practice-focus-mode-active [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame="dense"],
[data-dmr-focus-host].dmr-practice-focus-host--fallback:not([data-dmr-focus-frame]) [data-dmr-focus-frame="dense"],
[data-dmr-focus-host]:fullscreen:not([data-dmr-focus-frame]) [data-dmr-focus-frame="dense"],
[data-dmr-focus-host]:-webkit-full-screen:not([data-dmr-focus-frame]) [data-dmr-focus-frame="dense"] {
  height: min(
    var(--dmr-focus-frame-max-height),
    calc(100dvh - var(--dmr-focus-gutter) - var(--dmr-focus-gutter))
  ) !important;
}

body[class*="-fullscreen-active"],
body.dmr-practice-focus-mode-active {
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--dmr-focus-canvas) !important;
}

body[class*="-fullscreen-active"] > #navbar,
body[class*="-fullscreen-active"] > #student_navbar,
body[class*="-fullscreen-active"] > footer,
body[class*="-fullscreen-active"] > .dmr-issue-reporter,
body.dmr-practice-focus-mode-active > #navbar,
body.dmr-practice-focus-mode-active > #student_navbar,
body.dmr-practice-focus-mode-active > footer,
body.dmr-practice-focus-mode-active > .dmr-issue-reporter {
  display: none !important;
}

@media (max-width: 900px), (max-height: 680px) {
  :root {
    --dmr-focus-gutter: 10px;
  }

  body[class*="-fullscreen-active"] [data-dmr-focus-host][data-dmr-focus-frame],
  body.dmr-practice-focus-mode-active [data-dmr-focus-host][data-dmr-focus-frame],
  [data-dmr-focus-host][data-dmr-focus-frame]:fullscreen,
  [data-dmr-focus-host][data-dmr-focus-frame]:-webkit-full-screen,
  body[class*="-fullscreen-active"] [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
  body.dmr-practice-focus-mode-active [data-dmr-focus-host]:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
  [data-dmr-focus-host].dmr-practice-focus-host--fallback:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
  [data-dmr-focus-host]:fullscreen:not([data-dmr-focus-frame]) [data-dmr-focus-frame],
  [data-dmr-focus-host]:-webkit-full-screen:not([data-dmr-focus-frame]) [data-dmr-focus-frame] {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-width: 5px !important;
  }
}