/* ─── SOLID letters row (cover slide) ───────────────────────────────────── */
.solid-letters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.solid-letter-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.solid-letter-card .slc-letter {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.solid-letter-card .slc-name {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.slc-s .slc-letter { color: var(--accent-ink); }
.slc-o .slc-letter { color: var(--week1); }
.slc-l .slc-letter { color: var(--week2); }
.slc-i .slc-letter { color: var(--infra); }
.slc-d .slc-letter { color: var(--api); }

/* ─── Diagram grid ───────────────────────────────────────────────────────── */
.solid-diag-grid {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.1rem;
}
@media (min-width: 600px) {
  .solid-diag-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Diagram panels ─────────────────────────────────────────────────────── */
.solid-diag-panel {
  border-radius: 10px;
  border: 1.5px solid;
  padding: 0.75rem 0.85rem 0.85rem;
}
.solid-diag-panel--bad  { border-color: #fca5a5; background: #fff5f5; }
.solid-diag-panel--good { border-color: #86efac; background: #f0fdf4; }

.solid-diag-label {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  margin-bottom: 0.65rem;
}
.solid-diag-panel--bad  .solid-diag-label { background: #fee2e2; color: #b91c1c; }
.solid-diag-panel--good .solid-diag-label { background: #dcfce7; color: #15803d; }

/* ─── Diagram SVG base ───────────────────────────────────────────────────── */
.solid-diag-svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
  overflow: visible;
}

/* Box styles */
.sbox      { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.5; }
.sbox--iface { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 5 3; }
.sbox--bad   { stroke: #fca5a5; }
.sbox--good  { stroke: #86efac; }

/* Text styles */
.stext         { fill: #1a1d26; font-size: 10px; font-family: "Segoe UI", system-ui, sans-serif; }
.stext--iface  { fill: #6d28d9; font-size: 8px; font-style: italic; font-family: "Segoe UI", system-ui, sans-serif; }
.stext--method { fill: #5c6370; font-size: 9px; font-family: ui-monospace, "Cascadia Code", monospace; }
.stext--muted  { fill: #94a3b8; font-size: 8.5px; font-family: "Segoe UI", system-ui, sans-serif; }
.stext--note   { fill: #b91c1c; font-size: 8px; font-family: "Segoe UI", system-ui, sans-serif; }
.stext--ok     { fill: #15803d; font-size: 8px; font-family: "Segoe UI", system-ui, sans-serif; }

/* Divider and arrow */
.sdivider    { stroke: #e2e8f0; stroke-width: 1; }
.sarrow      { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.sarrow--bad  { stroke: #fca5a5; stroke-width: 1.5; fill: none; }
.sarrow--good { stroke: #4ade80; stroke-width: 1.5; fill: none; }
.sarrow--dep  { stroke: #94a3b8; stroke-width: 1.5; fill: none; stroke-dasharray: 4 2; }