/* ==========================================================================
   HAVN Listing presentations.  v2.2.205
   Inherits the Mission Control tokens (--mc-*); loaded after
   havn-mission-control.css.

   NOTE ON COLOUR: havn-dashboard.php prints a priority-99 block that paints
   div/span/p/li/strong/small/h4/em #F4F4F5 !important in dark (#15171C in
   light). Any colour here that is not the body colour must be restated at
   `body .havn-mc .havn-lp-*` with !important, or it silently renders white.

   NOTE ON THE CANVAS UNIT: a slide is laid out in percentages and typed in
   `--u`, which havn-presentations.js sets to one hundredth of that canvas's
   own width. One stylesheet therefore renders the same deck as a 180px
   thumbnail, a full-width editor canvas and an A4 page, with the type staying
   in proportion at every size. Never put a px font-size on anything inside
   .havn-lp-canvas.

   NOTE ON CONTROLS: the site cascade gives bare inputs content-box sizing and
   a tall line-height. Every input and textarea here restates its box at
   (0,3,2) !important for that reason.
   ========================================================================== */

.havn-lp-root { display: block; }

/* ======================================================================
   1. SHARED TYPE
   ====================================================================== */
body .havn-mc .havn-lp-eyebrow {
	display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--mc-text-3) !important; margin-bottom: 6px;
}
body .havn-mc .havn-lp-fineprint { font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3) !important; margin: 10px 0 0; }
body .havn-mc .havn-lp-fineprint strong { color: var(--mc-text-2) !important; font-weight: 600; }
body .havn-mc .havn-lp-fineprint svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-lede { font-size: 15px; line-height: 1.6; color: var(--mc-text-2) !important; margin: 0 0 12px; }
body .havn-mc .is-empty, body .havn-mc .havn-lp-lede.is-empty { color: var(--mc-text-3) !important; font-style: italic; }

/* ======================================================================
   2. THE INDEX  (v2.2.205, second pass)

   Rebuilt after the CEO called the first one clunky. The reference is the
   Google Slides home screen and the lesson from it is subtraction: one band
   of surface to separate "make one" from "open one", generous rhythm between
   sections, a name under each template and nothing else, and almost no
   borders. Everything that was a card is now air.
   ====================================================================== */

/* The view's own rhythm. 44px between sections is the single biggest change
   from the first pass, where everything sat 18px apart and read as one dense
   block whichever part you were looking at. */
.havn-lp-index { display: block; padding-bottom: 52px; }
.havn-lp-index .havn-mc-view-head { margin-bottom: 34px; }

body .havn-mc .havn-lp-h3 {
	margin: 0; font-family: Fraunces, Georgia, serif; font-size: 19px;
	font-weight: 600; letter-spacing: -.01em; color: var(--mc-text) !important;
}
.havn-lp-quiet-btn {
	display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
	border-radius: 8px; background: transparent; border: 0; cursor: pointer;
}
.havn-lp-quiet-btn:hover { background: var(--mc-surface); }
body .havn-mc .havn-lp-quiet-btn { font-size: 12.5px; color: var(--mc-text-3) !important; }
.havn-lp-quiet-btn svg { width: 14px; height: 14px; }

/* ---- starting one, inside the client -----------------------------------
   The templates used to be a full-width band above the workspace with a real
   render on every card. It was the first thing on the screen and the last
   thing an agent needed: a gallery of six cover slides that all look alike,
   between the figures and the work. A presentation is always for somebody, so
   this row lives in that person's pane and the name is what tells the
   templates apart at this size. */
.havn-lp-newrow {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 12px 22px; padding-right: max(22px, var(--lp-bleed, 40px));
	border-bottom: 1px solid var(--mc-border);
	background: var(--mc-surface);
}
body .havn-mc .havn-lp-newrow-label {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--mc-text-3) !important;
}
.havn-lp-newrow-label svg { width: 13px; height: 13px; }
/* Actions → New presentation points here; a row that just scrolled into view
   with nothing to say for itself looks like nothing happened. */
.havn-lp-newrow.is-lit { background: var(--mc-accent-soft); transition: background .3s ease; }

.havn-lp-tchips { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; min-width: 0; }
.havn-lp-tchip {
	display: flex; align-items: center; gap: 9px; text-align: left;
	padding: 7px 12px 7px 9px; border-radius: 9px; cursor: pointer;
	background: var(--mc-bg-2); border: 1px solid var(--mc-border);
	transition: border-color .14s ease, background .14s ease;
	--tpl-accent: var(--mc-accent);
}
.havn-lp-tchip:hover { border-color: var(--mc-accent); background: var(--mc-bg-3); }
.havn-lp-tchip.is-blank { border-style: dashed; background: transparent; }
/* The accent is the only colour a chip carries — enough to tell the auction
   one from the update one at a glance, without six coloured buttons. */
.havn-lp-tchip-bar { width: 3px; align-self: stretch; min-height: 24px; border-radius: 2px; background: var(--tpl-accent); opacity: .9; }
.havn-lp-tchip.is-blank .havn-lp-tchip-bar { background: var(--mc-border-2); }
.havn-lp-tchip-text { display: grid; gap: 0; min-width: 0; }
body .havn-mc .havn-lp-tchip-text strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-tchip-text em { font-size: 10.5px; font-style: normal; color: var(--mc-text-3) !important; }
.havn-lp-tchip.is-waiting { cursor: default; opacity: .45; }
.havn-lp-newrow-note { flex: 1 1 100%; margin: 2px 0 0; }
body .havn-mc .havn-lp-newrow-note { font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-newrow-note.is-blocked { color: var(--mc-warn) !important; }
body .havn-mc .havn-lp-newrow-note a { color: var(--mc-accent) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the four figures, in the header ---------------------------------- */
/* A reading, not a dashboard. They ride in the view header's actions slot so
   an agent glances at them on the way past instead of scrolling over a
   full-width row of cards to reach the work. */
.havn-lp-stats { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.havn-lp-stat { padding: 0 16px; border-left: 1px solid var(--mc-border); min-width: 92px; }
.havn-lp-stat:first-child { border-left: 0; padding-left: 0; }
.havn-lp-stat:last-child { padding-right: 0; }
body .havn-mc .havn-lp-stat-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-stat-value {
	display: block; margin: 1px 0 0; font-family: Fraunces, Georgia, serif;
	font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
	color: var(--mc-text) !important;
}
body .havn-mc .havn-lp-stat-sub { display: block; font-size: 10.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-stat.is-warn .havn-lp-stat-value { color: #E0857B !important; }

/* ---- the client workspace --------------------------------------------- */
/* Edge to edge, and square. A rounded card holding four columns reads as a
   box inside a box — the page frames the work, then the work frames itself
   again. Full width it is simply the screen, and the column rules inside it do
   all the separating that is needed.
   `--lp-bleed` is measured from the dashboard's own gutter in JS; the fallback
   keeps it sane before the first measurement and if the script never runs. */
.havn-lp-work {
	display: grid; grid-template-columns: 286px 1fr; gap: 0;
	border: 1px solid var(--mc-border); border-left: 0; border-right: 0;
	border-radius: 0;
	margin: 0 calc(-1 * var(--lp-bleed, clamp(20px, 3vw, 40px))) 40px;
	overflow: hidden; background: var(--mc-bg-2);
	min-height: 520px;
}

/* left rail: who */
/* The surface runs to the edge of the screen; the words do not. Both outer
   columns put the page's own gutter back inside themselves, so the reading
   line stays where it is everywhere else on the dashboard. */
.havn-lp-clients {
	border-right: 1px solid var(--mc-border); background: var(--mc-surface);
	display: flex; flex-direction: column; min-width: 0;
	padding-left: max(0px, calc(var(--lp-bleed, 40px) - 16px));
}
.havn-lp-clients-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; }
body .havn-mc .havn-lp-clients-count {
	padding: 1px 8px; border-radius: 999px; background: var(--mc-surface-2);
	font-size: 11px; font-weight: 600; color: var(--mc-text-3) !important;
}
.havn-lp-clients-flag { display: flex; align-items: flex-start; gap: 7px; margin: 0 12px 10px; padding: 8px 10px; border-radius: 9px; background: rgba(242,166,90,.09); }
.havn-lp-clients-flag svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; }
body .havn-mc .havn-lp-clients-flag { font-size: 11.5px; line-height: 1.45; color: #F2A65A !important; }
body .havn-mc .havn-lp-clients-flag svg { color: #F2A65A !important; }
body .havn-mc .havn-lp-clients-empty { margin: 0 16px; font-size: 12px; line-height: 1.5; color: var(--mc-text-3) !important; }

.havn-lp-client-list { list-style: none; margin: 0; padding: 0 8px 12px; overflow-y: auto; flex: 1 1 auto; }
.havn-lp-client-row {
	display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center;
	width: 100%; text-align: left; padding: 9px 9px; border-radius: 10px;
	background: transparent; border: 1px solid transparent; cursor: pointer;
}
.havn-lp-client-row:hover { background: var(--mc-surface-2); }
.havn-lp-client-row.is-on { background: var(--mc-accent-soft); border-color: rgba(212,179,112,.28); }
.havn-lp-avatar {
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: color-mix(in srgb, var(--pill) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--pill) 42%, transparent);
}
body .havn-mc .havn-lp-avatar { font-size: 12.5px; font-weight: 700; color: var(--pill) !important; }
.havn-lp-avatar.is-lg { width: 42px; height: 42px; }
body .havn-mc .havn-lp-avatar.is-lg { font-size: 17px; }
.havn-lp-client-text { min-width: 0; display: grid; gap: 1px; }
body .havn-mc .havn-lp-client-name { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-lp-client-sub { font-size: 11.5px; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-lp-client-foot { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--mc-text-3) !important; }
.havn-lp-dot2 { width: 6px; height: 6px; border-radius: 50%; background: var(--pill); flex: 0 0 auto; }
.havn-lp-client-badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--mc-surface-2); }
.havn-lp-client-badge svg { width: 12px; height: 12px; }
body .havn-mc .havn-lp-client-badge svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-client-badge.is-hot svg { color: #F2A65A !important; }

/* right pane: everything about them */
.havn-lp-client-panes { min-width: 0; display: flex; flex-direction: column; }
.havn-lp-client-pane[hidden] { display: none; }
.havn-lp-client-pane { display: flex; flex-direction: column; min-width: 0; }

.havn-lp-cp-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; padding-right: max(22px, var(--lp-bleed, 40px)); border-bottom: 1px solid var(--mc-border); flex-wrap: wrap; }
.havn-lp-cp-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
body .havn-mc .havn-lp-cp-name { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-cp-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--mc-text-3) !important; }
.havn-lp-cp-actions { display: flex; align-items: center; gap: 16px; }
.havn-lp-cp-money { display: grid; text-align: right; }
body .havn-mc .havn-lp-cp-money strong { font-size: 15px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-cp-money em { font-size: 11px; font-style: normal; color: var(--mc-text-3) !important; }

.havn-lp-client-menu { width: 244px; }
.havn-lp-client-menu button { align-items: flex-start !important; }
.havn-lp-client-menu svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
body .havn-mc .havn-lp-client-menu svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-client-menu strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-client-menu em { display: block; font-size: 11px; font-style: normal; color: var(--mc-text-3) !important; }

/* Two columns across the screen: what they have, and where the chosen one got
   to. There was a third — who they are — pinned open at 324px on every screen
   whether it was wanted or not, which spent a third of the workspace on facts
   an agent reads twice a week. It is a drawer now (see below) and the work has
   the width back. */
.havn-lp-cp-body {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0; flex: 1 1 auto; min-height: 0;
}
.havn-lp-cp-col { padding: 18px 20px 22px; min-width: 0; }
.havn-lp-cp-prog {
	border-left: 1px solid var(--mc-border);
	/* The last column puts the page's own gutter back inside itself, the way
	   the client rail does at the other edge — the surface runs to the edge of
	   the screen, the reading line does not. */
	padding-right: max(20px, var(--lp-bleed, 40px));
}
.havn-lp-cp-sec-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.havn-lp-cp-sec-head.is-spaced { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-cp-empty { font-size: 12px; line-height: 1.5; color: var(--mc-text-3) !important; }

/* the number, in the header, one tap from the name it belongs to */
.havn-lp-quick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--mc-surface-2); text-decoration: none; }
.havn-lp-quick svg { width: 13px; height: 13px; }
body .havn-mc .havn-lp-quick { font-size: 12px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-quick:hover { color: var(--mc-accent) !important; }
.havn-lp-havn-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--mc-accent-soft); }
.havn-lp-havn-tag svg { width: 11px; height: 11px; }
body .havn-mc .havn-lp-havn-tag { font-size: 10.5px; font-weight: 600; color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-from-havn { font-size: 10.5px; color: var(--mc-accent) !important; }

/* ---- column 3: where this one has got to ------------------------------ */
.havn-lp-prog[hidden] { display: none; }
.havn-lp-prog-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
body .havn-mc .havn-lp-prog-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--mc-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-lp-prog-name em { font-style: normal; font-weight: 500; color: var(--mc-text-3) !important; }
/* The status chip. It reads as a label rather than as a sentence, and it
   carries the one colour on the row — everything around it is grey so that
   this is the thing the eye lands on. */
.havn-lp-pill {
	display: inline-block; flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
	background: color-mix(in srgb, var(--pill, #9AA0A6) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pill, #9AA0A6) 32%, transparent);
	white-space: nowrap;
}
/* The tint has to be restated at this weight: the row is a <button>, and the
   site's button CSS paints what is inside one — the same cascade that ate the
   colour swatches. */
body .havn-mc .havn-lp-pill {
	font-size: 10px; font-weight: 700; line-height: 1.5;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--pill, #9AA0A6) !important;
	background: color-mix(in srgb, var(--pill, #9AA0A6) 16%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--pill, #9AA0A6) 32%, transparent) !important;
}
.havn-lp-prog-head .havn-lp-pill { flex: 0 0 auto; }

/* Five steps rather than a percentage. "62%" tells an agent to do something
   without saying what; "two things to finish" names them. */
.havn-lp-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.havn-lp-steps li { position: relative; display: grid; grid-template-columns: 11px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; }
.havn-lp-steps li i { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid var(--mc-border-2); }
.havn-lp-steps li.is-done i { background: var(--mc-text-3); border-color: var(--mc-text-3); }
.havn-lp-steps li.is-now i { background: var(--mc-accent); border-color: var(--mc-accent); box-shadow: 0 0 0 3px var(--mc-accent-soft); }
.havn-lp-steps li.is-now.tone-win i { background: var(--mc-success); border-color: var(--mc-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-success) 18%, transparent); }
.havn-lp-steps li.is-now.tone-warn i { background: #F2A65A; border-color: #F2A65A; box-shadow: 0 0 0 3px rgba(242,166,90,.18); }
.havn-lp-steps li::before { content: ''; position: absolute; left: 4px; top: 18px; bottom: -7px; width: 1px; background: var(--mc-border); }
.havn-lp-steps li:last-child::before { display: none; }
body .havn-mc .havn-lp-step-label { font-size: 12.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-steps li.is-done .havn-lp-step-label { color: var(--mc-text) !important; font-weight: 500; }
body .havn-mc .havn-lp-steps li.is-now .havn-lp-step-label { font-weight: 650; }
.havn-lp-step-when { text-align: right; }
body .havn-mc .havn-lp-step-when { font-size: 10.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-step-when em { display: block; font-style: normal; }

.havn-lp-prog-gate { padding: 11px 12px; border-radius: 10px; margin-bottom: 12px; }
.havn-lp-prog-gate.is-block { background: rgba(224,133,123,.08); border: 1px solid rgba(224,133,123,.2); }
.havn-lp-prog-gate.is-warn { background: rgba(242,166,90,.07); border: 1px solid rgba(242,166,90,.18); }
.havn-lp-prog-gate-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.havn-lp-prog-gate-head svg { width: 13px; height: 13px; }
body .havn-mc .havn-lp-prog-gate.is-block .havn-lp-prog-gate-head { font-size: 11.5px; font-weight: 650; color: #E0857B !important; }
body .havn-mc .havn-lp-prog-gate.is-warn .havn-lp-prog-gate-head { font-size: 11.5px; font-weight: 650; color: #F2A65A !important; }
.havn-lp-prog-gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body .havn-mc .havn-lp-prog-gate strong { display: block; font-size: 12px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-prog-gate em { display: block; margin-top: 1px; font-size: 11px; font-style: normal; line-height: 1.45; color: var(--mc-text-3) !important; }

.havn-lp-prog-line { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; }
.havn-lp-prog-line svg { width: 13px; height: 13px; flex: 0 0 auto; }
body .havn-mc .havn-lp-prog-line { font-size: 11.5px; color: var(--mc-text-3) !important; }
.havn-lp-prog-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---- column 4: who they are ------------------------------------------- */
.havn-lp-cfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.havn-lp-cfacts li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; align-items: start; }
.havn-lp-cfacts svg { width: 14px; height: 14px; margin-top: 2px; }
body .havn-mc .havn-lp-cfacts svg { color: var(--mc-text-3) !important; }
.havn-lp-cfacts li > span { min-width: 0; display: block; }
body .havn-mc .havn-lp-cfacts li > span { font-size: 12.5px; color: var(--mc-text) !important; word-break: break-word; }
body .havn-mc .havn-lp-cfacts em { display: block; margin-top: 1px; font-size: 11px; font-style: normal; line-height: 1.45; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-cfacts a { color: var(--mc-text) !important; text-decoration: none; }
body .havn-mc .havn-lp-cfacts a:hover { color: var(--mc-accent) !important; text-decoration: underline; text-underline-offset: 2px; }
body .havn-mc .havn-lp-cfacts em a { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-cfacts li.is-missing svg { color: #F2A65A !important; }

/* In their words. It is the one line on this screen that decides how the
   price conversation goes, so it is not paraphrased into a field. */
.havn-lp-cgoal { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--mc-bg-3); }
body .havn-mc .havn-lp-cgoal > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-cgoal q { display: block; margin-top: 4px; font-size: 12px; font-style: italic; line-height: 1.55; color: var(--mc-text-2) !important; }

.havn-lp-leadcard { margin-top: 14px; padding: 11px 12px; border-radius: 10px; background: var(--mc-accent-soft); border: 1px solid rgba(212,179,112,.2); }
.havn-lp-leadcard-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.havn-lp-leadcard-head svg { width: 13px; height: 13px; }
body .havn-mc .havn-lp-leadcard-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--mc-accent) !important; }
.havn-lp-leadcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.havn-lp-leadcard li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body .havn-mc .havn-lp-leadcard li span { font-size: 11px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-leadcard li strong { font-size: 11.5px; font-weight: 600; text-align: right; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-leadcard q { display: block; margin-top: 8px; font-size: 11.5px; font-style: italic; line-height: 1.5; color: var(--mc-text-2) !important; }

.havn-lp-propcard { margin-top: 18px; padding: 12px 13px; border-radius: 10px; background: var(--mc-bg-3); border: 1px solid var(--mc-border); }
.havn-lp-propcard + .havn-lp-propcard { margin-top: 10px; }
.havn-lp-propcard-head { display: flex; align-items: center; gap: 7px; }
.havn-lp-propcard-head svg { width: 14px; height: 14px; flex: 0 0 auto; }
body .havn-mc .havn-lp-propcard-head { font-size: 12.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-propcard-head svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-propcard-sub { display: block; margin: 2px 0 0 21px; font-size: 11px; color: var(--mc-text-3) !important; }
.havn-lp-spec { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.havn-lp-spec li { display: flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 7px; background: var(--mc-surface-2); }
body .havn-mc .havn-lp-spec strong { font-size: 12px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-spec span { font-size: 10.5px; color: var(--mc-text-3) !important; }
.havn-lp-propcard-line { margin: 11px 0 0; }
body .havn-mc .havn-lp-propcard-line span { display: block; font-size: 10.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-propcard-line strong { font-size: 13px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-propcard-line em { font-size: 10.5px; font-style: normal; color: var(--mc-text-3) !important; margin-left: 6px; }
.havn-lp-propcard-thin { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; }
.havn-lp-propcard-thin svg { width: 12px; height: 12px; flex: 0 0 auto; }
body .havn-mc .havn-lp-propcard-thin { font-size: 10.5px; color: #F2A65A !important; }

/* The timeline can run to forty entries; the property below it should not
   need forty scrolls to reach. */
.havn-lp-tlwrap { max-height: 440px; overflow-y: auto; }
body .havn-mc .havn-lp-cp-sec-head h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-cp-sec-head span { font-size: 11px; color: var(--mc-text-3) !important; }

/* the presentations, as a list */
.havn-lp-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.havn-lp-prow {
	display: grid; grid-template-columns: minmax(0, 74px) minmax(0, 1fr); gap: 14px; align-items: center;
	width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px;
	background: transparent; border: 1px solid transparent; cursor: pointer;
}
.havn-lp-prow:hover { background: var(--mc-surface); border-color: var(--mc-border); }
/* Choosing one fills the column beside it. Selected, not opened — a stray
   click should not throw an agent into a full-screen editor. */
.havn-lp-prow.is-on { background: var(--mc-accent-soft); border-color: rgba(212,179,112,.28); }
.havn-lp-prow-thumb {
	position: relative; display: block; width: 100%; aspect-ratio: var(--lp-ar, 16 / 9);
	border-radius: 5px; overflow: hidden; background: var(--mc-bg-3); border: 1px solid var(--mc-border);
}
.havn-lp-prow-text { min-width: 0; display: grid; gap: 3px; }
.havn-lp-prow-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* The address truncates and the pill never does: a status that has wrapped to
   two lines beside a wrapped address is two illegible things instead of one
   readable one. */
body .havn-mc .havn-lp-prow-name {
	flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
	color: var(--mc-text) !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.havn-lp-prow-top .havn-lp-pill { flex: 0 0 auto; }
body .havn-mc .havn-lp-prow-name em { font-style: normal; font-weight: 500; color: var(--mc-text-3) !important; }
.havn-lp-prow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
body .havn-mc .havn-lp-prow-meta span { font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-prow-note { color: var(--mc-text-2) !important; }
/* notes + what has happened, one list */
.havn-lp-noteform { display: grid; gap: 7px; margin-bottom: 16px; }
body .havn-mc .havn-lp-notebox {
	display: block; box-sizing: border-box !important; width: 100% !important;
	padding: 8px 10px !important; margin: 0 !important;
	font: 400 12px/1.5 Inter, system-ui, sans-serif !important;
	color: var(--mc-text) !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important; border-radius: 9px !important;
	resize: vertical !important; min-height: 78px !important;
}
body .havn-mc .havn-lp-notebox:focus { outline: none !important; border-color: var(--mc-accent) !important; }
.havn-lp-noteform button { justify-self: start; }

.havn-lp-timeline2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.havn-lp-timeline2 li { display: grid; grid-template-columns: 9px 1fr; gap: 11px; padding: 9px 0 9px 0; position: relative; }
.havn-lp-timeline2 li i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--mc-text-3); }
.havn-lp-timeline2 li.is-vendor i { background: var(--mc-accent); }
.havn-lp-timeline2 li.is-win i { background: var(--mc-success); }
.havn-lp-timeline2 li.is-note i { background: var(--mc-info); }
/* A hairline down the list rather than a rule per row. */
.havn-lp-timeline2 li::before { content: ''; position: absolute; left: 3px; top: 16px; bottom: -9px; width: 1px; background: var(--mc-border); }
.havn-lp-timeline2 li:last-child::before { display: none; }
body .havn-mc .havn-lp-tl-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-tl-detail { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-tl-detail.is-quote { font-style: italic; padding-left: 9px; border-left: 2px solid var(--mc-accent); }
body .havn-mc .havn-lp-tl-when { display: block; margin-top: 3px; font-size: 10.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-tl-empty { display: block; font-size: 12px; color: var(--mc-text-3) !important; padding: 4px 0; }

/* ---- what the templates are filled from, folded away ------------------ */
.havn-lp-sources-fold { border-top: 1px solid var(--mc-border); padding-top: 18px; }
.havn-lp-sources-fold summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; padding: 4px 0; }
.havn-lp-sources-fold summary::-webkit-details-marker { display: none; }
.havn-lp-sources-fold summary svg { width: 14px; height: 14px; flex: 0 0 auto; }
.havn-lp-sources-fold summary svg:last-child { margin-left: auto; transition: transform .18s ease; }
.havn-lp-sources-fold[open] summary svg:last-child { transform: rotate(90deg); }
body .havn-mc .havn-lp-sources-fold summary span { font-size: 12.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-sources-fold summary svg { color: var(--mc-text-3) !important; }
.havn-lp-sources-fold .havn-lp-source-list { margin-top: 18px; }

.havn-lp-source-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 26px; }
.havn-lp-source-list li { display: grid; grid-template-columns: 10px 1fr; gap: 11px; align-items: start; }
.havn-lp-src-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--mc-success); }
.havn-lp-source-list li.is-partial .havn-lp-src-dot { background: var(--mc-warn); }
.havn-lp-source-list li.is-off .havn-lp-src-dot { background: var(--mc-text-3); }
body .havn-mc .havn-lp-source-list strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-src-from { display: block; font-size: 11.5px; color: var(--mc-text-3) !important; margin-top: 1px; }
body .havn-mc .havn-lp-source-list p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-source-list li.is-partial p { color: var(--mc-warn) !important; opacity: .85; }

/* ======================================================================
   3. THE EDITOR
   ====================================================================== */
.havn-lp-editor {
	position: fixed; inset: 0; z-index: 8500; display: grid;
	grid-template-rows: auto auto auto 1fr; background: var(--mc-bg);
}
.havn-lp-editor[hidden] { display: none; }

.havn-lp-ed-top {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 10px 18px; border-bottom: 1px solid var(--mc-border); background: var(--mc-bg-2); flex-wrap: wrap;
}
.havn-lp-ed-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Restated at this weight because the site's own button CSS owns padding,
   min-height and background on every <button> — which is what turned this into
   a wide blank slab in the corner of the screen. */
body .havn-mc .havn-lp-ed-back {
	display: inline-flex !important; align-items: center; gap: 7px; flex: 0 0 auto;
	width: auto !important; min-height: 0 !important;
	padding: 7px 12px 7px 9px !important; margin: 0 !important;
	border-radius: 9px !important; background: var(--mc-surface) !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important;
	cursor: pointer; transform: none !important;
	font-size: 12.5px !important; font-weight: 500 !important;
	letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-text-2) !important;
}
body .havn-mc .havn-lp-ed-back:hover {
	background: var(--mc-surface-2) !important; border-color: var(--mc-border-2) !important;
	color: var(--mc-text) !important;
}
.havn-lp-ed-back svg { width: 15px; height: 15px; flex: 0 0 auto; }
body .havn-mc .havn-lp-ed-back svg { color: currentColor !important; }
body .havn-mc .havn-lp-ed-title {
	display: block; box-sizing: border-box !important; width: 340px !important; max-width: 46vw !important;
	padding: 3px 7px !important; margin: 0 !important;
	font: 600 16px/1.3 Inter, system-ui, sans-serif !important;
	color: var(--mc-text) !important; background: transparent !important;
	border: 1px solid transparent !important; border-radius: 7px !important;
}
body .havn-mc .havn-lp-ed-title:hover { border-color: var(--mc-border) !important; }
body .havn-mc .havn-lp-ed-title:focus { outline: none !important; border-color: var(--mc-accent) !important; background: var(--mc-surface) !important; }
.havn-lp-ed-sub { display: flex; align-items: center; gap: 7px; padding-left: 8px; margin-top: 1px; }
body .havn-mc .havn-lp-ed-sub span { font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-ed-sub [data-lp-saved].is-saving { color: var(--mc-accent) !important; }
.havn-lp-ed-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- the ratio menu --------------------------------------------------- */
.havn-lp-menu { position: relative; }
.havn-lp-menu-pop {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 288px; padding: 8px;
	border-radius: 13px; background: var(--mc-bg-2); border: 1px solid var(--mc-border-2);
	box-shadow: 0 24px 48px -20px rgba(0,0,0,.65);
}
.havn-lp-menu-pop[hidden] { display: none; }
body .havn-mc .havn-lp-menu-head { display: block; padding: 4px 9px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-menu-pop button:not(.havn-lp-swatch) {
	display: flex !important; align-items: center; gap: 11px;
	box-sizing: border-box !important; width: 100% !important; text-align: left !important;
	padding: 8px 9px !important; margin: 0 !important; min-height: 0 !important;
	border-radius: 9px !important; background: transparent !important; border: 0 !important;
	box-shadow: none !important; cursor: pointer !important; transform: none !important;
	text-transform: none !important; letter-spacing: normal !important;
}
body .havn-mc .havn-lp-menu-pop button:not(.havn-lp-swatch):hover { background: var(--mc-surface) !important; }
body .havn-mc .havn-lp-menu-pop button:not(.havn-lp-swatch).is-on { background: var(--mc-accent-soft) !important; }
/* The swatch grid is not a stack of rows of menu items. */

.havn-lp-ratio-chip { flex: 0 0 auto; width: 26px; border: 1.5px solid var(--mc-text-3); border-radius: 3px; }
.havn-lp-menu-pop button.is-on .havn-lp-ratio-chip { border-color: var(--mc-accent); }
body .havn-mc .havn-lp-menu-pop strong { display: block; font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-menu-pop em { display: block; font-size: 11px; font-style: normal; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-menu-note { margin: 6px 9px 4px; font-size: 11px; line-height: 1.5; color: var(--mc-text-3) !important; }

/* ---- the gate bar ----------------------------------------------------- */
.havn-lp-ed-gate {
	display: flex; align-items: center; gap: 11px; padding: 9px 18px;
	background: rgba(224,133,123,.09); border-bottom: 1px solid rgba(224,133,123,.24);
}
.havn-lp-ed-gate > svg { flex: 0 0 auto; width: 16px; height: 16px; }
body .havn-mc .havn-lp-ed-gate > svg { color: #E0857B !important; }
body .havn-mc .havn-lp-ed-gate span { flex: 1 1 auto; font-size: 12.5px; line-height: 1.5; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-ed-gate strong { color: #E0857B !important; font-weight: 650; }

/* ---- the toolbar ------------------------------------------------------ */
/* Two rows that mean two different things: the deck and the slide on top,
   what is selected underneath. One row that mixed them jumped sideways every
   time an agent clicked a block. */
.havn-lp-ed-bar {
	display: grid; gap: 0; padding: 0;
	border-bottom: 1px solid var(--mc-border); background: var(--mc-bg-2);
}
.havn-lp-bar-row {
	display: flex; align-items: center; gap: 3px; padding: 6px 14px; flex-wrap: wrap;
	min-height: 40px; box-sizing: border-box;
}
.havn-lp-bar-row.havn-lp-fmt { border-top: 1px solid var(--mc-border); background: var(--mc-surface); }
.havn-lp-bar-right { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.havn-lp-when-text[hidden], .havn-lp-when-line[hidden],
.havn-lp-when-image[hidden], .havn-lp-when-rich[hidden] { display: none !important; }
.havn-lp-tool {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
	border-radius: 8px; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.havn-lp-tool:hover { background: var(--mc-surface); border-color: var(--mc-border); }
.havn-lp-tool svg { width: 15px; height: 15px; }
body .havn-mc .havn-lp-tool { font-size: 12.5px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-tool svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-tool.is-danger { color: #E0857B !important; }
body .havn-mc .havn-lp-tool.is-danger svg { color: #E0857B !important; }
body .havn-mc .havn-lp-tool sup { font-size: 9px; }
.havn-lp-tool-sep { width: 1px; height: 20px; margin: 0 5px; background: var(--mc-border); flex: 0 0 auto; }
.havn-lp-fmt { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.havn-lp-fmt[hidden] { display: none; }

/* A square button for the one-glyph controls — B, I, U and the two arrows —
   so they read as a row of switches rather than as five little words. */
.havn-lp-tool.is-sq { width: 30px; padding: 6px 0; justify-content: center; gap: 0; }
body .havn-mc .havn-lp-tool.is-sq { font-size: 13px; }
body .havn-mc .havn-lp-tool.is-on { background: var(--mc-accent-soft); border-color: rgba(212,179,112,.3); color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-tool.is-on svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-tool[disabled] { opacity: .35; cursor: default; }
body .havn-mc .havn-lp-tool[disabled]:hover { background: transparent; border-color: transparent; }
.havn-lp-tool u { text-underline-offset: 2px; }

/* The size box. Typing 28 into it is the point — three named steps could not
   answer "make it a bit bigger than the line above". */
.havn-lp-size { display: inline-flex; align-items: center; gap: 2px; }
body .havn-mc .havn-lp-size-in {
	box-sizing: border-box !important; width: 44px !important; padding: 5px 4px !important;
	margin: 0 !important; text-align: center !important;
	font: 600 12.5px/1.2 Inter, system-ui, sans-serif !important;
	color: var(--mc-text) !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important; border-radius: 7px !important;
	min-height: 0 !important; height: auto !important;
}
body .havn-mc .havn-lp-size-in:focus { outline: none !important; border-color: var(--mc-accent) !important; }

/* A segmented row inside a popover: four choices where one is on. */
.havn-lp-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 5px 8px; }
body .havn-mc .havn-lp-menu-pop .havn-lp-seg button {
	width: auto !important; flex: 1 1 auto; justify-content: center;
	padding: 6px 8px !important; border: 1px solid var(--mc-border) !important;
	background: var(--mc-bg-3) !important; font-size: 11.5px !important;
	white-space: nowrap; color: var(--mc-text-2) !important;
}
body .havn-mc .havn-lp-menu-pop .havn-lp-seg button:hover { border-color: var(--mc-border-2) !important; }
body .havn-mc .havn-lp-menu-pop .havn-lp-seg button.is-on {
	background: var(--mc-accent-soft) !important; border-color: rgba(212,179,112,.34) !important;
	color: var(--mc-accent) !important;
}

/* A slider with the number beside it, because "thickness" without a figure is
   a control you have to drag twice to understand. */
.havn-lp-range { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 8px; padding: 2px 9px 9px; }
body .havn-mc .havn-lp-range label { font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-range output { font-size: 11.5px; text-align: right; color: var(--mc-text-2) !important; font-variant-numeric: tabular-nums; }
body .havn-mc .havn-lp-range input[type="range"] {
	-webkit-appearance: none; appearance: none; width: 100% !important; height: 3px !important;
	padding: 0 !important; margin: 0 !important; min-height: 0 !important;
	background: var(--mc-border-2) !important; border: 0 !important; border-radius: 2px !important;
}
body .havn-mc .havn-lp-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
	background: var(--mc-accent); border: 0; cursor: pointer;
}

/* The shape picker, and the chips that show what each one is. */
.havn-lp-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 5px 8px; }
body .havn-mc .havn-lp-shape-pop .havn-lp-shape-grid button {
	display: grid !important; place-items: center; gap: 6px;
	width: 100% !important; padding: 10px 6px !important;
	border: 1px solid var(--mc-border) !important; background: var(--mc-bg-3) !important;
	font-size: 11px !important; color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-shape-pop .havn-lp-shape-grid button:hover { border-color: var(--mc-accent) !important; }
.havn-lp-shape-chip { width: 30px; height: 22px; background: var(--mc-text-3); display: block; }
.havn-lp-shape-chip.sp-rounded { border-radius: 5px; }
.havn-lp-shape-chip.sp-ellipse { border-radius: 50%; width: 26px; height: 26px; }

/* What kind of text this is — each row set in the face it will produce. */
.havn-lp-kind-pop { width: 264px; }
body .havn-mc .havn-lp-kind-chip {
	display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 26px;
	border-radius: 6px; background: var(--mc-bg-3); font-style: normal;
	color: var(--mc-text) !important;
}
body .havn-mc .havn-lp-kind-chip.is-heading { font-size: 15px; font-weight: 700; }
body .havn-mc .havn-lp-kind-chip.is-body    { font-size: 12px; }
body .havn-mc .havn-lp-kind-chip.is-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .1em; }
body .havn-mc .havn-lp-kind-chip.is-price   { font-size: 15px; font-weight: 600; color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-kind-chip.is-quote   { font-size: 13px; font-style: italic; font-family: Fraunces, Georgia, serif; }
body .havn-mc .havn-lp-kind-chip.is-note    { font-size: 9px; color: var(--mc-text-3) !important; }

/* Twenty typefaces is a list, not a menu — it scrolls inside the popover. */
.havn-lp-font-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }

/* Alt text. */
.havn-lp-alt { display: block; padding: 0 5px 6px; }
body .havn-mc .havn-lp-alt input {
	box-sizing: border-box !important; width: 100% !important; padding: 7px 9px !important;
	margin: 0 !important; min-height: 0 !important;
	font: 400 12px/1.4 Inter, system-ui, sans-serif !important;
	color: var(--mc-text) !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important; border-radius: 8px !important;
}
body .havn-mc .havn-lp-alt input:focus { outline: none !important; border-color: var(--mc-accent) !important; }

/* The typeface rows show the face they are offering. */
.havn-lp-type-pop, .havn-lp-box-pop, .havn-lp-align-pop, .havn-lp-arrange-pop,
.havn-lp-slide-pop { width: 272px; max-height: 68vh; overflow-y: auto; overscroll-behavior: contain; }
body .havn-mc .havn-lp-font-row i {
	display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 26px;
	border-radius: 6px; background: var(--mc-bg-3); font-style: normal; font-size: 13px;
	color: var(--mc-text) !important;
}
/* The Box popover holds a swatch menu of its own; it must not be clipped by
   the popover it sits in, and it opens inwards so it stays on the screen. */
.havn-lp-box-pop .havn-lp-swatch-menu { padding: 0 5px 8px; }
body .havn-mc .havn-lp-box-pop .havn-lp-swatch-menu > button {
	width: 100% !important; justify-content: flex-start;
	border: 1px solid var(--mc-border) !important; background: var(--mc-bg-3) !important;
}
.havn-lp-box-pop .havn-lp-swatch-pop { right: auto; left: 0; }
body .havn-mc .havn-lp-ed-hint { margin-left: auto; font-size: 11.5px; color: var(--mc-text-3) !important; }

/* ---- rail / stage / side --------------------------------------------- */
.havn-lp-ed-body { display: grid; grid-template-columns: 178px 1fr 268px; min-height: 0; position: relative; }

.havn-lp-rail2 { overflow-y: auto; padding: 12px 10px; border-right: 1px solid var(--mc-border); display: grid; gap: 7px; align-content: start; }
.havn-lp-thumb { display: grid; grid-template-columns: 16px 1fr; gap: 7px; align-items: start; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; }
body .havn-mc .havn-lp-thumb-n { font-size: 10.5px; font-weight: 600; color: var(--mc-text-3) !important; padding-top: 3px; }
.havn-lp-thumb-box {
	position: relative; display: block; width: 100%; aspect-ratio: var(--lp-ar, 16 / 9);
	overflow: hidden; border-radius: 5px; background: var(--mc-bg-3);
	border: 1.5px solid var(--mc-border); transition: border-color .14s ease;
}
.havn-lp-thumb:hover .havn-lp-thumb-box { border-color: var(--mc-border-2); }
.havn-lp-thumb.is-on .havn-lp-thumb-box { border-color: var(--mc-accent); }
body .havn-mc .havn-lp-thumb-label { grid-column: 2; font-size: 10.5px; line-height: 1.3; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-thumb.is-on .havn-lp-thumb-label { color: var(--mc-text-2) !important; }
.havn-lp-thumb-add {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px;
	padding: 9px; border-radius: 8px; background: transparent;
	border: 1px dashed var(--mc-border-2); cursor: pointer;
}
body .havn-mc .havn-lp-thumb-add { font-size: 11.5px; color: var(--mc-text-3) !important; }
.havn-lp-thumb-add svg { width: 14px; height: 14px; }

.havn-lp-stagewrap { display: grid; grid-template-rows: 1fr auto; min-width: 0; min-height: 0; background: var(--mc-bg); }
.havn-lp-stage2 { display: grid; place-items: center; padding: 22px; min-height: 0; overflow: hidden; }
/* Width is set by fitStage() in JS — whichever axis of the stage runs out
   first. The max-width here is only the upper bound for a very wide screen. */
.havn-lp-slide-host { width: 100%; max-width: 1040px; }
.havn-lp-slide-host[hidden] { display: none; }

.havn-lp-notes { padding: 9px 22px 13px; border-top: 1px solid var(--mc-border); background: var(--mc-bg-2); }
body .havn-mc .havn-lp-notes-label { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-notes-in {
	display: block; box-sizing: border-box !important; width: 100% !important;
	padding: 8px 11px !important; margin: 0 !important;
	font: 400 12.5px/1.55 Inter, system-ui, sans-serif !important;
	color: var(--mc-text) !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border) !important; border-radius: 9px !important;
	resize: vertical !important;
}
body .havn-mc .havn-lp-notes-in:focus { outline: none !important; border-color: var(--mc-accent) !important; }

.havn-lp-side { overflow-y: auto; border-left: 1px solid var(--mc-border); background: var(--mc-bg-2); display: grid; grid-template-rows: auto 1fr auto; position: relative; }

/* Folded away: the column collapses to nothing and a tab appears against the
   edge to bring it back. Width is animated on the grid rather than on the
   panel, so the canvas genuinely gets the space instead of the panel sliding
   over the top of it. */
.havn-lp-ed-body { transition: grid-template-columns .2s ease; }
.havn-lp-ed-body.is-side-folded { grid-template-columns: 178px 1fr 0px; }
.havn-lp-ed-body.is-side-folded .havn-lp-side { overflow: hidden; border-left: 0; }
.havn-lp-ed-body.is-side-folded .havn-lp-side > * { display: none; }

.havn-lp-side-fold {
	position: absolute; right: 10px; top: 11px; z-index: 2;
	display: grid; place-items: center; width: 24px; height: 24px;
	border-radius: 7px; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.havn-lp-side-fold:hover { background: var(--mc-surface); border-color: var(--mc-border); }
.havn-lp-side-fold svg { width: 14px; height: 14px; }
body .havn-mc .havn-lp-side-fold svg { color: var(--mc-text-3) !important; }

.havn-lp-side-tab {
	display: none; position: absolute; right: 0; top: 96px; z-index: 6;
	place-items: center; width: 30px; height: 52px;
	border-radius: 10px 0 0 10px; cursor: pointer;
	background: var(--mc-surface) !important; border: 1px solid var(--mc-border) !important; border-right: 0 !important;
}
.havn-lp-ed-body.is-side-folded .havn-lp-side-tab { display: grid; }
.havn-lp-side-tab svg { width: 15px; height: 15px; }
body .havn-mc .havn-lp-side-tab svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-side-tab:hover svg { color: var(--mc-accent) !important; }
.havn-lp-side-head { padding: 14px 15px 10px; border-bottom: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-side-head p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--mc-text-3) !important; }
.havn-lp-side-list { padding: 10px; overflow-y: auto; }
.havn-lp-side-group { margin-bottom: 12px; }
body .havn-mc .havn-lp-side-group-head {
	/* Wraps rather than shrinks: "Our fee, and what you would take home" runs
	   to two lines in this rail, and a badge vertically centred against two
	   lines reads as floating loose in the middle of them. */
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; padding: 0 6px 5px;
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-side-group-head em { font-size: 9px; font-style: normal; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; }
body .havn-mc .havn-lp-side-group-head em.is-gap { background: rgba(224,133,123,.14); color: #E0857B !important; }
body .havn-mc .havn-lp-side-group-head em.is-insufficient { background: rgba(224,194,133,.14); color: var(--mc-warn) !important; }
.havn-lp-side-item {
	display: grid; grid-template-columns: 16px 1fr 14px; gap: 9px; align-items: center; width: 100%;
	padding: 8px 9px; border-radius: 8px; background: transparent; border: 1px solid transparent;
	cursor: pointer; text-align: left;
}
.havn-lp-side-item:hover { background: var(--mc-surface); border-color: var(--mc-border); }
.havn-lp-side-item svg { width: 15px; height: 15px; }
.havn-lp-side-item svg:last-child { width: 13px; height: 13px; opacity: 0; }
.havn-lp-side-item:hover svg:last-child { opacity: 1; }
body .havn-mc .havn-lp-side-item span { font-size: 12.5px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-side-item svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-side-item:hover svg:last-child { color: var(--mc-accent) !important; }
.havn-lp-side-foot { display: flex; align-items: flex-start; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--mc-border); }
.havn-lp-side-foot svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
body .havn-mc .havn-lp-side-foot { font-size: 11px; line-height: 1.5; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-side-foot svg { color: var(--mc-accent) !important; }

/* ======================================================================
   4. THE CANVAS — one stylesheet, every size
   ====================================================================== */
.havn-lp-canvas {
	position: relative; width: 100%; aspect-ratio: var(--lp-ar, 16 / 9);
	background: var(--mc-bg-2); border: 1px solid var(--mc-border);
	border-radius: 10px; overflow: hidden;
	--u: 10px;   /* JS overwrites this per canvas: one hundredth of its width */
}
.havn-lp-blk { position: absolute; }
/* Only a picture and a rule clip; everything carrying words grows — see the
   note in havn_lp_render_block(). */
.havn-lp-blk.is-image, .havn-lp-blk.is-divider { overflow: hidden; }
/* A shape is a block with nothing written in it: the fill, the border and the
   rounding ARE the shape, so it needs no contents of its own — only a height
   that stays where it was dragged. */
.havn-lp-blk.is-shape { box-sizing: border-box; }
.havn-lp-blk.is-shape.sp-ellipse { border-radius: 50% !important; }

/* The rule, with its own style, thickness and colour. A line you could not
   recolour was the thing the review called "very limited". */
.havn-lp-blk-rule {
	display: block; width: 100%; height: 0;
	background: none;
	border-top: calc(var(--u) * var(--blk-bw, .2)) solid var(--blk-rule, var(--mc-border-2));
}
.havn-lp-blk.rl-dashed .havn-lp-blk-rule { border-top-style: dashed; }
.havn-lp-blk.rl-dotted .havn-lp-blk-rule { border-top-style: dotted; }
.havn-lp-blk.rl-double .havn-lp-blk-rule { border-top-style: double; border-top-width: calc(var(--u) * var(--blk-bw, .3) * 2); }

/* How a picture sits in its box.
   The default is `fill` — the whole picture, following the box. It used to be
   `cover`, which crops whatever does not fit, silently and differently
   depending on which way you dragged. Dragging a corner keeps the picture's
   own shape (see the resize code), so filling the box does not distort it;
   cropping is now something an agent chooses rather than something that
   happens to them. */
.havn-lp-blk.is-image img { width: 100%; height: 100%; object-fit: fill; display: block; }
.havn-lp-blk.fit-contain img { object-fit: contain; }
.havn-lp-blk.fit-cover img   { object-fit: cover; }
.havn-lp-blk.is-image.has-img .havn-lp-blk-img-empty { display: none; }

/* What the block is doing while you drag it. Shown at the corner rather than
   in the toolbar, because it is about the thing under the cursor. */
.havn-lp-drag-tip {
	position: absolute; z-index: 9; pointer-events: none;
	padding: 4px 8px; border-radius: 7px; white-space: nowrap;
	background: var(--mc-bg); border: 1px solid var(--mc-border-2);
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
body .havn-mc .havn-lp-drag-tip {
	font: 600 11px/1.3 Inter, system-ui, sans-serif !important;
	color: var(--mc-text-2) !important; font-variant-numeric: tabular-nums;
}
body .havn-mc .havn-lp-drag-tip em {
	display: block; font-style: normal; font-weight: 500; font-size: 10px;
	color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-drag-tip.is-warn em { color: #F2A65A !important; }
.havn-lp-blk-text { width: 100%; }

/* Type scales with the canvas. Never a px value in here. */
body .havn-mc .havn-lp-blk { font-size: calc(var(--u) * 1.5); line-height: 1.5; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-blk.is-eyebrow { font-size: calc(var(--u) * 1.05); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-blk.is-heading { font-size: calc(var(--u) * 4); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-blk.is-body    { font-size: calc(var(--u) * 1.6); color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-blk.is-price   { font-size: calc(var(--u) * 5.2); font-weight: 600; letter-spacing: -.02em; color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-blk.is-quote   { font-size: calc(var(--u) * 2.2); font-style: italic; line-height: 1.45; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-blk.is-note    { font-size: calc(var(--u) * 1.05); line-height: 1.5; color: var(--mc-text-3) !important; }
/* ---- everything an agent can change about a block ----------------------
   Each control writes one custom property, and every one of them is expressed
   in `--u` — a tenth of a `--u` is a point against a 1000pt slide, which is
   why the number in the toolbar means the same thing on a 16:9 screen and on
   an A4 page. A px anywhere in here would break at the first thumbnail. */
body .havn-mc .havn-lp-blk[style*="--blk-fs"] { font-size: calc(var(--u) * var(--blk-fs)); }
.havn-lp-blk[style*="--blk-lh"] { line-height: var(--blk-lh); }
.havn-lp-blk[style*="--blk-ls"] { letter-spacing: calc(var(--blk-ls) * 1em); }
.havn-lp-blk[style*="--blk-op"] { opacity: var(--blk-op); }
.havn-lp-blk[style*="--blk-r"]  { border-radius: calc(var(--u) * var(--blk-r)); }
.havn-lp-blk[style*="--blk-pad"]{ padding: calc(var(--u) * var(--blk-pad)); box-sizing: border-box; }
/* A scaled block redefines the unit its own contents are typed in. Everything
   inside a HAVN card is already `calc(var(--u) * n)`, so one line here makes
   the whole card grow and shrink as a piece — rather than a box that changes
   width around contents that do not move. */
.havn-lp-blk[style*="--blk-scale"] { --u: calc(var(--u0) * var(--blk-scale)); }

/* The border is a style class plus a width and a colour, so "dashed" survives
   a change of thickness and a colour change does not turn the border on. */
.havn-lp-blk.bs-solid  { border: calc(var(--u) * var(--blk-bw, .15)) solid  var(--blk-bc, currentColor); }
.havn-lp-blk.bs-dashed { border: calc(var(--u) * var(--blk-bw, .15)) dashed var(--blk-bc, currentColor); }
.havn-lp-blk.bs-dotted { border: calc(var(--u) * var(--blk-bw, .15)) dotted var(--blk-bc, currentColor); }
.havn-lp-blk.bs-none   { border: 0; }
.havn-lp-blk[class*="bs-"]:not(.bs-none) { box-sizing: border-box; }
.havn-lp-blk.sh-on { box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.6) rgba(0,0,0,.28); }

/* Weight, slant and decoration. Stated at the weight the slide rules use, or a
   heading's own `font-weight: 650` would win over Bold and nothing would
   happen when the agent pressed it. */
body .havn-mc .havn-lp-blk.tw-bold   { font-weight: 800; }
body .havn-mc .havn-lp-blk.tw-light  { font-weight: 300; }
.havn-lp-blk.ti-on { font-style: italic; }
.havn-lp-blk.td-u  { text-decoration: underline; text-underline-offset: .18em; }
.havn-lp-blk.td-s  { text-decoration: line-through; }
.havn-lp-blk.td-u.td-s { text-decoration: underline line-through; }
body .havn-mc .havn-lp-blk.tt-upper { text-transform: uppercase; letter-spacing: calc(var(--blk-ls, .06) * 1em); }

/* The typeface is a stack, carried as a property rather than twenty classes:
   the list lives in havn_lp_fonts() in PHP, and a stylesheet that had to be
   edited every time somebody added a font would be a stylesheet that is
   already out of date. `ft-<key>` stays alongside it so the menu knows which
   row to light up. */
.havn-lp-blk[style*="--blk-ff"], body .havn-mc .havn-lp-blk[style*="--blk-ff"] { font-family: var(--blk-ff); }

/* THE TEXT INSIDE A BLOCK HAS NO OPINIONS OF ITS OWN.
   The block is the thing being formatted; the div holding the words is
   plumbing. It was picking up the dashboard's own Inter from a rule further
   up the page, which beat the block's inherited family — so every typeface in
   the menu changed the box and not the writing in it. `font: inherit` hands
   family, size, weight, style and line-height back to the block in one
   declaration, at the weight the dashboard's own rules are written at. */
body .havn-mc .havn-lp-blk > .havn-lp-blk-text,
body .havn-mc .havn-lp-blk > [data-lp-text] {
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	text-align: inherit;
	color: inherit !important;
}

.havn-lp-blk.al-left    { text-align: left; }
.havn-lp-blk.al-center  { text-align: center; }
.havn-lp-blk.al-right   { text-align: right; }
.havn-lp-blk.al-justify { text-align: justify; }

/* Down the box. A block is as tall as its content unless the agent has dragged
   it taller, so this only bites once they have — which is exactly when they
   start wanting it. */
.havn-lp-blk.va-top, .havn-lp-blk.va-middle, .havn-lp-blk.va-bottom { display: flex; flex-direction: column; }
.havn-lp-blk.va-top    { justify-content: flex-start; }
.havn-lp-blk.va-middle { justify-content: center; }
.havn-lp-blk.va-bottom { justify-content: flex-end; }

/* A list without a <ul>: each line of the block becomes an item, so the agent
   keeps typing plain text and the markers are drawn. */
.havn-lp-blk.li-bullet [data-lp-text], .havn-lp-blk.li-number [data-lp-text] { display: block; }
.havn-lp-blk.li-bullet [data-lp-text] { padding-left: calc(var(--u) * 1.8); text-indent: calc(var(--u) * -1.8); }
.havn-lp-blk.li-number [data-lp-text] { padding-left: calc(var(--u) * 2.4); text-indent: calc(var(--u) * -2.4); }
.havn-lp-blk.li-bullet [data-lp-text]::before { content: '•  '; }
.havn-lp-blk.li-number [data-lp-text] { counter-reset: none; }

/* The old three-step ladder, kept so decks saved before this still open. */
body .havn-mc .havn-lp-blk.sz-sm { font-size: calc(var(--u) * 1.25); }
body .havn-mc .havn-lp-blk.sz-md { font-size: calc(var(--u) * 2.6); }
body .havn-mc .havn-lp-blk.sz-lg { font-size: calc(var(--u) * 3.4); }
body .havn-mc .havn-lp-blk.sz-xl { font-size: calc(var(--u) * 5.4); }

.havn-lp-blk.is-divider { display: grid; align-items: center; }
.havn-lp-blk.is-image img { border-radius: inherit; }
.havn-lp-blk-img-empty {
	display: grid; place-items: center; align-content: center; gap: calc(var(--u) * .6);
	width: 100%; height: 100%; border-radius: calc(var(--u) * .6);
	background: var(--mc-surface); border: 1px dashed var(--mc-border-2);
}
.havn-lp-blk-img-empty svg { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
body .havn-mc .havn-lp-blk-img-empty span { font-size: calc(var(--u) * 1.1); color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-blk-img-empty svg { color: var(--mc-text-3) !important; }

.havn-lp-blk-rich { width: 100%; }

/* ---- selection, handles, provenance ---------------------------------- */
.havn-lp-h, .havn-lp-bound { display: none; }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk { outline: 1px solid transparent; border-radius: 3px; cursor: grab; }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk:hover { outline-color: var(--mc-border-2); }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk.is-sel { outline: 1.5px solid var(--mc-accent); overflow: visible; cursor: move; }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk.is-sel .havn-lp-h { display: block; }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk.is-editing { cursor: text; outline-color: var(--mc-accent); }
.havn-lp-h {
	position: absolute; width: 9px; height: 9px; border-radius: 2px; z-index: 3;
	background: var(--mc-bg); border: 1.5px solid var(--mc-accent);
}
.havn-lp-h.nw { left: -5px; top: -5px;  cursor: nwse-resize; }
.havn-lp-h.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.havn-lp-h.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.havn-lp-h.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.havn-lp-canvas[data-mode="edit"] .havn-lp-blk.is-sel .havn-lp-bound {
	display: grid; place-items: center; position: absolute; right: -7px; top: -7px;
	width: 16px; height: 16px; border-radius: 50%; z-index: 3;
	background: var(--mc-accent-soft); border: 1px solid rgba(212,179,112,.5);
}
.havn-lp-bound svg { width: 9px; height: 9px; }
body .havn-mc .havn-lp-bound svg { color: var(--mc-accent) !important; }
.havn-lp-blk.is-edited .havn-lp-bound { opacity: .35; }

/* A thumbnail must never be clickable-through or interactive. */
.havn-lp-thumb-mini { position: absolute; inset: 0; pointer-events: none; }
.havn-lp-thumb-mini .havn-lp-canvas { border: 0; border-radius: 0; height: 100%; }

/* ======================================================================
   5. THE PARTS — sized in --u so they live on a slide
   ====================================================================== */
.havn-lp-blk-rich > * { margin-top: 0; }
body .havn-mc .havn-lp-blk-rich .havn-lp-eyebrow { font-size: calc(var(--u) * 1.05); margin-bottom: calc(var(--u) * .6); }
body .havn-mc .havn-lp-blk-rich .havn-lp-fineprint { font-size: calc(var(--u) * .95); line-height: 1.5; margin-top: calc(var(--u) * .9); }
body .havn-mc .havn-lp-blk-rich .havn-lp-fineprint svg { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); }
body .havn-mc .havn-lp-blk-rich .havn-lp-lede { font-size: calc(var(--u) * 1.6); line-height: 1.6; margin-bottom: calc(var(--u) * 1.1); }

.havn-lp-facts { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); margin: 0; padding: 0; }
.havn-lp-facts li { padding: calc(var(--u) * .5) calc(var(--u) * 1); border-radius: 999px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-facts li { font-size: calc(var(--u) * 1.15); color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-facts strong { color: var(--mc-text) !important; font-weight: 650; }

.havn-lp-said-card { height: 100%; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.2); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-said { margin: 0 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.45); line-height: 1.6; font-style: italic; color: var(--mc-text) !important; }

.havn-lp-dl { margin: 0; display: grid; gap: calc(var(--u) * .7); }
.havn-lp-dl > div { display: grid; grid-template-columns: 30% 1fr; gap: calc(var(--u) * 1); align-items: baseline; }
body .havn-mc .havn-lp-dl dt { font-size: calc(var(--u) * .95); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-dl dd { margin: 0; font-size: calc(var(--u) * 1.2); line-height: 1.5; color: var(--mc-text-2) !important; }

.havn-lp-rec-band { height: 100%; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 1.4);
	background: linear-gradient(160deg, rgba(212,179,112,.14), rgba(212,179,112,.03)); border: 1px solid rgba(212,179,112,.3); }
.havn-lp-rec-range { display: flex; align-items: baseline; gap: calc(var(--u) * .8); flex-wrap: wrap; }
body .havn-mc .havn-lp-rec-range strong { font-family: Fraunces, Georgia, serif; font-size: calc(var(--u) * 2.6); font-weight: 600; letter-spacing: -.02em; color: var(--mc-accent) !important; white-space: nowrap; }
body .havn-mc .havn-lp-rec-dash { font-size: calc(var(--u) * 2.2); color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-rec-sub { margin: calc(var(--u) * 1.1) 0 0; font-size: calc(var(--u) * 1.15); line-height: 1.55; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-rec-method { display: flex; align-items: center; gap: calc(var(--u) * .6); margin: calc(var(--u) * 1.2) 0 0; font-size: calc(var(--u) * 1.3); color: var(--mc-text-2) !important; }
.havn-lp-rec-method svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
body .havn-mc .havn-lp-rec-method svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-rec-method strong { color: var(--mc-text) !important; }

.havn-lp-aside { margin: calc(var(--u) * 1.2) 0 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4);
	border-radius: calc(var(--u) * 1); background: var(--mc-surface); border: 1px solid var(--mc-border); border-left: calc(var(--u) * .25) solid var(--mc-accent); }
body .havn-mc .havn-lp-aside p { margin: 0; font-size: calc(var(--u) * 1.25); line-height: 1.55; color: var(--mc-text-2) !important; }

.havn-lp-table { width: 100%; border-collapse: collapse; }
body .havn-mc .havn-lp-table th {
	padding: calc(var(--u) * .7) calc(var(--u) * .7); text-align: left;
	font-size: calc(var(--u) * .9); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--mc-text-3) !important; border-bottom: 1px solid var(--mc-border-2);
}
body .havn-mc .havn-lp-table td {
	padding: calc(var(--u) * .75) calc(var(--u) * .7);
	font-size: calc(var(--u) * 1.2); color: var(--mc-text-2) !important;
	border-bottom: 1px solid var(--mc-border);
}
body .havn-mc .havn-lp-table td strong { color: var(--mc-text) !important; font-weight: 600; }
body .havn-mc .havn-lp-table small { display: block; font-size: calc(var(--u) * .9); color: var(--mc-text-3) !important; margin-top: calc(var(--u) * .15); }
.havn-lp-table th.num, .havn-lp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
body .havn-mc .havn-lp-adj { display: block; font-size: calc(var(--u) * .85); font-style: normal; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-table tfoot th { border-bottom: 0; border-top: 1px solid var(--mc-border-2); font-size: calc(var(--u) * 1.1); text-transform: none; letter-spacing: 0; color: var(--mc-text) !important; }
.havn-lp-plan tr.is-unresolved { background: rgba(224,133,123,.07); }
.havn-lp-net tr.is-rec { background: var(--mc-accent-soft); }
body .havn-mc .havn-lp-net tr.is-rec td { color: var(--mc-text) !important; }
body .havn-mc .havn-lp-net tr.is-rec strong { color: var(--mc-accent) !important; }

.havn-lp-payer { display: inline-block; padding: calc(var(--u) * .2) calc(var(--u) * .65); border-radius: 999px;
	font-size: calc(var(--u) * .85); font-weight: 600; white-space: nowrap;
	background: var(--mc-surface-2); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-payer { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-payer.is-included { color: var(--mc-success) !important; border-color: rgba(111,207,151,.3); }
body .havn-mc .havn-lp-payer.is-owner { color: var(--mc-warn) !important; border-color: rgba(224,194,133,.3); }
body .havn-mc .havn-lp-payer.is-agent { color: var(--mc-info) !important; border-color: rgba(138,180,248,.3); }
body .havn-mc .havn-lp-payer.is-unknown { color: #E0857B !important; border-color: rgba(224,133,123,.35); }

.havn-lp-active { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .6); }
.havn-lp-active li { display: grid; grid-template-columns: 1fr auto auto; gap: calc(var(--u) * 1.2); align-items: baseline;
	padding: calc(var(--u) * .8) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .8); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-active-addr { font-size: calc(var(--u) * 1.25); color: var(--mc-text) !important; }
body .havn-mc .havn-lp-active-meta { font-size: calc(var(--u) * 1); color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-active strong { font-size: calc(var(--u) * 1.25); color: var(--mc-text-2) !important; font-variant-numeric: tabular-nums; }

.havn-lp-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * .9); height: 100%; }
.havn-lp-method-card { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1); background: var(--mc-surface); border: 1px solid var(--mc-border); overflow: hidden; }
.havn-lp-method-card.is-chosen { background: var(--mc-accent-soft); border-color: rgba(212,179,112,.4); }
.havn-lp-method-card header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .7); margin-bottom: calc(var(--u) * .9); }
body .havn-mc .havn-lp-method-card h4 { margin: 0; font-size: calc(var(--u) * 1.5); font-weight: 650; color: var(--mc-text) !important; }
.havn-lp-chosen-pill { display: inline-flex; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .15) calc(var(--u) * .6); border-radius: 999px; background: rgba(212,179,112,.2); }
body .havn-mc .havn-lp-chosen-pill { font-size: calc(var(--u) * .85); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mc-accent) !important; }
.havn-lp-chosen-pill svg { width: calc(var(--u) * 1); height: calc(var(--u) * 1); }
.havn-lp-method-card .havn-lp-dl > div { grid-template-columns: 34% 1fr; gap: calc(var(--u) * .7); }
body .havn-mc .havn-lp-method-card .havn-lp-risk dd { color: #E0857B !important; opacity: .92; }

.havn-lp-timeline { list-style: none; margin: 0; padding: 0 0 0 calc(var(--u) * .3); display: grid; gap: 0; }
.havn-lp-timeline li { display: grid; grid-template-columns: 22% 1fr; gap: calc(var(--u) * 1.2);
	padding: calc(var(--u) * .9) 0 calc(var(--u) * .9) calc(var(--u) * 1.5); border-left: 2px solid var(--mc-border-2); position: relative; }
.havn-lp-timeline li::before { content: ''; position: absolute; left: calc(var(--u) * -.4); top: calc(var(--u) * 1.3);
	width: calc(var(--u) * .7); height: calc(var(--u) * .7); border-radius: 50%; background: var(--mc-accent); }
body .havn-mc .havn-lp-week { font-size: calc(var(--u) * .95); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-text-3) !important; padding-top: calc(var(--u) * .15); }
body .havn-mc .havn-lp-timeline strong { font-size: calc(var(--u) * 1.3); font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-timeline p { margin: calc(var(--u) * .25) 0 0; font-size: calc(var(--u) * 1.1); line-height: 1.5; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-who { display: inline-block; margin-top: calc(var(--u) * .35); font-size: calc(var(--u) * .95); color: var(--mc-accent) !important; }

.havn-lp-fee-head { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2.4); align-items: center;
	padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 1.2); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-fee-amount { display: block; font-family: Fraunces, Georgia, serif; font-size: calc(var(--u) * 3.4); font-weight: 600; letter-spacing: -.02em; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-fee-head small { display: block; margin-top: calc(var(--u) * .35); font-size: calc(var(--u) * 1.05); color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-fee-note { margin: 0; font-size: calc(var(--u) * 1.1); line-height: 1.55; color: var(--mc-text-3) !important; }

.havn-lp-costs ul { list-style: none; margin: calc(var(--u) * .8) 0 0; padding: 0; display: grid; gap: calc(var(--u) * .5); }
.havn-lp-costs li { display: grid; grid-template-columns: 1fr auto 26%; gap: calc(var(--u) * 1.2); align-items: center;
	padding: calc(var(--u) * .7) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .8); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-costs li > span:first-child { font-size: calc(var(--u) * 1.2); color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-costs strong { font-size: calc(var(--u) * 1.2); color: var(--mc-text) !important; font-variant-numeric: tabular-nums; }

.havn-lp-track-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); gap: calc(var(--u) * .9); }
.havn-lp-track-figs > div { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-track-figs strong { display: block; font-family: Fraunces, Georgia, serif; font-size: calc(var(--u) * 3); font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-track-figs span { display: block; margin-top: calc(var(--u) * .3); font-size: calc(var(--u) * 1); line-height: 1.4; color: var(--mc-text-3) !important; }

.havn-lp-promise, .havn-lp-notasign { display: flex; align-items: flex-start; gap: calc(var(--u) * 1);
	padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1); }
.havn-lp-promise { background: var(--mc-accent-soft); border: 1px solid rgba(212,179,112,.3); }
.havn-lp-notasign { background: rgba(138,180,248,.07); border: 1px solid rgba(138,180,248,.28); }
.havn-lp-promise > svg, .havn-lp-notasign > svg { flex: 0 0 auto; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); margin-top: calc(var(--u) * .15); }
body .havn-mc .havn-lp-promise > svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-notasign > svg { color: var(--mc-info) !important; }
body .havn-mc .havn-lp-promise strong { display: block; font-size: calc(var(--u) * 1.3); font-weight: 650; color: var(--mc-text) !important; margin-bottom: calc(var(--u) * .3); }
body .havn-mc .havn-lp-promise p, body .havn-mc .havn-lp-notasign p { margin: 0; font-size: calc(var(--u) * 1.2); line-height: 1.55; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-notasign p { color: var(--mc-text) !important; }

.havn-lp-asks { display: grid; gap: calc(var(--u) * .7); }
.havn-lp-ask { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.4);
	padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1); background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-ask-text strong { display: block; font-size: calc(var(--u) * 1.35); font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-lp-ask-text span { font-size: calc(var(--u) * 1.1); line-height: 1.45; color: var(--mc-text-3) !important; }
.havn-lp-ask-btns { display: flex; gap: calc(var(--u) * .5); flex: 0 0 auto; }
body .havn-mc .havn-lp-ask-state { flex: 0 0 auto; font-size: calc(var(--u) * 1); color: var(--mc-text-3) !important; }

.havn-lp-thin { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
	border-radius: calc(var(--u) * 1); background: rgba(224,194,133,.07); border: 1px solid rgba(224,194,133,.28); }
.havn-lp-thin > svg { flex: 0 0 auto; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); margin-top: calc(var(--u) * .15); }
body .havn-mc .havn-lp-thin > svg { color: var(--mc-warn) !important; }
body .havn-mc .havn-lp-thin strong { display: block; font-size: calc(var(--u) * 1.4); font-weight: 650; color: var(--mc-text) !important; margin-bottom: calc(var(--u) * .4); }
body .havn-mc .havn-lp-thin p { margin: 0 0 calc(var(--u) * .6); font-size: calc(var(--u) * 1.2); line-height: 1.55; color: var(--mc-text-2) !important; }

/* ======================================================================
   6. THE VENDOR'S DECK
   ====================================================================== */
.havn-lp-doc { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto 1fr; background: var(--mc-bg); }
.havn-lp-doc[hidden] { display: none; }
.havn-lp-doc-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 11px 20px; flex-wrap: wrap; background: var(--mc-bg-2); border-bottom: 1px solid var(--mc-border);
}
body .havn-mc .havn-lp-doc-bar-left { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mc-accent) !important; }
.havn-lp-doc-bar-left svg { width: 15px; height: 15px; }
body .havn-mc .havn-lp-doc-bar-mid { font: 11.5px/1 ui-monospace, Menlo, monospace; color: var(--mc-text-3) !important; }
.havn-lp-doc-scroll { overflow-y: auto; padding: 26px 20px 60px; }
.havn-lp-doc-slide { max-width: 980px; margin: 0 auto 18px; }
.havn-lp-doc-slide .havn-lp-canvas { border-radius: 12px; box-shadow: 0 20px 44px -26px rgba(0,0,0,.6); }
.havn-lp-doc-foot { max-width: 980px; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--mc-border); }
body .havn-mc .havn-lp-doc-foot p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--mc-text-3) !important; }

/* ======================================================================
   7. NARROW
   ====================================================================== */
@media (max-width: 1180px) {
	.havn-lp-ed-body { grid-template-columns: 148px 1fr 232px; }
}
/* The tablet middle: two columns, the HAVN rail underneath. Still editable —
   a finger on a 768px canvas can hit a handle. */
@media (max-width: 980px) and (min-width: 701px) {
	.havn-lp-ed-body { grid-template-columns: 148px 1fr; grid-template-rows: 1fr auto; }
	.havn-lp-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--mc-border); max-height: 34vh; }
	.havn-lp-side-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; align-content: start; }
	.havn-lp-ed-hint { display: none; }
}

/* Phone: a reader, and it says so. See the notice in the markup. */
.havn-lp-ed-narrow { display: none; }
@media (max-width: 700px) {
	.havn-lp-ed-narrow {
		display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
		background: var(--mc-surface); border-bottom: 1px solid var(--mc-border);
	}
	.havn-lp-ed-narrow svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
	body .havn-mc .havn-lp-ed-narrow { font-size: 12px; line-height: 1.5; color: var(--mc-text-3) !important; }
	body .havn-mc .havn-lp-ed-narrow svg { color: var(--mc-accent) !important; }

	.havn-lp-editor { grid-template-rows: auto auto auto auto 1fr; }
	.havn-lp-ed-bar, .havn-lp-side { display: none; }
	.havn-lp-ed-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.havn-lp-rail2 { grid-auto-flow: column; grid-auto-columns: 104px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--mc-border); }
	.havn-lp-thumb-label, .havn-lp-thumb-add { display: none; }
	.havn-lp-stagewrap { grid-template-rows: auto 1fr; }
	.havn-lp-stage2 { place-items: start center; padding: 14px; overflow: visible; }
	.havn-lp-notes { display: none; }
	/* No handles, no grab cursor, no accidental drags with a thumb. */
	.havn-lp-canvas[data-mode="edit"] .havn-lp-blk { pointer-events: none; cursor: default; outline-color: transparent !important; }
}
@media (max-width: 1240px) {
	/* One column: the list, then where it has got to, then the menu into the
	   record. Two columns survive to 1240 rather than 1080 because the client
	   rail takes 286px off the top first — below this the list column is
	   narrower than a thumbnail and an address side by side, and the row
	   overflowed. */
	.havn-lp-cp-body { grid-template-columns: 1fr; grid-template-rows: none; }
	.havn-lp-cp-list, .havn-lp-cp-prog { grid-column: auto; grid-row: auto; }
	.havn-lp-cp-prog { border-left: 0; border-top: 1px solid var(--mc-border); padding-right: 20px; }
}
@media (max-width: 620px) {
	/* On a phone the drawer is the screen. Sliding a 540px panel onto a 390px
	   one leaves a strip of the work behind it that is too narrow to read and
	   wide enough to tap by accident. */
	.havn-lp-drawer { width: 100%; }
	/* Scoped to this drawer on purpose: 620px is ITS breakpoint. An unscoped
	   rule here would impose this number on the leads drawer and the AI panel,
	   which fold at their own. At this width a remembered width and a
	   full-screen button are both no-ops. */
	/* The button has to be out-specified, not just written later: the rule that
	   turns it on is `body .havn-mc .havn-lp-drawer-fs.havn-mc-drawer-fs`, four
	   classes deep, so anything shorter loses wherever it sits in the file. */
	.havn-lp-drawer .havn-mc-drawer-grip { display: none !important; }
	body .havn-mc .havn-lp-drawer .havn-lp-drawer-fs.havn-mc-drawer-fs { display: none !important; }
	.havn-lp-drawer-head { padding: 16px 16px 12px; }
	.havn-lp-drawer-body { padding: 16px 16px 26px; }
}
@media (max-width: 880px) {
	/* The client rail becomes a strip across the top: on a phone you pick a
	   person and then work, rather than holding two columns at once. */
	.havn-lp-work { grid-template-columns: 1fr; }
	.havn-lp-clients { border-right: 0; border-bottom: 1px solid var(--mc-border); }
	.havn-lp-client-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; }
	.havn-lp-client-row { width: 210px; }
	.havn-lp-clients-flag { display: none; }
	.havn-lp-stats { gap: 0 4px; }
	.havn-lp-stat { min-width: 78px; padding: 0 10px; }
}
@media (max-width: 860px) {
	.havn-lp-tchips { gap: 6px; }
	.havn-lp-newrow { padding: 10px 12px; gap: 10px; }
	.havn-lp-stage2 { padding: 12px; }
	.havn-lp-ed-top { padding: 8px 12px; }
	body .havn-mc .havn-lp-ed-title { width: 200px !important; }
	.havn-lp-doc-scroll { padding: 14px 10px 40px; }
	/* v2.2.148 — below 861px nothing rounds and nothing nests a card. */
	.havn-lp-card-open, .havn-lp-canvas, .havn-lp-doc-slide .havn-lp-canvas { border-radius: 0; }
}

/* The "different property" control on an unsaved starter deck. */
.havn-lp-ed-change { padding: 1px 7px; border-radius: 999px; background: transparent; border: 1px solid var(--mc-border); cursor: pointer; }
body .havn-mc .havn-lp-ed-change { font-size: 11px; color: var(--mc-accent) !important; }
body .havn-mc .havn-lp-ed-sub strong { color: var(--mc-text-2) !important; font-weight: 600; }

/* ---- the button cascade ------------------------------------------------
   The template cards and register rows are <button>s, and Astra uppercases
   and letter-spaces every button on the site. That reads as deliberate on a
   two-word address and as shouting on a sentence, so the type here restates
   itself. Same reason the rest of the plugin carries a button reset. */
body .havn-mc .havn-lp-tchip,
body .havn-mc .havn-lp-tchip strong,
body .havn-mc .havn-lp-tchip em,
body .havn-mc .havn-lp-card-open,
body .havn-mc .havn-lp-card-open span,
body .havn-mc .havn-lp-card-open em,
body .havn-mc .havn-lp-side-item span,
body .havn-mc .havn-lp-thumb span,
body .havn-mc .havn-lp-menu-pop strong,
body .havn-mc .havn-lp-menu-pop em,
body .havn-mc .havn-lp-tool,
body .havn-mc .havn-lp-client-row,
body .havn-mc .havn-lp-client-row span,
body .havn-mc .havn-lp-prow,
body .havn-mc .havn-lp-prow span,
body .havn-mc .havn-lp-prow em,
body .havn-mc .havn-lp-quick,
body .havn-mc .havn-lp-quick span,
body .havn-mc .havn-lp-prog-btns .havn-mc-btn,
body .havn-mc .havn-lp-spec strong,
body .havn-mc .havn-lp-spec span,
body .havn-mc .havn-lp-leadcard li strong,
body .havn-mc .havn-lp-cfacts em,
body .havn-mc .havn-lp-noteform button,
body .havn-mc .havn-lp-cp-actions .havn-mc-btn,
body .havn-mc .havn-lp-client-menu strong,
body .havn-mc .havn-lp-client-menu em {
	text-transform: none !important;
	letter-spacing: normal !important;
}
/* …except the two that are meant to be labels. */
body .havn-mc .havn-lp-client-row .havn-lp-pill,
body .havn-mc .havn-lp-prow .havn-lp-pill,
body .havn-mc .havn-lp-card-open .havn-lp-pill,

/* A template strip with no appraisal behind it. Dimmed, not hidden — the agent
   should see what they will get once they have logged one. */
.havn-lp-tchip.is-waiting:hover { border-color: var(--mc-border); background: var(--mc-bg-2); }
.havn-lp-start-note.is-blocked { background: rgba(224,194,133,.08); border-color: rgba(224,194,133,.3); }
body .havn-mc .havn-lp-start-note.is-blocked svg { color: var(--mc-warn) !important; }
body .havn-mc .havn-lp-start-note a { color: var(--mc-accent) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   8. COLOUR  (v2.2.205, second pass)

   A block with no colour of its own inherits the app's tokens, so an untouched
   deck looks right in light and in dark. The moment one is chosen it is an
   absolute hex and stops moving — a deck leaves the building, and white-on-
   charcoal has to still be white-on-charcoal in the vendor's inbox.

   The !important here is not laziness: havn-dashboard.php's priority-99 block
   paints every text element with !important, so an agent's own colour has to
   answer it at the same weight or the swatch silently does nothing.
   ========================================================================== */

/* ---- the slide ---- */
.havn-lp-canvas.has-bg { background: var(--slide-bg) !important; }
body .havn-mc .havn-lp-canvas.has-fg,
body .havn-mc .havn-lp-canvas.has-fg .havn-lp-blk:not(.has-fg),
body .havn-mc .havn-lp-canvas.has-fg .havn-lp-blk:not(.has-fg) * {
	color: var(--slide-fg) !important;
}
/* Surfaces inside a HAVN block have to follow the slide, or a comparables
   table keeps its dark card on a paper-white slide and looks pasted on. */
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-said-card,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-aside,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-facts li,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-active li,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-costs li,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-method-card,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-track-figs > div,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-fee-head,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-ask {
	background: color-mix(in srgb, var(--slide-fg, #888) 6%, transparent);
	border-color: color-mix(in srgb, var(--slide-fg, #888) 14%, transparent);
}
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-table th,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-table td {
	border-bottom-color: color-mix(in srgb, var(--slide-fg, #888) 14%, transparent);
}
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-table tfoot th {
	border-top-color: color-mix(in srgb, var(--slide-fg, #888) 22%, transparent);
}
/* The rest of the surfaces a HAVN block can put on a slide. Every one of these
   is a tinted panel that was drawn for a dark app and looks pasted on once the
   slide underneath is paper — so they all take their tint from the slide's own
   text colour rather than from the app's tokens. */
.havn-lp-canvas.has-bg .havn-lp-blk-img-empty,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-written,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-payer {
	background: color-mix(in srgb, var(--slide-fg, #888) 6%, transparent);
	border-color: color-mix(in srgb, var(--slide-fg, #888) 18%, transparent);
}
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-timeline li {
	border-left-color: color-mix(in srgb, var(--slide-fg, #888) 18%, transparent);
}
.havn-lp-canvas.has-bg .havn-lp-blk-rule {
	background: color-mix(in srgb, var(--slide-fg, #888) 22%, transparent);
}
/* The accent panels keep their own hue — they are meant to stand out — but
   their edges still have to sit on the new ground. */
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-rec-band,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-promise,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-notasign,
.havn-lp-canvas.has-bg .havn-lp-blk-rich .havn-lp-thin {
	border-color: color-mix(in srgb, var(--slide-fg, #888) 18%, transparent);
}

/* ---- a block ---- */
.havn-lp-blk.has-bg { background: var(--blk-bg) !important; border-radius: calc(var(--u) * .6); }
body .havn-mc .havn-lp-blk.has-fg,
body .havn-mc .havn-lp-blk.has-fg .havn-lp-blk-text,
body .havn-mc .havn-lp-blk.has-fg .havn-lp-blk-rich *,
body .havn-mc .havn-lp-blk.has-fg strong,
body .havn-mc .havn-lp-blk.has-fg em,
body .havn-mc .havn-lp-blk.has-fg small,
body .havn-mc .havn-lp-blk.has-fg span,
body .havn-mc .havn-lp-blk.has-fg p {
	color: var(--blk-fg) !important;
}
/* A block given a fill needs room to breathe inside it. */
.havn-lp-blk.has-bg > .havn-lp-blk-text,
.havn-lp-blk.has-bg > .havn-lp-blk-rich { padding: calc(var(--u) * 1.2); box-sizing: border-box; }

/* ---- the swatch popovers ---- */
.havn-lp-swatch-menu .havn-lp-tool { gap: 5px; }
.havn-lp-swatch-now {
	width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto;
	background: var(--now, transparent); border: 1px solid var(--mc-border-2);
	background-image: linear-gradient(135deg, transparent 46%, var(--mc-text-3) 46%, var(--mc-text-3) 54%, transparent 54%);
}
.havn-lp-swatch-now.is-set { background-image: none; border-color: rgba(255,255,255,.35); }
.havn-lp-swatch-pop { width: 246px; padding: 10px; }
.havn-lp-swatch-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; padding: 0 2px 8px; }
/* Body-qualified and !important throughout: a swatch IS its background, and
   Astra paints every <button> on the site with its own colour, padding and
   min-height at a weight a plain class cannot answer. Without this the palette
   renders as three headings above nothing at all — which is exactly how it
   first shipped into the preview. */
body .havn-mc .havn-lp-swatch {
	/* grid, not block: the fill is a stretched grid item, which works when the
	   button's height comes from aspect-ratio. A percentage height on the span
	   does not — it needs a definite parent height and there isn't one. */
	display: grid !important; position: relative; box-sizing: border-box !important;
	width: 100% !important; aspect-ratio: 1 !important;
	min-width: 0 !important; min-height: 0 !important; height: auto !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important;
	background: transparent !important; box-shadow: none !important;
	border-radius: 4px !important; cursor: pointer !important; transform: none;
	transition: transform .12s ease !important;
}
.havn-lp-swatch-fill {
	display: block; border-radius: 4px; min-width: 0; min-height: 0;
	flex: 1 1 auto; align-self: stretch;
	border: 1px solid rgba(128,128,128,.4);
	transition: box-shadow .12s ease;
}
body .havn-mc .havn-lp-swatch:hover { transform: scale(1.18); }
body .havn-mc .havn-lp-swatch.is-on .havn-lp-swatch-fill {
	box-shadow: 0 0 0 2px var(--mc-bg-2), 0 0 0 3.5px var(--mc-accent);
}
.havn-lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body .havn-mc .havn-lp-swatch-clear {
	display: flex !important; align-items: center; gap: 8px;
	box-sizing: border-box !important; width: 100% !important;
	padding: 7px 8px !important; margin: 0 0 4px !important; min-height: 0 !important;
	border-radius: 8px !important; background: transparent !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important;
	cursor: pointer !important; transform: none !important;
}
body .havn-mc .havn-lp-swatch-clear:hover { background: var(--mc-surface) !important; }
.havn-lp-swatch-clear svg { width: 13px; height: 13px; }
body .havn-mc .havn-lp-swatch-clear span { font-size: 12px; color: var(--mc-text-2) !important; }
.havn-lp-swatch-custom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 2px; }
body .havn-mc .havn-lp-swatch-custom span { font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-swatch-custom input[type="color"] {
	box-sizing: border-box !important; width: 44px !important; height: 26px !important;
	padding: 2px !important; margin: 0 !important; cursor: pointer;
	background: var(--mc-bg-3) !important; border: 1px solid var(--mc-border-2) !important; border-radius: 6px !important;
}

/* ---- the theme menu ---- */
.havn-lp-theme-chip {
	display: grid; place-items: center; width: 30px; height: 22px; flex: 0 0 auto;
	border-radius: 4px; border: 1px solid var(--mc-border-2);
	font: 600 11px/1 Fraunces, Georgia, serif; font-style: normal;
}

/* ---- the way into the record ------------------------------------------- */
/* The space under the track was empty on every client with one presentation —
   which is most of them. It holds the four doors into their record now.
   Each row carries the first line of what is behind it, so the number, the
   address and how long it has been quiet are answered without opening
   anything; the drawer is for when the first line is not enough. */
.havn-lp-recmenu {
	margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--mc-border);
	display: grid; gap: 7px; align-content: start;
}
.havn-lp-recmenu-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
body .havn-mc .havn-lp-recmenu-head h4 {
	margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-recmenu-head span { font-size: 11.5px; color: var(--mc-text-3) !important; }

body .havn-mc .havn-lp-recrow {
	display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto 16px;
	gap: 12px; align-items: center;
	width: 100% !important; min-height: 0 !important; text-align: left;
	padding: 11px 13px !important; margin: 0 !important;
	border-radius: 11px !important; background: var(--mc-surface) !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important;
	cursor: pointer; transform: none !important;
	font-size: 13px !important; letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-lp-recrow:hover { background: var(--mc-surface-2) !important; }
.havn-lp-recrow-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--mc-bg-3); }
.havn-lp-recrow-ic svg { width: 14px; height: 14px; }
body .havn-mc .havn-lp-recrow-ic svg { color: var(--mc-text-2) !important; }
.havn-lp-recrow:hover .havn-lp-recrow-ic { background: var(--mc-accent-soft); }
body .havn-mc .havn-lp-recrow:hover .havn-lp-recrow-ic svg { color: var(--mc-accent) !important; }
.havn-lp-recrow-text { min-width: 0; display: grid; gap: 2px; }
body .havn-mc .havn-lp-recrow-text strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
/* The line under the label is the answer most of the time, so it truncates
   rather than wrapping the row to three lines. */
body .havn-mc .havn-lp-recrow-text em {
	font-size: 11.5px; font-style: normal; color: var(--mc-text-3) !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A row with nothing behind it says so quietly rather than looking broken. */
body .havn-mc .havn-lp-recrow.is-thin .havn-lp-recrow-text em { color: var(--mc-text-3) !important; opacity: .72; font-style: italic; }
.havn-lp-recrow-tag { padding: 2px 8px; border-radius: 999px; background: var(--mc-accent-soft); white-space: nowrap; }
body .havn-mc .havn-lp-recrow-tag { font-size: 10.5px; font-weight: 600; color: var(--mc-accent) !important; }
.havn-lp-recrow-go { display: grid; place-items: center; }
.havn-lp-recrow-go svg { width: 14px; height: 14px; }
body .havn-mc .havn-lp-recrow-go svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-recrow:hover .havn-lp-recrow-go svg { color: var(--mc-accent) !important; }

/* ---- the record itself, as a drawer ------------------------------------ */
/* The leads screen's drawer, in this screen's colours: over the work, from the
   right, tabbed, the person's name at the top. An agent who has learned one of
   these has learned both.
   It is printed beside the editor rather than at <body>, so it keeps the
   dashboard's colour tokens and the light theme — and the editor has been a
   fixed full-screen overlay from that spot since the first build, so the
   containing block is already proven. */
.havn-lp-drawer-scrim {
	position: fixed; inset: 0; z-index: 9200;
	background: rgba(8, 8, 12, .55); backdrop-filter: blur(2px);
	opacity: 0; transition: opacity .2s;
}
.havn-lp-drawer-scrim[hidden] { display: none; }
.havn-lp-drawer-scrim.is-open { opacity: 1; }
body.havn-mc-light .havn-lp-drawer-scrim, .havn-mc.is-light ~ .havn-lp-drawer-scrim { background: rgba(15, 15, 20, .32); }

.havn-lp-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 9300;
	/* The width is the agent's, not ours: the dashboard's drawer chrome writes
	   `--mc-drawer-w` when they drag the edge (and restores it from
	   localStorage), exactly as it does for the leads drawer and the AI panel.
	   min() keeps a width remembered on a big monitor honest on a small one.

	   100%, not 100vw: for a fixed element a percentage resolves against the
	   initial containing block, which EXCLUDES a classic scrollbar — 100vw
	   includes it and puts the close button under the scrollbar on every
	   machine set to show them always. */
	width: min(var(--mc-drawer-w, 540px), 100%);
	display: flex; flex-direction: column;
	background: var(--mc-bg-2); border-left: 1px solid var(--mc-border);
	box-shadow: -20px 0 60px rgba(0, 0, 0, .45);
	transform: translateX(105%); transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.havn-lp-drawer[hidden] { display: none; }
.havn-lp-drawer.is-open { transform: translateX(0); }
body.havn-mc-light .havn-lp-drawer { box-shadow: -20px 0 60px rgba(15, 15, 20, .12); }

.havn-lp-drawer-head { padding: 20px 22px 14px; border-bottom: 1px solid var(--mc-border); flex: 0 0 auto; }
.havn-lp-drawer-top { display: flex; align-items: center; gap: 13px; }
.havn-lp-drawer-id { min-width: 0; flex: 1 1 auto; }
body .havn-mc .havn-lp-drawer-id h2 {
	margin: 0; font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 600;
	letter-spacing: -.01em; color: var(--mc-text) !important;
}
body .havn-mc .havn-lp-drawer-id p {
	margin: 2px 0 0; font-size: 12.5px; color: var(--mc-text-3) !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Restated at this weight for the reason the exit button in the editor is:
   the site's own button CSS owns width, padding and min-height on every
   <button> on the page, and a close button that inherits them is a wide blank
   slab in the corner of the drawer rather than a square with an X in it. */
body .havn-mc .havn-lp-drawer-x {
	flex: 0 0 auto; display: grid !important; place-items: center;
	width: 34px !important; min-width: 34px !important;
	height: 34px !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important;
	border-radius: 10px !important; background: transparent !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important;
	cursor: pointer; transform: none !important;
}
body .havn-mc .havn-lp-drawer-x:hover { background: var(--mc-surface-2) !important; border-color: var(--mc-border-2) !important; }
.havn-lp-drawer-x svg { width: 15px; height: 15px; }
body .havn-mc .havn-lp-drawer-x svg { color: var(--mc-text-2) !important; }
.havn-lp-drawer-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* The full-screen button ships empty and hidden; the dashboard's drawer chrome
   fills in the two icons and adds `havn-mc-drawer-fs`, which is what turns it
   on. On a dashboard too old to know the hook it stays a button nobody sees
   rather than a blank square nobody understands. */
body .havn-mc .havn-lp-drawer-fs { display: none !important; }
body .havn-mc .havn-lp-drawer-fs.havn-mc-drawer-fs { display: grid !important; }
/* The pressed state is restated here because the chrome's own version of it is
   plain `.havn-mc-drawer-fs[aria-pressed]`, which cannot reach past the
   `!important` this button needs to survive the site's button CSS. */
body .havn-mc .havn-lp-drawer-x[aria-pressed="true"] {
	background: var(--mc-accent-soft) !important; border-color: rgba(212, 179, 112, .45) !important;
}
body .havn-mc .havn-lp-drawer-x[aria-pressed="true"] svg { color: #D4B370 !important; }
body.havn-mc-light .havn-lp-drawer-x[aria-pressed="true"] svg,
.havn-mc.is-light .havn-lp-drawer-x[aria-pressed="true"] svg { color: #B8893B !important; }
.havn-lp-drawer-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.havn-lp-drawer-pills .havn-lp-havn-tag { margin-left: 0; }
body .havn-mc .havn-lp-drawer-money { font-size: 12px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-drawer-money strong { font-size: 13px; font-weight: 650; color: var(--mc-text-2) !important; }
.havn-lp-drawer-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.havn-lp-drawer-tabs {
	display: flex; gap: 2px; padding: 10px 14px 0; overflow-x: auto;
	border-bottom: 1px solid var(--mc-border); flex: 0 0 auto;
}
/* Same restatement, same reason — and the type is set here rather than left
   to whatever the site does to a <button>, so the row reads as tabs on both
   themes instead of as five more buttons. */
body .havn-mc .havn-lp-drawer-tab {
	padding: 9px 13px !important; margin: 0 0 -1px !important;
	width: auto !important; min-height: 0 !important;
	border: 0 !important; border-bottom: 2px solid transparent !important;
	border-radius: 8px 8px 0 0 !important; background: transparent !important;
	box-shadow: none !important; transform: none !important;
	cursor: pointer; white-space: nowrap;
	font-size: 11.5px !important; font-weight: 600 !important;
	letter-spacing: .07em !important; text-transform: uppercase !important;
	color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-drawer-tab:hover { color: var(--mc-text) !important; }
/* A fixed pair rather than `var(--mc-accent)`, for the reason havn-buttons.css
   gives: the shell writes --mc-accent inline on the app root from the agency's
   own brand colour, so it beats the light theme's own gold and the whole app's
   accent stays #D4B370 in light mode — which against #EEEAE2 is 1.7:1. These
   are the two golds the leads drawer's tabs use, so the two drawers an agent
   moves between mark the open tab the same way. */
body .havn-mc .havn-lp-drawer-tab.is-on {
	border-bottom-color: #D4B370 !important; color: #D4B370 !important;
}
body.havn-mc-light .havn-lp-drawer-tab.is-on,
.havn-mc.is-light .havn-lp-drawer-tab.is-on {
	border-bottom-color: #B8893B !important; color: #B8893B !important;
}

.havn-lp-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 22px 28px; }
.havn-lp-drawer-panel[hidden] { display: none; }

/* ---- resized and full screen, the way the leads drawer does both ---------
   The grip itself, the icon swap and the pressed state all come from the
   dashboard's stylesheet, which writes them once for every drawer. What is
   written per family there — the easing, the full-screen geometry, the phone
   breakpoint — has to be restated per family here, which is the point the AI
   panel proved in v2.2.175: a rule scoped to `.havn-mc-drawer` does not reach
   a panel that only opted in. */
.havn-lp-drawer.is-resizing { transition: none; }
.havn-lp-drawer.is-resizing .havn-mc-drawer-grip::after { opacity: .9; }

.havn-lp-drawer.is-full {
	/* Both insets with `width: auto`, so the panel is measured BY the viewport
	   rather than by a length guessing at it — the scrollbar note above applies
	   here too, and this is the form that cannot get it wrong. */
	left: 0; right: 0; width: auto;
	border-left: 0; box-shadow: none;
}
/* A 22px label on a 2000px line is not full screen, it is a wasted screen.
   Padding rather than `margin: 0 auto`: these are flex items in a column and an
   auto margin on the cross axis cancels their stretch. */
.havn-lp-drawer.is-full .havn-lp-drawer-head,
.havn-lp-drawer.is-full .havn-lp-drawer-tabs,
.havn-lp-drawer.is-full .havn-lp-drawer-body {
	padding-left: max(22px, calc((100% - 1180px) / 2));
	padding-right: max(22px, calc((100% - 1180px) / 2));
}
/* Dragged out or full screen, the record stops being one long column: the
   facts, what they want and the HAVN card sit beside each other, and the
   property and progress cards go two or three up. `is-wide` is the same class
   and the same 820px threshold the leads drawer uses, set by the same code. */
/* `:not([hidden])` is load-bearing, not decoration: this rule and the one that
   hides a closed panel are both (0,2,0), and this one comes later — so without
   it, widening the drawer turned `display: none` back into `display: grid` and
   all four tabs rendered down the page at once. */
.havn-lp-drawer.is-wide .havn-lp-drawer-panel:not([hidden]) {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px; align-items: start;
}
/* In a grid every card is its own cell, so the rule that separated them in a
   single column would land on an arbitrary few. The gap does that work. */
.havn-lp-drawer.is-wide .havn-lp-prog.is-record + .havn-lp-prog.is-record {
	margin-top: 0; padding-top: 0; border-top: 0;
}

/* Every version stacked, rather than the one the column happens to be showing:
   four proposals to one vendor over two years is a story, and the column can
   only ever hold one chapter of it. */
.havn-lp-prog.is-record + .havn-lp-prog.is-record { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mc-border); }

/* ==========================================================================
   THE RECORD, EDITABLE  (v2.2.206)

   Every field in the drawer is a real control now. Which means every one of
   them has to answer the live site's cascade, which reaches bare `input`,
   `select` and `textarea` and does four things that read as sloppy design and
   are not: content-box sizing (so width:100% overhangs its column and the next
   field sits under it), a taller line-height (inputs at 45px beside selects at
   38), the browser's own light-mode chrome on a dark panel, and a 25px line-box
   on a 12px label.

   The counter is (0,3,2) !important, which is what beats the light-mode
   override at (0,3,1). This is the fifth panel in this product to need it and
   the note is repeated rather than referenced, because the cost of not knowing
   is a screen that looks broken and no clue why.
   ========================================================================== */

.havn-lp-fieldset { margin-bottom: 22px; }
.havn-lp-fieldset + .havn-lp-fieldset { padding-top: 20px; border-top: 1px solid var(--mc-border); }
.havn-lp-fieldset-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.havn-lp-fieldset-head svg { width: 14px; height: 14px; }
body .havn-mc .havn-lp-fieldset-head h5 {
	margin: 0; display: flex; align-items: center; gap: 7px;
	font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--mc-text-3) !important;
}
body .havn-mc .havn-lp-fieldset-head svg { color: var(--mc-text-3) !important; }

/* "Shared record" is the whole claim of this release in one chip: what you
   type here is what Pipeline, Appraisals and the next proposal will read. */
.havn-lp-shared { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--mc-accent-soft); }
.havn-lp-shared svg { width: 11px; height: 11px; }
body .havn-mc .havn-lp-shared { font-size: 10.5px; font-weight: 600; color: var(--mc-accent) !important; }
/* And its opposite, said just as plainly: this one is about this deal only. */
body .havn-mc .havn-lp-onthis {
	margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--mc-surface-2);
	font-size: 10.5px; color: var(--mc-text-3) !important;
}

.havn-lp-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
/* flex-basis on a child of a COLUMN container becomes a height — pinned to auto
   here; the row hands out the basis. min-width:0 matters as much as the basis:
   a flex item defaults to min-width:auto and refuses to shrink below its
   content, which is the second way a row like this overflows. */
.havn-lp-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.havn-lp-field.is-wide { flex: 1 1 100%; }
.havn-lp-fields.is-tight { gap: 10px; }
.havn-lp-fields.is-tight .havn-lp-field.is-num { flex: 1 1 84px; }

body.havn-dashboard-page .havn-mc .havn-lp-field > span {
	display: flex; align-items: baseline; gap: 5px;
	font-size: 11.5px; font-weight: 600; line-height: 1.25 !important; letter-spacing: .01em;
	color: var(--mc-text-2) !important;
}
body.havn-dashboard-page .havn-mc .havn-lp-field > span em {
	font-style: normal; font-weight: 400; color: var(--mc-text-3) !important;
}

body.havn-dashboard-page .havn-mc .havn-lp-field input,
body.havn-dashboard-page .havn-mc .havn-lp-field select,
body.havn-dashboard-page .havn-mc .havn-lp-field textarea {
	box-sizing: border-box !important;
	-webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; max-width: 100% !important; min-width: 0 !important;
	height: 40px !important; min-height: 40px !important;
	margin: 0 !important; padding: 0 12px !important;
	background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border-2) !important;
	border-radius: 10px !important;
	font: inherit !important;
	/* 16px, not 13: under 16 makes iOS Safari zoom the page on focus and never
	   zoom back. The desktop size is set below, where a pointer is doing it. */
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: var(--mc-text) !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
@media (min-width: 862px) {
	body.havn-dashboard-page .havn-mc .havn-lp-field input,
	body.havn-dashboard-page .havn-mc .havn-lp-field select,
	body.havn-dashboard-page .havn-mc .havn-lp-field textarea { font-size: 13.5px !important; }
}
body.havn-dashboard-page .havn-mc .havn-lp-field textarea {
	height: auto !important; min-height: 76px !important;
	padding: 10px 12px !important; line-height: 1.55 !important; resize: vertical;
}
body.havn-dashboard-page .havn-mc .havn-lp-field input::placeholder,
body.havn-dashboard-page .havn-mc .havn-lp-field textarea::placeholder {
	color: var(--mc-text-3) !important; opacity: 1;
}
body.havn-dashboard-page .havn-mc .havn-lp-field input:focus,
body.havn-dashboard-page .havn-mc .havn-lp-field select:focus,
body.havn-dashboard-page .havn-mc .havn-lp-field textarea:focus {
	outline: none !important;
	border-color: var(--mc-accent) !important;
	box-shadow: 0 0 0 3px var(--mc-accent-soft) !important;
}
/* The select's arrow, drawn rather than inherited — `appearance: none` took the
   browser's away and a select with no arrow does not read as a select. */
body.havn-dashboard-page .havn-mc .havn-lp-field select {
	padding-right: 32px !important;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
	background-position: right 15px center, right 10px center !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}
body.havn-dashboard-page .havn-mc .havn-lp-field option { background: var(--mc-bg-2); color: var(--mc-text); }
/* An empty number box is a fact, not a nil — it is drawn quieter so a row of
   them reads as "nobody has recorded this" rather than as five zeros. */
body.havn-dashboard-page .havn-mc .havn-lp-field.is-blank input { border-style: dashed !important; }

/* Saved, said once and quietly. A record that gives no sign it took the edit is
   a record people type into twice. */
.havn-lp-field.is-saved input, .havn-lp-field.is-saved select, .havn-lp-field.is-saved textarea {
	border-color: rgba(111, 207, 151, .55) !important;
}
.havn-lp-field.is-bad input { border-color: #E0857B !important; }

/* What else points at this record — the claim, made visible. */
.havn-lp-linked { margin-top: 16px; padding: 12px 14px; border-radius: 11px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
.havn-lp-linked-head { display: flex; align-items: center; gap: 7px; }
.havn-lp-linked-head svg { width: 13px; height: 13px; }
body .havn-mc .havn-lp-linked-head { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-lp-linked-head svg { color: var(--mc-accent) !important; }
.havn-lp-linked ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.havn-lp-linked li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.havn-lp-linkdot { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-text-3); flex: 0 0 auto; }
.havn-lp-linkdot.kind-deal { background: #8AB4F8; }
.havn-lp-linkdot.kind-presentation { background: #D4B370; }
.havn-lp-linkdot.kind-listing { background: #6FCF97; }
.havn-lp-linkdot.kind-prospect { background: #E0C285; }
body .havn-mc .havn-lp-linked strong { font-size: 12px; font-weight: 600; color: var(--mc-text-2) !important; }
body .havn-mc .havn-lp-linked span { font-size: 11.5px; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   THE PROPERTY BOOK  (v2.2.206)

   Lives in this stylesheet rather than its own because it shares the listing
   presentations vocabulary — the same pills, the same avatars, the same
   "what is missing is named" treatment — and a second sheet would be a second
   place for those to drift.
   ========================================================================== */

.havn-pb { display: block; }
.havn-pb-stats { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.havn-pb-stat { padding: 0 18px; border-left: 1px solid var(--mc-border); min-width: 96px; }
.havn-pb-stat:first-child { border-left: 0; padding-left: 0; }
body .havn-mc .havn-pb-stat-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-stat-value {
	display: block; margin: 1px 0 0; font-family: Fraunces, Georgia, serif;
	font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--mc-text) !important;
}
body .havn-mc .havn-pb-stat-sub { display: block; font-size: 10.5px; color: var(--mc-text-3) !important; }

.havn-pb-tabs { display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--mc-border); flex-wrap: wrap; }
body .havn-mc .havn-pb-tab {
	display: inline-flex !important; align-items: center; gap: 7px;
	width: auto !important; min-height: 0 !important;
	padding: 10px 14px !important; margin: 0 0 -1px !important;
	background: transparent !important; border: 0 !important;
	border-bottom: 2px solid transparent !important; border-radius: 9px 9px 0 0 !important;
	box-shadow: none !important; transform: none !important; cursor: pointer;
	font-size: 13px !important; font-weight: 500 !important;
	letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-text-3) !important;
}
.havn-pb-tab svg { width: 14px; height: 14px; }
body .havn-mc .havn-pb-tab:hover { color: var(--mc-text) !important; }
body .havn-mc .havn-pb-tab.is-on { color: var(--mc-text) !important; font-weight: 650 !important; border-bottom-color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-tab em {
	padding: 1px 7px; border-radius: 999px; background: var(--mc-surface-2);
	font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--mc-text-3) !important;
}
body .havn-mc .havn-pb-tab.is-on em { background: var(--mc-accent-soft); color: var(--mc-accent) !important; }
.havn-pb-panel[hidden] { display: none; }

.havn-pb-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.havn-pb-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; padding: 0 12px; border-radius: 10px; background: var(--mc-bg-3); border: 1px solid var(--mc-border-2); }
.havn-pb-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
body .havn-mc .havn-pb-search svg { color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-mc .havn-pb-search input {
	box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	font: inherit !important; font-size: 16px !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-pb-search input { font-size: 13px !important; } }
body.havn-dashboard-page .havn-mc .havn-pb-search input::placeholder { color: var(--mc-text-3) !important; opacity: 1; }

.havn-pb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
body .havn-mc .havn-pb-chip {
	display: inline-flex !important; align-items: center; gap: 6px;
	width: auto !important; min-height: 0 !important; padding: 6px 11px !important; margin: 0 !important;
	border-radius: 999px !important; background: var(--mc-surface) !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important; transform: none !important;
	cursor: pointer; font-size: 11.5px !important; font-weight: 500 !important;
	letter-spacing: normal !important; text-transform: none !important; color: var(--mc-text-3) !important;
}
body .havn-mc .havn-pb-chip:hover { background: var(--mc-surface-2) !important; color: var(--mc-text-2) !important; }
body .havn-mc .havn-pb-chip.is-on {
	background: color-mix(in srgb, var(--pill, var(--mc-accent)) 16%, transparent) !important;
	border-color: color-mix(in srgb, var(--pill, var(--mc-accent)) 42%, transparent) !important;
	color: var(--pill, var(--mc-accent)) !important; font-weight: 600 !important;
}

.havn-pb-list, .havn-pb-clients, .havn-pb-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.havn-pb-row[hidden] { display: none; }
body .havn-mc .havn-pb-open {
	display: grid !important; align-items: center; gap: 14px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 190px) 130px 54px;
	width: 100% !important; min-height: 0 !important; text-align: left;
	padding: 12px 15px !important; margin: 0 !important;
	border-radius: 12px !important; background: var(--mc-surface) !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important; transform: none !important;
	cursor: pointer; font-size: 13px !important; letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-pb-open:hover { background: var(--mc-surface-2) !important; border-color: var(--mc-border-2) !important; }
.havn-pb-row-main { min-width: 0; display: grid; gap: 3px; }
body .havn-mc .havn-pb-addr { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-pb-sub { font-size: 11.5px; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.havn-pb-pill { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-style: normal;
	background: color-mix(in srgb, var(--pill) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pill) 34%, transparent); }
body .havn-mc .havn-pb-pill { font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--pill) !important; }
.havn-pb-row-who { min-width: 0; display: grid; gap: 1px; }
body .havn-mc .havn-pb-row-who strong { font-size: 12.5px; font-weight: 600; color: var(--mc-text-2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-pb-row-who em, body .havn-mc .havn-pb-row-money em { font-size: 11px; font-style: normal; color: var(--mc-text-3) !important; }
body .havn-mc .is-thin { font-style: italic; opacity: .75; }
.havn-pb-row-money { display: grid; gap: 1px; text-align: right; }
body .havn-mc .havn-pb-row-money strong { font-size: 13px; font-weight: 650; color: var(--mc-text) !important; }
.havn-pb-row-links { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.havn-pb-row-links svg { width: 12px; height: 12px; }
body .havn-mc .havn-pb-row-links { font-size: 11.5px; font-weight: 600; color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-row-links svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-row-agent { font-size: 11px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-clash {
	display: flex; align-items: center; gap: 7px; margin: 5px 0 0; padding: 7px 14px;
	border-radius: 9px; background: rgba(242,166,90,.09); font-size: 11.5px; color: #F2A65A !important;
}
.havn-pb-clash svg { width: 13px; height: 13px; }
body .havn-mc .havn-pb-clash svg { color: #F2A65A !important; }

.havn-pb-callout { padding: 14px 16px; border-radius: 12px; background: var(--mc-accent-soft); border: 1px solid rgba(212,179,112,.24); margin-bottom: 16px; }
.havn-pb-callout-head { display: flex; align-items: center; gap: 8px; }
.havn-pb-callout-head svg { width: 14px; height: 14px; }
body .havn-mc .havn-pb-callout-head { font-size: 13px; font-weight: 650; color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-callout-head svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-callout p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mc-text-2) !important; }

.havn-pb-client, .havn-pb-agents li {
	display: grid; align-items: center; gap: 14px;
	grid-template-columns: 34px minmax(0, 1fr) minmax(0, 190px) 92px auto;
	padding: 11px 15px; border-radius: 12px; background: var(--mc-surface); border: 1px solid var(--mc-border);
}
.havn-pb-agents li { grid-template-columns: 34px minmax(0, 1fr) repeat(4, minmax(0, 96px)); }
.havn-pb-client.is-worked { opacity: .78; }
.havn-pb-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mc-accent-soft); border: 1px solid rgba(212,179,112,.28); }
body .havn-mc .havn-pb-avatar { font-size: 13px; font-weight: 700; color: var(--mc-accent) !important; }
.havn-pb-client-text { min-width: 0; display: grid; gap: 2px; }
body .havn-mc .havn-pb-client-text strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-pb-client-text em { font-size: 11.5px; font-style: normal; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.havn-pb-client-reach a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.havn-pb-client-reach svg { width: 12px; height: 12px; }
body .havn-mc .havn-pb-client-reach a { font-size: 12px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-pb-client-reach a:hover { color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-client-value { font-size: 12.5px; font-weight: 650; text-align: right; color: var(--mc-text-2) !important; }
.havn-pb-inbook { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(111,207,151,.12); }
.havn-pb-inbook svg { width: 12px; height: 12px; }
body .havn-mc .havn-pb-inbook { font-size: 11px; font-weight: 600; color: #6FCF97 !important; white-space: nowrap; }
body .havn-mc .havn-pb-inbook svg { color: #6FCF97 !important; }
body .havn-mc .havn-pb-inbook.is-off { background: var(--mc-surface-2); color: var(--mc-text-3) !important; }
.havn-pb-agent-fig { display: grid; gap: 1px; text-align: right; }
body .havn-mc .havn-pb-agent-fig strong { font-size: 14px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-pb-agent-fig em { font-size: 10.5px; font-style: normal; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-agent-name { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-pb-empty, body .havn-mc .havn-pb-note { font-size: 12.5px; line-height: 1.6; color: var(--mc-text-3) !important; margin: 0 0 14px; }

.havn-pb-fold { margin: 26px 0 40px; border-top: 1px solid var(--mc-border); padding-top: 14px; }
.havn-pb-fold summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.havn-pb-fold summary::-webkit-details-marker { display: none; }
.havn-pb-fold summary svg { width: 13px; height: 13px; }
body .havn-mc .havn-pb-fold summary { font-size: 12.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-fold summary svg { color: var(--mc-text-3) !important; }
.havn-pb-fold summary svg:last-child { margin-left: auto; transition: transform .18s; }
.havn-pb-fold[open] summary svg:last-child { transform: rotate(90deg); }
.havn-pb-fold ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
body .havn-mc .havn-pb-fold li { font-size: 12px; line-height: 1.65; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-fold strong { color: var(--mc-text-2) !important; font-weight: 600; }

@media (max-width: 1100px) {
	body .havn-mc .havn-pb-open { grid-template-columns: minmax(0, 1fr) 120px 48px; }
	.havn-pb-row-who { display: none; }
	.havn-pb-client { grid-template-columns: 34px minmax(0, 1fr) auto; }
	.havn-pb-client-reach, .havn-pb-client-value { display: none; }
	.havn-pb-agents li { grid-template-columns: 34px minmax(0, 1fr) repeat(2, minmax(0, 80px)); }
	.havn-pb-agents li .havn-pb-agent-fig:nth-child(n+5) { display: none; }
}
@media (max-width: 720px) {
	body .havn-mc .havn-pb-open { grid-template-columns: minmax(0, 1fr) auto; }
	.havn-pb-row-money, .havn-pb-row-links { display: none; }
	.havn-pb-stat { min-width: 78px; padding: 0 10px; }
}

/* ==========================================================================
   THE CLIENT RECORD  (v2.2.206)

   One drawer, shared by People and the Property book, holding everything the
   dashboard knows about one person — and a menu down its side with every
   section of the dashboard, built or not.

   It is a container (container-type) rather than something media queries
   size: the agent drags it to any width, so the menu has to fold when the
   DRAWER is narrow, whatever the window is doing.
   ========================================================================== */

.havn-cr-scrim { position: fixed; inset: 0; z-index: 9400; background: rgba(8, 8, 12, .55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s; }
.havn-cr-scrim[hidden] { display: none; }
.havn-cr-scrim.is-open { opacity: 1; }
body.havn-mc-light .havn-cr-scrim { background: rgba(15, 15, 20, .32); }

.havn-cr {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 9500;
	width: min(var(--mc-drawer-w, 920px), 100%);
	display: flex; flex-direction: column;
	background: var(--mc-bg-2); border-left: 1px solid var(--mc-border);
	box-shadow: -20px 0 60px rgba(0, 0, 0, .45);
	transform: translateX(105%); transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	container-type: inline-size; container-name: cr;
}
.havn-cr[hidden] { display: none; }
.havn-cr.is-open { transform: translateX(0); }
.havn-cr.is-resizing { transition: none; }
.havn-cr.is-resizing .havn-mc-drawer-grip::after { opacity: .9; }
.havn-cr.is-full { left: 0; right: 0; width: auto; border-left: 0; box-shadow: none; }
body.havn-mc-light .havn-cr { box-shadow: -20px 0 60px rgba(15, 15, 20, .12); }

/* the title bar: what this is, full screen, close */
.havn-cr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--mc-border); flex: 0 0 auto; }
.havn-cr-bar-title { display: inline-flex; align-items: center; gap: 7px; }
.havn-cr-bar-title svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-bar-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-bar-title svg { color: var(--mc-text-3) !important; }
.havn-cr-bar-acts { display: flex; gap: 8px; }
body .havn-mc .havn-cr-x {
	display: grid !important; place-items: center; width: 32px !important; min-width: 32px !important; height: 32px !important;
	min-height: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 9px !important;
	background: transparent !important; border: 1px solid var(--mc-border) !important; box-shadow: none !important;
	transform: none !important; cursor: pointer;
}
body .havn-mc .havn-cr-x:hover { background: var(--mc-surface-2) !important; }
.havn-cr-x svg { width: 14px; height: 14px; }
body .havn-mc .havn-cr-x svg { color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-fs { display: none !important; }
body .havn-mc .havn-cr-fs.havn-mc-drawer-fs { display: grid !important; }
body .havn-mc .havn-cr-x[aria-pressed="true"] { background: var(--mc-accent-soft) !important; border-color: rgba(212, 179, 112, .45) !important; }
body .havn-mc .havn-cr-x[aria-pressed="true"] svg { color: #D4B370 !important; }
body.havn-mc-light .havn-cr-x[aria-pressed="true"] svg { color: #B8893B !important; }

.havn-cr-mount, .havn-cr-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body .havn-mc .havn-cr-loading { padding: 40px 24px; font-size: 13px; color: var(--mc-text-3) !important; }

/* who they are */
.havn-cr-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--mc-border); flex: 0 0 auto; }
.havn-cr-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mc-accent-soft); border: 1px solid rgba(212, 179, 112, .3); }
body .havn-mc .havn-cr-avatar { font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 600; color: var(--mc-accent) !important; }
.havn-cr-id { min-width: 0; }
body .havn-mc .havn-cr-id h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--mc-text) !important; }
.havn-cr-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.havn-cr-role { padding: 2px 9px; border-radius: 999px; font-style: normal; background: var(--mc-surface-2); }
body .havn-mc .havn-cr-role { font-size: 10.5px; font-weight: 600; color: var(--mc-text-2) !important; }
.havn-cr-role.is-past_client { background: rgba(111, 207, 151, .14); }
body .havn-mc .havn-cr-role.is-past_client { color: #6FCF97 !important; }
.havn-cr-role.is-havn, .havn-cr-role.is-prospect { background: var(--mc-accent-soft); }
body .havn-mc .havn-cr-role.is-havn, body .havn-mc .havn-cr-role.is-prospect { color: var(--mc-accent) !important; }
.havn-cr-role.is-vendor { background: rgba(138, 180, 248, .14); }
body .havn-mc .havn-cr-role.is-vendor { color: #8AB4F8 !important; }
.havn-cr-reach { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.havn-cr-quick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--mc-surface-2); text-decoration: none; }
.havn-cr-quick[hidden] { display: none; }
.havn-cr-quick svg { width: 12px; height: 12px; }
body .havn-mc .havn-cr-quick { font-size: 12px; color: var(--mc-text-2) !important; }
body .havn-mc a.havn-cr-quick:hover { color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-quick.is-missing { color: #F2A65A !important; background: rgba(242, 166, 90, .1); }

/* the menu beside the panes */
.havn-cr-body { display: grid; grid-template-columns: 262px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.havn-cr-nav { overflow-y: auto; padding: 14px 10px 24px 14px; border-right: 1px solid var(--mc-border); background: var(--mc-surface); }
.havn-cr-find { display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 9px; background: var(--mc-bg-3); border: 1px solid var(--mc-border-2); margin-bottom: 8px; }
.havn-cr-find svg { width: 13px; height: 13px; flex: 0 0 auto; }
body .havn-mc .havn-cr-find svg { color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-find input {
	box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important;
	margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;
	box-shadow: none !important; font: inherit !important; font-size: 16px !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-cr-find input { font-size: 12.5px !important; } }
body.havn-dashboard-page .havn-mc .havn-cr-find input::placeholder { color: var(--mc-text-3) !important; opacity: 1; }
.havn-cr-only { display: flex; align-items: center; gap: 7px; padding: 4px 4px 10px; cursor: pointer; }
body .havn-mc .havn-cr-only span { font-size: 11.5px; color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-only input { width: 14px !important; height: 14px !important; margin: 0 !important; accent-color: var(--mc-accent); }

.havn-cr-navgroup { margin-top: 10px; }
.havn-cr-navgroup[hidden] { display: none; }
body .havn-mc .havn-cr-navgroup h6 { margin: 0 0 4px; padding: 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-navi {
	display: flex !important; align-items: center; gap: 9px; width: 100% !important; min-height: 0 !important;
	padding: 6px 8px !important; margin: 0 !important; border-radius: 8px !important; text-align: left;
	background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
	cursor: pointer; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: normal !important;
	text-transform: none !important; color: var(--mc-text-2) !important;
}
.havn-cr-navi[hidden] { display: none !important; }
body .havn-mc .havn-cr-navi:hover { background: var(--mc-surface-2) !important; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-navi.is-on { background: var(--mc-accent-soft) !important; color: var(--mc-text) !important; font-weight: 650 !important; }
.havn-cr-navi svg { width: 13px; height: 13px; flex: 0 0 auto; }
body .havn-mc .havn-cr-navi svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-navi.is-on svg { color: var(--mc-accent) !important; }
.havn-cr-navi span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-cr-navi em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--mc-surface-2); color: var(--mc-text-2) !important; }
/* A section that is not connected reads quieter, with a dot saying why: hollow
   for "not built yet", filled blue-grey for "built, not linked". */
body .havn-mc .havn-cr-navi.is-planned, body .havn-mc .havn-cr-navi.is-unlinked { color: var(--mc-text-3) !important; }
.havn-cr-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.havn-cr-navi.is-unlinked .havn-cr-dot { background: #7C8BA1; }
.havn-cr-navi.is-planned .havn-cr-dot { border: 1.5px solid #8A8F98; }

.havn-cr-legend { display: grid; gap: 5px; margin: 16px 6px 0; padding-top: 12px; border-top: 1px solid var(--mc-border); }
.havn-cr-legend span { display: flex; align-items: center; gap: 7px; }
body .havn-mc .havn-cr-legend span { font-size: 11px; color: var(--mc-text-3) !important; }
.havn-cr-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.havn-cr-legend .is-live::before { background: var(--mc-accent); }
.havn-cr-legend .is-unlinked::before { background: #7C8BA1; }
.havn-cr-legend .is-planned::before { border: 1.5px solid #8A8F98; box-sizing: border-box; }
body .havn-mc .havn-cr-left-out { margin: 10px 6px 0; font-size: 10.5px; line-height: 1.55; color: var(--mc-text-3) !important; opacity: .8; }

/* the panes */
.havn-cr-panes { overflow-y: auto; padding: 22px 26px 40px; min-width: 0; }
.havn-cr-pane[hidden] { display: none; }
.havn-cr-pane-head { margin-bottom: 18px; }
body .havn-mc .havn-cr-pane-group { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-pane-head h3 { margin: 3px 0 0; font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-pane-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--mc-text-2) !important; max-width: 640px; }

.havn-cr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; margin: 12px 0 0; }
.havn-cr-fact { min-width: 0; }
body .havn-mc .havn-cr-fact dt { font-size: 11px; font-weight: 500; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-fact dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-fact dd em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-empty { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-sub { margin: 22px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mc-text-3) !important; }

.havn-cr-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.havn-cr-figs > div { padding: 12px 14px; border-radius: 11px; background: var(--mc-surface); border: 1px solid var(--mc-border); display: grid; gap: 2px; }
body .havn-mc .havn-cr-figs strong { font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-figs span { font-size: 11px; color: var(--mc-text-3) !important; }
.havn-cr-next { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--mc-accent-soft); border: 1px solid rgba(212, 179, 112, .24); }
.havn-cr-next-head { display: flex; align-items: center; gap: 7px; }
.havn-cr-next-head svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-next-head { font-size: 12px; font-weight: 700; color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-next-head svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-next p { margin: 6px 0 4px; font-size: 13px; line-height: 1.55; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-link {
	display: inline-flex !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 8px 0 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
	cursor: pointer; text-decoration: none; font-size: 12.5px !important; font-weight: 600 !important;
	letter-spacing: normal !important; text-transform: none !important; color: var(--mc-accent) !important;
}

.havn-cr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.havn-cr-card { padding: 14px 16px; border-radius: 12px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
.havn-cr-card.is-lit { border-color: rgba(212, 179, 112, .55); box-shadow: 0 0 0 3px var(--mc-accent-soft); }
.havn-cr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body .havn-mc .havn-cr-card-top strong { font-size: 14px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-card-top strong em { font-style: normal; font-weight: 400; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-card-sub { margin: 3px 0 0; font-size: 12px; color: var(--mc-text-3) !important; }
.havn-cr-pill { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-style: normal;
	background: color-mix(in srgb, var(--pill) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pill) 36%, transparent); }
body .havn-mc .havn-cr-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pill) !important; }
.havn-cr-spec { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.havn-cr-spec li { padding: 3px 9px; border-radius: 7px; background: var(--mc-surface-2); }
body .havn-mc .havn-cr-spec li { font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-spec strong { color: var(--mc-text) !important; }
body .havn-mc .havn-cr-thin { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: #F2A65A !important; }
.havn-cr-thin svg { width: 12px; height: 12px; }

.havn-cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.havn-cr-list li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-cr-list strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-list span { font-size: 12px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-list a { margin-left: auto; font-size: 12px; color: var(--mc-accent) !important; text-decoration: none; }
body .havn-mc .havn-cr-person {
	display: inline !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
	cursor: pointer; font-size: 13px !important; font-weight: 600 !important; letter-spacing: normal !important;
	text-transform: none !important; color: var(--mc-text) !important; text-decoration: underline; text-decoration-color: var(--mc-border-2); text-underline-offset: 3px;
}
body .havn-mc .havn-cr-person:hover { color: var(--mc-accent) !important; }

.havn-cr-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.havn-cr-timeline li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; position: relative; }
.havn-cr-timeline li::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: var(--mc-border); }
.havn-cr-timeline li:last-child::before { display: none; }
.havn-cr-timeline i { width: 9px; height: 9px; margin: 5px 0 0 2px; border-radius: 50%; background: var(--mc-text-3); position: relative; z-index: 1; }
.havn-cr-timeline .sec-pipeline i { background: #8AB4F8; }
.havn-cr-timeline .sec-presentations i, .havn-cr-timeline .sec-appraisals i { background: #D4B370; }
.havn-cr-timeline .sec-calendar i { background: #E0C285; }
.havn-cr-timeline .sec-notes i { background: #B8A1E0; }
.havn-cr-timeline .sec-prospecting i { background: #6FCF97; }
body .havn-mc .havn-cr-timeline strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-timeline p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-timeline span { display: block; margin-top: 2px; font-size: 11px; color: var(--mc-text-3) !important; }

.havn-cr-callout { padding: 12px 14px; border-radius: 11px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
.havn-cr-callout.is-havn { background: var(--mc-accent-soft); border-color: rgba(212, 179, 112, .24); }
.havn-cr-callout > span { display: flex; align-items: center; gap: 7px; }
.havn-cr-callout svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-callout > span { font-size: 12.5px; font-weight: 700; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-callout.is-havn > span, body .havn-mc .havn-cr-callout.is-havn svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-callout p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mc-text-2) !important; }
.havn-cr-quote { margin: 16px 0 0; padding: 12px 14px; border-left: 2px solid var(--mc-accent); background: var(--mc-surface); border-radius: 0 10px 10px 0; }
body .havn-mc .havn-cr-quote span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-quote q { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; font-style: italic; color: var(--mc-text) !important; }

/* "built, not linked" and "not built yet" — said, never left blank */
.havn-cr-state { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--mc-border-2); background: var(--mc-surface); }
.havn-cr-state strong { display: flex; align-items: center; gap: 7px; }
.havn-cr-state svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-state strong { font-size: 12.5px; font-weight: 700; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-state.is-unlinked strong, body .havn-mc .havn-cr-state.is-unlinked svg { color: #9FB1CC !important; }
body .havn-mc .havn-cr-state p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-state p em { font-style: normal; color: var(--mc-text-2) !important; }
.havn-cr-todo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--mc-border); border-radius: 11px; overflow: hidden; }
.havn-cr-todo li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--mc-border); }
.havn-cr-todo li:first-child { border-top: 0; }
body .havn-mc .havn-cr-todo span { font-size: 12.5px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-todo em { font-style: normal; font-size: 12.5px; color: var(--mc-text-3) !important; opacity: .6; }

/* the editable contact fields — the (0,3,2) counter, sixth panel to need it */
.havn-cr-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.havn-cr-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 210px; min-width: 0; }
.havn-cr-field.is-wide { flex-basis: 100%; }
body.havn-dashboard-page .havn-mc .havn-cr-field > span { font-size: 11.5px; font-weight: 600; line-height: 1.25 !important; color: var(--mc-text-2) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field input,
body.havn-dashboard-page .havn-mc .havn-cr-field select,
body.havn-dashboard-page .havn-mc .havn-cr-noteform textarea {
	box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important;
	margin: 0 !important; padding: 0 12px !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border-2) !important; border-radius: 10px !important;
	font: inherit !important; font-size: 16px !important; line-height: 1.3 !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) {
	body.havn-dashboard-page .havn-mc .havn-cr-field input,
	body.havn-dashboard-page .havn-mc .havn-cr-field select,
	body.havn-dashboard-page .havn-mc .havn-cr-noteform textarea { font-size: 13.5px !important; }
}
body.havn-dashboard-page .havn-mc .havn-cr-noteform textarea { height: auto !important; min-height: 80px !important; padding: 10px 12px !important; line-height: 1.55 !important; resize: vertical; }
body.havn-dashboard-page .havn-mc .havn-cr-field input:focus,
body.havn-dashboard-page .havn-mc .havn-cr-field select:focus,
body.havn-dashboard-page .havn-mc .havn-cr-noteform textarea:focus { outline: none !important; border-color: var(--mc-accent) !important; box-shadow: 0 0 0 3px var(--mc-accent-soft) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field select {
	padding-right: 32px !important;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
	background-position: right 15px center, right 10px center !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important;
}
.havn-cr-field.is-saved input, .havn-cr-field.is-saved select { border-color: rgba(111, 207, 151, .55) !important; }
.havn-cr-noteform { display: grid; gap: 8px; margin-bottom: 18px; }
.havn-cr-noteform button { justify-self: start; }

/* A drawer dragged narrow folds its menu over the panes rather than beside them. */
@container cr (max-width: 700px) {
	.havn-cr-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
	.havn-cr-nav { max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--mc-border); }
	.havn-cr-head { grid-template-columns: 40px minmax(0, 1fr); }
	.havn-cr-reach { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.havn-cr-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.havn-cr-panes { padding: 18px 16px 32px; }
}
/* Full screen: the reading line stays readable. */
.havn-cr.is-full .havn-cr-panes > .havn-cr-pane { max-width: 980px; }
@media (max-width: 620px) {
	.havn-cr { width: 100%; }
	.havn-cr .havn-mc-drawer-grip { display: none !important; }
	body .havn-mc .havn-cr .havn-cr-fs.havn-mc-drawer-fs { display: none !important; }
}

/* ---- the Property book's rows, now that every person is a button ------- */
body .havn-mc .havn-pb-addrbtn, body .havn-mc .havn-pb-person, body .havn-mc .havn-pb-client-text {
	width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
	text-align: left; cursor: pointer; letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-pb-addrbtn { display: grid !important; gap: 3px; min-width: 0; }
body .havn-mc .havn-pb-addrbtn:hover .havn-pb-addr { color: var(--mc-accent) !important; }
body .havn-mc .havn-pb-open { cursor: default; }
.havn-pb-row-who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
body .havn-mc .havn-pb-person {
	display: inline !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--mc-text-2) !important;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
body .havn-mc .havn-pb-person:hover { color: var(--mc-accent) !important; text-decoration-color: currentColor; }
body .havn-mc .havn-pb-person.is-more { font-size: 11px !important; font-weight: 500 !important; color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-client-text { display: grid !important; gap: 2px; min-width: 0; }
body .havn-mc .havn-pb-client-text:hover strong { color: var(--mc-accent) !important; }

/* ---- People --------------------------------------------------------------- */
.havn-cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.havn-cp-list li[hidden] { display: none; }
body .havn-mc .havn-cp-row {
	display: grid !important; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 150px) 92px 16px;
	gap: 14px; align-items: center; width: 100% !important; min-height: 0 !important; text-align: left;
	padding: 11px 15px !important; margin: 0 !important; border-radius: 12px !important;
	background: var(--mc-surface) !important; border: 1px solid var(--mc-border) !important;
	box-shadow: none !important; transform: none !important; cursor: pointer;
	font-size: 13px !important; letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-cp-row:hover { background: var(--mc-surface-2) !important; border-color: var(--mc-border-2) !important; }
.havn-cp-who, .havn-cp-props { min-width: 0; display: grid; gap: 4px; }
body .havn-mc .havn-cp-who strong { font-size: 13.5px; font-weight: 650; color: var(--mc-text) !important; }
.havn-cp-rels { display: flex; gap: 5px; flex-wrap: wrap; }
.havn-cp-rels em { padding: 1px 7px; border-radius: 999px; font-style: normal; background: color-mix(in srgb, var(--pill) 15%, transparent); }
body .havn-mc .havn-cp-rels em { font-size: 10px; font-weight: 600; color: var(--pill) !important; }
body .havn-mc .havn-cp-props strong { font-size: 12.5px; font-weight: 500; color: var(--mc-text-2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-cp-props em { font-size: 11px; font-style: normal; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cp-reach { font-size: 12px; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-cp-value { font-size: 12.5px; font-weight: 650; text-align: right; color: var(--mc-text-2) !important; }
.havn-cp-go svg { width: 14px; height: 14px; }
body .havn-mc .havn-cp-go svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-pb-chip em { font-style: normal; font-size: 10px; opacity: .75; }
@media (max-width: 1100px) {
	body .havn-mc .havn-cp-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 16px; }
	.havn-cp-reach, .havn-cp-value { display: none; }
}
@media (max-width: 720px) {
	body .havn-mc .havn-cp-row { grid-template-columns: 34px minmax(0, 1fr) 16px; }
	.havn-cp-props { display: none; }
}
.havn-cr-earlier { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--mc-border); }
body .havn-mc .havn-cr-earlier span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-earlier em { font-style: normal; font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-person-plain { font-size: 13px; font-weight: 600; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-sub.is-first { margin-top: 0; }

/* Light mode: the role chips are small bold text on a pale tint of their own
   colour, and the dark-theme colours (#6FCF97, the #D4B370 accent the shell
   pins inline) disappear on it. Deeper pairs for the chips; the leads drawer's
   own light gold for the links and headings, so the two drawers agree. */
body.havn-mc-light .havn-cr-role.is-past_client, .havn-mc.is-light .havn-cr-role.is-past_client { color: #2F8F5B !important; }
body.havn-mc-light .havn-cr-role.is-havn, body.havn-mc-light .havn-cr-role.is-prospect,
.havn-mc.is-light .havn-cr-role.is-havn, .havn-mc.is-light .havn-cr-role.is-prospect { color: #9A7328 !important; }
body.havn-mc-light .havn-cr-role.is-vendor, .havn-mc.is-light .havn-cr-role.is-vendor { color: #3E6FB0 !important; }
body.havn-mc-light .havn-cr-next-head, body.havn-mc-light .havn-cr-next-head svg,
body.havn-mc-light .havn-cr-link, body.havn-mc-light .havn-cr-avatar,
body.havn-mc-light .havn-cr-navi.is-on svg { color: #B8893B !important; }
body.havn-mc-light .havn-cp-rels em { filter: saturate(1.4) brightness(.72); }
body .havn-mc .havn-lp-fullrec {
	display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; min-height: 0 !important;
	margin: 12px 0 0 !important; padding: 6px 12px !important; border-radius: 999px !important;
	background: var(--mc-accent-soft) !important; border: 1px solid rgba(212, 179, 112, .3) !important;
	box-shadow: none !important; transform: none !important; cursor: pointer;
	font-size: 12px !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-accent) !important;
}
.havn-lp-fullrec svg { width: 13px; height: 13px; }
body.havn-mc-light .havn-lp-fullrec { color: #9A7328 !important; }

/* =========================================================================
   The client record — everything editable  (v2.2.206, CEO: "make sure that
   everything is also editable")

   Every panel draws its facts as fields now. The same (0,3,2) counter the
   contact fields needed, restated for textareas and the NZ$ / % boxes; the
   buttons restated at body .havn-mc because the site paints every <button>.
   ====================================================================== */
.havn-cr-fields.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px 14px; }
.havn-cr-fields.is-grid .havn-cr-field.is-wide { grid-column: 1 / -1; }
/* Two to a line: a date-and-time needs about 200px to show both halves. */
.havn-cr-fields.is-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; flex: 1 1 auto; min-width: 0; }
.havn-cr-card .havn-cr-fields { margin-top: 12px; }
.havn-cr-reason { display: contents; }
.havn-cr-reason[hidden] { display: none; }

body.havn-dashboard-page .havn-mc .havn-cr-field textarea {
	box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 64px !important;
	margin: 0 !important; padding: 10px 12px !important; background: var(--mc-bg-3) !important;
	border: 1px solid var(--mc-border-2) !important; border-radius: 10px !important; resize: vertical;
	font: inherit !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-cr-field textarea { font-size: 13.5px !important; } }
body.havn-dashboard-page .havn-mc .havn-cr-field textarea:focus { outline: none !important; border-color: var(--mc-accent) !important; box-shadow: 0 0 0 3px var(--mc-accent-soft) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field input::placeholder,
body.havn-dashboard-page .havn-mc .havn-cr-field textarea::placeholder { color: var(--mc-text-3) !important; opacity: .8; }
body.havn-dashboard-page .havn-mc .havn-cr-field input[type="date"],
body.havn-dashboard-page .havn-mc .havn-cr-field input[type="datetime-local"] { color-scheme: dark; }
body.havn-mc-light.havn-dashboard-page .havn-mc .havn-cr-field input[type="date"],
body.havn-mc-light.havn-dashboard-page .havn-mc .havn-cr-field input[type="datetime-local"] { color-scheme: light; }

/* NZ$ before, % after — the unit sits inside the box, so the number is only the number. */
.havn-cr-affix { position: relative; display: block; }
.havn-cr-affix > i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-style: normal; pointer-events: none; }
body .havn-mc .havn-cr-affix > i { font-size: 12px; font-weight: 600; color: var(--mc-text-3) !important; }
.havn-cr-affix:not(.is-after) > i { left: 12px; }
.havn-cr-affix.is-after > i { right: 12px; }
body.havn-dashboard-page .havn-mc .havn-cr-affix:not(.is-after) input { padding-left: 44px !important; }
body.havn-dashboard-page .havn-mc .havn-cr-affix.is-after input { padding-right: 30px !important; }

/* Saving, saved, refused — said on the field itself. */
body .havn-mc .havn-cr-field small { font-size: 11px; line-height: 1.45; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-field .havn-cr-fieldmsg { color: #6FCF97 !important; }
body .havn-mc .havn-cr-field.is-error .havn-cr-fieldmsg { color: #E0857B !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saving input,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saving select,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saving textarea { border-color: rgba(212, 179, 112, .55) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saved input,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saved select,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-saved textarea { border-color: rgba(111, 207, 151, .6) !important; }
body.havn-dashboard-page .havn-mc .havn-cr-field.is-error input,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-error select,
body.havn-dashboard-page .havn-mc .havn-cr-field.is-error textarea { border-color: rgba(224, 133, 123, .75) !important; }
body.havn-mc-light .havn-cr-field .havn-cr-fieldmsg { color: #2F8F5B !important; }
body.havn-mc-light .havn-cr-field.is-error .havn-cr-fieldmsg { color: #B4473A !important; }

/* The few things that are not typed in — each says why. */
.havn-cr-lockval { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px;
	border: 1px dashed var(--mc-border-2); background: transparent; box-sizing: border-box; }
.havn-cr-lockval svg { width: 12px; height: 12px; flex: 0 0 auto; }
body .havn-mc .havn-cr-lockval svg { color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-lockval b { font-size: 13.5px; font-weight: 600; color: var(--mc-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body .havn-mc .havn-cr-edithint { display: flex; gap: 7px; align-items: flex-start; margin: 0 4px 6px; font-size: 11px; line-height: 1.45; color: var(--mc-text-3) !important; }
.havn-cr-edithint svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }
body .havn-mc .havn-cr-edithint svg { color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-savenote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-savenote.is-top { margin: 0 0 14px; }
.havn-cr-savenote svg { width: 12px; height: 12px; }
body .havn-mc .havn-cr-savenote .havn-cr-link { margin: 0 !important; }
body .havn-mc .havn-cr-sub.is-card { margin: 16px 0 0; }

/* The Overview's figures are the way to where they are changed. */
body .havn-mc .havn-cr-figs > button {
	display: grid !important; gap: 2px; width: auto !important; min-height: 0 !important; margin: 0 !important; text-align: left;
	padding: 12px 14px !important; border-radius: 11px !important; background: var(--mc-surface) !important;
	border: 1px solid var(--mc-border) !important; box-shadow: none !important; transform: none !important; cursor: pointer;
	letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-cr-figs > button:hover { border-color: rgba(212, 179, 112, .45) !important; }
body .havn-mc .havn-cr-figs > button:hover span { color: var(--mc-accent) !important; }
body .havn-mc .havn-cr-next p em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; color: var(--mc-accent) !important; }
.havn-cr-next .havn-cr-fields { margin-top: 12px; }
.havn-cr-overview > .havn-cr-fields { margin-top: 16px; }

/* Each line of the story opens the section it came from. */
body .havn-mc .havn-cr-jump {
	display: inline !important; width: auto !important; min-height: 0 !important; margin: 0 0 0 8px !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer;
	font-size: 11px !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-accent) !important;
}
body .havn-mc .havn-cr-link.is-quiet { color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-link.is-quiet:hover { color: #E0857B !important; }

/* The commission line under a deal: worked out, and says from what. */
.havn-cr-comm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--mc-border); }
body .havn-mc .havn-cr-comm { font-size: 12.5px; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-comm b { font-size: 14px; font-weight: 700; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-comm em { font-style: normal; font-size: 11.5px; color: var(--mc-text-3) !important; }
body .havn-mc .havn-cr-comm span { flex-basis: 100%; font-size: 11px; color: var(--mc-text-3) !important; opacity: .85; }
.havn-cr-card.is-quiet { background: transparent; border-style: dashed; margin-bottom: 10px; }
body .havn-mc .havn-cr-card-title { font-size: 13.5px; font-weight: 650; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-note-inline { font-style: normal; font-size: 11.5px; color: var(--mc-text-3) !important; }

/* Notes: yours can be rewritten; the prospecting log's are kept as written. */
.havn-cr-noteform-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body .havn-mc .havn-cr-noteform-foot small { font-size: 11.5px; line-height: 1.45; color: var(--mc-text-3) !important; }
.havn-cr-notes { list-style: none; margin: 0; padding: 0; }
.havn-cr-noterow { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; position: relative; }
.havn-cr-noterow::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: var(--mc-border); }
.havn-cr-noterow:last-child::before { display: none; }
.havn-cr-noterow > i { width: 9px; height: 9px; margin: 5px 0 0 2px; border-radius: 50%; background: #B8A1E0; position: relative; z-index: 1; }
.havn-cr-noterow.is-system > i { background: var(--mc-text-3); }
body .havn-mc .havn-cr-noterow strong { font-size: 12px; font-weight: 700; color: var(--mc-text-2) !important; }
body .havn-mc .havn-cr-noterow p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--mc-text) !important; }
body .havn-mc .havn-cr-noterow p[hidden] { display: none; }
body .havn-mc .havn-cr-noterow span { display: block; margin-top: 3px; font-size: 11px; color: var(--mc-text-3) !important; }
.havn-cr-note-acts { display: flex; gap: 14px; }
body .havn-mc .havn-cr-note-acts .havn-cr-link { margin: 4px 0 0 !important; font-size: 11.5px !important; }
.havn-cr-noteedit { display: grid; gap: 8px; margin-top: 6px; }
.havn-cr-noteedit > div { display: flex; gap: 14px; align-items: center; }
body.havn-dashboard-page .havn-mc .havn-cr-noteedit textarea {
	box-sizing: border-box !important; width: 100% !important; min-height: 72px !important; margin: 0 !important; padding: 10px 12px !important;
	background: var(--mc-bg-3) !important; border: 1px solid var(--mc-accent) !important; border-radius: 10px !important; resize: vertical;
	font: inherit !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-cr-noteedit textarea { font-size: 13.5px !important; } }
body .havn-mc .havn-cr-noteedit .havn-cr-link { margin: 0 !important; }

/* Appointments and documents: a row of fields, and a way to remove one. */
.havn-cr-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.havn-cr-event { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--mc-surface); border: 1px solid var(--mc-border); }
body .havn-mc .havn-cr-rm {
	display: grid !important; place-items: center; flex: 0 0 auto; width: 40px !important; height: 40px !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important; border-radius: 10px !important; cursor: pointer;
	background: transparent !important; border: 1px solid var(--mc-border-2) !important; box-shadow: none !important; transform: none !important;
}
body .havn-mc .havn-cr-rm:hover { border-color: rgba(224, 133, 123, .6) !important; background: rgba(224, 133, 123, .08) !important; }
.havn-cr-rm svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-rm svg { color: var(--mc-text-3) !important; }
.havn-cr-addform { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--mc-border-2); margin-bottom: 8px; }
.havn-cr-addform .havn-cr-fields { margin: 0 0 12px; }
/* The add buttons: the gold pill the listing-presentation drawer's "Full
   client record" uses, restated because the site paints every <button>. */
body .havn-mc .havn-cr-act {
	display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; min-height: 0 !important;
	margin: 12px 0 0 !important; padding: 8px 14px !important; border-radius: 999px !important; cursor: pointer;
	background: var(--mc-accent-soft) !important; border: 1px solid rgba(212, 179, 112, .35) !important;
	box-shadow: none !important; transform: none !important;
	font-size: 12.5px !important; font-weight: 650 !important; letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-accent) !important;
}
body .havn-mc .havn-cr-act:hover { border-color: rgba(212, 179, 112, .7) !important; }
body .havn-mc .havn-cr-act[disabled] { opacity: .55; cursor: progress; }
.havn-cr-act svg { width: 12px; height: 12px; }
body .havn-mc .havn-cr-act svg { color: currentColor !important; }
body.havn-mc-light .havn-cr-act { color: #9A7328 !important; }
.havn-cr-noteform-foot .havn-cr-act { margin-top: 0 !important; }
body .havn-mc .havn-cr-actmsg { margin: 10px 0 0; font-size: 12.5px; color: #6FCF97 !important; }
body .havn-mc .havn-cr-actmsg.is-error { color: #E0857B !important; }
body.havn-mc-light .havn-cr-actmsg { color: #2F8F5B !important; }
body.havn-mc-light .havn-cr-actmsg.is-error { color: #B4473A !important; }

/* Tama's part, beside his name. */
.havn-cr-list.is-people li { align-items: center; }
.havn-cr-list.is-people .havn-cr-field { flex: 0 0 170px; margin-left: auto; }
.havn-cr-list.is-people .havn-cr-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.havn-dashboard-page .havn-mc .havn-cr-list.is-people .havn-cr-field select { height: 34px !important; min-height: 34px !important; }
body .havn-mc .havn-cr-list.is-people a { margin-left: 0; }

/* A count on an unbuilt section is what YOU filled in — shown in gold. */
body .havn-mc .havn-cr-navi em.is-own { background: var(--mc-accent-soft); color: var(--mc-accent) !important; }
body.havn-mc-light .havn-cr-navi em.is-own { color: #9A7328 !important; }
.havn-cr-fields.is-own { margin-top: 14px; }

@container cr (max-width: 700px) {
	.havn-cr-event { flex-wrap: wrap; }
	.havn-cr-list.is-people .havn-cr-field { flex-basis: 100%; margin-left: 0; }
}
@container cr (max-width: 460px) {
	.havn-cr-fields.is-row, .havn-cr-fields.is-grid { grid-template-columns: 1fr; }
	.havn-cr-figs { grid-template-columns: 1fr 1fr; }
}
body.havn-mc-light .havn-cr-next p em, body.havn-mc-light .havn-cr-jump,
body.havn-mc-light .havn-cr-edithint svg { color: #9A7328 !important; }

/* =========================================================================
   Client records — the record as a section of its own  (v2.2.206, CEO: "turn
   this into a new section in the dashboard for agents and agencies")

   The list of everyone on the left; the same record the drawer shows, open on
   the page on the right. The record pane is a `cr` container, so every
   @container rule written for a narrow drawer folds the page's record too.
   ====================================================================== */
.havn-crp-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 18px;
	height: calc(100vh - 210px); min-height: 620px; }
.havn-crp-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; padding: 12px;
	border-radius: 14px; background: var(--mc-surface); border: 1px solid var(--mc-border); box-sizing: border-box; }
.havn-crp-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--mc-bg-3); border: 1px solid var(--mc-border-2); }
.havn-crp-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
body .havn-mc .havn-crp-search svg { color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-mc .havn-crp-search input {
	box-sizing: border-box !important; flex: 1 1 auto; width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important;
	margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
	font: inherit !important; font-size: 16px !important; line-height: 1.3 !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-crp-search input { font-size: 13px !important; } }
body.havn-dashboard-page .havn-mc .havn-crp-search input::placeholder { color: var(--mc-text-3) !important; opacity: 1; }
.havn-crp-agent { display: grid; gap: 5px; }
body .havn-mc .havn-crp-agent > span { font-size: 11px; font-weight: 600; color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-mc .havn-crp-agent select {
	box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 32px 0 12px !important;
	background-color: var(--mc-bg-3) !important;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
	background-position: right 15px center, right 10px center !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important;
	border: 1px solid var(--mc-border-2) !important; border-radius: 10px !important;
	font: inherit !important; font-size: 16px !important; color: var(--mc-text) !important;
}
@media (min-width: 862px) { body.havn-dashboard-page .havn-mc .havn-crp-agent select { font-size: 13px !important; } }
.havn-crp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
body .havn-mc .havn-crp-chips .havn-pb-chip { font-size: 11.5px !important; padding: 4px 9px !important; }
body .havn-mc .havn-crp-count { margin: 0; font-size: 11px; color: var(--mc-text-3) !important; }
.havn-crp-rows { list-style: none; margin: 0 -4px; padding: 0 4px; display: grid; gap: 4px; align-content: start; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.havn-crp-rows li[hidden] { display: none; }
body .havn-mc .havn-crp-row {
	display: grid !important; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start;
	width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 9px 10px !important; text-align: left; cursor: pointer;
	border-radius: 11px !important; background: transparent !important; border: 1px solid transparent !important;
	box-shadow: none !important; transform: none !important; letter-spacing: normal !important; text-transform: none !important;
}
body .havn-mc .havn-crp-row:hover { background: var(--mc-surface-2) !important; }
body .havn-mc .havn-crp-row.is-on { background: var(--mc-accent-soft) !important; border-color: rgba(212, 179, 112, .35) !important; }
.havn-crp-who { display: grid; gap: 3px; min-width: 0; }
body .havn-mc .havn-crp-name { font-size: 13.5px; font-weight: 650; color: var(--mc-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .havn-mc .havn-crp-where { font-size: 11.5px; color: var(--mc-text-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.havn-crp-held { display: inline-flex; align-items: center; gap: 5px; }
.havn-crp-held svg { width: 11px; height: 11px; }
body .havn-mc .havn-crp-held, body .havn-mc .havn-crp-held svg { font-size: 11px; font-weight: 600; color: var(--mc-text-2) !important; }

/* The record pane: the drawer's insides, on the page. */
.havn-crp-record { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
	border-radius: 14px; background: var(--mc-bg-2); border: 1px solid var(--mc-border);
	container-type: inline-size; container-name: cr; }
.havn-crp-record > .havn-cr-inner { flex: 1 1 auto; }
.havn-crp-record .havn-cr-panes > .havn-cr-pane { max-width: 980px; }
.havn-crp-record > .havn-cr-loading { margin: auto; text-align: center; }

/* The drawer's way to the page. */
body .havn-mc .havn-cr-topage {
	display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; min-height: 0 !important; height: 32px;
	margin: 0 !important; padding: 0 11px !important; border-radius: 9px !important; cursor: pointer;
	background: transparent !important; border: 1px solid var(--mc-border-2) !important; box-shadow: none !important; transform: none !important;
	font-size: 12px !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important;
	color: var(--mc-text-2) !important;
}
body .havn-mc .havn-cr-topage[hidden] { display: none !important; }
body .havn-mc .havn-cr-topage:hover { border-color: rgba(212, 179, 112, .5) !important; color: var(--mc-accent) !important; }
.havn-cr-topage svg { width: 13px; height: 13px; }
body .havn-mc .havn-cr-topage svg { color: currentColor !important; }
@container cr (max-width: 520px) { .havn-cr-topage span { display: none; } }

/* Not in your role: listed, closed, and says who can open it. */
body .havn-mc .havn-cr-state.is-restricted strong, body .havn-mc .havn-cr-state.is-restricted svg { color: #C9A96E !important; }
body .havn-mc .havn-cr-navi.is-restricted { color: var(--mc-text-3) !important; opacity: .7; }
.havn-cr-navi.is-restricted .havn-cr-dot { width: 8px; height: 8px; border-radius: 2px; background: transparent; border: 1.5px solid #C9A96E; }
.havn-cr-legend .is-restricted::before { border-radius: 2px; border: 1.5px solid #C9A96E; box-sizing: border-box; }
.havn-cr-figs.is-one { grid-template-columns: minmax(0, 220px); }

@media (max-width: 1100px) {
	.havn-crp-body { grid-template-columns: 260px minmax(0, 1fr); }
}
/* Below the tablet line the list sits above the record and the page scrolls. */
@media (max-width: 861px) {
	.havn-crp-body { grid-template-columns: 1fr; height: auto; min-height: 0; }
	.havn-crp-list { max-height: 44vh; border-radius: 0; }
	.havn-crp-record { height: 88vh; border-radius: 0; }
}
body.havn-mc-light .havn-crp-held, body.havn-mc-light .havn-crp-held svg { color: #5B616B !important; }
body.havn-mc-light .havn-cr-state.is-restricted strong, body.havn-mc-light .havn-cr-state.is-restricted svg { color: #9A7328 !important; }