/* ==========================================================================
   HAVN Portal Syndication — view styles (preview candidate)
   Built on the Mission Control tokens (--mc-*) so dark/light follow the
   dashboard's .is-light toggle, and on container queries so the layout
   answers to the width the sidebar leaves, not the viewport.
   ========================================================================== */
.havn-syn { container-type: inline-size; container-name: syn; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.havn-syn *, .havn-syn *::before, .havn-syn *::after { box-sizing: border-box; }

/* ---- house pill buttons (havn-ui-controls) ---- */
.havn-syn .havn-mc-btn, .havn-syn-drawer .havn-mc-btn, .havn-syn-modal .havn-mc-btn {
	display: inline-flex !important; align-items: center; gap: 6px; height: 34px; padding: 7px 13px !important;
	border-radius: 999px !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .02em;
	white-space: nowrap; cursor: pointer; border: 1px solid var(--mc-border-2, rgba(255,255,255,.14));
}
.havn-syn .havn-mc-btn svg, .havn-syn-drawer .havn-mc-btn svg, .havn-syn-modal .havn-mc-btn svg { width: 14px; height: 14px; }
.havn-syn .havn-mc-btn-primary, .havn-syn-drawer .havn-mc-btn-primary, .havn-syn-modal .havn-mc-btn-primary {
	background: var(--mc-bg-2, rgb(29,29,37)) !important; border-color: var(--mc-accent, #D4B370) !important; color: var(--mc-text, #F4F4F5) !important; font-weight: 600;
}
.havn-syn .havn-mc-btn-ghost, .havn-syn-drawer .havn-mc-btn-ghost, .havn-syn-modal .havn-mc-btn-ghost {
	background: var(--mc-surface, rgba(255,255,255,.03)) !important; border-color: var(--mc-border, rgba(255,255,255,.08)) !important; color: var(--mc-text-2) !important; font-weight: 500;
}
.havn-syn .havn-mc-btn-ghost:hover, .havn-syn-drawer .havn-mc-btn-ghost:hover { color: var(--mc-text) !important; border-color: var(--mc-border-2) !important; }
.havn-syn .havn-mc-btn:disabled, .havn-syn-drawer .havn-mc-btn:disabled { opacity: .48; cursor: not-allowed; }
.havn-syn-sm { height: 30px !important; padding: 5px 11px !important; font-size: 11px !important; }

/* ---- status strip (mirrors Prospecting's period bar) ---- */
.havn-syn-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.havn-syn-strip-note { color: var(--mc-text-3); font-size: 12.5px; margin-right: auto; }
.havn-syn-conn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px;
	border: 1px solid var(--mc-border-2); color: var(--mc-text-2); font-size: 12px; background: transparent; cursor: pointer; }
.havn-syn-conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-text-3); }
.havn-syn-conn.is-on { border-color: color-mix(in srgb, var(--mc-success, #6FCF97) 45%, transparent); color: var(--mc-success, #6FCF97); }
.havn-syn-conn.is-on i { background: var(--mc-success, #6FCF97); }

/* ---- KPIs: 4 → 2 → 1 by available width ---- */
.havn-syn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.havn-syn-kpis .havn-mc-kpi { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.havn-syn-kpis .havn-mc-kpi.is-on { border-color: color-mix(in srgb, var(--mc-accent) 55%, transparent); }
.havn-syn-kpis .havn-mc-kpi-value { font-variant-numeric: tabular-nums; }

/* ---- two-column row ---- */
.havn-syn-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.havn-syn-card { padding: 18px 20px; min-width: 0; }
.havn-syn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.havn-syn-head .havn-mc-h3 { margin: 0; }

/* action queue */
.havn-syn-queue { list-style: none; margin: 0; padding: 0; }
.havn-syn-queue li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--mc-border); }
.havn-syn-queue li:first-child { border-top: 0; padding-top: 2px; }
.havn-syn-qicon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--mc-surface); font-weight: 700; font-size: 13px; }
.havn-syn-qicon.is-block { color: var(--mc-danger, #E0857B); }
.havn-syn-qicon.is-warn { color: var(--mc-warn, #D4B370); }
.havn-syn-qicon.is-ok { color: var(--mc-success, #6FCF97); }
.havn-syn-qtext strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--mc-text); }
.havn-syn-qtext span { display: block; font-size: 12px; color: var(--mc-text-3); margin-top: 1px; }
.havn-syn-empty { padding: 26px 12px; text-align: center; color: var(--mc-text-3); font-size: 13px; border: 1px dashed var(--mc-border-2); border-radius: 12px; }

/* portal list */
.havn-syn-portals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.havn-syn-portals li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--mc-border); border-radius: 12px; background: var(--mc-surface); }
.havn-syn-portals strong { display: block; font-size: 13px; font-weight: 600; color: var(--mc-text); }
.havn-syn-portals small { display: block; font-size: 11.5px; color: var(--mc-text-3); margin-top: 2px; }
.havn-syn-fine { margin: 12px 0 0; font-size: 11.5px; color: var(--mc-text-3); line-height: 1.5; }

/* ---- pills ---- */
.havn-syn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--mc-border-2); color: var(--mc-text-2); background: transparent; }
.havn-syn-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.havn-syn-pill.is-live    { color: var(--mc-success, #6FCF97); background: color-mix(in srgb, var(--mc-success, #6FCF97) 12%, transparent); border-color: color-mix(in srgb, var(--mc-success, #6FCF97) 32%, transparent); }
.havn-syn-pill.is-failed,
.havn-syn-pill.is-block   { color: var(--mc-danger, #E0857B); background: color-mix(in srgb, var(--mc-danger, #E0857B) 12%, transparent); border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 32%, transparent); }
.havn-syn-pill.is-warn,
.havn-syn-pill.is-approval{ color: var(--mc-warn, #D4B370); background: color-mix(in srgb, var(--mc-warn, #D4B370) 12%, transparent); border-color: color-mix(in srgb, var(--mc-warn, #D4B370) 32%, transparent); }
.havn-syn-pill.is-ready   { color: var(--mc-info, #8AB4F8); background: color-mix(in srgb, var(--mc-info, #8AB4F8) 12%, transparent); border-color: color-mix(in srgb, var(--mc-info, #8AB4F8) 32%, transparent); }
.havn-syn-pill.is-off, .havn-syn-pill.is-withdrawn { color: var(--mc-text-3); }
.havn-syn-tag { display: inline-block; margin-top: 5px; padding: 1px 7px; border: 1px solid var(--mc-border-2); border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3); }

/* ---- listings board ---- */
.havn-syn-board { padding: 0; overflow: hidden; }
.havn-syn-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--mc-border); }
.havn-syn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.havn-syn-chip { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--mc-text-2); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.havn-syn-chip small { font-size: 11px; opacity: .7; }
.havn-syn-chip:hover { color: var(--mc-text); }
.havn-syn-chip.is-active { background: var(--mc-accent, #D4B370); color: rgb(26,19,5); font-weight: 600; }
.havn-syn-search { flex: 1 1 220px; max-width: 420px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--mc-border-2); border-radius: 10px; background: var(--mc-surface); color: var(--mc-text-3); }
.havn-syn-search svg { width: 15px; height: 15px; flex: none; }
.havn-syn-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mc-text); font: inherit; font-size: 13px; }
.havn-syn-select, .havn-syn-field select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--mc-border-2); border-radius: 10px; background: var(--mc-surface); color: var(--mc-text); font: inherit; font-size: 12.5px; }
.havn-syn-table-wrap { overflow-x: auto; }
.havn-syn-table { width: 100%; border-collapse: collapse; }
.havn-syn-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3); border-bottom: 1px solid var(--mc-border); white-space: nowrap; }
.havn-syn-table td { padding: 14px 16px; border-bottom: 1px solid var(--mc-border); font-size: 13px; color: var(--mc-text-2); vertical-align: middle; }
.havn-syn-table tr:last-child td { border-bottom: 0; }
.havn-syn-table tbody tr { cursor: pointer; transition: background .15s; }
.havn-syn-table tbody tr:hover { background: var(--mc-surface); }
.havn-syn-table .is-act { text-align: right; }
.havn-syn-prop strong { display: block; color: var(--mc-text); font-size: 13.5px; font-weight: 600; }
.havn-syn-prop small { display: block; color: var(--mc-text-3); font-size: 12px; margin-top: 2px; }
.havn-syn-ready { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.havn-syn-ready b { font-weight: 700; }
.havn-syn-ready.is-block b { color: var(--mc-danger, #E0857B); }
.havn-syn-ready.is-warn b  { color: var(--mc-warn, #D4B370); }
.havn-syn-ready.is-ok b    { color: var(--mc-success, #6FCF97); }
.havn-syn-foot { padding: 11px 16px; border-top: 1px solid var(--mc-border); color: var(--mc-text-3); font-size: 12px; }

/* ---- drawer + modal (moved under .havn-mc so tokens + .is-light apply) ---- */
.havn-syn-shade { position: fixed; inset: 0; background: rgba(8,8,12,.55); backdrop-filter: blur(2px); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity .2s; }
.havn-syn-shade.is-open { opacity: 1; pointer-events: auto; }
.havn-syn-sub { margin: 0 0 14px; color: var(--mc-text-3); font-size: 12.5px; }
.havn-syn-group { border: 1px solid var(--mc-border); border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
.havn-syn-group > header { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; background: var(--mc-surface); border-bottom: 1px solid var(--mc-border); font-size: 12.5px; font-weight: 600; color: var(--mc-text); }
.havn-syn-group > header span { font-weight: 500; color: var(--mc-text-3); font-size: 11.5px; }
.havn-syn-check { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 11px 13px; border-top: 1px solid var(--mc-border); }
.havn-syn-check:first-of-type { border-top: 0; }
.havn-syn-check > b { font-size: 13px; line-height: 1.4; }
.havn-syn-check strong { display: block; font-size: 13px; font-weight: 500; color: var(--mc-text); }
.havn-syn-check small { display: block; font-size: 12px; color: var(--mc-text-3); margin-top: 2px; }
.havn-syn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.havn-syn-field label { font-size: 11px; font-weight: 600; color: var(--mc-text-2); }
.havn-syn-field textarea { min-height: 150px; resize: vertical; padding: 10px; border-radius: 9px; border: 1px solid var(--mc-border-2); background: var(--mc-surface); color: var(--mc-text); font: 12.5px/1.55 Inter, system-ui, sans-serif; outline: none; }
.havn-syn-field textarea:focus, .havn-syn-search:focus-within { border-color: var(--mc-accent); box-shadow: 0 0 0 3px var(--mc-accent-soft, rgba(212,179,112,.18)); }
.havn-syn-approval { padding: 13px; border: 1px solid var(--mc-border); border-radius: 12px; background: var(--mc-surface); }
.havn-syn-approval.is-approved { border-color: color-mix(in srgb, var(--mc-success, #6FCF97) 40%, transparent); }
.havn-syn-approval header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.havn-syn-approval header strong { font-size: 13px; color: var(--mc-text); }
.havn-syn-approval p { margin: 6px 0 12px; font-size: 12px; color: var(--mc-text-3); }
.havn-syn-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.havn-syn-reason { margin: 8px 0 0; font-size: 12px; color: var(--mc-text-3); text-align: right; }
.havn-syn-history { list-style: none; margin: 0; padding: 0; }
.havn-syn-history li { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mc-border); font-size: 12.5px; color: var(--mc-text-2); }
.havn-syn-history li i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; border: 1px solid var(--mc-accent); }
.havn-syn-history time { color: var(--mc-text-3); font-size: 11.5px; white-space: nowrap; }

.havn-syn-modal { position: fixed; left: 50%; top: 50%; z-index: 9993; width: min(460px, calc(100vw - 28px)); padding: 20px; border-radius: 16px;
	background: var(--mc-bg-2, #121218); color: var(--mc-text); border: 1px solid var(--mc-border-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
	transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; font: 14px/1.5 Inter, system-ui, sans-serif; }
.havn-syn-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.havn-syn-modal h2 { margin: 4px 0 8px; font-size: 22px; font-weight: 600; font-family: var(--mc-serif, "Fraunces", Georgia, serif); }
.havn-syn-modal > p { margin: 0 0 14px; font-size: 12.5px; color: var(--mc-text-3); }
.havn-syn-modal .havn-syn-actions { margin-top: 16px; }
.havn-syn-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-accent); }
.havn-syn-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9995; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100vw - 24px);
	padding: 10px 16px; border-radius: 12px; background: var(--mc-bg-2, #121218); color: var(--mc-text); border: 1px solid var(--mc-border-2); font-size: 12.5px; transition: .2s; box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); }
.havn-mc.is-light .havn-syn-toast { background: #FFFFFF; }
.havn-syn-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.havn-syn :focus-visible, .havn-syn-drawer :focus-visible, .havn-syn-modal :focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }

/* ---- container breakpoints: react to the sidebar, not the window ---- */
@container syn (max-width: 1080px) {
	.havn-syn-row { grid-template-columns: minmax(0, 1fr); }
}
@container syn (max-width: 860px) {
	.havn-syn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.havn-syn-search { max-width: none; margin-left: 0; flex-basis: 100%; }
}
@container syn (max-width: 960px) {
	/* table → stacked cards; nothing scrolls sideways */
	.havn-syn-table thead { display: none; }
	.havn-syn-table, .havn-syn-table tbody, .havn-syn-table tr, .havn-syn-table td { display: block; width: 100%; }
	.havn-syn-table tr { padding: 12px 16px; border-bottom: 1px solid var(--mc-border); }
	.havn-syn-table tr:last-child { border-bottom: 0; }
	.havn-syn-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
	.havn-syn-table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3); }
	.havn-syn-table td.havn-syn-prop { display: block; padding-bottom: 6px; }
	.havn-syn-table .is-act { justify-content: flex-end; padding-top: 8px; }
}
@container syn (max-width: 460px) {
	.havn-syn-kpis { grid-template-columns: minmax(0, 1fr); }
	.havn-syn-queue li { grid-template-columns: 30px minmax(0, 1fr); }
	.havn-syn-queue li .havn-mc-btn { grid-column: 2; justify-self: start; }
	.havn-syn-strip-note { flex-basis: 100%; }
}
@media (max-width: 560px) {
	.havn-syn-dhead { padding: 18px 16px 14px; }
	.havn-syn-dbody { padding: 14px 16px 24px; }
	.havn-syn-check { grid-template-columns: 18px minmax(0,1fr); }
	.havn-syn-check .havn-syn-pill { grid-column: 2; justify-self: start; }
}

/* ---- shell overrides: the legacy dashboard CSS forces uppercase on buttons
   and a colour on every span/input. Scope the fixes to this view. ---- */
.havn-mc .havn-syn-kpis .havn-mc-kpi, .havn-mc .havn-syn-kpis .havn-mc-kpi * { text-transform: none !important; letter-spacing: normal; }
.havn-mc .havn-syn-kpis .havn-mc-kpi-label { color: var(--mc-text-2) !important; font-size: 13px; }
.havn-mc .havn-syn-kpis .havn-mc-kpi-sub { color: var(--mc-text-3) !important; font-size: 12px; }
.havn-mc .havn-syn-kpis .havn-mc-kpi-value { color: var(--mc-text) !important; }
.havn-mc .havn-syn-chip { text-transform: none !important; letter-spacing: normal !important; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-chip.is-active { color: rgb(26,19,5) !important; }
.havn-mc .havn-syn-conn { text-transform: none !important; letter-spacing: normal !important; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-qicon.is-block, .havn-mc .havn-syn-ready.is-block b { color: var(--mc-danger, #E0857B) !important; }
.havn-mc .havn-syn-qicon.is-warn,  .havn-mc .havn-syn-ready.is-warn b  { color: var(--mc-warn, #D4B370) !important; }
.havn-mc .havn-syn-ready.is-ok b { color: var(--mc-success, #6FCF97) !important; }
.havn-mc .havn-syn-pill.is-live { color: var(--mc-success, #6FCF97) !important; }
.havn-mc .havn-syn-pill.is-failed, .havn-mc .havn-syn-pill.is-block { color: var(--mc-danger, #E0857B) !important; }
.havn-mc .havn-syn-pill.is-warn, .havn-mc .havn-syn-pill.is-approval { color: var(--mc-warn, #D4B370) !important; }
.havn-mc .havn-syn-pill.is-ready { color: var(--mc-info, #8AB4F8) !important; }
.havn-mc .havn-syn-pill.is-off, .havn-mc .havn-syn-pill.is-withdrawn { color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-qtext span, .havn-mc .havn-syn-prop small, .havn-mc .havn-syn-portals small, .havn-mc .havn-syn-strip-note { color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-search input, .havn-mc .havn-syn-search input:focus {
	border: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important;
	height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; color: var(--mc-text) !important; font-size: 13px !important; }
.havn-mc.is-light .havn-syn-qicon { background: var(--mc-bg-2); }
.havn-mc .havn-syn-eyebrow { color: var(--mc-accent) !important; }
.havn-mc .havn-syn-close { width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 50% !important; background: transparent !important; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-search input[type="search"] { -webkit-appearance: none; appearance: none; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.havn-mc .havn-syn-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

@container syn (max-width: 960px) and (min-width: 560px) {
	.havn-syn-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.havn-syn-table tr { border-right: 1px solid var(--mc-border); }
	.havn-syn-table tr:nth-child(2n) { border-right: 0; }
	.havn-syn-table tr:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ---- connect flow ---- */
.havn-mc .havn-syn-portals li { display: flex; align-items: center; gap: 10px; }
.havn-mc .havn-syn-portals li > div { flex: 1 1 auto; min-width: 0; }
.havn-mc .havn-syn-portals li .havn-mc-btn { flex: none; }
@container syn (max-width: 520px) { .havn-mc .havn-syn-portals li { flex-wrap: wrap; } .havn-mc .havn-syn-portals li .havn-mc-btn { margin-left: auto; } }
.havn-syn-modal { max-height: calc(100vh - 40px); overflow-y: auto; width: min(520px, calc(100vw - 28px)) !important; }
.havn-syn-modal .havn-syn-portals li { flex-wrap: wrap; }
.havn-mc .havn-syn-conn.is-pending { color: var(--mc-info, #8AB4F8) !important; border-color: color-mix(in srgb, var(--mc-info, #8AB4F8) 40%, transparent); }
.havn-mc .havn-syn-conn.is-pending i { background: var(--mc-info, #8AB4F8); }
.havn-mc .havn-syn-back { all: unset; cursor: pointer; font-size: 12px; color: var(--mc-text-3) !important; margin-bottom: 10px; display: inline-block; text-transform: none !important; }
.havn-mc .havn-syn-back:hover { color: var(--mc-text) !important; }
.havn-syn-steps { list-style: none; margin: 0 0 16px; padding: 12px 14px; display: grid; gap: 8px; border: 1px solid var(--mc-border); border-radius: 12px; }
.havn-syn-steps li { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--mc-text-2); }
.havn-syn-steps b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex: none; background: color-mix(in srgb, var(--mc-accent) 16%, transparent); color: var(--mc-accent); }
.havn-syn-form { display: grid; gap: 12px; }
.havn-mc .havn-syn-form .havn-syn-field { display: grid; gap: 6px; margin: 0; }
.havn-mc .havn-syn-form .havn-syn-field label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-form input[type="text"], .havn-mc .havn-syn-form input[type="password"] {
	width: 100%; box-sizing: border-box; height: 42px !important; padding: 0 12px !important; border-radius: 10px !important; margin: 0 !important;
	border: 1px solid var(--mc-border) !important; background: var(--mc-bg-2, rgba(255,255,255,.03)) !important; color: var(--mc-text) !important; font-size: 13.5px !important; box-shadow: none !important; }
.havn-mc .havn-syn-form input:focus { border-color: var(--mc-accent) !important; outline: 0 !important; }
.havn-mc .havn-syn-form input[aria-invalid="true"] { border-color: var(--mc-danger, #E0857B) !important; }
.havn-mc .havn-syn-form .havn-syn-field small { font-size: 11.5px; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-err { font-style: normal; font-size: 11.5px; color: var(--mc-danger, #E0857B) !important; }
.havn-mc .havn-syn-err:empty { display: none; }
.havn-mc .havn-syn-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--mc-text-2) !important; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.havn-mc .havn-syn-tick input { width: 16px; height: 16px; margin: 1px 0 0 !important; accent-color: #D4B370; flex: none; }
.havn-syn-kv { list-style: none; margin: 8px 0 16px; padding: 0; border: 1px solid var(--mc-border); border-radius: 12px; }
.havn-syn-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--mc-border); }
.havn-syn-kv li:last-child { border-bottom: 0; }
.havn-mc .havn-syn-kv span { color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-kv b { color: var(--mc-text) !important; font-weight: 600; }
.havn-mc .havn-mc-btn-danger, .havn-mc .havn-syn-danger { color: var(--mc-danger, #E0857B) !important; border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 45%, transparent) !important; background: transparent !important; }
/* portal rows: info on top, status + action beneath — same rhythm in card and modal */
.havn-mc .havn-syn-portals li { display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "info info" "pill act"; align-items: center; gap: 10px 10px; }
.havn-mc .havn-syn-portals li > div { grid-area: info; }
.havn-mc .havn-syn-portals li > .havn-syn-pill { grid-area: pill; justify-self: start; }
.havn-mc .havn-syn-portals li > .havn-mc-btn { grid-area: act; justify-self: end; }
.havn-mc .havn-syn-back { display: block !important; width: max-content; }

.havn-mc.is-light .havn-syn-modal { background: #FFFFFF; }
body.havn-mc-light .havn-syn-shade { background: rgba(15,15,20,.32); }

/* ==========================================================================
   Listing panel — the standard HAVN record drawer (.havn-mc-drawer), same
   anatomy as the Prospecting person panel: identity head, pill row, quick
   actions, underline tabs, card grid body. Resize grip + full-screen toggle
   come from the shared drawer chrome in havn-mission-control.js.
   ========================================================================== */
.havn-syn-drawer.havn-mc-drawer { z-index: 9991; font: 14px/1.5 Inter, system-ui, -apple-system, sans-serif; }
.havn-syn-drawer .havn-mc-drawer-head { padding: 22px 24px 0; }
.havn-syn-drawer .havn-mc-drawer-head-top { align-items: flex-start; }
.havn-syn-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.havn-syn-id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.havn-syn-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: color-mix(in srgb, var(--mc-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mc-accent) 35%, transparent); }
.havn-mc .havn-syn-avatar svg { width: 18px; height: 18px; color: var(--mc-accent) !important; }
.havn-mc .havn-syn-drawer .havn-mc-drawer-head-top h2 { margin: 0; font: 600 24px/1.15 var(--mc-serif, "Fraunces", Georgia, serif); letter-spacing: -.01em; color: var(--mc-text) !important; overflow-wrap: anywhere; }
.havn-mc .havn-syn-drawer .havn-mc-drawer-meta { margin: 0; font-size: 13px; color: var(--mc-text-3) !important; }
.havn-syn-drawer .havn-mc-drawer-head-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
.havn-mc .havn-syn-drawer .havn-mc-drawer-head-actions .havn-mc-iconbtn {
	box-sizing: border-box !important; width: 32px !important; height: 32px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
	display: grid !important; place-items: center; border-radius: 8px !important; border: 1px solid var(--mc-border-2) !important; background: transparent !important; line-height: 0 !important; color: var(--mc-text-2) !important; cursor: pointer; }
.havn-mc .havn-syn-drawer .havn-mc-drawer-head-actions .havn-mc-iconbtn:hover { color: var(--mc-text) !important; border-color: var(--mc-text-3) !important; }
.havn-syn-drawer .havn-mc-drawer-head-actions .havn-mc-iconbtn svg { width: 16px; height: 16px; flex: none; }
.havn-syn-drawer .havn-mc-drawer-pillrow { margin-top: 14px; gap: 6px; }
.havn-mc .havn-syn-why { font-size: 12px; color: var(--mc-text-3) !important; }
.havn-syn-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.havn-mc .havn-syn-quick .havn-mc-btn { height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
.havn-syn-quick .havn-mc-btn svg { width: 14px; height: 14px; }
.havn-syn-dtabs { display: flex; gap: 2px; margin: 14px -4px 0; overflow-x: auto; scrollbar-width: none; }
.havn-mc .havn-syn-dtab, .havn-mc .havn-syn-dtab:hover, .havn-mc .havn-syn-dtab:focus {
	-webkit-appearance: none; appearance: none; margin: 0; padding: 10px 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; cursor: pointer; white-space: nowrap; height: auto !important;
	font: 620 13px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-dtab:hover { color: var(--mc-text) !important; }
.havn-mc .havn-syn-dtab.is-on { border-bottom-color: var(--mc-accent) !important; color: var(--mc-text) !important; }
.havn-mc .havn-syn-dtab span { margin-left: 4px; font-size: 11px; color: var(--mc-text-3) !important; }
.havn-syn-drawer .havn-mc-drawer-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 14px; align-content: start; padding: 20px 24px 28px; }
.havn-syn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.havn-syn-card2 { padding: 14px 16px; border-radius: var(--mc-radius, 14px); border: 1px solid var(--mc-border); background: var(--mc-bg-3, rgba(255,255,255,.02)); min-width: 0; }
.havn-syn-card2.is-span { grid-column: 1 / -1; }
.havn-mc .havn-syn-card2 h4 { margin: 0 0 10px; font: 650 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-card2 > p { margin: -2px 0 10px; font-size: 12px; line-height: 1.5; color: var(--mc-text-3) !important; }
.havn-syn-fact { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--mc-border); font-size: 13px; }
.havn-syn-fact:first-of-type { border-top: 0; }
.havn-mc .havn-syn-fact span { color: var(--mc-text-3) !important; flex: none; }
.havn-mc .havn-syn-fact strong { font-weight: 550; text-align: right; overflow-wrap: anywhere; color: var(--mc-text) !important; }
.havn-mc .havn-syn-fact strong.is-accent { color: var(--mc-accent) !important; }
.havn-syn-list { list-style: none; margin: 0; padding: 0; }
.havn-syn-li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mc-border); }
.havn-syn-li:first-child { border-top: 0; }
.havn-syn-li > div { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.havn-syn-li-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--mc-border-2); font: 700 12px/1 Inter, system-ui, sans-serif; }
.havn-mc .havn-syn-li-ic.is-block { color: var(--mc-danger, #E0857B) !important; border-color: color-mix(in srgb, #E0857B 45%, transparent); }
.havn-mc .havn-syn-li-ic.is-warn  { color: #D4B370 !important; border-color: color-mix(in srgb, #D4B370 45%, transparent); }
.havn-mc .havn-syn-li-ic.is-ok    { color: #6FCF97 !important; border-color: color-mix(in srgb, #6FCF97 40%, transparent); }
.havn-mc .havn-syn-li strong { font: 620 13px/1.3 Inter, system-ui, sans-serif; color: var(--mc-text) !important; }
.havn-mc .havn-syn-li > div > span { font-size: 12px; color: var(--mc-text-3) !important; }
.havn-syn-li .havn-mc-btn { flex: none; }
.havn-mc .havn-syn-empty2 { font-size: 12.5px; color: var(--mc-text-3) !important; padding: 4px 0; }
.havn-syn-copy > div { font-size: 13px; line-height: 1.65; padding-left: 12px; border-left: 3px solid var(--mc-accent); white-space: pre-wrap; }
.havn-mc .havn-syn-copy > div { color: var(--mc-text-2) !important; }
.havn-syn-drawer .havn-syn-field textarea { min-height: 170px; }
/* Full screen: centred content (padding from the shared rule) + roomier grid */
.havn-syn-drawer.is-wide .havn-syn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 861px) {
	.havn-syn-grid { grid-template-columns: minmax(0, 1fr); }
	.havn-syn-drawer .havn-mc-drawer-head { padding: 18px 16px 0; }
	.havn-syn-drawer .havn-mc-drawer-body { padding: 16px; }
}

/* ==== operators + notes (v2.2.211) ==== */
.havn-syn-faces { display: inline-flex; align-items: center; }
.havn-syn-face { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-left: -6px; font: 650 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
	background: color-mix(in srgb, #8AB4F8 18%, var(--mc-bg-2, #16161c)); border: 2px solid var(--mc-bg-2, #16161c); }
.havn-syn-faces .havn-syn-face:first-child { margin-left: 0; }
.havn-mc .havn-syn-face { color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-face.is-owner { background: color-mix(in srgb, #D4B370 22%, var(--mc-bg-2, #16161c)); color: #D4B370 !important; }
.havn-mc .havn-syn-face.is-more { background: var(--mc-surface); color: var(--mc-text-3) !important; }
body.havn-mc-light .havn-syn-face { border-color: #fff; }
body.havn-mc-light .havn-mc .havn-syn-face.is-owner, body.havn-mc-light .havn-syn-drawer .havn-syn-face.is-owner { color: #7A5F24 !important; }
.havn-mc .havn-syn-opnote { display: block; margin-top: 4px; font-size: 11px; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-notecount { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 6px; font-size: 11px; color: #D4B370 !important; }
.havn-syn-notecount svg { width: 12px; height: 12px; }
.havn-syn-drawer .havn-mc-drawer-pillrow .havn-syn-faces { margin: 0 4px; }

.havn-syn-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.havn-syn-drawer.is-wide .havn-syn-ops { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.havn-syn-op { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mc-border); background: var(--mc-surface, rgba(255,255,255,.03)); }
.havn-syn-op.is-owner { border-color: color-mix(in srgb, #D4B370 35%, transparent); background: color-mix(in srgb, #D4B370 9%, transparent); }
.havn-syn-op .havn-syn-face { width: 30px; height: 30px; margin: 0; border: 0; }
.havn-syn-op > span { display: flex; flex-direction: column; min-width: 0; }
.havn-mc .havn-syn-op strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.havn-mc .havn-syn-op strong em { font-style: normal; font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #D4B370 !important; margin-left: 4px; }
.havn-mc .havn-syn-op small { font-size: 11px; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-opx { all: unset; box-sizing: border-box; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; cursor: pointer; border: 1px solid transparent; color: var(--mc-text-3) !important; }
.havn-syn-opx svg { width: 14px; height: 14px; }
.havn-mc .havn-syn-opx:hover, .havn-mc .havn-syn-opx:focus-visible { color: #E0857B !important; border-color: rgba(224,133,123,.45); background: rgba(224,133,123,.1); }
.havn-syn-opadd { display: flex; gap: 8px; margin-top: 12px; max-width: 520px; }
.havn-mc .havn-syn-opadd select, .havn-mc .havn-syn-f input, .havn-mc .havn-syn-f select, .havn-mc .havn-syn-f textarea {
	flex: 1 1 auto; min-width: 0; box-sizing: border-box; width: 100%; height: 38px !important; margin: 0 !important; padding: 0 10px !important; border-radius: 9px !important;
	border: 1px solid var(--mc-border-2, rgba(255,255,255,.12)) !important; background: rgba(255,255,255,.04) !important; color: var(--mc-text) !important; font: 12.5px Inter, system-ui, sans-serif !important; box-shadow: none !important; color-scheme: dark; }
body.havn-mc-light .havn-syn-opadd select, body.havn-mc-light .havn-syn-f :is(input, select, textarea) { background: #F7F6F2 !important; color-scheme: light; }
.havn-mc .havn-syn-f textarea { height: auto !important; min-height: 76px; padding: 9px 10px !important; resize: vertical; line-height: 1.5 !important; }
.havn-mc .havn-syn-opadd select:focus, .havn-mc .havn-syn-f :is(input, select, textarea):focus { border-color: var(--mc-accent) !important; outline: 0 !important; box-shadow: 0 0 0 3px var(--mc-accent-soft, rgba(212,179,112,.18)) !important; }
.havn-syn-opadd .havn-mc-btn { flex: none; }
.havn-syn-opmore { margin-top: 10px; }

.havn-syn-noteform { display: grid; gap: 11px; }
.havn-syn-noteform h4 { margin-bottom: 0 !important; }
.havn-syn-noterow { display: flex; flex-wrap: wrap; gap: 10px; }
.havn-syn-noterow > .havn-syn-f { flex: 0 1 150px; min-width: 0; }
.havn-syn-noterow > .havn-syn-f.is-grow { flex: 1 1 240px; }
.havn-syn-f { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.havn-mc .havn-syn-f > span { font-size: 11px; font-weight: 600; color: var(--mc-text-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
.havn-mc .havn-syn-f > span em { font-style: normal; font-weight: 500; color: var(--mc-text-3) !important; }
.havn-syn-notefoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.havn-syn-notefoot p, .havn-syn-lockline { display: flex; gap: 8px; align-items: flex-start; margin: 0; flex: 1 1 260px; font-size: 11.5px; line-height: 1.5; }
.havn-syn-notefoot svg, .havn-syn-lockline svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.havn-mc .havn-syn-notefoot p *, .havn-mc .havn-syn-lockline * { color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-lockline strong { color: var(--mc-text-2) !important; }
.havn-syn-lockline { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mc-border); }

.havn-syn-notes { list-style: none; margin: 0; padding: 0; }
.havn-syn-notes > li { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mc-border); align-items: start; }
.havn-syn-notes > li:first-child { border-top: 0; }
.havn-syn-notes > li.is-done > div { opacity: .6; }
.havn-syn-nface { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 650 10.5px/1 Inter, system-ui, sans-serif; background: color-mix(in srgb, #8AB4F8 18%, transparent); }
.havn-mc .havn-syn-nface { color: var(--mc-text-2) !important; }
.havn-syn-nface.is-sys { background: var(--mc-surface); border: 1px solid var(--mc-border); }
.havn-syn-nface svg { width: 13px; height: 13px; }
.havn-syn-notes header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.havn-mc .havn-syn-notes header strong { font: 620 13px/1.3 Inter, system-ui, sans-serif; color: var(--mc-text) !important; margin-right: 2px; }
.havn-mc .havn-syn-notes p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mc-text-2) !important; white-space: pre-wrap; }
.havn-mc .havn-syn-notes footer { margin-top: 5px; font-size: 11.5px; color: var(--mc-text-3) !important; }
.havn-syn-npri, .havn-syn-nstat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 650; border: 1px solid var(--pill, var(--mc-border-2)); }
.havn-mc .havn-syn-npri { color: var(--pill) !important; }
.havn-mc .havn-syn-nstat.is-open { color: #E0857B !important; --pill: rgba(224,133,123,.45); }
.havn-mc .havn-syn-nstat.is-done { color: #6FCF97 !important; --pill: rgba(111,207,151,.45); }
.havn-mc .havn-syn-nstat.is-sys { color: var(--mc-text-3) !important; }
.havn-syn-nacts { display: flex; gap: 4px; }
.havn-mc .havn-syn-nbtn { all: unset; box-sizing: border-box; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid transparent; cursor: pointer; color: var(--mc-text-3) !important; }
.havn-syn-nbtn svg { width: 14px; height: 14px; }
.havn-mc .havn-syn-nbtn:hover, .havn-mc .havn-syn-nbtn:focus-visible { border-color: var(--mc-border-2); color: var(--mc-text) !important; }
.havn-mc .havn-syn-nbtn.is-danger:hover { color: #E0857B !important; }
@media (max-width: 861px) { .havn-syn-noterow > .havn-syn-f { flex: 1 1 100%; } .havn-syn-opadd { flex-wrap: wrap; } }


/* ==========================================================================
   v2.2.212 — full workspace on the same look: listing editor, photos,
   per-portal versions, portal preview, real delivery. Same tokens as above.
   ========================================================================== */
.havn-mc .havn-syn-unconf { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 600 10px/1.5 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
	color: var(--mc-warn, #D4B370) !important; border: 1px solid color-mix(in srgb, var(--mc-warn, #D4B370) 45%, transparent); }
.havn-mc .havn-syn-conn.is-soon { opacity: .55; cursor: default; }
.havn-mc .havn-syn-portals li.is-soon, .havn-mc .havn-syn-li.is-soon { opacity: .6; }
.havn-mc .havn-syn-table th.is-soon { opacity: .55; }
.havn-mc .havn-syn-table th.is-soon small { display: block; font-size: 10px; letter-spacing: .06em; }
.havn-mc .havn-syn-toast.is-bad { border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 55%, transparent); color: var(--mc-text) !important; }
.havn-syn-drawer.is-busy { cursor: progress; }
.havn-syn-drawer.is-busy .havn-mc-drawer-body { opacity: .72; transition: opacity .15s; }
.havn-mc .havn-syn-linkbtn { all: unset; cursor: pointer; color: var(--mc-accent) !important; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.havn-mc .havn-syn-lede { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--mc-text-3) !important; }

/* board: hero thumbnail in the property cell */
.havn-syn-propin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.havn-syn-propin > div { min-width: 0; }
.havn-syn-rowthumb { flex: none; width: 56px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--mc-border); background: var(--mc-surface); }
.havn-mc .havn-syn-rowthumb.is-empty { display: grid; place-items: center; color: var(--mc-text-3) !important; }
.havn-syn-rowthumb.is-empty svg { width: 16px; height: 16px; }
@container syn (max-width: 460px) { .havn-syn-rowthumb { width: 44px; height: 34px; } }

/* drawer avatar shows the hero photo */
.havn-syn-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* overview hero card */
.havn-syn-herocard { padding: 0; overflow: hidden; }
.havn-mc .havn-syn-hero { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; min-height: 220px; cursor: pointer; }
.havn-syn-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.havn-mc .havn-syn-hero > span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
	background: rgba(10,10,14,.72); color: #F4F4F5 !important; font-size: 11.5px; backdrop-filter: blur(4px); }
.havn-syn-hero > span svg { width: 13px; height: 13px; }
.havn-mc .havn-syn-hero.is-empty { display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 20px; color: var(--mc-text-3) !important; border: 1px dashed var(--mc-border-2); border-radius: inherit; }
.havn-syn-hero.is-empty svg { width: 22px; height: 22px; color: var(--mc-accent); }
.havn-mc .havn-syn-hero.is-empty strong { color: var(--mc-text) !important; font-size: 13px; }
.havn-mc .havn-syn-hero.is-empty span { font-size: 12px; }

/* listing details editor */
.havn-syn-fgroup { display: grid; gap: 10px; }
.havn-syn-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.havn-syn-drawer.is-wide .havn-syn-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.havn-syn-fd { display: grid; gap: 5px; min-width: 0; align-content: start; border-radius: 10px; transition: box-shadow .3s; }
.havn-syn-fd.is-wide { grid-column: 1 / -1; }
.havn-syn-fd.is-flash { box-shadow: 0 0 0 3px var(--mc-accent-soft, rgba(212,179,112,.28)); }
.havn-mc .havn-syn-fd > label { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font: 600 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-fd > label small { font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-req { padding: 1px 6px; border-radius: 999px; font: 600 9.5px/1.5 Inter, system-ui, sans-serif; letter-spacing: .02em; text-transform: none; color: var(--mc-text-3) !important; border: 1px solid var(--mc-border-2); }
.havn-mc .havn-syn-fd input, .havn-mc .havn-syn-fd select, .havn-mc .havn-syn-fd textarea,
.havn-mc .havn-syn-caption, .havn-mc .havn-syn-appform input, .havn-mc .havn-syn-appform select, .havn-mc .havn-syn-noteform textarea {
	box-sizing: border-box; width: 100%; min-width: 0; margin: 0; height: 38px; padding: 0 12px; border-radius: 10px !important; border: 1px solid var(--mc-border-2) !important;
	background: var(--mc-surface) !important; color: var(--mc-text) !important; font: 13px/1.4 Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; outline: none; box-shadow: none; }
.havn-mc .havn-syn-fd textarea, .havn-mc .havn-syn-noteform textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.55 !important; }
.havn-mc .havn-syn-fd input:focus, .havn-mc .havn-syn-fd select:focus, .havn-mc .havn-syn-fd textarea:focus, .havn-mc .havn-syn-caption:focus,
.havn-mc .havn-syn-appform input:focus, .havn-mc .havn-syn-appform select:focus, .havn-mc .havn-syn-noteform textarea:focus { border-color: var(--mc-accent) !important; box-shadow: 0 0 0 3px var(--mc-accent-soft, rgba(212,179,112,.18)); }
.havn-mc .havn-syn-fd :disabled { opacity: .6; cursor: not-allowed; }
.havn-syn-inwrap { position: relative; }
.havn-syn-inwrap.is-money::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--mc-text-3); pointer-events: none; }
.havn-mc .havn-syn-inwrap.is-money input { padding-left: 24px; }
.havn-syn-inwrap.is-area::after { content: "m\00B2"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mc-text-3); pointer-events: none; }
.havn-mc .havn-syn-inwrap.is-area input { padding-right: 34px; }
.havn-mc .havn-syn-fd > small { font-size: 11.5px; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-fd.is-dirty > label { color: var(--mc-accent) !important; }
.havn-mc .havn-syn-fd.is-dirty input, .havn-mc .havn-syn-fd.is-dirty select, .havn-mc .havn-syn-fd.is-dirty textarea { border-color: color-mix(in srgb, var(--mc-accent) 60%, transparent) !important; }
.havn-mc .havn-syn-fd.is-bad input, .havn-mc .havn-syn-fd.is-bad select, .havn-mc .havn-syn-fd.is-bad textarea { border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 70%, transparent) !important; }
.havn-mc .havn-syn-err { display: block; font-size: 11.5px; font-style: normal; color: var(--mc-danger, #E0857B) !important; }
.havn-mc .havn-syn-err:empty { display: none; }
.havn-mc .havn-syn-err.is-warn { color: var(--mc-warn, #D4B370) !important; }
.havn-syn-agents { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.havn-mc .havn-syn-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mc-text) !important; cursor: pointer; }
.havn-mc .havn-syn-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--mc-accent); }
.havn-mc .havn-syn-tick small { color: var(--mc-text-3) !important; font-size: 11.5px; }

/* sticky save bar */
.havn-syn-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--mc-border-2);
	background: var(--mc-bg-2, #121218); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.5); z-index: 2; }
.havn-syn-savebar[hidden] { display: none; }
.havn-mc.is-light .havn-syn-savebar, body.havn-mc-light .havn-syn-savebar { background: #FFFFFF; }
.havn-mc .havn-syn-savebar > span { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-savebar b { color: var(--mc-text) !important; font-weight: 600; }

/* photos */
.havn-syn-phead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.havn-mc .havn-syn-phead h4 { margin: 0 !important; }
.havn-syn-mediaiss { margin-bottom: 10px !important; }
.havn-mc .havn-syn-drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
	border: 1.5px dashed var(--mc-border-2); border-radius: 12px; background: color-mix(in srgb, var(--mc-accent) 4%, transparent); color: var(--mc-text-3) !important; transition: border-color .15s, background .15s; }
.havn-mc .havn-syn-drop:hover, .havn-mc .havn-syn-drop.is-over { border-color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 10%, transparent); }
.havn-syn-drop svg { width: 22px; height: 22px; color: var(--mc-accent); }
.havn-mc .havn-syn-drop strong { font-size: 13px; font-weight: 600; color: var(--mc-text) !important; }
.havn-mc .havn-syn-drop u { color: var(--mc-accent) !important; text-underline-offset: 2px; }
.havn-mc .havn-syn-drop span { font-size: 11.5px; }
.havn-syn-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.havn-syn-dropalt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 12px; }
.havn-syn-dropalt label { position: relative; }
.havn-syn-uploads { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.havn-syn-uploads:empty { display: none; }
.havn-syn-uploads li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: 10px; font-size: 12px; }
.havn-mc .havn-syn-uploads li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mc-text-2) !important; }
.havn-syn-uploads li i { height: 4px; border-radius: 4px; background: var(--mc-border); overflow: hidden; }
.havn-syn-uploads li i b { display: block; height: 100%; background: var(--mc-accent); transition: width .2s; }
.havn-mc .havn-syn-uploads li em { font-style: normal; color: var(--mc-text-3) !important; white-space: nowrap; }
.havn-mc .havn-syn-uploads li.is-ok em { color: var(--mc-success, #6FCF97) !important; }
.havn-mc .havn-syn-uploads li.is-bad em { color: var(--mc-danger, #E0857B) !important; white-space: normal; }
.havn-syn-uploads li.is-bad i b { background: var(--mc-danger, #E0857B); }
.havn-syn-media { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.havn-syn-mcard { display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--mc-border); background: var(--mc-surface); min-width: 0; transition: border-color .15s, opacity .15s, transform .15s; }
.havn-syn-mcard[draggable="true"] { cursor: grab; }
.havn-syn-mcard.is-drag { opacity: .45; }
.havn-syn-mcard.is-over { border-color: var(--mc-accent); transform: translateY(-2px); }
.havn-syn-mcard.is-plan { background: color-mix(in srgb, var(--mc-info, #8AB4F8) 6%, var(--mc-surface)); }
.havn-syn-mimg { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--mc-bg-2); }
.havn-syn-mimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.havn-syn-mcard.is-plan .havn-syn-mimg img { object-fit: contain; background: #fff; }
.havn-mc .havn-syn-badge { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
	background: rgba(10,10,14,.74); color: #F4F4F5 !important; font: 600 10.5px/1.3 Inter, system-ui, sans-serif; backdrop-filter: blur(3px); }
.havn-syn-badge svg { width: 11px; height: 11px; }
.havn-mc .havn-syn-badge.is-hero { background: var(--mc-accent, #D4B370); color: #16161C !important; }
.havn-mc .havn-syn-badge.is-dim { left: auto; right: 6px; top: auto; bottom: 6px; font-weight: 500; }
.havn-mc .havn-syn-badge.is-dim.is-small { background: rgba(160,110,20,.85); }
.havn-mc .havn-syn-badge + .havn-syn-badge:not(.is-dim) { top: 30px; }
.havn-mc .havn-syn-mnum { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,14,.7); color: #F4F4F5 !important; font: 600 10.5px/1 Inter, system-ui, sans-serif; }
.havn-mc .havn-syn-caption { height: 32px; padding: 0 10px; font-size: 12px !important; }
.havn-mc .havn-syn-capro { margin: 0; font-size: 12px; color: var(--mc-text-2) !important; }
.havn-syn-mbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.havn-syn-mbar .havn-mc-btn { margin-left: auto; }
.havn-mc .havn-syn-nbtn { box-sizing: border-box; display: inline-grid !important; place-items: center; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important;
	border: 1px solid var(--mc-border-2) !important; background: transparent !important; color: var(--mc-text-2) !important; cursor: pointer; line-height: 0 !important; text-decoration: none; }
.havn-mc .havn-syn-nbtn:hover:not(:disabled) { color: var(--mc-text) !important; border-color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-nbtn:disabled { opacity: .35; cursor: default; }
.havn-mc .havn-syn-nbtn.is-danger:hover { color: var(--mc-danger, #E0857B) !important; border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 55%, transparent) !important; }
.havn-syn-nbtn svg { width: 14px; height: 14px; }
.havn-mc .havn-mc-btn-danger { background: color-mix(in srgb, var(--mc-danger, #E0857B) 16%, transparent) !important; border-color: color-mix(in srgb, var(--mc-danger, #E0857B) 60%, transparent) !important; color: var(--mc-danger, #E0857B) !important; }

/* portals tab */
.havn-syn-pcard { display: grid; gap: 12px; }
.havn-syn-pcard > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.havn-syn-pcard > header > div { display: grid; gap: 3px; min-width: 0; }
.havn-mc .havn-syn-pcard > header h4 { margin: 0 !important; font: 600 16px/1.25 var(--mc-serif, "Fraunces", Georgia, serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mc-text) !important; }
.havn-mc .havn-syn-pcard > header span:not(.havn-syn-pill) { font-size: 12px; color: var(--mc-text-3) !important; }
.havn-syn-pcard.is-soon { opacity: .6; }
.havn-syn-pfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.havn-syn-pfacts .havn-syn-fact:nth-child(2) { border-top: 0; }
.havn-mc .havn-syn-plink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mc-accent) !important; text-decoration: none; }
.havn-syn-plink svg { width: 13px; height: 13px; }
.havn-mc .havn-syn-perr { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; color: var(--mc-text) !important;
	background: color-mix(in srgb, var(--mc-danger, #E0857B) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mc-danger, #E0857B) 35%, transparent); }
.havn-syn-perr svg { flex: none; width: 15px; height: 15px; color: var(--mc-danger, #E0857B); margin-top: 1px; }
.havn-mc .havn-syn-info summary { cursor: pointer; font-size: 12px; color: var(--mc-text-3) !important; }
.havn-syn-info[open] summary { margin-bottom: 4px; }
.havn-syn-override { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--mc-border); }
.havn-mc .havn-syn-danger { color: var(--mc-danger, #E0857B) !important; }

/* preview */
.havn-syn-prevchips { margin-bottom: -2px; }
.havn-syn-preview { padding: 0 !important; overflow: visible; display: grid; min-height: max-content; }
/* the drawer body is a fixed-height grid: a clipped card would be squashed to fit, so clip only the gallery corners */
.havn-syn-preview > .havn-syn-gal { border-radius: 14px 14px 0 0; overflow: hidden; }
.havn-syn-herocard { min-height: max-content; }
.havn-syn-gal { position: relative; aspect-ratio: 16 / 10; background: #0B0B0F; }
.havn-syn-gal > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.havn-mc .havn-syn-galnav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center;
	border: 0 !important; background: rgba(10,10,14,.6) !important; color: #fff !important; cursor: pointer; }
.havn-syn-galnav.is-prev { left: 10px; } .havn-syn-galnav.is-next { right: 10px; }
.havn-syn-galnav svg { width: 18px; height: 18px; }
.havn-mc .havn-syn-galcount, .havn-mc .havn-syn-galcap { position: absolute; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(10,10,14,.68); color: #F4F4F5 !important; font-size: 11.5px; }
.havn-syn-galcount { right: 10px; } .havn-syn-galcap { left: 10px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.havn-mc .havn-syn-galempty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; font-size: 12.5px; color: #A1A1AA !important; }
.havn-syn-galempty svg { width: 26px; height: 26px; }
.havn-syn-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; background: var(--mc-surface); border-bottom: 1px solid var(--mc-border); }
.havn-mc .havn-syn-thumbs button { flex: none; width: 72px !important; height: 48px !important; padding: 0 !important; border-radius: 6px !important; overflow: hidden; border: 2px solid transparent !important; background: none !important; cursor: pointer; opacity: .65; }
.havn-mc .havn-syn-thumbs button.is-on { border-color: var(--mc-accent) !important; opacity: 1; }
.havn-syn-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.havn-syn-pvbody { display: grid; gap: 10px; padding: 18px 20px 20px; }
.havn-mc .havn-syn-pvbody p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-pvaddr { font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-pvtitle { margin: 0; font: 600 22px/1.2 var(--mc-serif, "Fraunces", Georgia, serif); color: var(--mc-text) !important; }
.havn-mc .havn-syn-pvprice { font: 600 15px/1.3 Inter, system-ui, sans-serif !important; color: var(--mc-accent) !important; }
.havn-syn-pvfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 4px 0; }
.havn-syn-pvfacts div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mc-border); background: var(--mc-surface); }
.havn-mc .havn-syn-pvfacts dt { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-3) !important; }
.havn-mc .havn-syn-pvfacts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--mc-text) !important; }
.havn-syn-pvfeat { margin: 0; padding-left: 18px; columns: 2; font-size: 12.5px; color: var(--mc-text-2); }
.havn-mc .havn-syn-pvbody h5 { margin: 6px 0 0; font: 650 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3) !important; }
.havn-syn-pvplans { display: flex; flex-wrap: wrap; gap: 8px; }
.havn-syn-pvplans a { display: block; width: 140px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--mc-border); background: #fff; }
.havn-syn-pvplans img { width: 100%; height: 100%; object-fit: contain; }
.havn-syn-pvlinks { display: flex; gap: 14px; }
.havn-mc .havn-syn-pvlinks a { color: var(--mc-accent) !important; font-size: 12.5px; }
.havn-syn-pvagents { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px; border-top: 1px solid var(--mc-border); }
.havn-mc .havn-syn-pvagents span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mc-text-2) !important; }
.havn-syn-pvagents .havn-syn-face { margin-left: 0; }

/* approval + notes forms */
.havn-mc .havn-syn-apphead { display: block; margin: 8px 0 4px; font: 600 17px/1.3 var(--mc-serif, "Fraunces", Georgia, serif); color: var(--mc-text) !important; }
.havn-syn-appform { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px 12px; align-items: end; }
.havn-syn-appform .havn-syn-actions, .havn-syn-appform .havn-syn-err { grid-column: 1 / -1; }
.havn-syn-f { display: grid; gap: 5px; min-width: 0; }
.havn-mc .havn-syn-f > span { font: 600 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-text-2) !important; }
.havn-mc .havn-syn-f > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--mc-text-3) !important; }
.havn-syn-notes li > div > p { white-space: pre-wrap; }

@container syn (max-width: 520px) { .havn-syn-appform { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 861px) {
	.havn-syn-fgrid, .havn-syn-pfacts { grid-template-columns: minmax(0, 1fr); }
	.havn-syn-pfacts .havn-syn-fact:nth-child(2) { border-top: 1px solid var(--mc-border); }
	.havn-syn-appform { grid-template-columns: minmax(0, 1fr); }
	.havn-syn-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.havn-syn-savebar { padding: 10px 16px; flex-wrap: wrap; }
	.havn-syn-uploads li { grid-template-columns: minmax(0, 1fr) 70px; }
	.havn-syn-uploads li em { grid-column: 1 / -1; }
	.havn-syn-pvfeat { columns: 1; }
}