/* callouts.css — Shared callout-component styling.
 *
 * All callout components render the same .callout wrapper; semantic
 * variants (.callout-skill, .callout-case, etc.) override the bar color
 * and background tint. Palette comes from tokens.css; dark mode needs
 * no overrides because everything references the --warm-*-tint tokens
 * which re-compute from --paper.
 */

.callout {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-left: var(--border-bar) solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.callout-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  font-style: normal;
  color: inherit;
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* Body wrapper: collapse vertical margin on first/last children so the
 * callout has consistent internal padding regardless of content. */
.callout-body > *:first-child { margin-top: 0; }
.callout-body > *:last-child  { margin-bottom: 0; }

/* ===== Variant palettes ===== */
.callout-skill {   /* practical how-to (green / tip) */
  border-left-color: var(--callout-tip);
  background: var(--warm-green-tint);
}

.callout-case {    /* concrete anecdote (blue / info) */
  border-left-color: var(--callout-info);
  background: var(--warm-blue-tint);
}

.callout-concept { /* durable vocabulary (plum / authority) */
  border-left-color: var(--callout-official);
  background: var(--warm-plum-tint);
}

.callout-key {     /* memorize this (blue, thicker bar) */
  border-left-color: var(--callout-info);
  background: var(--warm-blue-tint);
  border-left-width: calc(var(--border-bar) * 1.5);
}

.callout-try {     /* practice exercise (plum + rose blend) */
  border-left-color: color-mix(in srgb, var(--warm-plum) 60%, var(--warm-rose));
  background: color-mix(in srgb, var(--warm-plum-tint) 50%, var(--warm-rose-tint));
}

.callout-recovery {/* escape route from anti-pattern (rose / warning) */
  border-left-color: var(--callout-warn);
  background: var(--warm-rose-tint);
}

/* Recovery has a structured layout: symptom row + escape body. */
.callout-recovery .recovery-symptom {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.callout-recovery .recovery-symptom strong {
  color: var(--color-text);
}

/* ===== Comparative callouts (Convergence / Divergence) =====
 * Same gold palette (insight), different border style to signal
 * "stable signal" (solid) vs "open design space" (dashed). Both surface
 * in the Evolution cornerstone of every chapter, per the Koller-Friedman
 * decomposition. */
.callout-convergence {
  border-left: var(--border-bar) solid var(--callout-insight);
  background: var(--warm-gold-tint);
}
.callout-divergence {
  border-left: var(--border-bar) dashed var(--callout-insight);
  background: var(--warm-gold-tint);
}

/* Tool badges rendered inline in the Convergence title */
.callout-convergence .tool-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: var(--space-2);
}
.tool-badge {
  display: inline-block;
  padding: 0.05em 0.45em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  letter-spacing: 0;
}

/* Divergence axis label */
.callout-divergence .divergence-axis {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ===== Academic-profile callout variants (Q3 — coexist with tools variants) =====
 * Maps the 10 academic callouts (NoteBox/ExampleBox/DynConnect/InsightBox/
 * WarnBox/CounterBox/TipBox/OpenQuestion/PaperBox/ResultBox) to Paul Tol
 * semantic colors. Each has a default-title prop in the component; CSS
 * just handles bar color + background tint.
 *
 * Blue family — neutral info, examples, dynamical-systems bridge */
.callout-note,
.callout-example,
.callout-dynconnect {
  border-left-color: var(--callout-info);
  background: var(--warm-blue-tint);
}

/* Rose family — alerts, counter-evidence */
.callout-warn,
.callout-counter {
  border-left-color: var(--callout-warn);
  background: var(--warm-rose-tint);
}

/* Green family — practical hints, experimental results */
.callout-tip,
.callout-result {
  border-left-color: var(--callout-tip);
  background: var(--warm-green-tint);
}

/* Plum — authoritative open questions */
.callout-openquestion {
  border-left-color: var(--callout-official);
  background: var(--warm-plum-tint);
}

/* Gold — surprising insights */
.callout-insight {
  border-left-color: var(--callout-insight);
  background: var(--warm-gold-tint);
}

/* Gray dashed — restated paper claims (external source) */
.callout-paper {
  border-left-color: var(--color-border);
  border-left-style: dashed;
  background: var(--color-bg-subtle);
}

/* Crimson — Pitfall (v4.1.0, #58). Distinct from warn-rose: deeper, more
 * saturated. Used for "common mistake" / retrospective error patterns. */
.callout-pitfall {
  border-left-color: var(--callout-pitfall);
  background: var(--warm-crimson-tint);
}

/* Plum-dashed — WorkedExample (v4.1.0, #57). Reuses callout-official
 * (plum) bar; <details>/<summary> chrome is plain — no extra structure. */
.callout-worked {
  border-left-color: var(--callout-worked);
  background: var(--warm-plum-tint);
}
.callout-worked summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.callout-worked summary::-webkit-details-marker {
  display: none;
}
.callout-worked .callout-chip {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-2);
  border: 1px solid var(--callout-worked);
  border-radius: var(--radius-sm);
  /* v4.26.0 (#80, a11y): chip TEXT uses the high-contrast heading color (the
   * accent stays as the border) — the accent as small text failed WCAG-AA 4.5:1. */
  color: var(--color-heading);
}

/* Gold — YouWillLearn (v4.1.0, #59). Reuses callout-insight (gold) hue;
 * "Before you start" prereq sub-block sits above the title in muted style. */
.callout-learn {
  border-left-color: var(--callout-learn);
  background: var(--warm-gold-tint);
}
.callout-learn .callout-prereq {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.callout-learn .callout-prereq-label {
  color: var(--color-text);
}

/* Teal — Diagnostic (#110). A blue+green blend held distinct from the plum
 * Exercise/Practice and the warm pedagogy callouts. Pre-reading DIKTA
 * self-check; title + "Diagnostic" chip in a header row, an optional answer
 * key behind a native <details> reveal. */
.callout-diagnostic {
  border-left-color: var(--callout-diagnostic);
  background: color-mix(in srgb, var(--warm-blue-tint) 50%, var(--warm-green-tint));
}
.callout-diagnostic-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.callout-diagnostic-header .callout-title {
  margin-bottom: 0;
}
.callout-diagnostic .callout-chip {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-2);
  border: 1px solid var(--callout-diagnostic);
  border-radius: var(--radius-sm);
  color: var(--color-heading);   /* a11y: accent as small text failed 4.5:1 (border keeps the hue) */
}
.callout-diagnostic .callout-routing {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0;
}
.callout-diagnostic-answers {
  margin-top: var(--space-3);
}
.callout-diagnostic-answers > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);   /* a11y: teal accent as text failed 4.5:1 */
}

/* PartReview (#111) — Part-level interleaved exercise-review aggregation.
 * A framed section aggregator (sibling to .exercise-solutions), not a
 * left-bar callout — it collects a Part's <Exercise> items in one place. */
.part-review {
  margin: var(--space-8) 0 var(--space-6) 0;
  padding: var(--space-5) var(--space-5) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.part-review-title {
  margin: 0 0 var(--space-2) 0;
}
.part-review-summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.part-review-empty {
  color: var(--color-text-muted);
}
.part-review-chapter {
  margin-block: var(--space-4);
}
.part-review-chapter-title {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2) 0;
}
.part-review-list {
  margin: 0;
  padding-left: var(--space-5);
}
.part-review-item {
  margin-block: var(--space-2);
}
.part-review-item-id {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

/* ===== v4.3.0 book-genre family =====================================
 * Tip / TipsCard (Pragmatic Programmer precedent, #70)
 * Exercise / Practice / Solution / ExerciseSolutions (CS:APP, #71)
 */

/* Tip (numbered, #70). Gold border + tip-number badge + title row. */
.callout-tip-numbered {
  border-left-color: var(--callout-learn);
  background: var(--warm-gold-tint);
}
.callout-tip-numbered .callout-tip-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.callout-tip-numbered .callout-tip-number {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--callout-learn);
  padding: 0 var(--space-2);
  border: 1px solid var(--callout-learn);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.callout-tip-numbered .callout-tip-title {
  font-weight: 600;
}

/* TipsCard (print-friendly tips card, #70). */
.tips-card {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  page-break-inside: avoid;
}
.tips-card-title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-2xl);
}
.tips-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tips-card-item {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.tips-card-link {
  display: flex;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}
.tips-card-number {
  font-weight: 700;
  color: var(--callout-learn);
  min-width: 2.5em;
}
.tips-card-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Exercise (#71). Light treatment for inline placement. */
.exercise {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-bar) solid var(--color-border);
  background: var(--color-bg-subtle);
}
.exercise-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Practice (#71). Diamond-marker difficulty + label. */
.practice {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border-left: var(--border-bar) solid var(--callout-official);
  background: var(--warm-plum-tint);
}
.practice-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.practice-label {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.practice-difficulty {
  font-family: var(--font-code);
  color: var(--callout-official);
}

/* Solution (#71). Inside ExerciseSolutions wrapper. */
.solution {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--callout-insight);
}
.solution-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.solution-label {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--callout-insight);
}
.solution-backlink {
  font-size: var(--text-xs);
  text-decoration: none;
  color: var(--color-text-muted);
}

/* ExerciseSolutions (#71). Section wrapper at chapter end. */
.exercise-solutions {
  margin: var(--space-12) 0 var(--space-6) 0;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border);
}
.exercise-solutions-heading {
  margin: 0 0 var(--space-5) 0;
}

/* ===== Theorem family (Theorem.astro) =====
 * Plain (theorem/proposition/lemma/corollary): italic body
 * Definition family (definition/example/exercise/remark/proof): upright body
 */
.theorem {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: var(--border-bar) solid var(--callout-official);
}
.theorem-label {
  font-weight: 600;
  font-style: normal;
  display: inline;
  margin-right: 0.4em;
}
.theorem-body {
  display: block;
  font-style: italic;
}
.theorem-body > *:first-child { display: inline; }

.theorem[data-kind="definition"] .theorem-body,
.theorem[data-kind="example"] .theorem-body,
.theorem[data-kind="exercise"] .theorem-body,
.theorem[data-kind="remark"] .theorem-body,
.theorem[data-kind="proof"] .theorem-body {
  font-style: normal;
}

/* ===== Margin notes (MarginNote.astro) — variant: note/warning/tip ===== */
.margin-note {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  border-left: var(--border-bar) solid var(--callout-info);
  background: var(--warm-blue-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.margin-note[data-variant="warning"] {
  border-left-color: var(--callout-warn);
  background: var(--warm-rose-tint);
}
.margin-note[data-variant="tip"] {
  border-left-color: var(--callout-tip);
  background: var(--warm-green-tint);
}
.margin-note-label {
  display: inline-block;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

/* ===== Status badges (StatusBadge.astro) — 3-state public taxonomy ===== */
.status-badge {
  display: inline-block;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.1em 0.55em;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  vertical-align: 0.1em;
}
.status-badge[data-status="published"]   { background: var(--warm-green); }
.status-badge[data-status="draft"]       { background: var(--warm-gold); }
.status-badge[data-status="coming-soon"] { background: var(--color-text-muted); }

/* ===== Figure component (Figure.astro) ===== */
figure.figure {
  margin: var(--space-6) 0;
  text-align: center;
}
figure.figure img,
figure.figure svg {
  max-width: 100%;
  height: auto;
}
figure.figure figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  font-style: italic;
  text-align: left;
}

/* ===== CodeBlock header bar with GitHub link ===== */
.codeblock-frame {
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-code-bg);
}
.codeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.codeblock-header a {
  font-weight: 500;
}
.codeblock-frame pre {
  margin: 0;
  border-radius: 0;
  border: 0;
}

/* ===== Practice tags (Tag.astro) ===== */
.practice-tag {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.75em;
  font-weight: 500;
  padding: 0 0.4em;
  margin: 0 0.1em;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: 0.1em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* a11y (v4.26.0, #80): hue via the border; text uses the body color (accent as
 * small text fails WCAG-AA 4.5:1). */
.practice-tag[data-kind="official"]     { border-color: var(--callout-official); color: var(--color-text); }
.practice-tag[data-kind="convergence"]  { border-color: var(--callout-insight);  color: var(--color-text); }
.practice-tag[data-kind="practitioner"] { border-color: var(--callout-tip);      color: var(--color-text); }