/* Phones and tablets, every page: safe areas, touch-sized targets, and the narrow layouts (fleet drawer as a
   full-screen sheet, map panels as one bottom sheet over a toggle bar, admin side panel as a sheet). Loaded last.
   Touch sizing keys off the pointer, layout off the width, so a narrow desktop window gets the layout but keeps
   its compact buttons, and a tablet gets the big targets in the desktop layout. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Pixel fonts stay sharp: no synthetic bold or italic smearing the glyphs. */
body { font-synthesis: none; text-rendering: optimizeSpeed; }

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ---------- notches: the top bar grows by the inset and keeps its content clear of the corners ---------- */

.topbar {
  height: calc(var(--topbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  padding-left: max(16px, var(--safe-l));
  padding-right: max(16px, var(--safe-r));
}
.sheet, .sheet-backdrop { top: calc(var(--topbar-h) + var(--safe-t)); }
.sheet-body { padding-bottom: calc(30px + var(--safe-b)); }
.fleet { padding-left: max(clamp(12px, 2vw, 28px), var(--safe-l)); padding-right: max(clamp(12px, 2vw, 28px), var(--safe-r)); }
.toasts { bottom: calc(18px + var(--safe-b)); }

/* ---------- touch: 44 px targets, 16 px inputs (smaller ones make iOS zoom the page on focus) ---------- */

@media (pointer: coarse) {
  button, .btn, button.small, .btn.small, .seg button, select { min-height: 44px; min-width: 44px; }
  button.small, .btn.small { padding: 4px 12px 7px; font-size: 14px; }
  button.icon, .btn.icon { min-width: 44px; }
  /* No sticky hover colour or grey flash after a tap. */
  button, .btn, a, .tab { -webkit-tap-highlight-color: transparent; }
  .btn:not(:disabled):hover, button:not(:disabled):hover { color: var(--b-ink); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { min-height: 44px; font-size: 16px; }
  input[type="checkbox"] { width: 22px; height: 22px; }
  label.check { min-height: 44px; }
  .tab { min-height: 44px; }
  .admin-tab { height: 44px; }
  .leaflet-bar a, .leaflet-bar a:hover { width: 44px; height: 44px; line-height: 42px; }
  .float-head { min-height: 52px; }
  .list li { padding: 12px 6px; }
  .bot-card:hover { transform: none; box-shadow: var(--drop), inset 0 4px 0 var(--accent); }
  table.grid select, table.roles input.projects, table.roles tr.new-role input[name="name"], .sq-spacing input,
  .iso-bar select, .goto input, .goto button { min-height: 44px; }
  /* Square handles: a finger-sized hit area around the small drawn handle. */
  .leaflet-marker-icon.sq-handle::after { content: ""; position: absolute; inset: -16px; }
  /* The fleet's touch-only actions (drag and drop needs a mouse). */
  .touch-only { display: inline-flex; }
  /* Keyboard shortcuts mean nothing without a keyboard. */
  #help-btn { display: none; }
}
@media (max-width: 420px) {
  .panel-toggles button { font-size: 12px; }
}
@media not all and (pointer: coarse) { .touch-only { display: none !important; } }

/* ---------- phones: the top bar ---------- */

@media (max-width: 760px) {
  .topbar { padding-left: max(8px, var(--safe-l)); padding-right: max(8px, var(--safe-r)); }
}

@media (max-width: 600px) {
  :root { --topbar-h: 52px; }
  .topbar { gap: 4px; padding-left: max(8px, var(--safe-l)); padding-right: max(8px, var(--safe-r)); }
  .tabs { gap: 2px; }
  .tab { padding: 0 9px; font-size: 14px; }
  .topbar-actions { gap: 4px; margin-left: auto; }
  .topbar .who { padding: 3px 5px; }
  .topbar .who b { display: none; }
  /* Sign out as a door icon; the button keeps its text for screen readers. */
  .topbar [data-signout] { position: relative; width: 44px; min-width: 44px; padding: 0; font-size: 0; }
  .topbar [data-signout]::before {
    content: ""; width: 14px; height: 20px; background: #6b4429;
    box-shadow: inset 0 0 0 2px #2b1a0f, inset 3px 3px 0 2px #8a5a36;
  }
  .topbar [data-signout]::after { content: ""; position: absolute; left: 24px; top: 50%; width: 3px; height: 3px; margin-top: 1px; background: var(--mc-yellow); }
}
@media (max-width: 360px) {
  .tab { padding: 0 7px; font-size: 13px; }
  .brand-mark { width: 20px; height: 20px; }
}

/* ---------- fleet ---------- */

@media (max-width: 760px) {
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar h1 { flex: 1 1 auto; }
  .toolbar input { flex: 1 1 100%; }
  .bot-grid { grid-template-columns: minmax(0, 1fr); }
  .card-actions { gap: 6px; }
  .card-actions .fly-inline { flex-wrap: nowrap; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .cat.empty .bot-grid { min-height: 44px; }
  .fleet-cats { gap: 16px; }

  /* The drawer is a full-screen sheet over the top bar. */
  .sheet-backdrop { display: none; }
  .sheet {
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 960;
    height: 100vh; height: 100dvh; box-shadow: none; animation: sheet-up .16s steps(4);
  }
  .sheet-head { padding: calc(10px + var(--safe-t)) max(12px, var(--safe-r)) 10px max(12px, var(--safe-l)); gap: 10px; }
  .sheet-body { padding: 12px max(12px, var(--safe-r)) calc(24px + var(--safe-b)) max(12px, var(--safe-l)); }
  .facts { grid-template-columns: max-content minmax(0, 1fr); }
  .cmd { flex-wrap: wrap; }
  .cmd input { flex: 1 1 60%; }
  #chat-form { flex-wrap: nowrap; }
  #chat-form input { flex: 1 1 auto; }
  .log-head { flex-wrap: wrap; }
  .puller-list { overflow-x: auto; }
  dialog { padding: 16px; }

  /* The inventory window scales its slots to the screen. */
  .mc-window { --slot: min(36px, calc((100vw - 72px - var(--safe-l) - var(--safe-r)) / 9)); max-width: 100%; }
  .inv-view { gap: 10px; }
  .mc-tooltip { max-width: calc(100vw - 16px); }

  /* Remote viewer without touch controls: as wide as the phone. */
  .remote-dialog { width: 100vw; max-height: 100dvh; }
  .remote-bar { flex-wrap: wrap; }
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } }

/* Move to a category, the touch stand-in for drag and drop (panel.js). */
.move-menu { position: fixed; z-index: 1500; display: grid; gap: 6px; padding: 10px; min-width: 200px; }
.move-menu[hidden] { display: none; }
.move-menu .park-title { margin-bottom: 2px; }
.move-menu button { justify-content: flex-start; gap: 10px; }
.move-menu button .cat-pip { flex: none; }
@media (max-width: 760px) {
  .move-menu, .park-menu {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    padding: 12px max(12px, var(--safe-r)) calc(12px + var(--safe-b)) max(12px, var(--safe-l));
  }
  .park-menu { justify-content: center; }
}

/* ---------- map: panels as one bottom sheet over a toggle bar ---------- */

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .map-page { --tbar: calc(54px + var(--safe-b)); }
  .map-page .topbar-status { display: none; }
  .hud-left {
    top: 6px; left: max(6px, var(--safe-l)); right: max(6px, var(--safe-r)); width: auto; bottom: auto; max-height: none;
  }
  .hud-bar { padding: 6px; gap: 6px; }
  .hud-bar .seg button { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .goto { min-width: 0; flex: 1 1 140px; }

  .panel-toggles {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 640; width: auto;
    display: flex; flex-wrap: nowrap; gap: 3px;
    padding: 5px max(5px, var(--safe-r)) calc(5px + var(--safe-b)) max(5px, var(--safe-l));
    background: var(--surface); box-shadow: 0 -4px 0 rgba(0, 0, 0, .45);
  }
  .panel-toggles { overflow-x: auto; scrollbar-width: none; }
  .panel-toggles::-webkit-scrollbar { display: none; }
  .panel-toggles button { flex: 1 0 auto; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 13px; }
  .panel-toggles #help-btn { flex: 0 0 44px; }
  .helper { left: max(8px, var(--safe-l)); bottom: calc(var(--tbar) + 8px); right: max(8px, var(--safe-r)); }
  .helper-mascot { width: 48px; height: 58px; }
  .helper-panel { width: 100%; max-height: 55dvh; }
  .hud .float {
    position: fixed; left: 0; right: 0; bottom: var(--tbar); z-index: 630;
    max-height: min(50dvh, 440px); box-shadow: 0 -4px 0 rgba(0, 0, 0, .45);
  }
  .hud-right .float:not(.collapsed) { min-height: 0; }
  .hud-right .float[data-panel="bots"] { max-height: min(50dvh, 440px); }
  .hud .float-body { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); }
  .layer-list { grid-template-columns: 1fr; }

  .leaflet-bottom { bottom: var(--tbar); }
  .leaflet-bottom.leaflet-left { margin-left: max(8px, var(--safe-l)); }
  .leaflet-control-zoom { display: none; }   /* pinch to zoom */
  /* Under the HUD (z 500), so the coordinates readout never shows through a sheet. */
  .leaflet-control-container .leaflet-bottom, .leaflet-control-container .leaflet-top { z-index: 450; }

  /* Site detail and the square editor open as sheets from the bottom, above the toggle bar. */
  .site-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: 700;
    max-height: 78dvh; padding-bottom: var(--safe-b); box-shadow: 0 -4px 0 rgba(0, 0, 0, .5);
  }
  .site-panel .float-body { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); }
  .square-editor {
    position: fixed; left: 0; right: 0; bottom: 0; transform: none; width: auto; z-index: 700;
    padding-bottom: var(--safe-b); max-height: 70dvh; overflow-y: auto;
  }
  .shots { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .site-actions { flex-wrap: wrap; }
  .site-actions button { flex: 1 1 auto; min-height: 40px; }
  .site-panel .kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
  .counts { grid-template-columns: 1fr; }

  .v3-bar { bottom: calc(var(--tbar) + 8px); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
  .v3-filters { left: max(8px, var(--safe-l)); right: max(8px, var(--safe-r)); width: auto; bottom: calc(var(--tbar) + 72px); max-height: 45dvh; }
  .view3d .view3d-label { display: none; }
  .view3d canvas { touch-action: none; }
}
@media (max-height: 520px) and (pointer: coarse) {
  .map-page .topbar { --topbar-h: 44px; }
  .map-page .tab { height: 40px; min-height: 40px; }
  .hud .float, .hud-right .float[data-panel="bots"] { max-height: calc(100dvh - var(--tbar) - 60px); }
  .site-panel { max-height: calc(100dvh - 20px); }
}
.view3d canvas { touch-action: none; }

/* ---------- admin ---------- */

@media (max-width: 760px) {
  .admin-page { height: 100vh; height: 100dvh; }
  /* One row of tabs that scrolls sideways inside itself; the page never does. */
  .admin-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px max(6px, var(--safe-r)) 0 max(6px, var(--safe-l)); }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-tab { flex: none; }
  .topo-at { display: none; }
  #user-table th:nth-child(2), #user-table td:nth-child(2) { display: none; }
  .sec-bar { flex-wrap: wrap; padding: 6px max(8px, var(--safe-r)) 6px max(8px, var(--safe-l)); }
  .sec-bar .spacer { display: none; }
  .topo-summary { flex: 1 1 100%; flex-wrap: wrap; }
  .topo-legend { left: 8px; bottom: calc(8px + var(--safe-b)); gap: 10px; }
  /* Node and edge details open as a sheet from the bottom. */
  .topo-side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 800;
    max-height: 62dvh; border-left: 0; border-top: 2px solid #000; box-shadow: 0 -4px 0 rgba(0, 0, 0, .5);
    padding: 14px max(14px, var(--safe-r)) calc(14px + var(--safe-b)) max(14px, var(--safe-l));
  }
  .users { padding: 14px max(10px, var(--safe-r)) calc(40px + var(--safe-b)) max(10px, var(--safe-l)); gap: 14px; }
  .block { padding: 12px; }
  .block-head { flex-wrap: wrap; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input { flex: 1 1 60%; }
  .storage-tables td { white-space: normal; }
}