/* Narrow-screen corrections; desktop tool and workspace layouts remain unchanged. */
.mobile-navigation-toggle, .mobile-sidebar-backdrop { display: none; }
@media (max-width: 1024px) {
  body > header { flex-wrap: wrap; gap: 8px; height: auto; }
  body > header h1 { min-width: 0; overflow-wrap: anywhere; }
  body > main { min-width: 0; }
  [role="dialog"] { min-width: 0 !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto; }
  [role="dialog"] :is(input, select, textarea) { max-width: 100%; min-width: 0; }
  [role="dialog"] :is(.point-tabs, .polygon-object-tabs, .tabs, .tab-bar) { overflow-x: auto; flex-wrap: nowrap; }
  [role="dialog"] :is(.point-tabs, .polygon-object-tabs, .tabs, .tab-bar) > button { flex-shrink: 0; }
  [role="dialog"] :is(.point-panel-header, .point-panel-footer, .modal-header, .modal-footer) { flex-wrap: wrap; }
  body[data-easypath-page="teaching"] .entity-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-easypath-page="teaching"] .entity-summary { white-space: normal; }
  body[data-easypath-page="authorization"] .add-account-grid { grid-template-columns: minmax(0, 1fr); }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) #status { overflow-x: auto; }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) #status > * { flex-shrink: 0; }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .server-file-panel:not([hidden]) {
    inset: 12px; width: auto; max-width: none;
    display: flex; flex-direction: column;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px); overflow: auto;
  }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .server-file-panel > * { flex-shrink: 0; }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .server-file-panel .server-file-list { min-height: 96px; max-height: 240px; }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .server-file-panel .server-file-note { overflow-wrap: anywhere; }
  body[data-easypath-page="annotation"] .server-file-picker-header {
    top: -14px; margin: -14px -14px 0; padding: 14px 14px 8px;
  }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) { height: var(--mobile-viewport-height, 100dvh); }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) :is(.app, .app.sidebar-collapsed) {
    height: var(--mobile-viewport-height, 100dvh); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transition: none;
  }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .app > aside {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: min(340px, calc(100vw - 48px));
    max-height: var(--mobile-viewport-height, 100dvh); height: var(--mobile-viewport-height, 100dvh); overflow: auto;
    background: var(--panel, var(--surface, #fff)); padding: 14px; padding-bottom: max(16px, env(safe-area-inset-bottom)); transition: none;
    box-shadow: 6px 0 24px #0004;
  }
  body:is([data-easypath-page="viewer"], [data-easypath-page="annotation"]) .app.sidebar-collapsed > aside { visibility: hidden; pointer-events: none; }
  .app:not(.sidebar-collapsed) > .mobile-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 79; background: #0005; border: 0; border-radius: 0; }
  .viewer-wrap .sidebar-expand { top: 8px; left: 8px; width: 40px; height: 40px; }
  .app .viewer-wrap .slide-preview-dock { left: 54px; right: 8px; top: var(--mobile-preview-top, 8px); width: auto; }
  .viewer-wrap :is(.slide-preview-dock, .slide-preview-actions, .annotation-tools, .viewer-tools) { gap: 4px; flex-wrap: wrap; }
  .viewer-wrap .annotation-tools { left: 8px; right: 8px; width: auto; top: var(--mobile-annotation-top, 54px); transform: none; justify-content: flex-start; }
  .viewer-wrap .viewer-tools { left: 8px; right: 8px; width: auto; top: var(--mobile-tools-top, 100px); justify-content: flex-end; }
  .viewer-wrap :is(.slide-preview-button, .annotation-tool-button, .viewer-tool-button) { width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; }
  .viewer-wrap .mobile-navigation-toggle { display: inline-flex; }
  .mobile-navigation-icon { display: block; width: 22px; height: 22px; background: currentColor; mask: url('/static/vendor/lucide/sliders-horizontal.svg') center / contain no-repeat; }
  .viewer-wrap:not(.mobile-navigation-open) .nav-panel { display: none; }
  .viewer-wrap .nav-panel { left: auto !important; right: 8px; bottom: 34px; width: min(340px, calc(100% - 16px)); z-index: 52; background: var(--panel, var(--surface, #fff)); }
  .viewer-wrap.mobile-navigation-open .minimap-dock { display: none; }
  .viewer-wrap .minimap-dock { right: 8px; bottom: 34px; }
  .viewer-wrap .minimap { width: 108px; height: 78px; }
  .viewer-wrap .frame-navigator { top: var(--mobile-tools-bottom, 148px); left: 8px; bottom: 38px; }
  .viewer-wrap :is(.key-image-menu, .download-menu, .slide-preview-panel, .addendum-panel, .layer-display-panel) { position: fixed; top: var(--mobile-tools-bottom, 148px); left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-tools-bottom, 148px) - 16px); overflow: auto; }
  .viewer-wrap .addendum-panel :is(.addendum-status, .addendum-empty) { overflow-wrap: anywhere; }
  .viewer-wrap .point-annotation-panel { position: fixed; inset: 8px; width: auto; transform: none; z-index: 65; }
  .viewer-wrap #AI_review_panel { inset: 8px; width: auto; transform: none; }
  .viewer-wrap .layer-control-panel { max-width: calc(100vw - 16px); }
  .viewer-wrap .scale-bar { bottom: 8px; }
  .viewer-wrap :is(.rotation-dial, .minimap, .zoom-bar, .frame-range) { touch-action: none; }
}
@media (max-width: 900px) {
  body[data-easypath-page="database"] .database-tabs { display: flex; gap: 6px; overflow-x: auto; }
  body[data-easypath-page="database"] .database-tabs > button { flex: 0 0 auto; width: auto; max-width: 180px; }
}
@media (max-width: 600px) {
  body :is(input, select, textarea) { font-size: 16px; }
  body[data-easypath-page="teaching"] .entity-toolbar { grid-template-columns: minmax(0, 1fr); }
  [role="dialog"] :is(.point-grid, .polygon-object-grid, .point-selection-grid, .tag-object-layout) { grid-template-columns: minmax(0, 1fr); }
  :is(#Point_label_vertical_tab_panel, #Polygon_label_vertical_tab_panel, #Tag_label_vertical_tab_panel) .record-modify-target-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#Point_label_vertical_tab_panel, #Polygon_label_vertical_tab_panel, #Tag_label_vertical_tab_panel) .record-modify-label { grid-column: 1 / -1; }
  :is(#Point_label_vertical_tab_panel, #Polygon_label_vertical_tab_panel, #Tag_label_vertical_tab_panel) .record-modify-target-row label { overflow-wrap: anywhere; }
  #Polygon_label_vertical_tab_panel .polygon-manipulation-copy { grid-template-columns: minmax(0, 1fr); }
  #Polygon_label_vertical_tab_panel :is(.polygon-manipulation-copy, .polygon-manipulation-footer) button { max-width: 100%; height: auto; min-height: 34px; padding: 6px 10px; overflow-wrap: anywhere; }
  #Polygon_label_vertical_tab_panel #Copied_layer_info { overflow-wrap: anywhere; }
  #Polygon_label_vertical_tab_panel .polygon-hotspot-target-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #Polygon_label_vertical_tab_panel .polygon-hotspot-target-row label { overflow-wrap: anywhere; }
  #Heat_label_vertical_tab_panel .heat-display-controls { grid-template-columns: minmax(0, 1fr); }
  #Heat_label_vertical_tab_panel .heat-lifecycle-header { flex-direction: column; align-items: stretch; }
  #Heat_label_vertical_tab_panel .heat-lifecycle-actions button { max-width: 100%; height: auto; min-height: 34px; padding: 6px 10px; overflow-wrap: anywhere; }
}
@media (max-width: 1024px) and (max-height: 550px) {
  .viewer-wrap .frame-navigator { width: 90px; grid-template-columns: 34px 34px; grid-template-rows: 34px 32px minmax(30px, 1fr) 34px; gap: 4px; bottom: 8px; }
  .viewer-wrap .frame-range-shell { grid-column: 1 / -1; grid-row: 3; }
  .viewer-wrap .frame-position { align-self: center; }
  .viewer-wrap .minimap-dock { bottom: 8px; }
  .viewer-wrap .nav-panel { max-height: calc(100% - var(--mobile-tools-bottom, 148px) - 8px); overflow: auto; bottom: 8px; }
}