/* ------------------------------------------------------------------ *
 * Interactive firmware module map (how-it-works/firmware.md)
 *
 * A single hand-authored inline SVG whose nodes reveal a description
 * card on hover / keyboard focus. Pure CSS — no JavaScript — so it
 * works on the static GitHub Pages build and through the service
 * worker. Colours are driven by Material's theme variables so the
 * diagram follows the light/dark palette automatically.
 * ------------------------------------------------------------------ */

/* Define on [data-md-color-scheme] (Material sets its palette vars on <body>,
 * not :root) so every variable below that references a --md-* value
 * recomputes for the active light/dark scheme instead of freezing at the
 * light-mode value. */
[data-md-color-scheme] {
  --fw-cmd: #0b8f87;        /* command / motion spine (teal family) */
  --fw-fb: #d98a00;         /* sensor-feedback spine (amber)        */
  --fw-aux: var(--md-default-fg-color--light);
  --fw-card-bg: var(--md-default-bg-color);
  --fw-card-border: var(--md-default-fg-color--lighter);
  /* a subtle tint of the page background so boxes track light/dark */
  --fw-node-bg: color-mix(in srgb, var(--md-default-fg-color) 4%, var(--md-default-bg-color));
  --fw-node-border: var(--md-default-fg-color--lighter);
  --fw-label-bg: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] {
  --fw-cmd: #2bd4c8;
  --fw-fb: #f0b429;
  --fw-node-bg: color-mix(in srgb, var(--md-default-fg-color) 9%, var(--md-default-bg-color));
}

/* ----- container ----- */
.fw-map {
  margin: 1.2em 0;
}
.fw-map svg {
  width: 100%;
  height: auto;
  font-family: var(--md-text-font-family, inherit);
  /* let hover cards near the edges escape the viewport box */
  overflow: visible;
}
.fw-map figcaption {
  margin-top: 0.4em;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
}

/* ----- nodes ----- */
.fw-node { cursor: help; }
.fw-node-box {
  fill: var(--fw-node-bg);
  stroke: var(--fw-node-border);
  stroke-width: 1.2;
  transition: stroke 0.12s ease, filter 0.12s ease;
}
/* hardware / off-chip blocks read as dashed; the supervisor cog is primary */
.fw-node--hw .fw-node-box { stroke-dasharray: 5 3; }
.fw-node--super .fw-node-box {
  stroke: var(--md-primary-fg-color);
  fill: color-mix(in srgb, var(--md-primary-fg-color) 8%, var(--fw-node-bg));
}
.fw-node--ctrl .fw-node-box { stroke-width: 1.8; }
.fw-node-label {
  fill: var(--md-default-fg-color);
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.fw-node-sub {
  fill: var(--md-default-fg-color--light);
  font-size: 9.5px;
  text-anchor: middle;
  pointer-events: none;
}

/* spine accents on the node outline */
.fw-node--cmd .fw-node-box { stroke: var(--fw-cmd); }
.fw-node--fb  .fw-node-box { stroke: var(--fw-fb); }

/* hover / focus emphasis */
.fw-node:hover .fw-node-box,
.fw-node:focus-visible .fw-node-box,
.fw-node:focus-within .fw-node-box {
  stroke-width: 2.4;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--md-default-fg-color) 35%, transparent));
}
.fw-node:focus { outline: none; }

/* ----- edges (arrows) ----- */
.fw-edge {
  fill: none;
  stroke-width: 2;
}
.fw-edge--cmd { stroke: var(--fw-cmd); }
.fw-edge--fb  { stroke: var(--fw-fb); }
.fw-edge--aux {
  stroke: var(--fw-aux);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}
.fw-arrow--cmd { fill: var(--fw-cmd); }
.fw-arrow--fb  { fill: var(--fw-fb); }
.fw-arrow--aux { fill: var(--fw-aux); }

.fw-edge-label text {
  font-size: 9px;
  fill: var(--md-default-fg-color--light);
  text-anchor: middle;
}
.fw-label-bg { fill: var(--fw-label-bg); }
/* the test → motion → stepper spine the page is really about */
.fw-edge-label--key text { fill: var(--fw-cmd); font-weight: 700; }

/* ----- hover description card ----- */
.fw-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.fw-node:hover .fw-card,
.fw-node:focus-visible .fw-card,
.fw-node:focus-within .fw-card {
  opacity: 1;
  visibility: visible;
}
.fw-card-bg {
  fill: var(--fw-card-bg);
  stroke: var(--fw-card-border);
  stroke-width: 1;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--md-default-fg-color) 30%, transparent));
}
.fw-card-title {
  fill: var(--md-default-fg-color);
  font-size: 11px;
  font-weight: 700;
}
.fw-card-body {
  fill: var(--md-default-fg-color--light);
  font-size: 10px;
}
.fw-card-meta {
  fill: var(--fw-cmd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ----- legend ----- */
.fw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.1em;
  justify-content: center;
  margin: 0.6em 0 0;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}
.fw-legend span { display: inline-flex; align-items: center; gap: 0.4em; }
.fw-legend i {
  width: 1.4em;
  height: 0;
  border-top-width: 3px;
  border-top-style: solid;
  display: inline-block;
}
.fw-legend .fw-key--cmd { border-top-color: var(--fw-cmd); }
.fw-legend .fw-key--fb  { border-top-color: var(--fw-fb); }
.fw-legend .fw-key--aux { border-top-style: dashed; border-top-color: var(--fw-aux); }

/* keep the tooltip cards from being clipped by Material's content box */
.md-content__inner .fw-map { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .fw-node-box, .fw-card { transition: none; }
}

/* On small screens the SVG scales down; nudge label sizes up a touch
   for legibility and let the user scroll if it gets too tight. */
@media screen and (max-width: 50em) {
  .fw-map { overflow-x: auto; }
  .fw-map svg { min-width: 34em; }
}