/* Static-demo refinement: master/detail layout for Activity & Audit. */
@media (min-width: 1181px) {
  .agent-activity-audit,
  *:has(> .agent-flow-view + .audit-inspector) {
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.45fr);
    align-items: start;
    gap: 18px;
  }

  *:has(> .agent-flow-view + .audit-inspector) > :not(.agent-flow-view, .audit-inspector) {
    grid-column: 1 / -1;
  }

  .agent-activity-audit > .agent-flow-view,
  *:has(> .agent-flow-view + .audit-inspector) > .agent-flow-view {
    grid-column: 1;
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow: auto;
    border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
    box-shadow: 0 10px 28px rgb(21 50 65 / 8%);
  }

  .agent-activity-audit > .agent-flow-view .agent-flow-canvas,
  *:has(> .agent-flow-view + .audit-inspector) > .agent-flow-view .agent-flow-canvas {
    height: clamp(460px, 58vh, 650px) !important;
  }

  .agent-activity-audit > .audit-inspector,
  *:has(> .agent-flow-view + .audit-inspector) > .audit-inspector {
    grid-column: 2;
    border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
    box-shadow: 0 10px 28px rgb(21 50 65 / 8%);
  }
}

@media (max-width: 1180px) {
  .agent-activity-audit,
  *:has(> .agent-flow-view + .audit-inspector) {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-activity-audit > .agent-flow-view,
  .agent-activity-audit > .audit-inspector,
  .agent-activity-audit > .audit-run-picker {
    min-width: 0;
  }
}