.dynamic-graph-stage { grid-column: 1; grid-row: 2; min-width: 0; background: var(--recipe-surface); }
.dynamic-graph-stage__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-2); }
.dynamic-graph-stage__header h3 { margin: 0; font: 600 var(--recipe-font-heading)/1.2 var(--font-serif); }
.dynamic-graph-stage__header > p { max-width: 17rem; margin: 0; color: var(--recipe-muted); font-size: var(--recipe-font-compact); line-height: 1.45; }
.dynamic-graph-frame { position: relative; height: 34rem; border-top: 1px solid var(--recipe-line-soft); border-bottom: 1px solid var(--recipe-line-soft); background-color: var(--recipe-canvas); background-image: radial-gradient(var(--recipe-line) .8px, transparent .8px); background-size: 18px 18px; }
.dynamic-graph-frame::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3.5rem; border-bottom: 1px solid var(--recipe-line-soft); background: var(--recipe-surface); pointer-events: none; }
.dynamic-graph-canvas { position: absolute; inset: 3.5rem 0 0; }
.dynamic-graph-loading { position: absolute; top: 50%; left: 50%; width: min(20rem, 80%); transform: translate(-50%, -50%); margin: 0; padding: var(--s-3); border: 1px solid var(--recipe-line); background: var(--recipe-surface); text-align: center; }
.dynamic-graph-loading[hidden] { display: none; }
.dynamic-graph-nav { position: absolute; right: var(--s-3); left: var(--s-3); top: .375rem; display: flex; justify-content: flex-end; gap: var(--s-1); }
.dynamic-graph-nav[hidden] { display: none; }
.dynamic-graph-nav button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--recipe-line); border-radius: var(--recipe-radius-small); background: var(--recipe-surface); color: var(--recipe-ink); font-weight: 600; cursor: pointer; }
.dynamic-graph-nav button:hover { border-color: var(--recipe-accent-strong); }
.dynamic-graph-evidence { margin: 0; border-bottom: 1px solid var(--recipe-line); }
.dynamic-graph-evidence summary { min-height: var(--recipe-control-touch); padding: var(--s-3) var(--s-4); font-size: var(--recipe-font-control); font-weight: 600; cursor: pointer; }
.dynamic-graph-evidence [data-graph-evidence-list] { display: grid; gap: var(--s-1); max-height: 15rem; overflow: auto; padding: 0 var(--s-4) var(--s-3); }
.dynamic-graph-evidence button { min-height: var(--recipe-control-touch); padding: var(--s-2); border: 1px solid var(--recipe-line); background: var(--recipe-surface); color: var(--recipe-ink); text-align: left; cursor: pointer; }
.dynamic-graph-evidence button[aria-current="true"] { border-color: var(--recipe-accent-strong); background: var(--recipe-accent-wash); }
.dynamic-graph-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); color: var(--recipe-muted); font-size: var(--recipe-font-metadata); }
.dynamic-selected { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--recipe-line); }
.dynamic-selected h4 { margin: 0; font: 600 var(--recipe-font-subheading)/1.25 var(--font-serif); }
.dynamic-selected > p:not(.concept-eyebrow) { margin: var(--s-2) 0; color: var(--recipe-muted); font-size: var(--recipe-font-control); line-height: 1.5; }
.dynamic-selected [data-graph-selection-actions], .dynamic-graph-sheet [data-graph-sheet-actions] { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dynamic-selected button, .dynamic-graph-sheet [data-graph-sheet-actions] button { min-height: var(--recipe-control-touch); padding: var(--s-2) var(--s-3); border: 1px solid var(--recipe-line-strong); background: var(--recipe-surface); color: var(--recipe-ink); cursor: pointer; }
.dynamic-graph-sheet[hidden] { display: none; }
.dynamic-graph-sheet { display: none; }
@media (max-width: 820px) {
  .dynamic-graph-stage { order: 3; border-top: 1px solid var(--recipe-line); }
  .dynamic-selected { display: none; }
  .dynamic-graph-frame { height: 30rem; }
  .dynamic-graph-sheet:not([hidden]) { position: fixed; z-index: 1100; inset: 0; display: block; }
  .dynamic-graph-sheet__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: var(--recipe-overlay-backdrop); }
  .dynamic-graph-sheet__panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(70vh, 34rem); overflow: auto; padding: var(--s-5); border-radius: var(--recipe-radius-medium) var(--recipe-radius-medium) 0 0; background: var(--recipe-surface); box-shadow: var(--recipe-shadow-overlay); }
  .dynamic-graph-sheet__close { float: right; min-height: var(--recipe-control-touch); padding: 0 var(--s-3); border: 1px solid var(--recipe-line); background: var(--recipe-surface); cursor: pointer; }
  .dynamic-graph-sheet__panel h3 { clear: both; margin: var(--s-3) 0; font: 600 var(--recipe-font-title)/1.2 var(--font-serif); }
  .dynamic-graph-sheet__panel > p:not(.concept-eyebrow) { line-height: 1.5; }
}
@media (max-width: 560px) {
  .dynamic-graph-stage__header { display: block; }
  .dynamic-graph-stage__header > p { max-width: none; margin-top: var(--s-2); }
  .dynamic-graph-frame { height: 30rem; }
}

.dynamic-graph-nav [data-graph-motion] { margin-right: auto; }
.dynamic-graph-nav button[aria-pressed="true"] { background: var(--recipe-accent-wash); border-color: var(--recipe-accent-strong); }
.dynamic-graph-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.dynamic-graph-legend svg { width: 1rem; height: 1rem; flex: none; }