/*
 * Flow diagrams: the one stylesheet for every diagram on the blog and in /docs
 * (resources/views/docs/diagrams/flow.blade.php, spec App\Support\Diagrams\Specs).
 *
 * Colours, dashes, borders and fonts live on the SVG as presentation attributes
 * (App\Support\Diagrams\Palette), so the PDF prints the same picture. This file
 * only adds the frame, the scroll container, step highlighting and motion.
 * Motion runs only with prefers-reduced-motion: no-preference, and only on the
 * step being read: the static diagram and its step list are complete without it.
 */
.dg, .dg-steps, .dg-verify {
  --dg-blue: #0F4C81; --dg-blue-50: #EEF4FA; --dg-blue-100: #D6E4F2;
  --dg-ink: #0F172A; --dg-text: #1E293B; --dg-muted: #475569; --dg-line: #E2E8F0;
  --dg-red: #B91C1C; --dg-red-50: #FEF2F2; --dg-teal: #0E7490; --dg-green: #15803D;
}

/* frame + scroll container (legible at 360px by scrolling, not by shrinking) */
.dg { margin: 1.5rem 0 .75rem; border: 1px solid var(--dg-line); border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.dg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.dg-scroll:focus-visible { outline: 2px solid var(--dg-blue); outline-offset: -2px; }
.dg-svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: 'Inter', system-ui, sans-serif; }

/* step highlight: the active step's cards and arrows stay, the rest recede */
.dg.has-active .dg-node, .dg.has-active .dg-edge, .dg.has-active .dg-elabel { opacity: .28; }
.dg.has-active .dg-node.is-active, .dg.has-active .dg-edge.is-active, .dg.has-active .dg-elabel.is-active { opacity: 1; }
.dg-edge.is-active .dg-line { stroke-width: 2.75; }
.dg-node.is-active .dg-card { stroke-width: 2.5; }

/* motion pulse: a short dash travelling along the active arrows */
.dg-pulse { fill: none; stroke: none; stroke-width: 3.5; stroke-linecap: round; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .dg-node, .dg-edge, .dg-elabel, .dg-step { transition: opacity .3s ease, background-color .25s ease, border-color .25s ease; }
  .dg-card, .dg-line { transition: stroke-width .25s ease; }

  /* path draw: the active step's arrows draw themselves (pathLength=1) */
  .dg.is-visible .dg-e-request.is-active .dg-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dg-draw .7s ease-out forwards; }
  .dg.is-visible .dg-edge.is-active .dg-pulse { stroke: #38BDF8; stroke-dasharray: 10 400; opacity: .9; animation: dg-travel 1.8s linear .7s infinite; }
  .dg.is-visible .dg-e-refusal.is-active .dg-pulse { stroke: #F87171; }
  .dg.is-visible .dg-node.is-active .dg-card { animation: dg-pulse-card 1.8s ease-in-out infinite; }
}
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
@keyframes dg-travel { from { stroke-dashoffset: 410; } to { stroke-dashoffset: 0; } }
@keyframes dg-pulse-card { 0%, 100% { stroke-width: 2.5; } 50% { stroke-width: 4; } }

/* the numbered step list: the diagram's text alternative and its scroll driver */
.dg-steps { list-style: none; counter-reset: dgs; padding: 0 !important; margin: 0 0 1rem !important; display: grid; gap: .5rem; }
.dg-step {
  counter-increment: dgs; position: relative; padding: .7rem .9rem .7rem 3rem !important;
  border: 1px solid var(--dg-line); border-radius: 12px; background: #fff; margin: 0 !important; cursor: default;
}
.dg-step::before {
  content: counter(dgs); position: absolute; left: .85rem; top: .7rem;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .75rem; font-weight: 800; color: var(--dg-blue); background: var(--dg-blue-50); border: 1px solid var(--dg-blue-100);
}
.dg-step strong { display: block; color: var(--dg-ink); font-size: .92rem; }
.dg-step span { display: block; color: var(--dg-muted); font-size: .87rem; line-height: 1.5; }
.dg-step-refusal strong { color: var(--dg-red); }
.dg-step-refusal::before { color: var(--dg-red); background: var(--dg-red-50); border-color: #FECACA; }
.dg-step.is-active, .dg-step:focus-visible { border-color: var(--dg-blue); background: var(--dg-blue-50); outline: none; }
.dg-step.is-active::before { background: var(--dg-blue); color: #fff; border-color: var(--dg-blue); }
.dg-step-refusal.is-active { border-color: var(--dg-red); background: var(--dg-red-50); }
.dg-step-refusal.is-active::before { background: var(--dg-red); color: #fff; }

/* "How this diagram is verified" */
.dg-verify { margin: 0 0 2rem; border: 1px solid var(--dg-line); border-radius: 12px; background: #F8FAFC; font-size: .87rem; color: var(--dg-text); }
.dg-verify summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .9rem; cursor: pointer; font-weight: 700; color: var(--dg-ink); }
.dg-verify summary .f-icon { color: var(--dg-green); }
.dg-verify-count { margin-left: auto; font-weight: 600; color: var(--dg-green); font-size: .8rem; }
.dg-verify > p, .dg-verify-checks, .dg-verify-table { margin: 0 .9rem .75rem !important; }
.dg-verify-checks { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .9rem; }
.dg-verify-checks li { display: flex; gap: .4rem; align-items: flex-start; margin: 0 !important; line-height: 1.4; }
.dg-verify-checks .is-ok .f-icon { color: var(--dg-green); flex: none; margin-top: 2px; }
.dg-verify-checks .is-bad .f-icon { color: var(--dg-red); flex: none; margin-top: 2px; }
.dg-verify-table { overflow-x: auto; }
.dg-verify table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dg-verify th, .dg-verify td { text-align: left; vertical-align: top; padding: .35rem .5rem; border-top: 1px solid var(--dg-line); }
.dg-verify td:first-child { white-space: nowrap; font-weight: 600; }
.dg-verify code { display: inline-block; margin: 0 .25rem .2rem 0; font-size: .75rem; word-break: break-all; }
.dg-verify a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--dg-blue); }

@media (max-width: 640px) {
  .dg { border-radius: 12px; margin-left: 0; margin-right: 0; }
  .dg-steps { gap: .4rem; }
}
@media print {
  .dg-pulse { display: none; }
  .dg .dg-node, .dg .dg-edge, .dg .dg-elabel { opacity: 1 !important; }
}