.diagram {
  top: 12px;
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}
.diagram-heading {
  display: block;
}
.diagram-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.diagram .kicker {
  color: var(--orange2);
  margin-bottom: 4px;
}
.diagram h2 {
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0 0 10px;
}
.diagram-control {
  flex: none;
  min-height: 38px;
  border: 1px solid var(--orange);
  background: transparent;
  color: var(--orange2);
  padding: 7px 10px;
  font: 500 .7rem var(--mono);
  white-space: nowrap;
}
.diagram-control:hover:not(:disabled) {
  background: var(--orange);
  color: var(--navy);
}
.diagram-control:disabled { opacity: .45; cursor: not-allowed; }
.diagram-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--orange2);
  margin: 3px 0 10px;
  font: 500 .72rem var(--mono);
}
.diagram-toolbar label { white-space: nowrap; }
.diagram-toolbar output { display: inline-block; min-width: 44px; }
.diagram-toolbar input {
  accent-color: var(--orange);
  min-width: 45px;
  width: 100%;
  cursor: pointer;
}
.zoom-button { font: 700 1.25rem/1 var(--display); min-width: 38px; padding: 7px; }
.diagram-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  scrollbar-color: var(--orange) var(--navy2);
  overscroll-behavior: contain;
  border: 1px solid #824b1c;
  background: var(--green);
}
.diagram-flow {
  display: block;
  width: var(--diagram-zoom, 100%);
  max-width: none;
  height: auto;
  margin: 0 auto;
}
.flow-node rect {
  fill: var(--navy);
  stroke: var(--orange);
  stroke-width: 2;
}
.flow-node text {
  font: 500 20px var(--display);
  fill: var(--orange2);
  text-anchor: middle;
}
.flow-intro text { font-size: 19px; }
.flow-subtitle { font-size: 15px; }
.flow-note { font-size: 13px; }
.flow-caption {
  fill: var(--orange2);
  text-anchor: middle;
  font: 500 15px var(--mono);
}
.route {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route.is-current { stroke: var(--orange2); stroke-width: 5; }
.flow-node.is-current rect {
  fill: #24194d;
  stroke: var(--orange2);
  stroke-width: 5;
}
.flow-node.is-done rect { stroke: var(--orange2); stroke-width: 3; }
.flow-node.is-current text { fill: #fff4d2; }
.diagram .status { margin-top: 10px; color: var(--orange2); }
.diagram-hint { color: var(--orange2); font: 500 .66rem var(--mono); margin-top: 3px; }
.diagram.is-collapsed { max-height: none; }
.diagram.is-collapsed .status { margin-top: 2px; }
.map-head { margin-bottom: 18px; }
#choices, #reasoning { scroll-margin-top: 24px; }

@media (max-width: 900px) {
  .diagram {
    position: sticky;
    top: 0;
    z-index: 3;
    max-height: calc(100dvh - 12px);
    padding: 12px;
  }
  .diagram h2 { font-size: 1.1rem; }
  .diagram-toolbar { gap: 5px; }
  .diagram-control { min-height: 34px; padding: 5px 8px; }
  #choices, #reasoning { scroll-margin-top: var(--diagram-offset, 290px); }
}
@media (max-width: 600px) {
  .diagram { max-height: 62dvh; }
}
@media (max-width: 420px) {
  .diagram h2 { font-size: 1rem; }
  .diagram-toolbar { flex-wrap: wrap; }
  .diagram-toolbar input { flex: 1; }
  .diagram-toolbar label { order: 0; }
}