/* ==========================================================================
   Test / assessment page — layered on top of style.css
   ========================================================================== */

:root {
  --ok: #1f7a4d;
  --ok-bg: #eaf6f0;
  --bad: #b3261e;
  --bad-bg: #fdeeed;
  --key-bg: #fff6e8;
}

/* Khmer script — Noto Sans Khmer needs a little more line height */
.km {
  font-family: 'Noto Sans Khmer', 'Khmer OS', 'Inter', sans-serif;
  line-height: 1.9;
}

.test-intro h1 .degree { vertical-align: baseline; }

.tagline-km {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.6rem;
}

.test-intro .subtagline { margin-bottom: 0; }

.h2-km {
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.5rem;
}

.part-km {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 500;
  margin: -0.75rem 0 1.25rem;
}

.not-scored {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* --- Sitting / participant details ---------------------------------------- */

.callout {
  background: var(--skill-bg);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.callout p { margin-bottom: 0.2rem; }

.sitting {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 0.75rem;
}

.sitting label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem 1.5rem;
  margin-bottom: 1.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-label .km { text-transform: none; letter-spacing: 0; }

.field input[type="text"],
.field input[type="date"] {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  width: 100%;
}

.field input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.inline-choice {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.4rem;
}

.inline-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.instructions-head {
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.instructions {
  list-style: none;
  padding: 0;
  font-size: 0.92rem;
}

.instructions > li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.6rem;
}

.instructions > li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.instructions .km { color: var(--muted); font-size: 0.9rem; }

/* --- Questions ------------------------------------------------------------ */

.questions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.questions > li { display: list-item; }

.q {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
  background: #fff;
  transition: border-color 0.2s;
  page-break-inside: avoid;
}

.q:hover { border-color: #cfd8e2; }

.q-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

/* Question number, taken from the <ol start> value */
.q-head::before {
  content: counter(list-item) ".";
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.5;
}

.q-text { flex: 1; }

.q-text .en {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

.q-text .km {
  font-size: 0.92rem;
  font-weight: 400;
  color: #3d4d61;
  margin-top: 0.15rem;
}

.marks {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--skill-text);
  background: var(--skill-bg);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 0.15rem;
}

/* --- Options -------------------------------------------------------------- */

.options {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.options.tf,
.options.compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.options.tf > li,
.options.compact > li { flex: 0 1 auto; min-width: 9rem; }

.options > li {
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.options > li:hover { background: #fafbfc; border-color: #cfd8e2; }

.options label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.options input[type="radio"] {
  margin-top: 0.35rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.key {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
  background: var(--skill-bg);
  color: var(--skill-text);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.opt { display: block; font-size: 0.93rem; }
.opt .en { display: block; }
.opt .km { display: block; color: #55677d; font-size: 0.88rem; }
.opt .en .km { display: inline; color: inherit; font-size: 0.95em; }

/* --- Matching ------------------------------------------------------------- */

.match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
}

.match-items {
  list-style: none;
  padding: 0;
  counter-reset: mrow;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.match-row {
  counter-increment: mrow;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}

.match-row::before {
  content: counter(mrow) ".";
  font-weight: 600;
  color: var(--muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.match-row .item { flex: 1; font-size: 0.9rem; }
.match-row .item .en { display: block; font-weight: 500; }
.match-row .item .km { display: block; color: #55677d; font-size: 0.85rem; }

.match-row select {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
}

.match-defs {
  list-style: none;
  padding: 0.9rem 1rem;
  margin: 0;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.match-defs > li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* --- Open response -------------------------------------------------------- */

.q.open textarea {
  font: inherit;
  font-size: 0.95rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  resize: vertical;
}

.hand-marked {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.4rem;
}

/* --- Likert table --------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-top: 1rem; }

.likert {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.9rem;
}

.likert th,
.likert td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
  text-align: left;
}

.likert thead th {
  background: var(--skill-bg);
  color: var(--skill-text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.likert thead th:first-child { text-align: left; }

.likert tbody th {
  font-weight: 500;
  color: var(--text);
}

.likert tbody th .en { display: block; }
.likert tbody th .km { display: block; color: #55677d; font-size: 0.85rem; }

.likert td {
  text-align: center;
  width: 3rem;
}

.likert input[type="radio"] { accent-color: var(--primary); }

/* --- Actions & result ----------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn .km { font-weight: 400; font-size: 0.85em; opacity: 0.85; }

.btn:hover { border-color: var(--primary); background: var(--skill-bg); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-quiet { color: var(--muted); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover { background: #fff; border-color: var(--border); }
.btn-primary:disabled:hover { background: var(--primary); border-color: var(--primary); }

/* Locked after a successful submission */
input:disabled,
select:disabled,
textarea:disabled { opacity: 0.75; cursor: default; }

.q:has(input:disabled) { background: #fcfcfd; }

.submit-intro {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.submit-intro .en,
.submit-intro .km { display: block; }

/* Submission feedback */
.status {
  border-left: 4px solid var(--muted);
  border-radius: 0 8px 8px 0;
  background: #fafbfc;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.93rem;
}

.status p + p { margin-top: 0.2rem; }
.status .km { font-size: 0.88rem; opacity: 0.85; }
.status code { font-size: 0.88em; background: #eef1f5; padding: 0.1rem 0.3rem; border-radius: 3px; }

.status-pending { border-left-color: var(--accent); }

.status-ok {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: #14532d;
}

.status-error {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: #7f1d1d;
}

.result {
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: 0 8px 8px 0;
  background: var(--skill-bg);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.score-line { font-size: 1.15rem; color: var(--primary-dark); }
.score-line strong { font-size: 1.4rem; font-family: 'Playfair Display', serif; }
.score-sub { font-size: 0.87rem; color: var(--muted); margin-top: 0.25rem; }

.facilitator {
  border: 1px dashed #c3ccd8;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  background: #fafbfc;
}

.facilitator-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.facilitator-title .km { text-transform: none; letter-spacing: 0; }

.facilitator-line { font-size: 0.95rem; }

.fill {
  display: inline-block;
  min-width: 5rem;
  border-bottom: 1px solid var(--muted);
  text-align: center;
  font-weight: 600;
  color: var(--primary);
}

.fill-sm { color: var(--muted); }

.facilitator-note {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.6rem;
}

/* --- Marking states ------------------------------------------------------- */

.options > li.correct,
.match-row.correct {
  border-color: var(--ok);
  background: var(--ok-bg);
}

.options > li.incorrect,
.match-row.incorrect {
  border-color: var(--bad);
  background: var(--bad-bg);
}

.q.unanswered { border-color: var(--accent); }

.options > li.correct .key { background: var(--ok); color: #fff; }
.options > li.incorrect .key { background: var(--bad); color: #fff; }

.options > li.correct::after,
.match-row.correct::after {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
  padding-right: 0.7rem;
}

.options > li.incorrect::after,
.match-row.incorrect::after {
  content: "✕";
  color: var(--bad);
  font-weight: 700;
  padding-right: 0.7rem;
}

.options > li.correct,
.options > li.incorrect { display: flex; align-items: center; }
.options > li.correct label,
.options > li.incorrect label { flex: 1; }

/* Answer key overlay */
.show-key .options > li.is-key {
  background: var(--key-bg);
  border-color: var(--accent);
}

.show-key .options > li.is-key .key { background: var(--accent); color: #fff; }

.show-key .match-row.is-key::after {
  content: attr(data-key-label);
  font-weight: 700;
  color: var(--accent);
  background: var(--key-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-size: 0.8rem;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 760px) {
  /* Stack the matching question, and put the A–E definitions ABOVE the
     drop-downs — on a phone you must be able to read the options before
     choosing, without scrolling down and back up. */
  .match { display: flex; flex-direction: column; gap: 0.75rem; }
  .match-defs { order: -1; }

  .q-head { flex-wrap: wrap; gap: 0.4rem 0.5rem; }
  .q-text { min-width: 80%; }
  .marks { margin-left: auto; }
  .options.tf > li,
  .options.compact > li { min-width: 100%; }

  /* Bigger tap targets */
  .options label { padding: 0.7rem 0.75rem; }
  .options input[type="radio"] { width: 18px; height: 18px; margin-top: 0.15rem; }
  .match-row select { padding: 0.5rem 0.6rem; font-size: 1rem; }
}

/* Part 6 on a phone: a 6 x 5 grid cannot be used sideways, so each
   statement becomes its own card with the 1–5 choices in a row. */
@media (max-width: 620px) {
  .table-wrap { overflow-x: visible; }
  .likert { min-width: 0; border-collapse: separate; }
  .likert thead { display: none; }
  .likert, .likert tbody, .likert tr, .likert tbody th, .likert td { display: block; }

  .likert tr {
    counter-reset: likert;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.6rem;
  }

  .likert tbody th {
    border: none;
    padding: 0 0 0.6rem;
    font-weight: 500;
  }

  .likert td {
    counter-increment: likert;
    border: none;
    padding: 0;
    width: auto;
  }

  /* The 1–5 choices sit in one row, each with its number restored. */
  .likert tr { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .likert tbody th { flex: 1 0 100%; }

  .likert td {
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 3rem;
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
  }

  .likert td::before {
    content: counter(likert);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
  }

  .likert td:has(input:checked) {
    background: var(--skill-bg);
    border-color: var(--primary);
  }

  .likert input[type="radio"] { width: 18px; height: 18px; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .test-intro {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 1rem !important;
  }

  .test-intro .eyebrow,
  .test-intro .tagline,
  .test-intro .tagline-km,
  .test-intro .subtagline,
  .test-intro h1 { color: #000 !important; text-shadow: none !important; }

  .test-intro::before { display: none; }

  .actions,
  .status,
  .submit-intro,
  .result { display: none !important; }

  .q,
  .likert tr,
  .match { page-break-inside: avoid; }

  section { page-break-after: auto; }

  .marks { background: none; border: 1px solid #999; }

  .options > li,
  .match-row,
  .callout,
  .facilitator { background: #fff !important; }
}