/*
 * Exam figures (src/study/exam_figures.py): Writing Task 1 charts, plans and diagrams, Reading diagrams and
 * flow-charts, Listening plans. Plain exam style: white, black lines, Arial. landing-edu/styles.css forces square
 * corners, which suits the paper look; nothing here needs rounding.
 */
.ex-fig { position: relative; margin: 12px 0 18px; padding: 0; background: #fff; }
.ex-fig-frame { padding: 8px; background: #fff; border: 1px solid #bdbdbd; }
.ex-svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }
.ex-zoom { position: absolute; top: 6px; right: 6px; z-index: 1; min-height: 30px; padding: 4px 10px; background: #fff; color: #111;
  border: 1px solid #111; font: 700 12.5px/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.ex-zoom:hover { background: #111; color: #fff; }
.ex-zoom:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
.ex-cap { margin: 6px 0 0; color: #333; font: 13px/1.4 Arial, Helvetica, sans-serif; }
.ex-zoom-dialog .ex-zoom { display: none; }

/* Flow-chart: boxes and arrows with the answer boxes typed straight into them, like the computer test. */
.ex-flow { max-width: 600px; margin: 12px auto 20px; color: #111; font: 15.5px/1.55 Arial, Helvetica, sans-serif; }
.ex-flow-title { margin: 0 0 12px; font-weight: 700; font-size: 16.5px; text-align: center; }
.ex-flow-body { display: grid; gap: 0; }
.ex-step { padding: 10px 14px; background: #fff; border: 1.5px solid #111; text-align: center; }
.ex-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ex-arrow { position: relative; height: 28px; }
.ex-arrow::before { content: ""; position: absolute; top: 2px; bottom: 9px; left: 50%; border-left: 2px solid #111; }
.ex-arrow::after { content: ""; position: absolute; bottom: 2px; left: calc(50% - 6px); border: 6px solid transparent; border-top: 9px solid #111; border-bottom: 0; }

/* The Listening plan beside its questions. */
.mk-figure-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 24px; align-items: start; }
.mk-figure-split > .ex-fig { margin-top: 0; }
.mk-figure-questions { display: grid; gap: 4px; }

/* Zoom: the drawing full screen, scrollable both ways on a phone. */
.ex-zoom-dialog { width: min(1180px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 0; background: #fff; border: 1px solid #111; }
.ex-zoom-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.ex-zoom-body { max-height: calc(94dvh - 64px); overflow: auto; overscroll-behavior: contain; padding: 10px; }
.ex-zoom-body .ex-fig-frame { border: 0; padding: 0; }
.ex-zoom-body .ex-svg { width: max(100%, 980px); max-width: none; }
.ex-zoom-dialog .cd-btn { display: block; margin: 8px 12px 12px auto; }

@media (max-width: 900px) {
  .mk-figure-split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 560px) {
  .ex-split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ex-flow { font-size: 15px; }
  .ex-fig-frame { padding: 4px; }
  .ex-zoom-body .ex-svg { width: 1060px; }
}
@media print { .ex-zoom { display: none; } }