/* =========================================================================
 * HAVN EMAIL STUDIO (v2.2.151)
 *
 * Same --mc-* tokens as the rest of the hub, its own `havn-es-` prefix so
 * nothing here can reach the post console next door. Three zones on a desk —
 * palette, email, inspector — collapsing to one switchable zone in a hand,
 * exactly as the post console does, because an agent moving between the two
 * tabs should not have to learn a second set of habits.
 * ====================================================================== */

.havn-es {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg, 20px);
	background: var(--mc-bg-2, #0B0C10);
	overflow: hidden;
	--es-pad: 18px;
	--es-line: var(--mc-border);
}

/* ---------- Header ---------------------------------------------------- */
.havn-es-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	/* 9px, not 15. Everything on this row is one line tall now that the title
	   and the strapline have gone, so the padding was most of the height. */
	padding: 9px var(--es-pad);
	border-bottom: 1px solid var(--es-line);
	background: var(--mc-surface);
}
/* ---------- What is left of the header -----------------------------------
   Four things wanted this row: the studio's name, the campaign's name, the
   telemetry, and a strapline. At a 1004px console they came to 1064, the
   telemetry wrapped, and the canvas paid 76px of height on every screen so
   that a line of onboarding copy could be on every screen too.

   The title and the strapline are gone outright — a heading naming the tab you
   are already looking at, and a sentence that stops being news after the first
   visit. Two things are left, they fit at any width, and the container query
   that used to arbitrate the wrap went with the things that were wrapping.
   Header: 74px to 48. */
.havn-es-lamp {
	flex: 0 0 8px; width: 8px; height: 8px;
	border-radius: 999px;
	background: var(--mc-text-3);
}
.havn-es-lamp.is-live { background: var(--mc-success, #6FCF97); box-shadow: 0 0 10px rgba(111,207,151,.5); }
.havn-es-tele { display: flex; gap: 0; margin: 0; }
.havn-es-stat {
	/* Label beside value, not above it. Stacked, four stats stood 39px tall to
	   show eight words; on one line they are 18px for the same eight words,
	   and the difference goes to the canvas. */
	display: flex; align-items: baseline; gap: 7px;
	padding: 0 14px;
	border-left: 1px solid var(--es-line);
}
.havn-es-stat dd { display: flex; align-items: center; gap: 7px; min-width: 0; }
.havn-es-statv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.havn-es-stat:first-child { border-left: 0; }
.havn-es-stat dt {
	margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .13em;
	text-transform: uppercase; color: var(--mc-text-3);
}
.havn-es-stat dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--mc-text); }
.havn-es-stat-wide dd { font-size: 12.5px; font-weight: 500; }
.havn-es-none { color: var(--mc-text-3); font-weight: 400; }

/* ---------- The work area (v2.2.167) -------------------------------------
   There is no grid here any more. The rail, the inspector and the dispatch
   strip held three permanent columns and a permanent row between them, which
   left the email about a third of the console — the one thing the console
   exists to show, given the least room in it. The work area now holds exactly
   one thing, the canvas. Everything else is placed OVER it, on demand: a
   popover under whichever toolbar button opened it, and the inspector on
   rails at the right-hand edge.

   `position: relative` is load-bearing. The popovers and the inspector are
   absolutely positioned against THIS box rather than fixed to the viewport,
   so a transform on an ancestor view — the trap that stranded fixed modals in
   v2.2.156 — cannot strand them. It also means they are clipped to the
   console rather than able to hang off the page. */
.havn-es-work {
	position: relative;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* The closed inspector is parked at `translateX(102%)`, and a transform
	   still counts towards an ancestor's scrollable overflow — so without this
	   the work area reports 1589px of content inside 1252 forever. `.havn-es`
	   happens to clip it today, which means the only symptom is a number in a
	   measurement; clipping it where it is created is what stops that becoming
	   a scrollbar the day something upstream sets `overflow: visible`. */
	overflow: hidden;
}

/* ---------- Section headings ---------------------------------------------
   `havn-es-rail-h` outlived the rail it was named for. It is the inspector's
   title and the heading on every popover section, and renaming it would touch
   the inspector renderer, the panel markup and both counter-layer blocks for
   no gain — so it keeps the name and loses the container. */
.havn-es-rail-h {
	display: flex; align-items: center; gap: 7px;
	margin: 0 0 10px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--mc-text-3);
}
.havn-es-rail-h svg { width: 13px; height: 13px; }

.havn-es-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.havn-es-chip {
	display: flex; align-items: center; gap: 7px;
	/* A grid item defaults to min-width:auto, which refuses to shrink below its
	   content — the longer labels ("Two columns", "Social links") then push out
	   of the rail instead of ellipsising inside it. */
	min-width: 0;
	padding: 9px 9px;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: 9px;
	color: var(--mc-text-2);
	font-size: 11.5px; font-weight: 500; text-align: left;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.havn-es-chip svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--mc-text-3); }
/* Background restated — see the note at the top of havn-dashboard.css. */
.havn-es-chip:hover { border-color: var(--mc-accent); color: var(--mc-text); background: var(--mc-bg-3); }
.havn-es-chip:hover svg { color: var(--mc-accent); }
.havn-es-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.havn-es-starters { display: flex; flex-wrap: wrap; gap: 6px; }
.havn-es-starter {
	padding: 6px 11px;
	background: transparent;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	color: var(--mc-text-2);
	font-size: 11.5px;
	cursor: pointer;
}
.havn-es-starter:hover { border-color: var(--mc-accent); color: var(--mc-text); }

/* ---------- Outline ------------------------------------------------------ */
.havn-es-outline { list-style: none; margin: 0; padding: 0; }
.havn-es-outline-empty { font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3); }
.havn-es-out {
	display: flex; flex-direction: column; gap: 1px;
	padding: 7px 9px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: grab;
}
.havn-es-out:hover { background: var(--mc-surface); }
.havn-es-out.is-sel { border-color: rgba(212,179,112,.45); background: var(--mc-accent-soft, rgba(212,179,112,.14)); }
.havn-es-out.is-drag { opacity: .45; }
.havn-es-out.is-over { border-top: 2px solid var(--mc-accent); }
.havn-es-out-t { font-size: 12px; font-weight: 600; color: var(--mc-text); }
.havn-es-out-h {
	font-size: 11px; color: var(--mc-text-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Page settings ------------------------------------------------ */
.havn-es-settings { display: flex; flex-direction: column; gap: 9px; }
/* ---------- Page colours, light and dark ---------------------------------
   One row per colour, one column per inbox. It replaced a five-across grid of
   26px swatches under 9.5px labels, which had two problems: the labels were
   too small to read at a glance, and only ONE design was on screen — the other
   was behind a tab, so an agent who never found the tab had a dark email they
   did not know they could set. Both are here now, named, side by side. */
.havn-es-cols { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.havn-es-colhead,
.havn-es-colrow {
	display: grid;
	/* 42, not 44, and a 7px gutter. The rail is 258px at its narrowest and the
	   name has to survive there — "Page background" ellipsising into "Page
	   backg…" is the failure this table was built to end. */
	grid-template-columns: minmax(0, 1fr) 42px 42px;
	align-items: center;
	gap: 7px;
}
.havn-es-colhead > span:not(:first-child),
.havn-es-colrow > .havn-es-colcell { justify-self: center; }
.havn-es-colhead {
	padding-bottom: 4px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--es-line);
}
.havn-es-colhead > span {
	font-size: 9px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--mc-text-3); text-align: center;
}
.havn-es-colrow { padding: 3px 0; border-radius: 7px; }
.havn-es-colrow:hover { background: var(--mc-surface); }
.havn-es-colname {
	min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 11.5px; color: var(--mc-text-2);
}
/* The cell, not the input, is the positioned box: the clear button sits on the
   corner of the swatch and the strike-through is drawn across it. */
.havn-es-colcell { position: relative; display: block; width: 42px; height: 26px; }
body .havn-es .havn-es-colcell input[type="color"] {
	display: block !important;
	width: 42px !important; height: 26px !important;
	padding: 0 !important; margin: 0 !important;
	background: none !important;
	border: 1px solid var(--mc-border) !important;
	border-radius: 7px !important;
	cursor: pointer;
}
body .havn-es .havn-es-colcell input[type="color"]:hover { border-color: var(--mc-border-2) !important; }
body .havn-es .havn-es-colcell input[type="color"]:focus-visible {
	outline: none !important;
	border-color: var(--mc-accent) !important;
	box-shadow: 0 0 0 3px rgba(212,179,112,.18) !important;
}

/* Hand a dark colour back to its light twin. Hidden while the colour is
   already following one — there is nothing to undo then, and a button that
   does nothing is worse than no button. */
body .havn-es .havn-es-colclear {
	position: absolute; right: -6px; top: -6px;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 15px !important; height: 15px !important;
	min-width: 0 !important;
	padding: 0 !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border-2) !important;
	border-radius: 999px !important;
	color: var(--mc-text-3) !important;
	font: inherit !important; font-size: 8px !important; line-height: 1 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
body .havn-es .havn-es-colclear:hover { color: var(--mc-text) !important; border-color: var(--mc-accent) !important; }
body .havn-es .havn-es-colclear[hidden] { display: none !important; }

.havn-es-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- Stage: the toolbar ------------------------------------------
   Every rule that paints this bar is body-qualified and !important. The
   dashboard prints, at wp_head priority 99:

     body.havn-dashboard-page input {
       color:#F4F4F5 !important; background:rgba(255,255,255,.04) !important;
       border:1px solid rgba(255,255,255,.12) !important; }

   which lands on the campaign-name field, the range sliders and the colour
   swatches alike. Until v2.2.153 the studio carried no counter-layer at all,
   so the quiet title field rendered as a chunky form box, the sliders grew a
   border around the track, and the whole bar read as three unrelated widgets
   dropped in a row. This is that counter-layer. Removing it does not make the
   bar plain — it makes it wrong.
   --------------------------------------------------------------------- */
.havn-es-bar {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--es-line);
	background: var(--mc-surface);
}

/* The campaign's name. Until v2.2.167 this was a text input sitting in the
   bar permanently — a form field on a surface with no form, which is most of
   why the bar read as a widget tray. It is a line of text now, and the pencil
   beside it turns it back into the input for as long as it takes to rename. */
/* A chip in the header, between the studio's own name and the telemetry. It
   was in the toolbar for one build and the toolbar could not afford it: seven
   labelled tools and six controls on the right leave about 60px in the middle
   of a 1000px console, and the name ellipsised to nothing. `0 1 auto` so it
   takes only what its text needs and gives that back before the telemetry
   wraps. */
.havn-es-namebar {
	display: flex; align-items: center; gap: 6px;
	flex: 0 1 auto; min-width: 0; max-width: 360px;
	padding: 3px 5px 3px 11px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--mc-bg-3);
	transition: border-color .15s;
}
.havn-es-namebar:hover { border-color: var(--mc-border); }
.havn-es-namebar:focus-within { border-color: rgba(212,179,112,.5); }
.havn-es-nameic { display: inline-flex; flex: 0 0 auto; color: var(--mc-text-3); }
.havn-es-nameic svg { width: 13px; height: 13px; }
.havn-es-nametxt {
	min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 12.5px; font-weight: 600; color: var(--mc-text);
}
.havn-es-namebar .havn-es-pencil { width: 22px; height: 22px; opacity: .45; transition: opacity .15s; }
.havn-es-namebar .havn-es-pencil svg { width: 12px; height: 12px; }
.havn-es-namebar:hover .havn-es-pencil,
.havn-es-namebar.is-editing .havn-es-pencil,
.havn-es-namebar .havn-es-pencil:focus-visible { opacity: 1; }
.havn-es-namebar.is-editing { border-color: rgba(212,179,112,.5); }
/* The input replaces the label in place, so the chip must not resize under
   the pointer that was aiming at the pencil. */
.havn-es-namebar .havn-es-name { flex: 1 1 auto; min-width: 140px; }

/* The toolbar's right-hand half is pushed to the edge, whatever the left
   half's width turns out to be. */
.havn-es-bar-acts { margin-left: auto; }

body .havn-es .havn-es-name,
body.havn-dashboard-page .havn-es .havn-es-name,
.havn-app-bg .havn-es .havn-es-name {
	min-width: 0; width: auto !important;
	padding: 0 !important;
	height: 30px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--mc-text) !important;
	font: 600 13px/30px inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	outline: none !important;
}
body .havn-es .havn-es-name::placeholder { color: var(--mc-text-3) !important; font-weight: 500 !important; }

.havn-es-bar-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.havn-es-bar-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--es-line); }

/* Two or three icon buttons that belong together get one shared box, so the
   bar reads as a couple of controls rather than a scatter of small squares. */
.havn-es-group {
	display: inline-flex; align-items: center;
	padding: 2px;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: 9px;
}

body .havn-es .havn-es-iconbtn,
body.havn-dashboard-page .havn-es .havn-es-iconbtn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 28px !important; height: 28px !important;
	min-width: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	color: var(--mc-text-3) !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.havn-es-iconbtn svg { width: 15px; height: 15px; }
body .havn-es .havn-es-iconbtn:hover:not(:disabled) {
	color: var(--mc-text) !important;
	background: var(--mc-surface-2, rgba(255,255,255,.05)) !important;
}
/* On, not filled (v2.2.178): a pressed icon button was a solid accent square
   with #171307 on it, which hid the glyph it was meant to be showing. */
body .havn-es .havn-es-iconbtn.is-on {
	color: var(--mc-text) !important;
	background: var(--mc-surface-2) !important;
	border-color: var(--mc-accent) !important;
}
body .havn-es .havn-es-iconbtn.is-danger:hover { color: #EC7C7C !important; border-color: rgba(236,124,124,.45) !important; }
body .havn-es .havn-es-iconbtn:disabled { opacity: .3 !important; cursor: default; }

/* The save state. A dot plus a word, so a glance is enough. */
.havn-es-saved {
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 96px;
	font-size: 11px; color: var(--mc-text-3);
	white-space: nowrap;
}
.havn-es-saved:empty { display: none; }
.havn-es-saved::before {
	content: ""; flex: 0 0 6px; width: 6px; height: 6px;
	border-radius: 999px; background: var(--mc-text-3);
}
.havn-es-saved.is-dirty { color: var(--mc-accent); }
.havn-es-saved.is-dirty::before { background: var(--mc-accent); box-shadow: 0 0 8px rgba(212,179,112,.5); }
.havn-es-saved.is-clean::before { background: var(--mc-success, #6FCF97); }

/* ---------- Which inbox the canvas is showing ---------------------------
   The email carries a light design and a dark one. From v2.2.164 the page
   colours are edited as pairs and never need this, so it does one job: it
   switches the canvas, and it decides which version of a BLOCK's colours the
   inspector edits.

   The class used to be `havn-es-modes` / `havn-es-mode` — the same names the
   sending-identity fieldset uses. The identity's rule sets
   `flex-direction: column`, this rule never said `row`, and the later of the
   two won: a segmented control that rendered as two stacked full-width
   buttons. Worse, the identity form's change handler walks
   `.havn-es-mode` and clears `is-on` from everything it does not contain, so
   picking a sending mode also un-highlighted whichever inbox was selected
   here. Own name, own component. */
body .havn-es .havn-es-viewtabs {
	display: flex; flex-direction: row; gap: 4px; margin: 0 0 9px;
	padding: 3px !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important;
	border-radius: 10px !important;
}
body .havn-es .havn-es-viewtab {
	flex: 1 1 0; min-width: 0;
	padding: 7px 8px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 7px !important;
	color: var(--mc-text-3) !important;
	font: inherit !important; font-size: 11.5px !important; font-weight: 500 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	cursor: pointer;
	transition: color .15s, background .15s;
}
body .havn-es .havn-es-viewtab:hover { color: var(--mc-text-2) !important; }
body .havn-es .havn-es-viewtab.is-on {
	background: var(--mc-surface-2) !important;
	color: var(--mc-text) !important;
	box-shadow: inset 0 0 0 1px var(--mc-border-2);
}
.havn-es-modenote { margin: -4px 0 11px !important; }

/* The tag on an inspector field that is editing a dark counterpart. */
.havn-es-dtag {
	display: inline-block; margin-left: 5px; padding: 1px 5px;
	background: var(--mc-surface-2); border-radius: 4px;
	color: var(--mc-text-3);
	font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	vertical-align: 1px;
}

/* An email designed for a dark inbox is previewed on a dark canvas, or the
   surround lies about what it will look like. */
.havn-es-canvas.is-darkmode {
	background:
		linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
		repeating-conic-gradient(#26282e 0% 25%, #1c1e23 0% 50%) 50% / 22px 22px !important;
}
.havn-es-canvas.is-darkmode .havn-es-frame { background: #15171C; }

.havn-es-canvas {
	/* Was `max-height: 760px` inside a column that also had to hold a toolbar,
	   an inspector and a dispatch strip. It is the only thing in the work area
	   now, so it takes what the window has: roughly everything below the
	   toolbar, with a floor so a short window still shows an email and a
	   ceiling so a tall one does not stretch the sheet into a corridor. */
	flex: 1 1 auto;
	height: clamp(440px, calc(100vh - 300px), 900px);
	max-height: none;
	overflow-y: auto;
	padding: 24px 20px;
	/* The canvas is a light surface at every theme — an email is a light
	   document and previewing it on black would be a lie about how it lands. */
	background:
		linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
		repeating-conic-gradient(#e9e6df 0% 25%, #f5f3ee 0% 50%) 50% / 22px 22px;
}
.havn-es-frame {
	display: block;
	width: 100%;
	max-width: 780px;
	min-height: 320px;
	margin: 0 auto;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 18px 44px -22px rgba(0,0,0,.7);
	transition: max-width .22s ease;
}
.havn-es-canvas.is-mobile .havn-es-frame { max-width: 390px; }

/* ---------- Inspector ---------------------------------------------------- */
/* ---------- The inspector, on rails --------------------------------------
   It is never `display: none` and never `[hidden]`: both would take it out of
   the render tree, and there is then nothing for the transition to animate
   from. It is moved off the right edge and made unreachable instead —
   `visibility` is what stops a closed panel from swallowing clicks meant for
   the canvas underneath, and it is transitioned with a delay on the way out so
   it does not disappear a third of the way through the slide. */
.havn-es-insp {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 8;
	display: flex; flex-direction: column;
	width: min(330px, 86%);
	border-left: 1px solid var(--es-line);
	background: var(--mc-bg-2, #0B0C10);
	box-shadow: -22px 0 46px -26px rgba(0,0,0,.85);
	transform: translateX(102%);
	visibility: hidden;
	transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
}
.havn-es-insp.is-open {
	transform: none;
	visibility: visible;
	/* The overshoot lives on the way IN only. A panel that bounces as it
	   leaves reads as a glitch; one that bounces as it arrives reads as
	   arriving. */
	transition: transform .42s cubic-bezier(.22,1.28,.4,1), visibility 0s;
}
.havn-es-insp-x { margin-left: 2px; }
.havn-es-insp-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px var(--es-pad) 10px;
	border-bottom: 1px solid var(--es-line);
}
.havn-es-insp-head .havn-es-rail-h { margin: 0; }
.havn-es-insp-acts { display: flex; gap: 2px; }
.havn-es-insp-acts .havn-es-iconbtn { width: 26px; height: 26px; }
.havn-es-insp-acts .havn-es-iconbtn svg { width: 13px; height: 13px; }
.havn-es-insp-body { flex: 1 1 auto; overflow-y: auto; padding: 12px var(--es-pad) 20px; }

.havn-es-f { margin-bottom: 13px; }
.havn-es-flabel {
	display: block; margin-bottom: 5px;
	font-size: 11px; font-weight: 600; color: var(--mc-text-2);
}
.havn-es-fhint { margin: 5px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--mc-text-3); }

.havn-es-seg { display: flex; gap: 0; border: 1px solid var(--mc-border); border-radius: 8px; overflow: hidden; }
.havn-es-seg button {
	flex: 1 1 0;
	padding: 7px 4px;
	background: transparent;
	border: 0; border-left: 1px solid var(--mc-border);
	color: var(--mc-text-3);
	font-size: 11px; font-family: inherit;
	cursor: pointer;
}
.havn-es-seg button:first-child { border-left: 0; }
.havn-es-seg button.is-on { background: var(--mc-accent-soft, rgba(212,179,112,.14)); color: var(--mc-text); }

.havn-es-rangewrap { display: flex; align-items: center; gap: 9px; }
.havn-es-rangewrap input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--mc-accent); }
.havn-es-rangewrap output { flex: 0 0 34px; font-size: 11px; color: var(--mc-text-3); text-align: right; }

.havn-es-colorwrap { display: flex; align-items: center; gap: 7px; }
.havn-es-colorwrap input[type="color"] {
	flex: 0 0 34px; width: 34px; height: 30px; padding: 0;
	background: none; border: 1px solid var(--mc-border); border-radius: 7px; cursor: pointer;
}
.havn-es-hex { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px !important; }
.havn-es-clear {
	flex: 0 0 auto;
	padding: 5px 9px;
	background: transparent;
	border: 1px solid var(--mc-border);
	border-radius: 7px;
	color: var(--mc-text-3);
	font-size: 10.5px; font-family: inherit;
	cursor: pointer;
}
.havn-es-clear:hover { color: var(--mc-text); border-color: var(--mc-border-2); }

.havn-es-switch { display: inline-flex; align-items: center; cursor: pointer; }
.havn-es-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.havn-es-switch span {
	position: relative; display: block; width: 38px; height: 21px;
	background: var(--mc-bg-3); border: 1px solid var(--mc-border);
	border-radius: 999px; transition: background .18s, border-color .18s;
}
.havn-es-switch span::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 15px; height: 15px; border-radius: 999px;
	background: var(--mc-text-3); transition: transform .18s, background .18s;
}
.havn-es-switch input:checked + span { background: var(--mc-accent-soft, rgba(212,179,112,.2)); border-color: rgba(212,179,112,.55); }
.havn-es-switch input:checked + span::after { transform: translateX(17px); background: var(--mc-accent); }

/* ---------- Paired controls: one setting, one cell per inbox --------------
   The inspector's answer to the page palette's light/dark table. Both halves
   are on screen together for the reason that table gives: a second value
   behind a mode switch is a value nobody finds. Two columns on a rail this
   narrow means the cells have to be free to shrink — `minmax(0, 1fr)`, not
   `1fr`, or a hex input's own minimum width pushes the pair wider than the
   panel and the whole inspector scrolls sideways. */
/* A paired row is two controls deep where every other row is one, so it takes a
   little more space under it to stay a row rather than run into the next. */
.havn-es-f-pair { margin-bottom: 17px; }

.havn-es-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}
.havn-es-pairc { min-width: 0; }
.havn-es-pairt {
	display: block; margin-bottom: 4px;
	font-size: 9px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--mc-text-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The Reset under a paired swatch, not beside it: three controls across half a
   rail leaves the hex box about four characters wide. */
.havn-es-pair .havn-es-colorwrap { flex-wrap: wrap; gap: 6px; }
.havn-es-pair .havn-es-colorwrap input[type="color"] { flex: 0 0 30px; width: 30px; }
.havn-es-pair .havn-es-hex { flex: 1 1 60px; }
.havn-es-pair .havn-es-clear { flex: 1 0 100%; text-align: center; padding: 4px 6px; }
/* The "this follows something" strike is drawn across the swatch, so it has to
   follow the swatch when the swatch gets smaller. 30px wide here, not 34. */
.havn-es-pair .havn-es-colorwrap.is-unset::after { left: 15px; width: 24px; }
/* Two thumbnails side by side have half the width one had, so the picture
   stacks above its buttons rather than sitting beside them. `contain`, not the
   `cover` every other thumbnail uses: cover crops, and a logo you can only see
   the middle of is not a logo you can check. */
.havn-es-pair-media .havn-es-mediaf { flex-direction: column; align-items: stretch; gap: 7px; }
.havn-es-pair-media .havn-es-mediaf img,
.havn-es-pair-media .havn-es-mediaf-none { width: 100%; height: 52px; }
.havn-es-pair-media .havn-es-mediaf img { object-fit: contain; padding: 4px; }
.havn-es-pair-media .havn-es-mediaf > div { flex-direction: row; flex-wrap: wrap; gap: 5px; }
/* Each mark is previewed on the ground it is FOR. A navy logo on a dark
   thumbnail and a reversed one on a white thumbnail are both invisible, and
   telling the two slots apart is the entire job of this control — so the light
   slot gets a light chequer and the dark slot a dark one, and the agent can see
   at a glance which mark is which. The chequer, rather than a flat colour,
   because a logo on transparency has to look transparent. */
.havn-es-pair-media .havn-es-pairc:first-child .havn-es-mediaf img,
.havn-es-pair-media .havn-es-pairc:first-child .havn-es-mediaf-none {
	background: repeating-conic-gradient(#FFFFFF 0% 25%, #ECECEC 0% 50%) 50% / 12px 12px;
	border-color: rgba(0, 0, 0, .18);
	color: #6B7280;
}
.havn-es-pair-media .havn-es-pairc:last-child .havn-es-mediaf img,
.havn-es-pair-media .havn-es-pairc:last-child .havn-es-mediaf-none {
	background: repeating-conic-gradient(#1A1C22 0% 25%, #101217 0% 50%) 50% / 12px 12px;
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .6);
}

.havn-es-mediaf { display: flex; align-items: center; gap: 10px; }
.havn-es-mediaf img {
	width: 62px; height: 46px; object-fit: cover;
	border: 1px solid var(--mc-border); border-radius: 7px;
}
.havn-es-mediaf-none {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 46px;
	border: 1px dashed var(--mc-border-2); border-radius: 7px;
	font-size: 10px; color: var(--mc-text-3);
}
.havn-es-mediaf > div { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.havn-es-rich { display: flex; flex-direction: column; gap: 6px; }
.havn-es-richbar { display: flex; gap: 4px; }
.havn-es-richbar button {
	width: 28px; height: 26px;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: 6px;
	color: var(--mc-text-2);
	font-size: 12px; font-family: inherit;
	cursor: pointer;
}
.havn-es-richbar button:hover { border-color: var(--mc-accent); color: var(--mc-text); }

.havn-es-links { display: flex; flex-direction: column; gap: 6px; }
.havn-es-link { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 5px; align-items: center; }

/* ---------- The audience list ---------------------------------------------
   It was the middle third of a strip across the bottom of the console until
   v2.2.167; it is the right-hand column of the send sheet now. The list
   itself did not change — only what is around it. */
.havn-es-aud { display: flex; flex-direction: column; gap: 9px; }
.havn-es-aud-src {
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: 10px;
	padding: 9px 11px;
	border: 1px solid var(--mc-border);
	border-radius: 10px;
	cursor: pointer;
}
.havn-es-aud-src:hover { border-color: var(--mc-border-2); }
.havn-es-aud-src.is-empty { opacity: .5; cursor: default; }
.havn-es-aud-src input { accent-color: var(--mc-accent); width: 15px; height: 15px; }
.havn-es-aud-src strong { display: block; font-size: 12px; color: var(--mc-text); }
.havn-es-aud-src em { display: block; font-size: 10.5px; font-style: normal; line-height: 1.45; color: var(--mc-text-3); }
.havn-es-aud-src b { font-size: 14px; font-weight: 600; color: var(--mc-text-2); }

.havn-es-reach { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--mc-text-2); }
.havn-es-reach.is-empty { color: #E0B36A; }

.havn-es-send { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
.havn-es-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.havn-es-actions .havn-btn svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.havn-es-err { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #EC7C7C; }

/* ---------- Shared field styling ----------------------------------------- */
.havn-es-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.havn-es-field > span { font-size: 11px; font-weight: 600; color: var(--mc-text-2); }
.havn-es-field-inline { flex-direction: row; align-items: center; gap: 9px; }
.havn-es-field-inline > span { flex: 0 0 76px; }
/* The number a slider is showing. Fixed width and tabular figures, because it
   sits at the end of the row: without them every slider in the rail ends at a
   different x as its value gains and loses a digit, and four sliders stacked
   up read as four different controls. */
.havn-es-field-inline > output {
	flex: 0 0 30px;
	font-size: 11px; font-variant-numeric: tabular-nums;
	color: var(--mc-text-3); text-align: right;
}
.havn-es-field-inline > select,
.havn-es-field-inline > input { flex: 1 1 auto; min-width: 0; }
.havn-es-field-sm { flex: 0 1 108px; }
.havn-es-opt { font-weight: 400; color: var(--mc-text-3); }

.havn-es input[type="text"],
.havn-es input[type="email"],
.havn-es input[type="url"],
.havn-es input[type="number"],
.havn-es input[type="password"],
.havn-es input[type="datetime-local"],
.havn-es select,
.havn-es textarea,
.havn-es-card input[type="text"],
.havn-es-card input[type="email"],
.havn-es-card input[type="number"],
.havn-es-card input[type="password"],
.havn-es-card select,
.havn-es-card textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: 8px;
	color: var(--mc-text);
	font-size: 12.5px;
	font-family: inherit;
	color-scheme: dark;
}
body.havn-mc-light .havn-es input,
body.havn-mc-light .havn-es select,
body.havn-mc-light .havn-es textarea,
body.havn-mc-light .havn-es-card input,
body.havn-mc-light .havn-es-card select,
body.havn-mc-light .havn-es-card textarea { color-scheme: light; }
.havn-es input:focus, .havn-es select:focus, .havn-es textarea:focus,
.havn-es-card input:focus, .havn-es-card select:focus, .havn-es-card textarea:focus {
	outline: none; border-color: var(--mc-accent);
}
.havn-es input::placeholder, .havn-es textarea::placeholder,
.havn-es-card input::placeholder, .havn-es-card textarea::placeholder { color: var(--mc-text-3); }
.havn-es textarea { resize: vertical; line-height: 1.55; }
.havn-es-note { margin: 7px 0 0; font-size: 11px; line-height: 1.55; color: var(--mc-text-3); }
.havn-es-note svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.havn-es-note.is-ok { color: var(--mc-success, #6FCF97); }

/* ---------- Identity + log cards ------------------------------------------ */
.havn-es-card {
	margin-top: 14px;
	padding: 16px 18px 18px;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius, 14px);
	background: var(--mc-surface);
}
.havn-es-card-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.havn-es-card-h { margin: 0; font-size: 14px; font-weight: 600; color: var(--mc-text); }
.havn-es-card-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3); }
.havn-es-pill {
	padding: 4px 11px;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--mc-text-3);
}
.havn-es-pill.is-ok { color: var(--mc-success, #6FCF97); border-color: rgba(111,207,151,.4); }
.havn-es-pill.is-off { color: #E0B36A; border-color: rgba(224,179,106,.4); }
.havn-es-state {
	margin: 0 0 13px;
	padding: 10px 13px;
	border: 1px solid var(--mc-border);
	border-radius: 10px;
	font-size: 12px; line-height: 1.55; color: var(--mc-text-2);
}
.havn-es-state.is-warn { border-color: rgba(224,179,106,.4); background: rgba(224,179,106,.06); }

.havn-es-form { display: flex; flex-direction: column; gap: 13px; }
.havn-es-row { display: flex; gap: 12px; flex-wrap: wrap; }
.havn-es-row > .havn-es-field { flex: 1 1 200px; }

.havn-es-verify {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 13px 15px;
	border: 1px solid rgba(224,179,106,.4);
	border-radius: 12px;
	background: rgba(224,179,106,.05);
}
.havn-es-verify strong { display: block; font-size: 12.5px; color: var(--mc-text); }
.havn-es-verify p { margin: 4px 0 0; max-width: 460px; font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3); }
.havn-es-verify-acts { display: flex; align-items: center; gap: 7px; }
.havn-es-verify-acts input {
	width: 96px !important;
	font-family: ui-monospace, Menlo, monospace !important;
	letter-spacing: .18em; text-align: center;
}

.havn-es-modes { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; border: 0; }
.havn-es-modes legend {
	padding: 0; margin-bottom: 7px;
	font-size: 11px; font-weight: 600; color: var(--mc-text-2);
}
.havn-es-mode {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 11px 13px;
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.havn-es-mode:hover { border-color: var(--mc-border-2); }
.havn-es-mode.is-on { border-color: rgba(212,179,112,.5); background: var(--mc-accent-soft, rgba(212,179,112,.08)); }
.havn-es-mode.is-disabled { opacity: .5; cursor: default; }
.havn-es-mode input { margin-top: 2px; accent-color: var(--mc-accent); }
.havn-es-mode-t strong { display: block; font-size: 12.5px; color: var(--mc-text); }
.havn-es-mode-t em {
	display: block; margin-top: 3px;
	font-size: 11.5px; font-style: normal; line-height: 1.55; color: var(--mc-text-3);
}
.havn-es-smtp { display: flex; flex-direction: column; gap: 11px; padding: 13px; border: 1px solid var(--mc-border); border-radius: 11px; }


.havn-es-supp { margin-top: 14px; font-size: 12px; color: var(--mc-text-2); }
.havn-es-supp summary { cursor: pointer; color: var(--mc-text-3); }
.havn-es-supp ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.havn-es-supp li {
	display: flex; align-items: center; gap: 10px;
	padding: 5px 0; border-bottom: 1px solid var(--mc-border);
	font-size: 11.5px;
}
.havn-es-supp code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mc-text-2); }
.havn-es-supp span { flex: 0 0 auto; color: var(--mc-text-3); }
.havn-es-supp-undo {
	flex: 0 0 auto;
	padding: 3px 9px;
	background: transparent; border: 1px solid var(--mc-border); border-radius: 999px;
	color: var(--mc-text-3); font-size: 10.5px; font-family: inherit; cursor: pointer;
}
.havn-es-supp-undo:hover { color: var(--mc-text); border-color: var(--mc-accent); }

/* ---------- Modals -------------------------------------------------------- */
.havn-es-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,.62);
	backdrop-filter: blur(3px);
}
.havn-es-modal[hidden] { display: none; }
.havn-es-modal-card {
	display: flex; flex-direction: column;
	width: min(760px, 100%); max-height: min(86vh, 720px);
	border: 1px solid var(--mc-border-2);
	border-radius: var(--mc-radius-lg, 20px);
	background: var(--mc-bg-2, #0B0C10);
	box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
	overflow: hidden;
}
.havn-es-modal-sm { width: min(460px, 100%); }
.havn-es-modal-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--mc-border);
}
.havn-es-modal-head h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--mc-text); }
.havn-es-modal-tabs { display: flex; gap: 4px; padding: 11px 18px 0; }
.havn-es-mtab {
	padding: 7px 13px;
	background: transparent; border: 0; border-bottom: 2px solid transparent;
	color: var(--mc-text-3); font-size: 12px; font-family: inherit; cursor: pointer;
}
.havn-es-mtab.is-on { color: var(--mc-text); border-bottom-color: var(--mc-accent); }
.havn-es-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 20px; }
.havn-es-modal-foot {
	display: flex; justify-content: flex-end; gap: 8px;
	padding: 13px 18px;
	border-top: 1px solid var(--mc-border);
}

.havn-es-drop {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	padding: 40px 20px;
	border: 1.5px dashed var(--mc-border-2);
	border-radius: 14px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.havn-es-drop.is-over { border-color: var(--mc-accent); background: var(--mc-accent-soft, rgba(212,179,112,.08)); }
.havn-es-drop svg { width: 22px; height: 22px; color: var(--mc-text-3); }
.havn-es-drop strong { font-size: 13px; color: var(--mc-text); }
.havn-es-drop em { font-size: 11.5px; font-style: normal; color: var(--mc-text-3); }

.havn-es-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin-top: 12px; }
.havn-es-thumb {
	padding: 0; border: 1px solid var(--mc-border); border-radius: 9px;
	background: var(--mc-bg-3); overflow: hidden; cursor: pointer;
	aspect-ratio: 4 / 3;
}
.havn-es-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.havn-es-thumb:hover { border-color: var(--mc-accent); }

.havn-es-review { margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.havn-es-review > div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--mc-border); }
.havn-es-review dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-text-3); }
.havn-es-review dd { margin: 0; font-size: 12.5px; color: var(--mc-text); text-align: right; }

/* ---------- Narrow desks -------------------------------------------------
   Nothing folds here now: there is one column and everything else sits over
   it. The identity popover is the only one wide enough to need saying — its
   form is two fields to a row and it would otherwise run past the console's
   own edge, where the popover's max-width would crop it rather than reflow
   it. */
@media (max-width: 1240px) and (min-width: 1001px) {
	.havn-es-pop-identity { --es-pop-w: 560px; }
	.havn-es-insp { width: min(310px, 90%); }
}

/* ---------- One zone at a time, on a phone --------------------------------
   Same decision as the post console: three columns do not fit in a hand, and
   stacking them into one long scroll is a surrender rather than a design. */
@media (max-width: 1000px) {
	.havn-es { border-left: 0; border-right: 0; border-radius: 0; }
	/* Two things, one under the other. It was a grid with an "id" column while
	   the header still carried the studio's name; with that gone the column
	   was empty and the campaign's name sat against a gap where a title used
	   to be. The telemetry keeps the full width for its 2x2, and the
	   full-bleed hairline rows the squaring directive asks for. */
	.havn-es-head {
		display: flex; flex-direction: column; align-items: stretch;
		gap: 0; padding: 0; background: none; border-bottom: 0;
	}
	.havn-es-namebar { margin: 10px var(--es-pad); max-width: none; }
	.havn-es-tele {
		display: grid; grid-template-columns: 1fr 1fr;
		border-top: 1px solid var(--es-line); border-bottom: 1px solid var(--es-line);
	}
	.havn-es-stat {
		/* Back to stacked here. Two columns of 187px cannot hold
		   "NEXT OUT  nothing scheduled" on one line, and the inline form
		   truncates the value rather than the label. */
		flex-direction: column; align-items: flex-start; gap: 3px;
		padding: 9px 12px; min-width: 0;
	}
	.havn-es-stat:nth-child(-n+2) { border-bottom: 1px solid var(--es-line); }
	.havn-es-stat:nth-child(odd) { border-left: 0; }
	.havn-es-stat dt { font-size: 8.5px; }
	.havn-es-stat dd {
		font-size: 13px;
		/* "sending as" is an email address and will not wrap on its own. The
		   clipping is on the value's own span — see `.havn-es-statv` — because
		   the dd is a flex row here and text-overflow does not reach an
		   anonymous flex item. */
		overflow: hidden; white-space: nowrap;
	}
	.havn-es-stat-wide dd { font-size: 11.5px; }

	/* The four-tab zone switcher went with the four zones. A toolbar of
	   glyphs and a set of bottom sheets is the same idea done once, for both
	   a desk and a hand, instead of two layouts that had to agree. */
	.havn-es-palette { grid-template-columns: 1fr 1fr; }
	.havn-es-verify { flex-direction: column; align-items: stretch; }
	.havn-es-verify-acts { justify-content: space-between; }
	.havn-es-modal { padding: 0; }
	.havn-es-modal-card { width: 100%; max-height: 100%; height: 100%; border: 0; border-radius: 0; }
}

/* Below 861px the whole hub is square (v2.2.148). `.havn-es` sits inside
   `.havn-mkt`, so its rounding is already stripped by that rule — the only
   thing to restore is the state lamp, which is a dot by nature. */
@media (max-width: 860px) {
	.havn-mkt .havn-es-lamp,
	.havn-mkt .havn-es-switch span,
	.havn-mkt .havn-es-switch span::after { border-radius: 999px !important; }
	.havn-es-palette { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
 * THE COUNTER-LAYER (v2.2.153)
 *
 * Everything below exists to win a fight the studio was losing silently.
 * On a real dashboard page the plugin prints, at wp_head priority 99:
 *
 *   body.havn-dashboard-page input,
 *   body.havn-dashboard-page select,
 *   body.havn-dashboard-page textarea {
 *     color:#F4F4F5 !important;
 *     background:rgba(255,255,255,.04) !important;
 *     border:1px solid rgba(255,255,255,.12) !important; }
 *
 *   body.havn-dashboard-page span,
 *   body.havn-dashboard-page label,
 *   body.havn-dashboard-page p,
 *   body.havn-dashboard-page em   { color:#F4F4F5 !important; }
 *
 *   body.havn-dashboard-page .havn-btn {
 *     border-radius:999px !important;
 *     text-transform:uppercase !important;
 *     letter-spacing:.04em !important; }
 *
 * Those rules are right for a form page and wrong for a design tool. They
 * put a border and a fill around every range track and colour swatch, and
 * they flatten every muted hint, eyebrow and helper line to full-brightness
 * white — which is what removed the studio's type hierarchy and made the
 * whole panel read as noise.
 *
 * These selectors are body-qualified so they outrank it, and scoped to
 * `.havn-es` so they reach nothing else on the page.
 * ====================================================================== */

/* ---- 0. `hidden` has to mean hidden ----
   Several classes in this file set `display`, and a class beats the
   user-agent's `[hidden] { display: none }` outright — so the block-action
   icons, the "On <date>" field and the SMTP panel would all render while
   carrying a `hidden` attribute the script had just put there.

   Until now the studio got away with it: havn-marketing.css carries
   `.havn-mkt [hidden] { display: none !important }` and the studio is always
   rendered inside `.havn-mkt`. That is a dependency on a SIBLING stylesheet
   for this panel's own correctness, and it is invisible until something
   renders the panel outside that wrapper — which the standalone preview did,
   and the icons duly appeared beside "Nothing selected". Stated here so the
   panel is right wherever it is put.

   Same lesson as v2.2.107 and the settings modal. */
body .havn-es [hidden],
body .havn-es-menu[hidden],
body .havn-es-modal[hidden] { display: none !important; }

/* And once more, higher, for `.havn-btn`. `global-shell.css` loads AFTER every
   plugin stylesheet and prints:

     body.havn-dashboard-page .havn-btn,
     .havn-app-bg .havn-btn { display: inline-flex !important; }

   which is (0,2,1) — exactly the specificity of the rule above — and later in
   the cascade, so it wins outright. Any `.havn-btn` in the studio carrying a
   `hidden` attribute therefore renders anyway.

   Nothing here was ever a hidden `.havn-btn` until the send sheet, whose
   Back / Send me a test / Save draft buttons are shown on one pane and hidden
   on the other. It arrived as "Back is on the first step of the sheet, where
   there is nothing to go back to". Adding the page class takes these to
   (0,3,1), which beats it on specificity rather than on luck. */
body.havn-dashboard-page .havn-es [hidden],
body.havn-dashboard-page .havn-es-menu [hidden],
body.havn-dashboard-page .havn-es-modal [hidden],
.havn-app-bg .havn-es [hidden],
.havn-app-bg .havn-es-menu [hidden],
.havn-app-bg .havn-es-modal [hidden] { display: none !important; }

/* ---- 1. Type hierarchy: muted things stay muted ---- */
body .havn-es .havn-es-sub,
body .havn-es .havn-es-note,
body .havn-es .havn-es-fhint,
body .havn-es .havn-es-none,
body .havn-es .havn-es-opt,
body .havn-es .havn-es-out-h,
body .havn-es .havn-es-aud-src em,
body .havn-es .havn-es-reach,
body .havn-es .havn-es-saved { color: var(--mc-text-3) !important; }

body .havn-es .havn-es-rail-h,
body .havn-es .havn-es-groupt,
body .havn-es .havn-es-subh,
body .havn-es .havn-es-stat dt,
body .havn-es .havn-es-flabel { color: var(--mc-text-3) !important; }

body .havn-es .havn-es-flabel,
body .havn-es .havn-es-field > span,
body .havn-es .havn-es-check span { text-transform: none !important; letter-spacing: 0 !important; }

/* ---- 2. Sliders: a track, not a bordered box ---- */
body .havn-es input[type="range"],
body.havn-dashboard-page .havn-es input[type="range"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 4px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--mc-border-2, rgba(255,255,255,.14)) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
}
body .havn-es input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px;
	border-radius: 999px;
	background: var(--mc-accent);
	border: 2px solid var(--mc-bg-2, #0B0C10);
	cursor: grab;
}
body .havn-es input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px; border: 2px solid var(--mc-bg-2, #0B0C10);
	border-radius: 999px; background: var(--mc-accent); cursor: grab;
}
body .havn-es input[type="range"]:disabled { opacity: .4 !important; }

/* ---- 3. Colour swatches: the colour IS the control ---- */
body .havn-es input[type="color"],
body.havn-dashboard-page .havn-es input[type="color"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 34px !important; height: 26px !important;
	padding: 2px !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important;
	border-radius: 7px !important;
	cursor: pointer;
}
body .havn-es input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
body .havn-es input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
body .havn-es input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* ---- 4. Checkboxes: the audience list and the design toggles ---- */
body .havn-es input[type="checkbox"],
body.havn-dashboard-page .havn-es input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 16px !important; height: 16px !important;
	min-width: 16px !important;
	padding: 0 !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border-2, rgba(255,255,255,.16)) !important;
	border-radius: 5px !important;
	cursor: pointer;
	position: relative;
}
body .havn-es input[type="checkbox"]:checked {
	background: var(--mc-accent) !important;
	border-color: var(--mc-accent) !important;
}
body .havn-es input[type="checkbox"]:checked::after {
	content: ""; position: absolute; left: 4.5px; top: 1px;
	width: 4px; height: 8px;
	border: solid #171307; border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}
body .havn-es input[type="checkbox"]:disabled { opacity: .35 !important; cursor: default; }

/* ---- 5. Buttons: normal case, and the radius the design asks for ---- */
body .havn-es button,
body .havn-es .havn-btn,
body.havn-dashboard-page .havn-es .havn-btn {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: inherit !important;
}
body .havn-es .havn-es-chip,
body .havn-es .havn-es-minibtn { border-radius: 9px !important; }
body .havn-es .havn-es-starter { border-radius: 7px !important; }
body .havn-es .havn-es-seg button { border-radius: 0 !important; }

/* The dispatch row's three buttons: pills are fine, but they have to fit on
   one line and the primary has to actually look primary. */
body .havn-es .havn-es-actions .havn-btn,
body.havn-dashboard-page .havn-es .havn-es-actions .havn-btn {
	padding: 9px 16px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	border-radius: 9px !important;
	white-space: nowrap;
}
body .havn-es .havn-es-actions .havn-btn-primary,
body.havn-dashboard-page .havn-es .havn-es-actions .havn-btn-primary {
	background: var(--mc-surface-2) !important;
	color: var(--mc-text) !important;
	border-color: #D4B370 !important;
}

/* ---- 6. The text inputs the studio owns ---- */
body .havn-es .havn-es-field input[type="text"],
body .havn-es .havn-es-field input[type="url"],
body .havn-es .havn-es-field input[type="email"],
body .havn-es .havn-es-field input[type="datetime-local"],
body .havn-es .havn-es-field select,
body .havn-es .havn-es-field textarea,
body .havn-es .havn-es-f input[type="text"],
body .havn-es .havn-es-f input[type="url"],
body .havn-es .havn-es-f select,
body .havn-es .havn-es-f textarea {
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* =========================================================================
 * NEW IN v2.2.153 — brand, groups, context menu, drag feedback
 * ====================================================================== */

/* ---------- Inspector group headings ---------- */
.havn-es-groupt,
.havn-es-subh {
	display: flex; align-items: center; gap: 8px;
	margin: 18px 0 9px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mc-text-3);
}
.havn-es-groupt::after,
.havn-es-subh::after {
	content: ""; flex: 1 1 auto; height: 1px; background: var(--es-line);
}
.havn-es-f + .havn-es-groupt { margin-top: 16px; }
.havn-es-insp-body > .havn-es-groupt:first-child,
.havn-es-settings > .havn-es-subh:first-child { margin-top: 2px; }

/* ---------- Brand card ---------- */
.havn-es-brand { display: flex; flex-direction: column; gap: 10px; }
.havn-es-brandlogo {
	display: flex; align-items: center; justify-content: center;
	min-height: 62px; padding: 10px;
	background:
		linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
		repeating-conic-gradient(#1a1c22 0% 25%, #14161c 0% 50%) 50% / 14px 14px;
	border: 1px dashed var(--mc-border-2, rgba(255,255,255,.14));
	border-radius: 10px;
}
.havn-es-brandlogo img { max-width: 100%; max-height: 54px; object-fit: contain; }
.havn-es-brandlogo span { font-size: 11.5px; color: var(--mc-text-3); }
/* ---------- The brand's two marks ----------------------------------------
   Same pairing as the inspector's, in the Brand card. */
.havn-es-brandpair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	margin-bottom: 10px;
}
.havn-es-brandslot { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.havn-es-brandslot-t {
	font-size: 9px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--mc-text-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.havn-es-brandslot-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.havn-es-brandslot .havn-es-brandlogo { width: 100%; margin: 0; min-height: 54px; }
/* Each mark on the ground it is for — see the note on the inspector pair. The
   card's own chequer is dark, which is right for the dark slot and was quietly
   wrong for the only slot there used to be: a navy logo previewed on near-black
   looked like a broken upload. */
.havn-es-brandslot:not(.havn-es-brandslot-dark) .havn-es-brandlogo {
	background: repeating-conic-gradient(#FFFFFF 0% 25%, #ECECEC 0% 50%) 50% / 14px 14px;
	border-color: rgba(0, 0, 0, .2);
}
.havn-es-brandslot:not(.havn-es-brandslot-dark) .havn-es-brandlogo span { color: #6B7280; }

.havn-es-brandacts,
.havn-es-brandrow { display: flex; gap: 6px; }
.havn-es-brandacts > *,
.havn-es-brandrow > * { flex: 1 1 0; min-width: 0; }

body .havn-es .havn-es-minibtn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 7px 9px !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important;
	border-radius: 9px !important;
	color: var(--mc-text-2) !important;
	font-size: 11.5px !important; font-weight: 500 !important;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
body .havn-es .havn-es-minibtn:hover:not(:disabled) {
	border-color: rgba(212,179,112,.45) !important; color: var(--mc-text) !important;
}
body .havn-es .havn-es-minibtn:disabled { opacity: .4 !important; cursor: default; }

/* ---------- Page background image ---------- */
.havn-es-bgimg { display: flex; flex-direction: column; gap: 7px; }
.havn-es-bgimg-prev {
	display: flex; align-items: center; justify-content: center;
	height: 62px; overflow: hidden;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: 9px;
}
.havn-es-bgimg-prev img { width: 100%; height: 100%; object-fit: cover; }
.havn-es-bgimg-prev span { font-size: 11.5px; color: var(--mc-text-3); }

/* ---------- Checkbox rows in the page-design panel ---------- */
.havn-es-check {
	display: flex; align-items: center; gap: 9px;
	margin-top: 9px;
	font-size: 12px; color: var(--mc-text-2);
	cursor: pointer;
}

/* ---------- Right-click menu ----------
   position:fixed and a sibling of the console, not a child of it — a
   transform on any ancestor would otherwise make `fixed` resolve against
   that ancestor and land the menu somewhere else entirely. */
.havn-es-menu {
	position: fixed; z-index: 100002;
	min-width: 214px;
	padding: 5px;
	background: var(--mc-bg-2, #0B0C10);
	border: 1px solid var(--mc-border-2, rgba(255,255,255,.13));
	border-radius: 12px;
	box-shadow: 0 20px 48px -14px rgba(0,0,0,.75);
}
.havn-es-menu[hidden] { display: none; }
.havn-es-menu-head {
	padding: 6px 9px 7px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mc-text-3);
}
.havn-es-menu-sep { height: 1px; margin: 4px 6px; background: var(--es-line); }
body .havn-es-menu button {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 7px 9px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	color: var(--mc-text-2) !important;
	font: inherit !important;
	font-size: 12.5px !important;
	text-align: left;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}
body .havn-es-menu button span { flex: 1 1 auto; min-width: 0; }
body .havn-es-menu button svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: .75; }
body .havn-es-menu button kbd {
	font: 500 10.5px ui-monospace, Menlo, monospace;
	color: var(--mc-text-3);
	background: none; border: 0;
}
body .havn-es-menu button i { font-style: normal; color: var(--mc-text-3); }
body .havn-es-menu button:hover:not(:disabled),
body .havn-es-menu button.is-open {
	background: var(--mc-surface-2, rgba(255,255,255,.06)) !important;
	color: var(--mc-text) !important;
}
body .havn-es-menu button:disabled { opacity: .38 !important; cursor: default; }
body .havn-es-menu button.is-danger:hover { color: #EC7C7C !important; }
.havn-es-submenu { min-width: 178px; max-height: 62vh; overflow-y: auto; }

/* ---------- Drag feedback in the rail ---------- */
.havn-es-chip[draggable="true"] { cursor: grab; }
.havn-es-chip.is-drag,
.havn-es-out.is-drag { opacity: .45; }
.havn-es-chip:active { cursor: grabbing; }

/* =========================================================================
 * NEW IN v2.2.154 — the phone, and dragging that works with a finger
 * ====================================================================== */

/* ---------- Stage: desktop / phone / both ---------- */
.havn-es-stagearea { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.havn-es-pane { flex: 1 1 auto; min-width: 0; max-width: 780px; }
.havn-es-pane[hidden] { display: none; }
/* The phone pane wraps its bezel; it does not stretch.
   `flex: 1 1 auto; max-width: 780px` is right for the email sheet, which
   should take the width it is given up to its own. It is wrong for a phone: a
   bezel is 416px whatever room it is offered, so a stretched pane put 416px of
   phone at the LEFT edge of 780px of pane and left 364px of empty canvas to
   its right. On a 1900px canvas the stage centred the pane perfectly and the
   phone still sat 182px left of centre, with all the space piled on one side —
   which reads as a preview shoved into a corner rather than a preview.
   Shrink-wrapped, `justify-content: center` on the stage centres the thing you
   are actually looking at. Split view overrides this below, where the pane has
   to be allowed to give ground to the editing pane. */
.havn-es-pane-phone { flex: 0 0 auto; max-width: none; }
/* Split view only earns its name if the left pane is still a DESKTOP
   rendering. The email's own `@media (max-width:620px)` fires on the frame's
   width, so a left pane squeezed under 620px shows the phone layout too — and
   the agent is then comparing a phone with a phone. 660px keeps it clear of
   the breakpoint with room to spare; the phone bezel scales into whatever is
   left, which it can afford to do because it is read-only. */
.havn-es-stagearea.is-split .havn-es-pane-desk { flex: 1 1 auto; min-width: 660px; }
/* `0 1 auto`, not `0 0 auto`: the pane has to be allowed to give ground when
   the editing pane has taken its 660, or the stage simply overflows and the
   phone hangs off the right of the canvas. scalePhone() then reads the width
   it actually got and scales the bezel into it. */
.havn-es-stagearea.is-split .havn-es-pane-phone { flex: 0 1 auto; min-width: 0; max-width: none; }

.havn-es-panelabel {
	display: none;
	align-items: center; gap: 6px;
	margin: 0 0 8px;
	font-size: 10px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(255,255,255,.62);
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.havn-es-stagearea.is-labelled .havn-es-panelabel { display: inline-flex; }
.havn-es-panelabel svg { width: 12px; height: 12px; }

/* The phone. A bezel is not decoration here — it is the thing that stops the
   preview reading as "a narrow column" and starts it reading as "this is what
   it looks like on a phone", which is the whole question being asked. */
.havn-es-phone {
	/* 390 is the content box, which is the screen the iframe renders at — the
	   bezel's 12px padding sits outside it, so the frame fills the screen
	   edge to edge with no white strip beside it. */
	width: 390px;
	box-sizing: content-box;
	padding: 11px;
	/* Scaled by scalePhone() wherever there is not room for it at full size —
	   in split view on a laptop as much as on a phone. Only ever this frame:
	   it is read-only, so no drag coordinate passes through the transform. */
	transform: scale(var(--es-phone-scale, 1));
	transform-origin: top left;
	background: linear-gradient(160deg, #2a2c33, #16171c);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 42px;
	box-shadow: 0 22px 50px -20px rgba(0,0,0,.85);
}
.havn-es-phone-screen {
	position: relative;
	/* No height cap and no scroller of its own. fitPhone() sizes the frame to
	   its content precisely so the bezel is as tall as the email — "a phone
	   scrolls the page, not a box inside it", as that function says — and a
	   720px cap on top of it put a second scrollbar inside the first, so a
	   long email arrived looking cropped into a letterbox. The canvas scrolls,
	   the same as it does for the desktop frame. */
	overflow: hidden;
	border-radius: 30px;
	background: #fff;
}
/* The home indicator. A notch on its own reads as "a box with a bite out of
   it"; the bar at the bottom is the other half of what makes a rectangle
   legible as a phone at a glance. */
.havn-es-phone-screen::after {
	content: ""; position: absolute; left: 50%; bottom: 7px; z-index: 2;
	width: 134px; height: 5px;
	transform: translateX(-50%);
	background: rgba(20,22,28,.32);
	border-radius: 999px;
	pointer-events: none;
}
/* The notch. Purely so the frame is legible as a phone at a glance. */
.havn-es-phone-screen::before {
	content: ""; position: absolute; top: 0; left: 50%; z-index: 2;
	width: 122px; height: 26px;
	transform: translateX(-50%);
	background: #16171c;
	border-radius: 0 0 14px 14px;
}
/* ---------- The device is 390 x 844, not 390 x whatever ------------------
   `min-height: 400px` made a short email render as a 416 x 426 box — very
   nearly a square, and a square with a notch reads as a small tablet, not a
   phone. A real phone at 390 CSS px wide is 844 tall, so that is the floor: a
   short email shows at the top of a phone-shaped screen with the email's own
   page colour below it, which is exactly what the inbox does. A long one
   grows past it, and the canvas scrolls.

   844 x 390 needs a tall canvas to be seen whole, which is what the
   full-screen button is for — the two changes were made together. */
.havn-es-frame-m {
	display: block;
	width: 390px;
	border: 0;
	min-height: 844px;
	background: #fff;
}

/* Stacked split — set by layoutStage() when the canvas cannot hold both panes
   side by side. Same shape as the narrow-screen rules below, applied on a
   measurement rather than a media query, because what has to fit is the canvas
   and a media query can only see the window. */
.havn-es-stagearea.is-stacked { flex-direction: column; align-items: center; }
.havn-es-stagearea.is-stacked .havn-es-pane { width: 100%; max-width: 100%; }
.havn-es-stagearea.is-stacked.is-split .havn-es-pane-desk { min-width: 0; }
/* The pane is full width when stacked, so centring the PANE does nothing —
   the bezel inside it is what has to be centred. */
.havn-es-stagearea.is-stacked.is-split .havn-es-pane-phone {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center;
}
.havn-es-stagearea.is-stacked .havn-es-panelabel { align-self: flex-start; }

/* Narrow screens. The split cannot be side by side in a hand, and a 414px
   bezel does not fit a 375px screen — so the panes stack and the phone scales
   down to whatever room there is. The mirror is read-only, so scaling it costs
   nothing; scaling the EDITABLE frame would put every drag coordinate through
   a transform the drop maths does not know about, which is why only this one
   is ever scaled. */
@media (max-width: 1000px) {
	.havn-es-stagearea { flex-direction: column; align-items: center; gap: 14px; }
	.havn-es-pane { width: 100%; max-width: 100%; }
	.havn-es-stagearea.is-split .havn-es-pane-phone { align-self: center; }
	.havn-es-phone {
		transform: scale(var(--es-phone-scale, 1));
		/* top LEFT, not top centre. The bezel is wider than the pane before it
		   is scaled, so scaling around its own centre keeps that centre where
		   it was — well to the right of the pane's — and the right edge stays
		   clipped. From the left corner the maths is predictable, and the
		   centring is done as a margin in scalePhone(), which knows both
		   numbers. */
		transform-origin: top left;
	}
	/* The bezel keeps its layout size after a transform, so the space it no
	   longer fills has to be taken back by hand. */
	.havn-es-pane-phone { overflow: hidden; }
}

/* ---------- The phone check -----------------------------------------------
   The strip under the canvas is gone; `data-es-mcheck` is now the toolbar
   button itself, which is why the only thing left here is the list it opens.
   `has-warn` still lands on that button — a check with a real warning in it
   goes gold rather than grey. */
.havn-es-warnbtn.has-warn { border-color: rgba(212,179,112,.55); background: var(--mc-accent-soft, rgba(212,179,112,.16)); color: var(--mc-accent); }
.havn-es-warnbtn.has-warn b { color: var(--mc-accent); }

.havn-es-mcheck-list { margin: 0; padding: 0; list-style: none; }
.havn-es-mnote {
	position: relative;
	padding: 8px 10px 8px 26px;
	border-radius: 8px;
	font-size: 11.5px; line-height: 1.5;
	color: var(--mc-text-2);
}
.havn-es-mnote::before {
	content: ""; position: absolute; left: 11px; top: 14px;
	width: 6px; height: 6px; border-radius: 999px;
	background: var(--mc-text-3);
}
.havn-es-mnote.is-warn::before { background: var(--mc-accent); }
.havn-es-mnote[data-es-mjump] { cursor: pointer; }
.havn-es-mnote[data-es-mjump]:hover { background: var(--mc-bg-3); color: var(--mc-text); }

/* ---------- The outline row: a grip, and a phone-hidden mark ----------
   `.havn-es-out` was written as `flex-direction: column` — the title above
   the hint. Adding a grip beside them makes the row an axis it was never
   written for, so the direction has to be restated here; inheriting `column`
   stacks the grip on top of the label instead of setting it alongside. The
   stacking moves down to `.havn-es-out-body`, which is now the column. */
.havn-es-out { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.havn-es-out-body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.havn-es-out-body > * { min-width: 0; }
.havn-es-grip {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--mc-text-3);
	cursor: grab;
	/* Without this a finger scrolls the rail instead of dragging the row. */
	touch-action: none;
}
.havn-es-grip svg { width: 15px; height: 15px; fill: currentColor; }
.havn-es-grip:active { cursor: grabbing; }
.havn-es-out:hover .havn-es-grip { color: var(--mc-text-2); }
.havn-es-out.is-mhidden .havn-es-out-t { opacity: .55; }
.havn-es-out-mh { flex: 0 0 auto; display: inline-flex; color: var(--mc-text-3); }
.havn-es-out-mh svg { width: 13px; height: 13px; }

/* ---------- The drag ghost ---------- */
.havn-es-ghost {
	position: fixed; left: 0; top: 0; z-index: 100010;
	padding: 7px 12px;
	background: var(--mc-accent);
	border-radius: 8px;
	color: #171307;
	font-size: 12px; font-weight: 600;
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
	pointer-events: none;
	will-change: transform;
}
/* While a drag is running nothing else may select, and a finger must not
   scroll the page out from under it. */
body.havn-es-dragging { user-select: none; -webkit-user-select: none; }
body.havn-es-dragging .havn-es-canvas { touch-action: none; }

/* A palette chip is a drag source, so the browser must not claim the gesture
   for scrolling before the threshold is reached. */
.havn-es-chip { touch-action: none; }

/* A colour that is not set. The input underneath has to hold something, so it
   holds the colour the design actually falls back to — the slash is what says
   "this follows the page" rather than "this is that colour", which is a
   different instruction entirely. It used to hold black instead, which claimed
   a colour nothing carried and, worse, meant a picker opened on black and
   closed on black reported no change at all: setting anything to black was
   impossible. See inheritedColour() in the JS. */
.havn-es-colorwrap.is-unset input[type="color"] { opacity: .45; }
/* Faded AND dashed. Fading alone was enough on the dark rail and not enough on
   the light one: a pale inherited colour at 45% over a white surface is very
   nearly not there, and "I cannot see it" and "it is following something" are
   not the same message. The dash carries the meaning at any brightness; the
   fade and the strike are what make it obvious. */
.havn-es-colcell.is-unset input[type="color"] {
	opacity: .6;
	border-style: dashed !important;
	border-color: var(--mc-border-2) !important;
}
.havn-es-colorwrap.is-unset { position: relative; }
.havn-es-colorwrap.is-unset::after {
	content: ""; position: absolute; left: 17px; top: 50%;
	width: 26px; height: 1px;
	transform: translate(-50%, -50%) rotate(-32deg);
	background: var(--mc-text-3);
	pointer-events: none;
}
/* Struck through, right across the swatch: in the dark column that reads as
   "this one follows the light colour", which is the truth about it. The light
   column has no unset state — a page colour always resolves to something. */
.havn-es-colcell.is-unset::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 40px; height: 1px;
	transform: translate(-50%, -50%) rotate(-31deg);
	background: var(--mc-text-3);
	pointer-events: none;
}

/* ---------- Thumbs: the colour table on a phone ---------------------------
   havn-marketing.css states, at 720px and below:

     .havn-mkt input, .havn-mkt select, .havn-mkt button { min-height: 44px }

   which is right — 44px is the touch floor the whole hub is built to — but it
   reaches `input[type="color"]` as well. The swatch cell is 26px, so each
   swatch grew to 44 inside a 26px box, overflowed it, and the columns closed
   up into two continuous strips of colour with the rows overlapping.

   The answer is not to fight the floor down to 26. It is to give the cell the
   height the floor asks for, so a swatch on a phone is a target you can
   actually hit. This block sits BEFORE the squaring block below on purpose:
   both apply at 375px, and the squaring block has to keep winning the radii.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	/* Two cells across a phone-width rail leaves each about 110px, which a
	   swatch, a hex box and a Reset do not fit into. They stack instead. */
	.havn-es-pair,
	.havn-es-brandpair { grid-template-columns: minmax(0, 1fr); }
	.havn-es-pair .havn-es-colorwrap input[type="color"] { flex: 0 0 44px; width: 44px; height: 44px; }

	.havn-es-colcell { height: 44px; }
	body .havn-es .havn-es-colcell input[type="color"] { height: 44px !important; }
	.havn-es-colhead,
	.havn-es-colrow { gap: 10px; }
	.havn-es-cols { gap: 4px; }
	.havn-es-colname { font-size: 13px; }

	/* The reset pip is a button, so the same floor makes it a 15x44 sliver
	   hanging off the corner of the swatch. It gets a square touch target
	   instead — bigger than it is on a desk, which is the point. */
	body .havn-es .havn-es-colclear {
		right: -8px; top: -8px;
		width: 26px !important; height: 26px !important;
		min-height: 0 !important;
		font-size: 10px !important;
	}

}

/* =========================================================================
 * THE TOOLBAR AND ITS POPOVERS (v2.2.167)
 *
 * One row of buttons replaces four permanent zones. Each button owns a
 * popover that is absolutely placed inside `.havn-es-work` — under the button
 * that opened it, clamped so it cannot run off either edge — and every one of
 * them arrives with the same short overshoot, so opening a menu reads as a
 * thing arriving rather than a thing appearing.
 *
 * Radii set here are NOT !important and NOT body-qualified beyond `.havn-es`,
 * which keeps them under the squaring sweep at the bottom of this file. Where
 * a rule has to be body-qualified to outrank the dashboard's own !important
 * layer, its square twin is added to that block as well.
 * ====================================================================== */

.havn-es-bar {
	flex-wrap: wrap; row-gap: 8px;
	/* The toolbar sizes itself against the console, not the window. The studio
	   is rendered at three quite different widths — inside a marketing panel,
	   full-screen in studio mode, and in a hand — and a viewport media query
	   gets all three wrong: at a 1280px window the panel is about 1030, which
	   is where the labelled row stops fitting, and a query on 1280 has no way
	   to know that.

	   `container-type: inline-size` establishes containment, which makes this
	   element a containing block for any fixed-position descendant. There are
	   none: the send sheet is a sibling of the bar, not a child. Putting the
	   container on `.havn-es` instead WOULD trap it, which is the v2.2.156
	   trap wearing a different hat. */
	container-type: inline-size;
	container-name: esbar;
}
.havn-es-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 0; }

/* Two steps of shedding before anything wraps. The chevrons go first — they
   are decoration on a button that already says what it opens — and the words
   only when there is genuinely no room for seven of them. */
@container esbar (max-width: 1240px) {
	.havn-es-tools .havn-es-tchev { display: none; }
	.havn-es-tbtn { padding: 0 9px; gap: 5px; }
}
@container esbar (max-width: 940px) {
	.havn-es-tools .havn-es-tbtn > span { display: none; }
	.havn-es-tools .havn-es-tbtn { width: 32px; padding: 0; justify-content: center; }
	.havn-es-tools .havn-es-tbtn-add { width: 32px; }
}

/* ---------- The price of those two containers ----------------------------
   `container-type: inline-size` also applies inline-size containment, and a
   contained box contributes NOTHING to its parent's intrinsic width. With the
   header and the toolbar contained, `.havn-es` has a max-content of 340px —
   the canvas padding and nothing else — because the email itself is an iframe
   at `width: 100%`, which has no intrinsic width either.

   Every layout the studio ships in hands it a definite width, so this never
   shows. It would show the day an ancestor is sized by its content instead —
   a flex or grid item left at `auto`, an inline-block, a float — and it would
   show as the entire studio rendering in a 340px ribbon down the left of the
   page, with nothing in the markup to explain it. That is the same shape of
   failure as v2.2.165's 140px `<main>`, which an audit passed because the one
   number it checked was perfectly true.

   So the floor is stated rather than inferred. Above the phone layout only:
   640px is the narrowest the desk design is drawn for, and no console in this
   band is narrower than that anyway, so it costs nothing where it is not
   needed. */
@media (min-width: 1001px) {
	.havn-es { min-width: 640px; }
}

.havn-es-tbtn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 9px;
	color: var(--mc-text-2);
	font-size: 12px; font-family: inherit; line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.havn-es-tbtn svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: .8; }
.havn-es-tbtn:hover { background: var(--mc-bg-3); color: var(--mc-text); }
.havn-es-tbtn.is-open {
	background: var(--mc-accent-soft, rgba(212,179,112,.14));
	border-color: rgba(212,179,112,.42);
	color: var(--mc-text);
}
.havn-es-tbtn.is-open svg { opacity: 1; color: var(--mc-accent); }
.havn-es-tchev { display: inline-flex; margin-left: -2px; transition: transform .2s ease; }
.havn-es-tchev svg { width: 11px; height: 11px; opacity: .55; }
.havn-es-tbtn.is-open .havn-es-tchev { transform: rotate(180deg); }

/* The one button that is a symbol rather than a word. It is the most-used
   control in the studio, so it gets the accent and a square footprint. */
.havn-es-tbtn-add {
	width: 32px; padding: 0;
	justify-content: center;
	background: var(--mc-accent-soft, rgba(212,179,112,.14));
	border-color: rgba(212,179,112,.35);
	color: var(--mc-accent);
	margin: 0 4px;
}
.havn-es-tbtn-add svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: 1; }
.havn-es-tbtn-add:hover { background: rgba(212,179,112,.24); color: var(--mc-accent); }

/* The phone check. Hidden outright when there is nothing to say — the button
   itself carries `data-es-mcheck`, so no warnings means no button. */
.havn-es-warnbtn { color: #E0B36A; border-color: rgba(224,179,106,.35); background: rgba(224,179,106,.08); }
.havn-es-warnbtn:hover { background: rgba(224,179,106,.16); color: #E0B36A; }
.havn-es-warnbtn svg { opacity: 1; }
.havn-es-warnbtn b { font-size: 11.5px; font-weight: 700; }

/* ---------- The send button ------------------------------------------------
   Still the most emphatic control in the bar, because it is the only
   irreversible one — but emphasis is the gold EDGE now, not a gold pill
   (v2.2.178). The lift and the edge come from assets/havn-buttons.css, so the
   private translateY and the gold halo are gone; `border: 0` went with them,
   since a borderless button cannot show the edge that replaced its fill.

   The label is a <span>, and the dashboard prints
   `body.havn-dashboard-page span { color:#F4F4F5 !important }` at priority 99.
   That is now the colour this button wants, so the override below just has to
   stop forcing #171307 onto it. */
.havn-es-sendbtn {
	display: inline-flex; align-items: center; gap: 7px;
	height: 34px; padding: 0 18px;
	border: 1px solid #D4B370; border-radius: 999px;
	background: rgba(255,255,255,.06);
	color: var(--mc-text);
	font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1;
	white-space: nowrap; cursor: pointer;
}
.havn-es-sendbtn svg { width: 14px; height: 14px; }
.havn-es-sendbtn:disabled { opacity: .55; cursor: default; translate: none; box-shadow: none; }
body .havn-es .havn-es-sendbtn,
body.havn-dashboard-page .havn-es .havn-es-sendbtn,
body .havn-es .havn-es-sendbtn span,
body.havn-dashboard-page .havn-es .havn-es-sendbtn span {
	color: var(--mc-text) !important;
	-webkit-text-fill-color: var(--mc-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.havn-es-sendbtn-go { height: 36px; padding: 0 20px; }

/* ---------- Popovers ------------------------------------------------------ */
.havn-es-pop {
	position: absolute; top: 8px; left: 8px; z-index: 12;
	display: flex; flex-direction: column;
	width: min(var(--es-pop-w, 420px), calc(100% - 16px));
	max-height: calc(100% - 16px);
	border: 1px solid var(--mc-border-2);
	border-radius: 14px;
	background: var(--mc-bg-2, #0B0C10);
	box-shadow: 0 32px 70px -28px rgba(0,0,0,.92);
	overflow: hidden;
	transform-origin: top left;
}
.havn-es-pop-file      { --es-pop-w: 470px; }
.havn-es-pop-templates { --es-pop-w: 440px; }
.havn-es-pop-add       { --es-pop-w: 408px; }
.havn-es-pop-layers    { --es-pop-w: 340px; }
.havn-es-pop-design    { --es-pop-w: 408px; }
.havn-es-pop-tags      { --es-pop-w: 330px; }
.havn-es-pop-identity  { --es-pop-w: 640px; }
.havn-es-pop-mcheck    { --es-pop-w: 430px; }

/* The bounce. A single overshoot and one small settle — enough to read as
   physical, short enough that opening six menus in a row is not a wait. */
@keyframes havn-es-popin {
	0%   { opacity: 0; transform: translateY(-9px) scale(.955); }
	58%  { opacity: 1; transform: translateY(3px) scale(1.012); }
	80%  { transform: translateY(-1px) scale(.997); }
	100% { opacity: 1; transform: none; }
}
.havn-es-pop.is-open { animation: havn-es-popin .34s cubic-bezier(.22,1,.36,1) both; }

.havn-es-pop:focus { outline: none; }
.havn-es-pop-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	flex: 0 0 auto;
	padding: 12px 12px 12px 16px;
	border-bottom: 1px solid var(--es-line);
}
.havn-es-pop-head h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--mc-text); }
.havn-es-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }
.havn-es-pop-body > :first-child { margin-top: 0; }

/* Tabs inside a popover — "This email" / "Your brand". */
.havn-es-poptabs { display: flex; gap: 4px; flex: 0 0 auto; padding: 10px 16px 0; border-bottom: 1px solid var(--es-line); }
.havn-es-poptab {
	padding: 7px 12px 9px;
	background: transparent; border: 0; border-bottom: 2px solid transparent;
	color: var(--mc-text-3); font-size: 12px; font-family: inherit; cursor: pointer;
}
.havn-es-poptab.is-on { color: var(--mc-text); border-bottom-color: var(--mc-accent); }

/* A card inside a popover is a box inside a box. The identity card and the
   campaign list both arrive from the server wearing their own border,
   background and margin, drawn for a page that put them under the console. */
.havn-es-pop .havn-es-card {
	margin: 0; padding: 0;
	border: 0; border-radius: 0;
	background: none;
}
.havn-es-pop .havn-es-card-head { margin-bottom: 10px; }

/* ---------- The block palette, in the + popover --------------------------- */
.havn-es-pop-add .havn-es-palette { grid-template-columns: 1fr 1fr; gap: 6px; }
.havn-es-pop-add .havn-es-chip { height: 38px; padding: 0 11px; font-size: 12px; }

/* ---------- Templates ------------------------------------------------------ */
.havn-es-pop-templates .havn-es-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.havn-es-pop-templates .havn-es-starter {
	display: flex; align-items: center; gap: 9px;
	min-height: 46px; padding: 9px 12px;
	text-align: left;
}
.havn-es-starter-ic { display: inline-flex; flex: 0 0 auto; color: var(--mc-text-3); }
.havn-es-starter-ic svg { width: 15px; height: 15px; }
.havn-es-starter-t { min-width: 0; font-size: 12px; line-height: 1.35; }
.havn-es-pop-templates .havn-es-starter:hover .havn-es-starter-ic { color: var(--mc-accent); }

/* ---------- The File list -------------------------------------------------- */
.havn-es-files { display: flex; flex-direction: column; gap: 6px; }
.havn-es-filesave {
	padding: 12px 13px 13px;
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	background: var(--mc-surface);
	margin-bottom: 16px;
}
.havn-es-filesave-acts { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

.havn-es-file {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name acts" "meta acts";
	align-items: center;
	gap: 2px 10px;
	padding: 9px 10px;
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	transition: border-color .15s, background .15s;
}
.havn-es-file:hover { border-color: var(--mc-border-2); background: var(--mc-surface); }
.havn-es-file-open {
	grid-area: name;
	display: block; width: 100%; min-width: 0;
	padding: 0; margin: 0;
	background: none; border: 0;
	text-align: left; font-family: inherit; cursor: pointer;
}
.havn-es-file-open strong {
	display: block; font-size: 12.5px; font-weight: 600; color: var(--mc-text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.havn-es-file-open small {
	display: block; margin-top: 2px; font-size: 10.5px; color: var(--mc-text-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.havn-es-file-name { grid-area: name; }
.havn-es-file-meta {
	grid-area: meta;
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
	margin-top: 4px;
	font-size: 10.5px; color: var(--mc-text-3);
}
.havn-es-file-note { font-style: italic; }
.havn-es-file-acts { grid-area: acts; display: flex; align-items: center; gap: 2px; }
.havn-es-fpill {
	padding: 2px 8px;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.havn-es-fpill.is-ok   { color: var(--mc-success, #6FCF97); border-color: rgba(111,207,151,.4); }
.havn-es-fpill.is-bad  { color: #EC7C7C; border-color: rgba(236,124,124,.4); }
.havn-es-fpill.is-wait { color: #E0B36A; border-color: rgba(224,179,106,.4); }
/* Renaming swaps the label for the field in place, so the row must not jump. */
.havn-es-file.is-renaming .havn-es-file-open { display: none; }

/* ---------- The phone-check list, now in a popover ------------------------- */
.havn-es-pop-mcheck .havn-es-mcheck-list { margin: 0; padding: 0; border: 0; }

/* ---------- The send sheet ------------------------------------------------- */
.havn-es-modal-send { width: min(880px, 100%); }
.havn-es-sendgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.havn-es-sendcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.havn-es-sendcol .havn-es-subh { margin-bottom: -2px; }
.havn-es-sheet .havn-es-aud { display: flex; flex-direction: column; gap: 7px; }
.havn-es-sheet .havn-es-modal-foot { flex-wrap: wrap; align-items: center; }
/* "Send me a test" and "Save draft" are the quiet half; the gold button is
   the half that does something you cannot take back. Pushed apart so the
   pointer has to travel to reach it. */
.havn-es-sheet [data-es-test] { margin-right: auto; }

@keyframes havn-es-sheetin {
	0%   { opacity: 0; transform: translateY(18px) scale(.965); }
	56%  { opacity: 1; transform: translateY(-5px) scale(1.008); }
	80%  { transform: translateY(2px) scale(.998); }
	100% { opacity: 1; transform: none; }
}
.havn-es-modal:not([hidden]) > .havn-es-modal-card { animation: havn-es-sheetin .38s cubic-bezier(.22,1,.36,1) both; }

/* The sheet is a `.havn-es` child so the whole counter-layer already reaches
   it — but it is NOT inside `.havn-es-field`'s owner for the two rules that
   name that class, and its inputs are the widest in the studio. */
.havn-es-sheet textarea { min-height: 84px; }

/* ---------- Nothing selected, nothing open -------------------------------- */
/* The canvas is the click target for closing things, so it has to look like a
   surface rather than a gap. Nothing to add — it already does — but the
   cursor should not suggest text on the padding around the sheet. */
.havn-es-work > .havn-es-canvas { cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.havn-es-pop.is-open,
	.havn-es-modal:not([hidden]) > .havn-es-modal-card { animation-duration: .01ms; }
	.havn-es-insp, .havn-es-insp.is-open { transition-duration: .01ms; }
	.havn-es-sendbtn:hover { transform: none; }
}

/* ---------- Narrow desks and phones --------------------------------------
   Nothing here has to fold, because nothing here is a column any more. What
   changes is only what a popover IS: on a phone it stops being a menu hung
   off a button and becomes a sheet from the bottom of the work area, which is
   where a thumb is. Same for the inspector. */
@media (max-width: 1000px) {
	.havn-es-bar { padding: 8px 10px; gap: 8px; }
	.havn-es-tools { order: 1; width: 100%; overflow-x: auto; scrollbar-width: none; }
	.havn-es-tools::-webkit-scrollbar { display: none; }
	.havn-es-bar-acts { order: 3; }
	.havn-es-namebar { max-width: none; }
	/* Labels go, glyphs stay — seven words do not fit a phone's width, and the
	   + is the only one that was never a word. */
	.havn-es-tbtn > span:not(.havn-es-tchev) { display: none; }
	.havn-es-tchev { display: none; }
	.havn-es-tbtn { width: 34px; padding: 0; justify-content: center; }
	.havn-es-tbtn-add { width: 34px; }
	.havn-es-warnbtn { width: auto; padding: 0 9px; }

	.havn-es-pop {
		top: auto; bottom: 0; left: 0; right: 0;
		width: 100%; max-height: min(78%, 560px);
		border-left: 0; border-right: 0; border-bottom: 0;
		border-radius: 16px 16px 0 0;
		transform-origin: bottom center;
	}
	@keyframes havn-es-popin-sheet {
		0%   { opacity: 0; transform: translateY(26px); }
		62%  { opacity: 1; transform: translateY(-6px); }
		84%  { transform: translateY(2px); }
		100% { opacity: 1; transform: none; }
	}
	.havn-es-pop.is-open { animation: havn-es-popin-sheet .36s cubic-bezier(.22,1,.36,1) both; }

	.havn-es-insp {
		top: auto; left: 0; right: 0; bottom: 0;
		width: 100%; height: min(72%, 520px);
		border-left: 0; border-top: 1px solid var(--es-line);
		border-radius: 16px 16px 0 0;
		transform: translateY(102%);
		box-shadow: 0 -22px 46px -26px rgba(0,0,0,.85);
	}
	.havn-es-insp.is-open { transform: none; }

	.havn-es-canvas { height: clamp(360px, calc(100vh - 260px), 720px); padding: 14px 10px; }
	.havn-es-sendgrid { grid-template-columns: 1fr; gap: 16px; }
	.havn-es-pop-identity, .havn-es-pop-file { --es-pop-w: 100%; }
}

@media (max-width: 860px) {
	.havn-es-pop-templates .havn-es-starters,
	.havn-es-pop-add .havn-es-palette { grid-template-columns: 1fr 1fr; }
	.havn-es-file { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "acts"; }
	.havn-es-file-acts { justify-content: flex-end; margin-top: 4px; }
	/* The 44px tap floor, in both directions. A toolbar is the first thing a
	   thumb meets, and 32px wide is a miss however tall it is. */
	.havn-es-tbtn, .havn-es-tbtn-add { min-height: 44px; min-width: 44px; }
	.havn-es-tools .havn-es-tbtn,
	.havn-es-tools .havn-es-tbtn-add { width: 44px; }
	.havn-es-sendbtn { min-height: 44px; }
	.havn-es-file-acts .havn-es-iconbtn { width: 38px; height: 38px; }
}

/* =========================================================================
 * FULL SCREEN (v2.2.168)
 *
 * The dashboard's chrome is about 200px of window the builder cannot use: a
 * search bar, a topbar of eight controls, a sidebar. On a laptop that is most
 * of the difference between seeing an email and scrolling one.
 *
 * The overlay is the mechanism. The native Fullscreen API is asked for on top
 * of it and allowed to refuse — see the note in the controller — so what makes
 * this work is plain CSS: fixed to the viewport, above the shell, and the
 * shell's own furniture hidden rather than covered.
 * ====================================================================== */

.havn-es-fsbtn { position: relative; }
.havn-es-fsbtn > span { display: inline-flex; }
.havn-es-fsbtn > span[hidden] { display: none; }

.havn-es.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 9500;
	margin: 0;
	width: auto; max-width: none;
	height: auto;
	border: 0;
	border-radius: 0;
	background: var(--mc-bg-2, #0B0C10);
}
/* `position: fixed` on an element does NOT make it a containing block for its
   own fixed descendants — only a transform, filter or contain does — so the
   send sheet, the media picker and the block menu still resolve against the
   viewport and still cover the screen. This is why none of them needed
   moving out again. */
.havn-es.is-fullscreen .havn-es-work { flex: 1 1 auto; min-height: 0; }
.havn-es.is-fullscreen .havn-es-canvas {
	/* The whole point: every pixel below the toolbar. The clamp that sizes the
	   canvas in a page has nothing to say here — there IS a definite height to
	   divide, and the canvas takes what is left of it. */
	height: auto;
	max-height: none;
	min-height: 0;
	flex: 1 1 auto;
}
/* A phone is 868px tall with its bezel, and the canvas's 24px of breathing
   room is what pushed it past a 1000px window by twenty-odd pixels — close
   enough to scroll, which on the one screen that is meant to show everything
   is the wrong answer. */
.havn-es.is-fullscreen .havn-es-canvas { padding: 12px 20px; }

/* Given a window, the sheet may as well use it. */
.havn-es.is-fullscreen .havn-es-frame { max-width: 900px; }
.havn-es.is-fullscreen .havn-es-canvas.is-mobile .havn-es-frame { max-width: 390px; }

/* ---------- The overlay has to reach the viewport -------------------------
   `.havn-mc-section` computes to `transform: matrix(1,0,0,1,0,8)` — a leftover
   8px translate from its entrance animation, held there by
   `animation-fill-mode: both`. A transformed ancestor is a containing block for
   fixed-position descendants, so `position: fixed; inset: 0` on the studio
   resolved against the SECTION rather than the window: the overlay opened at
   the panel's own left edge, at the panel's own width, and computed a height of
   zero.

   This is the same trap v2.2.156 hit with the modals, wearing different
   clothes. It is neutralised only while the overlay is up — the entrance
   animation is a shell decision and this is not the place to overrule it for
   the rest of the dashboard. */
.havn-mc.havn-es-fs-host .havn-mc-views,
.havn-mc.havn-es-fs-host .havn-mc-view,
.havn-mc.havn-es-fs-host .havn-mc-section,
.havn-mc.havn-es-fs-host .havn-mkt-panel {
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	will-change: auto !important;
	contain: none !important;
}

/* The shell's furniture goes away rather than being painted over: a covered
   topbar still takes focus on Tab, and a sidebar underneath still scrolls. */
.havn-mc.havn-es-fs-host > .havn-mc-sidebar,
.havn-mc.havn-es-fs-host .havn-mc-topbar,
.havn-mc.havn-es-fs-host .havn-mc-sidebar-peek,
.havn-mc.havn-es-fs-host [data-mc-sidebar-toggle] { display: none !important; }
/* Nothing behind the overlay should be scrollable while it is up. */
body.havn-es-fs-body { overflow: hidden; }

/* On a phone the overlay is the same idea and needs no exceptions — the studio
   is already one column, and taking the shell's chrome away is worth more
   there than anywhere. */
@media (max-width: 1000px) {
	.havn-es.is-fullscreen .havn-es-canvas { height: auto; }
}

/* ---------- Below 861px the hub is square (CEO directive, v2.2.148) -------
   havn-marketing.css states this categorically as

     .havn-mkt, .havn-mkt * { border-radius: 0 !important; }

   at specificity (0,1,0). The counter-layer above is body-qualified — several
   of its selectors reach (0,3,2) to outrank the dashboard's own !important
   rules — so it also outranks THAT, and every radius it sets would survive
   onto a phone and quietly undo the directive.

   A single categorical selector cannot win that: `body .havn-mkt .havn-es *`
   is only (0,2,1). So each counter-layer rule that sets a radius is restated
   here with the SAME selector list, which ties on specificity and wins on
   source order. Adding a radius above without adding its twin here is how the
   phone gets round corners back.

   THIS BLOCK MUST STAY LAST IN THE FILE. It wins on source order, so anything
   appended after it outranks it and un-squares the phone again.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {

/* The categorical sweep first, for everything that is not fighting the
   counter-layer. The menu is a body-level fixed element and sits outside
   `.havn-mkt`, so it needs naming separately or it stays round while the
   panel behind it is square. */
body .havn-mkt .havn-es,
body .havn-mkt .havn-es *,
body .havn-mkt .havn-es *::before,
body .havn-mkt .havn-es *::after,
body .havn-es-menu,
body .havn-es-menu *,
body .havn-es-ghost { border-radius: 0 !important; }

/* Then the twins, selector for selector. */
body .havn-es .havn-es-iconbtn,
body.havn-dashboard-page .havn-es .havn-es-iconbtn { border-radius: 0 !important; }

body .havn-es input[type="color"],
body.havn-dashboard-page .havn-es input[type="color"],
body .havn-es .havn-es-colcell input[type="color"] { border-radius: 0 !important; }

/* The colour a swatch is showing is painted by the browser into its own
   pseudo-element, which carries a radius of the engine's choosing — so
   squaring the input alone leaves a rounded patch of colour inside a square
   box. One rule per engine: a comma-separated list containing a selector the
   engine does not know is thrown away whole, which is how the lamp ended up
   square on the first attempt at this block. */
body .havn-es input[type="color"]::-webkit-color-swatch { border-radius: 0; }
body .havn-es input[type="color"]::-moz-color-swatch { border-radius: 0; }

/* The clear pip is round by nature, like the lamp and the slider thumb — a
   square 15px dot on the corner of a swatch reads as damage, not as style. */
body .havn-mkt .havn-es-colclear { border-radius: 999px !important; }

body .havn-es input[type="checkbox"],
body.havn-dashboard-page .havn-es input[type="checkbox"] { border-radius: 0 !important; }

body .havn-es .havn-es-chip,
body .havn-es .havn-es-minibtn,
body .havn-es .havn-es-starter { border-radius: 0 !important; }

body .havn-es .havn-es-viewtabs,
body .havn-es .havn-es-viewtab { border-radius: 0 !important; }

body .havn-es .havn-es-colrow { border-radius: 0 !important; }

body .havn-es .havn-es-actions .havn-btn,
body.havn-dashboard-page .havn-es .havn-es-actions .havn-btn { border-radius: 0 !important; }

body .havn-es .havn-es-field input[type="text"],
body .havn-es .havn-es-field input[type="url"],
body .havn-es .havn-es-field input[type="email"],
body .havn-es .havn-es-field input[type="datetime-local"],
body .havn-es .havn-es-field select,
body .havn-es .havn-es-field textarea,
body .havn-es .havn-es-f input[type="text"],
body .havn-es .havn-es-f input[type="url"],
body .havn-es .havn-es-f select,
body .havn-es .havn-es-f textarea { border-radius: 0 !important; }

body .havn-es-menu button { border-radius: 0 !important; }

/* Round by nature, not by decoration: squaring a status dot, a slider track
   or its thumb reads as breakage rather than as style — the same exception
   havn-marketing.css makes for the network previews.

   Each vendor pseudo-element gets its OWN rule. One invalid selector
   invalidates a whole comma-separated list, so pairing ::-moz-range-thumb
   with ::-webkit-slider-thumb drops the entire block in both engines — which
   is how the lamp ended up square on the first attempt at this. */
body .havn-mkt .havn-es-lamp,
body .havn-mkt .havn-es-saved::before,
body .havn-mkt .havn-es-switch span,
body .havn-mkt .havn-es-switch span::after { border-radius: 999px !important; }

body .havn-es input[type="range"],
body.havn-dashboard-page .havn-es input[type="range"] { border-radius: 999px !important; }

body .havn-es input[type="range"]::-webkit-slider-thumb { border-radius: 999px; }
body .havn-es input[type="range"]::-moz-range-thumb { border-radius: 999px; }

.havn-es-palette { grid-template-columns: 1fr 1fr; }

}

/* ==========================================================================
   v2.2.165 — THE EMAIL STUDIO, FULL SCREEN
   --------------------------------------------------------------------------
   The studio was a bordered box, inside a tab panel, inside a padded page,
   inside the window scroll. Four frames deep before any pixel reached the
   email. The rail and the inspector were pinned to `max-height: 760px` for the
   same reason — nothing above them had a height to give, so they had to invent
   one, and on a 1440px display that left a third of the screen empty below the
   studio while the canvas scrolled inside 760px.

   Above 1000px the shell hands the tab the window (see STUDIO MODE in
   havn-mission-control.css) and the studio takes exactly one screen of it:
   `height: 100%`, not `flex: 1`, because Sending identity and Campaigns are its
   siblings and a grown flex item would divide the window with them rather than
   filling it. They stay one scroll below.

   The per-band row templates that used to live here are gone with the grid.
   There is one thing below the toolbar now — the work area — and it takes
   whatever is left, so there is no template to get wrong. (The bug that
   template caused is worth remembering: a two-row `grid-template-rows`
   written for the wrong breakpoint band put the dispatch zone in row two at
   its natural 374px and left the canvas 40px, i.e. smaller than before any of
   it.)
   ========================================================================== */
@media (min-width: 1001px) {
	.havn-mc.is-studio .havn-es {
		flex: 0 0 auto;
		height: 100%;
		min-height: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
	.havn-mc.is-studio .havn-es-head { flex: 0 0 auto; }

	.havn-mc.is-studio .havn-es-bar { flex: 0 0 auto; }
	.havn-mc.is-studio .havn-es-work {
		flex: 1 1 auto;
		min-height: 0;
	}
	/* The clamp is for the studio embedded in a page, where there is no given
	   height to divide. In full-screen studio mode there is one, and the
	   canvas takes all of it. */
	.havn-mc.is-studio .havn-es-canvas {
		height: auto;
		max-height: none;
		min-height: 0;
		flex: 1 1 auto;
	}
	/* The canvas is the whole point of the extra room — let the sheet grow with
	   it instead of staying at the width a 760px box needed. */
	.havn-mc.is-studio .havn-es-frame { max-width: 860px; }
	.havn-mc.is-studio .havn-es-canvas.is-mobile .havn-es-frame { max-width: 390px; }
}

/* A popover in full-screen studio mode has a whole window to grow into, and
   the Design one is the tallest thing in the studio — twelve colour rows, two
   of everything else. Given the room, it stops scrolling inside itself. */
@media (min-width: 1001px) {
	.havn-mc.is-studio .havn-es-pop { max-height: calc(100% - 24px); }
}