/* ─── Lesson 01 specific styles ───────────────────────────────────────────────
   Dialogue block styles — only used in lessons/01-the-chaos-tax.html.
   Linked by lesson 01 in addition to site.css and lesson.css.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Dialogue block ──────────────────────────────────────────────────────── */

.dialogue {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee8d5;
  background: var(--code-bg);
}

.dialogue-header {
  background: #eee8d5;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: #93a1a1;
}

.dialogue pre {
  padding: 0;
  background: var(--surface);
  line-height: 2;
}

.dialogue code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  display: block;
}

/* ─── Dialogue token classes ──────────────────────────────────────────────── */

.d-label { color: #93a1a1; font-style: italic; }
.d-you { color: #268bd2; }
.d-ai { color: #2aa198; }
.d-you-bad { color: #cb4b16; }
.d-comment { color: #93a1a1; font-style: italic; }

/* ─── Dark theme overrides ─────────────────────────── */
html.dark .dialogue { border-color: #1d3d47; }
html.dark .dialogue-header { background: #073642; color: #586e75; }