/* EDM Builder — studio-tool scoped styles. Ported from EDM_Builder/css/style.css;
   every selector scoped to [data-tool="edm-builder"] so nothing leaks. */
[data-tool="edm-builder"] .panel { padding: 0; }

[data-tool="edm-builder"] {
  --ink: #101828;
  --ink-soft: #344054;
  --muted: #667085;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --surface: #ffffff;
  --canvas: #eef1f5;
  --panel: #f8fafc;
  --purple: #0d5fe8;
  --purple-dark: #084dcc;
  --purple-soft: #eaf2ff;
  --teal: #0e9384;
  --danger: #d92d20;
  --warning: #dc6803;
  --shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

[data-tool="edm-builder"] .edm-app {
  background: #f2f4f7;
  color: var(--ink);
  font-family:
  Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

[data-tool="edm-builder"] * {
  box-sizing: border-box;
}

[data-tool="edm-builder"] button,
[data-tool="edm-builder"] input,
[data-tool="edm-builder"] textarea {
  font: inherit;
}

[data-tool="edm-builder"] button,
[data-tool="edm-builder"] label[for],
[data-tool="edm-builder"] .chooseButton {
  -webkit-tap-highlight-color: transparent;
}

[data-tool="edm-builder"] button:focus-visible,
[data-tool="edm-builder"] input:focus-visible,
[data-tool="edm-builder"] textarea:focus-visible {
  outline: 3px solid rgba(105, 65, 198, 0.2);
  outline-offset: 2px;
}

[data-tool="edm-builder"] .hidden {
  display: none !important;
}

[data-tool="edm-builder"] .appShell {
  /* ⚠ WAS height:100vh — which ignores the FIXED site navbar (105px) above it, so
     the shell ran ~198px past the fold and the bottom of BOTH side panels sat
     offscreen. Their internal overflow:auto was working; you simply could not
     reach it without scrolling the page, which moved the whole shell. edm.js sets
     --edmb-h from the measured navbar (and re-measures on resize / header hide);
     the calc() is the pre-JS fallback. */
  height: var(--edmb-h, calc(100vh - 130px));
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── APP-BAR — the Upload→Go family band (matches .va-appbar / .mf-appbar) ──
   Dark gradient, rounded, self-contained: it no longer relies on a bottom
   border against the surface, so it reads the same in light and dark. Height
   is auto (was a pinned 76px) — the family's bar is padding-sized and wraps
   its actions instead of clipping them. */
[data-tool="edm-builder"] .appHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 11px 16px;
  border-radius: 13px;
  background: linear-gradient(120deg, #131a2b, #1d2740);
  color: #fff;
  position: relative;
  z-index: 20;
}
[data-tool="edm-builder"] .edmb-appbar-brand {
  display: flex; align-items: center; gap: 11px; min-width: 0;
}
[data-tool="edm-builder"] .edmb-appbar-ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; font-size: 14px;
}
[data-tool="edm-builder"] .edmb-appbar-name {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; color: #fff;
}
[data-tool="edm-builder"] .edmb-appbar-name b { font-weight: 800; }
[data-tool="edm-builder"] .edmb-appbar-tag {
  font-size: 11px; font-weight: 600; color: #9db4d4; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.08); white-space: nowrap;
}
[data-tool="edm-builder"] .edmb-appbar-trust {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #9db4d4; white-space: nowrap;
}
/* the two ghost buttons have to survive on a dark band */
[data-tool="edm-builder"] .appHeader .button.buttonGhost {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #eaf1ff;
}
[data-tool="edm-builder"] .appHeader .button.buttonGhost:hover {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); color: #fff;
}
/* the shared Sample switch + Help button on a dark band — identical to the
   block in video.css and mf.css, so the three app-bars stay in step */
[data-tool="edm-builder"] .edmb-appbar .dl-demo { margin-top: 0; }
[data-tool="edm-builder"] .edmb-appbar .dl-demo-txt { color: #cfe0f5; }
[data-tool="edm-builder"] .edmb-appbar .dl-help-btn { color: #cfe0f5; }
[data-tool="edm-builder"] .edmb-appbar .dl-help-btn b {
  border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff;
}
[data-tool="edm-builder"] .edmb-appbar .dl-help-btn:hover,
[data-tool="edm-builder"] .edmb-appbar .dl-help-btn:hover b { color: #fff; border-color: #fff; }
/* .dl-upsell is the shared Pro pill (auto-hidden by body.is-premium) */
[data-tool="edm-builder"] .appHeader .dl-upsell { margin-top: 0; }

[data-tool="edm-builder"] .brand,
[data-tool="edm-builder"] .headerActions,
[data-tool="edm-builder"] .toolGroup,
[data-tool="edm-builder"] .zoomControls,
[data-tool="edm-builder"] .statusBar > div,
[data-tool="edm-builder"] .sectionHeading,
[data-tool="edm-builder"] .modalHeader,
[data-tool="edm-builder"] .codeActions {
  display: flex;
  align-items: center;
}

[data-tool="edm-builder"] .brand {
  gap: 12px;
}

[data-tool="edm-builder"] .brandMark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-tool="edm-builder"] .brand h1,
[data-tool="edm-builder"] .brand p,
[data-tool="edm-builder"] .sectionHeading h2,
[data-tool="edm-builder"] .modalHeader h2,
[data-tool="edm-builder"] .helpStep h3,
[data-tool="edm-builder"] .helpStep p,
[data-tool="edm-builder"] .compatibilityNote p {
  margin: 0;
}

[data-tool="edm-builder"] .brand h1 {
  /* compact wordmark — Anton/uppercase/outline come from the shared shell.css rule */
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.005em;
}

[data-tool="edm-builder"] .brand p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

[data-tool="edm-builder"] .headerActions {
  gap: 10px;
}

[data-tool="edm-builder"] .compatibilityBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #027a48;
  font-size: 12px;
  font-weight: 700;
}

[data-tool="edm-builder"] .compatibilityBadge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.12);
}

[data-tool="edm-builder"] .mainLayout {
  min-height: 0;
  flex: 1;
  display: grid;
  /* ⚠ WAS 360px. The sidebar carried artwork + campaign + links + accessibility
     + export all at once, so it earned its width — but it left the artwork, the
     thing you are actually working on, in a narrow strip inside a big grey area.
     248px is the brief's figure and hands 112px straight to the canvas. */
  grid-template-columns: 248px minmax(0, 1fr) 300px;
  gap: 12px;
  padding: 10px 12px 12px;   /* trimmed from 14px all round — pure canvas height */
}

[data-tool="edm-builder"] .sidePanel,
[data-tool="edm-builder"] .studioPanel {
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

[data-tool="edm-builder"] .sidePanel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfd4dc transparent;
}

[data-tool="edm-builder"] .panelSection,
[data-tool="edm-builder"] .exportSection {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

/* shell.css has `main.app section:not(.panel){padding-top:0;padding-bottom:0}` at
   (0,2,2) — a marketing-page rule that also catches every <section> inside a tool.
   The block above is only (0,2,0), so its vertical padding was being stripped and
   "Step 1" ended up sitting 1px under the panel's top border. Re-assert at (0,3,2).
   Only vertical is restated; the 18px sides above already survive.
   Note the order: [data-tool] sits on .tool, which CONTAINS main.app — the shell
   nests .tool > main.app > .panel > .appShell > .mainLayout > section. */
[data-tool="edm-builder"] main.app section.panelSection,
[data-tool="edm-builder"] main.app section.exportSection {
  padding-top: 18px;
  padding-bottom: 18px;
}

[data-tool="edm-builder"] .exportSection {
  border-bottom: 0;
  background: #fcfcfd;
}

[data-tool="edm-builder"] .sectionHeading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

[data-tool="edm-builder"] .sectionHeading.compact {
  margin-bottom: 12px;
}

[data-tool="edm-builder"] .sectionHeading h2 {
  margin-top: 2px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

[data-tool="edm-builder"] .eyebrow {
  display: block;
  color: var(--purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

[data-tool="edm-builder"] .imageMeta,
[data-tool="edm-builder"] .countPill {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

[data-tool="edm-builder"] .countPill {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple);
}

[data-tool="edm-builder"] .dropZone {
  min-height: 178px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
  transition:
  border-color 160ms ease,
  background 160ms ease,
  transform 160ms ease;
}

[data-tool="edm-builder"] .dropZone.dragover {
  border-color: var(--purple);
  background: var(--purple-soft);
  transform: translateY(-1px);
}

[data-tool="edm-builder"] .uploadGlyph {
  width: 34px;
  height: 34px;
  margin-bottom: 9px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--purple);
  font-size: 18px;
  font-weight: 700;
}

[data-tool="edm-builder"] .dropZone strong {
  font-size: 13px;
}

[data-tool="edm-builder"] .dropZone > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

[data-tool="edm-builder"] input[type="file"] {
  display: none;
}

[data-tool="edm-builder"] .button,
[data-tool="edm-builder"] .toolButton,
[data-tool="edm-builder"] .iconButton,
[data-tool="edm-builder"] .modalClose,
[data-tool="edm-builder"] .textButton,
[data-tool="edm-builder"] .removeAreaButton {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  transition:
  background 140ms ease,
  color 140ms ease,
  border-color 140ms ease,
  transform 140ms ease;
}

[data-tool="edm-builder"] .button:active,
[data-tool="edm-builder"] .toolButton:active,
[data-tool="edm-builder"] .iconButton:active {
  transform: translateY(1px);
}

[data-tool="edm-builder"] .button {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  white-space: nowrap;
}

[data-tool="edm-builder"] .buttonPrimary {
  background: var(--purple);
  color: #fff;
}

[data-tool="edm-builder"] .buttonPrimary:hover {
  background: var(--purple-dark);
}

[data-tool="edm-builder"] .buttonDark {
  background: var(--ink);
  color: #fff;
}

[data-tool="edm-builder"] .buttonDark:hover {
  background: #27324a;
}

[data-tool="edm-builder"] .buttonGhost,
[data-tool="edm-builder"] .buttonSubtle {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

[data-tool="edm-builder"] .buttonGhost:hover,
[data-tool="edm-builder"] .buttonSubtle:hover {
  background: var(--panel);
}

[data-tool="edm-builder"] .chooseButton {
  width: 148px;
  min-height: 36px;
  margin-top: 13px;
  font-size: 12px;
}

[data-tool="edm-builder"] .textButton {
  margin-top: 9px;
  padding: 2px 4px;
  background: transparent;
  color: var(--purple);
  font-size: 11px;
}

[data-tool="edm-builder"] .textButton:hover {
  color: var(--purple-dark);
  text-decoration: underline;
}

[data-tool="edm-builder"] .fullWidth {
  width: 100%;
}

[data-tool="edm-builder"] .largeButton {
  min-height: 46px;
  font-size: 13px;
  /* `.button` sets white-space:nowrap, so once the sidebar narrowed to 248px the
     download label overflowed its own rounded corner by 13px. This is min-height
     rather than height, so a label that needs two lines grows the button instead
     of spilling out of it. */
  white-space: normal;
  line-height: 1.25;
}

[data-tool="edm-builder"] #restoreImageBtn {
  margin-top: 10px;
}

[data-tool="edm-builder"] .field {
  display: block;
  margin-top: 12px;
}

[data-tool="edm-builder"] .field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

[data-tool="edm-builder"] .field em {
  color: var(--teal);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-tool="edm-builder"] .field input,
[data-tool="edm-builder"] .areaField input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}

[data-tool="edm-builder"] .field input:hover,
[data-tool="edm-builder"] .areaField input:hover {
  border-color: #98a2b3;
}

[data-tool="edm-builder"] .field small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

[data-tool="edm-builder"] .sectionHint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

[data-tool="edm-builder"] .linkModeBlock {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fcfcfd;
}

[data-tool="edm-builder"] .linkModeHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

[data-tool="edm-builder"] .linkModeHeading strong,
[data-tool="edm-builder"] .linkModeHeading span {
  display: block;
}

[data-tool="edm-builder"] .linkModeHeading strong {
  color: var(--ink);
  font-size: 11px;
}

[data-tool="edm-builder"] .linkModeHeading div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

[data-tool="edm-builder"] .linkTypeBadge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-tool="edm-builder"] .sliceBadge {
  background: #eff8ff;
  color: #175cd3;
}

[data-tool="edm-builder"] .areaBadge {
  background: var(--purple-soft);
  color: var(--purple);
}

[data-tool="edm-builder"] .linkModeDivider {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #98a2b3;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

[data-tool="edm-builder"] .linkModeDivider::before,
[data-tool="edm-builder"] .linkModeDivider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

[data-tool="edm-builder"] .sliceLinkList,
[data-tool="edm-builder"] .clickAreaList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-tool="edm-builder"] .emptyList {
  padding: 15px;
  border-radius: 9px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

[data-tool="edm-builder"] .clickAreaCard {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

[data-tool="edm-builder"] .clickAreaCard.selected {
  border-color: #5b93f6;
  box-shadow: 0 0 0 3px rgba(105, 65, 198, 0.08);
}

[data-tool="edm-builder"] .sliceLinkCard {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition:
  border-color 140ms ease,
  box-shadow 140ms ease,
  background 140ms ease;
}

[data-tool="edm-builder"] .sliceLinkCard.enabled {
  border-color: #84caff;
  background: #f5fbff;
}

[data-tool="edm-builder"] .sliceLinkCard.selected {
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
}

[data-tool="edm-builder"] .sliceLinkSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-tool="edm-builder"] .sliceLinkName strong,
[data-tool="edm-builder"] .sliceLinkName span {
  display: block;
}

[data-tool="edm-builder"] .sliceLinkName strong {
  color: var(--ink);
  font-size: 11px;
}

[data-tool="edm-builder"] .sliceLinkName span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

[data-tool="edm-builder"] .sliceLinkToggle {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

[data-tool="edm-builder"] .sliceLinkToggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1570ef;
  cursor: pointer;
}

[data-tool="edm-builder"] .sliceLinkFields {
  margin-top: 9px;
  padding-top: 2px;
  border-top: 1px solid #d1e9ff;
}

[data-tool="edm-builder"] .sliceLinkFields .areaField:first-child {
  margin-top: 7px;
}

[data-tool="edm-builder"] .sliceUrlHint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

[data-tool="edm-builder"] .areaCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

[data-tool="edm-builder"] .areaCardHeader > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

[data-tool="edm-builder"] .areaCardHeader strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pairs with the number drawn on the canvas badge. Beats the generic
   `.areaCardHeader span` rule below, which would otherwise grey it out. */
[data-tool="edm-builder"] .areaCardHeader .areaNumber {
  flex: none;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #0e9384;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

[data-tool="edm-builder"] .clickAreaCard.selected .areaNumber {
  background: #0d5fe8;
}

[data-tool="edm-builder"] .areaCardHeader span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

[data-tool="edm-builder"] .removeAreaButton {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fef3f2;
  color: var(--danger);
}

[data-tool="edm-builder"] .removeAreaButton:hover {
  background: var(--danger);
  color: #fff;
}

[data-tool="edm-builder"] .removeSliceButton {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: #fef3f2;
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
[data-tool="edm-builder"] .removeSliceButton:hover {
  background: var(--danger);
  color: #fff;
}

[data-tool="edm-builder"] .areaField {
  display: block;
  margin-top: 8px;
}

[data-tool="edm-builder"] .areaField > span,
[data-tool="edm-builder"] .geometryField > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-tool="edm-builder"] .areaField input {
  height: 34px;
}

[data-tool="edm-builder"] .geometryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

[data-tool="edm-builder"] .geometryField input {
  width: 100%;
  height: 30px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 10px;
}

[data-tool="edm-builder"] .exportSection .button + .button {
  margin-top: 8px;
}

[data-tool="edm-builder"] .downloadBtn-pro,
[data-tool="edm-builder"] .button.is-pro-locked::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f521";
  margin-right: 8px;
}
[data-tool="edm-builder"] .exportProNote {
  margin: 9px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--purple-soft);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
[data-tool="edm-builder"] .exportProNote i {
  color: #dc6803;
  margin-right: 4px;
}
[data-tool="edm-builder"] .edmProLink {
  border: 0;
  padding: 0;
  background: none;
  color: var(--purple);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
[data-tool="edm-builder"] .exportNote {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

[data-tool="edm-builder"] .studioPanel {
  display: flex;
  flex-direction: column;
}

[data-tool="edm-builder"] .toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;                 /* wraps by itself when the column is narrow — never a scroller */
  align-items: center;
  gap: 6px 8px;
  padding: 7px 10px;               /* tight: two rows are honest at a ~510px centre column */
  border-bottom: 1px solid var(--line);
  background: #fff;
}

[data-tool="edm-builder"] .toolGroup,
[data-tool="edm-builder"] .zoomControls {
  gap: 6px;
}

[data-tool="edm-builder"] .toolButton,
[data-tool="edm-builder"] .iconButton {
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  white-space: nowrap;
}

[data-tool="edm-builder"] .toolButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-tool="edm-builder"] .toolButton span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

[data-tool="edm-builder"] .toolButton:hover,
[data-tool="edm-builder"] .iconButton:hover {
  background: var(--panel);
}

[data-tool="edm-builder"] .toolButton.active {
  border-color: #9dc0fb;
  background: var(--purple-soft);
  color: var(--purple-dark);
}

[data-tool="edm-builder"] .toolButton.active span {
  color: var(--purple);
}

[data-tool="edm-builder"] .iconButton {
  border-color: var(--line);
  background: #fff;
}

[data-tool="edm-builder"] .iconButton.square {
  width: 34px;
  padding: 0;
  font-size: 17px;
}

/* .square's 17px was sized for the − and + zoom glyphs, which still need it. A Font
   Awesome glyph at that size reads as oversized next to the rest of the toolbar. */
[data-tool="edm-builder"] .iconButton .fa-solid {
  font-size: 12.5px;
}

/* Replaces the inline opacity updateUndoButtons() used to set. Matches .va-ib
   [disabled] in video.css so undo/redo greys out the same way suite-wide. */
[data-tool="edm-builder"] .iconButton:disabled {
  opacity: 0.32;
  pointer-events: none;
}

[data-tool="edm-builder"] .toolDivider {
  /* ⚠ WAS flex:0 0 100% — a deliberate wrap-break putting the primary tools on row 1
     and everything else on row 2. That cost ~54px of canvas height for a toolbar whose
     content (≈700px) fits the centre column (≈836px) on ONE row. It is a real 1px rule
     now; the toolbar still wraps by itself when the column genuinely gets narrow. */
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  align-self: center;
  background: var(--line);
  margin: 0 2px;
}

[data-tool="edm-builder"] .toolbarSpacer {
  flex: 1 1 12px;                  /* absorbs slack on row 2 → right-aligns zoom + View code */
  height: 0;
  margin: 0;
}

[data-tool="edm-builder"] .zoomControls {
  height: 36px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

[data-tool="edm-builder"] .zoomControls .iconButton {
  width: 28px;
  height: 28px;
  border: 0;
}

[data-tool="edm-builder"] #zoomLevel {
  min-width: 42px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

[data-tool="edm-builder"] .codeButton {
  min-height: 36px;
  font-size: 11px;
}

[data-tool="edm-builder"] .canvasFrame {
  min-height: 0;
  flex: 1;
  position: relative;
  overflow: auto;
  background-color: var(--canvas);
  background-image:
  linear-gradient(rgba(71, 84, 103, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(71, 84, 103, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: grab;
  overscroll-behavior: contain;
}

[data-tool="edm-builder"] .canvasFrame.grabbing {
  cursor: grabbing;
}

[data-tool="edm-builder"] .workspace {
  width: 3200px;
  height: 4200px;
  position: relative;
}

[data-tool="edm-builder"] .artboard {
  position: absolute;
  top: 72px;
  left: 88px;
  transform-origin: top left;
  background: #fff;
  box-shadow:
  0 0 0 1px rgba(16, 24, 40, 0.08),
  0 24px 60px rgba(16, 24, 40, 0.18);
}

[data-tool="edm-builder"] #mainCanvas {
  display: block;
  touch-action: none;
  user-select: none;
}

[data-tool="edm-builder"] .canvasEmptyState {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

[data-tool="edm-builder"] .canvasEmptyState > div {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(208, 213, 221, 0.8);
  color: #98a2b3;
  font-size: 25px;
}

[data-tool="edm-builder"] .canvasEmptyState strong {
  color: var(--ink-soft);
  font-size: 13px;
}

[data-tool="edm-builder"] .canvasEmptyState span {
  margin-top: 5px;
  font-size: 11px;
}

[data-tool="edm-builder"] .cropActions {
  position: sticky;
  left: 50%;
  bottom: 18px;
  z-index: 10;
  width: max-content;
  max-width: calc(100% - 36px);
  min-height: 48px;
  margin: 0 auto;
  padding: 6px 7px 6px 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16);
  backdrop-filter: blur(8px);
}

[data-tool="edm-builder"] .cropActions > span {
  margin-right: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

[data-tool="edm-builder"] .smallButton {
  min-height: 34px;
  padding: 0 11px;
  font-size: 11px;
}

[data-tool="edm-builder"] .statusBar {
  min-height: 28px;
  flex: 0 0 28px;
  /* The shared rule up top flexes `.statusBar > div`, never .statusBar itself — as a
     <footer> it stayed display:block, so space-between/gap/align-items below were all
     inert and .statusTip stacked under the meta row instead of sitting opposite it.
     Measured: text 2px from the top with 24px of dead space beneath. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 10px;
}

[data-tool="edm-builder"] .statusBar > div {
  gap: 14px;
  white-space: nowrap;
}

[data-tool="edm-builder"] .statusBar span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: #98a2b3;
}

/* Now that .statusBar is a real flex container this tip finally sits in the bar, and
   it overflowed by 24px. Three things were needed: min-width:0 (a flex item defaults
   to min-width:auto and won't shrink under its content), nowrap for the ellipsis, and
   display:block — the shared `.statusBar > div` rule up top made this a FLEX container,
   and text-overflow does not apply to one: the bare text becomes an anonymous flex
   item and just clips. That rule is (0,2,1), so this has to be (0,3,0) to win. */
[data-tool="edm-builder"] .statusBar > .statusTip {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-tool="edm-builder"] .modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(16, 24, 40, 0.62);
  backdrop-filter: blur(5px);
}

[data-tool="edm-builder"] .modal.open {
  display: flex;
}

[data-tool="edm-builder"] .modalCard {
  width: min(100%, 1080px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(16, 24, 40, 0.28);
}

[data-tool="edm-builder"] .codeModalCard {
  height: min(820px, 92vh);
}

[data-tool="edm-builder"] .modalHeader {
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

[data-tool="edm-builder"] .modalHeader h2 {
  margin-top: 2px;
  font-size: 18px;
}

[data-tool="edm-builder"] .modalClose {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 400;
}

[data-tool="edm-builder"] .modalClose:hover {
  background: var(--line);
}

[data-tool="edm-builder"] .codeActions {
  flex: 0 0 auto;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #fcfcfd;
}

[data-tool="edm-builder"] .codeSummary {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

[data-tool="edm-builder"] #edmCodeOutput {
  min-height: 0;
  flex: 1;
  width: 100%;
  padding: 20px;
  resize: none;
  border: 0;
  outline: 0;
  background: #111827;
  color: #d1fae5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.65;
  tab-size: 2;
}

[data-tool="edm-builder"] #livePreviewFrame {
  min-height: 0;
  flex: 1;
  width: 100%;
  display: none;
  border: 0;
  background: #f2f4f7;
}

[data-tool="edm-builder"] .helpModalCard {
  width: min(100%, 720px);
}

[data-tool="edm-builder"] .helpContent {
  padding: 8px 22px 24px;
  overflow-y: auto;
}

[data-tool="edm-builder"] .helpStep {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

[data-tool="edm-builder"] .helpStep > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
}

[data-tool="edm-builder"] .helpStep h3 {
  margin-top: 1px;
  font-size: 13px;
}

[data-tool="edm-builder"] .helpStep p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

[data-tool="edm-builder"] .compatibilityNote {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #a6f4c5;
  border-radius: 10px;
  background: #ecfdf3;
  color: #05603a;
}

[data-tool="edm-builder"] .compatibilityNote strong {
  font-size: 12px;
}

[data-tool="edm-builder"] .compatibilityNote p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
}

[data-tool="edm-builder"] .toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 200;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 15px 40px rgba(16, 24, 40, 0.26);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition:
  opacity 180ms ease,
  transform 180ms ease;
}

[data-tool="edm-builder"] .toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1220px) {
  [data-tool="edm-builder"] .mainLayout {
    grid-template-columns: 232px minmax(0, 1fr) 276px;
  }

  [data-tool="edm-builder"] .secondaryTools #resetSlicesBtn {
    font-size: 0;
    width: 34px;
    padding: 0;
  }

  [data-tool="edm-builder"] .secondaryTools #resetSlicesBtn::after {
    content: "×";
    font-size: 18px;
  }

}

@media (max-width: 920px) {
  [data-tool="edm-builder"] .appShell {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  [data-tool="edm-builder"] .appHeader {
    position: sticky;
    top: 0;
  }

  [data-tool="edm-builder"] .compatibilityBadge {
    display: none;
  }

  [data-tool="edm-builder"] .mainLayout {
    display: flex;
    flex-direction: column;
  }

  [data-tool="edm-builder"] .sidePanel {
    max-height: none;
    overflow: visible;
  }

  [data-tool="edm-builder"] .studioPanel {
    height: 720px;
  }

  [data-tool="edm-builder"] .toolbar {
    align-items: flex-start;
  }

}

@media (max-width: 620px) {
  [data-tool="edm-builder"] .appHeader {
    padding: 9px 12px;
  }

  [data-tool="edm-builder"] .brand p {
    display: none;
  }

  [data-tool="edm-builder"] .brandMark {
    width: 36px;
    height: 36px;
  }

  [data-tool="edm-builder"] .mainLayout {
    padding: 8px;
    gap: 8px;
  }

  [data-tool="edm-builder"] .sidePanel,
  [data-tool="edm-builder"] .studioPanel {
    border-radius: 12px;
  }

  [data-tool="edm-builder"] .studioPanel {
    height: 660px;
  }

  [data-tool="edm-builder"] .statusTip,
  [data-tool="edm-builder"] #statusSlices {
    display: none;
  }

  [data-tool="edm-builder"] .modal {
    padding: 8px;
  }

  [data-tool="edm-builder"] .codeActions {
    flex-wrap: wrap;
  }

  [data-tool="edm-builder"] .codeSummary {
    width: 100%;
    margin: 2px 0 0;
  }

}

/* ── DARK MODE (studio-tools shell toggle) — remap the tool's variable palette. ── */
html.dark [data-tool="edm-builder"]{
  --ink:#e6e9f0; --ink-soft:#c4ccda; --muted:#93a0b4;
  --line:#28303c; --line-strong:#3a4454;
  --surface:#141922; --canvas:#0f141c; --panel:#0f141c;
  --purple:#5b93f6; --purple-dark:#4d84ea; --purple-soft:#18202e;
  --shadow:0 18px 50px rgba(0,0,0,.5);
}
html.dark [data-tool="edm-builder"] .edm-app{ background:#0f141c; color:var(--ink); }

/* Sample sits FIRST in the header actions, matching the family's
   NAME → Sample → … order (1 → 23 HTML5, Multiframe, the resize tools).
   It borrows the ghost-button skin so it reads as a peer of Help. */
/* ── third column: the link-area inspector ──────────────────────────────
   The click-area list used to sit in the left sidebar, three sections down
   from the artwork it describes. Beside the canvas is where you actually look
   while mapping links. Same markup, same ids — only the position changed. */
[data-tool="edm-builder"] .inspPanel{
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
[data-tool="edm-builder"] .inspPanel .panelSection{border:0;margin:0}
@media (max-width: 1100px){
  [data-tool="edm-builder"] .mainLayout{grid-template-columns:minmax(0,1fr)}
  [data-tool="edm-builder"] .inspPanel{max-height:360px}
}