/* The phone dashboard has its own arrangement; tablet assets stay independent. */
@media (max-width:700px) {
  select {
    appearance:none; -webkit-appearance:none; height:44px; min-height:44px;
    line-height:20px; padding:8px 22px 8px 8px;
    background-image:linear-gradient(45deg,transparent 50%,var(--dc-text-muted) 50%),linear-gradient(135deg,var(--dc-text-muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat;
  }
  .app-shell { padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
  .masthead { min-height:68px; gap:8px; padding-top:env(safe-area-inset-top); }
  .identity { gap:8px; min-width:0; }
  .identity img { width:34px; height:34px; }
  .product-name { font-size:23px; }
  .company,.mode-chip { display:none; }
  .header-actions { flex-direction:row; gap:4px; }
  .header-actions .quiet-button { min-height:44px; padding:8px; font-size:12px; }
  .page-heading { margin:16px 0; align-items:flex-start; flex-wrap:wrap; gap:8px 14px; }
  .page-heading>div:first-child { flex:1 1 160px; min-width:0; }
  .page-heading h1 { font-size:25px; overflow-wrap:anywhere; }
  .eyebrow { margin-bottom:6px; }
  .connection-summary { align-items:flex-start; gap:4px; }
  .connection-summary .small-text { font-size:11px; }
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .panel { border-radius:12px; min-width:0; }
  .camera-panel .panel-heading { padding:12px; flex-wrap:wrap; gap:4px 12px; }
  .camera-stage { aspect-ratio:4/3; min-height:0; flex:none; }
  .camera-footer { padding:10px 12px; }
  .audio-controls { padding:0 12px 12px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #audio-status { grid-column:1/-1; grid-row:2; text-align:left; }
  .primary-button,.secondary-button { min-height:44px; font-size:14px; padding:10px 12px; }
  .control-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; gap:6px 12px; }
  .control-panel>.panel-heading { grid-column:1/-1; grid-row:1; }
  .armed-label { grid-column:1; grid-row:2; margin:8px 0 0; font-size:33px; }
  .armed-detail { grid-column:1; grid-row:3; margin:2px 0 0; font-size:11px; }
  #arm-toggle { grid-column:2; grid-row:2/4; align-self:center; margin:8px 0 0; }
  #recording-toggle { grid-column:1/-1; grid-row:4; margin:8px 0 0; }
  .control-divider { grid-column:1/-1; grid-row:5; margin:10px 0 6px; }
  .control-panel>label { grid-column:1/-1; grid-row:6; margin:0; font-size:12px; }
  .control-panel #camera-select { grid-column:1/-1; grid-row:7; }
  .control-panel .event-button { grid-column:1/-1; grid-row:8; margin:2px 0; }
  #command-status { grid-column:1/-1; grid-row:9; }
  #email-state { grid-column:1/-1; grid-row:10; }
  .control-note { margin:0; font-size:11px; overflow-wrap:anywhere; }
  .metrics-grid { gap:10px; margin-top:12px; }
  .metric-panel { padding:14px; }
  .reading { font-size:30px; margin:10px 0 6px; }
  .metric-panel .metric-label { font-size:9px; }
  .metric-panel .small-text { font-size:11px; }
  .location-panel { padding:14px; margin-top:12px; }
  .location-panel>.panel-heading { flex-wrap:wrap; gap:8px 12px; }
  .location-content { display:block; margin-top:12px; }
  .coordinates { font-size:20px; overflow-wrap:anywhere; }
  .trail-frame { width:100%; min-width:0; margin-top:12px; }
  .track-map-dialog { width:100vw; height:100dvh; margin:0; border:0; border-radius:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .track-map-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #track-google-link { grid-column:auto; }
  .events-section { margin-top:22px; }
  .event-card summary { display:grid; grid-template-columns:34px minmax(0,1fr) 12px; gap:6px 10px; padding:12px; }
  .event-icon { grid-column:1; grid-row:1/3; }
  .event-title { grid-column:2; grid-row:1; overflow-wrap:anywhere; }
  .event-status { grid-column:2; grid-row:2; margin:0; text-align:left; }
  .event-arrow { grid-column:3; grid-row:1/3; }
  .event-content { padding:12px; }
  .clip-info,.clip-actions { flex-wrap:wrap; }
  .clip-actions { gap:8px 14px; }
  .clip-actions a,.clip-sound { min-height:44px; display:inline-flex; align-items:center; }
  .app-footer { padding-bottom:max(20px,env(safe-area-inset-bottom)); flex-wrap:wrap; }
  .login-view { padding:36px 0 max(36px,env(safe-area-inset-bottom)); }

  /* Keep sections visible above one full-width, independently scrolling page. */
  .settings-layout {
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .settings-content { display:contents; }
  .settings-content>.settings-heading { grid-column:1; grid-row:1; padding:8px 12px; min-height:60px; }
  .settings-fullscreen #close-settings { width:44px; height:44px; min-height:44px; flex-basis:44px; }
  .settings-sidebar { grid-column:1; grid-row:2; padding:0; border-right:0; border-bottom:1px solid var(--dc-border); }
  .settings-brand { display:none; }
  .settings-navigation { position:relative; flex-direction:row; gap:6px; padding:6px 12px 10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scroll-padding-inline:12px; }
  .settings-nav-item { padding:10px 14px; min-height:44px; font-size:13px; white-space:nowrap; overflow-wrap:normal; text-align:center; }
  .settings-content>#tablet-settings-form,.settings-content>.settings-section {
    grid-column:1; grid-row:3; margin:0; padding:12px; min-width:0; min-height:0;
  }
  .settings-fullscreen #tablet-settings-form { padding:12px; gap:8px; overflow:hidden; }
  .settings-fullscreen #remote-settings-fields { overflow:auto; overscroll-behavior:contain; padding:6px 12px 6px 6px; scroll-padding:6px 12px 6px 6px; }
  .settings-fullscreen [data-settings-page=sensors] { height:auto; }
  .settings-fields { grid-template-columns:minmax(0,1fr); gap:14px; }
  .settings-fullscreen #remote-settings-status { font-size:11px; line-height:16px; }
  .settings-fullscreen #save-tablet-settings { width:100%; min-height:44px; align-self:stretch; }
  .settings-fullscreen .settings-footer button { min-height:44px; }

  .sensor-settings-grid { height:auto; min-height:0!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:none; gap:12px!important; }
  .sensor-mode,.sensor-coincidence { grid-column:1/-1!important; align-self:stretch; }
  .sensor-mode { font-size:12px!important; }
  .sensor-test-panel { padding:10px 12px; min-height:44px; }
  .trigger-label { font-size:13px; }
  .sensor-cards { display:flex; flex-direction:column; gap:12px; }
  .sensor-cards:has(.visual-camera-preview:not([hidden])) { align-items:stretch; }
  .sensor-control-card { padding:12px; display:block; min-height:0; }
  .sensor-control-card h4,.sensor-control-card .sensor-field-title { grid-column:1; grid-row:1; font-size:14px; line-height:20px; }
  .sensor-slider-row { grid-template-columns:minmax(0,1fr) 64px; gap:4px 8px; }
  .sensor-slider-row input.sensor-number { width:64px!important; height:40px; min-height:40px!important; }
  .sensor-control-card .sensor-number { grid-column:2!important; grid-row:1!important; }
  .sensor-control-card .sensor-reading { grid-row:2; font-size:12px; line-height:18px; }
  .sensor-reading-state { display:block; font-size:11px; }
  .sensor-control-card .sensor-scale { grid-row:3; }
  .sensor-control-card .sensor-scale-ends { grid-row:4; font-size:10px; line-height:12px; }
  .sensor-control-card[data-sensor-card=sound] { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .sensor-control-card[data-sensor-card=sound]>label { align-self:stretch; width:100%; }
  .sensor-sound-heading label { max-width:100%; }
  .sensor-sound-heading select { width:180px!important; }

  #recordings-dialog { width:100vw; height:100dvh; max-height:none; margin:0; border:0; border-radius:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  #recordings-dialog>.settings-heading { position:sticky; top:0; z-index:1; background:var(--dc-background-raised); padding-bottom:8px; margin-bottom:8px; }
  #recordings-dialog #close-recordings { min-height:44px; padding:8px; font-size:12px; }
  .storage-usage { flex-wrap:wrap; gap:4px 12px; }
  .storage-tools button { min-height:44px; }
}
@media (max-width:440px) {
  .track-map-heading { grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
  .track-map-heading h2 { grid-column:1; grid-row:1; }
  #close-track-map { grid-column:2; grid-row:1; }
  .track-map-layers { grid-column:1/-1; grid-row:2; justify-self:start; }
}
@media (max-width:360px) {
  .visual-preview-toggle span { display:none; }
  .settings-launcher { padding:10px; }
  .settings-launcher-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}