/* teoria-page.css — styles for the STATIC generated guide + question pages
 * (teoria/learn/*.html, teoria/question/*.html). Generated by
 * scripts/teoria-build-pages.py — edit the template there, not here.
 * Consumes only booklet.css design tokens; adds nothing global. */

/* ── Guide tables ─────────────────────────────────────────────────────────── */
.gp-tablewrap { overflow-x: auto; margin: 18px 0 22px; -webkit-overflow-scrolling: touch; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 320px; }
.gp-table caption {
  caption-side: top; text-align: right; font-family: var(--mono);
  font-size: 12px; color: var(--ink-3); margin-bottom: 8px; line-height: 1.6;
}
.gp-table th, .gp-table td {
  text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: top; line-height: 1.55;
}
.gp-table thead th {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-2); border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.gp-table tbody tr:last-child td { border-bottom: none; }
.gp-table tbody td:first-child { font-weight: 700; color: var(--ink); }

/* ── Guide "traps" block ──────────────────────────────────────────────────── */
.gp-traps { display: grid; gap: 12px; margin: 8px 0 24px; }
.gp-trap {
  border: 1.5px solid var(--rule); border-inline-start: 3px solid var(--wrong);
  border-radius: 9px; padding: 15px 18px; background: var(--paper-2);
}
.gp-trap-q { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.gp-trap-why, .gp-trap-fix { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.gp-trap-fix { color: var(--ink); }
.gp-trap-fix b, .gp-trap-why b { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }

/* ── Question page ────────────────────────────────────────────────────────── */
.qp-stem { font-family: var(--serif); font-weight: 900; font-size: clamp(22px,3.2vw,30px); line-height: 1.28; margin: 6px 0 20px; }
.qp-opts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.qp-opt {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--rule); border-radius: 9px; padding: 13px 16px;
  background: var(--sheet); font-size: 16px; line-height: 1.55;
}
.qp-opt.correct {
  border-color: var(--correct); border-width: 2px;
  background: var(--correct-bg, color-mix(in srgb, var(--correct) 9%, var(--sheet)));
}
.qp-let {
  font-family: var(--mono); font-size: 12px; font-weight: 700; flex-shrink: 0;
  width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); margin-top: 1px;
}
.qp-opt.correct .qp-let { border-color: var(--correct); color: var(--correct); }
.qp-txt { flex: 1; }
.qp-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; flex-shrink: 0;
  color: var(--correct); border: 1px solid var(--correct); border-radius: 99px;
  padding: 2px 9px; margin-inline-start: auto; white-space: nowrap; align-self: center;
}

/* ── Prev / next ──────────────────────────────────────────────────────────── */
.qp-nav {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 16px;
}
.qp-nav a {
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  text-decoration: none; border: 1.5px solid var(--rule); border-radius: 8px;
  padding: 9px 16px; transition: .14s;
}
.qp-nav a:hover { border-color: var(--c); color: var(--ink); }

[data-theme="night"] .tq-fig img { filter: brightness(.92); }