/* Mobile/responsive overrides — owned by the responsive agent. Layout only, no colours. */

/* global safety nets */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.tablewrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
img, svg { max-width: 100%; }

@media (min-width: 1101px) {
  /* Control room: map is a hero panel (fills the card width) above a compact table; legend overlays the map. */
  .grid2 { display: block; }
  .map { height: clamp(380px, 50vh, 540px); padding: 12px; border-right: 0; border-bottom: 1px solid var(--color-hairline); box-sizing: border-box; }
  .map .geo { aspect-ratio: auto; height: 100%; }
  .map > svg { height: 100%; width: 100%; }
  .map .legend { position: absolute; left: 24px; bottom: 24px; z-index: 5; padding: 6px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-buttons); background: color-mix(in srgb, var(--color-paper) 92%, transparent); box-shadow: var(--shadow-subtle); }
  .map.is-full { height: auto; }
  .map.is-full .geo { height: auto; }
  .map.is-full .legend { left: 28px; bottom: 28px; }
  .map.is-full .map-expand { top: 28px; right: 28px; }
  .map .geo .leaflet-bottom.leaflet-right { margin-bottom: 0; }
  /* compact table: single-line status reason (full text in title tooltip) */
  #dtTable th, #dtTable td { padding-left: 12px; padding-right: 12px; }
  #dtTable td { padding-top: 6px; padding-bottom: 6px; }
  #dtTable td .reason { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* tighter KPI row + feeder stats */
  .impact { gap: 10px; margin-bottom: 12px; }
  .kpi { padding: 14px 16px; }
  .kpi .lbl { font-size: 11px; letter-spacing: 0.03em; padding-right: 18px; }
  .kpi .val { font-size: 24px; margin-top: 4px; }
  .kpi .pot { margin-top: 0; font-size: 13px; }
  .kpi .i { top: 14px; right: 14px; }
  .feederline { padding: 10px 20px; gap: 8px 24px; }
  .feederline b { font-size: 16px; line-height: 1.3; }
}

@media (max-width: 1100px) {
  .chat { height: min(640px, 80vh); }
  header.top { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

@media (max-width: 768px) {
  main { padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  header.top { gap: 8px 12px; padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); flex-wrap: wrap; }
  .brand { order: 0; } .mode { order: 1; margin-left: auto; } #themeToggle { order: 2; }
  .feeder { order: 0; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mode { white-space: nowrap; }
  nav.tabs { order: 4; flex: 0 0 100%; width: 100%; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; height: 40px; padding: 0 16px; scroll-snap-align: start; }
  .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .tip { left: auto; right: 0; width: min(280px, calc(100vw - 32px)); }
  .kpi:nth-child(odd) .tip { left: 0; right: auto; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .geo { aspect-ratio: 4 / 3; }
  .chat { height: min(600px, 75vh); }
  .drawer { width: 100vw; border-right: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .drawer .dh { padding-top: calc(12px + env(safe-area-inset-top)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer .db > * { min-width: 0; max-width: 100%; }
  .drawer table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wo-grid, .rep-grid { grid-template-columns: minmax(0, 1fr); }
  .report, .evalbox, .bill-text, .msg { overflow-wrap: anywhere; }
  .report table, .evalbox table, .wo-detail-body table, #woDetail table, #billOut table { display: block; max-width: 100%; overflow-x: auto; }
  .report pre, .msg pre { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 560px) {
  /* sticky header stays two rows: [brand | feeder (ellipsis) | theme] + [tabs | mode badge] */
  header.top { column-gap: 8px; }
  header.top .feeder { font-size: 12px; line-height: 1.2; }
  header.top .brand { flex: 0 0 auto; }
  header.top nav.tabs { order: 3; flex: 1 1 calc(100% - 121px); width: auto; min-width: 0; } /* basis forces the wrap onto row 2 */
  header.top .mode { order: 4; margin-left: 0; flex: 0 0 auto; }
  header.top { row-gap: 4px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
}

@media (max-width: 640px) {
  /* touch targets (header.top prefix beats #themeToggle in theme-dark.css, which loads later) */
  header.top #themeToggle { width: 40px; height: 40px; border-radius: 20px; }
  .btn { height: 44px; padding: 0 16px; }
  .btn.sm { height: 40px; }
  .x { height: 40px; padding: 0 16px; }
  .toggle button { height: 40px; padding: 0 18px; }
  .chip { min-height: 40px; padding: 6px 14px; font-size: 13px; }
  tr.click td, #woTable td, #dtTable td { padding-top: 12px; padding-bottom: 12px; }
  .photos button { min-height: 44px; }
  .card .verdict-btns .btn { flex: 1 1 140px; }
  .wo-actions .btn, .wo-acts .btn { height: 40px; }

  /* iOS no-zoom inputs */
  input, select, textarea, .field, .chat input { font-size: 16px; }
  .field, .chat input { height: 44px; }
  .bill-form .field, .bill-form .btn { flex: 1 1 100%; }
  .bill-form .toggle { flex: 1 1 100%; }
  .bill-form .toggle button { flex: 1; }

  .panel .hd, .panel .bd { padding: 14px 16px; }
  .panel .hd .x, .rep-grid .hd .btn { margin-left: auto; }
  .kpi { padding: 14px; }
  .kpi .val { font-size: 24px; }
  .kpi .i { top: 12px; right: 12px; }
  .feederline { gap: 12px 20px; padding: 14px 16px; }
  .feederline div { flex: 1 1 40%; }

  /* chat: fixed-height log, form always visible */
  .chat { height: min(70vh, 560px); }
  .chat .hd { flex-wrap: nowrap; } .chat .hd #agentModel { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat .log { padding: 14px 16px; }
  .chat form { padding: 12px 16px 8px; padding-bottom: 8px; }
  .suggest { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(14px + env(safe-area-inset-bottom)); scrollbar-width: none; }
  .suggest::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; white-space: nowrap; }
  .msg.user { max-width: 92%; }

  /* tables */
  .tablewrap table { min-width: 460px; }
  #woTable { min-width: 480px; }
  #woTable td:first-child { white-space: nowrap; }
  #dtTable th, #dtTable td, #woTable th, #woTable td { padding-left: 10px; padding-right: 10px; }

  .kv { grid-template-columns: minmax(0, 1fr); }
  .drawer .dh { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .drawer .dh h3 { font-size: 16px; min-width: 0; flex: 1 1 60%; order: 0; }
  .drawer .dh h3 .sub { display: block; margin-top: 2px; }
  .drawer .dh .x { order: 1; margin-left: 0; flex: 0 0 auto; align-self: flex-start; }
  .drawer .dh .pill, .drawer .dh .btn { order: 2; }
  .drawer .dh .btn { flex: 1 1 auto; }
  .drawer .db { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .map { padding: 12px 16px; }
  body.m { max-width: none; }
  .card { margin: 12px 16px; padding: 16px; }
}

@media (max-width: 480px) {
  .impact { gap: 8px; }
  .kpi .lbl { font-size: 11px; padding-right: 18px; }
  .kpi .val { font-size: 22px; }
  .kpi .pot { font-size: 13px; }
  .brand { font-size: 17px; }
}

@media (max-width: 360px) {
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .kpi .tip, .kpi:nth-child(odd) .tip { left: 0; right: 0; width: auto; }
  .photos { gap: 6px; }
}

@media (max-width: 340px) {
  .impact { grid-template-columns: minmax(0, 1fr); }
}

/* bill report: stat blocks go 2-col (via .stats above), chart scales with the viewport */
@media (max-width: 480px) {
  .bill-stats { gap: 8px; }
  .bill-stats .stat { padding: 10px; }
  .bill-stats .stat .v { font-size: 18px; }
  .bill-legend { gap: 4px 12px; }
  .chart svg.bill-svg.wide .axis { font-size: 14px; }
  .bill-tips li { padding: 10px; }
}