@layer views {
  /* ── diagrams: drawn by the app from checked data (lessons, questions, tutor replies) ── */
  .dg-figure { margin: 0; display: grid; gap: 6px; justify-items: center; padding: 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-raise); overflow-x: auto; max-width: 100%; }
  .dg-figure figcaption { font-size: 12.5px; color: var(--muted); }
  .dg { width: 100%; height: auto; font-family: var(--font); }
  .dg-node rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
  .dg-node text { fill: var(--fg); font-size: 13px; font-weight: 600; }
  .dg-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
  .dg-arrowhead { fill: var(--muted); }
  .dg-edge-label { fill: var(--muted); font-size: 11.5px; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; }
  .dg-grid { stroke: var(--line); stroke-width: 1; }
  .dg-axis { stroke: var(--faint); stroke-width: 1.4; }
  .dg-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
  .dg-curve path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
  .dg-curve text { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; }
  .dg-curve.c0 path { stroke: var(--known); } .dg-curve.c0 text { fill: var(--known); }
  .dg-curve.c1 path { stroke: var(--due); } .dg-curve.c1 text { fill: var(--due); }
  .dg-curve.c2 path { stroke: var(--learning); } .dg-curve.c2 text { fill: var(--learning); }

  /* Drawing itself, in order: boxes pop in, lines draw out, heads and labels follow. */
  .dg-draw :is(.dg-node, .dg-arrowhead, .dg-edge-label, .dg-grid-g, .dg-curve text) {
    opacity: 0; animation: dg-appear 380ms var(--ease-liquid) forwards;
    animation-delay: calc(var(--i, 0) * var(--dg-step, 170ms));
  }
  .dg-draw .dg-node { transform-box: fill-box; transform-origin: center; }
  .dg-draw :is(.dg-edge, .dg-curve path) {
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: dg-stroke 520ms cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--dg-step, 170ms));
  }
  .dg-draw .dg-curve path { animation-duration: 900ms; }
  @keyframes dg-appear { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
  @keyframes dg-stroke { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .dg-draw :is(.dg-node, .dg-arrowhead, .dg-edge-label, .dg-grid-g, .dg-curve text, .dg-edge, .dg-curve path) { animation: none; opacity: 1; stroke-dashoffset: 0; }
  }
}