/* Backend-topic-specific styling tweaks. */

.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; }

/* HTTP method pills used across lessons */
.method {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  letter-spacing: 0.04em;
  color: white;
}
.method.get { background: #2a8a3e; }
.method.post { background: #1c6dd0; }
.method.put { background: #b07b1a; }
.method.patch { background: #b0631a; }
.method.delete { background: var(--accent); }
.method.head, .method.options { background: var(--ink-soft); }

/* HTTP status color classes */
.status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}
.status.s2 { background: #d6f5d6; }
.status.s3 { background: #cfe5ff; }
.status.s4 { background: #ffe9b3; }
.status.s5 { background: #f7c8c8; }

/* Backend graph primitives */
.bk-node { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.bk-node.client { fill: #cfe5ff; }
.bk-node.server { fill: #c8f0c8; }
.bk-node.cache { fill: #ffe9b3; }
.bk-node.proxy { fill: #f7c8c8; }
.bk-link { stroke: var(--ink-soft); stroke-width: 1.5; }
.bk-link.lit { stroke: var(--accent); stroke-width: 2.5; }