/* mobile-records.css — phone/tablet rules for the record editors of the Ninjora Editor
   (NPCs, Dialogues, Shops, Events, Crafting, Gather, Farming, Cooking, Shell Games, Items,
   Skill Trees). Loaded after mobile.css; see that file for the conventions (body.nj-mobile,
   breakpoints, tokens). Every rule is scoped to body.nj-mobile or a media query, except the
   first block, which keeps the touch-only chrome these editors add out of the desktop layout.
   Colours go through var(--nj-*, <current value>) so the editor-wide theme can restyle them.
   --nj-rec-surface, -surface-2, -bar, -border, -text and --nj-canvas-* are deliberately separate
   from theme.css's translucent --nj-surface tokens: the sticky bars here must stay opaque and
   readable on the record panels, which are still light. Map them when those panels are themed. */

/* Chrome that exists in the DOM at every width but only ever shows on touch layouts. */
.nj-touch-only, .nj-st-bar, .nj-st-zoom, .nj-st-hint { display: none; }
@media (pointer: coarse) {
  .nj-touch-only { display: inline-flex; }
}

/* ── Editor pane: forms, inline rows, save bars (phones + tablets) ──────────── */
@media (max-width: 959px) {
  body.nj-mobile .nj-touch-only { display: inline-flex; }
  body.nj-mobile .nj-move-btns { gap: 4px; flex-shrink: 0; align-items: center; }
  body.nj-mobile .nj-move-btn {
    width: var(--nj-tap);
    height: var(--nj-tap);
    min-height: 0;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--nj-rec-border, #8d7a4e);
    border-radius: 8px;
    background: var(--nj-rec-surface-2, #21242c);
    color: var(--nj-rec-text, #d9d3c4);
    font-size: 14px;
  }
  body.nj-mobile .nj-move-btn:active { filter: brightness(0.9); }
  body.nj-mobile .nj-ev-zoom { gap: 8px; margin-top: 8px; }
  body.nj-mobile #ev-canvas { max-width: 100%; height: auto; }

  /* Raw inputs that bypass .form-group (shell games, shop rows, cooking/gather qty boxes)
     get the same tap height as the rest. Range/color/file/checkbox keep their own size. */
  body.nj-mobile .editor-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  body.nj-mobile .editor-panel select,
  body.nj-mobile .items-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  body.nj-mobile .items-dialog select,
  body.nj-mobile .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  body.nj-mobile .modal-content select {
    min-height: var(--nj-tap);
    box-sizing: border-box;
  }
  body.nj-mobile .editor-panel textarea,
  body.nj-mobile .modal-content textarea { min-height: var(--nj-tap); }
  /* Inline number boxes sized for a mouse (width:45–80px) stay readable with a finger. */
  body.nj-mobile .editor-panel input[type="number"][style*="width"],
  body.nj-mobile .modal-content input[type="number"][style*="width"] { min-width: 72px; }
  body.nj-mobile .editor-panel input[type="range"],
  body.nj-mobile .items-dialog input[type="range"] { min-height: var(--nj-tap); }
  body.nj-mobile .editor-panel input[type="checkbox"],
  body.nj-mobile .editor-panel input[type="radio"],
  body.nj-mobile .items-dialog input[type="checkbox"],
  body.nj-mobile .modal-content input[type="checkbox"] { width: 22px !important; height: 22px !important; flex-shrink: 0; }
  body.nj-mobile .editor-panel label:has(> input[type="checkbox"]),
  body.nj-mobile .items-dialog label:has(> input[type="checkbox"]),
  body.nj-mobile .modal-content label:has(> input[type="checkbox"]) { min-height: var(--nj-tap); display: flex; align-items: center; gap: 10px; }

  /* A tick whose caption is a separate, unlinked <label> (AI behaviour params) has only its own
     box to hit, so that box is the target. Weekday ticks and similar groups wrap. */
  body.nj-mobile .editor-panel .form-group > input[type="checkbox"],
  body.nj-mobile .items-dialog .form-group > input[type="checkbox"] { width: var(--nj-tap) !important; height: var(--nj-tap) !important; }
  body.nj-mobile .editor-panel .checkbox-group { flex-wrap: wrap; }

  /* Small buttons (×, Remove, Pick Frame…) become real targets, labels centred. */
  body.nj-mobile .editor-panel button,
  body.nj-mobile .items-dialog button,
  body.nj-mobile .modal-content button,
  body.nj-mobile .modal-overlay button,
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] button {
    min-height: var(--nj-tap);
    min-width: var(--nj-tap);
    justify-content: center;
    text-align: center;
  }
  body.nj-mobile .editor-panel button.btn-sm,
  body.nj-mobile .modal-content button.btn-sm { min-height: var(--nj-tap); padding-left: 12px; padding-right: 12px; }
  /* Fields in the overlays opened on <body> (exclusions, random drops, sound and sprite pickers). */
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] select { min-height: var(--nj-tap); box-sizing: border-box; }
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] select { font-size: 16px; }
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] label:has(> input[type="checkbox"]),
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] label:has(> input[type="radio"]) { min-height: var(--nj-tap); display: flex; align-items: center; gap: 10px; }
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] input[type="checkbox"],
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] input[type="radio"] { width: 22px !important; height: 22px !important; flex-shrink: 0; }

  /* Collapsible section headers (NPCs) and <details> summaries (Farming, Skill Trees). */
  body.nj-mobile .editor-panel h2.section-title[onclick] { min-height: var(--nj-tap); margin-bottom: 8px; }
  body.nj-mobile .editor-panel summary { min-height: var(--nj-tap); display: flex; align-items: center; cursor: pointer; }

  body.nj-mobile .editor-panel [style*="min-width:180px"],
  body.nj-mobile .editor-panel [style*="min-width: 180px"],
  body.nj-mobile .editor-panel [style*="min-width:200px"] { min-width: 0 !important; }
  body.nj-mobile .editor-panel [style*="width:127px"] { width: auto !important; }
  body.nj-mobile .editor-panel canvas { max-width: 100%; }
  /* Inline flex rows built for a 900px form (weekday ticks, node headers, field rows) wrap
     instead of pushing the panel sideways. Only an item that no longer fits moves down. */
  body.nj-mobile .editor-panel [style*="display:flex"],
  body.nj-mobile .editor-panel [style*="display: flex"],
  body.nj-mobile .items-dialog [style*="display:flex"],
  body.nj-mobile .items-dialog [style*="display: flex"] { flex-wrap: wrap; }
  body.nj-mobile .editor-panel .array-item-header { flex-wrap: wrap; gap: 8px; }
  /* Dialogue node cards: the response links are text, so give them a finger-sized box. */
  body.nj-mobile .compact-opt-card > span[onclick] { display: inline-flex; align-items: center; min-height: var(--nj-tap); min-width: var(--nj-tap); overflow-wrap: anywhere; }
  /* Paperdoll previews: the status/help text under the canvas must not set the width. */
  body.nj-mobile #items-editor [style*="flex-shrink:0"]:has(> #character-preview-container) { flex-shrink: 1; min-width: 0; max-width: 100%; }
  body.nj-mobile #character-preview-container,
  body.nj-mobile #npc-character-preview-container { max-width: 100%; min-width: 0; }
  body.nj-mobile #character-preview-container > *,
  body.nj-mobile #npc-character-preview-container > * { max-width: 100%; min-width: 0; white-space: normal; box-sizing: border-box; }
  body.nj-mobile .editor-panel .array-item-header > button { margin-left: auto; }

  /* Save / Delete rows at the end of a form stay reachable: pinned to the bottom of the
     scrolling editor pane, buttons grow to a comfortable size. */
  body.nj-mobile .editor-panel .toolbar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px calc(10px + var(--nj-safe-bottom));
    background: var(--nj-rec-bar, #1a1e28);
    border-top: 1px solid var(--nj-rec-border, #38352f);
  }
  body.nj-mobile .editor-panel .toolbar > button { min-height: var(--nj-tap-lg); flex: 1 1 auto; }
  body.nj-mobile .editor-panel .toolbar > span,
  body.nj-mobile .editor-panel .toolbar > div { flex-basis: 100%; }
  /* mobile.css adds 96px of bottom padding for the keyboard; the sticky bar replaces it. */
  body.nj-mobile .editor-panel:has(> .toolbar) { padding-bottom: 0; }

  /* Pressed / disabled feedback for the row-like controls in these editors. */
  body.nj-mobile .editor-panel .array-item:active,
  body.nj-mobile .editor-panel .lp-option:active,
  body.nj-mobile .editor-panel .shop-item-row:active { filter: brightness(0.97); }
  body.nj-mobile .editor-panel button:disabled,
  body.nj-mobile .items-dialog button:disabled { opacity: 0.5; }

  /* NPC colour palettes and tile pickers: finger-sized. */
  body.nj-mobile #npcs-editor div[onclick][style*="width:28px"],
  body.nj-mobile #npcs-editor div[onclick][style*="width:24px"],
  body.nj-mobile #npcs-editor div[onclick][style*="width:18px"] { width: var(--nj-tap) !important; height: var(--nj-tap) !important; }
  body.nj-mobile #npcs-editor div[onclick][style*="width:36px"] { min-width: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile #npcs-editor div[style*="width:220px"] { width: min(300px, calc(100vw - 48px)) !important; max-height: 50vh; overflow-y: auto; }
  body.nj-mobile #npcs-editor [style*="height:24px"][onclick] { height: var(--nj-tap) !important; }
  /* Popups anchored to the right edge of a now full-width column. */
  body.nj-mobile #npcs-editor [id$="-color-popup"] { right: auto !important; left: 0; }
  body.nj-mobile #npcs-editor [id$="-color-swatch"][style*="width:80px"] { width: 100% !important; }
  /* Recolor rows: swatch strips wrap instead of forcing the row wide. */
  body.nj-mobile #recolor-swatches-container div[onclick][style*="width:18px"],
  body.nj-mobile #item-recolor-swatches-container div[onclick][style*="width:18px"] { width: var(--nj-tap) !important; height: var(--nj-tap) !important; }
  body.nj-mobile #recolor-swatches-container,
  body.nj-mobile #item-recolor-swatches-container { max-height: none !important; }
  body.nj-mobile #recolor-swatches-container > div,
  body.nj-mobile #item-recolor-swatches-container > div { flex-wrap: wrap; }
  body.nj-mobile #recolor-swatches-container > div > div,
  body.nj-mobile #item-recolor-swatches-container > div > div { flex-shrink: 1 !important; min-width: 0; flex-wrap: wrap; }
  body.nj-mobile #recolor-swatches-container div[onclick],
  body.nj-mobile #item-recolor-swatches-container div[onclick] { flex-shrink: 0; }

  /* List search boxes and live-preview response text at tablet width. */
  body.nj-mobile #section-items .search-box,
  body.nj-mobile #section-skilltrees .search-box { min-height: var(--nj-tap); }
  body.nj-mobile .lp-option-text { min-height: var(--nj-tap); display: flex; align-items: center; }

  /* Catalog: names were hover/Shift-only. A finger has neither, so they are always shown
     and the "hold Shift" hint (with its keep-shown toggle) goes away. */
  body.nj-mobile #section-items .item-name,
  body.nj-mobile #section-items .items-add-name { visibility: visible; }
  body.nj-mobile #section-items .items-names-hint { display: none; }
  body.nj-mobile #section-items #items-list { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  body.nj-mobile #section-items .items-card { height: 84px; }
  body.nj-mobile #section-items .items-cat { min-height: var(--nj-tap); }
  body.nj-mobile .items-variant { min-height: var(--nj-tap); min-width: var(--nj-tap); justify-content: center; align-items: center; }
  body.nj-mobile .items-dialog-footer { padding-bottom: calc(10px + var(--nj-safe-bottom)); gap: 8px; }
  body.nj-mobile .items-dialog-footer .items-dialog-actions { gap: 8px; }
  body.nj-mobile .items-dialog-footer button { min-height: var(--nj-tap-lg); }
  body.nj-mobile .items-variant-review button { min-height: var(--nj-tap); font-size: 13px; }
  body.nj-mobile .items-duplicate-options button { min-height: var(--nj-tap-lg); }
  body.nj-mobile .items-duplicate-choice > .btn-ghost { width: 100%; min-height: var(--nj-tap-lg); }
}

/* ── Phone-only layout changes ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Inline-styled fixed grids inside a record form stack; auto-fill/auto-fit grids adapt on
     their own. Keeps the NPC appearance / capsule layouts inside the screen. */
  body.nj-mobile .editor-panel [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]),
  body.nj-mobile .items-dialog [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Same for auto-fit grids whose minimum is wider than a phone (fallback actions: 280px). */
  body.nj-mobile .editor-panel [style*="minmax(280px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Shops: stock rows wrap (handle + icon + name, then price / stock / remove). */
  body.nj-mobile .shop-item-row { flex-wrap: wrap; gap: 6px; }
  body.nj-mobile .shop-item-row > .drag-handle { display: none; }
  body.nj-mobile .shop-item-row > div:nth-last-child(2) { flex: 1 1 120px !important; min-width: 0; }
  body.nj-mobile .shop-item-row > div:last-child { flex: 1 1 100%; flex-wrap: wrap; margin-top: 6px; }
  body.nj-mobile .shop-item-row > div:last-child > div { flex: 1 1 100px; min-width: 0; }
  body.nj-mobile .shop-item-row > div:last-child input { width: 100% !important; min-width: 0; }
  body.nj-mobile .shop-item-row > div:last-child > button { margin-top: 0 !important; flex: 1 1 100%; }
  /* NPC chat lines: same idea (drag handle replaced by the move buttons). */
  body.nj-mobile .chat-line-row { flex-wrap: wrap; }
  body.nj-mobile .chat-line-row > span:first-child { display: none; }
  body.nj-mobile .chat-line-row > input { flex: 1 1 100% !important; min-width: 0; order: -1; }

  /* Dialogues live preview: response rows stack text over actions; action buttons are 44px. */
  body.nj-mobile .lp-node-bar { flex-wrap: wrap; }
  body.nj-mobile .lp-node-bar .lp-node-select { flex: 1 1 160px; min-width: 0; min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .lp-node-bar > button { flex: 1 1 100%; }
  body.nj-mobile .lp-stage { flex-wrap: wrap; align-items: flex-start; }
  body.nj-mobile .lp-avatar { width: 64px; height: 64px; }
  body.nj-mobile .lp-text-wrap { flex: 1 1 200px; }
  body.nj-mobile .lp-option { flex-wrap: wrap; gap: 8px 10px; padding: 10px; }
  body.nj-mobile .lp-drag-handle { display: none; }
  body.nj-mobile .lp-option-text { flex: 1 1 60%; min-width: 0; min-height: var(--nj-tap); display: flex; align-items: center; }
  body.nj-mobile .lp-option-meta { flex: 1 1 100%; order: 3; white-space: normal; overflow-wrap: anywhere; }
  body.nj-mobile .lp-option-actions { flex: 1 1 100%; order: 4; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  body.nj-mobile .lp-mini-btn { width: var(--nj-tap); height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .lp-add-row > button { min-height: var(--nj-tap-lg); flex: 1 1 auto; }
  /* Flow tree: head actions wrap, the per-rule ⚙ is 44px. */
  body.nj-mobile .ft-head { flex-wrap: wrap; gap: 8px; }
  body.nj-mobile .ft-head-actions { flex-wrap: wrap; }
  body.nj-mobile .ft-head-actions > button { min-width: var(--nj-tap); }
  body.nj-mobile .ft-rule-edit-btn { width: var(--nj-tap); height: var(--nj-tap); font-size: 15px; }
  body.nj-mobile .ft-rule-head { flex-wrap: wrap; }
  body.nj-mobile .ft-rule-summary { flex-basis: 100%; white-space: normal; }

  /* Inline-styled "modal" panels these editors open on <body> (sound pickers, spritesheet /
     icon / exclusion pickers, the shop item picker): full-width sheets. */
  body.nj-mobile [style*="position: fixed"][style*="rgba(0"] > div,
  body.nj-mobile .modal-overlay > div[style*="width"]:not(.modal-content) {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: calc(16px + var(--nj-safe-bottom)) !important;
    box-sizing: border-box;
  }
  /* The sprite atlas picker's 170px category column becomes a chip strip above the list. */
  body.nj-mobile div:has(> #spCats) { flex-direction: column; min-height: 0; }
  body.nj-mobile #spCats { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; flex-shrink: 0; }
  body.nj-mobile #spCats > * { flex-shrink: 0; min-height: var(--nj-tap); }
  body.nj-mobile #spList { min-height: 0 !important; }

  /* Generic .modal-content sheets: the body scrolls, the footer with Save/Cancel stays put. */
  body.nj-mobile .modal-content { overflow: hidden !important; }
  body.nj-mobile .modal-content > .modal-header { flex-shrink: 0; padding: 12px 16px; gap: 8px; }
  body.nj-mobile .modal-content > .modal-header h2 { font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
  body.nj-mobile .modal-content > .modal-header button { flex-shrink: 0; }
  body.nj-mobile .modal-content > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
  body.nj-mobile .modal-content > .modal-footer { flex-shrink: 0; flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + var(--nj-safe-bottom)); }
  body.nj-mobile .modal-content > .modal-footer > button { min-height: var(--nj-tap-lg); flex: 1 1 auto; }
  /* Fixed-width grids inside dialogue modals (gacha rows) become two columns. */
  body.nj-mobile .modal-content [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  /* Item dialog. */
  body.nj-mobile .items-dialog-footer .btn-primary { min-width: 96px; }
  body.nj-mobile .items-duplicate-options { grid-template-columns: 1fr; }
  body.nj-mobile #items-editor [style*="display:flex;gap:16px"],
  body.nj-mobile #items-editor [style*="display: flex; gap: 16px"] { flex-wrap: wrap; }
  body.nj-mobile #items-editor [style*="min-width:200px"] { min-width: 0 !important; }
  body.nj-mobile #avatar-mask-dock { min-width: 0 !important; width: 100%; }
  body.nj-mobile #items-editor label[style*="font-size:11px"] input[type="number"] { width: 72px !important; }

  /* Farming / cooking / gather inline rows. */
  body.nj-mobile #farming-editor select[style*="width:110px"] { width: auto !important; flex: 1 1 110px !important; }
  body.nj-mobile .editor-panel .array-item[style*="display:flex"] > select { flex: 1 1 100% !important; }
}

/* ── Skill Trees: list / tree / inspector as switchable panels ───────────────── */
@media (max-width: 959px) {
  /* The shell's generic two-pane logic also matches this section (it has a direct
     .list-panel and .editor-panel). Neutralise it here; skill-trees-editor.js drives
     data-nj-st-panel instead so the canvas is a first-class panel. */
  body.nj-mobile #section-skilltrees > .nj-pane-bar { display: none !important; }
  body.nj-mobile #section-skilltrees.active { display: flex; flex-direction: column; }
  body.nj-mobile #section-skilltrees > .list-panel,
  body.nj-mobile #section-skilltrees > .st-center,
  body.nj-mobile #section-skilltrees > .editor-panel { display: none; width: 100%; max-width: 100%; flex: 1 1 auto; min-height: 0; border: 0; }
  body.nj-mobile #section-skilltrees[data-nj-st-panel="list"] > .list-panel { display: flex; }
  body.nj-mobile #section-skilltrees[data-nj-st-panel="canvas"] > .st-center { display: flex; }
  body.nj-mobile #section-skilltrees[data-nj-st-panel="inspector"] > .editor-panel { display: block; }

  /* Segmented switcher built by skill-trees-editor.js. */
  body.nj-mobile .nj-st-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--nj-rec-surface, #1a1e28);
    border-bottom: 1px solid var(--nj-rec-border, #38352f);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 6;
  }
  body.nj-mobile .nj-st-bar .nj-st-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }
  body.nj-mobile .nj-st-bar .nj-st-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--nj-tap);
    padding: 4px 6px;
    border: 1px solid var(--nj-rec-border, #8d7a4e);
    border-radius: 8px;
    background: var(--nj-rec-surface-2, #21242c);
    color: var(--nj-rec-text, #d9d3c4);
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.nj-mobile .nj-st-bar .nj-st-tab[aria-selected="true"] {
    background: var(--nj-gold, #8d7a4e);
    border-color: var(--nj-gold-light, #8d7a4e);
    color: var(--nj-bg-deep, #f1ead8);
  }
  body.nj-mobile .nj-st-bar .nj-st-tab:active { filter: brightness(0.92); }
  body.nj-mobile .nj-st-bar .nj-st-save { min-height: var(--nj-tap); flex-shrink: 0; justify-content: center; }

  /* Toolbar: one scrollable strip (a toolbar is a legitimate horizontal scroller), every
     control at tap size. Save lives in the switcher bar on phones. */
  body.nj-mobile .st-toolbar {
    flex-wrap: nowrap;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 8px;
  }
  body.nj-mobile .st-toolbar::-webkit-scrollbar { display: none; }
  body.nj-mobile .st-toolbar > * { flex-shrink: 0; }
  body.nj-mobile .st-toolbar .btn-primary, body.nj-mobile .st-toolbar .btn-secondary, body.nj-mobile .st-toolbar .btn-ghost {
    min-height: var(--nj-tap); min-width: var(--nj-tap); padding: 6px 12px; font-size: 13px; justify-content: center;
  }
  body.nj-mobile .st-toolbar .nj-st-toolbar-save { display: none; }
  body.nj-mobile .st-tool-check { min-height: var(--nj-tap); padding: 0 4px; gap: 8px; white-space: nowrap; }
  body.nj-mobile .st-toolbar input[type="number"] { min-height: var(--nj-tap); width: 72px !important; font-size: 16px; }
  body.nj-mobile .st-tool-sep { height: 28px; }

  /* Canvas: gestures stay on the canvas (touch-action is also set in JS), the validate /
     preview overlays fit the width, and the zoom controls are visible. */
  body.nj-mobile #st-canvas { touch-action: none; }
  body.nj-mobile .st-validate-panel, body.nj-mobile .st-preview-panel {
    width: auto; left: 8px; right: 8px; top: 8px; max-height: calc(100% - 16px); font-size: 14px;
  }
  /* Preview is used by tapping nodes, so its panel must leave the tree showing. */
  body.nj-mobile .st-preview-panel { max-height: 42%; }
  body.nj-mobile .st-vp-item { min-height: var(--nj-tap); }
  body.nj-mobile .st-pv-row label { min-height: var(--nj-tap); }
  body.nj-mobile .st-pv-row .st-mini-in { min-height: var(--nj-tap); width: 72px !important; font-size: 16px; }
  body.nj-mobile .nj-st-zoom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    right: calc(10px + var(--nj-safe-right));
    bottom: calc(10px + var(--nj-safe-bottom));
    z-index: 4;
  }
  body.nj-mobile .nj-st-zoom button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nj-tap-lg);
    height: var(--nj-tap-lg);
    min-height: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--nj-canvas-border, rgba(255,255,255,0.25));
    background: var(--nj-canvas-control, rgba(30, 27, 36, 0.9));
    color: var(--nj-canvas-text, #e2d3a6);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  body.nj-mobile .nj-st-zoom button:active { filter: brightness(1.6); }
  body.nj-mobile .nj-st-zoom .nj-st-zoom-fit { font-size: 12px; letter-spacing: .3px; }
  body.nj-mobile .nj-st-hint {
    display: block;
    position: absolute; left: 8px; bottom: calc(10px + var(--nj-safe-bottom)); z-index: 3;
    max-width: calc(100% - 80px); padding: 6px 10px; border-radius: 8px;
    background: var(--nj-canvas-control, rgba(30, 27, 36, 0.85)); color: var(--nj-canvas-text-dim, #e2d3a6);
    font-size: 12px; line-height: 1.35; pointer-events: none;
  }
  body.nj-mobile .nj-st-hint[hidden] { display: none; }

  /* Inspector: full width, tap-sized controls, no 320px column. */
  body.nj-mobile .st-inspector { width: 100%; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + var(--nj-safe-bottom)); }
  body.nj-mobile .st-in { min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile textarea.st-in { min-height: 72px; }
  body.nj-mobile .st-sec-sum { min-height: var(--nj-tap); display: flex; align-items: center; }
  body.nj-mobile .st-mini { min-height: var(--nj-tap) !important; min-width: var(--nj-tap) !important; padding: 6px 12px !important; font-size: 13px !important; justify-content: center; }
  body.nj-mobile .st-mini-in { min-height: var(--nj-tap); width: 72px !important; }
  body.nj-mobile .st-check { min-height: var(--nj-tap); gap: 10px; }
  body.nj-mobile .st-prereq { flex-wrap: wrap; }
  body.nj-mobile .st-prereq .st-flbl { flex-direction: row; align-items: center; gap: 6px; }
  body.nj-mobile .st-affinity-btn { min-height: var(--nj-tap-lg); justify-content: center; }
  body.nj-mobile .st-insp-icon > div > div[onclick] { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
  /* The list panel's tree tabs are tap-sized. */
  body.nj-mobile .st-tree-tab { min-height: var(--nj-tap); justify-content: center; }
}

/* ── Landscape phones: keep the switcher and toolbar compact so the canvas has room ── */
@media (max-width: 959px) and (max-height: 500px) {
  body.nj-mobile .nj-st-bar { padding: 2px 8px; }
  body.nj-mobile .st-toolbar { padding: 2px 8px; }
  body.nj-mobile .nj-st-zoom { flex-direction: row; }
  body.nj-mobile .st-validate-panel, body.nj-mobile .st-preview-panel { right: auto; width: 52%; max-height: calc(100% - 16px); }
  body.nj-mobile .nj-st-hint { display: none; }
  body.nj-mobile .editor-panel .toolbar { padding-top: 6px; padding-bottom: calc(6px + var(--nj-safe-bottom)); }
  body.nj-mobile .editor-panel .toolbar > button { min-height: var(--nj-tap); }
}