/* =========================================================
   evaluating-ai — page-specific styles  →  assets/css/evaluating.css
   Global styles live in assets/css/main.css
   Reused from main.css: .page-header / .page-title / .page-desc / .page-eyebrow,
   .section-header / .section-title / .section-desc, .callout
   ========================================================= */

.eval-wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.eval-section + .eval-section {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border);
}


/* ── §1 Annotated transcript ───────────────────────────
   Renders only when the page supplies a real exchange. */
.transcript {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  padding: 1.75rem;
}
.transcript-setup {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0.4rem;
}
.transcript-model {
  font-family: var(--font-code);
  font-size: 0.65rem;
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.transcript-turn + .transcript-turn {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
/* Same small-label floor as .term-row-label. §1 ships hidden, so this is not yet on
   the page — it is raised here so it does not arrive carrying the fault. */
.transcript-speaker {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}
.transcript-text {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.75;
  text-wrap: pretty;
}

/* Annotations sit under the turn rather than inline: pinning a marker to a span of
   prose breaks the moment the text reflows, and a list reads correctly aloud. */
.annotations {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.annotation {
  border-left: 3px solid var(--pink);
  background: var(--pink-glow);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 1rem;
}
.annotation-quote {
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.35rem;
}
.annotation-quote::before { content: "\201C"; }
.annotation-quote::after  { content: "\201D"; }
.annotation-term {
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--pink-text);
  margin-bottom: 0.2rem;
}
.annotation-note {
  font-size: 0.76rem;
  color: var(--text-2);
  line-height: 1.65;
}


/* ── §2 The four failure words ─────────────────────────
   One column: these are read, not compared side by side, and each carries enough prose
   that a two-up grid would just make the measure too short. */
.terms {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.term-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  padding: 1.6rem 1.75rem;
  scroll-margin-top: 6rem;
}
.term-name {
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--heading);
}
.term-aka {
  font-family: var(--font-code);
  font-size: 0.65rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
.term-plain {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  padding-bottom: 1rem;
  text-wrap: pretty;
}
.term-row {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-top: 0.1rem;
}
.term-row p {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.7;
  text-wrap: pretty;
}
/* A visual label carrying a real heading level, so the outline is honest (WCAG 1.3.1)
   without the serif from the global h1-h3 rule leaking in. At the 0.65rem small-label
   floor: 0.56rem measured 8.96px against a default 16px root, well under the 10px
   very-small-text threshold, and there are eight of these on the page. */
.term-row-label {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.35rem;
}
.term-row--test .term-row-label { color: var(--teal-text); }


/* ── §3 Measurement vocabulary ─────────────────────────
   A real <dl>: term and definition is exactly what this is, and assistive tech pairs
   them without any ARIA. */
.glossary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}
.glossary-item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
}
.glossary-item + .glossary-item { border-top: 1px solid var(--border); }
.glossary-term {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.4;
}
.glossary-body {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
  text-wrap: pretty;
}


/* §4 The quadrant map lives in assets/css/quadmap.css — shared with the home page. */


/* ── §5 Closing ────────────────────────────────────────── */
/* Full column width, like the cards and the glossary above it — a 42rem cap here left
   the closing noticeably narrower than every section it follows. */
.closing-body p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.8;
  text-wrap: pretty;
}
.closing-body p + p { margin-top: 1rem; }
.closing-note {
  margin-top: 1.75rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem !important;
  color: var(--text-3) !important;
}


/* ── Narrow ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .eval-wrap { padding: 2rem 1.25rem 3rem; }
  .eval-section + .eval-section { margin-top: 3rem; padding-top: 2.5rem; }

  .transcript  { padding: 1.25rem; }
  .term-card   { padding: 1.25rem 1.35rem; }

  /* Term above definition, rather than a 12rem column that would leave the definition
     a four-word measure. */
  .glossary-item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}