/* Phase 2: compact, scan-first Motion Review. */
@media (max-width: 760px) {
  .motion-page .page-header-row { margin-bottom:4px !important; }
  .motion-page .page-header-row > div > p:last-child { display:none !important; }

  .motion-page > .error,
  .motion-page > .motion-ai-notice { margin:6px 10px !important; }

  /* Temporary AI verification is operational status, not a hero card. */
  .motion-ai-overrides {
    margin:6px 10px 7px !important;
    padding:0 !important;
    border:1px solid #cfe1ed !important;
    border-radius:11px !important;
    background:#f5fbff !important;
    box-shadow:none !important;
    overflow:hidden;
  }
  .motion-ai-overrides > div:first-child {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:7px 9px !important;
    border-bottom:1px solid #dcebf3;
  }
  .motion-ai-overrides > div:first-child strong { font-size:11px !important; line-height:1.2; }
  .motion-ai-overrides > div:first-child span { display:none !important; }
  .motion-ai-overrides > div:first-child strong::before { content:'AI · '; color:var(--occ-mobile-blue); }
  .motion-ai-override {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
    min-height:44px !important;
    padding:6px 8px !important;
    border-top:0 !important;
  }
  .motion-ai-override + .motion-ai-override { border-top:1px solid #e5eff4 !important; }
  .motion-ai-override > span { min-width:0; }
  .motion-ai-override strong {
    display:block;
    font-size:11px !important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .motion-ai-override small {
    display:block;
    margin-top:1px;
    font-size:9px !important;
    line-height:1.2;
    color:var(--occ-mobile-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .motion-ai-override button { min-height:28px !important; padding:4px 7px !important; font-size:9px !important; }

  /* Filter surface stays available but stops consuming the first screen. */
  .motion-page .filter-bar { position:sticky; top:54px; z-index:20; background:rgba(255,255,255,.97) !important; backdrop-filter:blur(10px); }
  .motion-page .filter-bar summary { min-height:30px !important; }
  .motion-page .filter-bar[open] { box-shadow:0 7px 20px rgba(23,50,77,.12) !important; }

  /* Cards become compact media rows. */
  .motion-grid {
    display:block !important;
    margin:0 10px !important;
  }
  .motion-card {
    position:relative;
    display:grid !important;
    grid-template-columns:104px minmax(0,1fr) !important;
    align-items:stretch;
    gap:0 !important;
    margin:0 0 7px !important;
    padding:0 !important;
    border:1px solid var(--occ-mobile-line) !important;
    border-radius:11px !important;
    background:white !important;
    box-shadow:var(--occ-mobile-shadow) !important;
    overflow:hidden;
  }
  .motion-card.reviewed { opacity:1 !important; }
  .motion-card > a,
  .motion-card > a:first-of-type {
    grid-column:1;
    grid-row:1;
    display:block;
    width:104px;
    height:94px;
    overflow:hidden;
    background:#e8eef2;
  }
  .motion-card > a img,
  .motion-card > img,
  .motion-card .motion-placeholder {
    width:104px !important;
    height:94px !important;
    min-height:94px !important;
    object-fit:cover !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  .motion-placeholder { display:flex; align-items:center; justify-content:center; padding:6px; font-size:10px !important; text-align:center; }
  .motion-live-button {
    top:5px !important;
    left:5px !important;
    right:auto !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:11px !important;
    z-index:3;
  }
  .motion-card-body {
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:8px 9px !important;
    display:flex !important;
    flex-direction:column;
    gap:2px !important;
  }
  .motion-card-title { display:flex !important; align-items:baseline; gap:5px !important; min-width:0; }
  .motion-card-title strong { flex:0 1 auto; min-width:0; font-size:13px !important; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .motion-card-title span { flex:1 1 auto; min-width:0; font-size:10px !important; line-height:1.15; color:var(--occ-mobile-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .motion-card-body > time { font-size:9.5px !important; line-height:1.2; color:var(--occ-mobile-muted); }
  .motion-trigger-rule {
    margin:1px 0 !important;
    font-size:9.5px !important;
    line-height:1.2 !important;
    color:#526773;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .motion-trigger-rule strong { font-weight:600; }

  .motion-card-body > .ai-banner,
  .motion-ai-result,
  .motion-review-status {
    margin:3px 0 0 !important;
    padding:4px 6px !important;
    border-radius:7px !important;
    font-size:9.5px !important;
    line-height:1.2 !important;
  }
  .motion-review-status { display:flex !important; flex-direction:column; gap:1px; }
  .motion-review-status strong { font-size:10px !important; }
  .motion-review-status span { font-size:8.5px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .motion-ai-result strong { font-size:9.5px !important; }

  /* Mobile review actions are compact and wrap below the row instead of making the card huge. */
  .motion-card:not(.reviewed) { grid-template-rows:auto auto; }
  .motion-card:not(.reviewed) .motion-card-body { min-height:94px; }
  .motion-action-help-intro { display:none !important; }
  .motion-actions {
    grid-column:1 / -1;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px !important;
    margin:5px -1px -1px !important;
    padding-top:6px !important;
    border-top:1px solid #edf1f3;
  }
  .motion-review-action { min-width:0; }
  .motion-review-action > button:first-child,
  .motion-actions > button {
    width:100%;
    min-height:32px !important;
    padding:5px 4px !important;
    border-radius:7px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    white-space:normal;
  }
  .motion-review-action .ai-action-help-button { display:none !important; }
  .motion-review-action .ai-action-tooltip { display:none !important; }
  .motion-ai-start { grid-column:span 2; }
  .motion-action-help-panel { margin:5px 0 0 !important; padding:6px !important; font-size:9px !important; }

  /* Site mute is secondary on the event row. */
  .motion-card .site-motion-mute-control,
  .motion-card .motion-mute-control { margin:3px 0 0 !important; padding:5px 6px !important; font-size:9px !important; }

  /* Supporting dialogs follow the same dense language. */
  .motion-maintenance-form,
  .motion-ai-form { display:grid; gap:8px; }
  .motion-maintenance-form > p,
  .motion-ai-form > p { margin:0 !important; font-size:10px !important; }
  .motion-maintenance-fields,
  .motion-ai-fields { grid-template-columns:1fr 1fr !important; gap:7px !important; }
  .motion-maintenance-form .ai-closure-presets { display:flex !important; gap:4px !important; overflow-x:auto; padding-bottom:2px; }
  .motion-maintenance-form .ai-closure-presets button { flex:0 0 auto; min-height:30px !important; padding:5px 7px !important; font-size:9px !important; }

  .motion-page .empty-state { margin:18px 10px !important; }
}