/* mobile-maps.css — phone/tablet rules for this area of the Ninjora Editor. Loaded after mobile.css; see that file for the conventions (body.nj-mobile, breakpoints, tokens). */

/* ─────────────────────────────────────────────────────────────────────────────
   Maps editor below 960px (30 Oct 2026).

   Layout: the shell top bar (56px) · the map top bar (52px: Open map, + New,
   Settings, Save) · the open-map tab strip · the 3D canvas · a bottom dock made
   of the tool strip (scrolls sideways) and a row of buttons (mode, Brush,
   undo/redo/delete/Esc, panels, move/rotate/scale/copy). Every floating panel
   becomes a bottom sheet that sits on the dock (a drawer on the right on a
   landscape phone); body[data-nj-map-sheet] (map-ui-layout.js) names the one in
   front, the others are only hidden by CSS so their state survives.
   Variables set by map-ui-layout.js: --nj-map-bar-h (dock height, for panels
   inside #ed-overlay) and --nj-map-bar-fixed (viewport bottom → dock top, for
   the body-level panels: trigger designer, prop browser).
   Colours are var(--nj-map-*, <current>) so the editor theme can take them over.
   ───────────────────────────────────────────────────────────────────────────── */

:root { --nj-map-bar-h: 0px; --nj-map-bar-fixed: 0px; }
#nj-map-actions { display: none; }

@media (max-width: 959px) {
  /* ── Frame ─────────────────────────────────────────────────────────────── */
  body.nj-mobile #section-maps.active { display: flex; flex-direction: column; min-height: 0; }
  body.nj-mobile #wv-editor-pane { flex: 1 1 auto; min-height: 0; }
  body.nj-mobile #map-canvas { touch-action: none; }
  body.nj-mobile #ed-overlay { --edui-bg: var(--nj-map-bg, #11151c); }

  /* ── Map top bar: one 52px row, nothing past the edge ───────────────────── */
  body.nj-mobile .ed-topbar { padding: 4px 8px; gap: 6px; overflow: hidden; }
  body.nj-mobile .ed-topbar-left { flex: 1 1 auto; min-width: 0; gap: 6px; }
  body.nj-mobile .ed-topbar-right { flex: 0 0 auto; gap: 6px; }
  body.nj-mobile .ed-hdr-btn { flex-shrink: 0; min-height: var(--nj-tap); min-width: var(--nj-tap); padding: 0 10px; justify-content: center; border-radius: 8px; }
  body.nj-mobile .ed-hdr-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  body.nj-mobile .ed-hdr-btn:active { background: var(--nj-map-press-soft, rgba(255,255,255,0.16)); }
  body.nj-mobile .ed-hdr-save { background: var(--nj-map-save-bg, rgba(39,174,96,0.22)); color: var(--nj-map-save, #93ad86); }
  body.nj-mobile .ed-status-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.nj-mobile #play-mode-btn { display: none; }     /* Play mode is driven by the keyboard (WASD, Esc) */
  /* The tool palette only lives in the top bar until the first map opens (then the dock takes it). */
  body.nj-mobile .ed-topbar > .ed-tools { display: none; }
  body.nj-mobile #ed-shortcut-bar { display: none !important; }      /* keyboard hints */
  body.nj-mobile #ed-idle-hint, body.nj-mobile #ed-brush-follow, body.nj-mobile #ed-shift-tag,
  body.nj-mobile #ed-npc-hover-preview { display: none !important; }   /* mouse-hover helpers */

  /* ── Open-map tabs: a scrolling strip of 44px tabs under the top bar ─────── */
  body.nj-mobile .map-document-tabs { min-height: 48px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.nj-mobile .map-document-tabs::-webkit-scrollbar { display: none; }
  body.nj-mobile .map-document-tab button { min-height: var(--nj-tap); padding: 0 12px; font-size: 13px; -webkit-touch-callout: none; user-select: none; }
  body.nj-mobile .map-document-tab .map-tab-close { min-width: var(--nj-tap); padding: 0 10px; font-size: 20px; }
  body.nj-mobile #map-tab-context-menu button { min-height: var(--nj-tap); font-size: 14px; }

  /* The canvas's long-press menu (Delete, Link Interior…): a sheet, since a finger's position may be at the edge. */
  body.nj-mobile #npc-context-menu { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; min-width: 0 !important; border-radius: 10px 10px 0 0 !important; padding-bottom: var(--nj-safe-bottom) !important; z-index: 10010 !important; }
  body.nj-mobile #npc-context-menu > div { min-height: var(--nj-tap-lg); display: flex; align-items: center; box-sizing: border-box; }

  /* ── Recent maps (no map open) ─────────────────────────────────────────── */
  body.nj-mobile #ed-recent-maps { width: calc(100% - 24px); max-width: 440px; z-index: 44; }
  body.nj-mobile #ed-recent-maps .rm-row { height: auto; min-height: var(--nj-tap-lg); padding: 6px 10px; }
  body.nj-mobile #ed-recent-maps .rm-list { max-height: 50vh; max-height: 50dvh; }

  /* ── Bottom dock → a two-row toolbar ────────────────────────────────────── */
  body.nj-mobile #ed-bottom-dock {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    flex-direction: column-reverse; align-items: stretch; gap: 0;
    background: var(--nj-map-bg, #0d1017); border-top: 1px solid var(--nj-map-line, #38352f); box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
    padding-bottom: var(--nj-safe-bottom); transition: none; z-index: 30;
  }
  body.nj-mobile #ed-bottom-left { flex-direction: row; align-items: center; gap: 4px; padding: 4px 6px; pointer-events: auto; border-top: 1px solid var(--nj-map-line-soft, #38352f); }
  body.nj-mobile #ed-terrain-slot { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px; pointer-events: auto; }
  body.nj-mobile #ed-terrain-slot::-webkit-scrollbar { display: none; }
  body.nj-mobile #ed-terrain-slot:empty { display: none; }
  body.nj-mobile #ed-terrain-slot .ed-tools.edo-boxes { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
  body.nj-mobile #ed-terrain-slot .ed-tools .ed-tool-btn { height: var(--nj-tap); min-height: var(--nj-tap); padding: 0 12px 0 10px; }
  body.nj-mobile #ed-terrain-slot .ed-tools .ed-tool-btn:active { background: var(--nj-map-btn-press, #1a1e28); }
  /* Mode switch: the mode that is on; tapping it opens the others above it (map-ui-layout.js). */
  body.nj-mobile .edm-badge { flex: 0 0 auto; min-width: 0; height: auto; padding: 0; gap: 0; background: none; border: none; box-shadow: none; }
  body.nj-mobile .edm-badge::before { display: none; }
  body.nj-mobile .edm-icon, body.nj-mobile .edm-text { display: none; }
  body.nj-mobile .edm-seg { gap: 4px; }
  body.nj-mobile .edm-seg button { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); border-radius: 4px; }
  body.nj-mobile .edm-seg button img { width: 22px; height: 22px; }
  body.nj-mobile .edm-seg button[hidden] { display: none !important; }
  body.nj-mobile .edm-badge:not(.nj-open) .edm-seg button:not(.on) { display: none; }
  body.nj-mobile .edm-badge.nj-open .edm-seg { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 50; padding: 6px; background: var(--nj-map-bg, #0d1017); border: 1px solid var(--nj-map-line, #38352f); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
  /* Sculpt / Paint / Interior bars: scroll sideways inside the slot. */
  body.nj-mobile .edt-bar { height: auto; min-height: 56px; max-width: none; flex: 0 0 auto; overflow: visible; }
  body.nj-mobile .edt-btn { min-height: var(--nj-tap); min-width: var(--nj-tap); height: auto; }
  body.nj-mobile .edt-bar .terrain-channel-btn { width: var(--nj-tap); height: var(--nj-tap); }
  body.nj-mobile .edt-bar .edt-color { width: var(--nj-tap); height: var(--nj-tap); }
  body.nj-mobile .edt-slider { width: 120px; gap: 0; }
  body.nj-mobile .edt-slider input[type=range] { height: 44px; }
  body.nj-mobile .edt-slider input[type=range]::-webkit-slider-thumb { width: 18px; height: 26px; margin-top: -9px; }
  body.nj-mobile #interior-designer-panel { max-width: none; flex-wrap: nowrap; flex: 0 0 auto; }
  body.nj-mobile #interior-designer-panel .id-hint { display: none; }
  body.nj-mobile #interior-designer-panel button { min-height: var(--nj-tap); min-width: var(--nj-tap); }
  body.nj-mobile #id-status { min-width: 120px; }
  /* The action row (built by map-ui-layout.js). */
  body.nj-mobile #nj-map-actions { display: flex; flex: 1 1 auto; justify-content: flex-start; gap: 4px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.nj-mobile #nj-map-actions::-webkit-scrollbar { display: none; }
  body.nj-mobile #nj-map-actions button {
    flex: 0 0 auto; box-sizing: border-box; min-width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); padding: 0 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: var(--nj-map-btn, #0d1017); border: 1px solid var(--nj-map-line, #38352f); border-radius: 4px; color: var(--nj-map-text, #d9d3c4);
    font-family: 'VCR OSD Mono', Consolas, monospace; font-size: 10px; cursor: pointer;
  }
  body.nj-mobile #nj-map-actions button .g { font-size: 16px; line-height: 1; }
  body.nj-mobile #nj-map-actions button .l { font-size: 9px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
  body.nj-mobile #nj-map-actions button:active { background: var(--nj-map-btn-press, #1a1e28); }
  body.nj-mobile #nj-map-actions button[aria-pressed="true"] { background: var(--nj-map-on-bg, #1a1e28) !important; border-color: var(--nj-map-on, #8d7a4e); color: var(--nj-map-on-text, #f1ead8) !important; box-shadow: inset 0 -2px 0 var(--nj-map-on, #4a9eff); }
  body.nj-mobile #nj-map-actions button[data-act="brush"][aria-pressed="true"] { background: var(--nj-map-brush-bg, #21242c) !important; border-color: var(--nj-map-brush, #8d7a4e); box-shadow: inset 0 -2px 0 var(--nj-map-brush, #e8962e); }
  body.nj-mobile #nj-map-actions button:disabled { opacity: 0.35; cursor: default; }
  body.nj-mobile #nj-map-actions button[hidden] { display: none; }
  body.nj-mobile #nj-map-actions button:focus-visible { outline: 2px solid var(--nj-map-focus, #8d7a4e); outline-offset: -2px; }

  /* ── Panels → bottom sheets on the dock ─────────────────────────────────── */
  body.nj-mobile #ed-overlay .ed-float-panel,
  body.nj-mobile #ed-inspector {
    position: absolute !important; left: 0 !important; right: 0 !important; top: auto !important;
    bottom: var(--nj-map-bar-h) !important; width: auto !important; min-width: 0 !important; max-width: none !important;
    transform: none !important; margin: 0 !important; border-radius: 10px 10px 0 0; border-bottom: none;
    max-height: min(58%, calc(100% - var(--nj-map-bar-h) - 64px)) !important;
    animation: none; z-index: 45; box-sizing: border-box;
  }
  body.nj-mobile #ed-inspector { max-height: min(50%, calc(100% - var(--nj-map-bar-h) - 64px)) !important; padding-bottom: 14px; }
  body.nj-mobile #ed-ctx-panel.edo-attached { border-radius: 10px 10px 0 0; }
  body.nj-mobile #ed-ctx-panel.trig-wide { width: auto !important; }
  body.nj-mobile #trig-panel, body.nj-mobile #trig-inspector, body.nj-mobile #prop-browser-dock, body.nj-mobile #interior-inspector {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important;
    bottom: var(--nj-map-bar-fixed) !important; width: auto !important; min-width: 0 !important; max-width: none !important;
    transform: none !important; border-radius: 10px 10px 0 0; animation: none;
    max-height: 55vh !important; max-height: 55dvh !important; box-sizing: border-box;
  }
  body.nj-mobile #trig-panel { overflow: auto; z-index: 10001; }
  body.nj-mobile #trig-inspector { max-height: 40vh !important; max-height: 40dvh !important; overflow: auto; }
  body.nj-mobile #prop-browser-dock { height: 48vh !important; height: 48dvh !important; min-height: 0 !important; z-index: 9500; }
  body.nj-mobile #interior-inspector { z-index: 60; }
  body.nj-mobile #interior-inspector::after { display: none; }
  /* The sheet is the one scroller: its body has its own max-height:inherit, which ran under the dock. */
  body.nj-mobile #interior-inspector { overflow-y: auto; overscroll-behavior: contain; }
  body.nj-mobile #interior-inspector .id-popup-body { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  body.nj-mobile #interior-inspector #id-wall-fields { grid-template-columns: 1fr; }
  /* One sheet at a time (the panel's own display state is left alone). */
  body.nj-mobile:not([data-nj-map-sheet="layers"]) #ed-layers-panel,
  body.nj-mobile:not([data-nj-map-sheet="settings"]) #ed-settings-panel,
  body.nj-mobile:not([data-nj-map-sheet="ctx"]) #ed-ctx-panel,
  body.nj-mobile:not([data-nj-map-sheet="inspector"]) #ed-inspector,
  body.nj-mobile:not([data-nj-map-sheet="trig"]) #trig-panel,
  body.nj-mobile:not([data-nj-map-sheet="triginsp"]) #trig-inspector,
  body.nj-mobile:not([data-nj-map-sheet="interior"]) #interior-inspector,
  body.nj-mobile:not([data-nj-map-sheet="props"]) #prop-browser-dock { display: none !important; }
  /* The body-level sheets belong to Maps; they stay behind when the menu goes to another section. */
  body.nj-mobile:not([data-section="maps"]) #trig-panel,
  body.nj-mobile:not([data-section="maps"]) #trig-inspector,
  body.nj-mobile:not([data-section="maps"]) #prop-browser-dock { display: none !important; }
  body.nj-mobile #id-wall-delete-hint { bottom: calc(var(--nj-map-bar-fixed) + 8px); }

  /* Sheet chrome and the rows inside. */
  body.nj-mobile .ed-float-header { cursor: default; padding: 6px 6px 6px 14px; min-height: var(--nj-tap); }
  body.nj-mobile .ed-float-collapse { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); font-size: 18px; color: rgba(255,255,255,0.7); }
  /* min-height:0 lets the body shrink to the sheet and scroll (a column flex child otherwise grows under the dock). */
  body.nj-mobile .ed-float-body { min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 8px; }
  body.nj-mobile .ed-layer-cat-header { min-height: var(--nj-tap); padding: 4px 8px 4px 4px; gap: 6px; }
  body.nj-mobile .ed-layer-eye { width: var(--nj-tap); height: var(--nj-tap); display: inline-flex; align-items: center; justify-content: center; }
  body.nj-mobile .ed-layer-eye svg { width: 16px; height: 16px; }
  body.nj-mobile .ed-layer-cat-name { font-size: 13px; }
  body.nj-mobile .ed-layer-item { min-height: var(--nj-tap); }
  body.nj-mobile .ed-layer-item .ed-layer-item-del { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); opacity: 1; font-size: 15px; }
  body.nj-mobile .ed-inspector { font-size: 13px; overscroll-behavior: contain; }
  body.nj-mobile .ed-insp-val { max-width: 60%; }
  /* Every control a panel renders: panels build their rows with inline sizes, min-* wins over those. */
  body.nj-mobile .ed-inspector button, body.nj-mobile .ed-float-body button, body.nj-mobile #trig-panel button, body.nj-mobile #trig-inspector button,
  body.nj-mobile #interior-inspector button, body.nj-mobile #prop-browser-dock button,
  body.nj-mobile .ed-inspector select, body.nj-mobile .ed-float-body select, body.nj-mobile #trig-panel select, body.nj-mobile #interior-inspector select, body.nj-mobile #prop-browser-dock select,
  body.nj-mobile .ed-inspector input:not([type=checkbox]):not([type=radio]), body.nj-mobile .ed-float-body input:not([type=checkbox]):not([type=radio]),
  body.nj-mobile #trig-panel input:not([type=checkbox]):not([type=radio]), body.nj-mobile #interior-inspector input:not([type=checkbox]):not([type=radio]),
  body.nj-mobile #prop-browser-dock input:not([type=checkbox]):not([type=radio]) { min-height: var(--nj-tap) !important; min-width: var(--nj-tap); box-sizing: border-box; }
  body.nj-mobile .ed-inspector input[type=checkbox], body.nj-mobile .ed-float-body input[type=checkbox], body.nj-mobile #trig-panel input[type=checkbox],
  body.nj-mobile #interior-inspector input[type=checkbox], body.nj-mobile #prop-browser-dock input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
  body.nj-mobile .ed-float-body label:has(> input[type=checkbox]), body.nj-mobile #trig-panel label:has(> input[type=checkbox]),
  body.nj-mobile #interior-inspector label:has(> input[type=checkbox]), body.nj-mobile #prop-browser-dock label:has(> input[type=checkbox]) { min-height: var(--nj-tap); display: flex; align-items: center; gap: 8px; }
  body.nj-mobile #ctx-item-cats .ed-icat { height: auto; }
  body.nj-mobile #ed-ctx-panel .ed-float-collapse { font-size: 18px; }
  body.nj-mobile .ed-ctx-grid { grid-template-columns: 1fr 1fr; }
  body.nj-mobile .pb-close { width: var(--nj-tap); height: var(--nj-tap); }
  body.nj-mobile .pb-resize-top { display: none; }     /* drag-only and meaningless at a fixed sheet height */
  body.nj-mobile .pb-tab, body.nj-mobile .pb-search { min-height: var(--nj-tap); }
  /* Hover-only tile buttons: always there, with a finger-sized hit area around the same small icon. */
  body.nj-mobile .pb-star, body.nj-mobile .pb-rotate { opacity: 1; width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap) !important; min-width: var(--nj-tap) !important; top: 0; background: transparent; }
  body.nj-mobile .pb-star { right: 0; }
  body.nj-mobile .pb-rotate { right: var(--nj-tap); }
  /* Category tabs on one scrolling line, so the prop grid keeps the height of the sheet. */
  body.nj-mobile .pb-toolbar { gap: 6px; padding: 8px; margin-top: 0; }
  body.nj-mobile .pb-search { flex: 1 1 100%; max-width: none; }
  body.nj-mobile .pb-tabs { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.nj-mobile .pb-tabs::-webkit-scrollbar { display: none; }
  body.nj-mobile .pb-tab { flex: 0 0 auto; }
  /* Tool rows (NPC, Item, Fish lists) are divs with an onclick: finger-sized too. */
  body.nj-mobile .ed-ctx-item-row { min-height: var(--nj-tap); display: flex; align-items: center; box-sizing: border-box; }
  body.nj-mobile .trig-designer .trig-flow, body.nj-mobile .trig-recipes, body.nj-mobile .trig-transform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.nj-mobile .trig-designer label { grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.4fr); }

  /* ── Collision editor (full-screen modal, opened from Assets): canvas on top, tools then colliders under it. */
  body.nj-mobile #collision-editor-overlay { padding-top: var(--nj-safe-top); padding-bottom: var(--nj-safe-bottom); }
  body.nj-mobile #collision-editor-overlay > div:nth-child(2) { flex-direction: column; min-height: 0; }
  body.nj-mobile #collision-editor-overlay > div:nth-child(2) > div:nth-child(2) { order: -1; flex: 1 1 40% !important; min-height: 0; }
  body.nj-mobile #collision-editor-overlay > div:nth-child(2) > div:nth-child(1) { width: auto !important; flex: 0 0 auto; flex-direction: row !important; flex-wrap: nowrap; align-items: center; overflow-x: auto !important; overflow-y: hidden !important; border-right: none !important; border-top: 1px solid var(--nj-map-line, #38352f); }
  body.nj-mobile #collision-editor-overlay > div:nth-child(2) > div:nth-child(1) > * { flex: 0 0 auto; white-space: nowrap; }
  body.nj-mobile #collision-editor-overlay > div:nth-child(2) > div:nth-child(3) { width: auto !important; flex: 1 1 30%; min-height: 0; border-left: none !important; border-top: 1px solid var(--nj-map-line, #38352f); }
  body.nj-mobile #collision-editor-overlay button, body.nj-mobile #collision-editor-overlay select { min-height: var(--nj-tap); }
  body.nj-mobile #collision-editor-overlay label { min-height: var(--nj-tap); }
  body.nj-mobile #ce-canvas { touch-action: none; }

  /* ── "Open map" picker ─────────────────────────────────────────────────── */
  body.nj-mobile .mp-tab, body.nj-mobile .mp-btn, body.nj-mobile .mp-menu-item { min-height: var(--nj-tap); }
  body.nj-mobile .mp-btn[data-act="close"] { min-width: var(--nj-tap); font-size: 18px; }
  body.nj-mobile .mp-search { min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .mp-zone-search { left: 8px; right: 8px; width: auto; min-height: var(--nj-tap); font-size: 16px; box-sizing: border-box; }
  /* The help line names the wheel and the right button: on touch it says what touch does instead. */
  body.nj-mobile .mp-help { left: 8px; right: 8px; bottom: 8px; font-size: 0; text-align: center; }
  body.nj-mobile .mp-help::after { content: 'Drag to pan · pinch to zoom · tap to open · long press for more'; font-size: 11px; }
  body.nj-mobile .mp-hover { left: 8px; right: 8px; bottom: 44px; }
  body.nj-mobile .mp-menu { max-width: calc(100vw - 16px); }
  body.nj-mobile .mp-canvas, body.nj-mobile .mp-card { -webkit-touch-callout: none; user-select: none; }
  body.nj-mobile .mp-card:active { border-color: var(--nj-map-on-text, #38352f); }
  body.nj-mobile .mp-confirm-row .mp-btn { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  /* Map top bar with a map open: icon buttons; the map's name is on its tab. With none open the words fit. */
  body.nj-mobile #ed-overlay.ed-mapopen .ed-hdr-btn { font-size: 0; gap: 0; padding: 0 8px; }
  body.nj-mobile #ed-overlay.ed-mapopen .ed-hdr-btn svg { width: 20px; height: 20px; }
  body.nj-mobile #ed-overlay.ed-mapopen #ed-new-map-btn::before { content: '+'; font-size: 24px; line-height: 1; font-weight: 600; }
  body.nj-mobile #ed-overlay.ed-mapopen .ed-hdr-save { font-size: 12px; gap: 5px; padding: 0 10px; }
  body.nj-mobile #ed-overlay.ed-mapopen .ed-hdr-save svg { width: 16px; height: 16px; }
  body.nj-mobile #ed-overlay.ed-mapopen #override-live-btn { font-size: 11px; padding: 0 8px; }
  body.nj-mobile #ed-overlay.ed-mapopen #ed-map-status { display: none; }
  body.nj-mobile .ed-ctx-grid { grid-template-columns: 1fr; }
  body.nj-mobile #ed-overlay .ed-float-panel, body.nj-mobile #ed-inspector { max-height: min(62%, calc(100% - var(--nj-map-bar-h) - 64px)) !important; }

  /* Panels set small type inline; on a phone a field under 16px makes iOS zoom the page. */
  body.nj-mobile #ed-overlay input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.nj-mobile #ed-overlay select, body.nj-mobile #ed-overlay textarea,
  body.nj-mobile #trig-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.nj-mobile #trig-panel select, body.nj-mobile #trig-panel textarea,
  body.nj-mobile #interior-inspector input:not([type=checkbox]):not([type=radio]), body.nj-mobile #prop-browser-dock input:not([type=checkbox]):not([type=radio]), body.nj-mobile #prop-browser-dock select { font-size: 16px !important; }

  /* Picker: the whole screen, header in rows. */
  body.nj-mobile .mp-frame { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; }
  body.nj-mobile .mp-header { flex-wrap: wrap; gap: 6px; padding: calc(8px + var(--nj-safe-top)) 8px 8px; }
  body.nj-mobile .mp-title { order: 0; flex: 1 1 60%; margin: 0; }
  body.nj-mobile .mp-btn[data-act="close"] { order: 1; margin-left: auto; }
  body.nj-mobile .mp-tab { order: 2; flex: 1 1 calc(50% - 6px); text-align: center; }
  body.nj-mobile .mp-search { order: 3; flex: 1 1 100%; width: auto; min-width: 0; }
  body.nj-mobile .mp-only-world, body.nj-mobile .mp-only-interiors { order: 4; flex: 1 1 calc(50% - 6px); }
  body.nj-mobile .mp-spacer { display: none; }
  body.nj-mobile .mp-note { order: 5; flex: 1 1 100%; max-width: none; text-align: left; }
  body.nj-mobile .mp-note:empty { display: none; }
  body.nj-mobile .mp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  body.nj-mobile .mp-interiors { padding: 8px; }
  body.nj-mobile .mp-card-name { font-size: 13px; }
}

/* Landscape phones: one dock row, and panels are a drawer on the right so the canvas stays in view. */
@media (max-width: 959px) and (max-height: 500px) {
  body.nj-mobile #ed-bottom-dock { flex-direction: row; align-items: center; }
  body.nj-mobile #ed-bottom-left { flex: 0 1 auto; max-width: 58%; min-width: 0; padding: 2px 6px; border-top: none; border-right: 1px solid var(--nj-map-line-soft, #38352f); }
  body.nj-mobile #ed-terrain-slot { flex: 1 1 0; min-width: 0; padding: 2px 6px; }
  body.nj-mobile .edt-bar { min-height: 0; }
  body.nj-mobile .map-document-tabs { min-height: 44px; }
  body.nj-mobile #ed-overlay .ed-float-panel, body.nj-mobile #ed-inspector {
    left: auto !important; right: 0 !important; top: 52px !important; width: min(400px, 50%) !important;
    max-height: none !important; border-radius: 10px 0 0 0;
  }
  body.nj-mobile #trig-panel, body.nj-mobile #trig-inspector, body.nj-mobile #prop-browser-dock, body.nj-mobile #interior-inspector {
    left: auto !important; right: 0 !important; top: 108px !important; width: min(400px, 50vw) !important;
    height: auto !important; max-height: none !important; border-radius: 10px 0 0 0;
  }
  /* Search and tabs share a line, so the prop grid gets the height. */
  body.nj-mobile .pb-search { flex: 0 0 110px; min-width: 0; }
  body.nj-mobile .pb-tabs { flex: 1 1 calc(100% - 116px); }
}