/* Shared visual-only presentation layer. It deliberately changes layout, never scale or zoom. */
.qce-presentation-toggle {
  min-height: 38px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 8px 12px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.qce-presentation-toggle[aria-pressed="true"] { background: #1d6258; border-color: #1d6258; color: #fff; }
.qce-presentation-toggle:focus-visible { outline: 3px solid #e19b4b; outline-offset: 3px; }

body.qce-presentation-mode .page-shell { width: min(1640px, calc(100% - 48px)); max-width: none; }
body.qce-presentation-mode .hero-panel,
body.qce-presentation-mode .account-hero { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); }
body.qce-presentation-mode .service-grid,
body.qce-presentation-mode .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.qce-presentation-mode .service-tile,
body.qce-presentation-mode .dashboard-card { min-height: 100%; }

body.qce-presentation-mode .course-viewer-shell { width: min(1920px, calc(100vw - 28px)); padding-top: 12px; }
body.qce-presentation-mode .viewer-layout { grid-template-columns: minmax(720px, 1.45fr) minmax(360px, .55fr); gap: 16px; }
body.qce-presentation-mode .board-wrap { width: min(1320px, 100%, calc(100vh - 70px)); }
body.qce-presentation-mode .task-panel { padding: 18px; }
body.qce-presentation-mode .task-panel p,
body.qce-presentation-mode .task-panel li { font-size: 1rem; line-height: 1.55; }

body.qce-presentation-mode .container-practice { max-width: 1840px; padding-left: 12px; padding-right: 12px; }
body.qce-presentation-mode .board-panel { padding: 16px; }
body.qce-presentation-mode .board-stage { grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 18px; }
body.qce-presentation-mode .board-container { width: min(1040px, 100%, calc(100vh - 116px)); }
body.qce-presentation-mode .board-right-rail { width: auto; min-width: 0; max-width: none; }
body.qce-presentation-mode .board-side-note,
body.qce-presentation-mode .rail-panel { font-size: 1rem; line-height: 1.55; }

body.qce-presentation-mode .floating-header + main { max-width: 1680px; margin-left: auto; margin-right: auto; }
body.qce-presentation-mode .floating-header { max-width: 1680px; margin-left: auto; margin-right: auto; }
/* The canonical official-rules page wraps its header and main content in
   `.shell`, rather than the legacy `mx-auto max-w-[1180px]` container below. */
body.qce-presentation-mode .shell { width: min(1720px, calc(100% - 32px)); max-width: none; }
body.qce-presentation-mode #rule-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.qce-presentation-mode #rule-sections article { padding: 2.25rem; }
body.qce-presentation-mode #rule-sections article p { font-size: 1rem; line-height: 1.85; }
/* Legacy public reading pages use Tailwind utility classes rather than the
   current Rules shell. Make the active reading surface fill the viewport. */
body.qce-presentation-mode > div.mx-auto.max-w-\[1180px\] {
  width: min(1720px, calc(100% - 32px));
  max-width: none;
  padding-top: 16px;
  padding-bottom: 32px;
}
body.qce-presentation-mode .floating-header { max-width: none; }
body.qce-presentation-mode main.mt-10 { margin-top: 20px; gap: 20px; }
body.qce-presentation-mode main.mt-10 > section { border-radius: 1.4rem; }
body.qce-presentation-mode main.mt-10 > section:not(:has(#rule-sections)) { padding: clamp(1.5rem, 2.5vw, 3rem); }
body.qce-presentation-mode #rule-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.qce-presentation-mode #rule-sections article { padding: clamp(1.5rem, 2.4vw, 2.5rem); }
body.qce-presentation-mode #rule-sections article p { font-size: 1.06rem; line-height: 1.75; }

@media (max-width: 1100px) {
  body.qce-presentation-mode .service-grid,
  body.qce-presentation-mode .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.qce-presentation-mode .viewer-layout { grid-template-columns: minmax(0, 1fr); }
  body.qce-presentation-mode .board-wrap { width: min(980px, 100%, calc(100vh - 140px)); }
  body.qce-presentation-mode .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "board"
      "right";
  }
  body.qce-presentation-mode #rule-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body.qce-presentation-mode .shell { width: calc(100% - 24px); }
  body.qce-presentation-mode .page-shell { width: min(100% - 24px, 1640px); }
  body.qce-presentation-mode .hero-panel,
  body.qce-presentation-mode .account-hero,
  body.qce-presentation-mode .service-grid,
  body.qce-presentation-mode .dashboard-grid,
  body.qce-presentation-mode #rule-sections { grid-template-columns: 1fr; }
  body.qce-presentation-mode .course-viewer-shell { width: min(100% - 12px, 1920px); }
  body.qce-presentation-mode .board-wrap { width: min(100%, calc(100vh - 180px)); }
  body.qce-presentation-mode .board-container { width: min(100%, calc(100vh - 230px)); }
  body.qce-presentation-mode #rule-sections article { padding: 1.5rem; }
  body.qce-presentation-mode > div.mx-auto.max-w-\[1180px\] { width: calc(100% - 16px); padding-left: 0; padding-right: 0; }
  body.qce-presentation-mode main.mt-10 { gap: 14px; }
  body.qce-presentation-mode #rule-sections { grid-template-columns: 1fr; }
}