/* ═══════════════════════════════════════════════════
   TILES TAB — Sprint 9 three-dock conversion (T2)
   Left dock = Tool/Options/Export (cv-shell-sections);
   center = canvas + bottom tileset picker dock;
   right dock = reserved layer/element panel (BETA roadmap).
   Loaded on /maker ONLY — /studio + /studio/edit keep tiles.css's
   2-col grid. Scoped .maker .tab-tiles; element ids unchanged so the
   shared tiles.js drives both DOMs. Overrides tiles.css where needed.
   ═══════════════════════════════════════════════════ */

/* ── Panel body: cancel tiles.css 2-col grid → flex row ── */
.maker .tab-tiles .panel-body {
  display: flex;
  grid-template-columns: none;
  height: 100%;
  min-height: 0;
}

/* ── Left dock — Tool / Options / Export ── */
.maker .tab-tiles .controls-col {
  flex: 0 0 220px;
  width: 220px;
}

/* ── Map section (New / Save / My Maps) — parity with the Characters tab's
   load/save category buttons (those styles are scoped to .tab-character). ── */
.maker .tab-tiles .cv-edit-categories { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.maker .tab-tiles .cv-edit-cat-btn {
  text-align: left; padding: 6px 10px; font: inherit; font-size: 12px;
  border: none; background: transparent; border-radius: 3px; cursor: pointer; color: var(--text);
}
.maker .tab-tiles .cv-edit-cat-btn:hover { background: rgba(0, 0, 0, 0.05); }
.maker .tab-tiles .cv-edit-cat-btn.active { background: var(--accent, #4a9ec0); color: #fff; }
.maker .tab-tiles .cv-edit-cat-btn:disabled { cursor: not-allowed; color: var(--text-dim); opacity: 0.5; }
.maker .tab-tiles .cv-edit-cat-btn:disabled:hover { background: transparent; }

/* Toolbar buttons keep their natural width (don't stretch to fill now that
   New/Save/My Maps moved to the sidebar). The base .btn is width:100% for the
   vertical sidebar stacks, so override to auto here in the horizontal toolbar. */
.maker .tab-tiles .preview-toolbar .tiles-toolbar-btn { flex: 0 0 auto; width: auto; }

/* ── Center — toolbar + canvas + bottom picker dock ── */
.maker .tab-tiles .preview-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.maker .tab-tiles .preview-col .tiles-canvas-frame {
  flex: 1 1 auto;
  min-height: 0;
}

/* MB-2: camera viewport — the canvas fills the frame (no scroll-pan); the
   camera handles panning + zoom. JS sizes the buffer to this box 1:1. */
.maker .tab-tiles .tiles-vp { overflow: hidden; }
.maker .tab-tiles #tiles-cw { position: absolute; inset: 0; margin: 0; }
.maker .tab-tiles #tiles-mc,
.maker .tab-tiles #tiles-oc { width: 100%; height: 100%; }

/* ── Bottom dock — tileset picker (collapsible + drag-to-resize) ── */
.maker .tab-tiles .tiles-picker-dock {
  flex: 0 0 var(--tiles-picker-dock-h, 232px);   /* height set by the resize handle */
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;                            /* anchor for the resize handle */
  border-top: 1px solid var(--border);
  background: var(--chrome-lo, rgba(0, 0, 0, 0.12));
}
.maker .tab-tiles .tiles-picker-dock.collapsed { flex-basis: auto; }   /* shrink to the header */
/* Top-edge drag handle (mirrors npc/chat dock resize). Weighted upward so a
   cursor landing just above the dock still catches it; hidden when collapsed. */
.maker .tab-tiles .tiles-picker-dock-resize-handle {
  position: absolute; top: -10px; left: 0; right: 0; height: 14px;
  cursor: ns-resize; z-index: 11; background: transparent;
}
.maker .tab-tiles .tiles-picker-dock-resize-handle::after {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px;
  background: transparent; transition: background 100ms;
}
.maker .tab-tiles .tiles-picker-dock-resize-handle:hover::after,
.maker .tab-tiles .tiles-picker-dock-resize-handle.dragging::after { background: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-picker-dock.collapsed .tiles-picker-dock-resize-handle { display: none; }
.maker .tab-tiles .tiles-picker-dock-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; user-select: none;   /* design-system 2026-08-06 */
  background: var(--chrome-lo, #f8f8fa);
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-mid);
}
.maker .tab-tiles .tiles-picker-dock-title { flex: 1; }
.maker .tab-tiles .tiles-picker-dock-chevron { transition: transform .15s; }
.maker .tab-tiles .tiles-picker-dock.collapsed .tiles-picker-dock-chevron { transform: rotate(-90deg); }
.maker .tab-tiles .tiles-picker-dock.collapsed .tiles-picker-dock-body { display: none; }
.maker .tab-tiles .tiles-picker-dock-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 10px; min-height: 0; overflow: hidden;
}

/* picker list → wide auto-fill grid that fills the dock width */
.maker .tab-tiles .tiles-picker-dock .tiles-plist {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}
/* selstrip sits inline in the dock (it had a top margin in the sidebar) */
.maker .tab-tiles .tiles-picker-dock .tiles-selstrip { margin-top: 0; }

/* ── Right dock — reserved layer / element controls ── */
.maker .tab-tiles .tiles-right-dock {
  flex: 0 0 220px;
  width: 220px;
  border-left: 1px solid var(--border);
  padding: 14px 12px;
  overflow-y: auto;
  min-height: 0;
  background: var(--tab-active);
}
.maker .tab-tiles .tiles-layers-placeholder {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 8px 2px;
}

/* ═══════════════════════════════════════════════════
   MB-1 — Map builder: add-layer, context-swap, layers panel
   ═══════════════════════════════════════════════════ */

/* [hidden] must beat the dock's display:flex / menu's display:flex */
.maker .tab-tiles .tiles-picker-dock[hidden],
.maker .tab-tiles .tiles-addlayer-menu[hidden],
.maker .tab-tiles .tiles-layer-tools[hidden] { display: none; }

/* ── Add-layer control + menu (top of left dock) ── */
.maker .tab-tiles .tiles-addlayer-section { position: relative; }
.maker .tab-tiles .tiles-addlayer-btn { width: 100%; justify-content: center; }
.maker .tab-tiles .tiles-addlayer-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px; padding: 4px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-hi);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.maker .tab-tiles .tiles-addlayer-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer;
  font-size: 13px; color: var(--text); text-align: left;
}
.maker .tab-tiles .tiles-addlayer-opt:hover { background: var(--chrome-lo, rgba(0,0,0,0.06)); }

/* ── Right-dock Layers panel — rows (parity with Character cv-layer-row:
   36px tall, 11px text, radius 4, no border; active = soft accent fill) ── */
.maker .tab-tiles .tiles-layer-list { display: flex; flex-direction: column; gap: 0; padding: 4px; overflow-y: auto; scrollbar-width: thin; }
/* Collapsible "Map Layer" parent header (parity with Characters' group row) */
.maker .tab-tiles .tiles-layer-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; cursor: pointer; user-select: none; border-radius: 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 3px;
}
.maker .tab-tiles .tiles-layer-group-header:hover { background: rgba(0,0,0,0.04); }
.maker .tab-tiles .tiles-layer-group-caret {
  flex: 0 0 auto; width: 12px; color: var(--text-dim); font-size: 10px; line-height: 1;
  pointer-events: none; transition: transform .12s ease;
}
.maker .tab-tiles .tiles-layer-group-header[data-collapsed="true"] .tiles-layer-group-caret { transform: rotate(-90deg); }
.maker .tab-tiles .tiles-layer-group-thumb {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 4px; background: #e4e6ea; image-rendering: pixelated;
}
.maker .tab-tiles .tiles-layer-group-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.maker .tab-tiles .tiles-layer-group-slot { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.maker .tab-tiles .tiles-layer-group-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-tiles .tiles-layer-row {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 6px; border-radius: 4px; cursor: pointer;
  user-select: none; font-size: 11px; color: var(--text);
}
.maker .tab-tiles .tiles-layer-row:hover { background: rgba(0,0,0,0.04); }
.maker .tab-tiles .tiles-layer-row.is-active { background: rgba(74,158,192,0.16); }
.maker .tab-tiles .tiles-layer-row.hidden-item   { opacity: 0.45; }
.maker .tab-tiles .tiles-layer-row.solo-excluded { opacity: 0.25; }
/* Drag-drop feedback: insert-above/below show an edge insertion line ("between
   layers" → regular reorder); clip shows a full ring ("on the layer" → clip). */
.maker .tab-tiles .tiles-layer-row.is-drop-above { box-shadow: inset 0 2px 0 var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-layer-row.is-drop-below { box-shadow: inset 0 -2px 0 var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-layer-row.is-drop-clip {
  box-shadow: inset 0 0 0 2px var(--accent, #4a9ec0); background: rgba(74,158,192,0.16);
}
.maker .tab-tiles .tiles-layer-row.is-dragging { opacity: 0.35; }

.maker .tab-tiles .tiles-layer-eye {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; color: var(--text-dim);
}
.maker .tab-tiles .tiles-layer-eye:hover { color: var(--text); }

.maker .tab-tiles .tiles-layer-solo {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--border-lo, #b9b9c2); background: none; cursor: pointer;
  transition: background .1s, border-color .1s;
}
.maker .tab-tiles .tiles-layer-solo:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-layer-solo.active { background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); }
/* Clip-to-below toggle (adjustment layers) */
.maker .tab-tiles .tiles-layer-clip {
  flex: 0 0 auto; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; line-height: 1; color: var(--text-dim); border-radius: 3px;
}
.maker .tab-tiles .tiles-layer-clip:hover { color: var(--text); background: rgba(0,0,0,0.06); }
.maker .tab-tiles .tiles-layer-clip.active { color: var(--accent, #4a9ec0); }
/* A clipped adjustment indents + shows a hook, reading as "applies to the layer below". */
.maker .tab-tiles .tiles-layer-row.is-clipped { margin-left: 16px; }
.maker .tab-tiles .tiles-layer-row.is-clipped .tiles-layer-clip { color: var(--accent, #4a9ec0); }

.maker .tab-tiles .tiles-layer-thumb {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 4px;
  background: #e4e6ea; image-rendering: pixelated;
}

.maker .tab-tiles .tiles-layer-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maker .tab-tiles .tiles-layer-rename {
  flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 2px 4px;
  border: 1px solid var(--accent, #4a9ec0); border-radius: 4px;
}

.maker .tab-tiles .tiles-layer-act {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 12px; color: var(--text-dim); display: none;   /* hidden → name takes full width; appears on hover (MB-13) */
}
.maker .tab-tiles .tiles-layer-row:hover .tiles-layer-act,
.maker .tab-tiles .tiles-layer-act.active { display: inline-block; opacity: 0.7; }   /* .active = a locked folder's 🔒 stays shown */
.maker .tab-tiles .tiles-layer-act:hover { opacity: 1; color: var(--text); }

/* ── MB-5b: expand-to-contents tree (child rows under a layer) ── */
.maker .tab-tiles .tiles-layer-chev {
  flex: 0 0 auto; width: 13px; background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 10px; line-height: 1; padding: 0;
}
.maker .tab-tiles .tiles-layer-chev.is-empty { visibility: hidden; cursor: default; }
.maker .tab-tiles .tiles-layer-child {
  display: flex; align-items: center; gap: 6px; height: 26px;
  padding: 0 6px 0 28px; border-radius: 4px; cursor: pointer;
  font-size: 11px; color: var(--text-dim);
}
.maker .tab-tiles .tiles-layer-child:hover { background: rgba(0,0,0,0.04); }
.maker .tab-tiles .tiles-layer-child.is-active { background: rgba(74,158,192,0.16); color: var(--text); }
.maker .tab-tiles .tiles-layer-child.is-static { cursor: default; }
.maker .tab-tiles .tiles-layer-child-thumb {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px;
  background: #e4e6ea; image-rendering: pixelated;
}
.maker .tab-tiles .tiles-layer-child-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-tiles .tiles-layer-child .tiles-layer-act { display: none; }
.maker .tab-tiles .tiles-layer-child:hover .tiles-layer-act { display: inline-block; opacity: 0.7; }

/* ── MB-8: adjustment-layer controls (expanded under an Adjustment row) ── */
.maker .tab-tiles .tiles-adjust-panel {
  display: flex; flex-direction: column; gap: 7px;
  margin: 2px 6px 6px 28px; padding: 8px;
  border-radius: 6px; background: rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.08);
}
/* MB-9 — relocated into the left dock: the panel sits flush inside its
   cv-shell-section (drop the right-dock indent + nested card chrome). */
.maker .tab-tiles #tiles-adjust-host .tiles-adjust-panel {
  margin: 0; padding: 0; background: none; border: none; gap: 9px;
}
/* The first subhead ("Color Adjust") sits right under the section header —
   drop its divider rule so it doesn't double-line. */
.maker .tab-tiles .tiles-adjust-panel > .tiles-adjust-colorgroup > .tiles-adjust-subhead:first-child,
.maker .tab-tiles .tiles-adjust-panel > .tiles-adjust-subhead:first-child {
  border-top: none; padding-top: 0; margin-top: 0;
}
/* Color Adjust group dims + goes inert when a solid fill fully covers it
   (Normal blend, 100% opacity); re-activates on a combining blend / lower opacity. */
.maker .tab-tiles .tiles-adjust-colorgroup { display: flex; flex-direction: column; gap: 7px; transition: opacity 0.12s; }
.maker .tab-tiles .tiles-adjust-colorgroup.is-inactive { opacity: 0.4; pointer-events: none; }
.maker .tab-tiles .tiles-adjust-ctrl {
  display: grid; grid-template-columns: 58px 1fr 60px; align-items: center; gap: 6px;
}
.maker .tab-tiles .tiles-adjust-label {
  font-size: 11px; color: var(--text-dim); cursor: pointer; user-select: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maker .tab-tiles .tiles-adjust-ctrl.is-modified .tiles-adjust-label { color: var(--accent, #4a9ec0); font-weight: 600; }
/* Custom slider: a clearly-visible track + thumb (the native track was nearly
   invisible against the panel, so it was hard to tell where the handle sat). */
.maker .tab-tiles .tiles-adjust-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
.maker .tab-tiles .tiles-adjust-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: rgba(0,0,0,0.22);
}
.maker .tab-tiles .tiles-adjust-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--accent, #4a9ec0); border: 2px solid var(--chrome-hi);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.maker .tab-tiles .tiles-adjust-range::-moz-range-track {
  height: 5px; border-radius: 3px; background: rgba(0,0,0,0.22);
}
.maker .tab-tiles .tiles-adjust-range::-moz-range-thumb {
  box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #4a9ec0); border: 2px solid var(--chrome-hi);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.maker .tab-tiles .tiles-adjust-range:focus { outline: none; }
.maker .tab-tiles .tiles-adjust-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(74,158,192,0.35);
}
/* Type-in value field (replaces the read-only value span). */
.maker .tab-tiles .tiles-adjust-valwrap { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.maker .tab-tiles .tiles-adjust-num {
  width: 38px; box-sizing: border-box; padding: 2px 3px;
  font-size: 10px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--chrome-hi);
  border: 1px solid rgba(0,0,0,0.16); border-radius: 4px;
  -moz-appearance: textfield; appearance: textfield;
}
.maker .tab-tiles .tiles-adjust-num::-webkit-outer-spin-button,
.maker .tab-tiles .tiles-adjust-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.maker .tab-tiles .tiles-adjust-num:focus { outline: none; border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-adjust-unit { font-size: 10px; color: var(--text-dim); }
.maker .tab-tiles .tiles-adjust-ctrl.is-modified .tiles-adjust-num { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-adjust-val {
  font-size: 10px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums;
}
.maker .tab-tiles .tiles-adjust-ctrl.is-modified .tiles-adjust-val { color: var(--text); }
.maker .tab-tiles .tiles-adjust-reset {
  align-self: flex-end; margin-top: 1px; padding: 3px 9px;
  font-size: 10px; border-radius: 4px; cursor: pointer;
  background: none; border: 1px solid rgba(0,0,0,0.12); color: var(--text-dim);
}
.maker .tab-tiles .tiles-adjust-reset:hover:not(:disabled) { background: rgba(0,0,0,0.06); color: var(--text); }
.maker .tab-tiles .tiles-adjust-reset:disabled { opacity: 0.4; cursor: default; }
/* MB-9a — compositing controls (blend mode + opacity) */
.maker .tab-tiles .tiles-adjust-subhead {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); margin: 3px 0 0; padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.maker .tab-tiles .tiles-adjust-select {
  grid-column: 2 / 4;   /* span the slider + value columns so labels aren't clipped */
  width: 100%; font-size: 11px; padding: 2px 4px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.16); background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-adjust-ctrl.is-modified .tiles-adjust-select { border-color: var(--accent, #4a9ec0); }
/* Custom blend dropdown — hover an option to live-preview it on the canvas. */
.maker .tab-tiles .tiles-adjust-blend { grid-column: 2 / 4; }
.maker .tab-tiles .tiles-adjust-blend-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px; padding: 2px 6px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.16); background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-adjust-ctrl.is-modified .tiles-adjust-blend-trigger { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-adjust-blend-caret { color: var(--text-dim); font-size: 9px; }
.maker .tab-tiles .tiles-adjust-blend-menu {
  position: fixed; z-index: 1000; max-height: 250px; overflow-y: auto; padding: 3px;
  border-radius: 6px; background: var(--chrome-hi);
  border: 1px solid rgba(0,0,0,0.16); box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.maker .tab-tiles .tiles-adjust-blend-opt {
  font-size: 11px; padding: 4px 9px; border-radius: 4px; cursor: pointer; color: var(--text); white-space: nowrap;
}
.maker .tab-tiles .tiles-adjust-blend-opt:hover { background: rgba(74,158,192,0.16); }
.maker .tab-tiles .tiles-adjust-blend-opt.is-sel { color: var(--accent, #4a9ec0); font-weight: 600; }
/* MB-9b — fill row (enable + color swatch) */
.maker .tab-tiles .tiles-adjust-fill-row { display: flex; align-items: center; gap: 8px; }
.maker .tab-tiles .tiles-adjust-fill-cb { flex: 0 0 auto; margin: 0; cursor: pointer; accent-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-adjust-fill-color {
  flex: 0 0 auto; width: 28px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; background: none;
}
.maker .tab-tiles .tiles-adjust-fill-row .tiles-adjust-label { cursor: default; }
.maker .tab-tiles .tiles-adjust-fill-type {
  margin-left: auto; font-size: 11px; padding: 2px 4px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.16); background: var(--chrome-hi); color: var(--text); cursor: pointer;
}
/* MB-9c — mask shape buttons + draw hint */
.maker .tab-tiles .tiles-adjust-mask-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.maker .tab-tiles .tiles-adjust-mask-btn {
  flex: 1 1 auto; padding: 3px 6px; font-size: 10px; border-radius: 4px; cursor: pointer;
  background: none; border: 1px solid rgba(0,0,0,0.16); color: var(--text-dim); white-space: nowrap;
}
.maker .tab-tiles .tiles-adjust-mask-btn:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.maker .tab-tiles .tiles-adjust-mask-btn.is-active { border-color: var(--accent, #4a9ec0); color: var(--accent, #4a9ec0); font-weight: 600; }
.maker .tab-tiles .tiles-adjust-mask-btn.is-drawing { background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); color: #fff; }
.maker .tab-tiles .tiles-adjust-mask-hint { font-size: 10px; color: var(--accent, #4a9ec0); font-style: italic; padding: 1px 2px; }
/* MB-9 multi-mask — per-shape list + clear-all */
.maker .tab-tiles .tiles-adjust-mask-list { display: flex; flex-direction: column; gap: 3px; }
.maker .tab-tiles .tiles-adjust-mask-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10px; color: var(--text-dim); padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,0.04);
  cursor: pointer;
}
.maker .tab-tiles .tiles-adjust-mask-item:hover { background: rgba(0,0,0,0.07); }
.maker .tab-tiles .tiles-adjust-mask-item.is-selected {
  background: rgba(74,158,192,0.16); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent, #4a9ec0);
}
.maker .tab-tiles .tiles-adjust-mask-del {
  flex: 0 0 auto; width: 15px; height: 15px; line-height: 1; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 12px; color: #fff; background: rgba(40,40,40,0.5);
}
.maker .tab-tiles .tiles-adjust-mask-del:hover { background: #c93030; }
.maker .tab-tiles .tiles-adjust-mask-clear {
  align-self: flex-start; padding: 2px 8px; font-size: 10px; border-radius: 4px; cursor: pointer;
  background: none; border: 1px solid rgba(0,0,0,0.16); color: var(--text-dim);
}
.maker .tab-tiles .tiles-adjust-mask-clear:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.maker .tab-tiles .tiles-adjust-mask-clear.is-confirm {
  background: #c93030; border-color: #c93030; color: #fff; font-weight: 600;
}

/* ── MB-8: filter-preset cards (bottom dock for an active adjust layer) ── */
.maker .tab-tiles .tiles-adjust-presets { display: flex; flex-direction: column; gap: 8px; }
.maker .tab-tiles .tiles-adjust-caption {
  font-size: 11px; color: var(--text-dim); font-weight: 600; padding: 0 2px;
}
/* MB-9 — two labeled preset rows (Color · Fill & Light) stacked in the dock. */
.maker .tab-tiles .tiles-adjust-preset-row { display: flex; flex-direction: column; gap: 8px; }
.maker .tab-tiles .tiles-adjust-preset-row + .tiles-adjust-preset-row {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.08);
}
.maker .tab-tiles .tiles-adjust-row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px;
}
.maker .tab-tiles .tiles-adjust-row-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}
.maker .tab-tiles .tiles-adjust-preset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px;
}
.maker .tab-tiles .tiles-adjust-preset {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px; border-radius: 7px; cursor: pointer;
  background: var(--chrome-lo, rgba(0,0,0,0.04)); border: 2px solid transparent;
}
.maker .tab-tiles .tiles-adjust-preset:hover { background: rgba(0,0,0,0.07); }
.maker .tab-tiles .tiles-adjust-preset.is-active { border-color: var(--accent, #4a9ec0); background: rgba(74,158,192,0.16); }
.maker .tab-tiles .tiles-adjust-preset-thumb {
  width: 100%; height: 38px; border-radius: 4px; display: block;
  image-rendering: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.maker .tab-tiles .tiles-adjust-preset-name {
  font-size: 10px; color: var(--text-dim); line-height: 1; white-space: nowrap;
}
.maker .tab-tiles .tiles-adjust-preset.is-active .tiles-adjust-preset-name { color: var(--text); font-weight: 600; }
.maker .tab-tiles .tiles-adjust-preset { position: relative; }
.maker .tab-tiles .tiles-adjust-preset-del {
  position: absolute; top: 1px; right: 2px; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-size: 12px; color: #fff; background: rgba(40,40,40,0.62); opacity: 0;
}
.maker .tab-tiles .tiles-adjust-preset:hover .tiles-adjust-preset-del { opacity: 1; }
.maker .tab-tiles .tiles-adjust-preset-del:hover { background: #c93030; }
/* "Save current" card — dashed placeholder look */
.maker .tab-tiles .tiles-adjust-save-card {
  justify-content: center; gap: 6px; min-height: 60px;
  background: none; border: 2px dashed rgba(0,0,0,0.18);
}
.maker .tab-tiles .tiles-adjust-save-card:hover { border-color: var(--accent, #4a9ec0); background: rgba(74,158,192,0.10); }
.maker .tab-tiles .tiles-adjust-save-plus { font-size: 18px; color: var(--text-dim); line-height: 1; }
.maker .tab-tiles .tiles-adjust-save-input {
  width: 100%; align-self: stretch; min-height: 60px; box-sizing: border-box;
  padding: 4px 6px; font-size: 11px; border-radius: 7px;
  border: 2px solid var(--accent, #4a9ec0); background: var(--chrome-hi); color: var(--text);
}

/* ── MB-3: background preset gallery (bottom dock) ── */
.maker .tab-tiles .tiles-bg-gallery {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* Search bar (large/modern lists only) */
.maker .tab-tiles .tiles-bg-searchbar { position: sticky; top: 0; z-index: 2; padding-bottom: 6px; background: #1c2027; }
.maker .tab-tiles .tiles-bg-search {
  width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: var(--fs-4);
  color: var(--text); background: var(--input-bg, rgba(255,255,255,.06));
  border: 1px solid var(--border-lo); border-radius: 6px;
}
.maker .tab-tiles .tiles-bg-sections { display: flex; flex-direction: column; gap: 10px; }
/* Collapsible section header (now a button) */
.maker .tab-tiles .tiles-bg-group-title {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim); margin: 2px 0 4px;
  padding: 3px 2px; background: none; border: 0; cursor: pointer; text-align: left;
}
.maker .tab-tiles .tiles-bg-group-title:hover { color: var(--text); }
.maker .tab-tiles .tiles-bg-group-caret { font-size: 10px; transition: transform .12s ease; display: inline-block; }
.maker .tab-tiles .tiles-bg-group.is-collapsed .tiles-bg-group-caret { transform: rotate(-90deg); }
.maker .tab-tiles .tiles-bg-group-count {
  margin-left: auto; font-weight: 600; color: var(--text-dim);
  background: var(--input-bg, rgba(255,255,255,.06)); border-radius: 9px; padding: 0 7px; font-size: 10px;
}
.maker .tab-tiles .tiles-bg-group.is-collapsed .tiles-bg-grid { display: none; }
.maker .tab-tiles .tiles-bg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.maker .tab-tiles .tiles-bg-card {
  position: relative; padding: 0; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  background: #cdd2da; display: block;
}
.maker .tab-tiles .tiles-bg-card:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-bg-card.is-active {
  border-color: var(--accent, #4a9ec0); box-shadow: 0 0 0 2px var(--accent, #4a9ec0);
}
.maker .tab-tiles .tiles-bg-card-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Loading shimmer while a preset thumbnail is still generating (canvas is
   transparent until painted, so the animated background shows through). */
.maker .tab-tiles .tiles-bg-card.is-loading .tiles-bg-card-thumb {
  background: linear-gradient(100deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.11) 50%, rgba(0,0,0,0.05) 70%);
  background-size: 220% 100%;
  animation: tiles-bg-shimmer 1.15s ease-in-out infinite;
}
@keyframes tiles-bg-shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.maker .tab-tiles .tiles-bg-card-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 7px 4px;
  font-size: 11px; font-weight: 600; color: #fff; text-align: left;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Spine" badge — flags backdrops whose art is a Spine skeleton baked to a static
   image (rendered differently from plain bitmap backgrounds). */
.maker .tab-tiles .tiles-bg-card-spine {
  position: absolute; top: 5px; right: 5px; padding: 1px 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; line-height: 1.5;
  color: #fff; background: rgba(124, 92, 196, 0.92); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4); pointer-events: none;
}
/* Unavailable (dropped) backdrops — shown so users know they exist; not applyable. */
.maker .tab-tiles .tiles-bg-card.is-dropped { cursor: help; background: #2a2d33; }
.maker .tab-tiles .tiles-bg-card.is-dropped:hover { border-color: #6b7280; }
.maker .tab-tiles .tiles-bg-card-thumb-dropped {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 22px; color: #6b7280;
  background: repeating-linear-gradient(45deg, #23262b, #23262b 8px, #292d33 8px, #292d33 16px);
}
.maker .tab-tiles .tiles-bg-card.is-dropped .tiles-bg-card-label {
  color: #aeb4bf; background: linear-gradient(transparent, rgba(0,0,0,0.5));
}
.maker .tab-tiles .tiles-bg-card-dropped-badge {
  position: absolute; top: 5px; right: 5px; padding: 1px 6px;
  font-size: 9px; font-weight: 700; line-height: 1.5; color: #fff;
  background: rgba(180, 90, 90, 0.92); border-radius: 999px; pointer-events: none;
}

/* ── MB-4: object browser (bottom dock) — region select + filter chips ── */
.maker .tab-tiles [data-picker="objects"] .tiles-picker-dock-body { gap: 6px; }
.maker .tab-tiles .tiles-obj-bar { display: flex; align-items: center; gap: 8px; }
.maker .tab-tiles .tiles-obj-region {
  flex: 0 0 auto; max-width: 45%; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-obj-bar .tiles-search { flex: 1 1 auto; }
.maker .tab-tiles .tiles-obj-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.maker .tab-tiles .tiles-obj-chip {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--chrome-hi); color: var(--text-dim); cursor: pointer;
  font-size: 12px; line-height: 1.2; user-select: none;
}
.maker .tab-tiles .tiles-obj-chip:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-obj-chip.is-on {
  background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); color: #fff; font-weight: 600;
}
.maker .tab-tiles .tiles-obj-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.maker .tab-tiles .tiles-obj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px;
}
.maker .tab-tiles .tiles-obj-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-lo, rgba(0,0,0,0.04));
  cursor: pointer; padding: 2px;
}
.maker .tab-tiles .tiles-obj-thumb:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-obj-thumb canvas { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.maker .tab-tiles .tiles-obj-loading { font-size: 12px; color: var(--text-dim); padding: 10px 2px; }

/* ── MB-6 — "My Maps" library + save modal (char-parity) ──────────────── */
.maker .tab-tiles .tiles-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; padding: 2px;
}
.maker .tab-tiles .tiles-lib-empty { font-size: 12px; color: var(--text-dim); padding: 14px 4px; grid-column: 1 / -1; }
.maker .tab-tiles .tiles-lib-card {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  background: var(--chrome-lo, rgba(0,0,0,0.04));
}
.maker .tab-tiles .tiles-lib-card.is-active { border-color: var(--accent, #4a9ec0); box-shadow: 0 0 0 1px var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-lib-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; width: 100%; border: 0; padding: 0; cursor: pointer;
  background: #0b0e13; border-radius: 5px; overflow: hidden; font-size: 22px;
}
.maker .tab-tiles .tiles-lib-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* MB-14 — kind badge on imported ('edited') maps */
.maker .tab-tiles .tiles-lib-badge {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; color: #fff; pointer-events: none;
}
.maker .tab-tiles .tiles-lib-badge-edited { background: rgba(74, 158, 192, 0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.maker .tab-tiles .tiles-lib-name {
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maker .tab-tiles .tiles-lib-name:hover { color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-lib-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.maker .tab-tiles .tiles-lib-share {
  font-size: 10px; font-family: ui-monospace, monospace; letter-spacing: 0.5px;
  border: 1px solid var(--border); border-radius: 4px; background: transparent;
  color: var(--text-dim); cursor: pointer; padding: 2px 5px;
}
.maker .tab-tiles .tiles-lib-share:hover { border-color: var(--accent, #4a9ec0); color: var(--text); }
.maker .tab-tiles .tiles-lib-del {
  border: 0; background: transparent; cursor: pointer; font-size: 13px; opacity: 0.6; padding: 2px 4px;
}
.maker .tab-tiles .tiles-lib-del:hover { opacity: 1; }

/* Save-name modal — centered overlay over the canvas column */
.maker .tab-tiles .preview-col { position: relative; }
.maker .tab-tiles .tiles-save-modal {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.maker .tab-tiles .tiles-save-modal[hidden] { display: none; }
.maker .tab-tiles .tiles-save-modal-box {
  background: var(--chrome, #1b1f27); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; width: min(360px, 90%); display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.maker .tab-tiles .tiles-save-modal-title { font-size: 14px; font-weight: 700; }
.maker .tab-tiles .tiles-save-modal-input {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-lo, rgba(0,0,0,0.2)); color: var(--text);
}
.maker .tab-tiles .tiles-save-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Region-switch guard (Phase 0) — explanatory copy + danger affordance. */
.maker .tab-tiles .tiles-save-modal-msg {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: #aab1c0;
}
.maker .tab-tiles .tiles-save-modal-msg strong { color: var(--text, #eef); font-weight: 700; }
.maker .tab-tiles .btn-danger {
  background: #b3392f; border-color: #b3392f; color: #fff;
}
.maker .tab-tiles .btn-danger:hover { background: #c8453a; border-color: #c8453a; }

/* MB-14 — Import Map: add-menu entry + picker modal */
.maker .tab-tiles .tiles-addlayer-sep { height: 1px; margin: 4px 6px; background: var(--border, rgba(0,0,0,0.12)); }
.maker .tab-tiles .tiles-addlayer-import { font-weight: 600; }
.maker .tab-tiles .tiles-import-modal {
  position: absolute; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
}
.maker .tab-tiles .tiles-import-modal[hidden] { display: none; }
.maker .tab-tiles .tiles-import-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.maker .tab-tiles .tiles-import-modal-box {
  position: relative; background: var(--chrome, #1b1f27); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; width: min(680px, 92%); max-height: 82%; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.maker .tab-tiles .tiles-import-modal-head { display: flex; align-items: center; justify-content: space-between; }
.maker .tab-tiles .tiles-import-modal-title { font-size: 14px; font-weight: 700; }
.maker .tab-tiles .tiles-import-modal-close {
  background: none; border: none; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.maker .tab-tiles .tiles-import-search {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-lo, rgba(0,0,0,0.2)); color: var(--text);
}
.maker .tab-tiles .tiles-import-grid {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; align-content: start; padding: 2px;
}
.maker .tab-tiles .tiles-import-grid .npc-grid-header {
  grid-column: 1 / -1; font-size: 11px; font-weight: 700; opacity: 0.7; margin: 6px 2px 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.maker .tab-tiles .tiles-import-grid .npc-grid-msg { grid-column: 1 / -1; opacity: 0.7; padding: 16px; text-align: center; }
.maker .tab-tiles .tiles-import-modal-note { font-size: 11px; opacity: 0.65; }

/* MB-7 P1 — two-pane object browser (By Region): left-dock region picker +
   single category-ordered grid with specialty sub-headers. */
.tab-tiles .tiles-obj-region-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: .85; margin-bottom: 6px; }
.tab-tiles .tiles-obj-region-row select { width: 100%; max-width: none; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); }

/* Phase 3.3 — custom MapleMaker dropdown replacing the native region <select>. */
.tab-tiles .tiles-oregion-cs { position: relative; width: 100%; }
.tab-tiles .tiles-oregion-cs-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text);
  cursor: pointer; text-align: left;
}
.tab-tiles .tiles-oregion-cs-btn:hover { border-color: var(--accent); }
.tab-tiles .tiles-oregion-cs-btn .tiles-oregion-cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-tiles .tiles-oregion-cs-btn .app-menu-caret { flex: 0 0 auto; font-size: 11px; opacity: .7; }
.tab-tiles .tiles-oregion-cs-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.tab-tiles .tiles-oregion-cs-menu .app-menu-item { width: 100%; }
.tab-tiles .tiles-obj-section-head { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin: 12px 2px 2px; padding-top: 8px; border-top: 1px solid var(--border, #3a3f4b); }
.tab-tiles .tiles-obj-section-head:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* ── Objects dock: search toggle in the header (MB-7) ── */
/* The 🔍 button sits between the title (flex:1) and the chevron. Chip styles
   (.tiles-obj-chip / .is-on) are defined above with the legacy chip browser
   and reused as-is for the section filter. */
.maker .tab-tiles .tiles-obj-search-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 6px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-hi); color: var(--text-dim);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.maker .tab-tiles .tiles-obj-search-toggle:hover { border-color: var(--accent, #4a9ec0); color: var(--text); }
.maker .tab-tiles .tiles-obj-search-toggle.is-on {
  background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); color: #fff;
}
.maker .tab-tiles .tiles-obj-chips:empty { display: none; }

/* ── Objects left-dock: mode toggle + By-Category list (MB-7 P3) ── */
.maker .tab-tiles .tiles-obj-mode {
  display: flex; gap: 0; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.maker .tab-tiles .tiles-obj-mode-btn {
  flex: 1 1 0; font: inherit; font-size: 12px; padding: 6px 8px;
  border: 0; background: var(--chrome-hi); color: var(--text-dim); cursor: pointer;
}
.maker .tab-tiles .tiles-obj-mode-btn + .tiles-obj-mode-btn { border-left: 1px solid var(--border); }
.maker .tab-tiles .tiles-obj-mode-btn:hover { color: var(--text); }
.maker .tab-tiles .tiles-obj-mode-btn.is-on { background: var(--accent, #4a9ec0); color: #fff; font-weight: 600; }

.maker .tab-tiles .tiles-obj-catlist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.maker .tab-tiles .tiles-obj-cat-divider {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  opacity: .55; margin: 8px 2px 2px; padding-top: 6px; border-top: 1px solid var(--border, #3a3f4b);
}
.maker .tab-tiles .tiles-obj-cat-divider:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.maker .tab-tiles .tiles-obj-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: 13px; text-align: left; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text); cursor: pointer;
}
.maker .tab-tiles .tiles-obj-cat:hover { background: var(--chrome-lo, rgba(0,0,0,0.04)); }
.maker .tab-tiles .tiles-obj-cat.is-on { background: var(--accent, #4a9ec0); color: #fff; }
.maker .tab-tiles .tiles-obj-cat-count { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.maker .tab-tiles .tiles-obj-cat.is-on .tiles-obj-cat-count { opacity: .85; }

/* ── Favorites star, rails, cross-region search toggle (MB-7 P4) ── */
.maker .tab-tiles .tiles-obj-star {
  position: absolute; top: 1px; right: 2px; line-height: 1; font-size: 13px;
  color: #fff; opacity: 0; cursor: pointer; text-shadow: 0 0 2px rgba(0,0,0,.7);
  transition: opacity .12s, color .12s;
}
.maker .tab-tiles .tiles-obj-thumb:hover .tiles-obj-star { opacity: .65; }
.maker .tab-tiles .tiles-obj-star:hover { opacity: 1; }
.maker .tab-tiles .tiles-obj-star.is-on { opacity: 1; color: #ffcc33; }   /* favorited: always shown, gold */

.maker .tab-tiles .tiles-obj-rail { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; margin-bottom: 6px; }
.maker .tab-tiles .tiles-obj-rail[hidden] { display: none; }
.maker .tab-tiles .tiles-obj-rail-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
.maker .tab-tiles .tiles-obj-rail-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.maker .tab-tiles .tiles-obj-rail-strip .tiles-obj-thumb { flex: 0 0 auto; width: 52px; height: 52px; aspect-ratio: auto; }

.maker .tab-tiles .tiles-obj-allregions {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-dim); white-space: nowrap; cursor: pointer; user-select: none;
}
.maker .tab-tiles .tiles-obj-allregions input { margin: 0; }

/* ── Text layer settings panel (MB-11 P1) ── */
.maker .tab-tiles .tiles-text-host { display: flex; flex-direction: column; gap: 8px; }
.maker .tab-tiles .tiles-text-content {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px;
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-text-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.maker .tab-tiles .tiles-text-rowlabel { flex: 0 0 56px; }
.maker .tab-tiles .tiles-text-select {
  flex: 1 1 auto; font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-text-color { flex: 0 0 auto; width: 40px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.maker .tab-tiles .tiles-text-btnrow,
.maker .tab-tiles .tiles-text-seg { display: flex; gap: 4px; flex: 1 1 auto; }
.maker .tab-tiles .tiles-text-btn,
.maker .tab-tiles .tiles-text-segbtn {
  flex: 1 1 0; font: inherit; font-size: 12px; padding: 5px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-hi); color: var(--text-dim); cursor: pointer;
}
.maker .tab-tiles .tiles-text-btn:hover,
.maker .tab-tiles .tiles-text-segbtn:hover { border-color: var(--accent, #4a9ec0); color: var(--text); }
.maker .tab-tiles .tiles-text-btn.is-on,
.maker .tab-tiles .tiles-text-segbtn.is-on { background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); color: #fff; }

/* ── Text panel — P2 styling controls (MB-11) ── */
.maker .tab-tiles .tiles-text-sectionhead {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); margin: 12px 0 2px; padding-top: 8px; border-top: 1px solid var(--border);
}
.maker .tab-tiles .tiles-text-num {
  width: 48px; font: inherit; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-hi); color: var(--text);
}
.maker .tab-tiles .tiles-text-stroke { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.maker .tab-tiles .tiles-text-stroke .tiles-text-select { flex: 1 1 auto; }
.maker .tab-tiles .tiles-text-stroke .tiles-text-btn { flex: 0 0 26px; padding: 4px 0; }
.maker .tab-tiles .tiles-text-add {
  width: 100%; font: inherit; font-size: 12px; padding: 6px; margin-top: 2px;
  border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.maker .tab-tiles .tiles-text-add:hover { border-color: var(--accent, #4a9ec0); color: var(--text); }
.maker .tab-tiles .tiles-text-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text);
  margin: 6px 0 2px; cursor: pointer; user-select: none;
}
.maker .tab-tiles .tiles-text-toggle input { margin: 0; }
.maker .tab-tiles .tiles-text-subtoggle { margin-left: 4px; color: var(--text-dim); }

/* ── Layer groups / folders (MB-13) ── */
.maker .tab-tiles .tiles-layer-row.is-grouped { margin-left: 14px; border-left: 2px solid var(--border, #d8dbe0); }
.maker .tab-tiles .tiles-folder-row { font-weight: 600; }
.maker .tab-tiles .tiles-folder-icon { flex: 0 0 auto; font-size: 13px; margin: 0 1px; }
.maker .tab-tiles .tiles-layer-row.is-locked { opacity: 0.7; }

/* ── Text gallery Styles/Combos toggle (MB-11) ── */
.maker .tab-tiles .tiles-gallery-toggle { display: inline-flex; gap: 2px; margin-left: 10px; }
.maker .tab-tiles .tiles-gallery-toggle button {
  font: inherit; font-size: 11px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chrome-hi); color: var(--text-dim);
}
.maker .tab-tiles .tiles-gallery-toggle button:hover { color: var(--text); border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-gallery-toggle button.is-on { background: var(--accent, #4a9ec0); border-color: var(--accent, #4a9ec0); color: #fff; }

/* ── Text preset gallery — bottom dock (MB-11 P3) ── */
.maker .tab-tiles .tiles-text-presets { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.maker .tab-tiles .tiles-text-preset-cat {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); margin: 8px 2px 2px;
}
.maker .tab-tiles .tiles-text-preset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px;
}
.maker .tab-tiles .tiles-text-preset {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 4px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--chrome-hi); cursor: pointer;
}
.maker .tab-tiles .tiles-text-preset:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-text-preset-cv { width: 100%; height: 54px; border-radius: 5px; display: block; }
.maker .tab-tiles .tiles-text-preset-label { font-size: 11px; color: var(--text-dim); text-align: center; }
.maker .tab-tiles .tiles-text-preset-del {
  position: absolute; top: 2px; right: 4px; width: 16px; height: 16px; line-height: 14px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; font-size: 12px; cursor: pointer; opacity: 0;
}
.maker .tab-tiles .tiles-text-preset:hover .tiles-text-preset-del { opacity: 1; }

/* ── Font picker (MB-11 P4c) — searchable, grouped, name-in-own-font ── */
.maker .tab-tiles .tiles-font-picker { position: relative; flex: 1 1 auto; min-width: 0; }
.maker .tab-tiles .tiles-font-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 8px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome-hi); color: var(--text); cursor: pointer; text-align: left;
}
.maker .tab-tiles .tiles-font-trigger:hover { border-color: var(--accent, #4a9ec0); }
.maker .tab-tiles .tiles-font-trigname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-tiles .tiles-font-caret { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; }
.maker .tab-tiles .tiles-font-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--chrome-hi); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* the explicit display:flex above would defeat the [hidden] attribute — restore it */
.maker .tab-tiles .tiles-font-pop[hidden] { display: none; }
.maker .tab-tiles .tiles-font-search {
  width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg, #fff); color: var(--text);
}
.maker .tab-tiles .tiles-font-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.maker .tab-tiles .tiles-font-grouphead {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 6px 4px 2px;
}
.maker .tab-tiles .tiles-font-opt {
  display: block; width: 100%; text-align: left; padding: 7px 8px; font-size: 17px; line-height: 1.45;
  border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maker .tab-tiles .tiles-font-opt:hover { background: rgba(74, 158, 192, 0.12); }
.maker .tab-tiles .tiles-font-opt.is-on { background: var(--accent, #4a9ec0); color: #fff; }
.maker .tab-tiles .tiles-font-none { font-size: 12px; color: var(--text-dim); padding: 6px 4px; }

/* ── Inline on-canvas text editor (MB-11 P4b) — positioned + rotated over the block ── */
.maker .tab-tiles .tiles-text-inline {
  position: absolute; z-index: 5; margin: 0; padding: 0; border: 0;
  box-sizing: border-box; resize: none; overflow: hidden; white-space: pre;
  background: rgba(74, 158, 192, 0.10);
  outline: 1px dashed var(--accent, #4a9ec0); outline-offset: 0;
  caret-color: var(--accent, #4a9ec0); vertical-align: top;
}