/* Final phone-only live session layout.  Loaded last to override older desktop rules. */
@media screen and (max-width: 700px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }

  body[data-coach-page="session"][data-session-view="active"] .coach-page-shell,
  body[data-coach-page="session"][data-session-view="active"] .app-grid,
  body[data-coach-page="session"][data-session-view="active"] .page-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 12px !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel,
  body[data-coach-page="session"][data-session-view="active"] .live-panel,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel {
    display: block !important;
    flex: 0 0 auto !important;
    position: relative !important;
    inset: auto !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel { order: 1 !important; padding: 12px !important; }
  body[data-coach-page="session"][data-session-view="active"] .live-panel { order: 2 !important; padding: 16px !important; }
  body[data-coach-page="session"][data-session-view="active"] .progress-panel { order: 3 !important; padding: 16px !important; }

  body[data-coach-page="session"][data-session-view="active"] .live-panel *,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel * { min-width: 0; }

  body[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body[data-coach-page="session"][data-session-view="active"] .session-summary-grid,
  body[data-coach-page="session"][data-session-view="active"] .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row,
  body[data-coach-page="session"][data-session-view="active"] .last-verse-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row .button,
  body[data-coach-page="session"][data-session-view="active"] .last-verse-actions .button {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 12px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .progress-panel .list-grid,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel .result-list,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel .bucket-lists {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 390px) {
  body[data-coach-page="session"][data-session-view="active"] .live-panel,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel { padding: 12px !important; }
  body[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body[data-coach-page="session"][data-session-view="active"] .session-summary-grid,
  body[data-coach-page="session"][data-session-view="active"] .summary-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Phone and tablet Lite mode ends at the Show Details button. */
@media screen and (max-width: 1100px) {
  body[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body[data-coach-page="session"][data-session-view="active"] #current-answer-guide,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel,
  body[data-coach-page="session"][data-session-view="active"] .live-panel > #mobile-session-view-btn ~ * { display: none !important; }

  body[data-coach-page="session"][data-session-view="active"] #mobile-session-view-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    margin-top: 12px !important;
    justify-content: center !important;
  }

  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .timer-grid { display: grid !important; }
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] #current-answer-guide,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .progress-panel,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .live-panel > #mobile-session-view-btn ~ * { display: block !important; }
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .progress-panel { display: grid !important; }
}