/* Live dashboard flow overrides: keep the surface columnar and packed. */
@media (min-width: 1101px) {
  body[data-handler-mode="live"] .dashboard-form {
    display: block;
  }

  body[data-handler-mode="live"] .live-flow-grid {
    display: grid;
    grid-template-columns: minmax(16rem, .78fr) minmax(28rem, 1.5fr) minmax(16rem, .78fr);
    gap: .75rem;
    align-items: start;
    margin-top: .75rem;
  }

  body[data-handler-mode="live"] .live-flow-column {
    display: grid;
    gap: .75rem;
    align-content: start;
    min-width: 0;
  }

  body[data-handler-mode="live"] .live-left-column { grid-column: 1; }
  body[data-handler-mode="live"] .live-center-column { grid-column: 2; }
  body[data-handler-mode="live"] .live-right-column { grid-column: 3; }

  body[data-handler-mode="live"] .live-pressure-worse .panel-heading,
  body[data-handler-mode="live"] .live-pressure-better .panel-heading {
    margin-bottom: .55rem;
  }

  body[data-handler-mode="live"] .live-pressure-worse h2,
  body[data-handler-mode="live"] .live-pressure-better h2 {
    font-size: .86rem;
  }

  body[data-handler-mode="live"] .pressure-tray {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible;
    padding: .1rem 0 0;
  }

  body[data-handler-mode="live"] .pressure-tray .trigger-button,
  body[data-handler-mode="live"] .pressure-tray .wind-down-button {
    flex: initial;
    width: auto;
    min-height: 4.85rem;
  }

  body[data-handler-mode="live"] .scene-state-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  body[data-handler-mode="live"] .scene-state-button {
    min-height: 5.8rem;
  }

  body[data-handler-mode="live"] .scene-panel textarea[name="sceneState.primaryConsequence"] {
    min-height: 5.35rem;
  }

  body[data-handler-mode="live"] .roll-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    align-items: end;
  }

  body[data-handler-mode="live"] .roll-row .roll-mode {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-handler-mode="live"] .roll-row #roll-button {
    grid-column: 1 / -1;
    min-height: 2.55rem;
    width: 100%;
  }

  body[data-handler-mode="live"] .loop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-handler-mode="live"] .room-answer-fields,
  body[data-handler-mode="live"] .aftermath-live-layout {
    grid-template-columns: 1fr;
  }

  body[data-handler-mode="live"] .npc-summary-grid,
  body[data-handler-mode="live"] .operator-risk-strip {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  body[data-handler-mode="live"] .clock-panel + .roll-panel,
  body[data-handler-mode="live"] .roll-panel + .loop-panel,
  body[data-handler-mode="live"] .wind-down-panel + .aftermath-panel,
  body[data-handler-mode="live"] .aftermath-panel + .npc-panel {
    margin-top: 0;
  }

  body[data-handler-mode="prep"] .live-flow-grid,
  body[data-handler-mode="archive"] .live-flow-grid,
  body[data-handler-mode="prep"] .live-flow-column,
  body[data-handler-mode="archive"] .live-flow-column {
    display: contents;
  }

  body[data-handler-mode="archive"] .aftermath-panel {
    grid-column: 1 / -1;
  }

  body[data-handler-mode="archive"] .aftermath-live-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body[data-handler-mode="live"] .live-flow-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .75rem;
  }

  body[data-handler-mode="live"] .live-flow-column {
    display: grid;
    gap: .75rem;
  }

  body[data-handler-mode="live"] .live-states-row .scene-state-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-handler-mode="live"] .roll-row {
    grid-template-columns: 1fr;
  }

  body[data-handler-mode="live"] .roll-row .roll-mode,
  body[data-handler-mode="live"] .roll-row #roll-button {
    grid-column: 1;
  }

  .live-flow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: .75rem;
  }

  .live-flow-column {
    display: grid;
    gap: .75rem;
  }

  .live-flow-column,
  .live-pressure-row,
  .live-states-row,
  .live-work-row {
    grid-template-columns: 1fr;
  }
}