/* Compact layout is presentation-only: it shares the desktop inputs and actions. */
.compact-only, .sidebar-scrim, .touch-draw-actions { display: none; }
@media (max-width: 1100px), (pointer: coarse) {
  :root { --compact-header: calc(60px + env(safe-area-inset-top, 0px)); }
  body { height: 100dvh; -webkit-text-size-adjust: 100%; }
  .app-view { height: 100dvh; }
  .compact-only { display: flex; }
  .topbar { height: var(--compact-header); grid-template-columns: minmax(0, 1fr) auto; padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
  .brand { gap: 8px; }
  .brand strong { font-size: 14px; white-space: normal; line-height: 1.3; }
  .brand > .brand-mark, .brand small, .topbar-center, .mode-badge, .user-meta { display: none; }
  .mobile-menu-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; }
  .topbar-actions { gap: 4px; }
  /* Keep every map child (including MapLibre markers) below the header menus. */
  .map-shell { isolation: isolate; }
  .topbar { z-index: 50; }
  .topbar-actions > .icon-button { display: none; }
  .topbar-actions > #compact-actions-button { display: grid; width: 44px; height: 44px; }
  .user-button { min-width: 44px; min-height: 44px; padding: 0; }
  .user-button > span:last-child { display: none; }
  .compact-actions { position: absolute; z-index: 50; top: 50px; right: 0; width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
  .compact-actions button, .user-menu button { display: block; width: 100%; min-height: 44px; padding: 10px; border: 0; text-align: left; background: white; font-size: 14px; }
  .workspace, .workspace.detail-open { grid-template-columns: minmax(0, 1fr); height: calc(100% - var(--compact-header)); }
  .sidebar { position: fixed; z-index: 42; top: var(--compact-header); bottom: 0; left: env(safe-area-inset-left, 0px); width: min(360px, 90vw); transform: translateX(calc(-100% - env(safe-area-inset-left, 0px) - 20px)); visibility: hidden; box-shadow: 12px 0 30px #152f4933; }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .sidebar-scrim { display: block; position: fixed; z-index: 41; inset: var(--compact-header) 0 0; border: 0; background: #12263866; }
  .compact-sidebar-header { align-items: center; justify-content: space-between; padding: 6px 12px; flex-shrink: 0; }
  .compact-sidebar-header strong { font-size: 14px; }
  #compact-search-slot { padding: 0 12px 10px; flex-shrink: 0; }
  .global-search { width: 100%; min-height: 44px; }
  .global-search kbd { display: none; }
  .sidebar-footer { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .sidebar select, .sidebar .project-card, .layer-row { min-height: 44px; }
  input:not([type=checkbox]):not([type=range]):not([type=radio]), select, textarea,
  .global-search input, #project-modal .form-grid input, #project-modal .form-grid select,
  .map-display-control select, .vertex-coordinate-editor input { font-size: 16px; }
  .close-button { min-width: 44px; min-height: 44px; }
  .primary-button, .secondary-button, .danger-button { min-height: 44px; }
  .map-toolbar { left: 10px; right: 116px; top: 8px; transform: none; max-width: 430px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .drawing-tools-toggle { position: absolute; z-index: 32; top: 8px; left: min(450px, calc(100% - 110px)); align-items: center; justify-content: center; min-width: 48px; min-height: 54px; padding: 0 8px; border: 1px solid #c7d7e6; border-radius: 9px; color: var(--navy); background: white; font-size: 13px; font-weight: 700; }
  .tools-collapsed .map-toolbar { display: none; }
  .tools-collapsed .drawing-tools-toggle { left: 10px; right: auto; min-height: 44px; padding: 0 14px; }
  .map-toolbar button { flex: 0 0 44px; width: 44px; height: 44px; }
  .map-toolbar, .touch-draw-actions { z-index: 31; }
  .toolbar-divider { flex: 0 0 1px; }
  .maplibregl-ctrl-top-right { top: 0; right: env(safe-area-inset-right, 0px); }
  .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .map-settings-button { position: absolute; z-index: 19; left: 10px; top: 74px; min-height: 44px; align-items: center; padding: 0 14px; border: 1px solid #c7d7e6; border-radius: 9px; color: var(--navy); background: white; font-weight: 700; box-shadow: 0 4px 12px #12345622; }
  .map-display-control, .workspace.geometry-editing .map-display-control { display: none; top: 124px; left: 10px; max-width: calc(100% - 72px); max-height: calc(100% - 160px); overflow-y: auto; padding: 10px; }
  .map-display-control.compact-open { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .map-display-control { z-index: 34; }
  .map-settings-button { z-index: 33; }
  .map-display-control select { width: 100%; height: 44px; }
  .map-display-control .map-label-toggle { display: flex; min-height: 44px; font-size: 13px; gap: 10px; }
  .map-label-toggle input { width: 20px; height: 20px; }
  .map-display-control button { height: 44px; font-size: 13px; }
  .map-legend, .beta-banner { display: none; }
  .map-status { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: env(safe-area-inset-bottom, 0px); }
  .map-status span:first-child { display: none; }
  .detail-panel { position: fixed; z-index: 35; top: var(--compact-header); bottom: 0; right: env(safe-area-inset-right, 0px); width: min(390px, 92vw); max-height: none; box-shadow: -12px 0 30px #152f4933; }
  .panel-footer { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .workspace.geometry-editing .detail-panel { display: none; }
  .vertex-edit-toolbar { left: 10px; right: 62px; top: 74px; max-width: none; transform: none; }
  .vertex-edit-toolbar { z-index: 32; }
  .vertex-edit-title { display: none; }
  .vertex-edit-toolbar button { min-width: 44px; height: 44px; font-size: 12px; flex-shrink: 0; }
  .vertex-edit-toolbar .desktop-label { display: none; }
  .vertex-edit-toolbar .mobile-label { display: inline; }
  .workspace.geometry-editing .map-settings-button { display: none; }
  .vertex-coordinate-editor { top: 136px; left: 10px; transform: none; width: calc(100% - 72px); flex-wrap: wrap; }
  .vertex-coordinate-editor { z-index: 33; }
  .vertex-coordinate-editor input { min-height: 44px; }
  .vertex-marker { width: 26px; height: 26px; touch-action: none; }
  .vertex-marker.selected { width: 30px; height: 30px; }
  .midpoint-marker { width: 24px; height: 24px; }
  .midpoint-marker::after { font-size: 14px; }
  .vertex-marker::before, .midpoint-marker::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .draw-hint { top: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 28px); max-width: 440px; line-height: 1.5; font-size: 12px; pointer-events: none; }
  .touch-draw-actions { display: flex; position: absolute; z-index: 31; left: 10px; right: 10px; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); gap: 6px; justify-content: center; }
  .touch-draw-actions button { min-height: 44px; padding: 6px 12px; border: 1px solid #c7d7e6; border-radius: 9px; background: white; font-size: 13px; }
  #draw-finish { color: white; background: var(--navy); }
  .radius-panel { z-index: 33; top: 124px; left: 10px; width: calc(100% - 72px); max-height: calc(100% - 240px); overflow-y: auto; }
  .modal-backdrop { top: var(--visual-top, 0px); bottom: auto; height: var(--visual-height, 100dvh); padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .modal, #project-modal { max-height: 100%; width: min(860px, 100%); }
  #project-modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  #project-modal .form-grid > .span-2, #project-modal .form-grid > .span-3, #project-modal .form-grid > .full { grid-column: 1 / -1; }
  #project-modal .form-grid > label { white-space: normal; }
  #project-modal .form-grid > label input, #project-modal .form-grid > label select { height: 44px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer button { flex: 1; }
  .toast-region { top: calc(var(--compact-header) + 8px); right: 10px; width: min(380px, calc(100vw - 20px)); }
  .login-view { height: 100dvh; overflow-y: auto; grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel { padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px)); }
  .mobile-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; }
}
@media (max-width: 540px) {
  .detail-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(60dvh, 540px); border-radius: 16px 16px 0 0; }
  .panel-header { padding: 10px 14px; }
  .panel-header h2 { font-size: 16px; }
  .panel-header .eyebrow { display: none; }
  .panel-content { padding: 12px 14px; }
  .panel-footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px)); }
  .panel-footer button { flex: 1 0 28%; padding: 6px; font-size: 12px; }
  #project-modal .form-grid { padding: 12px; }
  .modal-header { padding: 10px 12px; }
  .modal-header .eyebrow { display: none; }
  .modal-header h2 { font-size: 17px; }
  .modal-footer { padding: 8px 12px; }
  .form-section-heading { margin-top: 4px; }
  .login-card h2 { font-size: 26px; }
  .login-card > .muted { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}