/* Phone-width figures for /homepage-dev. Opted into by ResponsiveHomepage;
   desktop figures and the other marketing variants never see these rules.
   Palette and type come from the .day-dev tokens; nothing here names a hex. */

.dd-home-mobile #context-graph > div,
.dd-home-mobile #agent-control-plane > div {
  padding-left: 0;
}

.dd-mobile-figure {
  min-width: 0;
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dd-ink);
}
.dd-mobile-figure *,
.dd-mobile-picker * {
  box-sizing: border-box;
}
.dd-ink {
  color: var(--dd-ink);
}
.dd-muted {
  color: var(--dd-muted);
}
.dd-faint {
  color: var(--dd-faint);
}

/* ── a node ──────────────────────────────────────────────────────────── */
.dd-box {
  position: relative;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--dd-faint);
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.dd-box-ink {
  border-color: var(--dd-muted);
}
.dd-box-frame {
  border-color: var(--dd-rule);
}
.dd-box-dashed {
  border-style: dashed;
}
.dd-box-center {
  text-align: center;
}
/* labels cut into the border: page-coloured so they knock the line out */
.dd-box-top,
.dd-box-bottom {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 0 5px;
  background: var(--dd-paper);
  font-size: 11px;
  line-height: 14px;
  color: var(--dd-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-box-top {
  top: -8px;
  left: 7px;
}
.dd-box-bottom {
  bottom: -8px;
  right: 7px;
}
.dd-box-top svg,
.dd-box-bottom svg {
  flex: none;
}
/* a box with a bottom label needs air beneath it */
.dd-box:has(> .dd-box-bottom) {
  padding-bottom: 13px;
}

/* ── a tree: rail on the left, one tick per child ────────────────────── */
.dd-tree {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  margin-left: 14px;
  padding-left: 18px;
}
.dd-tree > * {
  position: relative;
}
.dd-tree > *::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-tree > *::after {
  content: "";
  position: absolute;
  left: -19px;
  top: -14px;
  bottom: 0;
  width: 1px;
  background: var(--dd-faint);
}
.dd-tree > *:last-child::after {
  bottom: 50%;
}
/* paired arrows: something goes out, something comes back */
.dd-pair {
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  display: grid;
  gap: 3px;
}
.dd-pair i {
  display: block;
  position: relative;
  height: 1px;
  background: var(--dd-faint);
}
.dd-pair i::after {
  content: "";
  position: absolute;
  top: -3px;
  border: 3px solid transparent;
}
.dd-pair i:first-child::after {
  right: -1px;
  border-left: 5px solid var(--dd-faint);
}
.dd-pair i:last-child::after {
  left: -1px;
  border-right: 5px solid var(--dd-faint);
}
/* one arrow in place of the tick: the deploy goes one way */
.dd-tree-arrow > *::before {
  display: none;
}
.dd-arrow {
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border: 3px solid transparent;
  border-left: 5px solid var(--dd-faint);
}

/* ── a stack of cards: front card lowest and leftmost, each card behind it
   one full row up and a step right, so every name reads; ghosts tucked
   tightly behind the last ────────────────────────────────────────────── */
.dd-stack {
  position: relative;
  height: calc(28px + 24px * (var(--dd-cards) - 1) + 5px * var(--dd-ghosts));
  margin-right: 8px;
}
.dd-stack-card,
.dd-stack-ghost {
  position: absolute;
  height: 28px;
  border: 1px solid var(--dd-faint);
  border-radius: 3px;
  background: var(--dd-paper);
}
.dd-stack-card {
  display: flex;
  align-items: center;
  padding: 0 10px;
  bottom: calc(24px * var(--dd-i));
  left: calc(8px * var(--dd-i));
  right: calc(8px * (var(--dd-cards) - 1 - var(--dd-i)));
  z-index: calc(10 - var(--dd-i));
  font-size: 11px;
  white-space: nowrap;
}
.dd-stack-ghost {
  border-color: var(--dd-rule);
  bottom: calc(
    24px *
    (var(--dd-cards) - 1) +
    5px *
    (var(--dd-i) - var(--dd-cards) + 1)
  );
  left: calc(
    8px *
    (var(--dd-cards) - 1) +
    5px *
    (var(--dd-i) - var(--dd-cards) + 1)
  );
  right: calc(-5px * (var(--dd-i) - var(--dd-cards) + 1));
  z-index: calc(10 - var(--dd-i));
}

/* ── connectors ───────────────────────────────────────────────────────── */
.dd-down {
  position: relative;
  height: 34px;
}
.dd-down,
.dd-rail {
  color: var(--dd-faint);
}
.dd-down::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 5px;
  width: 1px;
  background: currentColor;
}
.dd-down::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-top: 5px solid currentColor;
}
.dd-rail {
  position: relative;
}
.dd-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
}
/* the rail turns left into the box beside it */
.dd-rail-in::before {
  top: 0;
  height: 50%;
  bottom: auto;
  left: -14px;
  right: calc(50% - 1px);
  width: auto;
  background: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.dd-rail-in::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid transparent;
  border-right: 5px solid currentColor;
}
/* the arrowhead at the top: from one of `--dd-of` equal cells in the row
   beneath, cell `--dd-at`, up into the box above */
.dd-up {
  position: relative;
  height: 34px;
  width: calc((100% - 8px * (var(--dd-of) - 1)) / var(--dd-of));
  margin-left: calc(
    var(--dd-at) *
    ((100% - 8px * (var(--dd-of) - 1)) / var(--dd-of) + 8px)
  );
  color: var(--dd-faint);
}
.dd-up::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 0;
  width: 1px;
  background: currentColor;
}
.dd-up::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-bottom: 5px solid currentColor;
}
/* the pair, vertical: down on the left, back up on the right, a label beside each */
.dd-vpair {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 44px;
  color: var(--dd-faint);
}
.dd-vpair i {
  position: relative;
  display: block;
  width: 1px;
  height: 100%;
  background: currentColor;
}
.dd-vpair i::after {
  content: "";
  position: absolute;
  left: -3px;
  border: 3px solid transparent;
}
.dd-vpair i:first-of-type::after {
  bottom: -1px;
  border-top: 5px solid currentColor;
}
.dd-vpair i:last-of-type::after {
  top: -1px;
  border-bottom: 5px solid currentColor;
}
/* the arrow in motion: MOBILE_DASHES dashes over one line of the pair, a
   54px lane at an 18px pitch, shown through a clip window that steps a dash
   at a time; keyframes come from FeedbackLoops.tsx */
.dd-vpair-pulse {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--dd-accent) 0 10px,
    transparent 10px 18px
  );
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
}
.dd-vpair-down,
.dd-vpair-up {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}
.dd-vpair-down {
  right: calc(50% + 14px);
}
.dd-vpair-up {
  left: calc(50% + 14px);
}
/* a row of small icons inside a box */
.dd-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
  color: var(--dd-faint);
}
.dd-badges svg {
  flex: none;
}

/* the object in flight: the line draws itself in Day blue from one end to the other */
.dd-line-lit {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dd-accent);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
.dd-down .dd-line-lit {
  bottom: 5px;
}
.dd-rail-in .dd-line-lit-v {
  height: 50%;
  bottom: auto;
}
.dd-rail-in .dd-line-lit-h {
  top: calc(50% - 1px);
  bottom: auto;
  left: -14px;
  right: 50%;
  width: auto;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
}

/* ── 1.1 trace ────────────────────────────────────────────────────────── */

/* ── 1.2 pipeline ─────────────────────────────────────────────────────── */
.dd-pipe {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  column-gap: 16px;
  margin-top: 8px;
}
.dd-pipe > .dd-box,
.dd-pipe > .dd-down {
  grid-column: 1;
}
.dd-pipe > .dd-pipe-rules,
.dd-pipe > .dd-rail {
  grid-column: 2;
}
.dd-pipe > .dd-rail-drop {
  grid-row: 2 / span 3;
}
.dd-pipe-sources,
.dd-pipe-rules {
  padding: 20px 10px 12px;
}
.dd-pipe .dd-stack-card {
  padding: 0 8px;
}

/* ── 1.2 / 1.3 chips ──────────────────────────────────────────────────── */
.dd-chips-frame {
  padding: 16px 12px 12px;
}
.dd-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}
.dd-chip {
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-chip-any {
  margin-top: 12px;
}
.dd-frame-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--dd-faint);
}

/* ── 2.1 agent card ───────────────────────────────────────────────────── */
.dd-card {
  padding: 18px 12px 12px;
}
.dd-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
}
.dd-card-blurb {
  margin: 8px 0 14px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--dd-muted);
}
.dd-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 10px;
  margin-top: 14px;
}
.dd-skills .dd-box {
  padding-left: 10px;
  padding-right: 10px;
}
.dd-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 2.2 deploy: agents on the left of the box, the person on the right ── */
.dd-deploy-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── 2.2 skills and versions: skills one to a row, the version chips
   beneath the card in a row the arrow rises from ─────────────────────── */
.dd-skills-head {
  margin-top: 14px;
}
.dd-skills-column {
  grid-template-columns: minmax(0, 1fr);
}
.dd-versions {
  display: flex;
  gap: 8px;
}
.dd-version {
  flex: 1 1 0;
  padding: 7px 0;
  font-size: 12px;
  white-space: nowrap;
}

/* ── 2.1 org chart: people and agents on the left, the context graph one
   tall box on the right, a pair of arrows from every agent into it ─────── */
.dd-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 118px;
  align-items: stretch;
}
.dd-org > * {
  min-width: 0;
}
.dd-org-human,
.dd-org-agent {
  grid-column: 1;
}
.dd-org-next {
  padding-top: 20px;
}
/* agents hang off a rail under their person; rows pad rather than gap so
   the rail runs unbroken */
.dd-org-agent {
  position: relative;
  padding: 14px 0 0 32px;
}
.dd-org-agent::before {
  content: "";
  position: absolute;
  left: 14px;
  top: calc(50% + 7px);
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-org-agent::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dd-faint);
}
.dd-org-agent:has(+ .dd-org-link + .dd-org-human)::after,
.dd-org-agent:has(+ .dd-org-link + .dd-org-graph)::after {
  bottom: calc(50% - 7px);
}
/* reads and writes: out to the graph, back to the agent */
.dd-org-link {
  grid-column: 2;
  position: relative;
}
.dd-org-link .dd-pair {
  left: 5px;
  right: 5px;
  width: auto;
  top: calc(50% + 7px);
}
.dd-org-graph {
  grid-column: 3;
  display: flex;
  align-items: center;
  padding: 16px 10px;
}
.dd-org-graph-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--dd-muted);
}

/* ── 1.2 pipeline, in motion: the desktop figure's clock, one object at a
   time on a loop, as CSS keyframes (generated; see IngestPipeline.tsx for
   the sequence). Stages stay lit once reached and go dark together. Lit
   cards and stages take the same faint wash as the desktop figure, mixed
   over the paper so a stack card still hides the card behind it. ──────── */
.dd-pipe .dd-stack-card,
.dd-pipe .dd-stack-ghost,
.dd-pipe .dd-box,
.dd-pipe .dd-down,
.dd-pipe .dd-rail,
.dd-pipe .dd-line-lit {
  animation-duration: 9980ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes dd-src-0 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  4.4990000000000006% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  4.509% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  9.419% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  12.625% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-1 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  3.5970000000000004% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  3.607% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  4.509% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  7.715% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-2 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  2.6950000000000003% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  2.705% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  3.607% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  6.814% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-3 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  1.794% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  1.804% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  2.705% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  5.912% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-4 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.892% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.902% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  1.804% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  5.01% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-5 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  -0.01% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.0% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  0.902% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  4.108% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-0 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  45.481% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  45.491% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  50.401% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  53.607% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-1 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  44.579% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  44.589% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.491% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  48.697% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-2 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  43.677% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  43.687% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  44.589% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  47.796% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-3 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  42.776% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  42.786% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  43.687% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  46.894% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-4 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  41.874% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  41.884% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  42.786% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.992% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-5 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  40.972% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  40.982% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  41.884% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.09% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-layout {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  16.924% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  16.934% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-perm {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  35.962% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  35.972% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-graph {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  73.93799999999999% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  73.948% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-hop1 {
  0% {
    color: var(--dd-faint);
  }
  16.924% {
    color: var(--dd-faint);
  }
  16.934% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop2 {
  0% {
    color: var(--dd-faint);
  }
  35.962% {
    color: var(--dd-faint);
  }
  35.972% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop3 {
  0% {
    color: var(--dd-faint);
  }
  73.93799999999999% {
    color: var(--dd-faint);
  }
  73.948% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-rail {
  0% {
    color: var(--dd-faint);
  }
  55.902% {
    color: var(--dd-faint);
  }
  55.912% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-rail-in {
  0% {
    color: var(--dd-faint);
  }
  55.902% {
    color: var(--dd-faint);
  }
  55.912% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop1-draw {
  0% {
    transform: scaleY(0);
  }
  6.904% {
    transform: scaleY(0);
  }
  6.914% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  16.934% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-hop2-draw {
  0% {
    transform: scaleY(0);
  }
  25.942% {
    transform: scaleY(0);
  }
  25.952% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  35.972% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-hop3-draw {
  0% {
    transform: scaleY(0);
  }
  63.918% {
    transform: scaleY(0);
  }
  63.928% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  73.948% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-draw {
  0% {
    transform: scaleY(0);
  }
  47.886% {
    transform: scaleY(0);
  }
  47.896% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  52.705% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-in-draw-v {
  0% {
    transform: scaleY(0);
  }
  52.695% {
    transform: scaleY(0);
  }
  52.705% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  53.908% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-in-draw-h {
  0% {
    transform: scaleX(0);
  }
  53.898% {
    transform: scaleX(0);
  }
  53.908% {
    transform: scaleX(0);
    animation-timing-function: ease-in-out;
  }
  55.912% {
    transform: scaleX(1);
  }
  85.96199999999999% {
    transform: scaleX(1);
  }
  85.972% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(0);
  }
}

/* ── 2.3 loops, in motion: the desktop figure's clock as keyframes,
   generated in FeedbackLoops.tsx from the same numbers. A pulse slides
   along a line; the box it reaches lights for the dwell. ─────────────── */
.dd-loops .dd-box,
.dd-loops .dd-vpair i,
.dd-loops .dd-vpair-pulse {
  animation-duration: var(--dd-loop-cycle);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* the loop lanes are taller than the pair elsewhere, three dashes at the
   desktop figure's 18px pitch, and the two lines sit further apart; the
   labels sit 10px clear of the lines' outer edges (the 2px lines' outer
   edges are 15.5px from centre) */
.dd-loops .dd-vpair {
  height: 54px;
  gap: 28px;
}
.dd-loops .dd-vpair-down {
  right: calc(50% + 25.5px);
}
.dd-loops .dd-vpair-up {
  left: calc(50% + 25.5px);
}
/* at rest each lane is a shadow of its arrow: the dashes in a little of
   the faint ink, and the arrowhead, drawn in currentColor, the same; the
   keyframes light the arrowhead blue while the arrow's head is there */
.dd-loops {
  --dd-loop-shadow: color-mix(in srgb, var(--dd-faint) 35%, transparent);
}
.dd-loops .dd-vpair i {
  width: 2px;
  margin: 0 -0.5px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--dd-loop-shadow) 0 10px,
    transparent 10px 18px
  );
  color: var(--dd-loop-shadow);
}
/* dashes run from the end the arrow leaves: down from the top on the left
   line, up from the bottom on the right, so the far end is clear for the
   arrowhead, as on the desktop figure */
.dd-loops .dd-vpair i:last-of-type {
  background: repeating-linear-gradient(
    to top,
    var(--dd-loop-shadow) 0 10px,
    transparent 10px 18px
  );
}
.dd-loops .dd-vpair i:last-of-type .dd-vpair-pulse {
  background: repeating-linear-gradient(
    to top,
    var(--dd-accent) 0 10px,
    transparent 10px 18px
  );
}
/* the arrowhead: the desktop figure's chevron exactly, two 2px arms from
   the tip back 7px and out 3.5px each side (7.83px long, 26.57° off the
   line), round-ended; the arms are the line's two pseudo-elements, hinged
   at the tip */
.dd-loops .dd-vpair i::before,
.dd-loops .dd-vpair i::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: auto;
  bottom: auto;
  width: 2px;
  height: 7.83px;
  border: 0;
  border-radius: 1px;
  background: currentColor;
}
.dd-loops .dd-vpair i:first-of-type::before,
.dd-loops .dd-vpair i:first-of-type::after {
  bottom: 0;
  border: 0; /* outranks the base triangle's border-top, not just by source order */
  transform-origin: 50% 100%;
}
.dd-loops .dd-vpair i:first-of-type::before {
  transform: rotate(26.57deg);
}
.dd-loops .dd-vpair i:first-of-type::after {
  transform: rotate(-26.57deg);
}
.dd-loops .dd-vpair i:last-of-type::before,
.dd-loops .dd-vpair i:last-of-type::after {
  top: 0;
  border: 0;
  transform-origin: 50% 0;
}
.dd-loops .dd-vpair i:last-of-type::before {
  transform: rotate(26.57deg);
}
.dd-loops .dd-vpair i:last-of-type::after {
  transform: rotate(-26.57deg);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dd-mobile-figure *,
  .dd-mobile-figure *::before,
  .dd-mobile-figure *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── the subsection picker: one open at a time ────────────────────────── */
.dd-mobile-picker {
  margin-top: 24px;
  border-top: 1px solid var(--dd-rule);
}
.dd-mobile-picker-item {
  border-bottom: 1px solid var(--dd-rule);
}
.dd-mobile-picker-trigger {
  scroll-margin-top: 12px;
}
.dd-mobile-picker-trigger {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 13px 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
  color: var(--dd-muted);
}
.dd-mobile-picker-trigger > span:first-child {
  flex: none;
  color: var(--dd-accent);
}
.dd-mobile-picker-trigger > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.dd-mobile-picker-trigger > span:last-child {
  flex: none;
  color: var(--dd-accent);
}
.dd-mobile-picker-trigger[aria-expanded="true"] {
  color: var(--dd-ink);
}
.dd-mobile-picker-panel {
  padding: 12px 0 28px;
}
.dd-mobile-picker-panel > section {
  margin-top: 0;
}
.dd-mobile-picker-panel > section > h3 {
  display: none;
}
.dd-mobile-picker-panel > section > div {
  margin-top: 0;
}