/* ═══════════════════════════════════════════════
   BLOG.CSS — article page styles
   ═══════════════════════════════════════════════ */

/* ── Article lead ── */
.lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 32px;
}

/* ── Table of contents ── */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.toc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 12px;
}
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin-bottom: 6px; }
.toc a { font-size: 14px; color: var(--accent); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ── Method cards ── */
.method-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.method-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.method-card h3 { margin-top: 0; margin-bottom: 10px; }

/* ── Rating row ── */
.rating { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.rating-item { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.rating-item span { color: var(--text); font-weight: 600; }

/* ── Verdict badge ── */
.verdict {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 12px;
}
.verdict-good  { background: #dcfce7; color: #166534; }
.verdict-bad   { background: #fee2e2; color: #991b1b; }
.verdict-mid   { background: #fef3c7; color: #92400e; }

/* ── Warning callout ── */
.warning {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.warning p { margin: 0; color: #92400e; }

/* ── Inline demo code block ── */
.code-demo {
  background: #1e1e1e;
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}
/* VS Code Dark+ token colours for demo */
.c-kw    { color: #569cd6; }
.c-cls   { color: #4ec9b0; }
.c-fn    { color: #dcdcaa; }
.c-str   { color: #ce9178; }
.c-cmt   { color: #6a9955; font-style: italic; }
.c-num   { color: #b5cea8; }
.c-param { color: #9cdcfe; }
.c-bi    { color: #4fc1ff; }
.c-base  { color: #d4d4d4; }

/* ── Colour legend grid ── */
.color-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.color-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Use-case grid ── */
.use-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
@media (max-width: 600px) { .use-cases { grid-template-columns: 1fr; } }
.use-case {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.use-case h3 { font-size: 14px; margin: 0 0 5px; }
.use-case p  { font-size: 13px; margin: 0; }