/* Mobile UI v4 — real-device cleanup based on iPhone screenshots. */
@media (max-width: 760px) {
  :root {
    --m4-gap:6px;
    --m4-radius:10px;
  }

  /* Global density and overflow protection */
  .app main { padding-left:8px !important; padding-right:8px !important; }
  .page-header-row, .page-heading-row { padding-left:8px !important; padding-right:8px !important; }
  .page-header-row h2, .page-heading-row h2 { font-size:19px !important; }
  .page-header-actions { margin-top:4px !important; }
  .page-header-actions > button, .page-header-actions > a { min-height:32px !important; padding:5px 9px !important; }
  .filter-bar { margin-left:8px !important; margin-right:8px !important; }
  .filter-bar summary { min-height:30px !important; }
  .muted { line-height:1.25 !important; }
  table, section, article, fieldset, .chart-card, .settings-card { min-width:0; max-width:100%; }
  input, select, textarea, button { max-width:100%; }

  /* Sites: keep the good row layout, remove leftover dead space. */
  .welcome-time { margin:5px 8px !important; }
  .sites-page .filter-bar, .site-list-page .filter-bar { margin-top:4px !important; }
  .site-card { margin-left:8px !important; margin-right:8px !important; margin-bottom:5px !important; }
  .site-card-main { min-height:64px !important; grid-template-columns:64px minmax(0,1fr) !important; }
  .site-card-main > img, .site-card-main > .thumbnail, .site-card-main > .thumb-placeholder { width:64px !important; min-width:64px !important; height:64px !important; }
  .site-card-footer { padding:6px 8px !important; }
  .site-card-photo-time { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Rounds landing: turn actions into a compact toolbar and collapse stats further. */
  .rounds-ai-page .page-header-actions { display:grid !important; grid-template-columns:1fr 1fr !important; width:100%; gap:4px !important; }
  .rounds-ai-page .page-header-actions > :last-child:nth-child(3) { grid-column:1 / -1; }
  .rounds-ai-page .page-header-actions > * { width:100% !important; min-height:32px !important; }
  .rounds-ai-top-stats, .ai-summary-grid.rounds-ai-top-stats {
    margin:0 8px 6px !important;
    grid-template-columns:repeat(5,minmax(58px,1fr)) !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rounds-ai-top-stats::-webkit-scrollbar { display:none; }
  .rounds-ai-top-stats .chart-card { min-height:54px !important; padding:5px 3px !important; }
  .rounds-ai-top-stats .chart-card strong { font-size:16px !important; }
  .rounds-ai-top-stats .chart-card span { font-size:7.5px !important; }
  .rounds-ai-page .workflow-priority-heading,
  .rounds-ai-page .reference-review-schedule,
  .rounds-ai-page .chart-card { box-shadow:none !important; }
  .rounds-ai-page section { margin-bottom:6px !important; }

  /* AI report list: one-column hierarchy, no cramped desktop-style right column. */
  .ai-run-list.mobile-card-list tr {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:7px 8px !important;
    gap:3px 7px !important;
  }
  .ai-run-list.mobile-card-list td { font-size:9.5px !important; line-height:1.22 !important; }
  .ai-run-list.mobile-card-list td:first-child { grid-column:1 / -1 !important; grid-row:auto !important; }
  .ai-run-list.mobile-card-list td[data-label="Site / dates"],
  .ai-run-list.mobile-card-list td[data-label="Severity"],
  .ai-run-list.mobile-card-list td[data-label="Findings"],
  .ai-run-list.mobile-card-list td[data-label="Saved-result gaps"],
  .ai-run-list.mobile-card-list td[data-label="Review"] { grid-column:1 !important; }
  .ai-run-list.mobile-card-list td[data-label="Actions"] { grid-column:2 !important; grid-row:2 / span 5 !important; align-self:end; }
  .ai-run-list.mobile-card-list .button-link { white-space:nowrap; }

  /* Cases landing: category rows should be list-like, not giant cards. */
  .open-issues-page .page-header-actions { margin-bottom:3px !important; }
  .case-type-grid, .issue-type-grid, .case-summary-grid { margin:3px 8px 6px !important; gap:4px !important; }
  .case-type-grid > *, .issue-type-grid > *, .case-summary-grid > * { min-height:50px !important; padding:6px 8px !important; }
  .case-type-grid h3, .issue-type-grid h3, .case-summary-grid h3 { font-size:12px !important; }
  .case-type-grid p, .issue-type-grid p, .case-summary-grid p { font-size:8.5px !important; }
  .open-issues-page h2, .open-issues-page h3 { margin-top:7px !important; }

  /* Individual case cards: readable but much shorter. */
  .manual-case-card, .ai-monitoring-case-card, .case-card, .open-issue-card {
    padding:10px !important;
    margin:0 8px 7px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  .manual-case-card h3, .ai-monitoring-case-card h3, .case-card h3, .open-issue-card h3 { font-size:15px !important; line-height:1.2 !important; margin:5px 0 !important; }
  .manual-case-card p, .ai-monitoring-case-card p, .case-card p, .open-issue-card p { margin:4px 0 !important; font-size:11px !important; line-height:1.3 !important; }
  .manual-case-card .latest-comment, .ai-monitoring-case-card .latest-comment, .case-card .latest-comment, .open-issue-card .latest-comment { padding:7px 8px !important; }
  .manual-case-card footer, .ai-monitoring-case-card footer, .case-card footer, .open-issue-card footer { gap:5px !important; }
  .manual-case-card button, .ai-monitoring-case-card button, .case-card button, .open-issue-card button { min-height:34px !important; padding:5px 8px !important; font-size:10px !important; }

  /* Motion: make mute a tiny inline control and action buttons a compact 2x2/3 layout. */
  .motion-page .page-header-row > div > p { display:none !important; }
  .motion-grid { margin-left:8px !important; margin-right:8px !important; }
  .motion-card { grid-template-columns:78px minmax(0,1fr) !important; }
  .motion-card > a, .motion-card > a:first-of-type,
  .motion-card > a img, .motion-card > img, .motion-card .motion-placeholder { width:78px !important; height:72px !important; min-height:72px !important; }
  .motion-card-body { padding:5px 6px !important; }
  .motion-card .site-motion-mute-control,
  .motion-card .motion-mute-control {
    display:grid !important;
    grid-template-columns:auto auto !important;
    justify-content:start !important;
    width:max-content !important;
    max-width:100% !important;
    padding:2px !important;
    background:transparent !important;
    border:0 !important;
  }
  .motion-card .site-motion-mute-control select,
  .motion-card .motion-mute-control select { width:74px !important; }
  .motion-card .site-motion-mute-control button,
  .motion-card .motion-mute-control button { white-space:nowrap; }
  .motion-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:3px !important; padding-top:4px !important; }
  .motion-review-action > button:first-child, .motion-actions > button { min-height:30px !important; padding:4px 3px !important; font-size:8.5px !important; }

  /* Settings resource pages: strip desktop-table semantics and hide raw coords on list view. */
  .settings-page .page-header-row, .setup-page .page-header-row { padding-bottom:2px !important; }
  .settings-resource-heading { margin:4px 0 6px !important; }
  .settings-resource-heading h3 { font-size:16px !important; }
  .settings-resource-heading .primary-action { min-height:32px !important; }
  .settings-user-table tr, .setup-site-list tr:not(.setup-site-empty), .settings-map-table tr {
    margin-bottom:5px !important;
    padding:7px 8px !important;
    border-radius:9px !important;
    box-shadow:none !important;
  }
  .setup-site-list td[data-label="Latitude"], .setup-site-list td[data-label="Longitude"] { display:none !important; }
  .setup-site-list td[data-label="Actions"] { align-self:end; }
  .setup-site-list .mobile-card-actions button { min-width:0 !important; }

  /* Spokes: URLs are secondary technical detail, actions stay on one row. */
  .settings-spoke-table tr, .spoke-list tr { padding:8px !important; margin-bottom:5px !important; }
  .settings-spoke-table td[data-label="Pi base URL"], .spoke-list td[data-label="Pi base URL"] { font-size:9px !important; color:var(--m3-muted) !important; overflow-wrap:anywhere; }
  .settings-spoke-table td[data-label="Actions"] .mobile-card-actions,
  .spoke-list td[data-label="Actions"] .mobile-card-actions { display:grid !important; grid-template-columns:1fr 1fr !important; gap:4px !important; }

  /* System Health: categories are rows; detail metrics are compact tiles. */
  .diagnostics-page .page-header-row, .system-health-page .page-header-row { padding-bottom:4px !important; }
  .diagnostics-category { margin:0 8px 5px !important; border-radius:9px !important; box-shadow:none !important; }
  .diagnostics-category > summary { min-height:48px !important; padding:7px 9px !important; }
  .diagnostics-category > summary strong { font-size:13px !important; }
  .diagnostics-category > summary span, .diagnostics-category > summary small { font-size:9px !important; }
  .diagnostics-category[open] > summary { border-bottom:1px solid var(--m3-line); }
  .diagnostics-category .chart-grid, .diagnostics-grid { gap:5px !important; }
  .diagnostics-category .chart-card, .diagnostics-category .metric-card { min-height:64px !important; padding:8px !important; }
  .diagnostics-category .chart-card strong, .diagnostics-category .metric-card strong { font-size:18px !important; }
  .diagnostics-category .chart-card span, .diagnostics-category .metric-card span { font-size:9px !important; }
  .camera-maintenance-result { padding:8px !important; margin-bottom:5px !important; }
  .camera-maintenance-result p { font-size:10px !important; line-height:1.28 !important; }

  /* AI run/finding detail: rebuild desktop comparison into a phone-first vertical viewer. */
  .ai-run-detail-page, .ai-run-detail, .ai-analysis-detail { max-width:100% !important; overflow-x:hidden !important; }
  .ai-run-detail-page .page-header-row, .ai-run-detail .page-header-row { padding-bottom:4px !important; }
  .ai-review-images {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }
  .ai-review-images > section { min-width:0 !important; width:100% !important; padding:0 !important; }
  .ai-image-heading {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:5px !important;
    min-width:0;
    padding:5px 0 !important;
  }
  .ai-image-heading h4 { margin:0 !important; font-size:13px !important; line-height:1.2 !important; min-width:0; }
  .ai-image-heading h4 span { display:block; margin-top:1px; font-size:9px !important; font-weight:500 !important; color:var(--m3-muted); }
  .ai-marker-toggle { min-height:28px !important; padding:4px 6px !important; font-size:8px !important; white-space:nowrap; }
  .ai-review-image-stage, .ai-review-image-wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9;
    overflow:hidden !important;
    background:#071019 !important;
  }
  .ai-review-image-wrap img {
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
  }
  .ai-comparison-selector {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    max-width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:2px 0 !important;
    scrollbar-width:none;
  }
  .ai-comparison-selector::-webkit-scrollbar { display:none; }
  .ai-comparison-selector button { flex:0 0 auto !important; min-height:30px !important; padding:4px 8px !important; font-size:9px !important; white-space:nowrap; }
  .ai-weather-context { margin:6px 0 !important; padding:0 !important; }
  .ai-weather-context summary { min-height:36px !important; padding:6px 8px !important; font-size:11px !important; }
  .ai-weather-facts { display:flex !important; flex-wrap:wrap !important; gap:4px !important; padding:6px 8px !important; }
  .ai-weather-facts span { padding:3px 6px !important; font-size:8.5px !important; }
  .ai-weather-context p.muted { display:none !important; }
  .ai-review-navigation, .ai-finding-navigation { position:sticky !important; top:46px; z-index:30; padding:5px !important; gap:5px !important; }
  .ai-review-navigation button, .ai-finding-navigation button { min-height:34px !important; padding:5px 8px !important; font-size:10px !important; }
  .ai-review-navigation strong, .ai-finding-navigation strong { font-size:11px !important; white-space:nowrap; }
  .ai-review-actions, .ai-finding-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:4px !important; }
  .ai-review-actions button, .ai-finding-actions button { min-height:34px !important; padding:5px 6px !important; font-size:9px !important; }
  .ai-analysis-detail p, .ai-run-detail p, .ai-run-detail-page p { font-size:10px !important; line-height:1.32 !important; }

  /* Generic technical metric cards should be denser than phone dashboard cards. */
  .diagnostics-category .summary-grid,
  .diagnostics-category .stats-grid,
  .system-health-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:5px !important; }

  /* Give the fixed nav breathing room without hiding the last row. */
  .app { padding-bottom:calc(70px + env(safe-area-inset-bottom)) !important; }
}