/* ==========================================================================
   studio.css — MapX Editor "v2 chrome" (desktop toolbar system)
   Scoped to body.mx-studio so it NEVER touches the live laser-lake editor.
   Recreates the editor.dc.html handoff: 44px tool rail · 40px contextual bar ·
   300px Map-layers panel (42px icon strip + existing sections) · fixed 264px
   inspector (Layers / Object / Laser). Existing control sections are reparented
   at runtime by js/laser-studio.js — never rewritten.
   ========================================================================== */

body.mx-studio {
  --s-brand: #5f8d74;
  --s-dark: #0c6457;
  --s-tint: #e3f1ee;
  --s-tint-2: #d3e8e1;
  --s-bg: #e9ecea;
  --s-surface: #ffffff;
  --s-well: #f2f4f2;
  --s-text: #212b26;
  --s-muted: #68736d;
  --s-faint: #9aa49e;
  --s-line: #e6e9e7;
  --s-danger: #b3564d;
  --s-op-engrave: #0c6457;
  --s-op-score: #8a6d2f;
  --s-op-cut: #b3564d;
  background: var(--s-bg);
}

/* Hide the legacy floating precision dock if labstudio ever loads alongside */
body.mx-studio #lab-dock { display: none !important; }
/* Phase 2: the engine's own zoom +/- & pan pad (#zoompan) is replaced by the bottom-center zoom pill */
body.mx-studio #zoompan { display: none !important; }

/* Select tool: the cursor becomes a pointing hand over anything you can grab (text / icon /
   marker / shape / line), so it's obvious what's clickable. Only while the Select tool is active. */
body.mx-studio.mx-tool-select #poster-wrap .laser-svg-text,
body.mx-studio.mx-tool-select #poster-wrap .shape-group,
body.mx-studio.mx-tool-select #poster-wrap .shape-hit,
body.mx-studio.mx-tool-select #poster-wrap .laser-marker,
body.mx-studio.mx-tool-select #poster-wrap .edit-line,
body.mx-studio.mx-tool-select #poster-wrap .gen-editable { cursor: pointer !important; }

/* ============ Floating selection toolbar (bottom, over the canvas) ============
   Phase 2: shown ONLY when an object is selected (data-ctx != "tool"); carries the object's quick
   actions (style / size / color / labels / duplicate / arrange / delete + align / group / combine).
   The always-on zoom + view utilities moved out to #mx-zoompill (below). */
#mx-ctxbar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 66px; z-index: 26;
  max-width: calc(100% - 40px); box-sizing: border-box;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(18,32,26,.06), 0 12px 32px rgba(18,32,26,.16);
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  font-family: 'Montserrat', system-ui, sans-serif; color: var(--s-text); scrollbar-width: thin;
}
#mx-ctxbar::-webkit-scrollbar { height: 0; }
#mx-ctxbar[data-ctx="tool"] { display: none; }   /* nothing selected → toolbar hidden */

/* ============ Bottom-center zoom pill (always visible) ============ */
#mx-zoompill {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 25;
  display: flex; align-items: center; gap: 2px; box-sizing: border-box;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 999px;
  padding: 4px 6px; box-shadow: 0 2px 6px rgba(18,32,26,.06), 0 8px 24px rgba(18,32,26,.10);
  font-family: 'Montserrat', system-ui, sans-serif; color: var(--s-text);
}
#mx-zoompill .ctx-chip, #mx-zoompill .ctx-pill {
  display: flex; align-items: center; gap: 4px; height: 28px; box-sizing: border-box;
  border: 0; border-radius: 999px; padding: 0 10px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--s-muted); cursor: pointer; user-select: none; flex: 0 0 auto;
}
#mx-zoompill .ctx-chip:hover, #mx-zoompill .ctx-pill:hover { background: var(--s-well); }
#mx-zoompill .ctx-chip.on { background: var(--s-tint); color: var(--s-dark); }
#mx-zoompill .ctx-chip svg { width: 14px; height: 14px; }
#mx-zoompill .ctx-pill { padding: 0 4px; }
#mx-zoompill .ctx-pill .step { color: var(--s-muted); padding: 0 7px; font-size: 15px; line-height: 1; }
#mx-zoompill .ctx-pill .val { font-weight: 700; min-width: 40px; text-align: center; color: var(--s-text); font-size: 12px; }
#mx-zoompill .ctx-units { display: flex; background: var(--s-well); border-radius: 999px; padding: 2px; gap: 0; }
#mx-zoompill .ctx-units .u { height: 22px; display: flex; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; cursor: pointer; color: var(--s-muted); }
#mx-zoompill .ctx-units .u.on { background: var(--s-surface); color: var(--s-dark); box-shadow: 0 1px 2px rgba(18,32,26,.08); }
#mx-ctxbar .ctx-tag { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--s-dark); flex: 0 0 auto; }
#mx-ctxbar .ctx-tag.muted { color: var(--s-muted); }
#mx-ctxbar .ctx-hint { font-size: 11px; color: var(--s-faint); flex: 0 0 auto; }
#mx-ctxbar .ctx-spring { flex: 1 1 auto; min-width: 8px; }
#mx-ctxbar .ctx-chip,
#mx-ctxbar .ctx-seg,
#mx-ctxbar .ctx-pill {
  display: flex; align-items: center; gap: 4px; height: 28px; box-sizing: border-box;
  border: 1px solid var(--s-line); border-radius: 7px; padding: 0 8px;
  font-size: 11.5px; font-weight: 600; color: var(--s-muted); cursor: pointer; flex: 0 0 auto;
  background: var(--s-surface); user-select: none;
}
#mx-ctxbar .ctx-chip:hover,
#mx-ctxbar .ctx-pill:hover { background: var(--s-well); }
#mx-ctxbar .ctx-chip.on { background: var(--s-tint); color: var(--s-dark); border-color: #a8c6b7; }
#mx-ctxbar .ctx-chip svg { width: 13px; height: 13px; }
#mx-ctxbar .ctx-pill .step { color: var(--s-muted); padding: 0 3px; }
#mx-ctxbar .ctx-pill .val { font-weight: 700; min-width: 44px; text-align: center; color: var(--s-text); }
#mx-ctxbar .ctx-pill .k { color: var(--s-faint); font-size: 10px; }
#mx-ctxbar .ctx-xy { cursor: text; padding: 0 6px; }
#mx-ctxbar .ctx-xyin {
  width: 46px; border: none; background: transparent; outline: none;
  font: 700 11.5px inherit; color: var(--s-text); text-align: center;
  -moz-appearance: textfield;
}
#mx-ctxbar .ctx-xyin::-webkit-outer-spin-button,
#mx-ctxbar .ctx-xyin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#mx-ctxbar .ctx-danger { color: var(--s-danger); border-color: #e0b9b3; }
#mx-ctxbar .ctx-danger:hover { background: #f6ecea; }
#mx-ctxbar .ctx-units { display: flex; background: var(--s-well); border-radius: 7px; padding: 2px; gap: 0; flex: 0 0 auto; }
#mx-ctxbar .ctx-units .u {
  height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; cursor: pointer; color: var(--s-muted);
}
#mx-ctxbar .ctx-units .u.on { background: var(--s-surface); color: var(--s-dark); box-shadow: 0 1px 2px rgba(18,32,26,.08); }
/* selection-state panes inside the ctx bar */
#mx-ctxbar .ctx-pane { display: none; align-items: center; gap: 6px; flex: 0 0 auto; }
#mx-ctxbar[data-ctx="tool"]   .ctx-pane.pane-tool,
#mx-ctxbar[data-ctx="object"] .ctx-pane.pane-object,
#mx-ctxbar[data-ctx="text"]   .ctx-pane.pane-text,
#mx-ctxbar[data-ctx="shape"]  .ctx-pane.pane-shape { display: flex; }

/* SHAPE pane: fill / border colour swatches in the contextual bar */
#mx-ctxbar .ctx-swatch {
  display: flex; align-items: center; gap: 5px; height: 28px; box-sizing: border-box;
  border: 1px solid var(--s-line); border-radius: 7px; padding: 0 6px 0 9px;
  font-size: 11px; font-weight: 600; color: var(--s-muted); flex: 0 0 auto; cursor: pointer;
}
#mx-ctxbar .ctx-swatch input[type="color"] { width: 22px; height: 20px; border: 0; background: none; padding: 0; cursor: pointer; }

/* full shape property set, relocated into the inspector Object tab */
#mx-inspector #shape-props { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
#mx-inspector.shape-sel #text-popup { display: none !important; }   /* shape selected → hide the text inspector */
#mx-inspector .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#mx-inspector #shape-props .sp-f, #mx-inspector #shape-props .sp-c { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--s-muted); }
#mx-inspector #shape-props input[type="number"], #mx-inspector #shape-props select { width: 100%; box-sizing: border-box; height: 28px; border: 1px solid var(--s-line); border-radius: 7px; padding: 0 7px; font: inherit; font-size: 12px; }
#mx-inspector #shape-props .shape-actions { display: flex; gap: 6px; margin-top: 10px; }
#mx-inspector #shape-props .shape-actions .fbtn { flex: 1; }

#mx-ctxbar select.ctx-sel {
  height: 28px; box-sizing: border-box; border: 1px solid var(--s-line); border-radius: 7px;
  font-size: 11.5px; padding: 0 6px; background: var(--s-surface); color: var(--s-text);
  flex: 0 0 auto; font-family: inherit; font-weight: 600; cursor: pointer; max-width: 150px;
}
#mx-ctxbar .ctx-seg { padding: 0 2px; gap: 2px; }
#mx-ctxbar .ctx-seg button { width: 26px; height: 22px; border: 0; background: transparent; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--s-muted); cursor: pointer; padding: 0; }
#mx-ctxbar .ctx-seg button:hover { background: var(--s-well); }
#mx-ctxbar .ctx-seg button.on { background: var(--s-tint); color: var(--s-dark); }
#mx-ctxbar .ctx-seg button svg { width: 13px; height: 13px; }
#mx-ctxbar .ctx-arc { width: 74px; accent-color: var(--s-brand); }
#mx-ctxbar .ctx-pill[data-ctl="arc"] { padding: 0 8px; }
#mx-ctxbar .ctx-menu-btn { gap: 3px; }
#mx-ctxbar .ctx-care { font-size: 8px; color: var(--s-faint); }
#mx-ctxbar .ctx-menu-btn.on { background: var(--s-tint); color: var(--s-dark); border-color: #a8c6b7; }

/* Position / overflow ("more") popovers off the contextual bar — fixed, don't shift layout */
#mx-ctxmenu {
  position: fixed; z-index: 9500; width: 202px; box-sizing: border-box;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(18,32,26,.08), 0 16px 48px rgba(18,32,26,.14);
  padding: 6px; display: none; font-family: 'Montserrat', system-ui, sans-serif;
}
#mx-ctxmenu.show { display: block; }
#mx-ctxmenu .ctxm-item {
  display: flex; align-items: center; min-height: 30px; padding: 0 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--s-text);
}
#mx-ctxmenu .ctxm-item:hover { background: var(--s-well); }
#mx-ctxmenu .ctxm-sep { height: 1px; background: var(--s-line); margin: 5px 4px; }
#mx-ctxmenu .ctxm-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; }
#mx-ctxmenu .ctxm-lab { font-size: 10.5px; font-weight: 700; color: var(--s-muted); flex: 0 0 auto; min-width: 44px; }
#mx-ctxmenu .ctxm-row input[type="range"] { flex: 1; accent-color: var(--s-brand); }

/* ============ Body row (reuse #free-main as the flex row) ============ */
body.mx-studio #free-main {
  padding: 0; gap: 0;
  height: calc(100% - 52px);   /* only the app bar is in-flow now (the ctx bar floats over the canvas) */
  align-items: stretch;
}

/* ============ Floating tool cluster (compact, over the canvas) ============
   Phase 2: the single labeled left rail is the CATEGORIES (#cat-rail). This small floating cluster
   holds only the point/line EDITING tools with no category home: Select, Points, Scissors, Measure.
   Creation tools fold into their category panels; Select/Pan/Zoom are cursor modes (V/H/Z). */
#mx-toolcluster {
  position: absolute; top: 14px; left: 14px; z-index: 24;
  display: flex; flex-direction: column; gap: 3px; padding: 4px; box-sizing: border-box;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(18,32,26,.06), 0 10px 28px rgba(18,32,26,.12);
}
#mx-toolcluster .tr-btn {
  position: relative; width: 50px; min-height: 42px; box-sizing: border-box;
  border: 1.5px solid transparent; border-radius: 9px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; color: var(--s-muted); padding: 5px 2px;
}
#mx-toolcluster .tr-btn:hover { background: var(--s-well); color: var(--s-text); }
#mx-toolcluster .tr-btn.on { background: var(--s-tint); color: var(--s-dark); border-color: var(--s-brand); }
#mx-toolcluster .tr-btn svg { width: 17px; height: 17px; }
#mx-toolcluster .tr-btn .tr-lbl { font-size: 8.5px; font-weight: 600; line-height: 1.05; text-align: center; letter-spacing: .01em; }

/* rail flyout popover (bottom-toolbar Combine) — fixed, anchored on demand */
#mx-flyout {
  position: fixed; z-index: 9500; width: 190px;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(18,32,26,.08), 0 16px 48px rgba(18,32,26,.14);
  padding: 8px; display: none;
}
#mx-flyout.show { display: block; }
#mx-flyout .fly-title { font-size: 10px; font-weight: 700; color: var(--s-muted); padding: 2px 6px 6px; }
#mx-flyout .fly-item {
  display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--s-text);
}
#mx-flyout .fly-item:hover { background: var(--s-well); }
#mx-flyout .fly-item.on { background: var(--s-tint); color: var(--s-dark); font-weight: 700; }
#mx-flyout .fly-item .fly-note { margin-left: auto; font-size: 9.5px; color: var(--s-faint); }

/* ============ Map-layers panel (labeled cat-rail + controls) ============ */
#mx-mappanel {
  width: 336px; flex: 0 0 336px; box-sizing: border-box;
  background: var(--s-surface); border-right: 1px solid var(--s-line);
  display: flex; flex-direction: column; min-height: 0; z-index: 5;
}
body.mx-studio.mx-map-closed #mx-mappanel { display: none; }
#mx-mappanel .mp-head {
  display: flex; align-items: center; gap: 6px; padding: 11px 14px 9px;
  border-bottom: 1px solid var(--s-line); flex: 0 0 auto;
}
#mx-mappanel .mp-title { font-size: 13px; font-weight: 700; flex: 1; color: var(--s-text); }
#mx-mappanel .mp-close {
  width: 26px; height: 26px; border: 0; background: transparent; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--s-muted); cursor: pointer;
}
#mx-mappanel .mp-close:hover { background: var(--s-well); }
#mx-mappanel .mp-close svg { width: 13px; height: 13px; }
#mx-mappanel .mp-main { flex: 1; display: flex; min-height: 0; }

/* ---- Order Notes, pinned above the scrolling controls (laser-studio.js buildNotesPin) ----
   Sits between .mp-head and .mp-main, which are the only two fixed-chrome slots in the panel,
   so the customer's requests stay on screen on EVERY category instead of only under Setup. */
#mx-notes-pin {
  flex: 0 0 auto; border-bottom: 1px solid var(--s-line); background: var(--s-well);
  display: flex; flex-direction: column; min-height: 0; max-height: 44%;
}
#mx-notes-pin .mx-notes-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 14px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-muted); text-align: left;
}
#mx-notes-pin .mx-notes-hd:hover { color: var(--s-text); }
#mx-notes-pin .mx-notes-car { font-size: 10px; transition: transform .15s ease; }
#mx-notes-pin.mx-notes-closed .mx-notes-car { transform: rotate(-90deg); }
#mx-notes-pin .mx-notes-ttl { flex: 1; }
#mx-notes-pin .mx-notes-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--s-brand); flex: 0 0 auto; }
#mx-notes-pin .mx-notes-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 10px; }
/* the promoted <section> is still a .ctl-group — strip the section chrome, it's a pinned block now */
#mx-notes-pin #order-notes-sec { margin: 0; padding: 0; border: 0; background: transparent; }
#mx-notes-pin #order-notes-sec > h3 { display: none; }        /* the pin header names it */
#mx-notes-pin #order-notes-sec > .ctl-hint { margin: 5px 0 0; font-size: 10.5px; }
#mx-notes-pin #order-notes { min-height: 58px; }

/* Phase 2: #cat-rail is the standalone, always-visible LABELED sidebar (the mockup's one rail) —
   a direct flex child of #free-main, full height, its own scroll. */
body.mx-studio #cat-rail {
  width: 76px; flex: 0 0 76px; box-sizing: border-box;
  border: 0; border-right: 1px solid var(--s-line); border-radius: 0; box-shadow: none;
  margin: 0; max-height: none; align-self: stretch; z-index: 6;
  background: var(--s-surface); overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
}
/* zoompan.js injects a « collapse toggle into the rail — the flyout has its own × / open-on-click */
body.mx-studio #rail-toggle { display: none !important; }
body.mx-studio #cat-rail .cat-btn {
  width: 68px; min-height: 52px; flex: 0 0 auto; box-sizing: border-box;
  padding: 8px 3px 7px; border-radius: 9px; gap: 5px; border: 1.5px solid transparent;
  color: var(--s-muted);
}
body.mx-studio #cat-rail .cat-btn .cat-lbl {
  display: block; font-size: 10px; font-weight: 600; line-height: 1.1; text-align: center;
}
body.mx-studio #cat-rail .cat-btn .cat-ico svg { width: 19px; height: 19px; }
body.mx-studio #cat-rail .cat-btn:hover { background: var(--s-well); color: var(--s-text); }
body.mx-studio #cat-rail .cat-btn.active {
  background: var(--s-tint); color: var(--s-dark); border-color: var(--s-brand); box-shadow: none;
}

/* the reparented #free-controls becomes the flush panel body */
body.mx-studio #free-controls {
  width: auto; min-width: 0; flex: 1 1 auto;
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  max-height: none; background: var(--s-surface);
  padding: 12px 14px 18px; overflow-y: auto;
}

/* ============ Canvas (reparented #free-preview, flush) ============ */
body.mx-studio #free-preview {
  flex: 1 1 auto; min-width: 0; padding: 0 !important; background: var(--s-bg);
  transition: none; position: relative;   /* anchors the floating tool cluster + bottom toolbar */
}
body.mx-studio.mx-tp-open #free-preview,
body.mx-studio #free-preview.mx-tp-open { padding-right: 0 !important; }

/* ============ In-place text editor "Done" commit button (mobile only) ============ */
/* Touch has no Esc / reliable click-away / blur, so a clear commit affordance is needed.
   Desktop keeps Esc / click-away / blur, so this button stays hidden there. Sits just below
   the top bar (52px) + contextual bar (40px) so it never covers the text toolbar. */
.mx-inline-done { position: fixed; top: 100px; right: 12px; z-index: 80; display: none;
  background: var(--s-brand); color: #fff; border: none; border-radius: 999px;
  padding: 11px 22px; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(24, 40, 32, .34); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mx-inline-done:active { transform: scale(.95); }
@media (max-width: 760px) { .mx-inline-done.show { display: block; top: calc(100px + env(safe-area-inset-top)); } }

/* ============ Right inspector (fixed 264px) ============ */
#mx-inspector {
  width: 264px; flex: 0 0 264px; box-sizing: border-box;
  background: var(--s-surface); border-left: 1px solid var(--s-line);
  display: flex; flex-direction: column; min-height: 0; z-index: 5;
}
#mx-inspector .insp-tabs { display: flex; gap: 4px; padding: 10px 12px 8px; border-bottom: 1px solid var(--s-line); flex: 0 0 auto; }
#mx-inspector .insp-tab {
  flex: 1; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--s-muted); font-family: inherit;
}
#mx-inspector .insp-tab.on { background: var(--s-tint); color: var(--s-dark); }
#mx-inspector .insp-body { flex: 1; overflow-y: auto; min-height: 0; }
#mx-inspector .insp-pane { display: none; padding: 12px 14px 18px; }
#mx-inspector[data-tab="layers"] .insp-pane.pane-layers,
#mx-inspector[data-tab="laser"]  .insp-pane.pane-laser { display: block; }
/* Object pane hosts the reparented #text-popup — control its visibility via the pane wrapper */
#mx-inspector[data-tab="object"] .insp-pane.pane-object { display: block; }
#mx-inspector .insp-foot { flex: 0 0 auto; padding: 8px 14px; border-top: 1px solid var(--s-well); font-size: 9.5px; color: #c9cdca; text-align: center; }

/* neutralize the docked #text-popup so it flows inside the Object pane */
body.mx-studio #text-popup {
  position: static; inset: auto; top: auto; right: auto; left: auto; z-index: auto;
  width: auto; max-width: none; box-shadow: none; border: 0; border-radius: 0;
  padding: 0; background: transparent; display: flex;
  flex-direction: column; gap: 13px; align-items: stretch;   /* stack sections vertically (engines w/o the inline style) */
}
body.mx-studio #mx-inspector[data-tab="object"] #text-popup { display: flex; }
body.mx-studio #mx-inspector:not([data-tab="object"]) .insp-pane.pane-object { display: none; }

/* Layers tab rows */
#mx-inspector .lyr-row {
  display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 8px;
  border-radius: 8px; cursor: pointer;
}
#mx-inspector .lyr-row:hover { background: #f7faf9; }
#mx-inspector .lyr-row.on { background: var(--s-tint); }
#mx-inspector .lyr-sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
#mx-inspector .lyr-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mx-inspector .lyr-kind { font-size: 10px; color: var(--s-faint); flex: 0 0 auto; }
#mx-inspector .lyr-maprow { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 8px; border-top: 1px solid var(--s-well); margin-top: 4px; color: var(--s-muted); }
#mx-inspector .lyr-maprow svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--s-faint); }
#mx-inspector .lyr-empty,
#mx-inspector .laser-note { text-align: center; padding: 26px 10px; color: var(--s-faint); font-size: 11.5px; line-height: 1.6; }

/* Laser tab op cards */
#mx-inspector .op-card { border: 1px solid var(--s-line); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; }
#mx-inspector .op-head { display: flex; align-items: center; gap: 8px; }
#mx-inspector .op-sw { width: 10px; height: 10px; border-radius: 3px; }
#mx-inspector .op-name { font-size: 12px; font-weight: 700; flex: 1; }
#mx-inspector .op-count { font-size: 10px; color: var(--s-faint); }
#mx-inspector .op-row { display: flex; gap: 8px; margin-top: 8px; }
#mx-inspector .op-cell { flex: 1; border: 1px solid var(--s-well); border-radius: 7px; padding: 5px 9px; }
#mx-inspector .op-cell .k { font-size: 9px; color: var(--s-faint); }
#mx-inspector .op-cell .v { font-size: 11.5px; font-weight: 700; }

/* keep the app-bar tidy in studio: hide the legacy in-toolbar align cluster (it relocates to the
   floating bottom toolbar). lock/text/del now live in the header .fh-left, so they're no longer
   caught by this rule; leave New/undo/redo/export/save/account. */
body.mx-studio .editor-tools #align-group,
body.mx-studio .editor-tools #rail-lock,
body.mx-studio .editor-tools #rail-text,
body.mx-studio .editor-tools #rail-del { display: none; }

/* ============ Header — mockup layout (scoped to .mx-hdr2 so other editors are untouched) ============
   home · Resize · | · undo redo · | · lock add-text delete · saved  —  centered TITLE  —  Preview Share Export */
#free-header.mx-hdr2 {
  background: var(--s-surface); border-bottom: 1px solid var(--s-line);
  padding: 0 10px; gap: 6px; font-family: 'Montserrat', system-ui, sans-serif;
}
#free-header.mx-hdr2 .fh-left { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; min-width: 0; }
#free-header.mx-hdr2 .fh-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 80px; }
#free-header.mx-hdr2 .fh-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
#free-header.mx-hdr2 .fh-right .editor-tools { display: flex; align-items: center; gap: 4px; }

/* centered, editable title */
#free-header.mx-hdr2 .mx-filebar { width: 100%; max-width: 300px; display: flex; justify-content: center; }
#free-header.mx-hdr2 #mapname {
  width: 100%; height: 32px; box-sizing: border-box; text-align: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: 600 13.5px 'Montserrat', system-ui, sans-serif; color: var(--s-text); outline: none; text-overflow: ellipsis;
}
#free-header.mx-hdr2 #mapname:hover { border-color: var(--s-line); background: var(--s-well); }
#free-header.mx-hdr2 #mapname:focus { border-color: var(--s-brand); background: var(--s-surface); }

/* brand → compact home mark */
#free-header.mx-hdr2 #free-brand { display: flex; align-items: center; gap: 5px; text-decoration: none; color: var(--s-dark); font-weight: 700; margin-right: 2px; }
#free-header.mx-hdr2 #free-brand .brand-mark { width: 22px; height: 22px; }

/* generic header buttons */
#free-header.mx-hdr2 .tool-btn {
  height: 32px; box-sizing: border-box; border: 0; background: transparent; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px;
  font: 600 12.5px 'Montserrat', system-ui, sans-serif; color: var(--s-text); cursor: pointer;
}
#free-header.mx-hdr2 .tool-btn:hover { background: var(--s-well); }
#free-header.mx-hdr2 .tool-btn.tool-btn-icon { width: 32px; padding: 0; }
#free-header.mx-hdr2 .tool-btn svg { width: 15px; height: 15px; }
#free-header.mx-hdr2 .tool-btn[disabled] { color: var(--s-faint); cursor: default; opacity: .55; }
#free-header.mx-hdr2 .tool-btn[disabled]:hover { background: transparent; }
#free-header.mx-hdr2 .hdr-chip { border: 1px solid var(--s-line); padding: 0 10px; }
#free-header.mx-hdr2 .hdr-care { font-size: 9px; color: var(--s-muted); }
#free-header.mx-hdr2 #rail-del:hover { background: #f6ecea; color: var(--s-danger); }
#free-header.mx-hdr2 #rail-lock .cat-lbl { display: none; }       /* lock is icon-only like the mockup */
#free-header.mx-hdr2 #rail-lock.locked, #free-header.mx-hdr2 #rail-lock.on { background: var(--s-tint); color: var(--s-dark); }
#free-header.mx-hdr2 .mx-sep { width: 1px; height: 20px; background: var(--s-line); margin: 0 3px; flex: 0 0 auto; }

/* saved status */
#free-header.mx-hdr2 .autosave-status { font-size: 11.5px; color: var(--s-muted); white-space: nowrap; padding: 0 4px; }

/* Export → green primary */
#free-header.mx-hdr2 #export-menu-btn.tool-btn-accent {
  background: var(--s-brand); color: #fff; border: 0; padding: 0 12px; font-weight: 600;
}
#free-header.mx-hdr2 #export-menu-btn.tool-btn-accent:hover { background: var(--s-dark); }
#free-header.mx-hdr2 #export-menu-btn .tm-caret { font-size: 9px; }

/* the injected Create button → neutral "File"-style chip; New Map hidden (Create covers it) */
#free-header.mx-hdr2 #create-btn { background: transparent; color: var(--s-text); border: 1px solid var(--s-line); border-radius: 8px; height: 32px; margin: 0 4px 0 0; padding: 0 10px; font-weight: 600; box-shadow: none; }
#free-header.mx-hdr2 #create-btn:hover { background: var(--s-well); }
#free-header.mx-hdr2 #new-map-btn { display: none; }

/* on-canvas inline text editor (created lazily on body by laser-studio.js) — README #10.
   Font-family/size/weight/style/decoration/spacing/align/rotation/color/position are all
   set per-item by styleInlineEditor() in JS; this just supplies the constant chrome. */
.mx-inline-edit {
  display: none;
  position: fixed;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.75);
  outline: 1.5px solid #5f8d74;
  outline-offset: 2px;
  border-radius: 3px;
  padding: 1px 3px;
  min-width: 1ch;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.mx-inline-edit.show { display: inline-block; }

/* the mobile chrome (bottom tab bar + slide-up sheets) is built in JS but must stay hidden on
   desktop — the tab bar / grip / close are display:none until the phone breakpoint activates them. */
#mx-tabbar, .mx-grip, body.mx-studio .mx-sheet-close { display: none; }

/* ==========================================================================
   MOBILE (≤760px) — bottom TAB BAR + slide-up bottom SHEETS (matches
   design/mobile-editor.dc.html). Everything here is media-gated + scoped to
   body.mx-studio, so desktop (≥761px) is byte-for-byte the Phase 2 layout.
   The existing panels are REPARENTED, never rebuilt: #mx-mappanel (the
   category controls, with #cat-rail re-hosted as a horizontal chip strip) and
   #mx-inspector (Design / Layers / Export) become the two sheet surfaces.
   ========================================================================== */
@media (max-width: 760px) {
  /* ---- compact top bar: back(brand) · title · undo · redo · saved · Export ---- */
  body.mx-studio #free-header.mx-hdr2 { height: 50px; min-height: 50px; padding: 0 6px; gap: 2px; }
  body.mx-studio #free-header.mx-hdr2 .fh-left { gap: 1px; }
  body.mx-studio #free-header.mx-hdr2 #free-brand span,
  body.mx-studio #free-header.mx-hdr2 #hdr-resize,
  body.mx-studio #free-header.mx-hdr2 #rail-lock,
  body.mx-studio #free-header.mx-hdr2 #rail-text,
  body.mx-studio #free-header.mx-hdr2 #rail-del,
  body.mx-studio #free-header.mx-hdr2 #new-map-btn,
  body.mx-studio #free-header.mx-hdr2 #create-btn,
  body.mx-studio #free-header.mx-hdr2 #align-group,
  body.mx-studio #free-header.mx-hdr2 #hdr-preview,
  body.mx-studio #free-header.mx-hdr2 #hdr-share,
  body.mx-studio #free-header.mx-hdr2 #save-top-btn,
  body.mx-studio #free-header.mx-hdr2 #refresh-data-btn,
  body.mx-studio #free-header.mx-hdr2 #account-slot,
  body.mx-studio #free-header.mx-hdr2 .fh-left .mx-sep,
  body.mx-studio #free-header.mx-hdr2 .fh-right .mx-sep { display: none !important; }
  body.mx-studio #free-header.mx-hdr2 #free-brand { margin: 0 2px 0 0; }
  body.mx-studio #free-header.mx-hdr2 #free-brand .brand-mark { width: 24px; height: 24px; }
  body.mx-studio #free-header.mx-hdr2 .fh-center { min-width: 40px; }
  body.mx-studio #free-header.mx-hdr2 #mapname { font-size: 13px; height: 34px; }
  body.mx-studio #free-header.mx-hdr2 .autosave-status { font-size: 10.5px; max-width: 66px; overflow: hidden; text-overflow: ellipsis; }
  body.mx-studio #free-header.mx-hdr2 .tool-btn { height: 34px; }
  body.mx-studio #free-header.mx-hdr2 #export-menu-btn.tool-btn-accent { padding: 0 12px; font-size: 12.5px; }

  /* ---- canvas fills the space between the top bar and the bottom tab bar ---- */
  body.mx-studio #free-main { display: block; position: relative; height: calc(100% - 50px); overflow: hidden; }
  body.mx-studio #free-preview { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 !important; overflow: auto; -webkit-overflow-scrolling: touch; }
  body.mx-studio #poster-wrap { padding-bottom: calc(60px + env(safe-area-inset-bottom)); box-sizing: border-box; }

  /* ---- hide the desktop-only floating chrome (rail cluster + selection toolbar) ---- */
  body.mx-studio #mx-toolcluster { display: none !important; }
  body.mx-studio #mx-ctxbar { display: none !important; }   /* object editing happens in the inspector sheet */
  /* the zoom / fit / grid / snap / units / lock pill floats just above the tab bar, right-aligned */
  body.mx-studio #mx-zoompill {
    left: auto; right: 10px; transform: none; bottom: calc(60px + env(safe-area-inset-bottom) + 8px);
    max-width: calc(100vw - 20px); overflow-x: auto; z-index: 40;
  }
  body.mx-studio #mx-zoompill::-webkit-scrollbar { display: none; }

  /* ---- BOTTOM TAB BAR (Setup · Location · Design · Text · Icons · Layers · Export) ---- */
  #mx-tabbar {
    display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--s-surface); border-top: 1px solid var(--s-line);
    padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    font-family: 'Montserrat', system-ui, sans-serif;
  }
  #mx-tabbar::-webkit-scrollbar { display: none; }
  #mx-tabbar .mx-tab {
    flex: 1 0 52px; min-height: 54px; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--s-muted); font-family: inherit; -webkit-tap-highlight-color: transparent;
  }
  #mx-tabbar .mx-tab svg { width: 20px; height: 20px; }
  #mx-tabbar .mx-tab span { font-size: 9.5px; font-weight: 600; letter-spacing: .01em; }
  #mx-tabbar .mx-tab.on { color: var(--s-dark); background: var(--s-tint); }
  #mx-tabbar .mx-tab:active { background: var(--s-well); }

  /* ---- SHEETS: #mx-mappanel + #mx-inspector slide up above the tab bar ---- */
  body.mx-studio #mx-mappanel, body.mx-studio #mx-inspector {
    display: flex !important; flex-direction: column;
    position: fixed !important; left: 0; right: 0; top: auto;
    bottom: calc(56px + env(safe-area-inset-bottom)); width: auto !important; flex: none !important;
    height: 52vh; max-height: calc(100vh - 96px); box-sizing: border-box;
    background: var(--s-surface); border: 0; border-top: 1px solid var(--s-line); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(18,32,26,.20); z-index: 60;
    transform: translateY(112%); overflow: hidden;
    transition: transform .24s ease, height .22s ease;
  }
  /* detents (cycled by tapping the grip) — half is the default, no class */
  body.mx-studio.mx-sheet-full #mx-mappanel, body.mx-studio.mx-sheet-full #mx-inspector { height: calc(100vh - 92px); }
  body.mx-studio.mx-sheet-collapsed #mx-mappanel, body.mx-studio.mx-sheet-collapsed #mx-inspector { height: 148px; }
  /* map sheet is OPEN when not collapsed-away (default down on phones via JS); inspector opens on tab/selection */
  body.mx-studio:not(.mx-map-closed) #mx-mappanel { transform: translateY(0); }
  body.mx-studio.mx-insp-open #mx-inspector { transform: translateY(0); }

  /* the drag-handle strip (tap → cycle collapsed / half / full) */
  .mx-grip { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto;
    padding: 8px 0 4px; cursor: grab; -webkit-tap-highlight-color: transparent; }
  .mx-grip-bar { width: 38px; height: 4px; border-radius: 999px; background: #d5dad7; }
  .mx-grip-lbl { font-size: 9.5px; font-weight: 500; color: var(--s-faint); }

  /* sheet body layout: heads pinned, controls scroll */
  body.mx-studio #mx-mappanel .mp-head, body.mx-studio #mx-inspector .insp-tabs { flex: 0 0 auto; }
  body.mx-studio #mx-mappanel .mp-head { padding: 4px 14px 8px; border-bottom: 0; }
  body.mx-studio #mx-mappanel .mp-close { display: none; }   /* the injected ✕ handles close */
  body.mx-studio #mx-mappanel #mx-map-main { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.mx-studio #mx-inspector .insp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* #cat-rail re-hosted inside the map sheet as a horizontal CHIP STRIP (all 15 categories reachable).
     The !important + position:static overrides neutralize the base free.css (max-740) mobile drawer,
     which otherwise pins #cat-rail / #free-controls position:fixed to the viewport bottom. */
  body.mx-studio #mx-mappanel #cat-rail {
    position: static !important; inset: auto !important; z-index: auto; box-shadow: none;
    flex: 0 0 auto; width: 100% !important; min-width: 0; max-height: none; height: auto;
    flex-direction: row; align-items: center; gap: 6px; padding: 2px 14px 12px;
    overflow-x: auto; overflow-y: hidden; border: 0; background: transparent;
  }
  body.mx-studio #mx-mappanel #cat-rail::-webkit-scrollbar { display: none; }
  body.mx-studio #mx-mappanel #cat-rail .cat-btn {
    flex: 0 0 auto; width: auto !important; min-width: 0; min-height: 34px; flex-direction: row; gap: 6px;
    padding: 0 13px !important; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-surface);
  }
  body.mx-studio #mx-mappanel #cat-rail .cat-btn .cat-ico svg { width: 15px; height: 15px; }
  body.mx-studio #mx-mappanel #cat-rail .cat-btn .cat-lbl { font-size: 12px; white-space: nowrap; }
  body.mx-studio #mx-mappanel #cat-rail .cat-btn.active { background: var(--s-tint); border-color: var(--s-brand); }
  body.mx-studio #mx-mappanel #free-controls {
    position: static !important; inset: auto !important; transform: none !important; z-index: auto;
    width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
    box-shadow: none !important; border-radius: 0; padding: 2px 14px 24px; overflow: visible;
  }
  /* Order Notes pin inside the bottom sheet: sits under the cat-rail chip strip, still fixed
     chrome (the scroll port is #mx-map-main here). Sheet height is tight, so cap it harder and
     let the collapsed header cost ~32px — JS defaults it collapsed on phones. */
  body.mx-studio #mx-notes-pin {
    max-height: 38%; border-top: 1px solid var(--s-line); background: transparent;
  }
  body.mx-studio #mx-notes-pin .mx-notes-hd { padding: 7px 14px; }
  body.mx-studio #mx-notes-pin .mx-notes-body { padding: 0 14px 8px; }
  body.mx-studio #mx-notes-pin #order-notes { min-height: 44px; font-size: 16px; }   /* 16px: iOS won't zoom the sheet */

  /* the studio sheet has its own grip + ✕ — hide the legacy free.css mobile drawer chrome */
  body.mx-studio #mm-sheet-head, body.mx-studio #mm-panel-close, body.mx-studio #mm-sheet-scrim { display: none !important; }
  /* the close (✕) injected into each sheet */
  body.mx-studio .mx-sheet-close {
    display: flex; position: absolute; top: 8px; right: 12px; width: 30px; height: 30px; border-radius: 999px;
    border: 0; background: var(--s-well); color: var(--s-muted); font-size: 15px; line-height: 1;
    align-items: center; justify-content: center; cursor: pointer; z-index: 4;
  }
}

/* ── #text-popup inner styling for chrome engines that don't inline it (street/golf/ski).
   laser-lake.html inlines the same rules; duplication is idempotent. Positioning is handled by
   the neutralize block above; these are layout + the empty/content/is-text visibility toggles. ── */
body.mx-studio #text-popup .tp-empty { display: none; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 6px; color: #8a857a; }
body.mx-studio #text-popup:not(.show) > *:not(.tp-empty) { display: none; }
body.mx-studio #text-popup:not(.show) .tp-empty { display: flex; }
body.mx-studio #text-popup:not(.is-text) .tp-text-only { display: none; }
body.mx-studio #text-popup .tp-empty-ico { width: 42px; height: 42px; border-radius: 11px; background: #f2f4f2; display: flex; align-items: center; justify-content: center; }
body.mx-studio #text-popup .tp-empty-ico svg { width: 20px; height: 20px; color: #9aa49e; }
body.mx-studio #text-popup .tp-empty-title { font-size: 13px; font-weight: 700; color: #58534a; }
body.mx-studio #text-popup .tp-empty-hint { font-size: 12px; line-height: 1.5; }
body.mx-studio #text-popup .tp-head { display: flex; align-items: center; justify-content: space-between; }
body.mx-studio #text-popup .tp-title { font-size: 13px; font-weight: 700; }
body.mx-studio #text-popup .tp-head-actions { display: flex; gap: 2px; }
body.mx-studio #text-popup .tp-ico { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #68736d; cursor: pointer; }
body.mx-studio #text-popup .tp-ico:hover { background: #f2f4f2; color: #23201a; }
body.mx-studio #text-popup .tp-ico svg { width: 15px; height: 15px; }
body.mx-studio #text-popup .tp-ico-danger:hover { background: #f6ecea; color: #b3564d; }
body.mx-studio #text-popup .tp-sec { display: flex; flex-direction: column; gap: 6px; }
body.mx-studio #text-popup .tp-lab { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #8a857a; }
body.mx-studio #text-popup .tp-lab-row { display: flex; align-items: center; justify-content: space-between; }
body.mx-studio #text-popup .tp-val { font-size: 11.5px; font-weight: 600; color: #23201a; }
body.mx-studio #text-popup textarea#tp-text { min-height: 46px; border: 1px solid #e6e4dc; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; box-sizing: border-box; outline: none; color: #23201a; width: 100%; }
body.mx-studio #text-popup textarea#tp-text:focus { border-color: #5f8d74; }
body.mx-studio #text-popup select#tp-font { height: 32px; width: 100%; box-sizing: border-box; border: 1px solid #e6e4dc; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; padding: 0 8px; color: #23201a; cursor: pointer; }
body.mx-studio #text-popup .tp-weight { height: 30px; width: 100%; box-sizing: border-box; border: 1.5px solid #e6e4dc; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; color: #23201a; }
body.mx-studio #text-popup .tp-weight.on { border-color: #5f8d74; background: #e3f1ee; color: #0c6457; }
body.mx-studio #text-popup .tp-style { display: flex; gap: 6px; }
body.mx-studio #text-popup .tp-style .tp-weight { flex: 1; width: auto; }
body.mx-studio #text-popup input[type=range] { width: 100%; accent-color: #5f8d74; margin: 0; }
body.mx-studio #text-popup .tp-seg { display: flex; gap: 6px; }
body.mx-studio #text-popup .tp-seg button { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e6e4dc; border-radius: 8px; background: #fff; color: #68736d; cursor: pointer; padding: 0; }
body.mx-studio #text-popup .tp-seg button svg { width: 15px; height: 15px; }
body.mx-studio #text-popup .tp-seg button.on { border-color: #5f8d74; background: #e3f1ee; color: #0c6457; }
body.mx-studio #text-popup .tp-swatches { display: flex; gap: 6px; }
body.mx-studio #text-popup .tp-swatches button { flex: 1; aspect-ratio: 1; border-radius: 7px; border: 1px solid rgba(0,0,0,.08); padding: 0; cursor: pointer; box-sizing: border-box; }
body.mx-studio #text-popup .tp-swatches button.on { outline: 2px solid #0c6457; outline-offset: 2px; }
body.mx-studio #text-popup input[type=color]#tp-color { width: 100%; height: 28px; padding: 2px; border: 1px solid #e6e4dc; border-radius: 7px; background: #fff; cursor: pointer; box-sizing: border-box; }
body.mx-studio #text-popup .tp-action { height: 32px; width: 100%; box-sizing: border-box; border: 1px solid #e6e4dc; border-radius: 8px; background: #faf9f6; font: inherit; font-size: 12.5px; cursor: pointer; color: #2b2b2b; }
body.mx-studio #text-popup .tp-action:hover { background: #fff; border-color: #5f8d74; }
body.mx-studio #text-popup .tp-sep { width: 100%; height: 1px; background: #eceae2; margin: 2px 0; }

/* laser-lake: layer-option sections (Places / Bathy / Elevation / Golf / Ski) always show their
   options — the user toggles the layer's own checkbox (or an item) to render it live. Overrides the
   inline display:none the reveal handlers set. Parent .ctl-group still hides by cat-rail category. */
body.mx-studio #places-controls,
body.mx-studio #bathy-controls,
body.mx-studio #topo-controls,
body.mx-studio #golf-controls,
body.mx-studio #ski-controls { display: block !important; }

/* MARKER/ICON tool → inspector pane (icon choices + add-text + place-add + import, relocated) */
body.mx-studio #mx-inspector .pane-marker { display: none; }
body.mx-studio #mx-inspector.marker-tool[data-tab="object"] .pane-marker { display: block; }
body.mx-studio #mx-inspector.marker-tool[data-tab="object"] #text-popup,
body.mx-studio #mx-inspector.marker-tool[data-tab="object"] #shape-props { display: none !important; }
body.mx-studio .pane-marker .mk-sec { margin-bottom: 16px; }
body.mx-studio .pane-marker .mk-sec .tp-lab { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--s-faint); margin-bottom: 7px; }
body.mx-studio .pane-marker .mk-addtext { display: flex; gap: 6px; }
body.mx-studio .pane-marker .mk-addtext input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--s-line); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; box-sizing: border-box; }
body.mx-studio .pane-marker .marker-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.mx-studio .pane-marker #place-input, body.mx-studio .pane-marker #place-label { width: 100%; box-sizing: border-box; margin-bottom: 5px; }

/* item 6 — the left ".mx-textpanel" duplicates the right #text-popup (the text INPUT + size/style/
   spacing/curve/erase-gap). Hide it so the left Text section is settings-only (add-text button,
   match-all-text, erase-roads) and the ONE text editor is the right-side Canva #text-popup. The
   small T tool adds a text + selects it → the right editor shows (see selectTool). */
body.mx-studio .mx-textpanel { display: none; }

/* item 7 — COVER-BLOCK pane: tick options show in the inspector when a block is selected */
body.mx-studio #mx-inspector .pane-block { display: none; }
body.mx-studio #mx-inspector.block-sel[data-tab="object"] .pane-block { display: block; }
body.mx-studio #mx-inspector.block-sel[data-tab="object"] #text-popup,
body.mx-studio #mx-inspector.block-sel[data-tab="object"] #shape-props,
body.mx-studio #mx-inspector.block-sel[data-tab="object"] .pane-textadd,
body.mx-studio #mx-inspector.block-sel[data-tab="object"] .pane-marker { display: none !important; }
body.mx-studio .pane-block .tp-lab { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--s-faint); margin-bottom: 8px; }
body.mx-studio .pane-block .ctl-check { display: flex; gap: 7px; margin-bottom: 8px; font-size: 12px; }