/* ACTAP1 S11a-U2: ACT passage-set layouts + AP stimulus layout. ex- prefixed, token-built.
   .opt / .opt.sel / .optletter / .opttext come from styles.css and are not redefined here. */

.ex-set{background:var(--card,#fff);border:1px solid var(--line,#e3e9f2);border-radius:var(--radius,14px);
  box-shadow:var(--shadow,none);padding:18px;margin-bottom:18px;color:var(--ink,#1c2431)}

.ex-set-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ex-title{margin:0;font-size:18px}

/* One column by default; two columns from 900px up. */
.ex-split{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:900px){
  .ex-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  /* FIXD33 A2: pane sticks under the sticky run bar (--ex-bar-h is measured by exam_app.js) and fills the viewport. */
  .ex-split{--ex-pane-top:calc(var(--top-h,56px) + var(--ex-runbar-h,64px) + 12px)}
  .ex-passage,.ex-passage-col,.ex-stimulus{position:sticky;top:var(--ex-pane-top);
    max-height:calc(100vh - var(--ex-pane-top) - 16px);overflow:auto}
  .ex-passage-col .ex-passage{position:static;max-height:none;overflow:visible}
}

.ex-passage,.ex-passage-col,.ex-stimulus{border:1px solid var(--line,#e3e9f2);border-radius:12px;
  padding:14px 16px;background:var(--card,#fff);font-family:var(--font-body,Georgia,serif);line-height:1.7}
.ex-passage-col{display:flex;flex-direction:column;gap:14px}
.ex-passage-col .ex-passage{border:0;padding:0;border-radius:0}
.ex-passage-label{margin:0 0 6px;font-size:14px;color:var(--muted,#5c6b7f);text-transform:uppercase;letter-spacing:.04em}
.ex-passage-b{border-top:1px dashed var(--line,#e3e9f2);padding-top:12px}
.ex-p{margin:0 0 12px}
.ex-p:last-child{margin-bottom:0}

/* Underlined portion with its small boxed question number. */
.ex-ul{text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ex-ul:hover{background:var(--bg,#f4f7fb)}
.ex-ul.ex-ul-active{background:var(--accent,#ffe9a8);color:var(--ink,#1c2431);border-radius:3px}
.ex-ulnum{display:inline-block;margin-right:3px;padding:0 4px;border:1px solid var(--ink,#1c2431);border-radius:3px;
  font-size:11px;font-weight:700;line-height:1.4;text-decoration:none;vertical-align:baseline}

.ex-figure{margin:0;padding:10px;border:1px solid var(--line,#e3e9f2);border-radius:10px;background:var(--card,#fff);overflow:auto}
.ex-figure-body{max-width:100%}
.ex-caption{margin-top:8px;font-size:13px;color:var(--muted,#5c6b7f)}

.ex-stems{display:flex;flex-direction:column;gap:14px}
.ex-q{border:1px solid var(--line,#e3e9f2);border-radius:12px;padding:12px 14px;background:var(--card,#fff)}
.ex-qhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ex-qnum{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;
  border-radius:999px;background:var(--brand,#2f6df0);color:#fff;font-weight:700;font-size:14px}
.ex-flag{margin-left:auto;padding:5px 12px;font-size:13px;background:var(--bg,#f4f7fb);color:var(--brand-dk,#1f52c0);
  border:1px solid var(--line,#e3e9f2)}
.ex-flag-on{background:var(--warn,#e0922f);color:var(--ink,#1c2431)}
.ex-stem{margin-bottom:10px;font-family:var(--font-body,Georgia,serif);line-height:1.6}
.ex-hint{margin:-4px 0 8px;font-size:13px;font-style:italic;color:var(--muted,#5c6b7f)}
.ex-opts{display:block}
.ex-opt{display:flex;align-items:flex-start;gap:12px}
/* FIXD36 C1 test-day tools: toolbar state, line reader band, magnifier lens, answer mask, highlight. */
.ex-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ex-tool-on{background:var(--brand,#2f6df0);color:#fff;border-color:var(--brand,#2f6df0)}
.ex-linereader{position:fixed;left:0;right:0;height:28px;pointer-events:none;z-index:900;
  background:rgba(255,226,89,.3);border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.ex-magnifier{position:fixed;box-sizing:border-box;width:180px;height:180px;padding:10px;overflow:hidden;pointer-events:none;z-index:901;
  background:#fff;border:2px solid var(--brand,#2f6df0);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:30px;line-height:1.25;color:var(--ink,#1c2431);text-align:center;display:flex;align-items:center;justify-content:center}
.ex-opt.ex-masked{opacity:.45}
.ex-opt.ex-masked .optletter,.ex-opt.ex-masked .opttext{text-decoration:line-through}
mark.ex-hl{background:#fff0a6;color:inherit;border-radius:2px;padding:0 1px}
/* FIXD36 C2 ACT text size: same steps as the SAT runner (qfont-2 stem 18px, passage 18px, option 17px; qfont-3 stem 21px, passage 20px, option 19px). */
.ex-font-ctl{display:inline-flex;gap:2px;align-items:center}
.ex-font-btn{min-width:32px;font-weight:700}
.ex-runner.qfont-2 .ex-stem{font-size:18px}
.ex-runner.qfont-2 .ex-passage{font-size:18px}
.ex-runner.qfont-2 .opt{font-size:17px}
.ex-runner.qfont-3 .ex-stem{font-size:21px}
.ex-runner.qfont-3 .ex-passage{font-size:20px}
.ex-runner.qfont-3 .opt{font-size:19px}
.ex-opt:focus-visible,.ex-flag:focus-visible,.ex-ul:focus-visible{outline:3px solid var(--brand,#2f6df0);outline-offset:2px}
.ex-multi .optletter{border-radius:6px}

.ex-diff{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid var(--line,#e3e9f2);
  background:var(--bg,#f4f7fb);color:var(--muted,#5c6b7f);font-size:12px;font-weight:700}

.ex-sample{display:inline-block;padding:3px 10px;border-radius:6px;border:2px dashed var(--warn,#e0922f);
  background:var(--bg,#f4f7fb);color:var(--ink,#1c2431);font-size:12px;font-weight:800;letter-spacing:.08em}

/* ACTHELP1: Show answer button, panel and the correct / wrong marks. Text stays on its own fill. */
.ex-help-btn{margin:0 0 10px;padding:6px 14px;font-size:13px;background:var(--bg,#f4f7fb);color:var(--brand-dk,#1f52c0);border:1px solid var(--brand,#2f6df0)}
.ex-help-btn:hover,.ex-help-btn:active{background:#e2ebfb;color:var(--brand-dk,#1f52c0)}   /* the global .btn:hover paints it navy, so the label vanished on hover (W1 walk) */
.ex-help-btn:focus-visible{outline:3px solid var(--brand,#2f6df0);outline-offset:2px}
.ex-help-panel{margin:0 0 12px;padding:10px 14px;border:1px solid var(--brand,#2f6df0);border-left-width:5px;border-radius:10px;background:var(--bg,#f4f7fb);color:var(--ink,#1c2431)}
.ex-help-panel[hidden]{display:none}
.ex-help-panel p{margin:0 0 8px}
.ex-help-steps{margin:0;padding-left:20px}
.ex-opts .opt.correct{background:var(--bg,#f4f7fb);color:var(--ink,#1c2431);border:2px solid var(--brand,#2f6df0)}
.ex-opts .opt.correct .opttext::after{content:" (correct answer)";font-weight:700}
.ex-opts .opt.wrong{background:var(--bg,#f4f7fb);color:var(--ink,#1c2431);border:2px dashed var(--accent,#ffe9a8)}
.ex-opts .opt.wrong .opttext::after{content:" (your answer)";font-weight:700}
@media (max-width:899px){
  .ex-help-btn{display:block;width:100%;margin-top:4px}
}

/* ASTD3 FU: loose sentence numbers (14dc2914) and explanation text */
.ex-sn { font-size: .75em; font-weight: 700; vertical-align: super; margin-right: 1px; }