/* SGM-212 — Email template editor + list page styling.
 * Design analysis lives in the 4 mockups at ~/.claude/mockups/safegtm/2026-04-28-email-*.html
 * Token map: every value below maps to var(--*) from public/css/app.css (brand tokens).
 * No raw hex outside the SafePaaS palette already defined in tokens.
 */

/* ── List page ─────────────────────────────────────────────── */
.et-page-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.tpl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.15s; cursor: pointer; position: relative; }
.tpl-card:hover { box-shadow: var(--shadow-md); }
.tpl-thumb { background: linear-gradient(180deg, #fafafa, #eaeaea); height: 160px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); overflow: hidden; }
.tpl-thumb.kind-plain { background: #fafafa; }

/* SGM-433 (2026-05-14): HTML kind shows a real scaled preview via iframe.
   Reset the default flex/padding so the iframe can fill the thumb area.
   The iframe is rendered at the canvas's native 640px width and scaled to
   ~0.5× via CSS transform so it visually fits the ~320px card. Wider cards
   leave a small right-side gap; narrower cards clip the right edge — both
   acceptable for a preview. pointer-events:none keeps the card itself the
   click target (no clicking-through-iframe needed). */
.tpl-thumb.tpl-thumb-html { padding: 0; background: #ffffff; display: block; }
.tpl-thumb-iframe {
  border: 0;
  width: 640px;
  height: 640px;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
  display: block;
  background: #ffffff;
}
.tpl-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
}

.thumb-line { height: 6px; background: rgba(0,0,0,0.08); border-radius: 3px; }
.thumb-line.heading { height: 10px; background: rgba(88,136,157,0.4); width: 70%; }
.thumb-line.short { width: 50%; }
.thumb-line.medium { width: 80%; }
.thumb-line.image { height: 50px; background: rgba(0,0,0,0.06); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 18px; }
.thumb-line.button { height: 22px; width: 90px; background: var(--primary); border-radius: 4px; }
.tpl-card.kind-plain .thumb-line { background: rgba(0,0,0,0.10); height: 5px; }
.tpl-meta { padding: 12px 16px; }
.tpl-name { font-weight: 700; font-size: 14px; margin: 0 0 6px; color: var(--text); }
.tpl-info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.tpl-edited { font-size: 11px; color: var(--text-dim); }
.kind-pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.kind-pill.html { background: var(--primary-bg); color: var(--primary); }
.kind-pill.plain { background: var(--bg-card-hover); color: var(--text-muted); }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.status-draft { background: var(--bg-card-hover); color: var(--text-muted); }
.status-published { background: var(--success-bg); color: var(--success); }
.status-archived { background: var(--bg-card-hover); color: var(--text-dim); }
.usage-stat { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tpl-card-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.tpl-card:hover .tpl-card-actions { display: flex; }
.tpl-card-actions .btn { padding: 4px 8px; }
.et-empty-list { text-align: center; padding: 60px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 16px; }
.et-empty-list h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.et-empty-list p { margin: 0; color: var(--text-secondary); max-width: 46ch; margin-left: auto; margin-right: auto; font-size: 13px; }

/* Modal — kind picker + starter picker */
.kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-card { padding: 18px 16px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg-card); transition: all 0.15s; }
.kind-card.selected { border-color: var(--primary); background: var(--primary-bg); }
.kind-card:hover { border-color: var(--primary-border); }

.starter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px; }
.starter-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg-card); transition: all 0.15s; }
.starter-card:hover { border-color: var(--primary-border); }
.starter-card.selected { border-color: var(--primary); background: var(--primary-bg); }
.starter-card.ai-card { border: 2px dashed rgba(128,161,74,0.4); background: linear-gradient(180deg, rgba(128,161,74,0.05), var(--bg-card)); }
.starter-card.ai-card.selected { border-color: var(--accent); background: var(--accent-bg); border-style: solid; }
.starter-preview { background: linear-gradient(180deg, #fafafa, #eaeaea); padding: 10px; border-radius: 4px; height: 80px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; overflow: hidden; }
.ai-thumb { background: linear-gradient(180deg, rgba(128,161,74,0.10), rgba(128,161,74,0.04)); padding: 10px; border-radius: 4px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 8px; }
.blank-thumb { background: #fafafa; padding: 10px; border-radius: 4px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; font-style: italic; margin-bottom: 8px; border: 1px dashed rgba(0,0,0,0.10); }
.prev-l { height: 4px; background: rgba(0,0,0,0.10); border-radius: 2px; }
.prev-l.h { background: rgba(88,136,157,0.4); height: 6px; width: 60%; }
.prev-l.short { width: 50%; }
.prev-l.b { background: var(--primary); width: 40px; height: 12px; border-radius: 3px; }
.prev-l.img { background: rgba(0,0,0,0.05); height: 18px; }
.starter-card h5 { margin: 0; font-size: 12px; font-weight: 700; }
.starter-card .desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ── Editor shell ─────────────────────────────────────────── */
/* PR — sticky chrome, scrollable canvas (Maddy 2026-05-12 06:40, +SGM-425 2026-05-13):
   scrolling the editor used to scroll the whole page. Now the shell
   fills the available vertical space, chrome sections stay fixed at
   top, and only the canvas-wrap (and the right inspector) scroll.
   The min-height:0 on each flex column is required to override flex's
   default min-height:auto so children can shrink + scroll.

   SGM-425: the original fix didn't account for #content (the SPA's
   page wrapper) which has its own overflow-y:auto + padding. When
   the editor is the active page, neutralize #content so the editor's
   flex chain owns the viewport. Scoped via :has() so other pages
   keep their normal scroll behavior.

   SGM-426: tightened the :has() marker from :not(.hidden) to .et-shell.
   The SPA reuses the SAME #email-templates-page div for both the editor
   AND the templates list view (content swaps inside; .hidden never
   toggles on either). .et-shell is rendered only by the editor's mount()
   — it's a clean editor-presence signal, so the override only fires when
   the editor is actually mounted, not on the list view. */
#content:has(> #email-templates-page > .et-shell) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#email-templates-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.et-shell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.et-shell > .et-top,
.et-shell > .et-subject-bar,
.et-shell > .et-piece-bar { flex-shrink: 0; }
.et-shell > .et-body { flex: 1 1 auto; min-height: 0; }
.et-body > .et-canvas-wrap { min-height: 0; }
.et-body > .et-edit-panel { min-height: 0; }
.et-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--bg); gap: 16px; flex-wrap: wrap; }
.et-top-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.et-crumb { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.et-crumb:hover { color: var(--primary); }
.et-name-input { font-weight: 700; font-size: 16px; color: var(--text); border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; background: transparent; min-width: 200px; max-width: 320px; }
.et-name-input:hover { border-color: var(--border); background: var(--bg-card); }
.et-name-input:focus { border-color: var(--primary); background: var(--bg-input); outline: none; }
.et-saved-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; color: var(--success); background: var(--success-bg); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.et-saved-pill .et-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.et-saved-pill .et-dot.saving { background: var(--warning); animation: et-pulse 1.4s infinite; }
@keyframes et-pulse { 50% { opacity: 0.4; } }
.et-kind-badge { font-size: 10px; padding: 2px 8px; background: var(--bg-card-hover); color: var(--text-muted); border-radius: 999px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.et-top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.et-preview-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.et-pt-btn { padding: 5px 10px; font-size: 12px; font-weight: 600; background: var(--bg-card); border: none; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.et-pt-btn.active { background: var(--primary); color: white; }

.et-subject-bar { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.et-field { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.et-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); width: 80px; flex-shrink: 0; }
.et-input { flex: 1; padding: 6px 10px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; background: transparent; font-family: inherit; }
.et-input:hover { border-color: var(--border); background: var(--bg); }
.et-input:focus { border-color: var(--primary); background: var(--bg-input); outline: none; box-shadow: 0 0 0 3px var(--primary-bg); }
.et-hint { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }

/* SGM-347 Phase 2: pieces toolbar (replaces left palette).
 * Sits between subject-bar and canvas. Frees ~200px of editing width
 * that was eaten by the vertical .et-pieces-panel. Each piece is a
 * compact icon+label button; click → _appendBlock(type) at canvas end. */
.et-piece-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.et-piece-bar-pieces { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.et-piece-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); font-size: 12px; color: var(--text-secondary); cursor: pointer; min-height: 32px; font-family: inherit; }
.et-piece-btn:hover { background: var(--bg-card-hover); border-color: var(--border); }
.et-piece-btn:active { background: var(--primary-bg); border-color: var(--primary-border); }
.et-piece-btn-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }

/* SGM-362 Phase 4: score badge in the top piece-bar. Compact display of
 * Coach overall + open-after-summary scores. Click → opens Coach drawer.
 * Tone-driven coloring via [data-tone] (ok/warn/fail/idle). */
.et-piece-bar-actions { display: flex; gap: 8px; align-items: center; }
.et-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  border-radius: var(--radius-full);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
  transition: background var(--transition);
}
.et-score-badge:hover { background: var(--bg-card-hover); }
.et-score-badge[data-tone="warn"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.et-score-badge[data-tone="fail"] { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.et-score-badge[data-tone="idle"] { background: var(--bg-card-hover); border-color: var(--border); color: var(--text-muted); }
.et-score-badge-num { font-size: 13px; font-weight: 700; }
.et-score-badge-pct { font-size: 10px; font-weight: 500; opacity: 0.7; margin-left: 1px; }
.et-score-badge-sep { width: 1px; height: 12px; background: currentColor; opacity: 0.3; }
.et-score-badge i { opacity: 0.65; }

/* SGM-362 Phase 4: Coach as slide-in drawer.
 * Position fixed on the right edge, transform-translated off-screen by
 * default. data-open="true" slides it in. Backdrop covers the canvas
 * when drawer is open (visual signal + click-to-close). */
.et-coach-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: 950;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.et-coach-drawer[data-open="true"] { transform: translateX(0); }
.et-coach-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.et-coach-drawer-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.et-coach-drawer-close {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.et-coach-drawer-close:hover { background: var(--bg-card-hover); border-color: var(--border); color: var(--text); }
.et-coach-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.et-coach-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 940;
}
.et-coach-drawer-backdrop[hidden] { display: none; }

/* SGM-362 Phase 4: body is now ALWAYS 2-column (canvas + edit-panel) —
 * Coach is moved to a slide-in drawer (rules above). The .with-coach class
 * is kept on the markup for backward CSS-cache compat but no longer adds
 * a 4th column. Drawer is fixed-position outside the body grid entirely. */
.et-body { display: grid; grid-template-columns: 1fr 280px; min-height: 540px; background: var(--bg); }
.et-body.with-coach { grid-template-columns: 1fr 280px; }
.et-body.with-coach .et-coach-column { display: none; }

/* SGM-352 (reverted by SGM-427 hotfix 2026-05-13 17:38 IST):
 * Originally hid the edit-panel when a paragraph block was selected, on
 * the assumption that all paragraph formatting happens inline via the
 * Quill bubble toolbar. That assumption broke with SGM-427 which added
 * paddingY (Spacing dropdown) + block-level alignment row to the
 * inspector — neither of which is in the bubble toolbar. With the panel
 * hidden, marketers couldn't access these controls for paragraph blocks.
 * The bubble toolbar's per-paragraph alignment wrote inline text-align
 * styles that masked the wrapper alignment, and the inspector left-align
 * button (the canonical block-level override) was inaccessible.
 *
 * Fix: drop the hide rule + keep the standard grid columns. The inspector
 * always shows for the selected block type. The "Edit text inline" hint
 * still appears in the inspector body for paragraphs (see editor.js's
 * paragraph case in _renderEditPanel) directing users to the canvas
 * for typing while keeping alignment + spacing controls accessible. */
/* Legacy classes retained — no longer rendered (SGM-347 replaces them with
 * .et-piece-bar above). Leaving rules in place as a safety net for any
 * cached page or third-party embed loading the older HTML shape. */
.et-pieces-panel { background: var(--bg-card); border-right: 1px solid var(--border); padding: 14px; overflow-y: auto; }
.et-pieces-panel h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.et-pieces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.et-piece-card { padding: 12px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); text-align: center; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--primary); }
.et-piece-card:hover { border-color: var(--primary); background: var(--primary-bg); }
.et-piece-label { font-size: 11px; font-weight: 600; color: var(--text); }
.et-tip { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Canvas */
.et-canvas-wrap { padding: 24px; overflow: auto; background: linear-gradient(180deg, #f5f5f5, #ebebeb); display: flex; flex-direction: column; align-items: center; }
/* SGM-432 (2026-05-13): canvas width 600 → 640 (modern B2B marketing
   email standard, matches BRAND.canvasWidth in compile.js). WYSIWYG
   invariant requires editor canvas width to mirror compiled email
   wrapping-table width. */
.et-canvas { background: #fff; max-width: 640px; width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: max-width 0.2s; }
.et-canvas.mobile { max-width: 360px; }
.et-block { padding: 12px 32px; cursor: pointer; border: 2px solid transparent; position: relative; }
/* SGM-427 (2026-05-13): per-block-type padding parity with compile.js.
   The universal .et-block padding above is the default; these overrides
   match the exact values compile.js emits on each block's <td style="padding:...">.
   Without this, the editor frame visually understates (paragraph) or
   overstates (button/footer) the spacing the recipient will see.
   WYSIWYG invariant — every css/canvas value must mirror the compile literal. */
.et-block[data-block-type="paragraph"] { padding: 8px 32px; }
.et-block[data-block-type="button"] { padding: 16px 32px; }
.et-block[data-block-type="footer"] { padding: 24px 32px; }
/* SGM-429 (2026-05-13): heading color picker inspector control. Native
   <input type="color"> + a row of brand-preset swatches. The presets cover
   90% of B2B email heading color needs (default text, brand primary/accent,
   secondary, muted); native picker handles the rest. */
.et-color-row { display: flex; align-items: center; gap: 8px; }
.et-color-input { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: transparent; flex-shrink: 0; }
.et-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.et-color-input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.et-color-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.et-color-swatch { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
.et-color-swatch:hover { transform: scale(1.1); border-color: var(--border); }
.et-color-swatch.active { border-color: var(--primary); transform: scale(1.1); }
.et-block.selected { border-color: var(--primary); }
.et-block.selected::after { content: "Editing"; position: absolute; top: -10px; left: 8px; background: var(--primary); color: white; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; }
.et-block:hover { border-color: rgba(88,136,157,0.3); }
.et-block-controls { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; z-index: 2; }
.et-block.selected .et-block-controls { display: flex; }
.et-block-controls button { width: 24px; height: 24px; padding: 0; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; font-size: 11px; color: var(--text); }
.et-block-controls button:hover { background: var(--primary-bg); }
/* SGM-327: drag handle in block controls — dotted-grid glyph, grab cursor */
.et-drag-handle { width: 24px; height: 24px; padding: 0; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; cursor: grab; font-size: 14px; color: var(--text-muted); user-select: none; }
.et-drag-handle:hover { background: var(--primary-bg); color: var(--primary); }
.et-drag-handle:active { cursor: grabbing; }
/* SGM-327: drag-source visual — half-transparent while being dragged */
.et-block.dragging { opacity: 0.4; cursor: grabbing; }
/* SGM-327: drop-zone highlight — pulses the insert line so the user sees where the block will land */
.et-canvas .et-insert-line.drop-target { opacity: 1 !important; padding: 12px 32px; transition: padding 0.1s, background 0.1s; background: var(--primary-bg); border-top: 2px dashed var(--primary); border-bottom: 2px dashed var(--primary); }
.et-canvas .et-insert-line.drop-target .et-add-piece-btn { background: var(--primary); color: white; border-style: solid; border-color: var(--primary); }

/* SGM-327: image upload drop zone in the image-block edit panel */
.et-image-drop-zone {
  border: 2px dashed var(--border-light);
  border-radius: 6px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--bg-input);
  margin-top: 4px;
}
.et-image-drop-zone:hover { border-color: var(--primary); background: var(--primary-bg); }
.et-image-drop-zone.drop-target { border-color: var(--primary); background: var(--primary-bg); border-style: solid; }
.et-image-drop-zone.uploading { opacity: 0.6; pointer-events: none; }
.et-image-drop-icon { font-size: 22px; color: var(--text-muted); margin-bottom: 6px; }
.et-image-drop-zone:hover .et-image-drop-icon, .et-image-drop-zone.drop-target .et-image-drop-icon { color: var(--primary); }
.et-image-drop-text { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.4; }
.et-image-drop-text span { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.et-image-drop-hint { font-size: 9px; color: var(--text-dim); margin-top: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; }

/* SGM-327: undo/redo button cluster in editor top bar */
.et-undo-redo { display: inline-flex; gap: 2px; margin-right: 4px; }
.et-history-btn { width: 26px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s, color 0.1s, opacity 0.1s; }
.et-history-btn:hover:not(:disabled) { background: var(--primary-bg); color: var(--primary); border-color: var(--primary-border); }
.et-history-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.et-merge-chip { display: inline-block; padding: 1px 6px; background: rgba(88,136,157,0.15); color: #58889D; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.et-img-fallback { background: #f0f0f0; height: 200px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; border-radius: 4px; }
.et-insert-line { padding: 6px 32px; text-align: center; opacity: 0; transition: opacity 0.15s; }
.et-canvas:hover .et-insert-line { opacity: 1; }
.et-add-piece-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 12px; border: 1px dashed var(--primary-border); border-radius: 999px; color: var(--primary); cursor: pointer; background: transparent; }
.et-add-piece-btn:hover { background: var(--primary-bg); border-style: solid; }
.et-empty-canvas { padding: 60px 24px; text-align: center; }
.et-empty-canvas h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.et-empty-canvas p { margin: 0 auto; font-size: 12px; color: var(--text-secondary); max-width: 32ch; }

/* Edit panel */
.et-edit-panel { background: var(--bg-card); border-left: 1px solid var(--border); padding: 14px; overflow-y: auto; }
.et-edit-panel h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.et-no-selection { text-align: center; padding: 24px 8px; }
.et-no-selection p { font-size: 12px; color: var(--text-muted); margin: 0; }
.et-selected-piece { padding: 8px 12px; background: var(--primary-bg); border: 1px solid var(--primary-border); border-radius: 6px; margin-bottom: 14px; font-size: 12px; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.et-field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.et-field-group label { font-size: 11px; font-weight: 600; color: var(--text); }
.et-block-input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; font-family: inherit; background: var(--bg-input); }
.et-block-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-bg); }
textarea.et-block-input { min-height: 80px; resize: vertical; }
.et-alignment-row { display: flex; gap: 4px; }
.et-alignment-row button { flex: 1; padding: 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 14px; }
.et-alignment-row button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Insert/merge popovers */
.et-insert-popover, .et-merge-popover { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px 0; min-width: 200px; z-index: 1000; }
.et-insert-item { padding: 8px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--text); }
.et-insert-item:hover { background: var(--primary-bg); color: var(--primary); }
.et-merge-item { padding: 7px 14px; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.et-merge-item:hover { background: var(--primary-bg); }
.et-merge-item code { font-size: 11px; color: var(--text-muted); }

/* Plain-text editor body — kept for legacy CSS resilience; SGM-320
 * removed the PlainTextEditor JS component, but campaign-side previews
 * still reference these classes via inbox-preview.js, and the campaign
 * wizard's plain-mode preview path uses .et-plain-textarea structurally. */
.et-plain-body { padding: 28px 40px 60px; max-width: 720px; margin: 0 auto; }
.et-plain-textarea { padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.7; resize: vertical; min-height: 320px; width: 100%; background: var(--bg-input); color: var(--text); }
.et-plain-textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-bg); }
.et-merge-tag-bar { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 6px 12px; background: var(--bg); border: 1px dashed var(--border); border-radius: 6px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.et-tag-btn { padding: 2px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; color: var(--text); font-size: 11px; }
.et-tag-btn:hover { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary); }

/* SGM-350 Phase 3 — inline paragraph editor (Quill bubble theme).
 * The .et-paragraph-rte div is a placeholder in the canvas that Quill
 * mounts onto after _reRenderCanvas (see _mountInlineParagraphRTEs in
 * editor.js). Bubble theme floats the toolbar above the selection.
 * Strips Quill's default padding so the canvas paragraph reads as the
 * actual rendered email paragraph, not a nested "editor card." */
.et-paragraph-rte { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
/* SGM-427 follow-up (2026-05-13 17:11 IST): text-align: inherit. Without
   this, Quill's .ql-editor has its own text-align that masks the wrapper's
   style="text-align:..." (set by canvas render + alignment-button click).
   Result: clicking left-align wrote b.align="left" but visible alignment
   didn't update. inherit makes the wrapper text-align cascade into Quill
   content — fixes the "paragraph still centered" report after hotfix. */
.et-paragraph-rte .ql-editor { padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; text-align: inherit; }
/* SGM-427 hotfix (2026-05-13 18:40 IST): force text-align inheritance on
   <p>/<li>/<h*> descendants of the Quill .ql-editor. Without !important,
   Quill bubble theme stylesheet's own .ql-editor p { text-align: ... }
   rule wins via specificity (0,1,1) over our generic descendant rule.
   With !important the wrapper's text-align (set inline from b.align) is
   the authoritative source. Per-paragraph alignment via bubble toolbar
   still works — it writes inline text-align on the specific element with
   even-higher inline-style precedence vs the !important on descendants
   (inline styles still beat !important from external stylesheets per spec
   when the inline style is on the SAME element being styled). */
.et-paragraph-rte .ql-editor p,
.et-paragraph-rte .ql-editor li,
.et-paragraph-rte .ql-editor h1,
.et-paragraph-rte .ql-editor h2,
.et-paragraph-rte .ql-editor h3,
.et-paragraph-rte .ql-editor ol,
.et-paragraph-rte .ql-editor ul {
  text-align: inherit;
}
.et-paragraph-rte .ql-editor.ql-blank::before { font-style: normal; color: var(--text-dim); font-size: 14px; left: 0; right: 0; }
.et-paragraph-rte p { margin: 0 0 8px; }
.et-paragraph-rte p:last-child { margin-bottom: 0; }
.et-paragraph-rte a { color: var(--primary); text-decoration: underline; }
.rte-inline-fallback { min-height: 1.6em; outline: none; }

/* SGM-358 — Quill 2.x bubble theme overrides (LIGHT, brand-aligned).
 * SGM-356 attempted these but lost the cascade because quill.bubble.css
 * loads AFTER email-editor.css in index.html (line 18 vs line 11). For
 * equal-specificity selectors, later source wins. Adding !important
 * forces our brand tokens to win regardless of load order. */
.ql-bubble .ql-tooltip {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  /* SGM-427 hotfix (2026-05-13 19:00 IST): bubble toolbar was rendering
     behind editor chrome (piece-bar, subject-bar, top-bar) due to default
     z-index ~1 from Quill's bubble theme stylesheet. Push above all
     editor surfaces (et-piece-bar is the highest interactive layer at
     no explicit z-index; using 1000 to comfortably clear it and any
     other implicit-z-index siblings). */
  z-index: 1000 !important;
}
.ql-bubble .ql-tooltip-arrow { border-bottom-color: var(--bg-card) !important; }
.ql-bubble .ql-stroke { stroke: var(--text) !important; }
.ql-bubble .ql-fill, .ql-bubble .ql-stroke.ql-fill { fill: var(--text) !important; }
.ql-bubble .ql-active .ql-stroke,
.ql-bubble button:hover .ql-stroke,
.ql-bubble .ql-picker-label.ql-active .ql-stroke,
.ql-bubble .ql-picker-label:hover .ql-stroke { stroke: var(--primary) !important; }
.ql-bubble .ql-active .ql-fill,
.ql-bubble button:hover .ql-fill,
.ql-bubble .ql-picker-label.ql-active .ql-fill,
.ql-bubble .ql-picker-label:hover .ql-fill { fill: var(--primary) !important; }
.ql-bubble .ql-picker-label { color: var(--text) !important; }
.ql-bubble .ql-picker-label:hover { color: var(--primary) !important; }
.ql-bubble .ql-picker-options {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  /* SGM-427 hotfix: picker dropdowns (font/size/color) need to clear the
     bubble tooltip itself (1000) AND any other editor chrome. */
  z-index: 1001 !important;
}
.ql-bubble .ql-picker-item { color: var(--text) !important; }
.ql-bubble .ql-picker-item:hover { color: var(--primary) !important; }
/* Link tooltip (preview + edit modes) — input field on light background */
.ql-bubble .ql-tooltip input[type=text] {
  color: var(--text) !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px;
  padding: 4px 8px;
}
.ql-bubble .ql-tooltip input[type=text]:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 2px var(--primary-bg); }
.ql-bubble .ql-tooltip a { color: var(--primary) !important; }
.ql-bubble .ql-tooltip a.ql-action::after,
.ql-bubble .ql-tooltip a.ql-remove::before { color: var(--text-muted) !important; }
.ql-bubble .ql-tooltip a.ql-action:hover::after,
.ql-bubble .ql-tooltip a.ql-remove:hover::before { color: var(--primary) !important; }
.ql-bubble .ql-mergetag-label {
  display: inline-block;
  padding: 1px 7px;
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family-app);
}

/* SGM-361: custom link popover (replaces Quill bubble's built-in link
 * tooltip). White card, brand input + Save/Cancel buttons, Enter/Escape
 * keyboard support. Pure DOM — no Quill internals. */
.rte-link-popover {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  min-width: 360px;
  font-family: var(--font-family-app);
}
.rte-link-popover-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rte-link-popover-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.rte-link-popover-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-bg);
}
.rte-link-popover-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  min-height: 34px;
}
.rte-link-popover-save {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.rte-link-popover-save:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rte-link-popover-cancel {
  background: var(--bg-card);
  color: var(--text-secondary);
}
.rte-link-popover-cancel:hover { background: var(--bg-card-hover); color: var(--text); }
.rte-link-popover-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.rte-link-popover-hint kbd {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

/* SGM-359: force tooltip visibility while in link-editing mode (`.ql-editing`).
 * Quill bubble theme dismisses the tooltip when contenteditable loses focus —
 * which happens the instant the user clicks the URL input field. SGM-358's
 * tooltip.hide() monkey-patch missed this because Quill toggles visibility
 * via class/inline-style manipulation, not by calling hide(). These rules
 * force visibility when the tooltip is in editing mode regardless of how
 * Quill tries to hide it. */
.ql-bubble .ql-tooltip.ql-editing {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}
.ql-bubble .ql-tooltip.ql-editing.ql-hidden {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* SGM-350 Phase 3 — edit-panel hint when paragraph is selected (since paragraph
 * editing happens inline in the canvas now, not in the right pane). */
.et-edit-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--info-bg);
  border-left: 2px solid var(--info-border);
  border-radius: var(--radius);
}
.et-edit-hint i { color: var(--info); margin-right: 4px; }

/* SGM-322 — Text-only (simple) editor body. One full-width Quill RTE pane,
 * roomy min-height so the user has space to type a 6-9 paragraph email
 * without feeling cramped. The Quill toolbar/content area styling lives in
 * email-rte.css (shared with the paragraph RTE inside block-tree mode). */
.et-simple-body { padding: 24px 40px 60px; max-width: 760px; margin: 0 auto; }
.et-simple-rte { width: 100%; }
.et-simple-rte .rte-wrap { min-height: 520px; display: flex; flex-direction: column; }
.et-simple-rte .rte-wrap .ql-container.ql-snow { flex: 1; }
.et-simple-rte .rte-wrap .ql-editor { min-height: 460px; font-size: 14px; line-height: 1.7; padding: 16px 18px; }

@media (max-width: 1180px) {
  /* SGM-323/347: shrink the coach to a 60px strip (collapsed mode) on
   * mid-width screens so the editor stays usable. User can expand. */
  .et-body.with-coach { grid-template-columns: 1fr 240px 60px; }
  .et-body.with-coach .coach { padding: 0; }
}
@media (max-width: 980px) {
  .et-body { grid-template-columns: 1fr 240px; }
  .et-body.with-coach { grid-template-columns: 1fr 240px 60px; }
}
@media (max-width: 800px) {
  .et-body { grid-template-columns: 1fr; }
  .et-body.with-coach { grid-template-columns: 1fr; }
  .et-edit-panel, .et-body.with-coach .et-coach-column {
    border: none; border-bottom: 1px solid var(--border);
  }
  /* SGM-347 Phase 2: piece-bar scrolls horizontally on narrow widths so
   * all 6 pieces remain reachable without wrapping. */
  .et-piece-bar { overflow-x: auto; }
  .et-piece-bar-pieces { flex-wrap: nowrap; min-width: max-content; }
}

/* SGM-214 — campaign create template picker */
.camp-tpl-card { transition: all 0.15s; }
.camp-tpl-card:hover { border-color: var(--primary-border); }
.camp-tpl-card.selected { border-color: var(--primary); background: var(--primary-bg) !important; }

/* SGM-217 — Inbox-chrome preview (Gmail-style) */
.ip-shell { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; max-width: 760px; margin: 0 auto; font-family: 'Google Sans', 'Segoe UI', system-ui, sans-serif; }
.ip-shell.ip-mobile { max-width: 380px; }
.ip-app-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e8eaed; background: #fff; font-size: 13px; color: #5f6368; }
.ip-app-bar-left { display: flex; gap: 14px; }
.ip-app-bar-left span { cursor: default; opacity: 0.55; font-size: 16px; }
.ip-subject-row { padding: 18px 24px 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; }
.ip-subject { font-size: 22px; font-weight: 400; color: #202124; margin: 0; flex: 1; min-width: 0; line-height: 1.3; word-break: break-word; }
.ip-label { font-size: 10px; padding: 2px 8px; border: 1px solid #dadce0; border-radius: 4px; color: #5f6368; font-weight: 500; }
.ip-sender-row { display: flex; gap: 14px; padding: 14px 24px 16px; align-items: flex-start; border-bottom: 1px solid #f1f3f4; }
.ip-avatar { width: 40px; height: 40px; border-radius: 50%; background: #58889D; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.ip-sender-info { flex: 1; min-width: 0; }
.ip-sender-line { font-size: 14px; color: #202124; }
.ip-sender-line strong { font-weight: 700; }
.ip-sender-email { color: #5f6368; font-weight: 400; margin-left: 4px; }
.ip-recipient { font-size: 12px; color: #5f6368; margin-top: 2px; cursor: default; }
.ip-recipient span { color: #202124; }
.ip-preheader-hint { font-size: 11px; color: #80868b; font-style: italic; margin-top: 4px; padding: 4px 8px; background: #f8f9fa; border-radius: 3px; display: inline-block; }
.ip-meta { font-size: 11px; color: #5f6368; text-align: right; flex-shrink: 0; }
.ip-icons { margin-top: 4px; opacity: 0.5; cursor: default; }
.ip-body-wrap { background: #fff; min-height: 320px; }
.ip-iframe { width: 100%; height: 600px; border: 0; background: #fff; display: block; }
.ip-shell.ip-mobile .ip-iframe { height: 480px; }
.ip-plain-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #202124; padding: 20px 24px; margin: 0; white-space: pre-wrap; background: #fff; }
.ip-action-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #e8eaed; background: #fafafa; flex-wrap: wrap; }
.ip-mock-btn { padding: 8px 18px; border: 1px solid #dadce0; border-radius: 18px; background: #fff; color: #3c4043; font-size: 13px; cursor: default; opacity: 0.7; }
.ip-merge-note { margin-left: auto; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }
@media (max-width: 800px) {
  .ip-merge-note { display: none; }
}

/* ─── PR-A (2026-05-11) — image resize handles, zoom, edit-panel auto-collapse ─── */

/* PR-A U1 — drag-to-resize handles overlay an image when the block is selected.
   Hidden by default; .et-block.selected + image block shows them via the rule below. */
.et-image-resize-handles { display: none; position: absolute; inset: 0; pointer-events: none; }
.et-block.selected .et-image-resize-handles { display: block; }
/* Nested image in column — handles show when the row-child is selected. */
.et-row-child.selected .et-image-resize-handles { display: block; }
.et-rh { position: absolute; width: 12px; height: 12px; background: var(--primary); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15); border-radius: 50%; pointer-events: auto;
  z-index: 2; }
.et-rh:hover { background: var(--primary); transform: scale(1.2); }
.et-rh-tl { top: -6px;    left: -6px;   cursor: nwse-resize; }
.et-rh-tr { top: -6px;    right: -6px;  cursor: nesw-resize; }
.et-rh-bl { bottom: -6px; left: -6px;   cursor: nesw-resize; }
.et-rh-br { bottom: -6px; right: -6px;  cursor: nwse-resize; }
.et-rh-t  { top: -6px;    left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.et-rh-b  { bottom: -6px; left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.et-rh-l  { left: -6px;   top: 50%;     transform: translateY(-50%); cursor: ew-resize; }
.et-rh-r  { right: -6px;  top: 50%;     transform: translateY(-50%); cursor: ew-resize; }
/* Image blocks need position:relative so the absolute-positioned handle wrapper anchors correctly. */
.et-block[data-block-type="image"] { position: relative; }

/* PR-A U3 — zoom controls in the top toolbar. Segmented +/- buttons with a percent label. */
.et-zoom-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; }
.et-zoom-btn { width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }
.et-zoom-btn:hover { background: var(--bg-card); }
.et-zoom-label { font-size: 11px; color: var(--text-secondary); font-family: 'JetBrains Mono',
  ui-monospace, monospace; min-width: 32px; text-align: center; }

/* PR-A U3 — auto-collapse the edit-panel when nothing is selected. The empty
   "Click any piece to edit it" panel was taking 280px regardless of usefulness.
   Swap grid-template-columns to reclaim that column for the canvas. Mirrors the
   paragraph-collapse pattern at line ~201. */
.et-body:not([data-selected-type]),
.et-body[data-selected-type=""] { grid-template-columns: 1fr; }
.et-body:not([data-selected-type]).with-coach,
.et-body[data-selected-type=""].with-coach { grid-template-columns: 1fr 280px; }
.et-body:not([data-selected-type]) #et-edit-panel,
.et-body[data-selected-type=""] #et-edit-panel { display: none; }

/* PR-A3 — custom right-click context menu. Floats above everything (z-index
   per existing popovers). Vertical stack of actionable items with icon,
   label, optional keyboard hint, optional submenu marker. */
.et-context-menu {
  z-index: 9999;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.et-cm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  cursor: pointer;
  min-height: 28px;
}
.et-cm-item:hover { background: var(--bg-card-hover); }
.et-cm-item[data-disabled="1"] { opacity: 0.45; cursor: not-allowed; }
.et-cm-item[data-disabled="1"]:hover { background: transparent; }
.et-cm-label { flex: 1; }
.et-cm-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.et-cm-sub { color: var(--text-muted); font-size: 11px; }
.et-cm-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* PR-D (2026-05-12) — rows + columns. Side-by-side block layout. */
.et-row-cols {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.et-row-col {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  min-height: 64px;
}
/* PR-D Mailchimp-parity — large drop zone CTA. */
.et-row-col-dropzone {
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 28px 16px;
  background: var(--bg-input);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.et-row-col-addbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.et-row-col-addbtn:hover { border-color: var(--primary); color: var(--primary); }
.et-row-col-dropzone-or {
  font-size: 12px;
  color: var(--text-secondary);
}
.et-row-col-dropzone-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  max-width: 220px;
  line-height: 1.4;
}
/* Between-block "+ Add block" pill at the bottom of a populated column. */
.et-row-col-add {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}
.et-row-col-add:hover {
  background: var(--bg-card);
  border-color: var(--primary);
  color: var(--primary);
}

/* PR-D Mailchimp-parity — dashed divider between row columns. */
.et-row-cols > .et-row-col + .et-row-col {
  border-left: 1px dashed var(--primary);
  margin-left: 8px;
  padding-left: 16px;
}

/* PR-D Mailchimp-parity — COLUMNS pill tag in top-left when row selected. */
.et-block[data-block-type="row"].selected { position: relative; }
.et-block[data-block-type="row"].selected::before {
  content: "COLUMNS";
  position: absolute;
  top: -10px;
  left: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 2;
}
.et-row-col.drop-target {
  background: var(--success-bg, rgba(128,161,74,0.08));
  border-color: var(--success, #80a14a);
  border-style: solid;
}
.et-row-child {
  margin: 4px 0;
  padding: 4px;
  border-radius: 3px;
  position: relative;
}
.et-row-child:hover {
  outline: 1px dashed var(--primary);
}
.et-row-child.selected {
  outline: 2px solid var(--primary);
}
/* Nested-block controls — float top-right of the child, hidden by default,
   shown on hover/select like the top-level .et-block-controls. */
.et-row-child-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 2px;
  z-index: 3;
}
.et-row-child.selected .et-row-child-controls,
.et-row-child:hover .et-row-child-controls { display: flex; }
.et-row-child-controls button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
}
.et-row-child-controls button:hover { background: var(--primary-bg, rgba(88,136,157,0.08)); }
/* Image inside a nested child needs position:relative so its resize-handle
   wrapper absolute-positions correctly. */
.et-row-child[data-block-type="image"] { position: relative; }
/* Row inspector controls */
.et-row-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.et-row-preset-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  min-height: 32px;
}
.et-row-preset-btn:hover { background: var(--bg-card-hover); }
.et-row-preset-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.et-row-width-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.et-row-width-label {
  font-size: 11px;
  color: var(--text);
  min-width: 38px;
}
.et-row-width-slider {
  flex: 1;
  accent-color: var(--primary);
  height: 4px;
}
.et-row-width-pct {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  min-width: 36px;
  text-align: right;
}