/* Rivendell — small custom CSS layered atop compiled Tailwind. Calm, readable. */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter.var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
html { font-size: 14px; }
body { font-feature-settings: "tnum", "ss01", "cv11"; line-height: 1.4; }
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 600; }
.num, td { font-variant-numeric: tabular-nums; }
pre, code, kbd, samp, .font-code { font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.9em; }
table { font-size: 0.86rem; line-height: 1.35; }
table th { font-weight: 600; font-size: 0.78rem; opacity: 0.75; padding: 0.4rem 0.6rem; }
table td { padding: 0.3rem 0.6rem; }
.uppercase { letter-spacing: 0.04em; }
form.htmx-request, button.htmx-request { pointer-events: none; opacity: 0.7; transition: opacity 0.15s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.toast-enter { animation: toast-in 0.18s ease-out; }
.toast-leave { opacity: 0; transition: opacity 0.25s ease-in; }
@media (prefers-reduced-motion: reduce) { .toast-enter { animation: none; } }
@supports(padding: max(0px)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }
:focus-visible { outline: 2px solid #647b56; outline-offset: 2px; }
.prose pre { background: rgb(241 245 249); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.85em; }
.dark .prose pre { background: rgb(15 23 42); }
/* graph */
.rv-graph svg { width: 100%; height: 100%; display: block; }
.rv-graph .edge { stroke: #94a3b8; stroke-opacity: 0.55; }
.dark .rv-graph .edge { stroke: #64748b; }
.rv-graph .edge.directed { marker-end: url(#rv-arrow); }
.rv-graph .node circle { fill: #e2e9dc; stroke: #647b56; stroke-width: 1.5; cursor: pointer; }
.dark .rv-graph .node circle { fill: #2b3428; stroke: #a2b593; }
.rv-graph .node.root circle { fill: #647b56; stroke: #3f4e38; }
.dark .rv-graph .node.root circle { fill: #7f9670; stroke: #c6d3bb; }
.rv-graph .node.d2 circle { fill: #f3f6f1; stroke: #a2b593; }
.dark .rv-graph .node.d2 circle { fill: #171c15; stroke: #647b56; }
.rv-graph .node text { font-size: 11px; fill: #0f172a; pointer-events: none; paint-order: stroke; stroke: #f8fafc; stroke-width: 3px; stroke-linejoin: round; }
.dark .rv-graph .node text { fill: #f1f5f9; stroke: #020617; }
.rv-graph .edge-label { font-size: 9px; fill: #64748b; pointer-events: none; }