/* ============================================================================
   THE EMAIL EDITOR
   ============================================================================
   A bar and a canvas. It used to be three columns — palette, our drawing of
   the document, properties — and GrapesJS brings its own panels, so the only
   chrome left here is the row that holds the things GrapesJS does not know
   about: the name, the subject, the preview line, the rendered size and Save.

   It fills the viewport below the top bar rather than scrolling as a page:
   the panels have to stay reachable while the canvas scrolls, or every edit
   becomes a round trip to the top.
   ============================================================================ */

/* Its own host rather than .cnt — see the comment in V(). Full width, no
   max-width, no auto margins, and an explicit width so nothing has to rely on
   a flex item stretching. */
.ed-host{width:100%;min-width:0;display:flex;flex-direction:column}

/* IT CANNOT WIDEN THE PAGE. `overflow:hidden` is not tidiness here — this is
   a full-height pane containing somebody else's editor, which positions its
   own panels absolutely and sizes its canvas in percentages. If any of that
   lands a pixel past the right edge, the whole application scrolls
   horizontally and the sidebar goes off-screen: the shell has no
   overflow-x:hidden of its own to catch it.

   Reported, and I could not reproduce it at any width from 760 to 1440 — so
   this makes it impossible rather than unlikely. Nothing inside needs the
   page to scroll: the canvas does its own scrolling, and the panels are
   fixed to the pane. */
.ed-pane{display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;
  overflow:hidden;
  height:calc(100vh - 8px);min-height:520px;
  border-top:1px solid var(--bdr)}

/* --- the bar --- */
.ed-bar{display:flex;align-items:center;gap:var(--sp3);flex:0 0 auto;
  width:100%;min-width:0;max-width:100%;flex-wrap:wrap;
  padding:10px var(--sp5);border-bottom:1px solid var(--bdr);
  background:var(--card)}
.ed-name,.ed-subj{padding:7px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;color:var(--tx);
  font-family:inherit;outline:none;min-width:0}
.ed-name{flex:0 1 240px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.ed-subj{flex:1 1 180px;font-size:13px;color:var(--txm)}
.ed-name:hover,.ed-subj:hover{border-color:var(--bdr)}
.ed-name:focus,.ed-subj:focus{border-color:var(--accent);background:var(--ibg);
  box-shadow:var(--ring);color:var(--tx)}

/* THE SIZE. Quiet until it is near the Gmail cut, because the number means
   nothing anywhere else and a permanently coloured figure teaches people to
   stop reading it. */
.ed-size{flex-shrink:0;padding:5px 10px;border-radius:999px;
  border:1px solid var(--bdr);background:var(--ibg);
  font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--txd);
  white-space:nowrap}
.ed-size.warn{border-color:color-mix(in srgb,var(--amber) 40%,transparent);
  color:var(--amber)}
.ed-size.bad{border-color:color-mix(in srgb,var(--red) 45%,transparent);
  color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
.ed-dirty{font-size:12px;color:var(--amber);min-width:52px;text-align:right}
.ed-dirty.ok{color:var(--txd)}
.ed-dirty.bad{color:var(--red)}
/* Quiet until you reach for it. A destructive control that looks like a
   button competes with Save, which is the one pressed every thirty seconds. */
.ed-del{padding:6px 10px;border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--txd);font-family:inherit;font-size:13px;
  font-weight:550;cursor:pointer;white-space:nowrap}
.ed-del:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 38%,transparent);
  background:color-mix(in srgb,var(--red) 8%,transparent)}

/* --- our tool row --- */
/* One visual language with the bar above it: same ground, no seam, words on
   every button. GrapesJS's own two rows are hidden below — an icon with no
   word is a thing you learn by clicking it and finding out, and the one that
   looks like a download means Import. */
.ed-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto;
  min-width:0;max-width:100%;flex-wrap:wrap;padding:5px var(--sp5);background:var(--card);
  border-bottom:1px solid var(--bdr)}
.ed-sep{width:1px;height:16px;background:var(--bdr);margin:0 8px;flex:none}
.ed-tl{font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txd)}
.ed-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.ed-t{width:28px;height:28px;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--txm);cursor:pointer;padding:0}
.ed-t:hover{color:var(--tx);background:var(--card-h)}
.ed-t.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.ed-w{width:58px;padding:4px 8px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:12px;text-align:center;
  font-variant-numeric:tabular-nums;outline:none}
.ed-w:focus{border-color:var(--accent);box-shadow:var(--ring)}

.ed-canvas{flex:1 1 auto;min-height:0;min-width:0;position:relative;overflow:hidden}

/* --- the phone preview, beside the canvas --- */
.ed-work{flex:1 1 auto;min-height:0;min-width:0;display:flex;position:relative}
.ed-phone{position:absolute;top:0;right:0;bottom:0;z-index:20;width:352px;max-width:100%;
  display:flex;flex-direction:column;gap:10px;min-height:0;
  padding:12px 16px 14px;border-left:1px solid var(--bdr);background:var(--card);
  box-shadow:-12px 0 32px rgba(0,0,0,.28);animation:ed-drawer .18s ease-out}
@keyframes ed-drawer{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ed-phone{animation:none}}
.ed-phone-x{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  color:var(--txm);cursor:pointer;font-size:13px}
.ed-phone-x:hover{color:var(--tx);background:var(--card-h)}
.ed-phone-hd{display:flex;align-items:center;gap:8px}
.ed-phone-hd .ed-tl{margin-right:auto}
.ed-phone-sel{min-width:0;flex:0 1 auto;padding:4px 8px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:12px;outline:none}
.ed-phone-sel:focus{border-color:var(--accent);box-shadow:var(--ring)}
.ed-phone-dev{flex:1 1 auto;min-height:0;margin:0 auto;position:relative;overflow:hidden;
  border:1px solid var(--bdr);border-radius:18px;background:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--tx) 7%,transparent)}
.ed-phone-dev iframe{position:absolute;top:0;left:0;border:0;display:block;
  transform-origin:0 0;background:#fff}
.ed-phone-ft{font-size:11.5px;line-height:1.45;color:var(--txd)}
.ed-pt{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  color:var(--txm);font-family:inherit;font-size:12.5px;font-weight:550;cursor:pointer}
.ed-pt:hover{color:var(--tx);background:var(--card-h)}
.ed-pt.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent)}

/* --- the starting points, in the New template dialog --- */
/* Quiet chips: no radio circles, regular weight, muted until chosen. */
.ed-starts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ed-start{display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;transition:background .12s,color .12s}
.ed-start input{position:absolute;opacity:0;pointer-events:none}
.ed-start-n{font-size:12.5px;font-weight:400;color:var(--txm);white-space:nowrap}
.ed-start:hover{background:color-mix(in srgb,var(--tx) 5%,transparent)}
.ed-start:hover .ed-start-n{color:var(--tx)}
.ed-start:has(input:checked){background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.ed-start:has(input:checked) .ed-start-n{color:var(--tx);font-weight:500}
.ed-start:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.ed-start-h{grid-column:2;font-size:12.5px;color:var(--txd);line-height:1.5}

/* --- a template from the old block editor --- */
.ed-legacy{flex:1 1 auto;min-height:0;display:flex;gap:var(--sp5);
  padding:var(--sp5);overflow:auto}
.ed-legacy-b{flex:0 0 320px;max-width:320px}
.ed-legacy-t{font-size:15px;font-weight:650;color:var(--tx);margin-bottom:6px}
.ed-legacy-d{font-size:13px;line-height:1.65;color:var(--txm)}
.ed-legacy-f{flex:1 1 auto;min-width:0;height:100%;border:1px solid var(--bdr);
  border-radius:var(--r-md);background:#fff}

/* ============================================================================
   GRAPESJS, IN OUR COLOURS
   ============================================================================
   It ships a light theme and this application is dark, so an unstyled editor
   would be the one screen that looks like a different product.

   Done with GrapesJS's own variables rather than by overriding its rules:
   there are four colours and a font, they are declared for exactly this, and
   a wall of `!important` against its internals is a wall that breaks on the
   next version. The canvas INSIDE the iframe is deliberately untouched — that
   is the email, and the email is not dark.

   --gjs-primary-color     panel and toolbar ground
   --gjs-secondary-color   ordinary text and icons
   --gjs-tertiary-color    the accent: active tabs, selected blocks
   --gjs-quaternary-color  hover and the highlight on the accent
   ============================================================================ */
.ed-canvas .gjs-editor,
.ed-canvas .gjs-one-bg{--gjs-primary-color:var(--card);
  --gjs-secondary-color:var(--txm);
  --gjs-tertiary-color:var(--accent);
  --gjs-quaternary-color:var(--accent-h);
  --gjs-font-color:var(--txm);
  --gjs-font-color-active:var(--tx);
  --gjs-main-font:inherit}

/* The four utility classes GrapesJS paints everything with. They resolve to
   its own palette rather than to the variables above, which is why these five
   rules exist and the variables alone are not enough. */
.ed-canvas .gjs-one-bg{background-color:var(--card)}
.ed-canvas .gjs-two-color{color:var(--txm)}
.ed-canvas .gjs-three-bg{background-color:var(--accent);color:var(--bg)}
.ed-canvas .gjs-four-color,
.ed-canvas .gjs-four-color-h:hover{color:var(--accent)}

/* ITS OWN TOOL ROWS ARE HIDDEN — see .ed-tools. The panel that HOLDS the
   right-hand views (blocks, design, settings, layers) stays, because that is
   the panel our buttons open. --gjs-canvas-top is set to 0 to reclaim the
   row that is no longer drawn; it is the one geometry value that has to move
   with it, and it is GrapesJS's own variable rather than an override of its
   rules. */
/* ITS TOP ROWS GO; THE PANEL SWITCHES STAY.
   .gjs-pn-views is the four buttons that change what the RIGHT-HAND panel
   shows, and GrapesJS draws them directly above that panel — which is where
   a control for a panel belongs. Ours duplicated them at the opposite end of
   the screen from the thing they control.
   The other two rows are devices and tools, and those are ours now. */
.ed-canvas .gjs-pn-options,
.ed-canvas .gjs-pn-devices-c{display:none}
/* ROOM ABOVE THE EMAIL, AND IT HAS TO BE INSIDE THE CANVAS.
   When a block is selected GrapesJS draws its controls — move, duplicate,
   delete — in a 28px bar ABOVE it. For the topmost block that bar lands at
   the canvas's own top edge and is clipped by its overflow, so the controls
   for the first thing in the email cannot be clicked.

   --gjs-canvas-top was the first attempt and moves the wrong thing: it shifts
   the whole canvas down, and the frame still starts at the canvas's top edge,
   so the bar is still flush. The space has to be between the canvas and the
   FRAME.

   AND THIS ONE FIGHTS THE LIBRARY, WHICH IS WORTH SAYING. GrapesJS pins the
   wrapper with an inline `top: 0px`, and its Canvas config has no offset of
   any kind — frameStyle, frameContent, autoscrollLimit, nothing. So the
   override needs !important, and the height comes down by the same 40px so
   the bottom of the email is not pushed out of view.

   40px because the bar is 28: that leaves 12px of clearance, measured rather
   than guessed. */
.ed-canvas{background:var(--bg-alt)}
.ed-canvas .gjs-editor{--gjs-canvas-top:0px}
.ed-canvas .gjs-frame-wrapper{top:40px !important;height:calc(100% - 40px) !important}

/* BACKGROUND ONLY. This also said `top:0;height:100%`, which pulled the
   canvas up UNDER GrapesJS's own toolbar row: the top of every email was
   hidden behind it on first render. GrapesJS offsets the canvas by
   --gjs-canvas-top, which is that row's height, and it is the one thing in
   here that must not be overridden. */
.ed-canvas .gjs-cv-canvas{background-color:var(--bg-alt)}
.ed-canvas .gjs-pn-panel{border-color:var(--bdr)}
.ed-canvas .gjs-pn-btn{color:var(--txm);border-radius:var(--r-sm)}
.ed-canvas .gjs-pn-btn.gjs-pn-active{background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent);box-shadow:none}
.ed-canvas .gjs-pn-btn:hover{color:var(--tx)}
.ed-canvas .gjs-block{border:1px solid var(--bdr);border-radius:var(--r-sm);
  background:var(--ibg);color:var(--txm);font-size:11.5px}
.ed-canvas .gjs-block:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--tx)}
.ed-canvas .gjs-block-label{font-size:11.5px}
.ed-canvas .gjs-field{background:var(--ibg);border:1px solid var(--bdr);
  border-radius:var(--r-sm);color:var(--tx)}
.ed-canvas .gjs-field input,
.ed-canvas .gjs-field select,
.ed-canvas .gjs-field textarea{color:var(--tx);font-family:inherit}
.ed-canvas .gjs-sm-sector-title,
.ed-canvas .gjs-title,
.ed-canvas .gjs-clm-tags{border-color:var(--bdr)}
.ed-canvas .gjs-layer-title{border-color:var(--bdr)}
/* Its export/code modal sits at the document root, outside .ed-canvas. */
.gjs-mdl-dialog{background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r-lg);color:var(--tx)}
.gjs-mdl-header{border-bottom:1px solid var(--bdr)}

/* --- the four panels, named ------------------------------------------------
   They were four unlabelled icons: a paintbrush, a cog, some bars and a grid.
   Every feature reported "missing" was behind one of them — font size and
   font family under the brush, a button's link and an image's link under the
   cog, the block list under the grid. Nothing on screen said so, and an icon
   you cannot name is a feature you cannot find.

   Hooked on GrapesJS's own Font Awesome classes, which are stable across its
   panel rebuilds; the glyphs themselves never load, because the app does not
   ship Font Awesome. The word is doing all the work, so it may as well be
   the only thing there. */
/* THE PANEL HAS TO GROW WITH THE WORDS. GrapesJS sizes this column at 15%,
   which fits four icons and not four labels — adding the captions alone
   pushed Layers and Blocks off the right edge of the screen, which is the
   same "where is the button" complaint with a new cause. Width stated in
   pixels because it holds four fixed words, not a proportion of anything,
   and the canvas takes what is left. */
.ed-canvas .gjs-pn-views,
.ed-canvas .gjs-pn-views-container{width:296px}
.ed-canvas .gjs-cv-canvas{width:calc(100% - 296px)}
/* The buttons live in GrapesJS's own .gjs-pn-buttons wrapper, so the flex
   has to go there — put on the panel it made the wrapper the only flex item
   and the four buttons kept their natural 42px, leaving "Settings" clipped
   to "Setti…" inside a panel with 128px to spare. */
.ed-canvas .gjs-pn-views .gjs-pn-buttons{display:flex;width:100%}
.ed-canvas .gjs-pn-views .gjs-pn-btn{position:relative;flex:1 1 0;min-width:0;
  width:auto;padding:7px 4px 6px;font-size:0;line-height:1}
.ed-canvas .gjs-pn-views .gjs-pn-btn::after{display:block;font-size:11px;
  font-weight:600;letter-spacing:.01em;color:var(--txm);white-space:nowrap;
  text-align:center;overflow:hidden;text-overflow:ellipsis}
.ed-canvas .gjs-pn-views .gjs-pn-btn.gjs-pn-active::after{color:var(--accent)}
.ed-canvas .gjs-pn-views .fa-paint-brush::after{content:'Design'}
.ed-canvas .gjs-pn-views .fa-cog::after{content:'Settings'}
.ed-canvas .gjs-pn-views .fa-bars::after{content:'Layers'}
.ed-canvas .gjs-pn-views .fa-th-large::after{content:'Blocks'}

/* The trait panel's own heading says "Component settings", which is the
   library's phrase for "the link, the alt text and the title". Left as the
   heading, but the panel is the one place a link lives and it is worth the
   row being unmistakable. */
.ed-canvas .gjs-trt-traits .gjs-label{color:var(--txm);font-size:11.5px}

/* The picture's Size control in Settings: a slider and four quick sizes. */
.ed-size-t{display:flex;flex-direction:column;gap:8px;width:100%;padding:4px 0}
.ed-size-r{display:flex;align-items:center;gap:10px}
.ed-size-r input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;
  border-radius:4px;background:rgba(255,255,255,.22);outline:none;padding:0;margin:0}
.ed-size-r input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:#2dd4bf;cursor:pointer;border:none}
.ed-size-r input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:#2dd4bf;cursor:pointer;border:none}
.ed-size-v{font-size:12px;min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.ed-size-q{display:flex;gap:6px}
.ed-size-q button{flex:1;padding:5px 0;font-size:11.5px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);background:transparent;color:inherit}
.ed-size-q button:hover{background:rgba(255,255,255,.08)}


/* Send test dialog: the placeholders as a tidy two-column grid. */
.ed-tv-h{font-size:12px;color:var(--txd);margin:14px 0 6px}
.ed-tv-g{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.ed-tv-g .ct-fld span{font-size:11.5px}
.ed-barslot{flex-shrink:0}

/* ---------- New template: two tabs, one window ---------- */
.edn{width:min(560px,94vw)}
.edn-hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 6px}
.edn-t{font-size:16px;font-weight:600;color:var(--tx)}
.edn-tabs{display:flex;gap:4px;margin:8px 22px 0;padding:3px;border-radius:8px;
  background:color-mix(in srgb,var(--tx) 5%,transparent);width:max-content}
.edn-tabs button{border:0;background:transparent;color:var(--txm);font:inherit;font-size:13px;
  padding:6px 14px;border-radius:6px;cursor:pointer}
.edn-tabs button.on{background:var(--card);color:var(--tx);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.edn-body{padding:16px 22px 4px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 220px);overflow-y:auto}
.edn-body textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:120px;font:inherit;font-size:13.5px;line-height:1.55}
.edn-body .ct-fld em{font-style:normal;font-weight:400;color:var(--txd);margin-left:6px;font-size:11.5px}
.edn-pics{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.edn-pic{position:relative;width:96px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--bdr);background:var(--bg)}
.edn-pic img{width:100%;height:100%;object-fit:cover}
.edn-pic button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer;line-height:20px;padding:0}
.edn-add{width:96px;height:64px;border-radius:6px;border:1px dashed var(--bdr);display:grid;place-items:center;
  color:var(--txm);font-size:12.5px;cursor:pointer}
.edn-add:hover{border-color:var(--accent);color:var(--tx)}
.edn-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--bdr);margin-top:12px}
.edn-writing{padding:48px 32px;text-align:center}
.edn-spin{width:34px;height:34px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--bdr);
  border-top-color:var(--accent);animation:ednspin .9s linear infinite}
@keyframes ednspin{to{transform:rotate(360deg)}}
.edn-wt{font-size:15px;font-weight:600;color:var(--tx)}
.edn-ws{font-size:12.5px;color:var(--txd);margin-top:6px}