/* Mobile UI v29 — review follow-ups:
   - Sites list card: use the empty right-column space (coords line, top-aligned)
   - Motion card: stretch the thumbnail to the card height instead of leaving a
     dead white column beside a fixed 94px image
   - Rounds: the 5-up stat strip was unreadable at 7.5px; two balanced rows */
@media (max-width: 760px) {
  /* ---- Site detail: mute bell in the actions row ----
     mobile-v24 makes .motion-mute-icon-button position:absolute for the motion
     card; undo that here so it flows inline next to Edit / Photo Stream. */
  .site-detail-title-actions .motion-mute-icon-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    align-self: center !important;
  }

  /* ---- Settings modals: restore the Save / Cancel bar ----
     mobile-v3 has a blanket `footer { display:none !important }` (meant for the
     page footer) that also hides <footer class="ui-modal-actions"> in every
     settings edit modal, leaving no way to save on mobile. Put it back as a
     pinned bar at the bottom of the scrolling modal body. */
  footer.ui-modal-actions,
  .settings-modal-body .ui-modal-actions,
  .settings-modal .ui-modal-actions {
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px -12px -12px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #d7dde3 !important;
    background: #fff !important;
  }
  .settings-modal-body .ui-modal-actions button {
    flex: 1 1 auto !important;
    min-height: 42px !important;
  }
  .settings-modal-body .ui-modal-actions .round-unsaved-indicator {
    flex-basis: 100% !important;
    margin: 0 !important;
  }

  /* ---- Sites list card ---- */
  .site-card-footer {
    justify-content: flex-start !important;
    padding-top: 11px !important;
    gap: 5px !important;
  }
  .site-card-coords {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    color: var(--occ-mobile-muted) !important;
  }

  /* ---- Motion card thumbnail ----
     styles.css sets .motion-card { overflow:visible } and loads after the
     mobile overrides, so the square-cornered image pokes past the card's
     rounded corners. Clip it, and let the image fill the card height. */
  .motion-card { overflow: hidden !important; }
  .motion-card > a,
  .motion-card > a:first-of-type {
    height: auto !important;
    min-height: 94px !important;
    align-self: stretch !important;
  }
  .motion-card > a img,
  .motion-card > img {
    height: 100% !important;
    min-height: 94px !important;
    object-fit: cover !important;
  }

  /* ---- Rounds stat strip: 3 across, then 2 centered ---- */
  .rounds-ai-top-stats,
  .ai-summary-grid.rounds-ai-top-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .rounds-ai-top-stats .chart-card,
  .ai-summary-grid.rounds-ai-top-stats .chart-card:last-child {
    grid-column: auto !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 9px 4px !important;
  }
  .rounds-ai-top-stats .chart-card strong { font-size: 17px !important; }
  .rounds-ai-top-stats .chart-card span { margin-top: 3px !important; font-size: 9px !important; }

  /* ---- Cases: the "N open" status pill was stretched into a fake button ---- */
  .ui-page-actions .open-issues-total,
  .page-heading-actions .open-issues-total {
    flex: 0 0 auto !important;
    align-self: center !important;
    min-height: 0 !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  /* Keep the status chip on its own line above the case title, consistently. */
  .open-ai-case-top { display: block !important; }
  .open-ai-case-top > .ai-status { display: block !important; width: -moz-fit-content !important; width: fit-content !important; margin: 0 0 6px !important; }
  .open-ai-case-top > .muted { display: block !important; margin: 3px 0 0 !important; }

  /* ---- Photo Stream: reserve a soft tint for lazy images still loading ---- */
  .photo-stream-card img { background: #e9eef1 !important; }

  /* ---- Mute sheet: 5 duration chips clip at 393px; wrap to 3 + 2 ---- */
  .motion-mute-duration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .motion-mute-duration-grid button {
    height: auto !important;
    min-height: 40px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }
}