/* ======================================================
   DSAT BLUEBOOK - matching style v2
   Replicates the College Board Bluebook Math UI
   ====================================================== */

/* Opt Bluebook surfaces into cross-document view transitions so navigations
   from the nav pages (which opt in via brand/system.css) are VALID on this
   end too — otherwise the browser skips the transition and raises a benign
   AbortError. Same 0.18s fade as system.css. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.08s; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  color: #1a1a1a;
}

/* ===== DSAT TOP HEADER (Bluebook layout) =====
   Tall enough to vertically fit the centered timer + Hide button stack
   without overflowing into the navy banner below. */
.dsat-header {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 8px 24px;
  background: #f1f3f6;
  border-bottom: 1px solid #d8dce3;
}
.dsat-header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.dsat-header-left-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Align the section title flush with the Directions button's text below it
     (which carries 8px left padding). Home link removed, so this row now starts
     the left column. */
  padding-left: 8px;
}
.dsat-section-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.dsat-directions {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  padding: 4px 8px;
  display: block;
}
.dsat-directions .caret { font-size: 10px; margin-left: 4px; }

.dsat-header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dsat-timer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}
.dsat-timer.hidden-timer { visibility: hidden; }
.dsat-hide-btn {
  background: white;
  border: 1px solid #c0c4cc;
  border-radius: 999px;
  padding: 4px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.dsat-hide-btn:hover { background: #f5f5f5; }

.dsat-header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.dsat-tool-btn {
  background: transparent;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dsat-tool-btn:hover { color: #1a73e8; }
.dsat-tool-btn .dsat-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}
.dsat-tool-btn .dsat-icon svg { display: block; }

/* ===== "THIS IS A TEST PREVIEW" banner — Bluebook navy band ===== */
.dsat-banner {
  background: #21304a;        /* Bluebook dark navy */
  color: white;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 0;
}

/* ===== Section Directions modal (Bluebook-style slide-down) ===== */
.dsat-section-directions-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 990;
}
.dsat-section-directions-backdrop.open { display: block; }

.dsat-section-directions {
  display: none;
  position: fixed;
  top: 84px;  /* sits below header (48px) + banner (~36px) */
  left: 24px;
  right: 24px;
  max-width: 1100px;
  margin: 0 auto;
  /* size to its content + Close button — never covers the problem below */
  background: white;
  border: 1px solid #d8dce3;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  padding: 28px 48px 72px;
  font-family: Georgia, "Times New Roman", serif;
  color: #1a1a1a;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.dsat-section-directions.open { display: block; }
.dsat-section-directions-arrow {
  position: absolute;
  top: -10px;
  left: 110px;  /* points roughly at the Directions button */
  width: 18px;
  height: 18px;
  background: white;
  border-left: 1px solid #d8dce3;
  border-top: 1px solid #d8dce3;
  transform: rotate(45deg);
}
.dsat-section-directions-body {
  font-size: 17px;
  line-height: 1.5;
  max-width: 980px;
}
.dsat-section-directions-body p {
  margin: 0 0 16px;
}
.dsat-section-directions-close {
  position: absolute;
  bottom: 24px;
  right: 32px;
  background: #ffe43b;
  border: 1px solid #ffe43b;
  border-radius: 999px;
  padding: 10px 36px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.12s;
}
.dsat-section-directions-close:hover { background: #ffd900; border-color: #ffd900; }

/* ===== Problem container with dashed borders ===== */
.dsat-problem-wrap {
  max-width: 950px;
  margin: 24px auto 100px;
  padding: 0 24px;
  border-left: 2px dashed #c8ccd4;
  border-right: 2px dashed #c8ccd4;
  background: white;
  font-family: Georgia, "Times New Roman", serif;
}

/* Question bar (dark #1 box + Mark for Review + ABC) */
.dsat-q-bar {
  display: flex;
  align-items: center;
  background: #2c2f3a;
  color: white;
  padding: 0;
  margin: 0 -24px 10px;    /* was 16px bottom — tighter gap to stem */
  border-radius: 0;
}
.dsat-q-num {
  background: #1a1d27;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 18px;
  display: inline-block;
}
.dsat-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  padding: 0 14px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.dsat-mark input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1a73e8;
}
.dsat-mark .bookmark { font-size: 14px; }
.dsat-abc {
  margin-left: auto;
  margin-right: 12px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Cross-out mode active — ABC button toggled on */
.dsat-abc.active {
  background: #0b3d91;
  box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.28);
  text-decoration: line-through;
}

/* ===== Stem area ===== */
.dsat {
  display: block !important;
  grid-template-columns: none !important;
}
.dsat > .stem,
.dsat > .choices {
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
}
.dsat > .choices {
  margin-top: 16px !important;   /* was 28px — tighter section gap */
}
.stem-meta { display: none !important; }
.stem-body {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 17px;
  line-height: 1.25;       /* Bluebook standard reading */
  color: #1a1a1a;
}
/* Image: no global max-height cap — each problem's JSON inline style controls size.
   Tight vertical margins to match Bluebook spacing. */
.stem-body img {
  display: block;
  margin: 4px auto;     /* was 16px auto — Bluebook-style tight spacing */
}

/* ===== Choices DSAT-style ===== */
.choices-tools {
  display: none !important;
}
#choices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;                  /* was 10px — tighter between choices */
}
.choice {
  display: flex;
  align-items: center;
  background: white;
  border: 1.5px solid #c8ccd4;
  border-radius: 10px;
  /* Right cross-out circle (::after) + its reserved padding appear only in ABC
     (eliminate) mode — matches R&W, which hides its eliminate circle until then.
     Normal mode = clean left-key + full-width body. */
  padding: 10px 16px;
  gap: 14px;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.choice:hover { border-color: #1a73e8; }
.choice.selected, .choice.active {
  border-color: #1a73e8;
  background: #f5faff;
}
.choice .choice-key {
  width: 30px;
  height: 30px;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  flex-shrink: 0;
  background: transparent;
  color: #1a1a1a;
}
.choice.selected .choice-key, .choice.active .choice-key {
  background: #1a73e8;
  color: white;
  border-color: #1a73e8;
}
.choice-body {
  flex: 1;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.5;
  color: #1a1a1a;
}

/* Per-choice elimination indicator (right side) — Bluebook style.
   Shows the answer letter (A/B/C/D) inside a circle. When the student
   eliminates a choice (.struck), the circle fills in dark and the
   letter shows a strikethrough line, matching the DSAT Bluebook UI. */
.choice::after {
  content: attr(data-key);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid #c8ccd4;
  border-radius: 50%;
  display: none;            /* shown only in ABC mode (rule below) — matches R&W */
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 600;
  color: #6a7280;
  background: white;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.choice:hover::after {
  border-color: #1a1a1a;
  color: #1a1a1a;
}
/* Eliminated state — filled circle with strikethrough on the letter */
.choice.struck::after {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: white;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
/* ABC (eliminate) mode only — the ABC button flips #strike-toggle. Then the
   right cross-out circle appears and the choice reserves space for it, exactly
   like R&W's eliminate circle. Normal mode stays clean (left key + full body). */
body:has(#strike-toggle:checked) .choice { padding-right: 52px; }
body:has(#strike-toggle:checked) .choice::after { display: flex; }

/* ===== DSAT bottom footer ===== */
.dsat-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: white;
  border-top: 1px solid #d8dce3;
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 50;
}
.dsat-footer-left {
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}
.dsat-footer-center { flex: 1; display: flex; justify-content: center; }
.dsat-footer-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.dsat-q-pill {
  background: #2c2f3a;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.caret-up { font-size: 10px; margin-left: 6px; }
.dsat-nav-btn {
  background: white;
  border: 1px solid #c0c4cc;
  border-radius: 999px;
  padding: 10px 28px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dsat-back { background: white; color: #1a1a1a; }
.dsat-next {
  background: #ffe43b;
  border-color: #ffe43b;
  color: #1a1a1a;
  padding: 10px 36px;
}
.dsat-next:hover { background: #ffd900; border-color: #ffd900; }

/* ═══════════════════════════════════════════════════════════════════
   Calculator left-docked panel — CANONICAL POSITION RULE
   ─────────────────────────────────────────────────────────────────
   Top offset = sticky header (76px) + banner (~36px) = 112px so calc
   header buttons aren't hidden under page chrome.

   ⚠ NO `!important` on `top` / `left` — drag JS in practice.html sets
   `style.top` / `style.left` inline during grid-in floating mode and
   `!important` would block it. Specificity is enough.

   Width 410px (was 380 — bumped for Desmos UI fit).
   ═══════════════════════════════════════════════════════════════════ */
.dsat-calc-panel {
  /* Bluebook calc: FIXED size regardless of window or problem type.
     Drag JS may push panel partially off-screen, but size never changes. */
  position: fixed;
  left: 0;
  top: 112px;
  width: 420px;
  height: 560px;
  background: white;
  border-right: 1px solid #d8dce3;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dsat-calc-panel.expanded {
  width: 100vw;
  height: calc(100vh - 112px);
  top: 112px;
  bottom: 0;
}
.dsat-calc-header {
  background: #1a1d27;
  color: white;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
}
.dsat-mode-pill {
  display: flex;
  background: #2a2e3a;
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.dsat-mode-btn {
  background: transparent;
  color: #e0e0e0;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dsat-mode-btn.active {
  background: white;
  color: #1a1a1a;
  text-decoration: underline;
}
.dsat-calc-drag, .dsat-calc-expand, .dsat-calc-close {
  background: transparent;
  color: white;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 16px;
}
.dsat-calc-drag { margin-left: 4px; cursor: move; }
.dsat-calc-expand { margin-left: auto; }
.dsat-calc-close { font-size: 22px; }

/* When calc open, push problem container right */
body.calc-open .dsat-problem-wrap {
  margin-left: calc(380px + 24px);
  margin-right: 24px;
}

/* ===== Reference modal ===== */
.dsat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;          /* above sticky header (100) and banner (99) */
}
.dsat-modal-content {
  background: white;
  width: 600px;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dsat-modal-header {
  background: #f1f3f6;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d8dce3;
}
.dsat-modal-header h3 { margin: 0; font-family: -apple-system, sans-serif; font-size: 16px; }
.dsat-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.dsat-modal-body { padding: 20px; overflow: auto; }

/* ===== Hide legacy elements ===== */
.topbar { display: none !important; }
.sidebar { display: none !important; }
.body-grid {
  display: block !important;
  grid-template-columns: none !important;
}
.main-pane { padding: 0; max-width: none; background: transparent; }
.notes-panel { display: none !important; }
.navbar { display: none !important; }
.feedback { display: none !important; }
.stem-figure, .stem-table { font-family: Georgia, serif; }

/* KaTeX inherits */
.katex { font-size: 1.05em; }

/* ===== DSAT Reference Sheet Modal ===== */
.dsat-ref-content {
  width: 820px !important;
  max-width: 95vw;
  max-height: 85vh;
}
.dsat-ref-body {
  padding: 24px;
}
.dsat-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  margin-bottom: 18px;
}
.dsat-ref-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: white;
}
.dsat-ref-svg {
  width: 100px;
  height: 60px;
  margin-bottom: 6px;
}
.dsat-ref-formula {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1a1a;
}
.dsat-ref-formula .katex { font-size: 1em; }

.dsat-ref-notes {
  border-top: 1px solid #e0e0e0;
  padding-top: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
}
.dsat-ref-notes p { margin: 4px 0; }

/* Fix: ensure hidden attribute actually hides flex/grid modals/panels */
.dsat-modal[hidden],
.dsat-calc-panel[hidden] {
  display: none !important;
}

/* ===== DSAT Bluebook font matching ===== */
/* Body (stem, choice text) = serif matching BB Trim Sans serif weight */
body, .stem-body, .choice-body, .stem-table, .dsat-problem-wrap {
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Cambria, Georgia, serif !important;
}

/* UI chrome (header, footer, buttons) = sans-serif matching BB Trim Sans sans */
.dsat-header,
.dsat-header *,
.dsat-banner,
.dsat-q-bar,
.dsat-q-num,
.dsat-mark,
.dsat-abc,
.dsat-footer,
.dsat-footer *,
.dsat-tool-btn,
.dsat-hide-btn,
.dsat-directions,
.dsat-calc-header,
.dsat-mode-btn,
.dsat-modal-header,
.dsat-modal-header * {
  font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, system-ui, sans-serif !important;
}

/* Choice (A)(B)(C)(D) key in sans, body in serif */
.choice .choice-key {
  font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif !important;
}
.choice .choice-body, .choice-body {
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif !important;
}

/* KaTeX math stays in Computer Modern (default) — matches DSAT */
.katex {
  font-family: "KaTeX_Main", "Computer Modern", serif !important;
}

/* ===== Smooth calculator transition (DSAT-like) ===== */
.dsat-problem-wrap {
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              margin-right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Slide-in/out transition for calc panel (paired with [hidden] transform). */
.dsat-calc-panel {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.dsat-calc-panel[hidden] {
  /* slide out via transform — but display:none breaks transition */
  display: flex !important;
  transform: translateX(-100%);
  pointer-events: none;
}
.dsat-calc-panel:not([hidden]) {
  transform: translateX(0);
  pointer-events: auto;
}
body.calc-open .dsat-problem-wrap {
  margin-left: calc(410px + 24px) !important;
  margin-right: 24px !important;
}

/* Reset hidden override for calc panel only */
.dsat-modal[hidden] { display: none !important; }
/* .dsat-calc-panel[hidden] reverts to translate-only above */

/* ===== Question heading bar — Bluebook accurate (LIGHT bg) ===== */
.dsat-q-bar {
  background: #ffffff !important;  /* white, NOT dark */
  color: #1a1a1a !important;
  padding: 0 !important;
  margin: 0 -24px 0 !important;
  border-radius: 0;
  border-bottom: 1px dashed #c0c4cc;  /* dashed underline */
  align-items: stretch !important;
  min-height: 40px;
}
/* "1" black badge — small dark box */
.dsat-q-num {
  background: #1a1d27 !important;
  color: white !important;
  padding: 8px 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 38px;
}
/* "Mark for Review" — dark text on white bg */
.dsat-mark {
  color: #1a1a1a !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.dsat-mark input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #1a73e8;
  margin: 0 !important;
}
.dsat-mark .bookmark {
  font-size: 16px;
}
/* ABC annotate button — stays blue on right */
.dsat-abc {
  margin-left: auto !important;
  margin-right: 8px !important;
  background: #1a73e8 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px;
  padding: 4px 10px !important;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
}

/* ===== Sticky headers (scroll only problem content) ===== */
.dsat-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.dsat-banner {
  position: sticky;
  top: 76px;       /* below the new 76px-min header */
  z-index: 99;
}
.dsat-q-bar {
  position: sticky;
  top: calc(76px + 36px) !important;  /* below header (76) + banner (~36) */
  z-index: 98;
  background: #ffffff !important;
  /* Add shadow to indicate it's pinned */
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* Scrollable problem content area (below q-bar) */
.dsat-problem-wrap {
  /* Add bottom padding so content doesn't hide behind footer */
  padding-bottom: 90px;
}

/* (Calc panel position consolidated into canonical block above ~line 416.
    Old duplicate overrides removed 2026-05-12.) */
/* REMOVED: was overriding aggressive crop with old +45px */

/* ===== B&W theme override (블랙 + 화이트 + 그레이만) ===== */
/* Choice selection: no border, subtle gray background */
.choice.selected, .choice.active {
  border-color: #1a73e8;
  background: #f5faff;
}
.choice.selected .choice-key, .choice.active .choice-key {
  background: #1a1a1a !important;
  color: white !important;
  border-color: #1a1a1a !important;
}
/* Hover */
.choice:hover { border-color: #1a73e8; }
/* Mark for Review checkbox accent */
.dsat-mark input[type="checkbox"] {
  accent-color: #1a1a1a !important;
}
/* ABC annotate button — black instead of blue */
.dsat-abc {
  background: #1a1a1a !important;
  color: white !important;
}
/* Hover states */
.choice:hover { border-color: #1a1a1a !important; }
.dsat-tool-btn:hover { color: #1a1a1a !important; }

/* Iframe wrapper container */
.dsat-calc-iframe-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
}

/* Dark header stays visible above iframe wrapper */
.dsat-calc-header {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}

/* ===== UNIFIED LAYOUT — single source of truth for widths ===== */
/* All earlier conflicting "FIX" blocks consolidated here.
   Do NOT add another width override below this without removing the old one. */

.main-pane {
  display: block !important;
}

/* Problem container:
   - Calculator CLOSED: centered on screen (max-width 880px, auto margins)
   - Calculator OPEN: slides to the right with small right margin (Bluebook style) */
.dsat-problem-wrap {
  width: auto !important;
  max-width: 880px !important;
  min-width: 0 !important;
  margin: 24px auto 100px auto !important;   /* centered horizontally */
  padding: 0 24px !important;
  box-sizing: border-box;
  border-left: none !important;
  border-right: none !important;
  transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Calculator open: slides right; Bluebook gap = ~16vw between calc edge and "1" badge */
body.calc-open .dsat-problem-wrap {
  max-width: none !important;
  margin-left: 46vw !important;     /* 30vw calc + 16vw gap (matches Bluebook screenshot) */
  margin-right: 20px !important;    /* small right margin */
}

/* Heading bar fills the whole problem-wrap (no negative margin tricks) */
.dsat-q-bar {
  margin: 0 -24px 6px !important;    /* was 10px — tighter gap to graph */
  border-bottom: 1px dashed #c0c4cc;
}

/* Text containers fill the SAME 720px as the problem-wrap — no narrower inner box */
.dsat,
.dsat > .stem,
.dsat > .choices,
.stem,
.stem-body {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  box-sizing: border-box;
}

/* Graph / image stays CENTERED inside the text container */
.stem-body img {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* (Calc panel width consolidated into canonical block above ~line 425.
    Old `width: 30vw !important` removed 2026-05-12.) */

/* Desmos containers (unchanged) */
.desmos-calc-container {
  flex: 1;
  width: 100%;
  height: 100%;
  background: white;
}
.dsat-calc-iframe-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
}
.dsat-calc-iframe-wrap iframe {
  position: absolute !important;
  top: -45px !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% + 95px) !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   🔒 LOCKED TEMPLATE — Grid-in (Student-produced response) split layout
   ───────────────────────────────────────────────────────────────────
   Behavior:
   - Inactive by default → directions panel + splitter both hidden
   - When body has class `grid-in-active` → left directions panel visible,
     vertical splitter visible & draggable, both panels scroll vertically
   - Non-grid-in problems see ZERO visual change (no class = no effect)
   ═══════════════════════════════════════════════════════════════════ */

.dsat-directions-panel,
.dsat-splitter {
  display: none;
}

body.grid-in-active .body-grid {
  display: flex !important;
  flex-direction: row !important;
  height: calc(100vh - 48px - 31px) !important;   /* viewport - header - banner */
  overflow: hidden !important;
}

body.grid-in-active .dsat-directions-panel {
  display: block;
  flex: 0 0 var(--directions-width, 42%);
  min-width: 280px;
  max-width: 70vw;
  background: #f7f7f8;
  border-right: 1px solid #d0d4dc;
  overflow-y: auto;
  overflow-x: auto;
}

body.grid-in-active .dsat-splitter {
  display: block;
  flex: 0 0 6px;
  background: #d0d4dc;
  cursor: col-resize;
  position: relative;
  transition: background 0.12s;
}
body.grid-in-active .dsat-splitter:hover,
body.grid-in-active .dsat-splitter.dragging {
  background: #1a73e8;
}
/* Splitter grip dots (visual affordance) */
body.grid-in-active .dsat-splitter::before {
  content: "⋮";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
}

body.grid-in-active .main-pane {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  min-width: 320px;
}

/* Directions panel content — Source Serif 4 to match stem body font (Bluebook-style) */
.dsat-directions-inner {
  padding: 24px 32px;
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Cambria, Georgia, serif;
  color: #1a1a1a;
  line-height: 1.5;
}
.dsat-directions-title {
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Cambria, Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.dsat-directions-list {
  list-style: disc;
  padding-left: 22px;
  font-size: 15px;
  margin: 0 0 24px;
}
.dsat-directions-list li {
  margin-bottom: 10px;
}
.dsat-directions-examples-label {
  font-size: 14px;
  font-weight: 700;
  margin: 16px 0 8px;
  text-align: center;
}
.dsat-directions-examples {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 auto;
  background: white;
}
.dsat-directions-examples th,
.dsat-directions-examples td {
  border: 1px solid #c0c4cc;
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
}
.dsat-directions-examples th {
  background: #f1f3f6;
  font-family: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  font-weight: 600;
}

/* Grid-in answer input + preview (Bluebook style) */
.grid-in {
  display: none;
  margin-top: 16px;
}
.dsat-grid-input {
  display: block;
  width: 240px;
  padding: 8px 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: #1a1a1a;
  background: transparent;
  border: 1.5px solid #c0c4cc;
  border-radius: 4px;
  outline: none;
}
.dsat-grid-input:focus {
  border-color: #1a73e8;
}
.dsat-grid-preview-label {
  margin-top: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}
.dsat-grid-preview {
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #1a1a1a;
  min-height: 28px;
}

/* 🔒 LOCKED — When calculator opens on a grid-in problem, hide directions panel
   so the calc-open layout works correctly (no overlap with directions). */
body.grid-in-active.calc-open .dsat-directions-panel,
body.grid-in-active.calc-open .dsat-splitter {
  display: none !important;
}
body.grid-in-active.calc-open .body-grid {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
body.grid-in-active.calc-open .main-pane {
  flex: none;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════
   🔒 LOCKED — Calculator behavior split by problem type
   ───────────────────────────────────────────────────────────────────
   - Multiple choice (객관식): Calculator DOCKED on left, problem slides right
     (original Bluebook MC behavior — kept by NOT overriding default rules)
   - Grid-in (주관식): Calculator FLOATING window, problem stays in place
     (so the left-side directions panel + splitter remain visible)
   ═══════════════════════════════════════════════════════════════════ */

/* Grid-in only: floating calculator window (draggable by header).
   ⚠ NO `!important` on `top` / `left` — drag JS sets inline style and
   `!important` would block it. Other props keep `!important` to override
   the docked-MC defaults from the canonical block. */
body.grid-in-active .dsat-calc-panel {
  position: fixed !important;
  top: 80px;
  left: 32px;
  bottom: auto !important;
  right: auto !important;
  width: 420px !important;
  height: 560px !important;
  border: 1px solid #c0c4cc !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  z-index: 1000 !important;
}
body.grid-in-active .dsat-calc-panel.expanded {
  top: 32px;
  left: 32px;
  width: calc(100vw - 64px) !important;
  height: calc(100vh - 64px - 48px) !important;
}
.dsat-calc-header {
  cursor: move;   /* drag-affordance — calc is draggable in any mode */
}
/* Grid-in: problem-wrap fills the right panel (heading flush + full-width like Bluebook) */
body.grid-in-active .dsat-problem-wrap {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 32px !important;
}
/* Heading bar in grid-in extends edge-to-edge of main-pane,
   AND sticks to the top of main-pane (not viewport — top:0 since main-pane is its own scroll container) */
body.grid-in-active .dsat-q-bar {
  margin: 0 -32px 10px !important;
  top: 0 !important;
  position: sticky !important;
}
/* Calculator floating, problem stays as above */
body.grid-in-active.calc-open .dsat-problem-wrap {
  max-width: none !important;
  margin: 0 !important;
}
/* Grid-in: directions panel + splitter remain visible (calc floats above them) */
body.grid-in-active.calc-open .dsat-directions-panel,
body.grid-in-active.calc-open .dsat-splitter {
  display: block !important;
}
body.grid-in-active.calc-open .body-grid {
  display: flex !important;
  height: calc(100vh - 48px - 31px) !important;
  overflow: hidden !important;
}
body.grid-in-active.calc-open .main-pane {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

/* Home button — return to landing page (chapter index).
   Sized to match the section title beside it (Bluebook-style header). */
.dsat-home-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  text-decoration: none;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  margin-right: 6px;
}
.dsat-home-btn:hover { background: rgba(0, 0, 0, 0.06); color: #1a73e8; }

/* 🔒 LOCKED TEMPLATE — All tables in stem are center-aligned (Bluebook pattern) */
.stem-body table th,
.stem-body table td {
  text-align: center !important;
  vertical-align: middle !important;
}
/* Exception: cells with explicit inline text-align follow the inline value
   (e.g., Roman numeral list tables Q37/Q41/Q45 use text-align:left). */
.stem-body table td[style*="text-align:left"] {
  text-align: left !important;
}
.stem-body table td[style*="text-align: left"] {
  text-align: left !important;
}
.stem-body table td[style*="text-align:right"] {
  text-align: right !important;
}
.stem-body table td[style*="vertical-align:top"] {
  vertical-align: top !important;
}

/* ═══════════════════════════════════════════════════════════════════
   🔒 LOCKED — Question Navigator Popup (Bluebook style)
   ═══════════════════════════════════════════════════════════════════ */
.dsat-footer-center { position: relative; }
.dsat-q-nav {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #c0c4cc;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  width: 580px;
  max-width: 92vw;
  z-index: 1100;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dsat-q-nav::after {
  /* down-arrow tail pointing to button */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}
.dsat-q-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e8ec;
}
.dsat-q-nav-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.dsat-q-nav-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #6a7280;
  padding: 4px 8px;
  border-radius: 6px;
}
.dsat-q-nav-close:hover { background: #f1f3f6; color: #1a1a1a; }
.dsat-q-nav-legend {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid #e5e8ec;
  font-size: 11px;
  color: #4a5568;
  flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.leg-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.leg-current { background: #1a73e8; }
.leg-answered { background: #2c2f3a; }
.leg-marked { background: white; border: 2px solid #d97706; }
.leg-unanswered { background: white; border: 1.5px dashed #6a7280; }
.dsat-q-nav-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.q-nav-btn {
  aspect-ratio: 1;
  background: white;
  border: 1.5px dashed #6a7280;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition: transform 0.08s, background 0.08s;
  position: relative;
}
.q-nav-btn:hover { transform: scale(1.08); }
.q-nav-btn.answered {
  background: #2c2f3a;
  color: white;
  border: 1.5px solid #2c2f3a;
}
.q-nav-btn.current {
  background: #1a73e8 !important;
  color: white !important;
  border: 1.5px solid #1a73e8 !important;
}
.q-nav-btn.marked::after {
  content: "🔖";
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 11px;
  filter: hue-rotate(20deg);
}

/* Fraction legibility: handled at render time by katex-dfrac.js, which remaps
   inline \frac → \dfrac so numerator/denominator render at full (textstyle) size
   instead of scriptstyle (~0.7×, which looked too small against body text). Done
   in JS, not CSS, because multiplicative CSS scaling of .mfrac produced
   inconsistent sizes (15–24px depending on KaTeX nesting) and clipped some
   answer choices. \dfrac is deterministic and never overflows the choice box. */