/* evidor.ai diagrams: paste into the page's <style>. Every colour is a --evd-* token on .evd-fig (Evidor palette). */
.evd-fig {
  --evd-node: #FFFFFF; --evd-line: #DAD6CA; --evd-accent: #004225; --evd-ink: #1A1F2E; --evd-ink2: #6B6F78;
  --evd-card: #F5F2EB; --evd-dots: #E5E2D8; --evd-data: #C76E3A; --evd-on: #FAFAF7; --evd-rule: #E5E2D8;
  margin: 0; min-width: 0; position: relative;
}
.evd-figbar { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 6px; min-height: 34px; }
@media (prefers-reduced-motion: reduce) { .evd-figbar { display: none; } }
.evd-pause { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--evd-line); background: var(--evd-node); color: var(--evd-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.evd-pause[hidden] { display: none; }
.evd-pause svg { width: 14px; height: 14px; }
.evd-pause .evd-play { display: none; }
.evd-paused .evd-pause .evd-play { display: inline; }
.evd-paused .evd-pause .evd-bars { display: none; }
.evd-pause:focus-visible { outline: 2px solid var(--evd-accent); outline-offset: 3px; }
/* hidden from sight until hover, first tap (evidor-diagrams.js adds .evd-reveal) or keyboard focus; stays in the tab order */
.evd-fig:not(:hover):not(:focus-within):not(.evd-reveal) .evd-pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.evd-stage { position: relative; }
.evd-still { display: block; width: 100%; height: auto; }
/* the caption is page HTML, always on screen, centred under its own diagram */
.evd-caption { margin: 20px auto 0; font-size: 14px; line-height: 1.5; color: var(--evd-ink2); max-width: 34em; text-align: center; text-wrap: balance; }
.evd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the live diagram */
.evd-flow { width: 100%; height: auto; display: block; overflow: visible; }
.evd-flow text { font-family: inherit; }
.evd-dots { opacity: .9; }
.evd-path { stroke: var(--evd-line); transition: stroke .5s ease, opacity .5s ease; }
.evd-path-off { stroke-dasharray: 3 6; }
.evd-drop { stroke-dasharray: 2 5; }
.evd-lit { animation: evd-lit .7s ease-out; }
@keyframes evd-lit { from { stroke: var(--evd-accent); } to { stroke: var(--evd-line); } }
/* Evidor: one plain node. Nothing happens on it while a call passes. */
.evd-ev-box { fill: var(--evd-accent); stroke: var(--evd-accent); stroke-width: 1.4; transition: fill .6s ease, stroke .6s ease; }
.evd-ev-t { fill: var(--evd-on); transition: fill .6s ease; }
.evd-model-box { fill: var(--evd-node); stroke: var(--evd-line); transition: stroke .4s ease, opacity .6s ease; }
.evd-glyph { stroke: var(--evd-accent); }
.evd-glyph-dot { fill: var(--evd-accent); }
.evd-label { fill: var(--evd-ink); }
.evd-model-off .evd-model-box { fill: var(--evd-card); }
.evd-model-off .evd-glyph { stroke: var(--evd-ink2); }
.evd-model-off .evd-glyph-dot { fill: var(--evd-ink2); }
.evd-model-off .evd-label { fill: var(--evd-ink2); }
.evd-hit .evd-model-box { animation: evd-hit .7s ease-out; }
@keyframes evd-hit { from { stroke: var(--evd-accent); stroke-width: 2.6px; } to { stroke: var(--evd-line); stroke-width: 1.2px; } }
/* diagram 3, offline: Evidor greyed with a dashed outline; the way on to the model fades. Visual only (the words are in aria-describedby). */
.evd-offline .evd-ev-box { fill: var(--evd-card); stroke: var(--evd-ink2); stroke-dasharray: 6 6; }
.evd-offline .evd-ev-t { fill: var(--evd-ink2); }
.evd-offline .evd-path-out { opacity: .35; stroke-dasharray: 3 6; }
.evd-offline .evd-model { opacity: .5; }

/* diagram 2: the record */
.evd-ledger { box-sizing: border-box; margin: 0 auto; width: min(64%, 420px); background: var(--evd-node); border: 1px solid var(--evd-line); border-radius: 14px; padding: 4px 16px; }
.evd-rows { list-style: none; margin: 0; padding: 0; height: 144px; overflow: hidden; }
.evd-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 12px; height: 36px; border-bottom: 1px solid var(--evd-rule); font-size: 14px; color: var(--evd-ink2); white-space: nowrap; }
.evd-row:last-child { border-bottom: 0; }
.evd-row svg { display: block; }
.evd-in { animation: evd-in .45s ease-out; }
@keyframes evd-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .evd-ledger { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .evd-fig *, .evd-fig *::before { animation: none !important; transition: none !important; } }