/* ── A PROOF question (study_proof.js; Seth 2026-11-02) ──────────────────
   The model proof as a two-column Statement | Reason table. Each row is a
   grid number | statement | reason, so the line number is centred on its row
   whatever the row's height (Seth 2026-11-02). Got it / Missed sits under
   its row; a got row is tinted green, a missed row red. */
.ct-proof { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.ct-proof > .ct-btn { justify-self: start; }   /* Show solution / Show rubric: a button, not a bar */
.ct-pf-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ct-pf-tab {
  padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.9rem;
}
.ct-pf-tab.is-on { border-color: var(--info); color: inherit; background: rgb(var(--info-rgb) / 0.1); }
.ct-pf-tab:disabled { cursor: default; }
.ct-pf-tab:disabled:not(.is-on) { opacity: 0.5; }

.ct-pf-colhead, .ct-pf-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1.8fr) minmax(0, 1fr); column-gap: 0.9rem;
}
.ct-pf-colhead {
  padding: 0 0.6rem 0.35rem; border-bottom: 1px solid var(--border-strong);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ct-pf-lines { list-style: none; margin: 0; padding: 0; }
.ct-pf-line { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); border-radius: 6px; }
.ct-pf-row { align-items: center; }
.ct-pf-num { justify-self: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.ct-pf-stmt { min-width: 0; }
.ct-pf-prose { line-height: 1.5; }   /* a rubric point: prose, inline maths */
.ct-pf-route.is-one-col .ct-pf-colhead, .ct-pf-route.is-one-col .ct-pf-row { grid-template-columns: 2rem minmax(0, 1fr); }
.ct-pf-reason:empty { display: none; }
.ct-pf-stmt .katex-display { margin: 0.2em 0; text-align: left; font-size: 0.9em; }
.ct-pf-stmt .katex-display > .katex { text-align: left; }
.ct-pf-reason { min-width: 0; padding-left: 0.8rem; border-left: 2px solid var(--border); font-size: 0.92rem; }
.ct-pf-reason-name { font-weight: 600; }
.ct-pf-cite { margin-top: 0.2rem; color: var(--muted); }
.ct-pf-why { margin-top: 0.25rem; color: var(--muted); font-size: 0.88rem; }
.ct-pf-line.is-given .ct-pf-reason-name { font-weight: 400; color: var(--muted); }
.ct-pf-line.is-got { background: rgb(var(--ok-rgb) / 0.08); box-shadow: inset 3px 0 0 var(--ok); }
.ct-pf-line.is-miss { background: rgb(var(--danger-rgb) / 0.08); box-shadow: inset 3px 0 0 var(--danger); }

.ct-pf-mark { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.45rem; }
.ct-pf-mk {
  padding: 0.2rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem;
}
.ct-pf-mk[data-v="got"].is-on { border-color: var(--ok); background: rgb(var(--ok-rgb) / 0.22); color: var(--ok); }
.ct-pf-mk[data-v="miss"].is-on { border-color: var(--danger); background: rgb(var(--danger-rgb) / 0.22); color: var(--danger); }
/* For the curious, not a to-do (Seth 2026-11-02): small, muted, right-aligned. */
.ct-pf-lesson { display: block; margin-top: 0.3rem; text-align: right; font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.ct-pf-lesson:hover { color: var(--info); text-decoration: underline; }

.ct-pf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ct-pf-tally { margin-right: auto; color: var(--muted); }
.ct-pf-own { display: grid; gap: 0.6rem; }
.ct-pf-own-q { margin: 0; font-weight: 600; }
.ct-pf-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--info); cursor: pointer; font: inherit; font-size: 0.9rem; }

@media (max-width: 640px) {
  .ct-pf-colhead { display: none; }
  .ct-pf-row { grid-template-columns: 1.6rem minmax(0, 1fr); row-gap: 0.35rem; }
  .ct-pf-num { grid-row: span 2; }
  .ct-pf-reason { grid-column: 2; }
}