/* Article step blocks: labels + copy button — shared by docs/*.html */
.step-block { margin: 1.35rem 0; }
.step-block pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
}
.step-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.step-label {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.45rem 0.75rem;
  line-height: 1.4;
  border: none;
  border-radius: 0;
}
.step-label--read {
  background: color-mix(in srgb, #9ca3af 18%, var(--surface));
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.step-block--read .step-header { display: block; border: none; }
.step-block--read .step-label--read { display: block; }
.step-label--copy { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); color: var(--accent, #2563eb); }
.step-label--run { background: color-mix(in srgb, #22c55e 14%, var(--surface)); color: #15803d; }
.step-label--sql { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #b45309; }
[data-theme="dark"] .step-label--run { color: #86efac; }
[data-theme="dark"] .step-label--sql { color: #fcd34d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step-label--run { color: #86efac; }
  :root:not([data-theme="light"]) .step-label--sql { color: #fcd34d; }
}
.step-copy-btn {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 0.85rem;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.step-copy-btn:hover { background: var(--surface-hover, #f0f2f5); color: var(--accent, #2563eb); }
.step-copy-btn.copied { color: #15803d; }
[data-theme="dark"] .step-copy-btn.copied { color: #86efac; }

.howto-legend {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.92rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 2rem;
}
.howto-legend h2 { font-size: 1.15rem; margin: 0 0 0.75rem; font-family: inherit; }
.howto-legend ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.howto-legend li { margin: 0.4rem 0; }
.howto-swatch {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.swatch-read { background: #e5e7eb; color: #374151; }
.swatch-copy { background: #dbeafe; color: #1e40af; }
.swatch-run { background: #dcfce7; color: #166534; }
.swatch-sql { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .swatch-read { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .swatch-copy { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .swatch-run { background: #14532d; color: #86efac; }
[data-theme="dark"] .swatch-sql { background: #78350f; color: #fcd34d; }
.part-goal {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.92rem;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 28%, var(--border));
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 0.75rem 0 1.25rem;
}
.part-goal strong { color: var(--accent, #2563eb); }