/* ── tower.css local palette (6.1 colour hoist) — this file's own colours, named and in ONE
   place so the surface can be re-tinted without hunting through the rules below. ── */
:root {
  --mb-zonedone-fg: #fff;
  --author-specimen-wrap-bg: #0e0b07;
  --author-specimen-wrap-c: #191309;
  --on-bd: #c0564a;
  --mb-on-fg: #e58a7c;
  --mb-pal-del-fg: #e2746a;
  --mb-pal-thumb-bg: #0e0a06;
  --mb-autosave-err-bg: #3a1d18;
  --mb-autosave-err-bd: #7a3b32;
  --palbar-del-bd: #b5462f;
  --palbar-del-fg: #e08a6f;
  --mb-palcanvas-bg: #211d16;
  --mb-palcanvas-c: #40382c;
  --tctl-s-c: #e0653f;
  --tctl-s-c2: #6bbf5f;
  --tctl-s-c3: #5b9be0;
  --gen-ok-fg: #7dc98f;
  --gen-adv-fg: #d9c07a;
  --err-fg: #e87070;
  --author-shape-x-fg: #ff9d8d;
}

/* Map Builder styles (historically 'tower.css' — the Tower feature itself was archived
   2026-07-17; its tw-/fb-/insp-/fw- sections went with it to _archive). */

/* ── Map Builder — Play-style command deck: a framed map card + floating HUD panels ──
   Mirrors .combat-spa: a bordered, rounded container inside the normal page (gutter + footer kept),
   NOT edge-to-edge. Floating panels are absolute against this card (position:relative). */
.mb-wrap { position: relative; height: calc(100dvh - var(--topbar-h, 3.5rem) - 5.75rem); min-height: 32.5rem;
  border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); overflow: hidden; background: var(--bg-2, #120d09); }
.mb-stage { position: absolute; inset: 0; overflow: hidden; }
.mb-canvas { display: block; }
.mb-weather { position: absolute; top: 0; left: 0; pointer-events: none; }   /* weather particles, screen-space, over the map canvas */

/* floating panels reuse Play's cb-panel chrome (the shared card frame + grab header).
   Width is set inline on .mb-hud (panels grow to fit content); only VERTICAL scroll is allowed. */
.mb-hud { position: absolute; z-index: 30; width: auto; max-width: 94%; }
.mb-hud .cb-panel { width: 100%; max-height: calc(100dvh - var(--topbar-h, 3.5rem) - 9.375rem); overflow-x: hidden; overflow-y: auto; }





/* wide + short Tilesets panel: the sheet list is a 2-column grid (uses the width, halves the height) */







.mb-hinfo { display: inline-flex; vertical-align: middle; margin: 0 0.0625rem; }   /* the "?" detail icon in a panel header / sub-heading */

.mb-palcanvas { display: block; image-rendering: pixelated; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; touch-action: none; }
.mb-sec { border-top: 0.0625rem solid var(--border-soft); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.mb-sec-first { border-top: 0; padding-top: 0; margin-top: 0; }
.mb-sec h4 { margin: 0 0 var(--sp-4); font: 600 var(--fs-micro) var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
/* Define + Adjust side by side (Adjust to the right of Define Selection) */




/* Palette colour adjuster */














.mb-histrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mb-swatch { width: 1.75rem; height: 1.75rem; border: 0.0625rem solid var(--border); border-radius: var(--r-sm); cursor: pointer; background-color: var(--panel); padding: 0; position: relative; flex: 0 0 auto; }
.mb-swatch:hover { border-color: var(--accent); }
.mb-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent); }
.mb-swatch.auto::after { content: ""; position: absolute; right: 0.0625rem; bottom: 0.0625rem; width: 0.375rem; height: 0.375rem; border-radius: var(--r-xs); background: var(--gold); box-shadow: 0 0 0.1875rem rgba(var(--gold-rgb), .8); }

/* layers panel */

.mb-layerlist { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 40vh; overflow-y: auto; overflow-x: hidden; padding-right: var(--sp-1); }
.mb-vtog { width: 1.625rem; height: 1.5rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: var(--fs-sm); }
.mb-vtog:hover { border-color: var(--accent); }
.mb-vtog.on { background: rgba(var(--accent-rgb), .2); border-color: var(--accent); color: var(--text); box-shadow: var(--glow-ember); }
.mb-spacer { flex: 1 1 auto; }
/* .mb-objhint retired (0.14) — the two gesture hints became InfoDots on their section headings. */
.mb-ovtoggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--sp-3); }
.mb-ovcaret { color: var(--muted); font-size: var(--fs-micro); }
.mb-ovlist { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 0.3125rem; }
.mb-grouphead { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); }
.mb-gcaret { cursor: pointer; color: var(--muted); font-size: var(--fs-micro); width: 0.625rem; text-align: center; }
.mb-gname { font-weight: 600; }
.mb-gcount { color: var(--muted); font-style: normal; font-size: var(--fs-2xs); opacity: .7; margin-left: var(--sp-1); }
.mb-gdel { color: var(--muted) !important; }
.mb-l-ingroup { margin-left: 0.9375rem; }
.mb-layer { display: flex; align-items: center; gap: var(--sp-4); padding: 0.3125rem var(--sp-4); border: 0.0625rem solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--panel-2); }
.mb-layer.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.mb-grip { color: var(--muted); cursor: grab; font-size: var(--fs-xs); }
.mb-vis, .mb-ldel, .mb-lbake { border: none; background: none; cursor: pointer; font-size: var(--fs-sm); padding: 0; }
.mb-lbake { color: var(--muted); margin-left: auto; }
.mb-lbake:hover { color: var(--accent); }
.mb-lbake + .mb-ldel { margin-left: var(--sp-3); }
.mb-ldel { color: var(--bad); margin-left: auto; }
.mb-lname { font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.mb-lname-in { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); background: var(--panel-2); border: 0.0625rem solid var(--accent); border-radius: var(--r-sm); color: var(--text); padding: 0.0625rem 0.3125rem; }
.mb-lname-in:focus { }
.mb-layer-pc { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); border-style: dashed; }
.mb-pcname { font-weight: 600; }
.mb-llock { margin-left: auto; font-size: var(--fs-xs); opacity: .7; }


.mb-muted { color: var(--muted); font-style: italic; font-size: var(--fs-xs); }

/* the Controls panel — same chrome as the others; tools row + Recent row */
.mb-controls .cb-panel { overflow: visible; }
.mb-toolrow { display: flex; align-items: center; gap: 0.3125rem; flex-wrap: wrap; }
.mb-tool { width: 2rem; height: 1.875rem; border-radius: var(--r-md); font-size: var(--fs-md); }  /* icon-btn (2.2); .on + .mb-zoomval keep own look */
.mb-tool.on { background: rgba(var(--accent-rgb), .2); border-color: var(--accent); box-shadow: var(--glow-ember); }
.mb-zoom { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); padding: 0 var(--sp-4); }
.mb-tool.mb-zoomval { width: 3.25rem; min-width: 3.25rem; padding: 0 var(--sp-3); font: 600 var(--fs-xs) var(--font-mono); color: var(--text); text-align: center; -moz-appearance: textfield; }
.mb-zoomval::-webkit-outer-spin-button, .mb-zoomval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mb-atmotools { margin-top: 0.4375rem; }
.mb-brushrow { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.mb-brushrow h4 { margin: 0; }
.mb-bnum { width: 2.75rem; height: 1.5rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); background: var(--panel-2); color: var(--text); font: 600 var(--fs-sm) var(--font-mono); text-align: center; padding: 0 var(--sp-1); }
.mb-bnum:focus { border-color: var(--accent); }
.mb-brange { flex: 1; min-width: 4.375rem; accent-color: var(--accent); cursor: pointer; }
.mb-bshape { min-width: 1.625rem; height: 1.5rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: var(--fs-base); }
.mb-bshape:hover { border-color: var(--accent); }
.mb-bshape.on { background: rgba(var(--accent-rgb), .2); border-color: var(--accent); box-shadow: var(--glow-ember); }
.mb-mini { display: block; border: 0.0625rem solid var(--border); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; image-rendering: pixelated; max-width: 100%; touch-action: none; }

/* inline "Define selection" — Tiling + Animation (user-defined, like Play's command deck) */


/* .mb-def-btn folded onto the kit (2.1): elements carry `btn btn-mini mb-def-btn`; STATE deltas only remain. */
.mb-def-btn.on { background: rgba(var(--accent-rgb), .2); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.mb-frames { display: flex; flex-wrap: wrap; gap: 0.3125rem; flex: 1 1 auto; }
.mb-frame { position: relative; width: 1.875rem; height: 1.875rem; border: 0.0625rem solid var(--border); border-radius: var(--r-sm); background-color: var(--panel); }
.mb-frame-x { position: absolute; top: -0.375rem; right: -0.375rem; width: 0.9375rem; height: 0.9375rem; border-radius: var(--r-round); font-size: var(--fs-2xs); padding: 0; }  /* icon-btn (2.2) */
.mb-addframe { width: 1.875rem; height: 1.875rem; border-radius: var(--r-sm); border: 0.0625rem dashed var(--accent); background: rgba(var(--accent-rgb), .1); color: var(--accent); cursor: pointer; font-size: var(--fs-lg); }
.mb-addframe.on { background: rgba(var(--accent-rgb), .28); border-style: solid; box-shadow: var(--glow-ember); }
.mb-def-ms { width: 4rem; }

.mb-def-msg { font-size: var(--fs-xs); color: var(--warn, #d29922); margin: var(--sp-1) 0 0; }
.mb-palcanvas.picking { outline: 0.125rem dashed var(--accent); outline-offset: -0.125rem; cursor: cell; }
/* an animated tile is flagged with a small ember corner dot (autotile uses a gold dot) */
.mb-swatch.anim::before { content: ""; position: absolute; left: 0.0625rem; top: 0.0625rem; width: 0.375rem; height: 0.375rem; border-radius: var(--r-round); background: var(--accent); box-shadow: 0 0 0.1875rem rgba(var(--accent-rgb), .9); }
/* full-res Used-tile swatches (Recent stays small) + layers toolbar + reset-layout button */
.mb-swatch.lg { width: 3rem; height: 3rem; border-radius: var(--r-sm); }

.mb-layerbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: 0.5625rem; }
/* Zones panel — reuses .mb-layer* rows; a color swatch + a paint hint */
.mb-zonebar { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: 0.4375rem; }
/* .mb-zonehint retired (0.14) — duplicated the Zones panel's own InfoDot; deleted, not relocated. */
.mb-zonedone { flex: 0 0 auto; background: var(--accent); color: var(--mb-zonedone-fg); }   /* clear "stop painting" affordance — solid so it reads above ＋ Zone while in zone mode */
.mb-zonedone:hover { background: var(--accent); filter: brightness(1.12); }
.mb-zoneswatch { flex: none; width: 0.8125rem; height: 0.8125rem; border-radius: var(--r-xs); border: 0.0625rem solid rgba(255,255,255,.22); }
.mb-zonecolor { width: 1rem; height: 1rem; padding: 0; background: none; cursor: pointer; }
.mb-zonecolor::-webkit-color-swatch-wrapper { padding: 0; }
.mb-zonecolor::-webkit-color-swatch { border: none; border-radius: var(--r-xs); }
.mb-zonecolor::-moz-color-swatch { border: none; border-radius: var(--r-xs); }
.mb-zonerow.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.mb-trigedit { display: flex; flex-direction: column; gap: 0.3125rem; }
/* .mb-lbtn folded → `btn btn-primary mb-lbtn` (2.1); flex delta only. */
.mb-lbtn { flex: 1 1 auto; }
/* reset-layout + Panels ▾ reuse Play's shared `.cb-layout-tools` cluster (top-center). Only the
   offset is a builder delta: it must clear the tab bar, which also sits top-center. */
.mb-layout-tools { top: 3.625rem; }
/* .mb-flyout/.mb-fly-* retired (0.14) — the tool-options menu is the kit `ContextMenu` (.ui-menu). */
/* Palette sub-tabs (Sheet | Used) + the Used "tileset" canvas (organize/marquee) */














/* ── Map Palette ─────────────────────────────────────────────────────────────────────────── */
.mb-pal-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); max-height: 11.75rem; overflow-y: auto; padding: var(--sp-1); margin-bottom: var(--sp-4); }
/* Large view: the wider panel already yields more columns; give the list far more height too so a
   focused user sees a big swath of the palette at once instead of the 188px letterbox. */
.mb-palpanel.is-large .mb-pal-list { max-height: 62vh; }
.mb-pal-chip { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 3.75rem; padding: var(--sp-3); cursor: pointer;
  border: 0.0625rem solid var(--border); background: var(--panel-2); border-radius: var(--r-lg); color: var(--text); }
.mb-pal-chip:hover { border-color: var(--accent); }
.mb-pal-chip.on { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent) inset; }
.mb-pal-thumb { width: 2.375rem; height: 2.375rem; image-rendering: pixelated; border-radius: var(--r-sm); }
/* Author tab: full-resolution specimen of the selected tile/sprite (checkerboard reveals transparency) */
.author-specimen-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-7); padding: var(--sp-8);
  border: 0.0625rem solid var(--border); border-radius: var(--r-xl);
  background-color: var(--author-specimen-wrap-bg);
  background-image: linear-gradient(45deg, var(--author-specimen-wrap-c) 25%, transparent 25%), linear-gradient(-45deg, var(--author-specimen-wrap-c) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--author-specimen-wrap-c) 75%), linear-gradient(-45deg, transparent 75%, var(--author-specimen-wrap-c) 75%);
  background-size: 1rem 1rem; background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0; }
.author-specimen { display: block; image-rendering: pixelated; border-radius: var(--r-xs); box-shadow: var(--shadow-drop-sm); }
.author-specimen-dim { font: 500 var(--fs-2xs) var(--font-mono); letter-spacing: .04em; color: var(--muted); }
/* per-cell picker: transparent hit-targets over each cell of a multi-cell object */
.author-cellbtn { position: absolute; background: transparent; border: 0.09375rem solid transparent; border-radius: var(--r-xs); padding: 0; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.author-cellbtn:hover { border-color: rgba(var(--gold-rgb), .55); }
.author-cellbtn.on { border-color: var(--accent); box-shadow: inset 0 0 0 0.125rem rgba(var(--accent-rgb), .4); }
/* autotile tiles keep a faint always-on hairline so the source block's 2×3 / 2×5 grid is visible even
   when the artwork is uniform (plain grass) — hover/selected states brighten it as usual */
.author-cellbtn.at { border-color: rgba(255, 244, 214, .16); border-radius: 0; }
.author-cellbtn.at:hover { border-color: rgba(var(--gold-rgb), .55); }
.author-cellbtn.at.on { border-color: var(--accent); }
/* an autotile tile that carries its OWN authored properties — a small ember pip so the block reads at a glance */
.author-cellbtn.ov::after { content: ""; position: absolute; top: 0.125rem; right: 0.125rem; width: 0.375rem; height: 0.375rem;
  border-radius: var(--r-round); background: var(--accent); box-shadow: 0 0 0.25rem rgba(var(--accent-rgb), .8); }

/* ── Blocks-movement painted ON the preview (🚫 Blocks toggle) ────────────────────────────────────── */
.author-blockbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.author-blockstog.on { border-color: var(--on-bd); color: var(--mb-on-fg); background: rgba(192, 86, 74, .12); }

.author-cellbtn.off { pointer-events: none; }        /* cell-select pauses while painting blocks */
.author-blocksub { position: absolute; box-sizing: border-box; border: 0.0625rem dashed rgba(255, 244, 214, .28); cursor: crosshair; }
.author-blocksub:hover { background: rgba(226, 116, 106, .25); border-color: rgba(226, 116, 106, .7); }
.author-blocksub.on { background: rgba(200, 62, 50, .48); border: 0.0625rem solid rgba(255, 120, 104, .85);
  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, .25); }
.mb-pal-name { font-size: var(--fs-micro); line-height: 1.1; max-width: 3.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pal-name i { color: var(--muted); }
.mb-pal-warn { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); margin: 0 var(--sp-7) var(--sp-6); padding: 0.4375rem var(--sp-6) var(--sp-5);
  font-size: var(--fs-xs); color: var(--warn, #e0a23a); background: rgba(224, 162, 58, .08);
  border: 0.0625rem solid rgba(224, 162, 58, .28); border-radius: var(--r-lg); }
.mb-pal-warn-msg { flex: 1 1 8.125rem; min-width: 0; line-height: 1.35; }
.mb-pal-warn-add { flex: 0 0 auto; }





.mb-pal-del { color: var(--mb-pal-del-fg); }


/* ── Map Builder top-level tabs (Draw / Tiles) ───────────────────────────────────────────── */
.mb-draw { display: contents; }                 /* layout-neutral wrapper: the stage + panels keep their positioning */
/* Both tabs stay MOUNTED (state/content preserved on revisit); only the inactive one is hidden. */
.mb-draw.mb-hidden { display: none; }
.mb-tilescreen.mb-hidden { display: none; }
/* ── Author tab — give each tile its meaning (role/desc/placement) + relationships ─────────────── */
/* ── Author tab — a full-bleed BENCH in the Palette tab's grammar: ① Tiles · ② Tile · ③ Rules ────── */
.mb-authorscreen { position: absolute; inset: 0; top: 3.125rem; overflow: hidden; padding: var(--sp-3) 1.125rem 1.125rem; box-sizing: border-box; }
.mb-authorscreen.mb-hidden { display: none; }

/* Encounters tab — per-zone Events/Arenas management table (roomy; the Select2 menus open freely here) */
.mb-encscreen { position: absolute; inset: 0; top: 3.125rem; overflow: hidden; padding: var(--sp-3) 1.125rem 1.125rem; box-sizing: border-box; }
.mb-encscreen.mb-hidden { display: none; }
/* ── Zones tab — matches the Palette/Author bench: palbar strip + numbered .tiles-card columns ── */
.mb-zones .palbar-add { margin-left: auto; }
.mb-zones-body { display: grid; grid-template-columns: clamp(18.75rem, 34%, 27.5rem) minmax(0, 1fr); gap: var(--sp-8); min-height: 0; }
.mb-zones-mapcard { align-self: start; }              /* size the map card to its content, not the full column height */
.mb-zones-mapbody { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8) 0.9375rem; overflow-y: auto; }
.mb-zonemap { width: 100%; display: block; border-radius: var(--r-xl); border: 0.0625rem solid var(--border); background: var(--panel); }
.mb-zones-maptip { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: var(--sp-4); min-height: 0.875rem; }
.mb-zones-tipsw { width: 0.6875rem; height: 0.6875rem; border-radius: var(--r-xs); display: inline-block; box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, .4); }
.mb-zones-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-7); padding: 0.8125rem 0.9375rem; }

.mb-zcard { border: 0.0625rem solid var(--border); border-top: 0.1875rem solid var(--accent); border-radius: var(--r-xl);
  background: var(--card-bg); box-shadow: var(--card-shadow); padding: var(--sp-7) 0.8125rem;
  transition: border-color .14s, box-shadow .14s; }
.mb-zcard:hover { border-color: rgba(var(--accent-rgb, 224, 121, 44), .4); }
.mb-zcard.on { border-color: rgba(var(--gold-rgb), .55); border-top-color: var(--gold);
  box-shadow: var(--card-shadow), inset 0 0 0 0.0625rem rgba(var(--gold-rgb), .2); }
.mb-zcard-top { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.mb-zcolor { flex: 0 0 auto; width: 1.625rem; height: 1.625rem; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: none; cursor: pointer; }
.mb-zcolor::-webkit-color-swatch-wrapper { padding: var(--sp-1); }
.mb-zcolor::-webkit-color-swatch { border: none; border-radius: var(--r-sm); }
.mb-zname { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); font-weight: 600; }
.mb-zname:focus { border-color: var(--accent); }
.mb-zpaint { flex: 0 0 auto; background: var(--panel); border: 0.0625rem solid var(--border); color: var(--muted); border-radius: var(--r-md); padding: 0.3125rem 0.5625rem; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; font-family: var(--font-mono); }
.mb-zpaint:hover { border-color: var(--accent); color: var(--text); }
.mb-zpaint.empty { color: var(--accent); border-color: rgba(var(--accent-rgb, 224, 121, 44), .5); }
.mb-zdel { flex: 0 0 auto; background: none; border: 0.0625rem solid transparent; color: var(--muted); border-radius: var(--r-md); width: 1.75rem; height: 1.75rem; font-size: var(--fs-base); cursor: pointer; }
.mb-zdel:hover { color: var(--bad, #e06a5a); border-color: rgba(224, 106, 90, .4); background: rgba(224, 106, 90, .08); }
.mb-zcard-fields { display: flex; flex-direction: column; gap: 0.5625rem; }
.mb-zfield { min-width: 0; }
.mb-zcard-row2 { display: flex; align-items: center; gap: var(--sp-7); }
.mb-zcard-row2 .mb-zfield { flex: 1 1 auto; }
.mb-zchance { flex: 0 0 auto; display: flex; align-items: center; gap: 0.3125rem; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.mb-zchance input { width: 3.375rem; box-sizing: border-box; background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-sm); text-align: center; }
.mb-zchance input:focus { border-color: var(--accent); }

@media (max-width: 900px) {
  .mb-encscreen { overflow: auto; }
  .author-bench.mb-zones { height: auto; }
  .mb-zones-body { grid-template-columns: 1fr; }
  .mb-zones-mapbody { max-height: 26.25rem; }
}


.author-bench { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-8); height: 100%; }
.author-bench-body { display: grid; grid-template-columns: minmax(0, 1fr) auto clamp(17.5rem, 24vw, 20.625rem);
  grid-template-rows: minmax(0, 1fr); gap: var(--sp-8); min-height: 0; }
.author-col-tiles .author-chips.bench { border: none; border-radius: 0; background: none; padding: 0.8125rem 0.9375rem;
  max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.author-col-tile { width: clamp(18.75rem, 26vw, 22.5rem); }
.author-tilebody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-8) var(--sp-9) var(--sp-9);
  display: flex; flex-direction: column; }
.author-tilebody .author-specimen-wrap { margin: var(--sp-6) 0 0; }
.author-rulesbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-8) var(--sp-9) var(--sp-9); }
.author-target { font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .05em; color: var(--accent);
  background: rgba(var(--accent-rgb), .1); border: 0.0625rem solid rgba(var(--accent-rgb), .28);
  border-radius: var(--r-pill); padding: var(--sp-2) 0.5625rem; white-space: nowrap; }
.author-bench-empty { margin: auto; }
@media (max-width: 1080px) {
  .mb-authorscreen { overflow: auto; }
  .author-bench { height: auto; }
  .author-bench-body { grid-template-columns: 1fr; }
  .author-col-tile { width: auto; }
  .author-col-tiles .author-chips.bench { max-height: 23.75rem; }
}


.author-palname { color: var(--accent); }
.author-code { display: inline-flex; width: 1.375rem; height: 1.375rem; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-sm); font: 700 var(--fs-sm) var(--font-mono, monospace); }
.author-in { box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: 0.3125rem 0.4375rem; font: 400 var(--fs-smplus) var(--font-sans); }


/* Author editor: a visual chip picker (left) + the selected tile's terrain properties (right) */

.author-chips { border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); background: var(--panel); padding: 0.8125rem; max-height: 70vh; overflow-y: auto; }
.author-chips .mb-pal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.5625rem; max-height: none; overflow: visible; padding: 0; margin: 0; }
.author-chips .mb-pal-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4);
  border: 0.0625rem solid var(--border); background: var(--panel-2); border-radius: var(--r-xl); color: var(--text); cursor: pointer; transition: border-color .12s, transform .12s; }
.author-chips .mb-pal-chip:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-0.0625rem); }
.author-chips .mb-pal-chip.on { border-color: var(--accent); box-shadow: var(--glow-ember), inset 0 0 0 0.0625rem var(--accent); background: rgba(var(--accent-rgb), .07); }
.author-chips .mb-pal-thumb { border-radius: var(--r-md); background: var(--mb-pal-thumb-bg); image-rendering: pixelated; box-shadow: inset 0 0 0 0.0625rem var(--border-soft); }
.author-chips .mb-pal-name { max-width: 100%; font: 600 var(--fs-2xs)/1.2 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.author-props { display: flex; flex-direction: column; gap: 0.8125rem; }
.author-prop-h { font: 600 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4375rem; }
.author-prop-h .mb-muted { font-weight: 400; }






.author-check { display: inline-flex; align-items: center; gap: var(--sp-3); font: 500 var(--fs-smplus) var(--font-sans); color: var(--text); cursor: pointer; }   /* merged the former double-def (0.16) */
.author-check input { accent-color: var(--accent); }
.author-check .mb-muted { font-style: normal; }
.author-coverfld { display: flex; align-items: center; gap: var(--sp-5); font: 500 var(--fs-smplus) var(--font-sans); color: var(--text); }
.author-namefld { margin-bottom: var(--sp-1); }
.author-namefld .author-in { flex: 1 1 auto; min-width: 0; }
.author-num { max-width: 5.25rem; }
/* Author §03 → generation semantics: what a tile IS, said outright instead of guessed from its name */
.author-genfld { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4);
  border-top: 0.0625rem solid var(--border); }
.author-genfld .author-gensel { min-width: 9rem; }
.author-windfld { margin-top: var(--sp-3); }
.author-windrow { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.author-windband { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.author-windband .mb-atmorow { margin: 0; }
@media (max-width: 920px) {   }
.mb-tabs { position: absolute; top: 0.625rem; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 0.0625rem solid var(--border); border-radius: var(--r-xl); padding: var(--sp-2); box-shadow: var(--shadow-drop-sm); }
/* Global Save cluster (always visible in the tab bar, so any tab can persist). The Draw/Author/Zones
   tabs save here; the Palette tab auto-saves separately. */
.mb-tabsep { width: 0.0625rem; align-self: stretch; margin: var(--sp-2) var(--sp-3); background: var(--border); }

.mb-saveerr { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-tabsave { padding: 0.3125rem 0.9375rem; }
/* Builder tabs are the global `.seg` segmented control (0.14 — single-select is never a button row).
   The old `.mb-tab` skin is retired; only the size delta lives here. */
.mb-tabseg > button { padding: 0.3125rem 1.125rem; font-weight: 600; }
/* Palette/Author auto-save is SILENT when it works. Only a FAILURE surfaces — a fixed toast that
   never shifts layout (the tab bar must not resize). */
.mb-autosave-err { position: fixed; bottom: 2.875rem; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: var(--sp-6); max-width: min(35rem, 90vw);
  background: var(--mb-autosave-err-bg); border: 0.0625rem solid var(--mb-autosave-err-bd); color: var(--bad-hover); border-radius: var(--r-xl);
  padding: 0.5625rem var(--sp-7); font: 500 var(--fs-smplus)/1.4 var(--font-sans); box-shadow: var(--shadow-drop-sm); }
.mb-autosave-x { flex: none; font-size: var(--fs-base); padding: var(--sp-1) var(--sp-3); }  /* icon-btn (2.2) */
/* ── Tiles tab — a tile WORKBENCH: ① Sheets band, ② Select & tune, ③ Map palette ─────────────
   The shift from a small floating panel to full screen body: stage cards, a mono stage-rail with
   ember stage numbers (the genuine browse→select→add sequence), and the tilesheet treated as a
   framed specimen rather than a raw asset dump. */
.mb-tilescreen { position: absolute; inset: 0; top: 3.125rem; display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-8); padding: var(--sp-3) 1.125rem 1.125rem; box-sizing: border-box; }
/* §01 sheets · §02 workbench · §03 palette — the two side rails collapse to spines so the workbench claims the room */
.tiles-cols { display: grid; grid-template-rows: minmax(0, 1fr); gap: var(--sp-8); min-height: 0; transition: grid-template-columns .2s ease; }
.tiles-rail-col { align-items: center; padding: var(--sp-7) 0; gap: var(--sp-8); cursor: pointer; overflow: hidden; }
.tiles-rail-col:hover { border-color: rgba(var(--accent-rgb), .5); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.tiles-raillabel { writing-mode: vertical-rl; text-orientation: mixed; display: inline-flex; align-items: center; gap: var(--sp-6);
  font: 600 var(--fs-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); user-select: none; }
.tiles-raillabel b { color: var(--accent); font-size: var(--fs-smplus); font-weight: 700; }
.tiles-railtoggle { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border);
  background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 0; }
.tiles-railtoggle:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tiles-cols { transition: none; } }
.tiles-palbar { display: flex; align-items: center; gap: var(--sp-5); padding: 0.4375rem var(--sp-6); border: 0.0625rem solid var(--border);
  border-radius: var(--r-lg); background: var(--panel); }
.palbar-label { color: var(--muted); font: 600 var(--fs-xs) var(--font-sans); text-transform: uppercase; letter-spacing: .04em; }
.palbar-sel { background: var(--bg); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  padding: 0.3125rem var(--sp-5); font-size: var(--fs-smplus); min-width: 12.5rem; }
.palbar-name { min-width: 14rem; }                    /* ✎ rename flow: name input + kind select share the bar */
.palbar-kind { min-width: 7rem; }
.palbar-shared { color: var(--accent); font-size: var(--fs-xs); margin-left: auto; }
.palbar-del:not(:disabled):hover { border-color: var(--palbar-del-bd); color: var(--palbar-del-fg); background: rgba(181, 70, 47, .12); }


/* stage card — the body-content frame (NOT the old floating-panel chrome) */
.tiles-card { display: flex; flex-direction: column; min-height: 0; background: var(--panel);
  border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.tiles-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7); flex-wrap: wrap;
  padding: 0.6875rem var(--sp-9); border-bottom: 0.0625rem solid var(--border-soft); background: linear-gradient(180deg, rgba(255,255,255,.018), transparent); }
.tiles-eyebrow { display: inline-flex; align-items: center; gap: 0.5625rem; font: 600 var(--fs-2xs)/1 var(--font-mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.tiles-eyebrow b { position: relative; padding-left: var(--sp-6); color: var(--accent); font-size: var(--fs-smplus); font-weight: 700; }
.tiles-eyebrow b::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0.125rem; height: 0.75rem; border-radius: var(--r-xs); background: var(--accent); }
.tiles-headtools { display: flex; align-items: center; gap: 0.3125rem; flex-wrap: wrap; }
.tiles-ghost { border: 0.0625rem solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md); font: 600 var(--fs-xs) var(--font-sans); }
.tiles-ghost:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .5); }
.tiles-sheetname { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.tiles-count { min-width: 1.375rem; text-align: center; padding: var(--sp-1) var(--sp-5); border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), .14); color: var(--accent); font: 700 var(--fs-xs) var(--font-mono); }

/* ① the sheet grid — a wrapping grid (many columns) that scrolls DOWN through rows; never sideways */
.tiles-sheetcats { display: flex; gap: 0.4375rem; align-items: center; padding: 0 0.8125rem var(--sp-6); }
.tiles-catsel { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text); border: 0.0625rem solid var(--border);
  border-radius: var(--r-md); padding: 0.3125rem var(--sp-5); font-size: var(--fs-sm); cursor: pointer; }
.tiles-catsel:focus { border-color: var(--accent); }
.tiles-sheetq { flex: 1 1 auto; min-width: 0; }
.tiles-sheetgrid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding: var(--sp-1) 0.8125rem var(--sp-7); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; }
.tiles-sheet { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); cursor: pointer; color: var(--text);
  border: 0.0625rem solid var(--border); background: var(--panel-2); border-radius: var(--r-xl);
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.tiles-sheet:hover { border-color: rgba(var(--accent-rgb), .55); transform: translateY(-0.0625rem); }
.tiles-sheet.on { border-color: var(--accent); box-shadow: var(--glow-ember), inset 0 0 0 0.0625rem var(--accent); }
.tiles-sheet img { width: 100%; height: 4.5rem; object-fit: cover; object-position: top center;
  border-radius: var(--r-md); image-rendering: pixelated; background: var(--mb-pal-thumb-bg); }
.tiles-sheet b { font: 600 var(--fs-2xs)/1.15 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles-sheet.on b { color: var(--text); }
.tiles-note { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-3) var(--sp-1); }

/* ② the work surface — tall sheets sit in the tray on the LEFT; tuning tools fill the column on the RIGHT */
.tiles-worksplit { flex: 1 1 auto; min-height: 0; display: flex; }
.tiles-stage { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* the scroll surface — sheet is centred when it fits, pinned top-left with scrollbars when larger */
.tiles-canvaswrap { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center;
  padding: 1.125rem; background:
    linear-gradient(rgba(154,138,110,.04) 0.0625rem, transparent 0.0625rem) 0 0 / 1.375rem 1.375rem,
    linear-gradient(90deg, rgba(154,138,110,.04) 0.0625rem, transparent 0.0625rem) 0 0 / 1.375rem 1.375rem,
    var(--bg); }
.tiles-specimen { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
.tiles-tray { border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--mb-pal-thumb-bg); padding: var(--sp-4); box-shadow: inset 0 0.0625rem 0 rgba(255,255,255,.03); }
.tiles-tray .mb-palcanvas { display: block; image-rendering: pixelated; background-color: var(--mb-palcanvas-bg);
  background-image: linear-gradient(45deg, var(--mb-palcanvas-c) 25%, transparent 25%), linear-gradient(-45deg, var(--mb-palcanvas-c) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mb-palcanvas-c) 75%), linear-gradient(-45deg, transparent 75%, var(--mb-palcanvas-c) 75%);
  background-size: 1rem 1rem; background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0; }
/* §02 zoom bar — slider + wheel drive the same view zoom */
.tiles-zoombar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5625rem; padding: var(--sp-5) var(--sp-8); border-top: 0.0625rem solid var(--border-soft); }
.tiles-zrange { flex: 1 1 auto; min-width: 3.75rem; }
.tiles-zbtn { flex: 0 0 auto; height: 1.625rem; min-width: 1.75rem; padding: 0 0.5625rem; border-radius: var(--r-md); font-size: var(--fs-base); }  /* icon-btn (2.2) */
.tiles-znumwrap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.tiles-znum { width: 3.5rem; background: var(--bg); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font: 600 var(--fs-xs) var(--font-mono); text-align: right; }
.tiles-znum:focus { border-color: var(--accent); }
.tiles-zpct { color: var(--muted); font: 600 var(--fs-xs) var(--font-mono); }
.tiles-zfit { font-size: var(--fs-sm); }
.tiles-traycap { margin: 0; font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .03em; color: var(--muted); }
.tiles-stage-empty, .tiles-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-7); color: var(--muted); padding: 1.875rem 1.375rem; }
.tiles-stage-empty { align-self: stretch; }   /* fill the stage's height so the message centers (the tray stays top-aligned) */
.tiles-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 0.09375rem dashed var(--border);
  border-radius: var(--r-2xl); color: rgba(var(--accent-rgb), .7); font-size: var(--fs-card); }
.tiles-stage-empty p, .tiles-empty p { margin: 0; max-width: 15.625rem; font-size: var(--fs-smplus); line-height: 1.5; }
.tiles-empty-h { margin: 0; font: 600 var(--fs-modal)/1.1 var(--font-display); color: var(--text); }

/* ② tools strip — Adjust folds away by default; Define appears on a selection; Add is the primary act */
.tiles-tools { flex: 0 0 clamp(21.25rem, 34%, 30rem); border-left: 0.0625rem solid var(--border-soft); padding: var(--sp-8); display: flex; flex-direction: column; gap: 0.6875rem; }
.tiles-tools-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6875rem; }   /* scrolls; Add button below stays pinned to the bottom */
.tiles-tool-h { font: 600 var(--fs-xs) var(--font-sans); color: var(--text); margin-bottom: 0.4375rem; }








/* .tiles-reset folded onto the kit (2.1): element carries `btn btn-mini tiles-reset`; layout deltas only. */
.tiles-reset { margin-top: var(--sp-3); align-self: flex-start; }
/* §02 tuning bench — unified collapsible sections (Tiling · Erase background · Color adjust) */
.tsec { border: 0.0625rem solid var(--border-soft); border-radius: var(--r-xl); background: var(--panel-2); overflow: hidden; }


.tsec-ic { flex: 0 0 1rem; color: var(--accent); font-size: var(--fs-sm); text-align: center; }







.tctl { display: flex; align-items: center; gap: 0.5625rem; min-height: 1.5rem; }
.tctl-top { align-items: flex-start; }
.tctl-l { flex: 0 0 4.75rem; font: 600 var(--fs-xs) var(--font-sans); color: var(--gold); }
.tctl-s { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.tctl.acc-r .tctl-s { accent-color: var(--tctl-s-c); }
.tctl.acc-g .tctl-s { accent-color: var(--tctl-s-c2); }
.tctl.acc-b .tctl-s { accent-color: var(--tctl-s-c3); }
.tctl-v { flex: 0 0 2.75rem; text-align: right; font: 600 var(--fs-2xs) var(--font-mono); color: var(--text); }
.tctl-num { flex: 0 0 4.125rem; background: var(--bg); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font: 600 var(--fs-xs) var(--font-mono); }
.tctl-color { flex: 0 0 1.625rem; width: 1.625rem; height: 1.375rem; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; }
.tctl .seg { flex: 1 1 auto; }
/* Offset control — px field + ¼/½/¾ snap segmented control on one wrapping row */
.tiles-offrow { flex-wrap: wrap; row-gap: var(--sp-4); }
.tiles-offrow .tctl-num { flex: 0 0 3.75rem; }
.tiles-offsnap { flex: 1 1 7.5rem; }
.tiles-offsnap button { padding: var(--sp-2) 0; font: 600 var(--fs-sm) var(--font-mono); }
.tiles-cutsample { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
/* .tiles-addbtn folded → `btn btn-primary tiles-addbtn` (2.1); big full-width CTA deltas + special disabled only. */
.tiles-addbtn { width: 100%; padding: var(--sp-7); border-radius: var(--r-xl); }
.tiles-addbtn:disabled { background: var(--panel-2); color: var(--muted); box-shadow: none; }

.tiles-addbtn:active { transform: translateY(0.0625rem); }

/* ③ Map palette — the collection rail: chips list + the moved details inspector (scoped, so Draw's
   chips-only panel keeps its compact look) */
.tiles-collection { min-height: 0; display: flex; flex-direction: column; }
/* §03 is now a single scrolling gallery with a pinned action bar — no per-tile detail panel */
.tiles-gallery { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 0.8125rem 0.9375rem; }
.tiles-collvar { padding: 0 0.9375rem var(--sp-3); }
.tiles-collbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: 0.6875rem var(--sp-8); border-top: 0.0625rem solid var(--border-soft); background: color-mix(in srgb, var(--accent) 4%, var(--panel-2)); }
/* one line each, and WRAP the row rather than clipping a label — the rail narrows with the viewport */
.tiles-collbar .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: var(--sp-4); }
.tiles-collbar .mb-def-btn:disabled { opacity: .4; cursor: default; }
/* Replace, armed: the row becomes the outstanding step until the new tile is picked (or it is cancelled) */
.tiles-armbar { align-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.tiles-armhint { flex: 1 1 8rem; display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
  font-size: var(--fs-xs); color: var(--muted); }
.tiles-armtext { min-width: 0; line-height: 1.25; }
.tiles-armhint b { color: var(--text); font-weight: 600; }
.tiles-armthumb { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); border: 0.0625rem solid var(--border); }
.tiles-armbar .btn-primary { flex: 0 0 auto; }
.tiles-armx { flex: 0 0 auto; }
.mb-pal-chip.arm { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent) inset; }
.tiles-detail { flex: 0 0 16.75rem; min-height: 0; overflow-y: auto; border-left: 0.0625rem solid var(--border-soft); padding: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-6); }

.tiles-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-7); color: var(--muted); padding: 1.125rem var(--sp-4); }
.tiles-detail-empty p { margin: 0; max-width: 11.5rem; font-size: var(--fs-sm); line-height: 1.5; }
/* selected-tile SPECIMEN card — the tile is the hero; naming + terrain props live on the Author tab */

.tiles-specimen { position: relative; display: grid; place-items: center; margin: 0; padding: var(--sp-10);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-2xl);
  background: radial-gradient(135% 100% at 50% -12%, rgba(var(--accent-rgb), .09), transparent 62%), var(--bg); }











/* the gallery — bigger previews in a wrapping grid (no horizontal scroll); the tiles ARE the content */
.tiles-collection .mb-pal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: 0.5625rem; align-content: start;
  max-height: none; overflow: visible; padding: 0; margin: 0; }   /* drop the floating-panel's 188px cap — the gallery fills the section + scrolls */
.tiles-collection .mb-pal-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; width: 100%; text-align: center;
  padding: 0.5625rem 0.4375rem; border: 0.0625rem solid var(--border); background: var(--panel-2); border-radius: var(--r-xl); color: var(--text);
  cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.mb-pal-altdot { position: absolute; top: 0.375rem; right: 0.375rem; width: 0.5rem; height: 0.5rem; border-radius: var(--r-round);
  background: var(--accent); box-shadow: 0 0 0 0.125rem var(--panel-2); }

/* ── ◫ Sample — the palette's embedded example map (its own tab; layer rows bottom→top) ── */
.tiles-laylist { display: flex; flex-direction: column; gap: 0.3125rem; padding: 0 0.9375rem var(--sp-6); }
.tiles-layrow { display: flex; align-items: center; gap: var(--sp-3); }

.tiles-laybtn { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; padding: 0; border-radius: var(--r-sm);
  border: 0.0625rem solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer;
  font-size: var(--fs-2xs); line-height: 1; }
.tiles-laybtn:hover:not(:disabled) { color: var(--text); border-color: rgba(var(--accent-rgb), .5); }
.tiles-laybtn:disabled { opacity: .35; cursor: default; }
.tiles-layx { font-size: var(--fs-base); }
.tiles-layx:hover:not(:disabled) { color: var(--palbar-del-fg); border-color: var(--palbar-del-bd); }
.tiles-layadd { align-self: flex-start; }
.tiles-laylist .mb-def-btn { justify-content: center; }
/* §03 Layers + §04 Lesson stack in ONE right column (operator 2026-08-09): Layers takes ~1/4 of the
   column, the Lesson the rest — the Layers list is short-lived working state, the Lesson is what you
   read. Icons keep the column narrow (RESPECT SPACE). */
/* the right column must FIT its content at every window width — a classic (non-overlay) scrollbar
   takes ~15px of the box, so the floor is raised and the gutter reserved (operator: h-scroll seen) */
.sample-bench-body { grid-template-columns: clamp(14rem, 20vw, 19rem) minmax(0, 1fr) clamp(16rem, 19vw, 18.5rem); }
.sample-col-map, .sample-col-layers, .sample-col-lesson { min-width: 0; }
.sample-rightcol { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; min-height: 0; }
.sample-rightcol .sample-col-layers { flex: 0 1 25%; min-height: 9.5rem; overflow-y: auto; }
.sample-rightcol .sample-col-lesson { flex: 1 1 auto; min-height: 0; }
.sample-rightcol .fab-col-list { flex: 0 1 40%; min-height: 9.5rem; overflow-y: auto; }
.sample-rightcol .fab-col-layers { flex: 1 1 auto; }
/* collapsed Lesson → a slim bar at the column's foot; Layers takes the height */
.lesson-closedbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  cursor: pointer; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .1em; color: var(--muted); }
.lesson-closedbar:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.lesson-closedbar b { color: var(--accent); }
/* §01 source seg + the fabrication pick-list */
.sample-srcseg > button { font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-4); }
.sample-fablist { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0.9375rem 0.9375rem;
  overflow-y: auto; }
.sample-fabrow { width: 100%; text-align: left; cursor: pointer; }
.sample-fabrow.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.sample-stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
  margin: 0 0.9375rem 0.9375rem; border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.sample-cv { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
/* the Sample tab's canvas toolbar: tool seg (paint/rect/erase/pan) + view actions (zoom/fit) */
.sample-col-map .sample-stage { margin-bottom: var(--sp-5); }
.sample-toolbar { display: flex; align-items: center; gap: 0.3125rem; margin: 0 0.9375rem 0.9375rem; }
.sample-toolseg > button { font-size: var(--fs-base); padding: var(--sp-2) 0.5625rem; line-height: 1.2; }
.sample-toolgap { flex: 1 1 auto; }
.sample-viewbtn { width: 1.625rem; height: 1.625rem; font-size: var(--fs-base); }
/* §04 LESSON rail — what the sample teaches generation. Read-only: every row is derived, and the
   counts ARE the lesson (weights, not rules), so the number sits beside every pair. */
.lesson-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  padding: 0 0.9375rem 0.9375rem; display: flex; flex-direction: column; gap: var(--sp-6); }
.lesson-empty { color: var(--muted); font-size: var(--fs-xs); margin: var(--sp-4) 0 0; }
/* HEALTH — the rail's thesis: how much of the palette the sample has taught, as a meter */
.lesson-health { display: flex; flex-direction: column; gap: var(--sp-2); }
.lesson-cover { font-size: var(--fs-xs); color: var(--muted); }
.lesson-cover b { color: var(--gold); font-size: var(--fs-md); font-weight: 700; }
.lesson-meter { height: 0.25rem; border-radius: var(--r-pill); background: var(--panel-2);
  overflow: hidden; }
.lesson-meter i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), var(--accent)); }
/* EVIDENCE rows — the STRENGTH BAR is the doctrine made visible: width = how typical the pairing is,
   red when generation treats it as incidental (operator-chosen device, 2026-08-09) */
/* .lesson-row (defined later) sets align-items:center — the compound selector outranks it, or the
   column's children CENTER and shrink: the pair indents ~94px and the bar computes 0 wide. */
.lesson-row.lesson-evrow { flex-direction: column; align-items: stretch; gap: 0.1875rem; }
.lesson-evtop { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); margin: 0; }
.lesson-evtop .lesson-icos { margin: 0; }
.lesson-evtop .lesson-n { margin-left: auto; font-size: var(--fs-2xs); }
/* the bar must be SEEN — it is the whole point: a solid track, a bright fill, real height */
.lesson-bar { height: 0.25rem; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; }
.lesson-bar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, var(--gold)), var(--accent)); }
.lesson-bar.weak i { background: var(--bad); }
.lesson-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.lesson-sechead { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lesson-count { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.lesson-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }
.lesson-row .lesson-n { margin-left: auto; }
.lesson-pair { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-pair i { color: var(--muted); font-style: normal; padding: 0 var(--sp-2); }
.lesson-n { color: var(--muted); font-variant-numeric: tabular-nums; }
/* TILE ICONS, not names (operator 2026-08-09) — the author picks tiles by their picture in §01, so the
   lesson reads in the same currency. `.lesson-ico` canvases are painted by the shared drawPalThumbs pass
   (it targets every .mb-pal-thumb[data-pal]); it sets their pixel size, so only placement lives here. */
.lesson-ico { display: block; border-radius: var(--r-xs); background: var(--bg);
  border: 0.0625rem solid var(--border); image-rendering: pixelated; }
.lesson-icowrap { display: inline-flex; border-radius: var(--r-xs); outline: none; }
.lesson-icowrap:hover .lesson-ico, .lesson-icowrap:focus-visible .lesson-ico { border-color: var(--accent); }
/* the hover preview — body-level and position:fixed (InfoDot's pattern), so the rail's overflow can't
   clip it and a transformed ancestor can't capture it */
.lesson-tilepop { position: fixed; z-index: 1000; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); border: 0.0625rem solid var(--accent); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-drop-lg); animation: ui-info-in .12s ease; }
.lesson-tilepop canvas { image-rendering: pixelated; border-radius: var(--r-xs); }
.lesson-tilepop b { max-width: 11rem; text-align: center; font: 600 var(--fs-xs) var(--font-sans);
  color: var(--text); }
.lesson-icos { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.lesson-icos i { color: var(--muted); font-style: normal; }
.lesson-silent { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lesson-silentico { display: inline-flex; opacity: .75; }
.lesson-silentico:hover { opacity: 1; }
.lesson-namein { flex: 1 1 auto; min-width: 0; }
/* the NEVER zone — the ONE authored thing in a rail of derived evidence: a rule card, visibly apart */
.lesson-never { margin-top: auto; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  border: 0.0625rem solid color-mix(in srgb, var(--bad) 45%, var(--border));
  background: color-mix(in srgb, var(--bad) 6%, transparent); }
.lesson-never .lesson-sechead { color: color-mix(in srgb, var(--bad) 70%, var(--muted)); }
.lesson-nkindseg { align-self: center; }
.lesson-nkindseg > button { font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-5); }
.lesson-neverrow .lesson-pair { color: var(--bad); }
.lesson-neveradd { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.lesson-neveradd .lesson-nsel, .lesson-neveradd .lesson-nkind { flex: 1 1 100%; min-width: 0; }
/* ＋ Rule COMMITS the three fields above it, so it is the primary action of this block — ember fill and
   full width, the same shape as .tiles-addbtn ("Add to palette"). The neutral ＋ Layer / ＋ Zone styling
   is for buttons that add an EMPTY thing with no form to commit; this is not one of those. */
.lesson-addbtn { flex: 1 1 100%; padding: var(--sp-4); border-radius: var(--r-lg); }
.lesson-addbtn:disabled { background: var(--panel-2); color: var(--muted); box-shadow: none; }
.sample-cv-pan { cursor: grab; }
/* ── ⚙ Generate — procedural candidates from the palette (the editor's Generate tab) ── */
.gen-bench-body { grid-template-columns: clamp(15rem, 22vw, 19rem) minmax(0, 1fr); }
.gen-col-design, .gen-col-cands { min-width: 0; }
.gen-form { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0 0.9375rem; }
.gen-dims { display: flex; gap: var(--sp-5); }
.gen-fld { display: flex; align-items: center; gap: 0.3125rem; font: 600 var(--fs-xs) var(--font-sans); color: var(--muted); min-width: 0; }
.gen-fld input { width: 3.5rem; min-width: 0; }
.gen-axis { display: flex; flex-direction: column; gap: var(--sp-3); }
.gen-axis .seg { align-self: flex-start; }
.gen-axis-lbl { font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Axis SLIDER rows (2026-08-10): label · track · named readout on ONE line — half the vertical cost of
 * the old label-over-seg stack, and the track stretches into the column's former dead space. */
.gen-axisrow { flex-direction: row; align-items: center; gap: var(--sp-5); }
.gen-axisrow .gen-axis-lbl { flex: none; width: 4.75rem; }
.gen-axis-val { flex: none; width: 5.5rem; text-align: right; font: 600 var(--fs-xs) var(--font-sans);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gen-featrow { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); }
.gen-actions { display: flex; flex-wrap: wrap; gap: 0.4375rem; align-items: center; padding: var(--sp-7) 0.9375rem 0.9375rem; margin-top: auto; border-top: 0.0625rem solid var(--border-soft); }
.gen-meta { display: flex; gap: var(--sp-5); align-items: center; font: 600 var(--fs-xs) var(--font-sans); }
.gen-ok { color: var(--gen-ok-fg); } .gen-bad { color: var(--palbar-del-fg); } .gen-adv { color: var(--gen-adv-fg); }
.gen-score { color: var(--accent); }
.gen-fid { color: var(--muted); }                 /* how close to the SAMPLE — what best-of-N ranks on */
.gen-reason { margin: -0.25rem 0.9375rem var(--sp-5); font: 500 var(--fs-xs) var(--font-sans); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-stage { flex: 1 1 auto; }
@media (max-width: 1080px) { .gen-bench-body { grid-template-columns: 1fr; } .gen-stage { min-height: 22rem; } }
/* Palette VIEW page (/c/:cid/palettes/:pid) — the read-only sample-map stage fills the viewport */


.sample-stage-view .sample-cv { cursor: grab; }
.sample-laylist { padding: var(--sp-6) 0.9375rem; }
.sample-layname { flex: 1 1 auto; min-width: 3.25rem; font: 600 var(--fs-sm) var(--font-sans); color: var(--text); padding: 0 var(--sp-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-layname-in { flex: 1 1 auto; min-width: 3.25rem; font-weight: 600; }
.sample-laykind { font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb), .1); border-radius: var(--r-pill); padding: var(--sp-1) 0.3125rem;
  flex: 0 0 auto; white-space: nowrap; }
.sample-chunks { border-top: 0.0625rem solid var(--border-soft); padding: var(--sp-6) 0.9375rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.sample-chunkhead { display: flex; align-items: center; gap: var(--sp-4); font: 600 var(--fs-2xs)/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sample-chunkadd { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.sample-chunkrow { padding: var(--sp-1) var(--sp-4); }
.sample-chunkpos { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.sample-layrow { padding: var(--sp-3) var(--sp-4); border: 0.0625rem solid transparent; border-radius: var(--r-md); cursor: pointer; }
.sample-layrow:hover { border-color: rgba(var(--accent-rgb), .35); }
.sample-layrow.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.sample-layvis { font-size: var(--fs-sm); }
.sample-layhidden .sample-layname, .sample-layhidden .sample-laykind { opacity: .55; }
@media (max-width: 1080px) { .sample-bench-body { grid-template-columns: 1fr; } }

/* ── Palette Swap — variant bar + per-tile alternate (lives in §03 Map palette) ─────────────── */
.tiles-varbar { display: flex; align-items: center; gap: 0.4375rem; flex-wrap: wrap; padding: 0.5625rem 0.9375rem; border-bottom: 0.0625rem solid var(--border-soft); }
.tiles-varlabel { font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tiles-varsel { background: var(--panel-2); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5); font: 500 var(--fs-xs) var(--font-sans); cursor: pointer; max-width: 9.375rem; }
.tiles-varbar .tiles-varsel { flex: 1 1 auto; min-width: 0; max-width: none; }   /* fill the row instead of leaving dead space */
.tiles-varbtn { width: 1.625rem; height: 1.625rem; border-radius: var(--r-md); font-size: var(--fs-base); }  /* icon-btn (2.2) */
.tiles-varprev { display: inline-flex; align-items: center; gap: 0.3125rem; font: 600 var(--fs-xs) var(--font-sans); color: var(--muted); cursor: pointer; }
.tiles-varprev input { accent-color: var(--accent); }
.tiles-altblock { margin-top: var(--sp-7); padding-top: 0.6875rem; border-top: 0.0625rem solid var(--border); display: flex; flex-direction: column; gap: 0.5625rem; }
.tiles-altrow { display: flex; align-items: center; gap: var(--sp-6); }
.tiles-altthumb { flex: 0 0 auto; width: 2.875rem; height: 2.875rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border);
  image-rendering: pixelated; background-color: var(--panel); }
.tiles-altset { font-size: var(--fs-xs); line-height: 1.4; color: var(--text); }
.tiles-altbtns { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ── Remove background (cutout tiles) ─────────────────────────────────────────────────────── */



.tiles-cutchip { position: relative; width: 1.875rem; height: 1.875rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border);
  image-rendering: pixelated; background-color: var(--panel); }
.tiles-cutx { position: absolute; top: -0.375rem; right: -0.375rem; width: 0.9375rem; height: 0.9375rem; border-radius: var(--r-round); border: none;
  background: var(--mb-pal-del-fg); color: var(--on-accent); font-size: var(--fs-micro); line-height: 1; cursor: pointer; padding: 0; }




.tiles-cutprev { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); image-rendering: pixelated;
  background-image: linear-gradient(45deg, var(--border-soft) 25%, transparent 25%), linear-gradient(-45deg, var(--border-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--border-soft) 75%), linear-gradient(-45deg, transparent 75%, var(--border-soft) 75%);
  background-size: 0.75rem 0.75rem; background-position: 0 0, 0 0.375rem, 0.375rem -0.375rem, -0.375rem 0; background-color: var(--panel); }







.tiles-cutprevwrap { display: flex; justify-content: center; padding: var(--sp-1) 0 var(--sp-3); }
.tiles-cutprevwrap .tiles-cutprev { cursor: crosshair; }   /* JS sets an integer display size — true to the original, never stretched */





.tiles-cutlearn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

.tiles-collection .mb-pal-chip:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-0.0625rem); }
.tiles-collection .mb-pal-chip.on { border-color: var(--accent); box-shadow: var(--glow-ember), inset 0 0 0 0.0625rem var(--accent); background: rgba(var(--accent-rgb), .07); }
.tiles-collection .mb-pal-thumb { flex: 0 0 auto; border-radius: var(--r-md); background: var(--mb-pal-thumb-bg); image-rendering: pixelated; box-shadow: inset 0 0 0 0.0625rem var(--border-soft); }
.tiles-collection .mb-pal-name { max-width: 100%; font: 600 var(--fs-2xs)/1.2 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles-collection .mb-pal-chip.on .mb-pal-name { color: var(--text); }

/* keyboard focus + reduced motion — quality floor */
.tiles-sheet:focus-visible, .tiles-collection .mb-pal-chip:focus-visible, .tiles-ghost:focus-visible,
.tiles-addbtn:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.125rem; }
@media (prefers-reduced-motion: reduce) { .tiles-sheet { transition: none; } }
@media (max-width: 1080px) {  .tiles-collection { max-height: 28.75rem; } }

/* sheet-row: name + source pack (disambiguates same-named sheets from different packs) */



/* Controls: undo/redo + long-press option flyout */
.mb-tool[disabled] { opacity: .35; cursor: default; border-color: var(--border); background: var(--panel-2); box-shadow: none; }
.mb-toolsep { width: 0.0625rem; align-self: stretch; background: var(--border); margin: var(--sp-1) var(--sp-2); }
.mb-hasopts { position: relative; }
.mb-hasopts::after { content: ""; position: absolute; right: 0.125rem; bottom: 0.125rem; width: 0; height: 0; border-left: 0.3125rem solid transparent; border-bottom: 0.3125rem solid var(--gold); opacity: .8; }



/* small text input — reused by the Events panel */
.mb-asst-in { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 0.0625rem solid var(--border);
  border-radius: var(--r-md); color: var(--text); padding: var(--sp-4) 0.5625rem; font: 500 var(--fs-sm) var(--font-sans); }
.mb-asst-in:focus { border-color: var(--accent); }

/* Map save bar (top-center of the builder) */



.mb-mapname { background: var(--panel-2); border: 0.0625rem solid var(--border); border-radius: var(--r-md); color: var(--text);
  padding: var(--sp-4) 0.5625rem; font: 600 var(--fs-base) var(--font-sans); width: 100%; box-sizing: border-box; }

/* Maps panel (identity + save + quick navigation) */
.mb-maprow { display: flex; gap: var(--sp-4); align-items: center; margin-top: 0.4375rem; }

.mb-mapspanel .mb-savebtn { flex: 1 1 auto; width: 100%; }
.mb-maphead { display: flex; justify-content: space-between; align-items: center; }
.mb-maphead h4 { margin: 0; }











/* Events panel */
.mb-evic { font-size: var(--fs-base); line-height: 1; }
.mb-evlist { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 24vh; overflow-y: auto; margin: var(--sp-5) 0; }
.mb-evrow { display: flex; align-items: center; gap: 0.4375rem; padding: var(--sp-3) 0.4375rem; border: 0.0625rem solid transparent; border-radius: var(--r-md); cursor: pointer; }
.mb-evrow:hover { background: var(--panel-2); border-color: var(--border); }
.mb-evrow.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }


.mb-evname { flex: 1 1 auto; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-evcount { font-size: var(--fs-2xs); color: var(--muted); }
.mb-evstar { font-size: var(--fs-xs); line-height: 1; }
/* 4.2: an OPEN editor is a nested family card — frame recipe + accent hairline */
.mb-eveditor { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4);
  background: var(--card-bg); border: 0.0625rem solid var(--border); border-top: 0.125rem solid var(--accent);
  border-radius: var(--r-lg); padding: var(--sp-5) 0.5625rem 0.5625rem; }


/* encounter-zone editor: two labelled Select2 pickers (Events → Arenas) */

.mb-flbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-5); margin-top: var(--sp-2);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mb-flink { font-size: var(--fs-2xs); text-transform: none; letter-spacing: 0; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mb-flink:hover { text-decoration: underline; }

/* Atmosphere panel — light inspector + weather rows */
.mb-atmorow { display: flex; align-items: center; gap: var(--sp-4); font: 500 var(--fs-sm) var(--font-sans); color: var(--muted); }
.mb-atmorow input[type=range] { flex: 1; min-width: 0; }
.mb-atmorow input[type=color] { width: 1.75rem; height: 1.375rem; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; }
.mb-atmorow .mb-zoom { min-width: 2.375rem; text-align: right; }





/* Tile-sheet gallery popup */


.mb-gallery { position: fixed; inset: 0; z-index: 200; background: rgba(8,6,4,.78); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.mb-gal-box { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: var(--panel); border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--glow-gold); overflow: hidden; }
.mb-gal-head { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); border-bottom: 0.0625rem solid var(--border); }

.mb-gal-x { margin-left: auto; border-radius: var(--r-md); width: 1.875rem; height: 1.875rem; font-size: var(--fs-md); }  /* icon-btn (2.2) */
.mb-gal-body { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-9); padding: var(--sp-9); overflow-y: auto; overflow-x: hidden; }
.mb-gal-card { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; max-width: 100%; padding: var(--sp-5); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--panel-2); cursor: pointer; }
.mb-gal-card:hover { border-color: var(--accent); }
.mb-gal-card.on { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent); }
.mb-gal-card img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; border-radius: var(--r-sm); background: var(--panel); }
.mb-gal-cap { font-size: var(--fs-xs); color: var(--muted); }
.mb-gal-cap b { color: var(--text); }
.mb-mapname:focus { border-color: var(--accent); }

/* .mb-savebtn folded → `btn btn-primary mb-savebtn` (2.1); contextual width kept at `.mb-mapspanel .mb-savebtn`. */
.mb-savemsg { font-size: var(--fs-sm); white-space: nowrap; }
.mb-savemsg.ok { color: var(--accent); }
.mb-savemsg.err { color: var(--err-fg); }





/* Overlay paint layers (regions / passability / shadow) */


.mb-overlaysec { margin-top: 0.5625rem; border-top: 0.0625rem solid var(--border); padding-top: var(--sp-5); }
.mb-ovhead { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 0.3125rem var(--sp-1); }
.mb-ovlayer { cursor: pointer; }
.mb-ovview { cursor: default; }   /* the palette-passability row is VIEW-only (no tool to activate) */
.mb-ovic { font-size: var(--fs-base); width: 1.125rem; text-align: center; flex: 0 0 auto; }
.mb-ovcount { font-size: var(--fs-2xs); color: var(--muted); padding: 0 var(--sp-3); flex: 0 0 auto; }

/* Roster thumbnails */
.map-thumb { display: block; width: 100%; height: 7.25rem; object-fit: contain; background: var(--panel); border-radius: var(--r-lg); image-rendering: pixelated; border: 0.0625rem solid var(--border); }
.map-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-xs); image-rendering: auto; }

/* Map roster ("grid") */
.map-roster { padding: 1.625rem var(--sp-10) 4rem; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-8); margin-top: 1.125rem; }
.map-card { background: var(--panel); border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); overflow: hidden; display: flex; flex-direction: column; }
.map-card-main { display: block; padding: 0.9375rem var(--sp-9) 0.8125rem; text-decoration: none; color: var(--text); }
.map-card-main:hover { background: var(--panel-2); }
/* .map-kind + .map-meta retired (0.9) — roster/import-picker cards use the shared vc-eyebrow/vc-meta. */
.map-name { margin: 0.5625rem 0 var(--sp-3); font-size: var(--fs-lg); color: var(--text); }
.map-card-foot { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; padding: 0.5625rem var(--sp-7); border-top: 0.0625rem solid var(--border); margin-top: auto; }
.map-card-foot .btn-mini { padding: var(--sp-3) 0.5625rem; font-size: var(--fs-xs); }
.mr-muted { color: var(--muted); }

/* Prefab stamps panel */

/* ── autotile SHAPE GALLERY (Author · Passability): one paintable swatch per composed shape ───────── */
.author-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.875rem, 1fr)); gap: var(--sp-6) var(--sp-5); width: 100%; }
.author-shape { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); min-width: 0; }
.author-shape-stage { position: relative; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .45), inset 0 0 0 0.0625rem var(--border-soft); }
.author-shape.set .author-shape-stage { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .45), inset 0 0 0 0.0625rem rgba(var(--accent-rgb), .65); }
.author-shape-cv { display: block; image-rendering: pixelated; }
.author-shape-lbl { font: 600 var(--fs-micro) var(--font-mono); letter-spacing: .03em; color: var(--muted);
  text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-shape.set .author-shape-lbl { color: var(--accent); }
/* unauthored shapes GHOST the whole-tile default so what they resolve to is visible at a glance */
.author-blocksub.ghost { background: rgba(168, 156, 132, .32); border: 0.0625rem dashed rgba(210, 198, 172, .4); }
.author-shape-x { position: absolute; top: 0.125rem; right: 0.125rem; z-index: 3; width: 1rem; height: 1rem; border-radius: var(--r-sm);
  border: 0.0625rem solid rgba(0, 0, 0, .4); background: rgba(20, 14, 8, .82); color: var(--mb-on-fg); font-size: var(--fs-2xs);
  line-height: 1; padding: 0; cursor: pointer; }
.author-shape-x:hover { color: var(--author-shape-x-fg); }
.author-shape-div { grid-column: 1 / -1; font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); border-top: 0.0625rem solid var(--border-soft);
  padding-top: var(--sp-5); margin-top: var(--sp-1); }

.roster-head-actions { display: flex; gap: var(--sp-5); align-items: center; }
.map-card-pick { cursor: pointer; text-align: left; border: 0.0625rem solid var(--border); background: var(--panel); }
.map-card-pick:hover { border-color: var(--accent); }
.map-grid-pick { max-height: 60vh; overflow-y: auto; }

/* AUDIT 2026-07-17 — law-compliant control replacements (Map Builder) */

.mb-bseg button, .mb-lightseg button { font-size: var(--fs-base); padding: var(--sp-1) 0.5625rem; }
.mb-lightseg { margin-bottom: var(--sp-4); }

/* ── stateful-interactive (lootable container) authoring ── */
.mb-iatiles { display: flex; gap: 0.3125rem; flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-4); }
.mb-iaitems { margin: var(--sp-3) 0; }
/* interactives P2: concept picker + gates editor */
.mb-conceptseg { margin-right: var(--sp-3); }
.mb-conceptseg > button { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); line-height: 1; }
.mb-iastate { display: inline-flex; gap: 0.125rem; }
.mb-iablank { padding-left: 0.375rem; padding-right: 0.375rem; opacity: .75; }
.mb-gates { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.mb-gaterow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mb-gseg > button { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-2xs); text-transform: none; }
.mb-trapbox { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%;
  border-left: 0.125rem solid var(--border); padding-left: var(--sp-4); margin-top: var(--sp-2); }
.mb-keyname { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--gold); }
.mb-keysearch { position: relative; min-width: 8rem; }
.mb-dice { width: 4.5rem; flex: none; font-family: var(--font-mono); }
.mb-iatext { min-height: 4.5rem; width: 100%; }
.mb-gaterow .sel2 { min-width: 7rem; }
.mb-iacoins { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-bottom: 0.3125rem; }
.mb-iacoins label { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-micro)/1 var(--mono, monospace); letter-spacing: .06em; color: var(--muted); }
.mb-iacoins input { width: 2.875rem; }
.mb-iarow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); padding: var(--sp-1) 0; border-bottom: 0.0625rem solid rgba(255,255,255,.05); }
.mb-iafound { border: 0.0625rem solid var(--border); border-radius: var(--r-md); margin-top: var(--sp-2); max-height: 11.875rem; overflow-y: auto; background: var(--panel, #1a140c); }
.mb-iafi { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; text-align: left; padding: var(--sp-3) var(--sp-5); border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; border-bottom: 0.0625rem solid rgba(255,255,255,.05); }
.mb-iafi:hover { background: rgba(224,144,44,.14); color: var(--gold, #e0a838); }
.mb-iacat { font: 600 var(--fs-micro)/1 var(--mono, monospace); text-transform: uppercase; color: var(--muted); }
.mb-lootmode, .mb-lootkind { flex-wrap: wrap; }
.mb-lootmode button { font-size: var(--fs-2xs); padding: var(--sp-2) var(--sp-4); }
.mb-iaroll { display: flex; align-items: center; gap: var(--sp-6); margin: 0.3125rem 0; flex-wrap: wrap; }
.mb-flbl2 { font-size: var(--fs-xs); font-weight: 600; color: var(--gold); display: inline-flex; align-items: center; gap: 0.3125rem; }
.mb-num { width: 3.625rem; }

/* ── palette CHAINS (Builder) ─────────────────────────────────────────────── */
.tiles-chainbar { margin-top: .3rem; }
.tiles-chainbar .sel2 { flex: 1 1 auto; min-width: 0; }
.mb-pal-chip.inherited { outline: 1px dashed rgba(201, 162, 39, .45); outline-offset: -1px; }
.mb-pal-chaindot { position: absolute; top: .15rem; left: .15rem; width: .45rem; height: .45rem;
  border-radius: var(--r-round); background: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
/* Both palette-header bars are ONE grid child — .mb-tilescreen's rows are `auto 1fr` and sized
   for exactly two children; a loose second bar overlapped the sheets column. */
.tiles-palhead { display: flex; flex-direction: column; gap: var(--sp-4); }
.tiles-chainbar .palbar-label { flex: 0 0 auto; white-space: nowrap; }

/* ── Draw-tab DOCKED RAILS (ui-rework 4.1) — sections in two scrollable columns; rails
   collapse to icon strips; only Controls + Navigator float. ─────────────────────────── */
.mb-rail { position: absolute; top: 3.5rem; bottom: 0.75rem; z-index: 21; width: 17.5rem;
  display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable; padding-bottom: var(--sp-3); }
.mb-rail-l { left: 0.75rem; }
.mb-rail-r { right: 0.75rem; }
.mb-rail.is-strip { width: 2.375rem; overflow: visible; }
/* rail sections are docked cards: natural height, no float cap, full width */
.mb-rail .cb-panel { flex: none; max-height: none; width: 100%;   /* frame comes from the shared recipe in theme.css */
  padding: 0.5625rem var(--sp-8) 0.6875rem; color: var(--text); }
.mb-rail .cb-ph { cursor: pointer; }
.mb-rail .cb-ph::before { display: none; }        /* no drag grip — sections don't drag */
.mb-rail-tg { flex: none; align-self: flex-end; border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--panel); color: var(--muted); font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .06em;
  padding: var(--sp-3) 0.4375rem; cursor: pointer; }
.mb-rail-l .mb-rail-tg { align-self: flex-start; }
.mb-rail-tg:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }
.mb-rail-ic { flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-lg); font-size: var(--fs-md); }  /* icon-btn (2.2) */
/* at narrow widths the centered Controls dock reaches the rails — rails stop above it */
@media (max-width: 1500px) { .mb-rail { bottom: 11.5rem; } }

/* ── 4.3 law-sweep support: kit controls take the old inputs' footprints ── */
.author-seg button { font-size: var(--fs-2xs); padding: var(--sp-2) 0.4375rem; }
.mb-visseg button { font-size: var(--fs-2xs); padding: var(--sp-2) 0.4375rem; text-transform: capitalize; }
.mb-zoomrange { max-width: 7.5rem; }
.mb-zoomval .ui-num { width: 3.5rem; }
.mb-bnum .ui-num { width: 3rem; }
.mb-num .ui-num { width: 3.25rem; }
.tctl-num .ui-num { width: 3.5rem; }
.author-num .ui-num { width: 3.5rem; }
.mb-iacoins .ui-num { width: 3.25rem; }
.mb-zchance .ui-num { width: 3.25rem; }
.tiles-znumwrap .ui-num { width: 3.25rem; }
/* .mb-sheetnote retired (0.14) — the sheet-brush guidance is now a toast fired on the failed paint. */
.mb-back { flex: none; align-self: center; margin-right: var(--sp-4); font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .04em; color: var(--muted); text-decoration: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.mb-back:hover { color: var(--accent); background: rgba(var(--accent-rgb), .1); text-decoration: none; }

/* palette roster card sample preview */
.pal-card-thumb { display: block; width: 100%; height: 7.5rem; object-fit: contain;
  image-rendering: pixelated; background: rgba(0,0,0,0.3); border-radius: var(--r-md);
  margin-bottom: var(--sp-5); }
.pal-card-thumb-empty { display: flex; align-items: center; justify-content: center;
  color: var(--muted, #8a8070); font-size: var(--fs-base); }
/* §04 trace — a lesson row is clickable, and says when generation considers a pairing incidental */
.lesson-rowhit { cursor: pointer; border-radius: var(--r-xs); padding: 0.0625rem var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); }
.lesson-rowhit:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lesson-rowhit.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lesson-warn { color: var(--bad); font-size: var(--fs-2xs); }
.lesson-hlbar { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0.9375rem var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-2xs);
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.lesson-hlbar.weak { background: color-mix(in srgb, var(--bad) 20%, transparent); }
.lesson-hlbar button { margin-left: auto; }
/* Generate §02 — "why is this cell like this": the traced cell's planes, what drew it, and the lesson
   that licensed it. Each lesson row jumps to the sample cells that taught it. */
.gen-cv-trace { cursor: crosshair; }
.gen-why { margin: 0 0.9375rem var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  border: 0.0625rem solid var(--border); background: var(--panel-2); }
.gen-why-head { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.gen-why-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.gen-why-head button { margin-left: auto; }
.gen-why-drew { color: var(--accent); }
.gen-why-planes { display: flex; gap: var(--sp-3); margin: var(--sp-3) 0; }
.gen-why-lessons { display: flex; flex-direction: column; gap: var(--sp-2); }
.gen-why-lessons .lesson-row.weak .lesson-icos { outline: 0.0625rem solid var(--bad); outline-offset: 0.0625rem; border-radius: var(--r-xs); }
/* Generate §01 — per-fabrication count knobs; the placeholder IS the taught default */
.gen-fabknobs { display: flex; flex-direction: column; gap: var(--sp-2); }
.gen-fabknob { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-sm); }
.gen-fabknob .ui-numfield input { width: 4rem; }
/* fabrication thumbnails — composed constructions, drawn by the shared thumb painter */
.fab-thumb { display: block; flex: 0 0 auto; border-radius: var(--r-xs); background: var(--bg);
  border: 0.0625rem solid var(--border); image-rendering: pixelated; }
.sample-fabrow { display: flex; align-items: center; gap: var(--sp-3); }

/* Tied candidates: the engine cannot separate them, so the author picks. A segmented control (never a
   row of toggle-buttons), sized down to sit in the stage header beside the fault pills. */
.gen-tieseg { font-size: var(--fs-xs); }
.gen-tieseg button { min-width: 2rem; padding-inline: var(--sp-4); }
.gen-tielbl { color: var(--muted); font-size: var(--fs-xs); }