/* Content layouts: desktop continues to use styles.css without these rules. */
.mobile-chart-values, .mobile-comparison-hint, .mobile-calendar-hint { display: none; }
@media (max-width: 980px) {
  #app #overviewView .dashboard-analytics-grid { display: flex; flex-direction: column; }
  #app #overviewView .dashboard-analytics-grid > .campaign-status-panel { order: -1; }
  #app #overviewView .overview-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app #overviewView .overview-kpi-grid .kpi-card {
    display: grid !important; position: relative; width: auto; min-width: 0; min-height: 150px;
    margin: 0; padding: 16px 12px; animation: none; overflow-wrap: anywhere;
    grid-template-rows: minmax(40px, auto) minmax(44px, 1fr) auto !important;
  }
  #app #overviewView .overview-kpi-grid .kpi-card > strong { font-size: 20px; line-height: 1.6; }
  #app #overviewView .overview-kpi-grid .kpi-card > span { font-size: 13px; line-height: 1.8; }
  #app #overviewView .overview-kpi-grid .kpi-card > small { font-size: 12px; line-height: 1.8; white-space: normal; text-overflow: clip; }
  #app :is(#overviewView, #campaignsView) .line-chart { display: block; width: 100%; min-width: 0; height: auto; min-height: 150px; max-width: 100%; aspect-ratio: 820 / 300; }
  #app :is(#overviewView, #campaignsView) .line-legend { flex-wrap: wrap; gap: 12px; }
  #app :is(#overviewView, #campaignsView) .line-legend > span { background: var(--surface); color: var(--ink); }
  #app :is(#overviewView, #campaignsView) .chart-period-select { min-height: 44px; min-width: 100px; }
  .mobile-comparison-hint { display: block; color: var(--muted); font-size: 12px; }
  [data-mobile-comparison] { overflow-x: auto; max-width: 100%; }
  #app #overviewView .game-action-summary article { background: var(--surface); color: var(--ink); }
  .mobile-chart-values { display: block; margin-block: 10px; min-width: 0; }
  .mobile-chart-values summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 700; }
  .mobile-chart-values label { display: grid; gap: 8px; }
  .mobile-chart-values select { width: 100%; min-height: 44px; }
  .mobile-chart-values output { display: block; white-space: pre-line; padding-block: 12px; font-size: 14px; line-height: 2; }
}
@media (max-width: 980px) {
  /* Seven-day calendar fits the phone; date buttons open the existing campaign list. */
  #app .game-campaign-calendar-panel { overflow-x: visible; }
  #app :is(.game-campaign-calendar-grid, .game-campaign-calendar-weekdays) { min-width: 0; width: 100%; }
  #app .game-campaign-calendar-day { min-width: 0; min-height: 70px; padding: 4px; }
  #app .game-campaign-calendar-events { display: flex; flex-wrap: wrap; gap: 3px; }
  #app .game-campaign-calendar-event { padding: 3px; }
  #app .game-campaign-calendar-event span { display: none; }
  #app .game-campaign-calendar-controls button { min-width: 44px; min-height: 44px; }
  .mobile-calendar-hint { display: block; color: var(--muted); font-size: 12px; line-height: 1.8; }
  /* Existing list cards share the desktop filtering, pagination and handlers. */
  #app .campaign-mobile-card-head { align-items: start; gap: 12px; }
  #app .campaign-mobile-card .table-actions { min-width: 0; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
  #app .campaign-mobile-card .table-btn { min-height: 44px; min-width: 44px; }
  #app .campaign-mobile-card .campaign-mobile-detail-btn { width: auto; min-width: 80px; padding-inline: 12px; font-size: 14px; }
  #app .campaign-mobile-card :is(strong, small) { overflow-wrap: anywhere; }
  #app .campaign-mobile-secondary summary { padding: 12px 0; min-height: 44px; cursor: pointer; font-weight: 700; }
  #app .campaign-mobile-fields span { font-size: 12px; }
  #app .campaign-mobile-fields strong { font-size: 14px; }
  /* Full-screen detail surfaces retain the existing close and action nodes. */
  .mobile-detail-backdrop { padding: 0; align-items: stretch; }
  .mobile-detail-backdrop .modal {
    width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: auto; overscroll-behavior: contain;
  }
  .mobile-detail-backdrop .modal-close {
    position: sticky; top: 0; float: none; width: 44px; height: 44px; min-width: 44px; z-index: 5; margin-block-end: 12px;
  }
  .mobile-detail-backdrop :is(.modal-body, .campaign-detail-modal, .campaign-operation-summary-modal, .notification-preview-modal, .kpi-formula-modal) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .mobile-detail-backdrop .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .mobile-detail-backdrop .campaign-detail-summary article { min-height: 0; padding: 12px; }
  .mobile-detail-backdrop .campaign-detail-summary strong { font-size: 18px; }
  .mobile-detail-backdrop .campaign-detail-mobile-list { display: none; }
  /* Reflow canonical rows, so asynchronous engagement updates stay in sync. */
  .mobile-detail-backdrop .table-wrap:has(.mobile-record-table) { display: block; overflow: visible; margin: 0; padding: 0; }
  .mobile-detail-backdrop .mobile-record-table { display: block; width: 100%; min-width: 0; }
  .mobile-record-table thead { display: none; }
  .mobile-record-table :is(tbody, tfoot) { display: grid; gap: 12px; }
  .mobile-record-table :is(tbody, tfoot) tr { display: grid; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
  .mobile-record-table :is(tbody, tfoot) :is(td, th) { display: block; width: auto; min-width: 0; max-width: 100%; padding: 8px 0; white-space: normal; overflow-wrap: anywhere; }
  .mobile-record-table :is(tbody, tfoot) :is(td, th)::before { content: attr(data-mobile-label); display: block; color: var(--muted); font-size: 12px; line-height: 2; font-weight: 500; }
  .mobile-record-table td[colspan]::before { content: none; }
  .mobile-detail-backdrop .table-actions { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .mobile-detail-backdrop :is(button, select, summary) { min-height: 44px; }
  .mobile-detail-backdrop pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Participant details are opened explicitly and fill the viewport on phones. */
  .approval-summary.is-open .approval-tooltip {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; z-index: 50;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .approval-summary.is-open .approval-tooltip::before { display: none; }
  .approval-tooltip-head { position: sticky; top: 0; }
  .approval-tooltip-close { min-width: 44px; min-height: 44px; }
  .approval-detail-item { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  #app #overviewView .overview-kpi-grid { grid-template-columns: minmax(0, 1fr); }
}