/* Shared SVG diagram styles for the LCM-866 deck.
   Geometry lives in index.html (lane template <symbol id="lanes"> in the
   global <defs>); colours and type live here and come from theme/prpl.css. */

/* global defs holder: must render (not display:none) so markers and patterns resolve */
.dg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.reveal svg.dg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- lanes ---------- */
/* <use> clones only inherit, so each symbol is styled on its <use> element */
.dg use.lane-bands { fill: var(--c-band); }
.dg use.lane-names { font-family: var(--font-heading); font-weight: 600; font-size: 30px; fill: var(--c-ink); }
.dg use.lane-subs  { font-family: var(--font-sans); font-weight: 300; font-size: 26px; fill: var(--c-ink); }
.dg .lane-gap  { fill: var(--c-ground); }
.dg .t-lab { font-family: var(--font-heading); font-weight: 600; font-size: 30px; fill: var(--c-ink); }
.dg .t-sub { font-family: var(--font-sans);    font-weight: 300; font-size: 26px; fill: var(--c-ink); }

/* ---------- text ---------- */
.dg .t      { font-family: var(--font-sans); font-weight: 400; font-size: 26px; fill: var(--c-ink); }
.dg .t-l    { font-weight: 300; }
.dg .t-code { font-family: var(--font-mono); font-weight: 700; }
.dg .t-big  { font-family: var(--font-heading); font-weight: 600; font-size: 40px; }
.dg .t-kick { font-family: var(--font-heading); font-weight: 400; font-size: 26px; letter-spacing: 2px;
              text-transform: uppercase; fill: var(--c-purple); }
.dg .t-on   { fill: var(--c-white); }
.dg .t-axis { font-family: var(--font-sans); font-weight: 300; font-size: 26px; fill: var(--c-ink); }

/* ---------- arrows (3px strokes; heads are markers set in markup) ---------- */
.dg .a        { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg .a-ink    { stroke: var(--c-ink); }
.dg .a-purple { stroke: var(--c-purple); }
.dg .a-fail   { stroke: var(--c-fail); }
.dg .a-muted  { stroke: var(--c-muted); stroke-dasharray: 10 8; }
.dg .a-wait   { stroke: var(--c-ink-50); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; fill: none; }
.dg .a-thin   { stroke-width: 2; }
.dg .flow     { stroke-dasharray: 0 11; stroke-width: 6; animation: dg-flow .9s linear infinite; }
@keyframes dg-flow { to { stroke-dashoffset: -11; } }

/* marker heads */
.dg-defs .mk-ink    { fill: var(--c-ink); }
.dg-defs .mk-purple { fill: var(--c-purple); }
.dg-defs .mk-fail   { fill: var(--c-fail); }
.dg-defs .mk-muted  { fill: var(--c-muted); }

/* hatch patterns */
.dg-defs .hatch-bg-fail  { fill: var(--c-fail-10); }
.dg-defs .hatch-ln-fail  { stroke: var(--c-fail); stroke-width: 3; }
.dg-defs .hatch-bg-muted { fill: none; }
.dg-defs .hatch-ln-muted { stroke: #8a8a8a; stroke-width: 2.5; }   /* one step darker: reads on ground and on the zebra band */
.dg .hatch-edge-fail  { fill: none; stroke: var(--c-fail); stroke-width: 2; }
.dg .hatch-edge-muted { fill: none; stroke: var(--c-muted); stroke-width: 2; }

/* ---------- marks ---------- */
.dg .pill      { fill: var(--c-ground); }
.dg .box-band  { fill: var(--c-band); }
.dg .box-fail  { fill: var(--c-fail); }
.dg .box-ink   { fill: var(--c-ground); stroke: var(--c-ink); stroke-width: 3; }
.dg .box-wait  { fill: var(--c-ground); stroke: var(--c-muted); stroke-width: 3; stroke-dasharray: 10 8; }
.dg .x-fail    { stroke: var(--c-fail); stroke-width: 7; stroke-linecap: round; }
.dg .ring-fail { fill: var(--c-ground); stroke: var(--c-fail); stroke-width: 3; }
.dg .rule      { stroke: var(--c-ink); stroke-width: 2; fill: none; }
.dg .tick      { stroke: var(--c-ink); stroke-width: 2; }
.dg .bar-purple { fill: var(--c-purple); }
.dg .bar-fail   { fill: var(--c-fail); }
.dg .bar-blue   { fill: var(--c-blue); }
.dg .ring-yellow { fill: none; stroke: var(--c-yellow); stroke-width: 6; }
.dg .dot        { fill: var(--c-purple); stroke: var(--c-ground); stroke-width: 2; }

/* timer badge (slide 4, step 3) */
.dg .badge      { fill: var(--c-ground); stroke: var(--c-fail); stroke-width: 3; }
.dg .timer-bar  { fill: var(--c-fail); }
.dg .timer-track { fill: none; stroke: var(--c-fail); stroke-width: 2; }
.reveal .fragment.visible .grow { animation: dg-grow 2.4s linear both; transform-box: fill-box; transform-origin: left center; }
@keyframes dg-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- callouts: yellow, ink text ---------- */
.dg .co        { fill: var(--c-yellow); }
.dg .co-badge  { fill: var(--c-yellow); stroke: var(--c-ink); stroke-width: 3; }
.dg .co-letter { font-family: var(--font-heading); font-weight: 600; font-size: 28px; fill: var(--c-ink); }
.dg .co-lead   { stroke: var(--c-ink); stroke-width: 2; fill: none; }

/* dimmed base (slide 5) */
.dg .dim { opacity: .3; }
.dg .dim .flow { animation: none; }

/* inline time bars in tables (slide 7) */
.reveal svg.tbar { display: block; width: 320px; height: auto; overflow: visible; flex: 0 0 320px; }

@media (prefers-reduced-motion: reduce) {
  .dg .flow { animation: none; }
  .reveal .fragment.visible .grow { animation: none; }
}
.dg .t-arc { font-size: 30px; font-weight: 400; }