/* Distributed Systems topic styling. */

.lesson-card {
  display: block; padding: 1.2rem 1.4rem;
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.lesson-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.lesson-card .num {
  position: absolute; top: -10px; left: -10px;
  background: var(--accent); color: white;
  font-family: var(--font-display); font-size: 0.9rem;
  width: 32px; height: 32px;
  border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg);
}
.lesson-card h3 { margin: 0 0 0.3em; font-size: 1.3rem; }
.lesson-card .blurb { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; }

/* node graph primitives */
.ds-node { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.ds-node.leader { fill: var(--accent-soft); stroke: var(--accent); }
.ds-node.follower { fill: #cfe5ff; }
.ds-node.candidate { fill: #ffe9b3; }
.ds-node.dead { fill: #ddd; stroke: #999; stroke-dasharray: 4 3; }
.ds-node.coordinator { fill: #c8f0c8; }
.ds-node.participant { fill: #e6d6ff; }

.ds-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 1px; fill: var(--ink); }
.ds-sub { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-soft); }
.ds-link { stroke: var(--ink-soft); stroke-width: 1.5; }
.ds-link.lit { stroke: var(--accent); stroke-width: 2.5; }