/* Keep the entire execution route selectable in one view. */
#route {
  min-height: calc(100svh - 64px);
  padding-block: clamp(1.25rem, 2.7vw, 2rem);
}

#route .section-heading {
  grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}

#route .section-heading h1 { font-size: clamp(1.45rem, 2.5vw, 2.4rem); }
#route .section-heading p { margin-top: .35rem; font-size: .78rem; line-height: 1.4; }

#route .scroll-story {
  grid-template-columns: minmax(0, 1.5fr) minmax(285px, .84fr);
  gap: clamp(.8rem, 2.25vw, 2.25rem);
  align-items: stretch;
}

#route .story-sticky { position: static; }
#route .story-figure {
  display: flex;
  flex-direction: column;
  min-height: clamp(18rem, calc(100svh - 17rem), 26rem);
  height: 100%;
  border: 0;
}

#route .story-figure-top { padding: .55rem .8rem; border: 0; }
#route .flow-entry { margin: .65rem 1rem .25rem; }
#route .flow-path { margin-inline: 1rem; padding: .45rem 0 .65rem; }
#route .flow-node { min-height: 100px; margin: .2rem .05rem; padding: .55rem .45rem; border: 0; }
#route .flow-blocked[data-state="active"] { box-shadow: inset 0 0 0 1px var(--obs-coral); }
#route .flow-node[data-route-node="0"] { min-height: 50px; }
/* Keep the blocked branch in place so hovering another node cannot shift the diagram. */
#route .flow-node[data-route-node="0"][data-state="hidden"] {
  display: flex;
  opacity: .34;
  background: #0e171b;
}

@media (hover: hover) and (pointer: fine) {
  #route .flow-node:not([data-state="active"]):hover { background-color: #14242a; }
}
#route .flow-node strong { font-size: .7rem; }
#route .flow-node small { font-size: .58rem; }
#route .story-readout { margin: auto 1rem 0; padding: .65rem 0 .75rem; }

#route .story-steps {
  grid-template-rows: repeat(6, minmax(0, 1fr));
  min-height: 0;
}

#route .story-steps button {
  min-height: 60px;
  padding: .35rem .75rem;
  border: 0;
  border-left: 3px solid transparent;
}

#route .story-steps button strong {
  margin-top: .1rem;
  font-size: .86rem;
  line-height: 1.25;
}

#route .story-steps button small {
  margin-top: .05rem;
  font-size: .64rem;
  line-height: 1.25;
}

#route .story-steps button:not([aria-current="step"]) { opacity: 1; }
#route .story-steps button[aria-current="step"] {
  border-left-color: var(--obs-coral);
  background: #14272c;
}

@media (max-width: 920px) {
  #route .section-heading { grid-template-columns: 1fr; gap: .2rem; }
  #route .scroll-story { display: flex; flex-direction: column; gap: .7rem; }
  #route .story-steps {
    order: -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  #route .story-steps button { min-height: 54px; padding: .3rem .55rem; }
  #route .story-steps button small { display: none; }
  #route .story-figure { min-height: 300px; height: auto; }
}

@media (max-width: 560px) {
  #route { padding-block: .8rem 1rem; }
  #route .section-heading h1 { font-size: 1.35rem; }
  #route .section-heading p { font-size: .72rem; }
  #route .story-figure { min-height: 0; }
  #route .flow-entry,
  #route .flow-path { display: none; }
  #route .story-readout { margin-top: 0; }
}

@media (max-width: 390px) {
  #route .story-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}