/* The system map: one SVG, colours from the tokens, no script. Dots travel
   the lines in four moves, in from your software, out to the seven cards,
   back, and home; readers who ask for less motion get the still map. The
   node rules are scoped to the node's own rectangle, so the logo's mask
   inside the map is never painted. On a small screen the map keeps its
   width and scrolls sideways. The markup is src/partials/sysmap.html. */
.sysmap-scroll { inline-size: 100%; overflow-x: auto; margin-block-start: var(--space-8); }
.sysmap-scroll:focus-visible { outline: 2px solid var(--color-royal); outline-offset: 4px; }
.sysmap { display: block; inline-size: auto; min-inline-size: 40rem; max-inline-size: 100%; block-size: auto; margin-inline: auto; font-family: var(--font-sans); }
.sm-node > rect { fill: var(--color-paper); stroke: var(--color-stone-20); stroke-width: 1; }
.sm-label { font-size: 15px; font-weight: 600; fill: var(--color-midnight); }
.sm-sub { font-size: 11.5px; fill: var(--color-stone-60); }
.sm-icon { fill: var(--color-royal); }
.sm-mark mask rect { fill: #fff; }
.sm-brand { font-family: var(--font-display); font-size: 26px; fill: var(--color-navy); letter-spacing: -0.01em; }
.sm-rules > rect { fill: var(--color-royal); stroke: none; }
.sm-rules .sm-label { fill: var(--color-paper); }
.sm-rules .sm-sub { fill: color-mix(in srgb, var(--color-mist) 85%, transparent); }
.sm-icon-mark path { fill: var(--color-paper); }
.sm-edge { fill: none; stroke: color-mix(in srgb, var(--color-navy) 55%, var(--color-paper)); stroke-width: 1.5; }   /* opaque, so lines over one another read as one */
.sm-arrowhead { fill: var(--color-navy); }
.sm-dot { fill: var(--color-royal); stroke: var(--color-paper); stroke-width: 1.5; offset-rotate: 0deg; opacity: 0; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sm-dot-in   { animation-name: sm-in; }
.sm-dot-out  { animation-name: sm-out; }
.sm-dot-back { animation-name: sm-back; }
.sm-dot-home { animation-name: sm-home; }
@keyframes sm-in   { 0% { offset-distance: 0%; opacity: 1; } 18% { offset-distance: 100%; opacity: 1; } 18.01%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sm-out  { 0%, 24.99% { offset-distance: 0%; opacity: 0; } 25% { opacity: 1; } 43% { offset-distance: 100%; opacity: 1; } 43.01%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sm-back { 0%, 49.99% { offset-distance: 100%; opacity: 0; } 50% { opacity: 1; } 68% { offset-distance: 0%; opacity: 1; } 68.01%, 100% { offset-distance: 0%; opacity: 0; } }
@keyframes sm-home { 0%, 74.99% { offset-distance: 100%; opacity: 0; } 75% { opacity: 1; } 93% { offset-distance: 0%; opacity: 1; } 93.01%, 100% { offset-distance: 0%; opacity: 0; } }

/* The RebateRight card while the request is out: from the dot's arrival to the
   answer leaving, its edge turns royal and a pale light runs the line, three
   layers of one colour on one clock so the light fades at both ends. */
@property --sm-pos { syntax: '<number>'; inherits: false; initial-value: 0; }
.sm-rr > rect:first-child { animation: rr-edge 6s ease-in-out infinite; }
.sm-rr > rect.sm-rr-tracer { fill: none; stroke: color-mix(in srgb, var(--color-sky) 30%, white); stroke-width: 1.25; stroke-linecap: round; opacity: 0; filter: blur(0.35px);
  stroke-dasharray: calc(var(--l) * var(--len) / 100) calc(var(--len) - var(--l) * var(--len) / 100); stroke-dashoffset: calc(((var(--l) - 4) / 2 - var(--sm-pos)) * var(--len) / 100); animation: rr-tracer 6s linear infinite; }
.sysmap--wide .sm-rr > rect.sm-rr-tracer { --len: 695; }   /* the card's perimeter, 216 by 140 with 10px corners */
.sysmap--tall .sm-rr > rect.sm-rr-tracer { --len: 783; }   /* 280 by 120 */
.sm-rr > rect.sm-rr-tracer.l1 { --l: 16; --o: 0.22; }
.sm-rr > rect.sm-rr-tracer.l2 { --l: 10; --o: 0.5; }
.sm-rr > rect.sm-rr-tracer.l3 { --l: 4; --o: 1; }
@keyframes rr-edge   { 0%, 16% { stroke: var(--color-stone-20); } 20%, 76% { stroke: var(--color-royal); } 80%, 100% { stroke: var(--color-stone-20); } }
@keyframes rr-tracer { 0%, 17% { opacity: 0; --sm-pos: 0; } 19% { opacity: var(--o); } 77% { opacity: var(--o); --sm-pos: 200; } 79%, 100% { opacity: 0; --sm-pos: 200; } }

/* The stacked map for a narrow screen: one trunk, seven branches, longer legs
   for the dots. The wide map shows everywhere else; a slide keeps the wide one. */
.sysmap--tall { display: none; min-inline-size: 0; inline-size: 100%; max-inline-size: 22rem; }
@media (max-width: 48rem) {
  .sysmap-scroll { overflow: visible; }
  .sysmap--wide { display: none; }
  .sysmap--tall { display: block; }
}
.slide .sysmap--wide { display: block; }
.slide .sysmap--tall { display: none; }
.sysmap--tall .sm-dot-in   { animation-name: smt-in; }
.sysmap--tall .sm-dot-out  { animation-name: smt-out; }
.sysmap--tall .sm-dot-back { animation-name: smt-back; }
.sysmap--tall .sm-dot-home { animation-name: smt-home; }
.sysmap--tall .sm-rr > rect:first-child { animation-name: rrt-edge; }
.sysmap--tall .sm-rr > rect.sm-rr-tracer { animation-name: rrt-tracer; }
@keyframes smt-in   { 0% { offset-distance: 0%; opacity: 1; } 12% { offset-distance: 100%; opacity: 1; } 12.01%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes smt-out  { 0%, 14.99% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 45% { offset-distance: 100%; opacity: 1; } 45.01%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes smt-back { 0%, 48.99% { offset-distance: 100%; opacity: 0; } 49% { opacity: 1; } 79% { offset-distance: 0%; opacity: 1; } 79.01%, 100% { offset-distance: 0%; opacity: 0; } }
@keyframes smt-home { 0%, 82.99% { offset-distance: 100%; opacity: 0; } 83% { opacity: 1; } 95% { offset-distance: 0%; opacity: 1; } 95.01%, 100% { offset-distance: 0%; opacity: 0; } }
@keyframes rrt-edge   { 0%, 10% { stroke: var(--color-stone-20); } 14%, 80% { stroke: var(--color-royal); } 84%, 100% { stroke: var(--color-stone-20); } }
@keyframes rrt-tracer { 0%, 11% { opacity: 0; --sm-pos: 0; } 13% { opacity: var(--o); } 81% { opacity: var(--o); --sm-pos: 200; } 83%, 100% { opacity: 0; --sm-pos: 200; } }
@media (prefers-reduced-motion: reduce) { .sm-dot, .sm-rr > rect { animation: none; } }