/* traceon.html only — diagram primitives and long-form typography */

:root {
  --d-node-bg: #ffffff; --d-node-border: #e0dcdd; --d-grid: rgba(0,0,0,0.04);
  --d-offline: rgba(19,19,20,0.05);
}
.dark {
  --d-node-bg: rgba(255,255,255,0.04); --d-node-border: rgba(255,255,255,0.12); --d-grid: rgba(255,255,255,0.05);
  --d-offline: rgba(255,255,255,0.06);
}

/* Long-form technical copy: capped measure, with looser leading on the
   18px prose only (shared body-lg is 1.6; this page reads better at 1.7) */
.prose-narrow { max-width: 68ch; }
.text-body-lg.prose-narrow { line-height: 1.7; }

.diagram {
  background:
    linear-gradient(var(--d-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
.node {
  background: var(--d-node-bg);
  border: 1px solid var(--d-node-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  text-align: center;
  transition: border-color .3s ease;
}
.node-accent { border-color: rgb(var(--c-primary) / 0.5); box-shadow: 0 0 0 3px rgb(var(--c-primary) / 0.06); }
.node-title { font-weight: 600; color: rgb(var(--c-heading)); font-size: 15px; }
.node-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: rgb(var(--c-muted) / .75); margin-top: .35rem; }
.node-role { font-size: 12px; color: rgb(var(--c-body) / .7); margin-top: .35rem; }
.conn { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.conn-line { width: 2px; background: rgb(var(--c-primary) / 0.45); }
.conn-h { height: 2px; background: rgb(var(--c-primary) / 0.45); flex: 1 1 auto; }
.conn-cap { color: rgb(var(--c-primary)); font-size: 18px; line-height: 0; margin-top: -2px; }
.conn-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--c-muted) / .8); padding: .25rem .5rem; }
.offline-band {
  background-image: repeating-linear-gradient(45deg, var(--d-offline) 0 8px, transparent 8px 16px);
}
.rule-quote { border-left: 3px solid rgb(var(--c-primary)); padding-left: 1.25rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }