/* Writing-test surface for EnglishCBT.
 * Reuses the shared exam chrome (topbar, clock, overlays, toolbtn) from exam.css;
 * this file only styles the prompt/answer panes and the model-answer reveal. */

/* ---------- Pane layout ---------- */
#promptPane { flex: 1 1 46%; border-right: 1px solid var(--line); }
#answerPane { flex: 1 1 54%; }

/* ---------- Prompt pane ---------- */
.wprompt { max-width: 60ch; font-size: 15px; line-height: 1.62; }
.wtask-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.wprompt h2 { font-size: 18px; margin-bottom: 10px; }
.wmeta { background: #f6f8fa; border-left: 3px solid var(--purple); padding: 9px 12px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.55; }
.wtext { margin-bottom: 14px; }
.wtext p { margin: 0 0 12px; }

/* Task 1 visual (chart / table / process / map) */
.wfig { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; margin: 10px 0 6px; }
.wfig svg { width: 100%; height: auto; display: block; }
.wfig table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wfig th, .wfig td { border: 1px solid var(--line); padding: 7px 9px; text-align: center; }
.wfig th { background: var(--chrome); font-size: 12.5px; }
.wfig caption { font-size: 12.5px; color: #555; margin-bottom: 8px; caption-side: top; text-align: left; }
.wfig-title { font-size: 12.5px; color: #555; margin-bottom: 8px; }
.wbul-lead { font-weight: 700; margin: 6px 0 6px; }
.wbullets { margin: 0 0 14px 20px; }
.wbullets li { margin-bottom: 6px; }
.wopen { font-weight: 700; margin-bottom: 4px; }
.wopen-line { font-style: italic; color: #444; margin-bottom: 12px; }

/* ---------- Answer pane ---------- */
.wanswer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wlab { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #555; margin-bottom: 8px; }
.wta {
  flex: 1 1 auto; min-height: 300px; resize: none; width: 100%;
  font-family: Georgia, "Times New Roman", serif; font-size: 15.5px; line-height: 1.7;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.wta:focus { outline: 2px solid var(--purple); outline-offset: 0; border-color: var(--purple); }
.wta:disabled { background: #f6f5f9; color: #555; }
.wcount { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-top: 8px; color: #555; }
.wcount #wmin.under { color: var(--red); font-weight: 700; }
.wcount #wmin.ok { color: var(--green); font-weight: 700; }
.wcount #wc { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Bottom bar: task switch + counts ---------- */
.wtabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wtab {
  border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 700; color: #333; display: inline-flex; gap: 8px; align-items: center;
}
.wtab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wtab .wtc { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.wtab.met .wtc::after { content: " ✓"; color: var(--cyan); }
.wtab.on.met .wtc::after { color: var(--cyan); }
.wspacer { margin-left: auto; font-size: 12px; color: #777; }

/* ---------- Results / model-answer reveal ---------- */
.wresult h2 { font-size: 21px; margin-bottom: 4px; }
.wsub { color: #555; font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.wtaskblock { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; }
.wtaskblock:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.wblockhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.wblockhead h3 { font-size: 16px; }
.wyourwords { font-size: 12.5px; color: #555; }
.wyourwords b.ok { color: var(--green); }
.wyourwords b.no { color: var(--red); }

.wmodel {
  background: #fbfbfd; border: 1px solid var(--line); border-left: 3px solid var(--purple);
  border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 6px 0 12px;
  font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.72;
}
.wmodel .wmtag { font-family: Arial, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.wmodel p { margin: 0 0 11px; }
.wmodel p:last-child { margin-bottom: 0; }
.wmwords { font-family: Arial, sans-serif; font-size: 12px; color: #777; margin-top: 8px; }

.wnotes { margin: 4px 0 8px; }
.wnotes h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 6px; }
.wnotes ul { margin-left: 18px; }
.wnotes li { font-size: 13px; line-height: 1.55; margin-bottom: 4px; color: #444; }

.wcriteria { margin-top: 10px; }
.wcriteria h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 8px; }
.wcrit { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.5; margin-bottom: 7px; }
.wcrit input { margin-top: 3px; }
.wcrit b { color: var(--ink); }

.wbandnote {
  background: #f6f5f9; border-left: 3px solid var(--purple); padding: 10px 12px; border-radius: 0 4px 4px 0;
  font-size: 12.5px; color: #4a4a55; line-height: 1.55; margin-top: 6px;
}

/* keep the answer textarea usable on a phone: one pane at a time */
@media (max-width: 820px) {
  .wprompt, .wanswer { max-width: none; }
  .wta { min-height: 220px; }
  #promptPane, #answerPane { flex: 1 1 auto; border-right: 0; }
  body.show-p #answerPane { display: none; }
  body:not(.show-p) #promptPane { display: none; }
}